thepopebot 1.1.2 → 1.2.3

package/lib/chat/components/triggers-page.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { PageLayout } from "./page-layout.js";
+import { ZapIcon, ChevronDownIcon } from "./icons.js";
+import { getSwarmConfig } from "../actions.js";
+const typeBadgeStyles = {
+  agent: "bg-purple-500/10 text-purple-500",
+  command: "bg-blue-500/10 text-blue-500",
+  webhook: "bg-orange-500/10 text-orange-500"
+};
+function ActionCard({ action, index }) {
+  const type = action.type || "agent";
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-background p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground font-medium", children: [
+        "Action ",
+        index + 1
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${typeBadgeStyles[type] || typeBadgeStyles.agent}`, children: type })
+    ] }),
+    type === "agent" && action.job && /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: action.job }),
+    type === "command" && action.command && /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: action.command }),
+    type === "webhook" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto", children: [
+        action.method && action.method !== "POST" ? `${action.method} ` : "",
+        action.url
+      ] }),
+      action.vars && Object.keys(action.vars).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Variables" }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: JSON.stringify(action.vars, null, 2) })
+      ] })
+    ] })
+  ] });
+}
+function TriggerCard({ trigger }) {
+  const [expanded, setExpanded] = useState(false);
+  const disabled = trigger.enabled === false;
+  const actions = trigger.actions || [];
+  const actionTypes = actions.map((a) => a.type || "agent").filter((v, i, arr) => arr.indexOf(v) === i);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded-lg border bg-card transition-opacity ${disabled ? "opacity-60" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setExpanded(!expanded),
+            className: "flex items-center gap-3 w-full text-left p-4 hover:bg-accent/50 rounded-lg",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-muted p-2", children: /* @__PURE__ */ jsx(ZapIcon, { size: 16 }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: trigger.name }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-mono", children: trigger.watch_path }),
+                  /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-border", children: "|" }),
+                  actions.length,
+                  " action",
+                  actions.length !== 1 ? "s" : "",
+                  actionTypes.length > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-1", children: [
+                    "(",
+                    actionTypes.join(", "),
+                    ")"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${disabled ? "bg-muted text-muted-foreground" : "bg-green-500/10 text-green-500"}`,
+                    children: disabled ? "disabled" : "enabled"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: `transition-transform ${expanded ? "rotate-180" : ""}`, children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }) })
+              ] })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-3 flex flex-col gap-2", children: actions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No actions defined." }) : actions.map((action, i) => /* @__PURE__ */ jsx(ActionCard, { action, index: i }, i)) })
+      ]
+    }
+  );
+}
+function TriggersPage({ session }) {
+  const [triggers, setTriggers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    getSwarmConfig().then((data) => {
+      if (data?.triggers) setTriggers(data.triggers);
+    }).catch(() => {
+    }).finally(() => setLoading(false));
+  }, []);
+  const enabledCount = triggers.filter((t) => t.enabled !== false).length;
+  return /* @__PURE__ */ jsxs(PageLayout, { session, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Triggers" }),
+      !loading && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
+        triggers.length,
+        " trigger",
+        triggers.length !== 1 ? "s" : "",
+        " configured, ",
+        enabledCount,
+        " enabled"
+      ] })
+    ] }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-lg bg-border/50" }, i)) }) : triggers.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsx(ZapIcon, { size: 24 }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: "No triggers configured" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground max-w-sm", children: [
+        "Add webhook triggers by editing ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: "config/TRIGGERS.json" }),
+        " in your project."
+      ] })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: triggers.map((trigger, i) => /* @__PURE__ */ jsx(TriggerCard, { trigger }, i)) })
+  ] });
+}
+export {
+  TriggersPage
+};

