@arraystar/tokenscope 0.1.0

package/src/components/PricingSheet.tsx

@@ -0,0 +1,209 @@
+import { usePricingConfig } from "../PricingContext";
+import { PRICING_DB, findPricingEntry, type CustomPrice } from "../pricing";
+import { useLang, useTranslations } from "../i18n";
+import { X, RotateCcw } from "lucide-react";
+import { Button } from "./ui/button";
+import { useState } from "react";
+
+export default function PricingSheet() {
+  const { config, detectedModels, isOpen, setOpen, updateModelMapping, updateCustomPricing, resetConfig } =
+    usePricingConfig();
+  const { lang } = useLang();
+  const tr = useTranslations(lang);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/40 z-40 transition-opacity"
+        onClick={() => setOpen(false)}
+      />
+      {/* Panel */}
+      <div className="fixed right-0 top-0 bottom-0 w-[420px] max-w-full bg-background border-l border-border z-50 shadow-xl flex flex-col animate-slide-in">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+          <h2 className="text-base font-semibold">{tr.modelPricing}</h2>
+          <Button variant="ghost" size="icon" onClick={() => setOpen(false)}>
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-5 py-4 space-y-5">
+          <p className="text-xs text-muted-foreground">
+            {tr.detectedModels}: {detectedModels.length}
+          </p>
+
+          {detectedModels.map((modelName) => (
+            <ModelConfigRow
+              key={modelName}
+              modelName={modelName}
+              mapping={config.modelMappings[modelName]}
+              custom={config.customPricing[modelName]}
+              onMappingChange={(id) => updateModelMapping(modelName, id)}
+              onCustomChange={(cp) => updateCustomPricing(modelName, cp)}
+            />
+          ))}
+        </div>
+
+        {/* Footer */}
+        <div className="px-5 py-3 border-t border-border">
+          <Button variant="outline" size="sm" onClick={resetConfig} className="w-full gap-2">
+            <RotateCcw className="w-3 h-3" />
+            {tr.resetToDefaults}
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function ModelConfigRow({
+  modelName,
+  mapping,
+  custom,
+  onMappingChange,
+  onCustomChange,
+}: {
+  modelName: string;
+  mapping?: string;
+  custom?: CustomPrice;
+  onMappingChange: (id: string | null) => void;
+  onCustomChange: (cp: CustomPrice | null) => void;
+}) {
+  const { lang } = useLang();
+  const tr = useTranslations(lang);
+  const [isCustom, setIsCustom] = useState(!!custom);
+  const [customInput, setCustomInput] = useState(custom?.input ?? 0);
+  const [customOutput, setCustomOutput] = useState(custom?.output ?? 0);
+  const [customCacheRead, setCustomCacheRead] = useState(custom?.cacheRead ?? 0);
+  const [customCurrency, setCustomCurrency] = useState<"usd" | "cny">(custom?.currency ?? "usd");
+
+  const currentEntry = mapping ? findPricingEntry(mapping) : undefined;
+
+  const handleSelectChange = (value: string) => {
+    if (value === "__custom__") {
+      setIsCustom(true);
+    } else {
+      setIsCustom(false);
+      onMappingChange(value || null);
+      onCustomChange(null);
+    }
+  };
+
+  const handleCustomApply = () => {
+    onCustomChange({
+      input: customInput,
+      output: customOutput,
+      cacheRead: customCacheRead,
+      currency: customCurrency,
+    });
+  };
+
+  // Group pricing entries by provider
+  const providers = PRICING_DB.reduce<Record<string, typeof PRICING_DB>>((acc, entry) => {
+    if (!acc[entry.provider]) acc[entry.provider] = [];
+    acc[entry.provider].push(entry);
+    return acc;
+  }, {});
+
+  const curSymbol = (c: string) => (c === "cny" ? "¥" : "$");
+
+  return (
+    <div className="space-y-2.5 rounded-lg border border-border p-3">
+      {/* Model name + current pricing preview */}
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-semibold font-mono">{modelName}</span>
+        {currentEntry && (
+          <span className="text-[10px] text-muted-foreground">
+            {curSymbol(currentEntry.currency)}
+            {currentEntry.input}/{curSymbol(currentEntry.currency)}
+            {currentEntry.output}/{curSymbol(currentEntry.currency)}
+            {currentEntry.cacheRead}
+          </span>
+        )}
+        {custom && (
+          <span className="text-[10px] text-muted-foreground">
+            {curSymbol(custom.currency)}
+            {custom.input}/{curSymbol(custom.currency)}
+            {custom.output}/{curSymbol(custom.currency)}
+            {custom.cacheRead}
+          </span>
+        )}
+      </div>
+
+      {/* Pricing selector */}
+      <select
+        value={isCustom ? "__custom__" : (mapping ?? "")}
+        onChange={(e) => handleSelectChange(e.target.value)}
+        className="w-full bg-background border border-border rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+      >
+        <option value="">{tr.noPricing}</option>
+        {Object.entries(providers).map(([provider, entries]) => (
+          <optgroup key={provider} label={provider}>
+            {entries.map((entry) => (
+              <option key={entry.id} value={entry.id}>
+                {entry.model} ({curSymbol(entry.currency)}{entry.input}/{curSymbol(entry.currency)}{entry.output})
+              </option>
+            ))}
+          </optgroup>
+        ))}
+        <option value="__custom__">{tr.customPricing}</option>
+      </select>
+
+      {/* Custom pricing inputs */}
+      {isCustom && (
+        <div className="space-y-2 pt-1">
+          <div className="grid grid-cols-3 gap-2">
+            <div>
+              <label className="text-[10px] text-muted-foreground">{tr.inputPrice}</label>
+              <input
+                type="number"
+                step="0.01"
+                value={customInput}
+                onChange={(e) => setCustomInput(Number(e.target.value))}
+                className="w-full bg-background border border-border rounded px-2 py-1 text-xs font-mono"
+              />
+            </div>
+            <div>
+              <label className="text-[10px] text-muted-foreground">{tr.outputPrice}</label>
+              <input
+                type="number"
+                step="0.01"
+                value={customOutput}
+                onChange={(e) => setCustomOutput(Number(e.target.value))}
+                className="w-full bg-background border border-border rounded px-2 py-1 text-xs font-mono"
+              />
+            </div>
+            <div>
+              <label className="text-[10px] text-muted-foreground">{tr.cacheReadPrice}</label>
+              <input
+                type="number"
+                step="0.01"
+                value={customCacheRead}
+                onChange={(e) => setCustomCacheRead(Number(e.target.value))}
+                className="w-full bg-background border border-border rounded px-2 py-1 text-xs font-mono"
+              />
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <select
+              value={customCurrency}
+              onChange={(e) => setCustomCurrency(e.target.value as "usd" | "cny")}
+              className="bg-background border border-border rounded px-2 py-1 text-xs"
+            >
+              <option value="usd">USD ($)</option>
+              <option value="cny">CNY (¥)</option>
+            </select>
+            <span className="text-[10px] text-muted-foreground">{tr.perMillionTokens}</span>
+            <Button size="sm" variant="secondary" onClick={handleCustomApply} className="ml-auto text-xs h-7">
+              Apply
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/SessionDetail.tsx

@@ -0,0 +1,244 @@
+import { useParams, useNavigate } from "react-router-dom";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from "recharts";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { fmt, fmtCost, getAllSessions } from "../data";
+import { useRecalculatedData, usePricingConfig } from "../PricingContext";
+import { useLang, useTranslations } from "../i18n";
+import { ArrowLeft, MessageSquare, Zap, Database, Coins, ArrowUpDown } from "lucide-react";
+import { useState, useMemo } from "react";
+
+export default function SessionDetail() {
+  const { sessionKey } = useParams();
+  const navigate = useNavigate();
+  const data = useRecalculatedData();
+  const { currencySymbol } = usePricingConfig();
+  const allSessions = getAllSessions(data);
+  const { lang } = useLang();
+  const tr = useTranslations(lang);
+  const [sortBy, setSortBy] = useState<"total" | "time" | "input" | "output" | "cache_read">("total");
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
+
+  const session = allSessions.find((s) => s.sessionKey === decodeURIComponent(sessionKey || ""));
+  if (!session) {
+    return (
+      <div className="text-center py-20">
+        <p className="text-muted-foreground">{tr.sessionNotFound}</p>
+        <Button variant="ghost" onClick={() => navigate("/")} className="mt-4">
+          <ArrowLeft className="w-4 h-4 mr-2" /> {tr.backToOverview}
+        </Button>
+      </div>
+    );
+  }
+
+  const sortedTurns = useMemo(() => {
+    const t = [...session.turns];
+    const dir = sortDir === "asc" ? 1 : -1;
+    t.sort((a, b) => {
+      if (sortBy === "time") return a.time.localeCompare(b.time) * dir;
+      return (a[sortBy] - b[sortBy]) * dir;
+    });
+    return t;
+  }, [session.turns, sortBy, sortDir]);
+
+  const toggleSort = (col: typeof sortBy) => {
+    if (sortBy === col) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortBy(col);
+      setSortDir("desc");
+    }
+  };
+
+  const chartData = session.turns.map((t, i) => ({
+    idx: i + 1,
+    input: t.input,
+    output: t.output,
+    cache_read: t.cache_read,
+    total: t.total,
+    user: t.user.slice(0, 30),
+  }));
+
+  const stats = session.stats;
+
+  return (
+    <div className="space-y-6">
+      {/* Back button + header */}
+      <div className="flex items-center gap-4">
+        <Button variant="ghost" size="sm" onClick={() => navigate("/")}>
+          <ArrowLeft className="w-4 h-4" />
+        </Button>
+        <div className="flex-1">
+          <h2 className="text-lg font-bold">{session.project}</h2>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>{tr.session} {session.sid}</span>
+            <span>|</span>
+            <span>{session.date}</span>
+            <Badge variant="secondary">{stats.msgs} {tr.msgs}</Badge>
+          </div>
+        </div>
+        <Badge variant="outline" className="text-base px-3 py-1">
+          {fmt(stats.total)} {tr.tokens}
+        </Badge>
+      </div>
+
+      {/* Session Stats Cards */}
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
+        <MiniStat label={tr.inputCol} value={fmt(stats.input)} icon={<Zap className="w-3 h-3" />} color="text-violet-500" />
+        <MiniStat label={tr.outputCol} value={fmt(stats.output)} icon={<MessageSquare className="w-3 h-3" />} color="text-emerald-500" />
+        <MiniStat label={tr.cacheRCol} value={fmt(stats.cache_read)} icon={<Database className="w-3 h-3" />} color="text-amber-500" />
+        <MiniStat label={tr.cacheWriteLabel} value={fmt(stats.cache_write)} icon={<Database className="w-3 h-3" />} color="text-rose-500" />
+        <MiniStat label={tr.costCol} value={fmtCost(stats.cost, currencySymbol)} icon={<Coins className="w-3 h-3" />} color="text-sky-500" />
+      </div>
+
+      {/* Turn Timeline Chart */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">{tr.tokenUsagePerTurn}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={200}>
+            <BarChart data={chartData}>
+              <XAxis dataKey="idx" tick={{ fontSize: 10 }} />
+              <YAxis tickFormatter={(v: number) => fmt(v)} tick={{ fontSize: 10 }} />
+              <Tooltip
+                content={({ active, payload }) => {
+                  if (!active || !payload?.length) return null;
+                  const d = payload[0].payload;
+                  return (
+                    <div className="bg-popover border border-border rounded-lg px-3 py-2 shadow-lg text-xs">
+                      <p className="font-medium mb-1">#{d.idx}</p>
+                      <p>{tr.inputCol}: {fmt(d.input)}</p>
+                      <p>{tr.outputCol}: {fmt(d.output)}</p>
+                      <p>{tr.cacheRCol}: {fmt(d.cache_read)}</p>
+                      <p className="font-semibold mt-1">{tr.totalLabel}: {fmt(d.total)}</p>
+                    </div>
+                  );
+                }}
+              />
+              <Bar dataKey="total" radius={[2, 2, 0, 0]}>
+                {chartData.map((_, i) => (
+                  <Cell
+                    key={i}
+                    fill={`hsl(220, ${40 + (i % 3) * 15}%, ${45 + (i % 4) * 8}%)`}
+                  />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      {/* Turns Table */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">
+            {tr.conversationTurns} ({session.turns.length})
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-border">
+                  <th className="text-left px-3 py-2 text-xs text-muted-foreground font-medium w-10">{tr.turn}</th>
+                  <th className="text-left px-3 py-2 text-xs text-muted-foreground font-medium w-16">{tr.time}</th>
+                  <th className="text-left px-3 py-2 text-xs text-muted-foreground font-medium">{tr.message}</th>
+                  <SortHeader label={tr.inputCol} col="input" sortBy={sortBy} sortDir={sortDir} onToggle={() => toggleSort("input")} />
+                  <SortHeader label={tr.outputCol} col="output" sortBy={sortBy} sortDir={sortDir} onToggle={() => toggleSort("output")} />
+                  <SortHeader label={tr.cacheRCol} col="cache_read" sortBy={sortBy} sortDir={sortDir} onToggle={() => toggleSort("cache_read")} />
+                  <SortHeader label={tr.totalCol} col="total" sortBy={sortBy} sortDir={sortDir} onToggle={() => toggleSort("total")} />
+                  <th className="text-right px-3 py-2 text-xs text-muted-foreground font-medium">{tr.costCol}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {sortedTurns.map((turn, i) => {
+                  const time = turn.time ? turn.time.slice(11, 16) : "";
+                  const msg = turn.user || "(tool call)";
+                  return (
+                    <tr
+                      key={i}
+                      className="border-b border-border/50 hover:bg-accent/50 transition-colors"
+                    >
+                      <td className="px-3 py-1.5 text-xs text-muted-foreground">{i + 1}</td>
+                      <td className="px-3 py-1.5 text-xs text-muted-foreground font-mono">{time}</td>
+                      <td className="px-3 py-1.5 max-w-[300px] truncate">{msg}</td>
+                      <td className="px-3 py-1.5 text-right font-mono text-xs">{fmt(turn.input)}</td>
+                      <td className="px-3 py-1.5 text-right font-mono text-xs">{fmt(turn.output)}</td>
+                      <td className="px-3 py-1.5 text-right font-mono text-xs">{fmt(turn.cache_read)}</td>
+                      <td className="px-3 py-1.5 text-right font-mono text-xs font-semibold">{fmt(turn.total)}</td>
+                      <td className="px-3 py-1.5 text-right font-mono text-xs">{fmtCost(turn.cost, currencySymbol)}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function MiniStat({
+  label,
+  value,
+  icon,
+  color,
+}: {
+  label: string;
+  value: string;
+  icon: React.ReactNode;
+  color: string;
+}) {
+  return (
+    <Card>
+      <CardContent className="p-3">
+        <div className="flex items-center gap-1.5 mb-1">
+          <div className={color}>{icon}</div>
+          <span className="text-[11px] text-muted-foreground">{label}</span>
+        </div>
+        <p className="text-sm font-bold">{value}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function SortHeader({
+  label,
+  col,
+  sortBy,
+  sortDir,
+  onToggle,
+}: {
+  label: string;
+  col: string;
+  sortBy: string;
+  sortDir: string;
+  onToggle: () => void;
+}) {
+  const active = sortBy === col;
+  return (
+    <th
+      className="text-right px-3 py-2 text-xs text-muted-foreground font-medium cursor-pointer select-none hover:text-foreground transition-colors"
+      onClick={onToggle}
+    >
+      <span className="inline-flex items-center gap-1">
+        {label}
+        <ArrowUpDown
+          className={`w-3 h-3 ${active ? "text-primary" : "opacity-30"}`}
+          style={active && sortDir === "desc" ? { transform: "rotate(180deg)" } : undefined}
+        />
+      </span>
+    </th>
+  );
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}