@isothrum/editor 0.0.0-stage → 0.1.0

package/src/components/tool/windows/machine-controls.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { Camera, Monitor, Play, RotateCw, Square, SquareTerminal, Trash2 } from "lucide-react";
+import type { Snapshot } from "@/lib/tool/desktop";
+import { Button } from "@/components/ui/button";
+import type { MachineAction } from "../hooks/use-machine-actions";
+import { useText } from "../text";
+
+interface Props {
+  state: string | undefined;
+  busy: boolean;
+  onConsole: () => void;
+  onDisplay: () => void;
+  onAction: (action: MachineAction) => void;
+  snapshots: Snapshot[];
+  onSnapshot: (label: string) => void;
+  onUse: (id: string | null) => void;
+  onDeleteSnapshot: (id: string) => void;
+}
+
+/** A console, its screen, and starting, restarting or stopping it. */
+function RunButtons({ state, busy, onConsole, onDisplay, onAction }: Pick<Props, "state" | "busy" | "onConsole" | "onDisplay" | "onAction">) {
+  const t = useText().machineRun;
+  const running = state === "running";
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button size="sm" variant="outline" disabled={!running} onClick={onConsole}>
+        <SquareTerminal data-icon="inline-start" /> {t.console}
+      </Button>
+      <Button size="sm" variant="outline" disabled={!running} onClick={onDisplay} title={t.displayTitle}>
+        <Monitor data-icon="inline-start" /> {t.display}
+      </Button>
+      {running ? (
+        <>
+          <Button size="sm" variant="outline" disabled={busy} onClick={() => { onAction("restart"); }}>
+            <RotateCw data-icon="inline-start" /> {t.restart}
+          </Button>
+          <Button size="sm" variant="outline" disabled={busy} onClick={() => { onAction("stop"); }}>
+            <Square data-icon="inline-start" /> {t.stop}
+          </Button>
+        </>
+      ) : (
+        <Button size="sm" variant="outline" disabled={busy || !state} onClick={() => { onAction("start"); }}>
+          <Play data-icon="inline-start" /> {t.start}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+const when = (created: number) => new Date(created * 1000).toLocaleString(undefined, { dateStyle: "short", timeStyle: "short" });
+
+/** The machine's snapshots, newest first: restore one, delete one, or go back to its own image. */
+function SnapshotList({ snapshots, busy, onUse, onDeleteSnapshot }: Pick<Props, "snapshots" | "busy" | "onUse" | "onDeleteSnapshot">) {
+  const t = useText().machineRun;
+  if (snapshots.length === 0) return <p className="text-xs text-muted-foreground">{t.noSnapshots}</p>;
+  return (
+    <ul className="flex flex-col gap-1 text-xs">
+      {snapshots
+        .slice()
+        .reverse()
+        .map((x) => (
+          <li key={x.id} className="flex items-center gap-1.5">
+            <span className="min-w-0 flex-1 truncate" title={x.image}>
+              {x.label} <span className="text-muted-foreground">· {when(x.created)}</span>
+            </span>
+            {x.in_use ? (
+              <span className="text-signal">{t.inUse}</span>
+            ) : (
+              <Button size="xs" variant="ghost" disabled={busy} onClick={() => { onUse(x.id); }}>
+                {t.restore}
+              </Button>
+            )}
+            <Button size="icon-xs" variant="ghost" disabled={busy || x.in_use} aria-label={t.deleteSnapshot(x.label)} title={t.deleteSnapshot(x.label)} onClick={() => { onDeleteSnapshot(x.id); }}>
+              <Trash2 />
+            </Button>
+          </li>
+        ))}
+    </ul>
+  );
+}
+
+/** In the desktop app, for a machine of the running lab: its state, its controls, its snapshots. */
+export function MachineControls(p: Props) {
+  const t = useText().machineRun;
+  const running = p.state === "running";
+  return (
+    <div className="mt-4 flex flex-col gap-2 border-t pt-3 text-sm">
+      <p className="text-xs text-muted-foreground">{running ? t.running : p.state ? t.stopped : t.unknown}</p>
+      <RunButtons state={p.state} busy={p.busy} onConsole={p.onConsole} onDisplay={p.onDisplay} onAction={p.onAction} />
+      <div className="mt-2 flex flex-col gap-1.5">
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-muted-foreground">{t.snapshots}</span>
+          <Button
+            size="xs"
+            variant="outline"
+            disabled={p.busy || !running}
+            title={t.snapshotHint}
+            onClick={() => {
+              const label = window.prompt(t.snapshotPrompt, "");
+              if (label !== null) p.onSnapshot(label);
+            }}
+          >
+            <Camera data-icon="inline-start" /> {t.takeSnapshot}
+          </Button>
+        </div>
+        <SnapshotList snapshots={p.snapshots} busy={p.busy} onUse={p.onUse} onDeleteSnapshot={p.onDeleteSnapshot} />
+        {p.snapshots.some((x) => x.in_use) && (
+          <Button size="xs" variant="ghost" className="self-start" disabled={p.busy} onClick={() => { p.onUse(null); }}>
+            {t.ownImage}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/tool/windows/machine-inspector.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { BookmarkPlus, Trash2 } from "lucide-react";
+import { cleanName, type MachineData, type MachineNode } from "@/lib/tool/model";
+import { runAs } from "@/lib/tool/presets";
+import { Button } from "@/components/ui/button";
+import { useText } from "../text";
+import { field } from "./fields";
+import { ContainerFields, ServiceFields, VmFields } from "./runs-fields";
+
+type Change = (patch: Partial<MachineData>) => void;
+
+/** Its name, and what it runs as: an automatic router (a router's only), a container or a VM. */
+function NameAndKind({ m, onChange }: { m: MachineData; onChange: Change }) {
+  const t = useText().inspector;
+  return (
+    <>
+      <label className="flex flex-col gap-1">
+        <span className="text-muted-foreground">{t.name}</span>
+        <input className={field} value={m.name} onChange={(e) => { onChange({ name: cleanName(e.target.value) }); }} />
+      </label>
+      <label className="flex flex-col gap-1">
+        <span className="text-muted-foreground">{t.runsAs}</span>
+        <select
+          className={field}
+          value={m.kind}
+          onChange={(e) => {
+            const patch = runAs(m, e.target.value);
+            if (patch) onChange(patch);
+          }}
+        >
+          {m.icon === "router" && <option value="router">{t.automaticRouter}</option>}
+          <option value="container">{t.container}</option>
+          <option value="vm">{t.vm}</option>
+        </select>
+      </label>
+    </>
+  );
+}
+
+/** The machine's cables, as `its port → the other end's name and port`. */
+function CableList({ cables }: { cables: string[] }) {
+  const t = useText().inspector;
+  return (
+    <div>
+      <span className="text-muted-foreground">{t.cables}</span>
+      {cables.length ? (
+        <ul className="mt-1 space-y-0.5 font-mono text-xs">
+          {cables.map((c, i) => (
+            <li key={i}>{c}</li>
+          ))}
+        </ul>
+      ) : (
+        <p className="mt-1 text-xs text-muted-foreground">{t.noCables}</p>
+      )}
+    </div>
+  );
+}
+
+/** A machine's window: its name and kind, what it runs, its services, its cables. */
+export function MachineInspector({ node, cables, onChange, onDelete, onSaveDevice }: { node: MachineNode; cables: string[]; onChange: Change; onDelete: () => void; onSaveDevice: () => void }) {
+  const t = useText().inspector;
+  const m = node.data;
+  return (
+    <div className="flex flex-col gap-4 text-sm">
+      <NameAndKind m={m} onChange={onChange} />
+      {m.kind === "router" && <p className="text-xs text-muted-foreground">{t.routerNote}</p>}
+      {m.kind === "container" && <ContainerFields m={m} onChange={onChange} />}
+      {m.kind !== "router" && m.kind !== "container" && <VmFields m={m} onChange={onChange} />}
+      {/* An automatic router is not a machine, nor is an appliance one to land on: no services. */}
+      {m.kind !== "router" && !m.appliance && <ServiceFields m={m} onChange={onChange} />}
+      <CableList cables={cables} />
+      <div className="flex flex-wrap gap-2">
+        <Button variant="outline" size="sm" onClick={onSaveDevice} title={t.saveTitle}>
+          <BookmarkPlus data-icon="inline-start" /> {t.save}
+        </Button>
+        <Button variant="outline" size="sm" onClick={onDelete}>
+          <Trash2 data-icon="inline-start" /> {t.remove}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/tool/windows/runs-fields.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { APPLIANCES, idleByDefault, type MachineData } from "@/lib/tool/model";
+import { OS_CHOICES } from "@/lib/tool/os";
+import { cn } from "@/lib/utils";
+import { useText } from "../text";
+import { area, field } from "./fields";
+
+type Change = (patch: Partial<MachineData>) => void;
+
+/** A Cisco OS in its container: which one, what it needs, and its own IOS configuration. */
+function ApplianceFields({ m, onChange }: { m: MachineData; onChange: Change }) {
+  const t = useText().inspector;
+  return (
+    <>
+      <label className="flex flex-col gap-1">
+        <span className="text-muted-foreground">{t.ciscoOs}</span>
+        <select
+          className={field}
+          value={m.appliance}
+          onChange={(e) => {
+            const a = APPLIANCES.find((x) => x.id === e.target.value);
+            if (a) onChange({ appliance: a.id, image: a.image });
+          }}
+        >
+          {APPLIANCES.map((a) => (
+            <option key={a.id} value={a.id}>
+              {a.label}
+            </option>
+          ))}
+        </select>
+        {APPLIANCES.find((a) => a.id === m.appliance)?.kvm && <span className="text-xs text-muted-foreground">{t.needsKvm}</span>}
+        {m.appliance === "cisco-dynamips" && <span className="text-xs text-muted-foreground">{t.dynamipsFirmware(m.name)}</span>}
+      </label>
+      <p className="text-xs text-muted-foreground">
+        {t.applianceNote}{" "}
+        <a className="underline" href="https://github.com/srl-labs/vrnetlab/tree/master/cisco/iol" target="_blank" rel="noreferrer">
+          vrnetlab
+        </a>
+      </p>
+      <label className="flex flex-col gap-1">
+        <span className="text-muted-foreground">{t.iosConfig}</span>
+        <textarea
+          className={`min-h-28 ${area}`}
+          placeholder={"router ospf 1\n network 10.0.0.0 0.255.255.255 area 0"}
+          value={m.config ?? ""}
+          onChange={(e) => {
+            onChange({ config: e.target.value });
+          }}
+          spellCheck={false}
+        />
+        <span className="text-xs text-muted-foreground">{t.iosConfigHint}</span>
+      </label>
+    </>
+  );
+}
+
+/** A container: its image (none to type for Dynamips), and a Cisco OS's fields or whether it idles. */
+export function ContainerFields({ m, onChange }: { m: MachineData; onChange: Change }) {
+  const t = useText().inspector;
+  return (
+    <>
+      {m.appliance !== "cisco-dynamips" && (
+        <label className="flex flex-col gap-1">
+          <span className="text-muted-foreground">{t.image}</span>
+          <input className={cn(field, "font-mono")} value={m.image} onChange={(e) => { onChange({ image: e.target.value }); }} />
+        </label>
+      )}
+      {m.appliance ? (
+        <ApplianceFields m={m} onChange={onChange} />
+      ) : (
+        <label className="flex items-start gap-2">
+          <input type="checkbox" className="mt-0.5" checked={m.idle ?? idleByDefault(m.image)} onChange={(e) => { onChange({ idle: e.target.checked }); }} />
+          <span>
+            {t.keepRunning}
+            <span className="block text-xs text-muted-foreground">{t.keepRunningHint}</span>
+          </span>
+        </label>
+      )}
+    </>
+  );
+}
+
+/** A VM: its OS and its provisioning steps. */
+export function VmFields({ m, onChange }: { m: MachineData; onChange: Change }) {
+  const t = useText().inspector;
+  return (
+    <>
+      <label className="flex flex-col gap-1">
+        <span className="text-muted-foreground">{t.os}</span>
+        <select className={field} value={m.os} onChange={(e) => { onChange({ os: e.target.value }); }}>
+          {OS_CHOICES.map((os) => (
+            <option key={os} value={os}>
+              {os}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label className="flex flex-col gap-1">
+        <span className="text-muted-foreground">{t.provision}</span>
+        <textarea
+          className={`min-h-16 ${area}`}
+          placeholder={m.os.startsWith("windows") ? `provision/${m.name}.ps1` : `provision/${m.name}.sh`}
+          value={m.provision}
+          onChange={(e) => { onChange({ provision: e.target.value }); }}
+        />
+      </label>
+    </>
+  );
+}
+
+/** A machine's services and whether the user lands on it (not an automatic router, nor an appliance). */
+export function ServiceFields({ m, onChange }: { m: MachineData; onChange: Change }) {
+  const t = useText().inspector;
+  return (
+    <>
+      <label className="flex flex-col gap-1">
+        <span className="text-muted-foreground">{t.ports}</span>
+        <input className={field} placeholder="80, 443/https, 53/udp" value={m.ports} onChange={(e) => { onChange({ ports: e.target.value }); }} />
+      </label>
+      <label className="flex items-center gap-2">
+        <input type="checkbox" checked={m.access} onChange={(e) => { onChange({ access: e.target.checked }); }} />
+        {t.access}
+      </label>
+    </>
+  );
+}

package/src/components/tool/windows/selected-windows.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { Trash2 } from "lucide-react";
+import { machineEnds, networkOfCable } from "@/lib/tool/cables";
+import { isSwitch, unselected, type CableEdge, type LanNode, type MachineNode } from "@/lib/tool/model";
+import { nameById } from "@/lib/tool/selection";
+import { vlanName } from "@/lib/tool/vlans";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { FloatingWindow } from "../floating-window";
+import type { EditorModel } from "../hooks/use-editor";
+import { ConditionsFields } from "./conditions-fields";
+import { field } from "./fields";
+import { CaptureControl, LinkControl } from "./link-controls";
+import { MachineControls } from "./machine-controls";
+import { MachineInspector } from "./machine-inspector";
+
+/** The cables of a machine, as its window lists them: `its port → the other end's name and port`. */
+function cablesOf(e: EditorModel, id: string): string[] {
+  const nameOf = (other: string) => nameById(e.lab.nodes, other);
+  return e.lab.edges
+    .filter((c) => c.source === id || c.target === id)
+    .map((c) => (c.source === id ? `${String(c.data?.aPort)} → ${nameOf(c.target)} ${String(c.data?.bPort)}` : `${String(c.data?.bPort)} → ${nameOf(c.source)} ${String(c.data?.aPort)}`));
+}
+
+/** A machine's window: the inspector, and (desktop app, lab running) its controls. */
+export function MachineWindow({ e, node }: { e: EditorModel; node: MachineNode }) {
+  const { lab, desk, actions } = e;
+  const name = node.data.name;
+  const act = desk.actions;
+  return (
+    <FloatingWindow title={name || e.t.windows.machine} side="left" width={280} onClose={() => { lab.setNodes((ns) => unselected(ns)); }}>
+      <div className="p-4">
+        <MachineInspector
+          node={node}
+          cables={cablesOf(e, node.id)}
+          onChange={(patch) => { actions.updateMachine(node.id, patch); }}
+          onDelete={() => void e.flow.deleteElements({ nodes: [{ id: node.id }] })}
+          onSaveDevice={() => { e.devices.saveDevice(node.data); }}
+        />
+        {e.invoke && desk.state.run === "running" && (
+          <MachineControls
+            state={desk.live.machineStates[name]}
+            busy={act.busy}
+            onConsole={() => void act.machineConsole(name)}
+            onDisplay={() => void act.machineDisplay(name)}
+            onAction={(action) => void act.machineAct(name, action)}
+            snapshots={desk.live.snapshots.filter((x) => x.machine === name)}
+            onSnapshot={(label) => void act.snapshotDo("snapshot_take", { machine: name, label })}
+            onUse={(id) => void act.snapshotDo("snapshot_use", { machine: name, id })}
+            onDeleteSnapshot={(id) => void act.snapshotDo("snapshot_delete", { id })}
+          />
+        )}
+      </div>
+    </FloatingWindow>
+  );
+}
+
+/**
+ * A LAN's window: how it behaves (its name and block are edited on the canvas itself), and in the
+ * desktop app capturing its traffic and suspending its links.
+ */
+export function LanWindow({ e, lan }: { e: EditorModel; lan: LanNode }) {
+  const { lab, desk } = e;
+  const name = lan.data.name;
+  const running = desk.state.run === "running";
+  const { captures, capture, stopCapture } = desk.captures;
+  const cut = desk.live.links.filter((l) => l.network === name).length;
+  const onVlan = lab.nodes.some((n) => isSwitch(n) && n.data.vlans.some((v) => vlanName(v.id) === name));
+  return (
+    <FloatingWindow title={e.t.windows.lan(name)} side="left" width={280} onClose={() => { lab.setNodes((ns) => unselected(ns)); }}>
+      <div className="flex flex-col gap-4 p-4 text-sm">
+        {onVlan ? <p className="text-xs text-muted-foreground">{e.t.windows.conditions.onVlan}</p> : <ConditionsFields value={lan.data.tc} onChange={(tc) => { e.flow.updateNodeData(lan.id, { tc }); }} />}
+        {e.invoke && (
+          <>
+            <CaptureControl network={name} running={running} capturing={name in captures} file={captures[name]} onStart={() => void capture(name)} onStop={() => void stopCapture(name)} />
+            <LinkControl
+              running={running}
+              busy={desk.actions.busy}
+              all
+              suspended={cut ? e.t.link.lanSuspended(cut) : null}
+              onSuspend={() => void desk.actions.linkAct(name, undefined, "suspend")}
+              onResume={() => void desk.actions.linkAct(name, undefined, "resume")}
+            />
+          </>
+        )}
+      </div>
+    </FloatingWindow>
+  );
+}
+
+/** Desktop app: capturing a cable's traffic, and suspending it (when it has a machine at an end). */
+function CableRunControls({ e, edge }: { e: EditorModel; edge: CableEdge }) {
+  const { desk, lab } = e;
+  const network = networkOfCable(edge.id, lab.nodes, lab.edges);
+  if (!network) return null;
+  const running = desk.state.run === "running";
+  const { captures, capture, stopCapture } = desk.captures;
+  const ends = machineEnds(edge, lab.nodes);
+  const cut = desk.live.links.some((l) => l.network === network && ends.includes(l.machine));
+  return (
+    <>
+      <CaptureControl network={network} running={running} capturing={network in captures} file={captures[network]} onStart={() => void capture(network)} onStop={() => void stopCapture(network)} />
+      {ends.length > 0 && (
+        <LinkControl
+          running={running}
+          busy={desk.actions.busy}
+          suspended={cut ? e.t.link.cableSuspended : null}
+          onSuspend={() => void desk.actions.linkAct(network, ends, "suspend")}
+          onResume={() => void desk.actions.linkAct(network, ends, "resume")}
+        />
+      )}
+    </>
+  );
+}
+
+/** A cable's window: the port at each end, how it behaves, and removing it. */
+export function CableWindow({ e, edge, data }: { e: EditorModel; edge: CableEdge; data: NonNullable<CableEdge["data"]> }) {
+  const { lab, index, t } = e;
+  const nameOf = (id: string) => nameById(lab.nodes, id);
+  const ends = [
+    ["aPort", edge.source],
+    ["bPort", edge.target],
+  ] as const;
+  return (
+    <FloatingWindow title={t.windows.cable(nameOf(edge.source), nameOf(edge.target))} side="left" width={280} onClose={() => { lab.setEdges((es) => unselected(es)); }}>
+      <div className="flex flex-col gap-4 p-4 text-sm">
+        {ends.map(([key, nodeId]) => (
+          <label key={key} className="flex flex-col gap-1">
+            <span className="text-muted-foreground">{t.windows.portOn(nameOf(nodeId))}</span>
+            <input className={cn(field, "font-mono")} value={data[key]} onChange={(ev) => { e.actions.updateCable(edge.id, { [key]: ev.target.value }); }} />
+          </label>
+        ))}
+        <p className="text-xs text-muted-foreground">{t.windows.cableNote}</p>
+        {[edge.source, edge.target].some((id) => index.lanIds.has(id) || index.switchIds.has(id)) ? (
+          <p className="text-xs text-muted-foreground">{t.windows.conditions.onLan}</p>
+        ) : (
+          <ConditionsFields value={data.tc} onChange={(tc) => { e.actions.updateCable(edge.id, { tc }); }} />
+        )}
+        {e.invoke && <CableRunControls e={e} edge={edge} />}
+        <Button variant="outline" size="sm" onClick={() => void e.flow.deleteElements({ edges: [{ id: edge.id }] })}>
+          <Trash2 data-icon="inline-start" /> {t.windows.removeCable}
+        </Button>
+      </div>
+    </FloatingWindow>
+  );
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+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 shadow-xs hover:bg-primary/90",
+        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-link 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-10 gap-2 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        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 }