package/lib/chat/components/triggers-page.jsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { PageLayout } from './page-layout.js';
+import { ZapIcon, ChevronDownIcon } from './icons.js';
+import { getSwarmConfig } from '../actions.js';
+
+const typeBadgeStyles = {
+  agent: 'bg-purple-500/10 text-purple-500',
+  command: 'bg-blue-500/10 text-blue-500',
+  webhook: 'bg-orange-500/10 text-orange-500',
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Action Card (nested inside trigger)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ActionCard({ action, index }) {
+  const type = action.type || 'agent';
+
+  return (
+    <div className="rounded-md border bg-background p-3">
+      <div className="flex items-center gap-2 mb-2">
+        <span className="text-xs text-muted-foreground font-medium">Action {index + 1}</span>
+        <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${typeBadgeStyles[type] || typeBadgeStyles.agent}`}>
+          {type}
+        </span>
+      </div>
+      {type === 'agent' && action.job && (
+        <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48">
+          {action.job}
+        </pre>
+      )}
+      {type === 'command' && action.command && (
+        <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48">
+          {action.command}
+        </pre>
+      )}
+      {type === 'webhook' && (
+        <div className="flex flex-col gap-2">
+          <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto">
+            {action.method && action.method !== 'POST' ? `${action.method} ` : ''}{action.url}
+          </pre>
+          {action.vars && Object.keys(action.vars).length > 0 && (
+            <div>
+              <p className="text-xs font-medium text-muted-foreground mb-1">Variables</p>
+              <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48">
+                {JSON.stringify(action.vars, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Trigger Card
+// ─────────────────────────────────────────────────────────────────────────────
+
+function TriggerCard({ trigger }) {
+  const [expanded, setExpanded] = useState(false);
+  const disabled = trigger.enabled === false;
+  const actions = trigger.actions || [];
+  const actionTypes = actions
+    .map((a) => a.type || 'agent')
+    .filter((v, i, arr) => arr.indexOf(v) === i);
+
+  return (
+    <div
+      className={`rounded-lg border bg-card transition-opacity ${disabled ? 'opacity-60' : ''}`}
+    >
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-3 w-full text-left p-4 hover:bg-accent/50 rounded-lg"
+      >
+        <div className="shrink-0 rounded-md bg-muted p-2">
+          <ZapIcon size={16} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium truncate">{trigger.name}</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            <span className="font-mono">{trigger.watch_path}</span>
+            <span className="mx-1.5 text-border">|</span>
+            {actions.length} action{actions.length !== 1 ? 's' : ''}
+            {actionTypes.length > 0 && (
+              <span className="ml-1">({actionTypes.join(', ')})</span>
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          <span
+            className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${
+              disabled ? 'bg-muted text-muted-foreground' : 'bg-green-500/10 text-green-500'
+            }`}
+          >
+            {disabled ? 'disabled' : 'enabled'}
+          </span>
+          <span className={`transition-transform ${expanded ? 'rotate-180' : ''}`}>
+            <ChevronDownIcon size={14} />
+          </span>
+        </div>
+      </button>
+
+      {expanded && (
+        <div className="border-t px-4 py-3 flex flex-col gap-2">
+          {actions.length === 0 ? (
+            <p className="text-xs text-muted-foreground">No actions defined.</p>
+          ) : (
+            actions.map((action, i) => (
+              <ActionCard key={i} action={action} index={i} />
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Page
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function TriggersPage({ session }) {
+  const [triggers, setTriggers] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getSwarmConfig()
+      .then((data) => {
+        if (data?.triggers) setTriggers(data.triggers);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  const enabledCount = triggers.filter((t) => t.enabled !== false).length;
+
+  return (
+    <PageLayout session={session}>
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold">Triggers</h1>
+        {!loading && (
+          <p className="text-sm text-muted-foreground mt-1">
+            {triggers.length} trigger{triggers.length !== 1 ? 's' : ''} configured, {enabledCount} enabled
+          </p>
+        )}
+      </div>
+
+      {loading ? (
+        <div className="flex flex-col gap-3">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="h-20 animate-pulse rounded-lg bg-border/50" />
+          ))}
+        </div>
+      ) : triggers.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="rounded-full bg-muted p-4 mb-4">
+            <ZapIcon size={24} />
+          </div>
+          <p className="text-sm font-medium mb-1">No triggers configured</p>
+          <p className="text-xs text-muted-foreground max-w-sm">
+            Add webhook triggers by editing <span className="font-mono">config/TRIGGERS.json</span> in your project.
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {triggers.map((trigger, i) => (
+            <TriggerCard key={i} trigger={trigger} />
+          ))}
+        </div>
+      )}
+    </PageLayout>
+  );
+}

package/lib/chat/components/ui/dropdown-menu.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, useRef } from "react";
+import { cn } from "../../utils.js";
+const DropdownContext = createContext({ open: false, onOpenChange: () => {
+} });
+function DropdownMenu({ children, open: controlledOpen, onOpenChange: controlledOnOpenChange }) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+  const onOpenChange = controlledOnOpenChange || setInternalOpen;
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: { open, onOpenChange }, children: /* @__PURE__ */ jsx("div", { className: "relative inline-block", children }) });
+}
+function DropdownMenuTrigger({ children, asChild, ...props }) {
+  const { open, onOpenChange } = useContext(DropdownContext);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    onOpenChange(!open);
+  };
+  if (asChild && children) {
+    return /* @__PURE__ */ jsx("span", { onClick: handleClick, ...props, children });
+  }
+  return /* @__PURE__ */ jsx("button", { onClick: handleClick, ...props, children });
+}
+function DropdownMenuContent({ children, className, align = "start", side = "bottom", sideOffset = 4, ...props }) {
+  const { open, onOpenChange } = useContext(DropdownContext);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onOpenChange(false);
+      }
+    };
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    setTimeout(() => document.addEventListener("click", handleClickOutside), 0);
+    document.addEventListener("keydown", handleEsc);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleEsc);
+    };
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-muted p-1 text-foreground shadow-md",
+        side === "bottom" && `top-full mt-1`,
+        side === "top" && `bottom-full mb-1`,
+        align === "end" && "right-0",
+        align === "start" && "left-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function DropdownMenuItem({ children, className, onClick, ...props }) {
+  const { onOpenChange } = useContext(DropdownContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "menuitem",
+      className: cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-background focus:bg-background",
+        className
+      ),
+      onClick: (e) => {
+        onClick?.(e);
+        onOpenChange(false);
+      },
+      ...props,
+      children
+    }
+  );
+}
+function DropdownMenuSeparator({ className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("-mx-1 my-1 h-px bg-border", className) });
+}
+function DropdownMenuLabel({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-2 py-1.5 text-sm font-semibold", className), children });
+}
+function DropdownMenuGroup({ children }) {
+  return /* @__PURE__ */ jsx("div", { children });
+}
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+};

