ghostykit 0.8.2 → 0.9.1

package/README.md

@@ -258,6 +258,27 @@ with `icons={{ send: <PaperPlane /> }}` and a plugin `header: { start, end }`.
 |---|---|---|
 | ![Ghosty skin](https://raw.githubusercontent.com/blissito/ghostykit/main/docs/screenshots/ghosty-light-mobile-2-permission.png) | ![EasyBits skin, dark](https://raw.githubusercontent.com/blissito/ghostykit/main/docs/screenshots/easybits-dark-mobile-2-permission.png) | ![Neutral skin](https://raw.githubusercontent.com/blissito/ghostykit/main/docs/screenshots/neutral-light-mobile-2-permission.png) |
 
+
+## Side panel that pushes your app (`ghostykit/split`)
+
+`PilotoSplit` puts the chat next to your app instead of over it: on desktop a resizable panel that
+pushes the content (open/close animate, width remembered); on mobile a bottom sheet. Optional peers:
+`react-resizable-panels` and `vaul`.
+
+```tsx
+import { PilotoSplit, usePilotoSplit, useStickyPanelHeight } from "ghostykit/split";
+import "ghostykit/split.css";
+
+const split = usePilotoSplit({ widthKey: "app:agent-width", onOpenChange: setSidebarCollapsed });
+<PilotoSplit id="agent" split={split} title="Assistant" piloto={(variant) => <MyPanel variant={variant} onClose={split.close} />}>
+  <main>…</main>
+</PilotoSplit>
+```
+
+`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
 
 - Keyboard-first: Enter sends, Shift+Enter adds a new line, Backspace on an empty box removes the last reference. Menus close with Escape, and focus rings are visible (`--piloto-focus`).

package/dist/split/index.d.ts

@@ -0,0 +1,73 @@
+import { type CSSProperties, type ReactNode } from "react";
+export type PilotoSplitVariant = "panel" | "sheet";
+export type PilotoSplitOptions = {
+    /** Llave de localStorage donde se recuerda el ancho que el usuario eligió arrastrando. */
+    widthKey: string;
+    /** Ancho inicial del panel en px (default 420). */
+    defaultWidth?: number;
+    /** Desde qué ancho de ventana es panel y no hoja (default 1024, el `lg` de Tailwind). */
+    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;
+};
+export declare function usePilotoSplit(options: PilotoSplitOptions | string): {
+    isDesktop: boolean;
+    panelRef: import("react").RefObject<import("react-resizable-panels").PanelImperativeHandle | null>;
+    panelOpen: boolean;
+    setPanelOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    sheetOpen: boolean;
+    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;
+    close: () => void;
+    toggle: () => void;
+};
+export type PilotoSplitState = ReturnType<typeof usePilotoSplit>;
+export declare function PilotoSplit({ id, split, title, piloto, children, minContent, className, sheetClassName, style, }: {
+    /** Id del layout (react-resizable-panels lo usa para el estado). */
+    id: string;
+    split: PilotoSplitState;
+    /** Nombre para lectores de pantalla en la hoja móvil. */
+    title: string;
+    /** Lo que va en el panel o la hoja: normalmente un `<Piloto>`. Recibe la variante. */
+    piloto: (variant: PilotoSplitVariant) => ReactNode;
+    /** El contenido de la app que el panel empuja. */
+    children: ReactNode;
+    /** Ancho mínimo del contenido en escritorio, en px. */
+    minContent?: number;
+    className?: string;
+    /** Clases extra para la hoja móvil (borde, radio, fondo). */
+    sheetClassName?: string;
+    /** Variables de color: `--gk-split-handle`, `--gk-split-accent`, `--gk-split-sheet-bg`, `--gk-split-overlay`. */
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+/**
+ * Para el `<aside>` del panel: alto = de donde empieza hasta abajo de la ventana (el composer siempre a la
+ * vista), aunque la página tenga scroll. Úsalo con `position: sticky; top: 0` y `height: var(--gk-split-h)`.
+ * La primera medida va ANTES de pintar: Piloto enfoca la caja al montar y, con la altura provisional
+ * (100vh), la caja quedaría bajo el borde y el navegador desplazaría la página.
+ */
+export declare function useStickyPanelHeight(enabled?: boolean): {
+    ref: import("react").RefObject<HTMLElement | null>;
+    style: CSSProperties;
+};
+/** 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

@@ -0,0 +1,239 @@
+// 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 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;
+    panel.collapse();
+    setSheetOpen(true);
+  }, [isDesktop, panelRef]);
+  const open = useCallback(() => {
+    setMounted(true);
+    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, animate]);
+  const close = useCallback(() => {
+    const panel = panelRef.current;
+    if (panel && !panel.isCollapsed()) animate();
+    panel?.collapse();
+    setSheetOpen(false);
+  }, [panelRef, animate]);
+  const isOpen = isDesktop ? panelOpen : sheetOpen;
+  const notify = useRef(onOpenChange);
+  notify.current = onOpenChange;
+  useEffect(() => {
+    notify.current?.(isOpen);
+  }, [isOpen]);
+  return {
+    isDesktop,
+    panelRef,
+    panelOpen,
+    setPanelOpen,
+    sheetOpen,
+    setSheetOpen,
+    mounted,
+    widthKey,
+    animating,
+    targetWidth: readWidth(widthKey, defaultWidth),
+    /** Abierto en la forma que toca (panel o hoja). */
+    isOpen,
+    open,
+    close,
+    toggle: useCallback(() => isOpen ? close() : open(), [isOpen, open, close])
+  };
+}
+function PilotoSplit({
+  id,
+  split,
+  title,
+  piloto,
+  children,
+  minContent = 420,
+  className = "",
+  sheetClassName = "",
+  style
+}) {
+  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);
+  useEffect(() => {
+    if (!sheetOpen) return;
+    let frame = 0;
+    const until = performance.now() + 700;
+    const measure = () => {
+      const el = sheetChat.current;
+      if (el) setSheetChatH(Math.max(240, Math.round(window.innerHeight - el.getBoundingClientRect().top)));
+      if (performance.now() < until) frame = requestAnimationFrame(measure);
+    };
+    frame = requestAnimationFrame(measure);
+    return () => cancelAnimationFrame(frame);
+  }, [sheetOpen, sheetSnap]);
+  const onLayoutChanged = (_, meta) => {
+    const px = panelRef.current?.getSize().inPixels ?? 0;
+    if (meta.isUserInteraction && px > 0) writeWidth(widthKey, px);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsxs(Group, { id, className: "gk-split", style: { overflow: "clip" }, onLayoutChanged, children: [
+      /* @__PURE__ */ jsx(Panel, { id: `${id}-content`, minSize: isDesktop ? minContent : 0, style: { overflow: "clip", minWidth: 0 }, children }),
+      /* @__PURE__ */ jsx(
+        Separator,
+        {
+          className: "gk-split-separator",
+          style: !isDesktop || !panelOpen ? { visibility: "hidden" } : void 0,
+          "aria-label": "Cambiar el ancho del piloto"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Panel,
+        {
+          id: `${id}-piloto`,
+          panelRef,
+          collapsible: true,
+          collapsedSize: 0,
+          defaultSize: 0,
+          minSize: 320,
+          maxSize: "60%",
+          style: { overflow: "clip", minWidth: 0 },
+          onResize: (size) => setPanelOpen(size.inPixels > 0),
+          children: mounted && isDesktop && /* @__PURE__ */ jsx("div", { style: { height: "100%", width: animating ? `${targetWidth}px` : "100%" }, inert: !panelOpen, children: piloto("panel") })
+        }
+      )
+    ] }) }),
+    !isDesktop && /* @__PURE__ */ jsx(
+      Drawer.Root,
+      {
+        open: sheetOpen,
+        onOpenChange: setSheetOpen,
+        snapPoints: SHEET_SNAPS,
+        activeSnapPoint: sheetSnap,
+        setActiveSnapPoint: (p) => setSheetSnap(typeof p === "number" ? p : SHEET_SNAPS[0]),
+        children: /* @__PURE__ */ jsxs(Drawer.Portal, { children: [
+          /* @__PURE__ */ jsx(Drawer.Overlay, { className: "gk-split-overlay" }),
+          /* @__PURE__ */ jsxs(Drawer.Content, { "aria-describedby": void 0, className: `gk-split-sheet ${sheetClassName}`, style, children: [
+            /* @__PURE__ */ jsx(Drawer.Handle, { className: "gk-split-handle" }),
+            /* @__PURE__ */ jsx(Drawer.Title, { className: "gk-split-sr", children: title }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: sheetChat,
+                style: { minHeight: 0, height: sheetChatH ? `${sheetChatH}px` : `calc(${Math.round(sheetSnap * 100)}dvh - 3rem)` },
+                children: mounted && piloto("sheet")
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function useStickyPanelHeight(enabled = true) {
+  const ref = useRef(null);
+  const [height, setHeight] = useState(null);
+  useLayoutEffectSafe(() => {
+    if (!enabled) return;
+    const fit = () => {
+      const el = ref.current;
+      if (el) setHeight(Math.max(320, window.innerHeight - Math.max(el.getBoundingClientRect().top, 0)));
+    };
+    let frame = 0;
+    const measure = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(fit);
+    };
+    fit();
+    window.addEventListener("scroll", measure, { passive: true });
+    window.addEventListener("resize", measure);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", measure);
+      window.removeEventListener("resize", measure);
+    };
+  }, [enabled]);
+  const style = enabled ? { position: "sticky", top: 0, height: height ? `${height}px` : "100vh" } : { height: "100%" };
+  return { ref, style };
+}
+var useLayoutEffectSafe = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function readWidth(key, fallback) {
+  try {
+    const n = Number(localStorage.getItem(key));
+    if (n >= 320) return n;
+  } catch {
+  }
+  return fallback;
+}
+function writeWidth(key, px) {
+  try {
+    localStorage.setItem(key, String(Math.round(px)));
+  } catch {
+  }
+}
+function useIsDesktop(minWidth = 1024) {
+  const [desktop, setDesktop] = useState(true);
+  useEffect(() => {
+    const mq = window.matchMedia(`(min-width: ${minWidth}px)`);
+    const sync = () => setDesktop(mq.matches);
+    sync();
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, [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,
+  useStickyPanelHeight
+};

package/dist/split.css

@@ -0,0 +1,71 @@
+/* ghostykit/split — el piloto al lado de la app. Colores por variable:
+   --gk-split-handle (agarradera en reposo), --gk-split-accent (al arrastrar),
+   --gk-split-sheet-bg y --gk-split-overlay (hoja móvil). */
+
+/* Abrir y cerrar se animan; arrastrar, no. */
+.gk-split:not(:has([data-separator="active"])) > [data-panel] {
+  transition: flex-grow 320ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .gk-split > [data-panel] { transition: none; }
+}
+
+/* El borde que se arrastra: una franja ancha para atinarle, con una agarradera que se enciende. */
+.gk-split-separator { position: relative; width: 12px; cursor: col-resize; }
+.gk-split-separator::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 4px;
+  height: 44px;
+  transform: translate(-50%, -50%);
+  border-radius: 9999px;
+  background: var(--gk-split-handle, #9ca3af);
+  transition: background-color 120ms, height 120ms;
+}
+.gk-split-separator:hover::after,
+.gk-split-separator[data-separator="active"]::after,
+.gk-split-separator:focus-visible::after {
+  height: 100%;
+  background: var(--gk-split-accent, #6366f1);
+}
+
+/* Hoja móvil (vaul). */
+.gk-split-overlay { position: fixed; inset: 0; z-index: 40; background: var(--gk-split-overlay, rgb(0 0 0 / 0.3)); }
+.gk-split-sheet {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  height: 94dvh;
+  border-radius: 16px 16px 0 0;
+  background: var(--gk-split-sheet-bg, #fff);
+  outline: none;
+}
+.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

@@ -116,6 +116,9 @@
 .piloto .static:not([data-piloto-isolate] *) {
   position: static;
 }
+.piloto .sticky:not([data-piloto-isolate] *) {
+  position: sticky;
+}
 .piloto .inset-0:not([data-piloto-isolate] *) {
   inset: 0px;
 }
@@ -152,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%;
 }
@@ -508,6 +517,9 @@
 .piloto .cursor-pointer:not([data-piloto-isolate] *) {
   cursor: pointer;
 }
+.piloto .resize:not([data-piloto-isolate] *) {
+  resize: both;
+}
 .piloto .resize-none:not([data-piloto-isolate] *) {
   resize: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostykit",
-  "version": "0.8.2",
+  "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",
@@ -30,9 +30,14 @@
       "types": "./dist/pointer/index.d.ts",
       "import": "./dist/pointer/index.js"
     },
+    "./split": {
+      "types": "./dist/split/index.d.ts",
+      "import": "./dist/split/index.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json",
-    "./fonts.css": "./dist/fonts.css"
+    "./fonts.css": "./dist/fonts.css",
+    "./split.css": "./dist/split.css"
   },
   "files": [
     "dist",
@@ -53,11 +58,19 @@
     "motion": ">=11",
     "react": ">=18",
     "react-dom": ">=18",
-    "streamdown": ">=2.5.0 <3"
+    "streamdown": ">=2.5.0 <3",
+    "react-resizable-panels": ">=4.15 <5",
+    "vaul": ">=1.1 <2"
   },
   "peerDependenciesMeta": {
     "@ghostystudio/pointer": {
       "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
+    },
+    "vaul": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -76,7 +89,9 @@
     "streamdown": "^2.7.0",
     "tailwindcss": "^4.1.0",
     "typescript": "^5.9.0",
-    "vitest": "^3.2.0"
+    "vitest": "^3.2.0",
+    "react-resizable-panels": "^4.15.0",
+    "vaul": "^1.1.2"
   },
   "keywords": [
     "acp",