ghostykit 0.9.0 → 0.10.0

package/dist/plugins/index.js

@@ -3,9 +3,10 @@ import {
   definePlugin,
   pluginPoints,
   pluginRequires
-} from "../chunks/chunk-VFCROLFF.js";
+} from "../chunks/chunk-6PYYF4XU.js";
 import "../chunks/chunk-UUH37KXA.js";
 import "../chunks/chunk-6U545WJG.js";
+import "../chunks/chunk-AQBQ3QZH.js";
 
 // src/plugins/index.tsx
 import { useEffect, useState, useSyncExternalStore } from "react";

package/dist/react/index.js

@@ -31,47 +31,15 @@ import {
   readSse
 } from "../chunks/chunk-KG23PQI2.js";
 import {
-  Activity,
-  AppWindow,
-  ArrowDown,
-  ArrowUpRight,
   BUILTIN_CUSTOM,
-  BookOpen,
-  Check,
-  ChevronRight,
-  CircleCheck,
-  CircleSlash,
-  CircleX,
-  Clock,
-  Coins,
   Composer,
-  Copy,
-  ExternalLink,
-  FilePenLine,
-  FileSpreadsheet,
-  FileText,
-  Folder,
-  Gauge,
-  Globe,
-  Image,
-  Inbox,
-  ListChecks,
-  LoaderCircle,
   ModelPicker,
-  OctagonX,
   PilotoContext,
   ReferenceChips,
-  RotateCcw,
   STRINGS_EN,
   STRINGS_ES,
-  Search,
-  Send,
-  ShieldAlert,
   Suggestions,
   TurnContext,
-  UsersRound,
-  Wrench,
-  X,
   definePlugin,
   isDev,
   mimeOf,
@@ -80,7 +48,7 @@ import {
   resolvePlugins,
   rootProps,
   usePiloto
-} from "../chunks/chunk-VFCROLFF.js";
+} from "../chunks/chunk-6PYYF4XU.js";
 import {
   TOOL_VERBS_EN,
   TOOL_VERBS_ES,
@@ -97,6 +65,40 @@ import {
   formatDuration,
   systemNoteOf
 } from "../chunks/chunk-6U545WJG.js";
+import {
+  Activity,
+  AppWindow,
+  ArrowDown,
+  ArrowUpRight,
+  BookOpen,
+  Check,
+  ChevronRight,
+  CircleCheck,
+  CircleSlash,
+  CircleX,
+  Clock,
+  Coins,
+  Copy,
+  ExternalLink,
+  FilePenLine,
+  FileSpreadsheet,
+  FileText,
+  Folder,
+  Gauge,
+  Globe,
+  Image,
+  Inbox,
+  ListChecks,
+  LoaderCircle,
+  OctagonX,
+  RotateCcw,
+  Search,
+  Send,
+  ShieldAlert,
+  UsersRound,
+  Wrench,
+  X
+} from "../chunks/chunk-AQBQ3QZH.js";
 
 // src/react/Piloto.tsx
 import {

package/dist/split/index.d.ts

@@ -9,6 +9,10 @@ export type PilotoSplitOptions = {
     desktopMinWidth?: number;
     /** Se llama cada vez que se abre o se cierra (p. ej. para contraer el menú lateral de la app). */
     onOpenChange?: (open: boolean) => void;
+    /** Atajo para abrir/cerrar con ⌘/Ctrl + esta tecla (default "i"; `false` lo apaga). */
+    shortcut?: string | false;
+    /** Esc cierra el panel de escritorio (default true; en la hoja lo maneja vaul). */
+    escapeToClose?: boolean;
 };
 export declare function usePilotoSplit(options: PilotoSplitOptions | string): {
     isDesktop: boolean;
@@ -19,6 +23,8 @@ export declare function usePilotoSplit(options: PilotoSplitOptions | string): {
     setSheetOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     mounted: boolean;
     widthKey: string;
+    animating: boolean;
+    targetWidth: number;
     /** Abierto en la forma que toca (panel o hoja). */
     isOpen: boolean;
     open: () => void;
@@ -56,3 +62,42 @@ export declare function useStickyPanelHeight(enabled?: boolean): {
 };
 /** Panel lateral desde `minWidth` px (default 1024, el `lg` de Tailwind), hoja debajo. En el servidor, escritorio. */
 export declare function useIsDesktop(minWidth?: number): boolean;
+/**
+ * El botón para abrir el piloto: una pastilla con el avatar y «Hablar con …» que entra y sale con
+ * resorte (como el tablero de Ventas de gs). Se muestra sólo con el piloto cerrado.
+ */
+export declare function PilotoLauncher({ split, label, avatarSrc, className, style, }: {
+    split: PilotoSplitState;
+    /** Texto de la pastilla, p. ej. «Hablar con Ghosty». Sin texto, sólo el avatar. */
+    label?: string;
+    avatarSrc: string;
+    /** Posición y colores (`fixed bottom-6 right-6 …`). */
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+/**
+ * La conversación visible: una llave que se guarda en el navegador y cambia con «Nueva conversación».
+ * La app arma con ella el `threadId` (p. ej. `${base}-${key}`); el hilo anterior NO se borra (sigue en
+ * el servidor), sólo deja de verse. Sin almacenamiento, arranca en "1".
+ */
+export declare function useConversationKey(storageKey: string): readonly [string, () => void];
+/**
+ * La carcasa estándar del piloto en el panel o la hoja: encabezado (avatar, nombre y acciones:
+ * «Nueva conversación» y cerrar) y el chat debajo. En el panel queda pegado a la ventana aunque la
+ * página tenga scroll (el composer siempre a la vista). Va dentro de `PilotoSplit` (`piloto={(v) => …}`).
+ */
+export declare function PilotoPanel({ variant, title, avatar, onClose, onNewConversation, canStartNew, actions, locale, className, children, }: {
+    variant: PilotoSplitVariant;
+    title: ReactNode;
+    avatar?: ReactNode;
+    onClose?: () => void;
+    /** Sin esto no sale el botón. Normalmente `rotate` de `useConversationKey`. */
+    onNewConversation?: () => void;
+    /** Ocultar «Nueva conversación» (p. ej. con el hilo vacío). */
+    canStartNew?: boolean;
+    /** Más botones a la derecha del encabezado, antes de los estándar. */
+    actions?: ReactNode;
+    locale?: "es" | "en";
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/split/index.js

@@ -1,16 +1,30 @@
+import {
+  SquarePen,
+  X
+} from "../chunks/chunk-AQBQ3QZH.js";
+
 // src/split/index.tsx
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Group, Panel, Separator, usePanelRef } from "react-resizable-panels";
 import { Drawer } from "vaul";
+import { AnimatePresence, motion } from "motion/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var SHEET_SNAPS = [0.6, 0.94];
+var OPEN_MS = 320;
 function usePilotoSplit(options) {
-  const { widthKey, defaultWidth = 420, desktopMinWidth = 1024, onOpenChange } = typeof options === "string" ? { widthKey: options } : options;
+  const { widthKey, defaultWidth = 420, desktopMinWidth = 1024, onOpenChange, shortcut = "i", escapeToClose = true } = typeof options === "string" ? { widthKey: options } : options;
   const isDesktop = useIsDesktop(desktopMinWidth);
   const panelRef = usePanelRef();
   const [panelOpen, setPanelOpen] = useState(false);
   const [sheetOpen, setSheetOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const [animating, setAnimating] = useState(false);
+  const animTimer = useRef(void 0);
+  const animate = useCallback(() => {
+    setAnimating(true);
+    clearTimeout(animTimer.current);
+    animTimer.current = setTimeout(() => setAnimating(false), OPEN_MS + 40);
+  }, []);
   useEffect(() => {
     const panel = panelRef.current;
     if (isDesktop || !panel || panel.isCollapsed()) return;
@@ -22,19 +36,37 @@ function usePilotoSplit(options) {
     if (!isDesktop) return setSheetOpen(true);
     const panel = panelRef.current;
     if (!panel || !panel.isCollapsed()) return;
+    animate();
     panel.expand();
     panel.resize(`${readWidth(widthKey, defaultWidth)}px`);
-  }, [isDesktop, panelRef, widthKey, defaultWidth]);
+  }, [isDesktop, panelRef, widthKey, defaultWidth, animate]);
   const close = useCallback(() => {
-    panelRef.current?.collapse();
+    const panel = panelRef.current;
+    if (panel && !panel.isCollapsed()) animate();
+    panel?.collapse();
     setSheetOpen(false);
-  }, [panelRef]);
+  }, [panelRef, animate]);
   const isOpen = isDesktop ? panelOpen : sheetOpen;
   const notify = useRef(onOpenChange);
   notify.current = onOpenChange;
   useEffect(() => {
     notify.current?.(isOpen);
   }, [isOpen]);
+  const toggleRef = useRef(() => {
+  });
+  toggleRef.current = isOpen ? close : open;
+  useEffect(() => {
+    const onKey = (e) => {
+      if (shortcut && (e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === shortcut.toLowerCase()) {
+        e.preventDefault();
+        toggleRef.current();
+      } else if (escapeToClose && e.key === "Escape" && !e.defaultPrevented && isDesktop && isOpen) {
+        close();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut, escapeToClose, isDesktop, isOpen, close]);
   return {
     isDesktop,
     panelRef,
@@ -44,6 +76,8 @@ function usePilotoSplit(options) {
     setSheetOpen,
     mounted,
     widthKey,
+    animating,
+    targetWidth: readWidth(widthKey, defaultWidth),
     /** Abierto en la forma que toca (panel o hoja). */
     isOpen,
     open,
@@ -62,7 +96,7 @@ function PilotoSplit({
   sheetClassName = "",
   style
 }) {
-  const { isDesktop, panelRef, panelOpen, setPanelOpen, sheetOpen, setSheetOpen, mounted, widthKey } = split;
+  const { isDesktop, panelRef, panelOpen, setPanelOpen, sheetOpen, setSheetOpen, mounted, widthKey, animating, targetWidth } = split;
   const [sheetSnap, setSheetSnap] = useState(SHEET_SNAPS[0]);
   const sheetChat = useRef(null);
   const [sheetChatH, setSheetChatH] = useState(null);
@@ -105,7 +139,7 @@ function PilotoSplit({
           maxSize: "60%",
           style: { overflow: "clip", minWidth: 0 },
           onResize: (size) => setPanelOpen(size.inPixels > 0),
-          children: mounted && isDesktop && /* @__PURE__ */ jsx("div", { style: { height: "100%" }, inert: !panelOpen, children: piloto("panel") })
+          children: mounted && isDesktop && /* @__PURE__ */ jsx("div", { style: { height: "100%", width: animating ? `${targetWidth}px` : "100%" }, inert: !panelOpen, children: piloto("panel") })
         }
       )
     ] }) }),
@@ -188,8 +222,99 @@ function useIsDesktop(minWidth = 1024) {
   }, [minWidth]);
   return desktop;
 }
+function PilotoLauncher({
+  split,
+  label,
+  avatarSrc,
+  className = "",
+  style
+}) {
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: !split.isOpen && /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      type: "button",
+      onClick: split.open,
+      "aria-label": label ?? "Abrir el piloto",
+      title: label,
+      initial: { opacity: 0, scale: 0.6, y: 20 },
+      animate: { opacity: 1, scale: 1, y: 0 },
+      exit: { opacity: 0, scale: 0.6, y: 20 },
+      transition: { type: "spring", stiffness: 400, damping: 24 },
+      className: `gk-launcher ${label ? "" : "gk-launcher-icon"} ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsx("img", { src: avatarSrc, alt: "" }),
+        label && /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    },
+    "gk-launcher"
+  ) });
+}
+function useConversationKey(storageKey) {
+  const [key, setKey] = useState(() => {
+    try {
+      return localStorage.getItem(storageKey) || "1";
+    } catch {
+      return "1";
+    }
+  });
+  const rotate = useCallback(() => {
+    const next = Date.now().toString(36);
+    try {
+      localStorage.setItem(storageKey, next);
+    } catch {
+    }
+    setKey(next);
+  }, [storageKey]);
+  return [key, rotate];
+}
+var PANEL_LABELS = {
+  es: { newConversation: "Nueva conversaci\xF3n", close: "Cerrar" },
+  en: { newConversation: "New conversation", close: "Close" }
+};
+function PilotoPanel({
+  variant,
+  title,
+  avatar,
+  onClose,
+  onNewConversation,
+  canStartNew = true,
+  actions,
+  locale = "es",
+  className = "",
+  children
+}) {
+  const sticky = useStickyPanelHeight(variant === "panel");
+  const t = PANEL_LABELS[locale];
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      ref: sticky.ref,
+      "aria-label": typeof title === "string" ? title : void 0,
+      style: sticky.style,
+      className: `gk-panel ${variant === "panel" ? "gk-panel-side" : ""} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "gk-panel-header", children: [
+          /* @__PURE__ */ jsxs("div", { className: "gk-panel-title", children: [
+            avatar,
+            /* @__PURE__ */ jsx("span", { children: title })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "gk-panel-actions", children: [
+            actions,
+            onNewConversation && canStartNew && /* @__PURE__ */ jsx("button", { type: "button", className: "gk-panel-btn", onClick: onNewConversation, title: t.newConversation, "aria-label": t.newConversation, children: /* @__PURE__ */ jsx(SquarePen, { size: 17, strokeWidth: 1.8 }) }),
+            onClose && variant === "panel" && /* @__PURE__ */ jsx("button", { type: "button", className: "gk-panel-btn", onClick: onClose, title: t.close, "aria-label": t.close, children: /* @__PURE__ */ jsx(X, { size: 18, strokeWidth: 1.8 }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "gk-panel-body", children })
+      ]
+    }
+  );
+}
 export {
+  PilotoLauncher,
+  PilotoPanel,
   PilotoSplit,
+  useConversationKey,
   useIsDesktop,
   usePilotoSplit,
   useStickyPanelHeight

package/dist/split.css

@@ -4,7 +4,7 @@
 
 /* Abrir y cerrar se animan; arrastrar, no. */
 .gk-split:not(:has([data-separator="active"])) > [data-panel] {
-  transition: flex-grow 280ms cubic-bezier(0.22, 1, 0.36, 1);
+  transition: flex-grow 320ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 @media (prefers-reduced-motion: reduce) {
   .gk-split > [data-panel] { transition: none; }
@@ -48,3 +48,36 @@
 }
 .gk-split-handle { margin: 8px auto !important; height: 6px !important; width: 48px !important; flex-shrink: 0; background: #d1d5db !important; }
 .gk-split-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+/* Pastilla para abrir el piloto. Colores: --gk-launcher-bg, --gk-launcher-fg. */
+.gk-launcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px 8px 8px;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--gk-launcher-bg, #191a20);
+  color: var(--gk-launcher-fg, #fff);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 12px 30px -10px rgb(25 26 32 / 0.6);
+  z-index: 40;
+}
+.gk-launcher img { width: 32px; height: 32px; object-fit: contain; }
+.gk-launcher-icon { padding: 8px; }
+
+/* Carcasa estándar del piloto (PilotoPanel). Colores: --gk-panel-bg, --gk-panel-border, --gk-panel-fg, --gk-panel-muted, --gk-panel-hover. */
+.gk-panel { display: flex; width: 100%; flex-direction: column; overflow: hidden; background: var(--gk-panel-bg, #fff); }
+.gk-panel-side { border-left: 1px solid var(--gk-panel-border, #e5e7eb); }
+.gk-panel-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--gk-panel-border, #eceef2); }
+.gk-panel-title { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--gk-panel-fg, #111827); font-size: 14px; font-weight: 600; }
+.gk-panel-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gk-panel-title img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
+.gk-panel-actions { display: flex; align-items: center; gap: 2px; }
+.gk-panel-btn { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 0; border-radius: 9999px; background: transparent; color: var(--gk-panel-muted, #6b7280); cursor: pointer; }
+.gk-panel-btn:hover { background: var(--gk-panel-hover, rgb(17 24 39 / 0.06)); color: var(--gk-panel-fg, #111827); }
+.gk-panel-body { display: flex; min-height: 0; flex: 1; flex-direction: column; }

package/dist/styles.css

@@ -155,12 +155,18 @@
 .piloto .right-4:not([data-piloto-isolate] *) {
   right: calc(var(--spacing) * 4);
 }
+.piloto .right-6:not([data-piloto-isolate] *) {
+  right: calc(var(--spacing) * 6);
+}
 .piloto .bottom-2:not([data-piloto-isolate] *) {
   bottom: calc(var(--spacing) * 2);
 }
 .piloto .bottom-4:not([data-piloto-isolate] *) {
   bottom: calc(var(--spacing) * 4);
 }
+.piloto .bottom-6:not([data-piloto-isolate] *) {
+  bottom: calc(var(--spacing) * 6);
+}
 .piloto .bottom-full:not([data-piloto-isolate] *) {
   bottom: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostykit",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Ghosty Autopilot — the autopilot chat for your React app, on AG-UI: works with LangGraph, Mastra, CrewAI or any AG-UI agent. Streaming text, agent steps, human approval cards (interrupt/resume), attachments and voice.",
   "type": "module",
   "main": "./dist/core/index.js",