@creezio/mcp-facade 0.22.0

package/dist-cjs/policy.js

@@ -0,0 +1,93 @@
+"use strict";
+/**
+ * Policies MCP H4 — deny cross-layer cohérent api-kernel H2.
+ * H5 — plugin ACL (see/execute) alignée Product Hub.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.denyCrossLayerToolCall = denyCrossLayerToolCall;
+exports.composeToolPolicies = composeToolPolicies;
+exports.createDenyUnauthorizedPluginToolPolicy = createDenyUnauthorizedPluginToolPolicy;
+/**
+ * Deny-by-default si la charge utile tente un échappement cross-layer
+ * (même sémantique que api-kernel `__cross/` / `core/` escaping).
+ */
+function denyCrossLayerToolCall(ctx) {
+    const args = ctx.args || {};
+    for (const [key, value] of Object.entries(args)) {
+        const blob = `${key}=${stringifyArg(value)}`.toLowerCase();
+        if (blob.includes("__cross/") ||
+            blob.includes("__cross") ||
+            /(^|[=\s/])core\//.test(blob) ||
+            blob.includes("/../") ||
+            blob.includes("..\\")) {
+            return { allow: false, reason: "cross_layer_denied" };
+        }
+    }
+    // Un tool module/plugin ne peut pas se faire passer pour core via alias.
+    if (ctx.isAlias && ctx.space === "core") {
+        return { allow: false, reason: "alias_to_core_denied" };
+    }
+    // Spoof explicite de couche cible.
+    const targetSpace = args.targetSpace ?? args.target_space ?? args.space;
+    if (typeof targetSpace === "string" &&
+        targetSpace !== ctx.space &&
+        (targetSpace === "core" ||
+            targetSpace === "module" ||
+            targetSpace === "plugin")) {
+        return { allow: false, reason: "cross_layer_space_spoof" };
+    }
+    return { allow: true };
+}
+/**
+ * Compose plusieurs policies (premier deny gagne).
+ */
+function composeToolPolicies(...policies) {
+    return async (ctx) => {
+        for (const p of policies) {
+            const d = await p(ctx);
+            if (!d.allow)
+                return d;
+        }
+        return { allow: true };
+    };
+}
+/**
+ * H5 — deny tools `plugin.<id>.*` si l'acteur n'a pas `execute`.
+ * Injecter `decidePluginAccess` depuis `@creezio/product-hub` pour
+ * une décision identique à l'API / control-plane.
+ */
+function createDenyUnauthorizedPluginToolPolicy(opts) {
+    const resolveActor = opts.resolveActor ||
+        ((ctx) => ({
+            orgId: ctx.orgId ?? ctx.claims?.orgId ?? null,
+            userId: ctx.subject || null,
+            isOwner: Boolean(ctx.claims?.isOwner),
+            isServiceKey: ctx.subject === "opaque-token" || ctx.subject === "anonymous",
+        }));
+    return (ctx) => {
+        if (ctx.space !== "plugin")
+            return { allow: true };
+        const pluginId = ctx.ownerId;
+        if (!pluginId) {
+            return { allow: false, reason: "acl_plugin_owner_missing" };
+        }
+        const actor = resolveActor(ctx);
+        const decision = opts.decide(opts.getPolicy(pluginId), actor, "execute");
+        if (!decision.allow)
+            return { allow: false, reason: decision.reason };
+        return { allow: true };
+    };
+}
+function stringifyArg(value) {
+    if (value == null)
+        return "";
+    if (typeof value === "string")
+        return value;
+    try {
+        return JSON.stringify(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+//# sourceMappingURL=policy.js.map

package/dist-cjs/policy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"policy.js","sourceRoot":"","sources":["../src/policy.ts"],"names":[],"mappings":"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"}

package/dist-cjs/runtime.js

@@ -0,0 +1,24 @@
+"use strict";
+/**
+ * Contrat MCP produit (D1/C2 → M9) — une seule stack.
+ *
+ * - Exécuteur HTTP public : **Hono** `GET|POST /mcp`.
+ * - Façade Electron `@creezio/mcp-facade` : adaptateur brand-mounts (tests /
+ *   offline) **ou** proxy vers Hono dès qu'un upstream local est annoncé.
+ *
+ * Hermes / Cursor / ChatGPT → toujours `{base}/mcp`, jamais un 2ᵉ serveur
+ * MCP dans le process Electron.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MCP_PRODUCT_EXECUTOR = void 0;
+exports.resolveMcpFacadeRole = resolveMcpFacadeRole;
+exports.MCP_PRODUCT_EXECUTOR = "hono";
+function resolveMcpFacadeRole(mode, upstream) {
+    if (mode === "local-adapter")
+        return "local-brand-adapter";
+    if (mode === "hono-proxy")
+        return "hono-proxy";
+    // hono-preferred
+    return upstream ? "hono-proxy" : "local-brand-adapter";
+}
+//# sourceMappingURL=runtime.js.map

package/dist-cjs/runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.js","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;;;AAiBH,oDAQC;AAvBY,QAAA,oBAAoB,GAAG,MAAe,CAAC;AAepD,SAAgB,oBAAoB,CAClC,IAAmB,EACnB,QAAuB;IAEvB,IAAI,IAAI,KAAK,eAAe;QAAE,OAAO,qBAAqB,CAAC;IAC3D,IAAI,IAAI,KAAK,YAAY;QAAE,OAAO,YAAY,CAAC;IAC/C,iBAAiB;IACjB,OAAO,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC;AACzD,CAAC"}

package/dist-cjs/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist-cjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@creezio/mcp-facade",
+  "version": "0.22.0",
+  "description": "MCP proxy unifié H4 + admin policies/clients/UI (N6)",
+  "type": "module",
+  "main": "./dist-cjs/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist-cjs/index.js",
+      "default": "./dist/index.js"
+    },
+    "./ui": {
+      "types": "./ui/index.ts",
+      "import": "./ui/index.ts",
+      "default": "./ui/index.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "dist-cjs",
+    "ui"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@creezio/api-kernel": "^0.22.0",
+    "@creezio/platform-core": "^0.22.0",
+    "hono": "^4.12.32",
+    "jose": "^6.2.5",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.3",
+    "@types/react": "^18.3.12",
+    "typescript": "^5.8.3"
+  },
+  "license": "UNLICENSED",
+  "module": "./dist/index.js",
+  "peerDependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": ">=0.400.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "sonner": ">=1.0.0",
+    "tailwind-merge": "^2.0.0 || ^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@radix-ui/react-slot": {
+      "optional": true
+    },
+    "@radix-ui/react-tabs": {
+      "optional": true
+    },
+    "class-variance-authority": {
+      "optional": true
+    },
+    "clsx": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    },
+    "tailwind-merge": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/creezio/creezio.git",
+    "directory": "packages/mcp-facade"
+  },
+  "engines": {
+    "node": ">=22.5"
+  }
+}

package/ui/index.ts

@@ -0,0 +1,5 @@
+/**
+ * MCP Admin UI (port TempoFlow — N6).
+ * Consommer via `@creezio/mcp-facade/ui`.
+ */
+export { McpAdminClient } from "./mcp-admin-client";

package/ui/mcp-admin-client.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { CheckCircle2, Copy, Download, RefreshCw, ShieldAlert, XCircle } from "lucide-react";
+import { toast } from "sonner";
+import type { ReactNode } from "react";
+import { Badge } from "./primitives/badge";
+import { Button } from "./primitives/button";
+import { Card, CardContent, CardHeader, CardTitle } from "./primitives/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs";
+
+type Status = {
+  ready: boolean;
+  publicUrl: string | null;
+  mcpUrl: string | null;
+  oauthReady: boolean;
+  jwtConfigured: boolean;
+  toolCount: number;
+  enabledToolCount: number;
+  clientCount: number;
+  enabledClientCount: number;
+};
+
+type Tool = {
+  name: string;
+  category: string;
+  access: "read" | "write";
+  requiredScope: string;
+  enabled: boolean;
+  allowedRoles: string[];
+  annotations?: Record<string, boolean>;
+};
+
+type Client = {
+  client_id: string;
+  client_name: string | null;
+  redirect_uris: string[];
+  token_endpoint_auth_method: string;
+  scope: string | null;
+  created_at: string;
+  enabled: boolean;
+  revoked_at: string | null;
+  last_used_at: string | null;
+  active_refresh_tokens: number;
+};
+
+type Diagnostics = {
+  healthy: boolean;
+  checks: Array<{ id: string; ok: boolean; message: string }>;
+};
+
+type Metrics = {
+  requests: number;
+  errors: number;
+  errorRate: number;
+  averageDurationMs: number;
+  p95DurationMs: number;
+};
+
+async function api<T>(url: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(url, init);
+  const body = (await response.json().catch(() => ({}))) as T & { error?: string };
+  if (!response.ok) throw new Error(body.error || `HTTP ${response.status}`);
+  return body;
+}
+
+export function McpAdminClient({ logsSlot }: { logsSlot?: ReactNode } = {}) {
+  const [status, setStatus] = useState<Status | null>(null);
+  const [tools, setTools] = useState<Tool[]>([]);
+  const [clients, setClients] = useState<Client[]>([]);
+  const [diagnostics, setDiagnostics] = useState<Diagnostics | null>(null);
+  const [metrics, setMetrics] = useState<Metrics | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const [nextStatus, toolData, clientData, nextDiagnostics, nextMetrics] =
+        await Promise.all([
+          api<Status>("/api/v1/admin/mcp/status"),
+          api<{ tools: Tool[] }>("/api/v1/admin/mcp/tools"),
+          api<{ clients: Client[] }>("/api/v1/admin/mcp/clients"),
+          api<Diagnostics>("/api/v1/admin/mcp/diagnostics"),
+          api<Metrics>("/api/v1/admin/mcp/metrics"),
+        ]);
+      setStatus(nextStatus);
+      setTools(toolData.tools);
+      setClients(clientData.clients);
+      setDiagnostics(nextDiagnostics);
+      setMetrics(nextMetrics);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Chargement impossible");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function toggleTool(tool: Tool) {
+    try {
+      await api(`/api/v1/admin/mcp/policies/${encodeURIComponent(tool.name)}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled: !tool.enabled }),
+      });
+      toast.success(`${tool.name} ${tool.enabled ? "désactivé" : "activé"}`);
+      await load();
+    } catch (cause) {
+      toast.error(cause instanceof Error ? cause.message : "Échec");
+    }
+  }
+
+  async function toggleClient(client: Client) {
+    try {
+      await api(`/api/v1/admin/mcp/clients/${encodeURIComponent(client.client_id)}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled: !client.enabled }),
+      });
+      await load();
+    } catch (cause) {
+      toast.error(cause instanceof Error ? cause.message : "Échec");
+    }
+  }
+
+  async function revokeClient(client: Client) {
+    if (!window.confirm(`Révoquer définitivement ${client.client_name || client.client_id} ?`)) return;
+    try {
+      await api(`/api/v1/admin/mcp/clients/${encodeURIComponent(client.client_id)}`, {
+        method: "DELETE",
+      });
+      await load();
+    } catch (cause) {
+      toast.error(cause instanceof Error ? cause.message : "Échec");
+    }
+  }
+
+  async function rotateSecret(client: Client) {
+    if (!window.confirm("Tourner le secret et révoquer les refresh tokens existants ?")) return;
+    try {
+      const result = await api<{ clientSecret: string }>(
+        `/api/v1/admin/mcp/clients/${encodeURIComponent(client.client_id)}/rotate-secret`,
+        { method: "POST" },
+      );
+      window.prompt("Nouveau secret — copiez-le maintenant, il ne sera plus affiché :", result.clientSecret);
+      await load();
+    } catch (cause) {
+      toast.error(cause instanceof Error ? cause.message : "Échec");
+    }
+  }
+
+  async function copy(value: string | null) {
+    if (!value) return;
+    await navigator.clipboard.writeText(value);
+    toast.success("URL copiée");
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-slate-500">Pilotage du serveur, des tools et des accès OAuth.</p>
+        <Button variant="outline" size="sm" onClick={() => void load()} disabled={loading}>
+          <RefreshCw className={`mr-1.5 h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
+          Actualiser
+        </Button>
+      </div>
+      {error ? <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700">{error}</div> : null}
+
+      <Tabs defaultValue="overview">
+        <TabsList className="h-auto flex-wrap">
+          <TabsTrigger value="overview">Vue d’ensemble</TabsTrigger>
+          <TabsTrigger value="tools">Tools</TabsTrigger>
+          <TabsTrigger value="access">Accès/clients</TabsTrigger>
+          <TabsTrigger value="logs">Logs</TabsTrigger>
+          <TabsTrigger value="connection">Connexion</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="space-y-4">
+          <div className="flex justify-end">
+            <Button variant="outline" size="sm" asChild>
+              <a href="/api/v1/admin/mcp/diagnostics/export" download>
+                <Download className="mr-1.5 h-3.5 w-3.5" />
+                Export diagnostic expurgé
+              </a>
+            </Button>
+          </div>
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+            <Stat label="Tools actifs" value={`${status?.enabledToolCount || 0}/${status?.toolCount || 0}`} />
+            <Stat label="Clients actifs" value={`${status?.enabledClientCount || 0}/${status?.clientCount || 0}`} />
+            <Stat label="Appels MCP" value={String(metrics?.requests || 0)} />
+            <Stat label="Erreurs" value={String(metrics?.errors || 0)} />
+          </div>
+          <Card>
+            <CardHeader><CardTitle className="text-base">Diagnostics</CardTitle></CardHeader>
+            <CardContent className="grid gap-2 sm:grid-cols-2">
+              {diagnostics?.checks.map((check) => (
+                <div key={check.id} className="flex items-center gap-2 rounded-lg border p-3 text-sm">
+                  {check.ok ? <CheckCircle2 className="h-4 w-4 text-emerald-600" /> : <XCircle className="h-4 w-4 text-red-600" />}
+                  {check.message}
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader><CardTitle className="text-base">Performance processus</CardTitle></CardHeader>
+            <CardContent className="grid gap-3 sm:grid-cols-3 text-sm">
+              <div>Erreur : {((metrics?.errorRate || 0) * 100).toFixed(1)} %</div>
+              <div>Moyenne : {metrics?.averageDurationMs || 0} ms</div>
+              <div>P95 : {metrics?.p95DurationMs || 0} ms</div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="tools">
+          <div className="overflow-x-auto rounded-xl border bg-white">
+            <table className="min-w-full text-left text-sm">
+              <thead className="border-b bg-slate-50 text-xs uppercase text-slate-500"><tr><th className="p-3">Tool</th><th className="p-3">Catégorie</th><th className="p-3">Scope</th><th className="p-3">Annotations</th><th className="p-3">État</th></tr></thead>
+              <tbody>{tools.map((tool) => <tr key={tool.name} className="border-b last:border-0">
+                <td className="p-3 font-mono text-xs">{tool.name}</td>
+                <td className="p-3">{tool.category}</td>
+                <td className="p-3"><Badge variant={tool.access === "read" ? "secondary" : "warning"}>{tool.requiredScope}</Badge></td>
+                <td className="p-3 text-xs text-slate-500">{tool.annotations?.readOnlyHint ? "lecture" : "mutation"}{tool.annotations?.destructiveHint ? " · destructif" : ""}</td>
+                <td className="p-3"><Button size="sm" variant={tool.enabled ? "outline" : "destructive"} onClick={() => void toggleTool(tool)}>{tool.enabled ? "Actif" : "Désactivé"}</Button></td>
+              </tr>)}</tbody>
+            </table>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="access">
+          <div className="space-y-3">{clients.map((client) => (
+            <Card key={client.client_id}>
+              <CardContent className="flex flex-col gap-3 p-4 lg:flex-row lg:items-center lg:justify-between">
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2"><strong>{client.client_name || "Client sans nom"}</strong><Badge variant={client.enabled ? "success" : "muted"}>{client.revoked_at ? "Révoqué" : client.enabled ? "Actif" : "Désactivé"}</Badge></div>
+                  <div className="mt-1 truncate font-mono text-xs text-slate-500">{client.client_id}</div>
+                  <div className="mt-1 text-xs text-slate-500">{client.scope} · {client.active_refresh_tokens} refresh token(s) actif(s) · dernier usage {client.last_used_at || "jamais"}</div>
+                </div>
+                <div className="flex gap-2">
+                  {!client.revoked_at && client.token_endpoint_auth_method !== "none" ? <Button variant="outline" size="sm" onClick={() => void rotateSecret(client)}>Tourner le secret</Button> : null}
+                  {!client.revoked_at ? <Button variant="outline" size="sm" onClick={() => void toggleClient(client)}>{client.enabled ? "Désactiver" : "Activer"}</Button> : null}
+                  {!client.revoked_at ? <Button variant="destructive" size="sm" onClick={() => void revokeClient(client)}>Révoquer</Button> : null}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+          {!clients.length ? <div className="rounded-xl border bg-white p-8 text-center text-sm text-slate-500">Aucun client OAuth enregistré.</div> : null}</div>
+        </TabsContent>
+
+        <TabsContent value="logs">{logsSlot ?? <div className="rounded-xl border bg-white p-8 text-center text-sm text-slate-500">Slot logs — passez logsSlot=&lt;RequestLogsClient /&gt; depuis la marque.</div>}</TabsContent>
+
+        <TabsContent value="connection" className="space-y-4">
+          <Card><CardHeader><CardTitle className="text-base">URL MCP</CardTitle></CardHeader><CardContent>
+            <div className="flex gap-2"><code className="min-w-0 flex-1 truncate rounded bg-slate-100 p-3 text-sm">{status?.mcpUrl || "Tunnel non configuré"}</code><Button variant="outline" onClick={() => void copy(status?.mcpUrl || null)} disabled={!status?.mcpUrl}><Copy className="h-4 w-4" /></Button></div>
+            {!status?.publicUrl ? <div className="mt-3 flex gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800"><ShieldAlert className="h-4 w-4 shrink-0" />Configurez APP_PUBLIC_URL ou MCP_PUBLIC_URL pour ChatGPT, Claude et Cursor. Hermes loopback continue d’utiliser sa clé API locale.</div> : null}
+          </CardContent></Card>
+          <Card><CardHeader><CardTitle className="text-base">Clients compatibles</CardTitle></CardHeader><CardContent className="text-sm text-slate-600">Dans Cursor, ChatGPT ou Claude, ajoutez l’URL ci-dessus comme serveur MCP HTTP. OAuth 2.1, PKCE S256 et l’enregistrement dynamique sont détectés automatiquement.</CardContent></Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return <Card><CardContent className="p-4"><div className="text-2xl font-semibold tabular-nums">{value}</div><div className="text-xs text-slate-500">{label}</div></CardContent></Card>;
+}

package/ui/primitives/badge.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "./cn";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-slate-900 text-white",
+        secondary: "border-transparent bg-slate-100 text-slate-700",
+        outline: "border-slate-200 text-slate-700",
+        success: "border-transparent bg-emerald-100 text-emerald-800",
+        warning: "border-transparent bg-amber-100 text-amber-800",
+        danger: "border-transparent bg-red-100 text-red-800",
+        info: "border-transparent bg-sky-100 text-sky-800",
+        muted: "border-transparent bg-slate-50 text-slate-500",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+/**
+ * <span> et non <div> : un badge est utilisé DANS des <p>, <a> et <span>
+ * (fiche produit, dashboard, préférences…). Un <div> y est du HTML invalide :
+ * le parseur navigateur restructure le DOM (ferme le <p> avant le div) et
+ * l'hydratation React échoue (« Hydration failed » #418/#422, cascade
+ * possible en #310) — écran « Application error » dans l'app desktop.
+ */
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

package/ui/primitives/button.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "./cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-slate-900 text-white hover:bg-slate-800",
+        secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200",
+        outline: "border border-slate-200 bg-white hover:bg-slate-50",
+        ghost: "hover:bg-slate-100",
+        destructive: "bg-red-600 text-white hover:bg-red-700",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/ui/primitives/card.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cn } from "./cn";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-xl border border-slate-200 bg-white shadow-sm", className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-slate-500", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent };

package/ui/primitives/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/ui/primitives/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "./cn";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-slate-200 bg-white px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";
+
+export { Input };