ghostykit 0.9.0 → 0.9.1

package/README.md

@@ -276,6 +276,7 @@ const split = usePilotoSplit({ widthKey: "app:agent-width", onOpenChange: setSid
 ```
 
 `useStickyPanelHeight(variant === "panel")` keeps the panel's composer in view while the page scrolls.
+`<PilotoLauncher split={split} label="Talk to Ghosty" avatarSrc=… className="fixed bottom-6 right-6" />` is the open button (spring in/out, hidden while open).
 Colors: `--gk-split-handle`, `--gk-split-accent`, `--gk-split-sheet-bg`, `--gk-split-overlay`.
 
 ## Accessibility

package/dist/split/index.d.ts

@@ -19,6 +19,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 +58,16 @@ 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;

package/dist/split/index.js

@@ -2,8 +2,10 @@
 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 isDesktop = useIsDesktop(desktopMinWidth);
@@ -11,6 +13,13 @@ function usePilotoSplit(options) {
   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,13 +31,16 @@ 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;
@@ -44,6 +56,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 +76,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 +119,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,7 +202,36 @@ 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"
+  ) });
+}
 export {
+  PilotoLauncher,
   PilotoSplit,
   useIsDesktop,
   usePilotoSplit,

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,24 @@
 }
 .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; }

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.9.1",
   "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",