@hienlh/ppm 0.18.7 → 0.18.9

package/src/web/components/system/system-monitor-tab.tsx

@@ -1,186 +1,3 @@
-import { useState, useMemo, useCallback, memo } from "react";
-import {
-  Server, Monitor, Bot, Hammer, HelpCircle,
-  Wifi, WifiOff,
-} from "lucide-react";
-import { useResourceMonitor, type ResourceGroup } from "@/hooks/use-resource-monitor";
-import { useIsMobile } from "@/hooks/use-is-mobile";
-import { api } from "@/lib/api-client";
-import { toast } from "sonner";
-import { cn } from "@/lib/utils";
-import {
-  GroupRow, SortableHeader, cpuColor, formatRam,
-  type SortKey, type SortDir,
-} from "./system-monitor-group-row";
+import { SystemMonitorBody } from "./system-monitor-body";
 
-const GROUP_ICONS: Record<ResourceGroup["type"], React.ElementType> = {
-  server: Server,
-  terminal: Monitor,
-  "ai-tool": Bot,
-  build: Hammer,
-  unknown: HelpCircle,
-};
-
-const SPARKLINE_POINTS = 200;
-
-function toggleSort(
-  current: SortKey, dir: SortDir, clicked: "cpu" | "ram",
-): [SortKey, SortDir] {
-  if (current !== clicked) return [clicked, "desc"];
-  if (dir === "desc") return [clicked, "asc"];
-  return [null, "desc"]; // third click resets
-}
-
-function sortGroups(groups: ResourceGroup[], key: SortKey, dir: SortDir) {
-  if (!key) return groups;
-  const sorted = [...groups].sort((a, b) => {
-    const av = key === "cpu" ? a.cpu : a.ramMB;
-    const bv = key === "cpu" ? b.cpu : b.ramMB;
-    return dir === "asc" ? av - bv : bv - av;
-  });
-  return sorted;
-}
-
-export const SystemMonitorTab = memo(function SystemMonitorTab() {
-  const { latest, history, isConnected } = useResourceMonitor();
-  const [expanded, setExpanded] = useState<Set<string>>(() => new Set(["server"]));
-  const [sortKey, setSortKey] = useState<SortKey>(null);
-  const [sortDir, setSortDir] = useState<SortDir>("desc");
-  const isMobile = useIsMobile();
-
-  const groupSparklines = useMemo(() => {
-    const map = new Map<string, number[]>();
-    const recentHistory = history.slice(-SPARKLINE_POINTS);
-    for (const snap of recentHistory) {
-      for (const group of snap.groups) {
-        const key = `${group.type}:${group.label}`;
-        const arr = map.get(key) ?? [];
-        arr.push(group.cpu);
-        map.set(key, arr);
-      }
-    }
-    return map;
-  }, [history]);
-
-  const sortedGroups = useMemo(() => {
-    if (!latest) return [];
-    return sortGroups(latest.groups, sortKey, sortDir);
-  }, [latest, sortKey, sortDir]);
-
-  const killProcess = useCallback(async (pid: number) => {
-    try {
-      await api.post(`/api/system/resources/kill/${pid}`);
-      toast.success(`Sent SIGTERM to PID ${pid}`);
-    } catch (e: any) {
-      toast.error(e.message || `Failed to kill PID ${pid}`);
-    }
-  }, []);
-
-  const toggle = (key: string) => {
-    setExpanded((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-  };
-
-  const handleSort = (clicked: "cpu" | "ram") => {
-    const [newKey, newDir] = toggleSort(sortKey, sortDir, clicked);
-    setSortKey(newKey);
-    setSortDir(newDir);
-  };
-
-  if (!latest) {
-    return (
-      <div className="flex items-center justify-center h-full text-text-subtle text-sm">
-        {isConnected ? "Waiting for data..." : "Connecting to resource monitor..."}
-      </div>
-    );
-  }
-
-  const elapsed = Math.round((Date.now() - latest.timestamp) / 1000);
-
-  return (
-    <div className="h-full flex flex-col overflow-hidden">
-      {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-border shrink-0">
-        <h2 className="text-sm font-medium">System Monitor</h2>
-        <div className="flex items-center gap-1.5 text-[10px] text-text-subtle">
-          {isConnected
-            ? <Wifi className="size-3 text-success" />
-            : <WifiOff className="size-3 text-error" />}
-          <span>{isConnected ? `Updated ${elapsed}s ago` : "Disconnected"}</span>
-        </div>
-      </div>
-
-      {/* Group list */}
-      <div className="flex-1 overflow-y-auto min-h-0">
-        <table className="w-full text-xs">
-          <thead>
-            <tr className="text-text-subtle border-b border-border">
-              <th className="text-left py-1.5 px-3 font-medium">Process</th>
-              <SortableHeader
-                label="CPU"
-                field="cpu"
-                activeKey={sortKey}
-                activeDir={sortDir}
-                onClick={handleSort}
-                className="w-16"
-              />
-              <SortableHeader
-                label="RAM"
-                field="ram"
-                activeKey={sortKey}
-                activeDir={sortDir}
-                onClick={handleSort}
-                className="w-20"
-              />
-              {!isMobile && (
-                <th className="py-1.5 px-2 font-medium w-[130px]">Trend / Age</th>
-              )}
-            </tr>
-          </thead>
-          <tbody>
-            {sortedGroups.map((group) => {
-              const key = `${group.type}:${group.label}`;
-              const Icon = GROUP_ICONS[group.type] ?? HelpCircle;
-              const isExpanded = expanded.has(key);
-              const sparkData = groupSparklines.get(key) ?? [];
-
-              return (
-                <GroupRow
-                  key={key}
-                  group={group}
-                  Icon={Icon}
-                  isExpanded={isExpanded}
-                  sparkData={sparkData}
-                  isMobile={isMobile}
-                  sortKey={sortKey}
-                  sortDir={sortDir}
-                  onToggle={() => toggle(key)}
-                  onKill={killProcess}
-                />
-              );
-            })}
-          </tbody>
-          {/* Total row */}
-          <tfoot>
-            <tr className="border-t border-border font-medium">
-              <td className="py-1.5 px-3">
-                Total ({latest.total.processCount} processes)
-              </td>
-              <td className={cn("text-right py-1.5 px-2", cpuColor(latest.total.cpu))}>
-                {latest.total.cpu.toFixed(1)}%
-              </td>
-              <td className="text-right py-1.5 px-2 text-text-secondary">
-                {formatRam(latest.total.ramMB)}
-              </td>
-              {!isMobile && <td />}
-            </tr>
-          </tfoot>
-        </table>
-      </div>
-    </div>
-  );
-});
+export const SystemMonitorTab = () => <SystemMonitorBody />;

package/src/web/components/system/system-monitor-window-content.tsx

@@ -0,0 +1,18 @@
+/** Floating-window body for the System Monitor. Persists the active sub-tab on the
+ *  window's payload so a reload restores it. */
+import { useWindowStore } from "@/components/floating-window/window-store";
+import type { WindowContentProps } from "@/components/floating-window/window-content-registry";
+import { SystemMonitorBody } from "./system-monitor-body";
+
+export default function SystemMonitorWindowContent({ id, payload }: WindowContentProps) {
+  const setPayload = useWindowStore((s) => s.setPayload);
+  const initialTab = payload?.tab === "processes" ? "processes" : "overview";
+
+  return (
+    <SystemMonitorBody
+      initialTab={initialTab}
+      onTabChange={(tab) => setPayload(id, { tab })}
+      variant="window"
+    />
+  );
+}

package/src/web/components/system/use-open-system-monitor.ts

@@ -0,0 +1,34 @@
+/**
+ * Opening the System Monitor on whichever presentation the device has.
+ *
+ * `WindowLayer` renders nothing below the `md` breakpoint, so `openWindow("system-monitor")`
+ * would be a silent no-op on a phone. Desktop gets the floating window; mobile gets the
+ * existing `system-monitor` tab route — both host the same `SystemMonitorBody`. On
+ * desktop, a second click focuses the already-open window rather than stacking a
+ * duplicate — there is only one machine to monitor, so a repeat open is never a
+ * distinct instance.
+ */
+
+import { useCallback } from "react";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { useWindowStore } from "@/components/floating-window/window-store";
+import { useTabStore } from "@/stores/tab-store";
+import { resolveOpenSystemMonitorAction } from "./resolve-open-system-monitor-action";
+
+/** Callback that opens the System Monitor the right way for this viewport. */
+export function useOpenSystemMonitor(): () => void {
+  const isMobile = useIsMobile();
+  const openWindow = useWindowStore((s) => s.open);
+  const focusWindow = useWindowStore((s) => s.focus);
+  const openTab = useTabStore((s) => s.openTab);
+
+  return useCallback(() => {
+    const existing = Object.values(useWindowStore.getState().windows).find(
+      (w) => w.kind === "system-monitor",
+    );
+    const action = resolveOpenSystemMonitorAction(isMobile, existing?.id ?? null);
+    if (action.kind === "tab") openTab(action.tab);
+    else if (action.kind === "focus") focusWindow(action.id);
+    else openWindow("system-monitor");
+  }, [isMobile, openWindow, focusWindow, openTab]);
+}

package/src/web/hooks/resource-monitor-lease.ts

@@ -0,0 +1,55 @@
+/** Pure/network helpers for `use-resource-monitor.ts`'s subscriber lease and history
+ *  retention — split out to keep that file under the repo's 200-line guideline and so
+ *  the lease request shape and retention rule are unit-testable in isolation. */
+import { getAuthToken } from "@/lib/api-client";
+import type { MetricsHistoryPoint } from "../../types/system-metrics";
+
+/** Group aggregates are only ever read for the last 60 points (process-table-model's
+ *  sparklines); retaining them for the full 900-point/30-min history window wastes
+ *  tens of MB of small objects on a phone for data nothing reads. System aggregates
+ *  keep the full window. */
+export const GROUPS_RETENTION = 60;
+
+/** Same bearer the kill request uses — every route under `/api/*` requires it, and the
+ *  lease endpoints have no `?token=` fallback (that exists only for the GET-based SSE
+ *  stream itself, which cannot set headers). Without this, ping/DELETE 401 silently,
+ *  the server reaps the lease at 30s, and the client reconnects forever. */
+export function authHeaders(): Record<string, string> {
+  const token = getAuthToken();
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+/** Fire-and-forget ping keeping the subscriber lease alive — a missed one just costs
+ *  one server-side reap cycle. */
+export async function pingLease(sid: string): Promise<void> {
+  await fetch(`/api/system/resources/stream/${encodeURIComponent(sid)}/ping`, {
+    method: "POST",
+    headers: authHeaders(),
+  }).catch(() => {});
+}
+
+/** Best-effort lease teardown — the server-side 30s reap is the real backstop (a proxy
+ *  can buffer this DELETE away exactly when the client actually disconnected). */
+export async function deleteLease(sid: string): Promise<void> {
+  await fetch(`/api/system/resources/stream/${encodeURIComponent(sid)}`, {
+    method: "DELETE",
+    headers: authHeaders(),
+  }).catch(() => {});
+}
+
+/** Drops `groups` from every history point older than the last `retain` entries.
+ *  Pure so the retention behaviour is unit-testable without a live EventSource. */
+export function withGroupsRetention(
+  history: MetricsHistoryPoint[],
+  retain: number,
+): MetricsHistoryPoint[] {
+  const cutoff = history.length - retain;
+  if (cutoff <= 0) return history;
+  let changed = false;
+  const next = history.map((point, i) => {
+    if (i >= cutoff || Object.keys(point.groups).length === 0) return point;
+    changed = true;
+    return { ...point, groups: {} };
+  });
+  return changed ? next : history;
+}

package/src/web/hooks/use-element-width.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState, type RefObject } from "react";
+
+/**
+ * Live `clientWidth` of an element, tracked through `ResizeObserver`.
+ *
+ * Canvas charts cannot size themselves with CSS alone — the bitmap needs a pixel
+ * width — so a chart inside a resizable card or floating window has to be told how
+ * wide its box currently is. Returns 0 until the first measurement.
+ */
+export function useElementWidth(ref: RefObject<HTMLElement | null>): number {
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    setWidth(el.clientWidth);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const next = Math.floor(entries[0]?.contentRect.width ?? el.clientWidth);
+      setWidth((prev) => (prev === next ? prev : next));
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+
+  return width;
+}

package/src/web/hooks/use-resource-monitor.ts

@@ -1,67 +1,115 @@
 import { useEffect, useRef, useState, useCallback } from "react";
 import { getAuthToken } from "@/lib/api-client";
+import type { MetricsHistoryPoint, MetricsSnapshot } from "../../types/system-metrics";
+import { METRICS_HISTORY_MAX, METRICS_PING_INTERVAL_MS } from "../../types/system-metrics";
+import { GROUPS_RETENTION, pingLease, deleteLease, withGroupsRetention } from "./resource-monitor-lease";
 
-// ── Types (mirrors backend) ────────────────────────────────────────────
-
-export interface ResourceGroup {
-  type: "server" | "terminal" | "ai-tool" | "build" | "unknown";
-  label: string;
-  cpu: number;
-  ramMB: number;
-  processes: { pid: number; cpu: number; ramMB: number; startedAt?: number; command: string }[];
-}
-
-export interface ResourceSnapshot {
-  timestamp: number;
-  server: { pid: number; cpu: number; ramMB: number };
-  total: { cpu: number; ramMB: number; processCount: number };
-  groups: ResourceGroup[];
-}
-
-const HISTORY_MAX = 600;
+export { authHeaders, pingLease, deleteLease, withGroupsRetention } from "./resource-monitor-lease";
 
 // ── Shared singleton state (multiple components share one EventSource) ─
+//
+// Two ref-counts drive one connection: `refCount` (anyone watching at all) and
+// `processesRefCount` (anyone who opted into the full tier). The *desired* URL is
+// derived from whether the latter is > 0; a mount/unmount that doesn't change that
+// desire is a no-op reconnect-wise — only a change to the desired URL tears down and
+// reconnects the EventSource.
 
 let sharedEs: EventSource | null = null;
 let refCount = 0;
-let sharedLatest: ResourceSnapshot | null = null;
-let sharedHistory: ResourceSnapshot[] = [];
+let processesRefCount = 0;
+let connectedProcesses = false; // which URL the live sharedEs was opened with
+let sharedLatest: MetricsSnapshot | null = null;
+let sharedHistory: MetricsHistoryPoint[] = [];
 let sharedConnected = false;
+let sharedSid: string | null = null;
+let sharedTickCount = 0; // snapshot frames received since the current connection opened
+let pingTimer: ReturnType<typeof setInterval> | null = null;
 const listeners = new Set<() => void>();
 
 function notify() {
   for (const cb of listeners) cb();
 }
 
-function connect() {
-  if (sharedEs) return;
+function stopLease() {
+  if (pingTimer) {
+    clearInterval(pingTimer);
+    pingTimer = null;
+  }
+  const sid = sharedSid;
+  sharedSid = null;
+  if (sid) void deleteLease(sid);
+}
+
+function startLease(sid: string) {
+  sharedSid = sid;
+  if (pingTimer) clearInterval(pingTimer);
+  pingTimer = setInterval(() => {
+    const currentSid = sharedSid;
+    if (currentSid) void pingLease(currentSid);
+  }, METRICS_PING_INTERVAL_MS);
+}
+
+function desiredUrl(wantProcesses: boolean): string {
   const token = getAuthToken();
-  const params = token ? `?token=${encodeURIComponent(token)}` : "";
-  const es = new EventSource(`/api/system/resources/stream${params}`);
+  const params = new URLSearchParams();
+  if (token) params.set("token", token);
+  if (wantProcesses) params.set("processes", "1");
+  const qs = params.toString();
+  return `/api/system/resources/stream${qs ? `?${qs}` : ""}`;
+}
+
+function connect(wantProcesses: boolean) {
+  if (sharedEs) return;
+  sharedTickCount = 0;
+  const es = new EventSource(desiredUrl(wantProcesses));
+  connectedProcesses = wantProcesses;
+
+  es.addEventListener("session", (e) => {
+    try {
+      const session: { sid: string } = JSON.parse((e as MessageEvent).data);
+      if (session.sid) startLease(session.sid);
+    } catch {
+      /* an old-shaped or malformed session frame — the snapshot listener is the source of truth */
+    }
+  });
 
   es.addEventListener("snapshot", (e) => {
     try {
-      const snapshot: ResourceSnapshot = JSON.parse(e.data);
+      const snapshot: MetricsSnapshot = JSON.parse((e as MessageEvent).data);
       sharedLatest = snapshot;
-      sharedHistory = [...sharedHistory, snapshot];
-      if (sharedHistory.length > HISTORY_MAX) {
-        sharedHistory = sharedHistory.slice(-HISTORY_MAX);
+      const point: MetricsHistoryPoint = {
+        ts: snapshot.ts,
+        system: snapshot.system,
+        groups: Object.fromEntries(
+          snapshot.groups.map((g) => [g.key, { cpu: g.cpu, ramMB: g.ramMB }]),
+        ),
+      };
+      sharedHistory = [...sharedHistory, point];
+      if (sharedHistory.length > METRICS_HISTORY_MAX) {
+        sharedHistory = sharedHistory.slice(-METRICS_HISTORY_MAX);
       }
+      sharedHistory = withGroupsRetention(sharedHistory, GROUPS_RETENTION);
+      sharedTickCount++;
       sharedConnected = true;
       notify();
-    } catch {}
+    } catch {
+      /* malformed frame — skip this tick, keep the connection */
+    }
   });
 
   es.onerror = () => {
     sharedConnected = false;
-    // Close stale ES and manually reconnect with backoff to avoid duplicate connections
+    stopLease();
     if (sharedEs) {
       sharedEs.close();
       sharedEs = null;
     }
     notify();
     if (refCount > 0) {
-      setTimeout(() => { if (!sharedEs && refCount > 0) connect(); }, 5000);
+      const wanted = processesRefCount > 0;
+      setTimeout(() => {
+        if (!sharedEs && refCount > 0) connect(wanted);
+      }, 5000);
     }
   };
 
@@ -74,6 +122,7 @@ function connect() {
 }
 
 function disconnect() {
+  stopLease();
   if (sharedEs) {
     sharedEs.close();
     sharedEs = null;
@@ -82,11 +131,34 @@ function disconnect() {
   }
 }
 
+/** Reconnect only when the desired tier actually differs from the live connection. */
+function reconcile() {
+  const wanted = processesRefCount > 0;
+  if (refCount === 0) {
+    disconnect();
+    return;
+  }
+  if (!sharedEs) {
+    connect(wanted);
+    return;
+  }
+  if (connectedProcesses !== wanted) {
+    disconnect();
+    connect(wanted);
+  }
+}
+
 // ── Hook ───────────────────────────────────────────────────────────────
 
-export function useResourceMonitor() {
+export interface UseResourceMonitorOptions {
+  /** Opt into the full tier: process rows + groups, at the cost of a heavier stream. */
+  processes?: boolean;
+}
+
+export function useResourceMonitor(opts: UseResourceMonitorOptions = {}) {
   const [, forceUpdate] = useState(0);
   const mounted = useRef(true);
+  const wantProcesses = !!opts.processes;
 
   const rerender = useCallback(() => {
     if (mounted.current) forceUpdate((n) => n + 1);
@@ -96,19 +168,25 @@ export function useResourceMonitor() {
     mounted.current = true;
     listeners.add(rerender);
     refCount++;
-    if (refCount === 1) connect();
+    if (wantProcesses) processesRefCount++;
+    reconcile();
 
     return () => {
       mounted.current = false;
       listeners.delete(rerender);
       refCount--;
-      if (refCount === 0) disconnect();
+      if (wantProcesses) processesRefCount--;
+      reconcile();
     };
-  }, [rerender]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- reconcile reads live module state, not this closure
+  }, [rerender, wantProcesses]);
 
   return {
     latest: sharedLatest,
     history: sharedHistory,
     isConnected: sharedConnected,
+    /** Snapshot frames received since the current connection opened — lets a
+     *  consumer (or an e2e script) wait past the always-0.0%/n/a first tick. */
+    tickCount: sharedTickCount,
   };
 }

package/src/web/lib/format-bytes.ts

@@ -0,0 +1,16 @@
+/** Shared byte/rate formatters for the System Monitor. */
+
+/** Same rounding rule as the deleted `system-monitor-group-row.tsx`. */
+export function formatRam(mb: number): string {
+  return mb < 1024 ? `${mb.toFixed(0)} MB` : `${(mb / 1024).toFixed(1)} GB`;
+}
+
+/** Bytes/second → human-readable rate, 1 decimal past B/s. */
+export function formatBps(bytesPerSec: number): string {
+  if (bytesPerSec < 1024) return `${bytesPerSec.toFixed(0)} B/s`;
+  const kb = bytesPerSec / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB/s`;
+  const mb = kb / 1024;
+  if (mb < 1024) return `${mb.toFixed(1)} MB/s`;
+  return `${(mb / 1024).toFixed(1)} GB/s`;
+}

package/src/web/lib/media-url.ts

@@ -30,10 +30,36 @@ export function rawMediaUrl(filePath: string, projectName: string): string {
   return withToken(mediaBase("raw", filePath, projectName));
 }
 
-/** Live ffmpeg → fragmented-MP4 stream starting at `start` seconds. */
-export function transcodeMediaUrl(filePath: string, projectName: string, start = 0): string {
-  const base = mediaBase("transcode", filePath, projectName);
-  return withToken(start > 0 ? `${base}&start=${start.toFixed(3)}` : base);
+/**
+ * Live ffmpeg → fragmented-MP4 stream starting at `start` seconds.
+ * `sessionId` identifies the player instance: the server kills that player's previous
+ * job before starting this one, so a seek never leaves an orphaned ffmpeg behind —
+ * even through proxies (Cloudflare Tunnel) that do not propagate client disconnects.
+ */
+export function transcodeMediaUrl(filePath: string, projectName: string, start = 0, sessionId?: string): string {
+  let url = mediaBase("transcode", filePath, projectName);
+  if (start > 0) url += `&start=${start.toFixed(3)}`;
+  if (sessionId) url += `&sid=${encodeURIComponent(sessionId)}`;
+  return withToken(url);
+}
+
+/**
+ * Tell the server the player is gone so its ffmpeg job stops now. `keepalive` lets the
+ * request complete even when fired from a page that is unloading.
+ */
+export function stopTranscode(filePath: string, projectName: string, sessionId: string): void {
+  const prefix = isExternalPath(filePath) ? "/api/fs" : `${projectUrl(projectName)}/files`;
+  const token = getAuthToken();
+  void fetch(`${prefix}/transcode?sid=${encodeURIComponent(sessionId)}`, {
+    method: "DELETE",
+    keepalive: true,
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  }).catch(() => {});
+}
+
+/** Short random id for one mounted player. */
+export function newMediaSessionId(): string {
+  return Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
 }
 
 export interface MediaProbeInfo {

package/.release-run.sh

@@ -1,5 +0,0 @@
-#!/usr/bin/env bash
-# Temporary runner: invokes the release script with bun on PATH. Deleted after use.
-export PATH="$HOME/.bun/bin:$PATH"
-cd /c/Users/PC/ppm || exit 1
-exec bash scripts/release.sh 0.18.7

package/dist/web/assets/architecture-PBZL5I3N-Bs7wzj-W.js

@@ -1 +0,0 @@
-import{K as e}from"./vendor-mermaid-Bg4vE8QA.js";export{e as createArchitectureServices};

package/dist/web/assets/arrow-right-DubGFkN8.js

@@ -1 +0,0 @@
-import{t as e}from"./createLucideIcon-D8pyde1A.js";var t=e(`arrow-right`,[[`path`,{d:`M5 12h14`,key:`1ays0h`}],[`path`,{d:`m12 5 7 7-7 7`,key:`xquz4c`}]]);export{t};

package/dist/web/assets/button-B4MWPjWj.js

@@ -1 +0,0 @@
-import{o as e}from"./rolldown-runtime-FhOqtrmT.js";import{S as t,x as n}from"./vendor-markdown-Ls5AcU91.js";import{dt as r}from"./vendor-ui-CaeeFO0B.js";import{t as i}from"./createLucideIcon-D8pyde1A.js";import{i as a,n as o}from"./utils-DoY4yTP-.js";var s=i(`circle`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}]]),c=e=>typeof e==`boolean`?`${e}`:e===0?`0`:e,l=a,u=(e,t)=>n=>{if(t?.variants==null)return l(e,n?.class,n?.className);let{variants:r,defaultVariants:i}=t,a=Object.keys(r).map(e=>{let t=n?.[e],a=i?.[e];if(t===null)return null;let o=c(t)||c(a);return r[e][o]}),o=n&&Object.entries(n).reduce((e,t)=>{let[n,r]=t;return r===void 0||(e[n]=r),e},{});return l(e,a,t?.compoundVariants?.reduce((e,t)=>{let{class:n,className:r,...a}=t;return Object.entries(a).every(e=>{let[t,n]=e;return Array.isArray(n)?n.includes({...i,...o}[t]):{...i,...o}[t]===n})?[...e,n,r]:e},[]),n?.class,n?.className)};e(t(),1);var d=n(),f=u(`inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 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 hover:bg-primary/90`,destructive:`bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40`,outline:`border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50`,secondary:`bg-secondary text-secondary-foreground hover:bg-secondary/80`,ghost:`hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50`,link:`text-primary underline-offset-4 hover:underline`},size:{default:`h-9 px-4 py-2 has-[>svg]:px-3`,xs:`h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3`,sm:`h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5`,lg:`h-10 rounded-md px-6 has-[>svg]:px-4`,icon:`size-9`,"icon-xs":`size-6 rounded-md [&_svg:not([class*='size-'])]:size-3`,"icon-sm":`size-8`,"icon-lg":`size-10`}},defaultVariants:{variant:`default`,size:`default`}});function p({className:e,variant:t=`default`,size:n=`default`,asChild:i=!1,...a}){return(0,d.jsx)(i?r:`button`,{"data-slot":`button`,"data-variant":t,"data-size":n,className:o(f({variant:t,size:n,className:e})),...a})}export{u as n,s as r,p as t};