package/lib/chat/components/ui/dropdown-menu.jsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect, useRef } from 'react';
+import { cn } from '../../utils.js';
+
+const DropdownContext = createContext({ open: false, onOpenChange: () => {} });
+
+export function DropdownMenu({ children, open: controlledOpen, onOpenChange: controlledOnOpenChange }) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const onOpenChange = controlledOnOpenChange || setInternalOpen;
+
+  return (
+    <DropdownContext.Provider value={{ open, onOpenChange }}>
+      <div className="relative inline-block">{children}</div>
+    </DropdownContext.Provider>
+  );
+}
+
+export function DropdownMenuTrigger({ children, asChild, ...props }) {
+  const { open, onOpenChange } = useContext(DropdownContext);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    onOpenChange(!open);
+  };
+  if (asChild && children) {
+    return (
+      <span onClick={handleClick} {...props}>
+        {children}
+      </span>
+    );
+  }
+  return (
+    <button onClick={handleClick} {...props}>
+      {children}
+    </button>
+  );
+}
+
+export function DropdownMenuContent({ children, className, align = 'start', side = 'bottom', sideOffset = 4, ...props }) {
+  const { open, onOpenChange } = useContext(DropdownContext);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onOpenChange(false);
+      }
+    };
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') onOpenChange(false);
+    };
+    setTimeout(() => document.addEventListener('click', handleClickOutside), 0);
+    document.addEventListener('keydown', handleEsc);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener('keydown', handleEsc);
+    };
+  }, [open, onOpenChange]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'absolute z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-muted p-1 text-foreground shadow-md',
+        side === 'bottom' && `top-full mt-1`,
+        side === 'top' && `bottom-full mb-1`,
+        align === 'end' && 'right-0',
+        align === 'start' && 'left-0',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuItem({ children, className, onClick, ...props }) {
+  const { onOpenChange } = useContext(DropdownContext);
+  return (
+    <div
+      role="menuitem"
+      className={cn(
+        'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-background focus:bg-background',
+        className
+      )}
+      onClick={(e) => {
+        onClick?.(e);
+        onOpenChange(false);
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuSeparator({ className }) {
+  return <div className={cn('-mx-1 my-1 h-px bg-border', className)} />;
+}
+
+export function DropdownMenuLabel({ children, className }) {
+  return (
+    <div className={cn('px-2 py-1.5 text-sm font-semibold', className)}>
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuGroup({ children }) {
+  return <div>{children}</div>;
+}

package/lib/chat/components/ui/scroll-area.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function ScrollArea({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-y-auto scrollbar-thin", children }) });
+}
+function ScrollBar() {
+  return null;
+}
+export {
+  ScrollArea,
+  ScrollBar
+};

package/lib/chat/components/ui/scroll-area.jsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { cn } from '../../utils.js';
+
+export function ScrollArea({ children, className, ...props }) {
+  return (
+    <div className={cn('relative overflow-hidden', className)} {...props}>
+      <div className="h-full w-full overflow-y-auto scrollbar-thin">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function ScrollBar() {
+  return null;
+}

package/lib/chat/components/ui/separator.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+function Separator({ className, orientation = "horizontal", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Separator
+};

package/lib/chat/components/ui/separator.jsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { cn } from '../../utils.js';
+
+export function Separator({ className, orientation = 'horizontal', ...props }) {
+  return (
+    <div
+      role="separator"
+      aria-orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/lib/chat/components/ui/sheet.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect } from "react";
+import { cn } from "../../utils.js";
+const SheetContext = createContext({ open: false, onOpenChange: () => {
+} });
+function Sheet({ children, open, onOpenChange }) {
+  return /* @__PURE__ */ jsx(SheetContext.Provider, { value: { open, onOpenChange }, children });
+}
+function SheetTrigger({ children, asChild, ...props }) {
+  const { onOpenChange } = useContext(SheetContext);
+  if (asChild && children) {
+    return /* @__PURE__ */ jsx("span", { onClick: () => onOpenChange(true), ...props, children });
+  }
+  return /* @__PURE__ */ jsx("button", { onClick: () => onOpenChange(true), ...props, children });
+}
+function SheetContent({ children, className, side = "left", ...props }) {
+  const { open, onOpenChange } = useContext(SheetContext);
+  useEffect(() => {
+    if (!open) return;
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/50",
+        onClick: () => onOpenChange(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "fixed z-50 bg-background shadow-lg transition-transform",
+          side === "left" && "inset-y-0 left-0 w-3/4 max-w-sm border-r border-border",
+          side === "right" && "inset-y-0 right-0 w-3/4 max-w-sm border-l border-border",
+          className
+        ),
+        ...props,
+        children
+      }
+    )
+  ] });
+}
+function SheetHeader({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-2 p-4", className), children });
+}
+function SheetTitle({ children, className }) {
+  return /* @__PURE__ */ jsx("h2", { className: cn("text-lg font-semibold text-foreground", className), children });
+}
+function SheetDescription({ children, className }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", className), children });
+}
+function SheetClose({ children, asChild, ...props }) {
+  const { onOpenChange } = useContext(SheetContext);
+  if (asChild && children) {
+    return /* @__PURE__ */ jsx("span", { onClick: () => onOpenChange(false), ...props, children });
+  }
+  return /* @__PURE__ */ jsx("button", { onClick: () => onOpenChange(false), ...props, children });
+}
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+};