ghostykit 0.2.1 → 0.3.1

package/README.md

@@ -1,7 +1,8 @@
 # Piloto UI · `ghostykit`
 
 **An in-app copilot for React.** Piloto UI is the agent chat from
-[Ghosty Studio](https://www.ghosty.studio), packaged as a library. You drop it into an app you already
+[Ghosty Studio](https://www.ghosty.studio) (`/c`), packaged as a library: same components, same
+markup, same look ([side by side](https://raw.githubusercontent.com/blissito/ghostykit/main/docs/screenshots/parity/desktop-done-gs-vs-ghostykit.png)). You drop it into an app you already
 have. It sees what the user has on screen, streams what the agent says and does, and **stops to ask
 before anything risky** (human in the loop).
 
@@ -131,9 +132,11 @@ your own layout.
 ### Skins and theming
 
 `ghostykit/styles.css` is self-contained and scoped under `.piloto`. It works the same with
-**Tailwind 3, Tailwind 4 or no Tailwind** (verified in a Tailwind 3 app: its utilities compute
-identically with and without Piloto's CSS). Every color, radius, border width and shadow is a
-variable:
+**Tailwind 3, Tailwind 4 or no Tailwind**, and it shields its fields from the host's CSS (verified
+in a Tailwind 3 app **with `@tailwindcss/forms`**: Piloto's textarea gets no border or focus ring, and
+the app's own utilities compute identically with and without Piloto's CSS). Sizes don't depend on
+the host's `html` font size either: `1rem` inside Piloto is `--piloto-rem` (18 px in the Ghosty skin,
+like ghosty.studio; 16 px in the others). Every color, radius, border width and shadow is a variable:
 
 ```css
 .my-app .piloto {
@@ -142,6 +145,7 @@ variable:
   --piloto-radius-card: 6px;
   --piloto-border-width: 3px;
   --piloto-shadow-hero: 6px 6px 0 #0f766e;
+  --piloto-rem: 16px;
   --piloto-font: "Your Sans", sans-serif;
 }
 ```

package/dist/chunks/{chunk-D6JXJWYM.js → chunk-XZHX2NZT.js}

@@ -141,6 +141,8 @@ function createPostStreamTransport(target, options = {}) {
   return {
     // Sin steer: con un turno corriendo el servidor contesta 409. El composer no deja mandar.
     steer: false,
+    // Cada turno trae su stream: no hay «conectando» que enseñar.
+    stream: "per-turn",
     subscribe(l, sub = {}) {
       listener = l;
       isBusy = sub.isBusy ?? (() => false);

package/dist/fonts.css

@@ -1,3 +1,3 @@
-/* Opcional: las fuentes de las pieles de casa (Schibsted Grotesk para leer, Big Shoulders Stencil
-   para el reloj y el sello del pase). Sin esto, Piloto cae a las fuentes del sistema. */
-@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@700;800;900&family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap");
+/* Opcional: las fuentes de las pieles de casa — Inter (la de Ghosty) y Big Shoulders Stencil (el
+   reloj y el sello del pase de permiso). Sin esto, Piloto cae a las fuentes del sistema. */
+@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@800;900&family=Inter:opsz,wght@14..32,400..800&display=swap");

package/dist/react/Bubble.d.ts

@@ -16,11 +16,12 @@ export declare function ReplyOptionButtons({ options, onPick }: {
 /** Tokens del turno, qué tanto del contexto se llevó y cuánto costó. */
 export declare function UsageStats({ used, size, cost }: Usage): import("react").JSX.Element | null;
 /** El pie de una respuesta terminada: cuánto tardó, copiar y reintentar. */
-export declare function TurnFooter({ text, seconds, onRetry, showCopy }: {
+export declare function TurnFooter({ text, seconds, onRetry, showCopy, showDuration }: {
     text: string;
     seconds?: number;
     onRetry?: () => void;
     showCopy?: boolean;
+    showDuration?: boolean;
 }): import("react").JSX.Element;
 /** Las entregas por defecto: una ficha por archivo (las apps pintan las suyas con `renderDeliveries`). */
 export declare function DeliveryChips({ deliveries }: {
@@ -35,7 +36,8 @@ export interface AgentBubbleProps {
     onOption?: (text: string) => void;
     showUsage?: boolean;
     showCopy?: boolean;
+    showDuration?: boolean;
     /** Las entregas (y lo que la app quiera bajo la respuesta). Sin esto, fichas simples. */
     renderDeliveries?: (turn: Turn, live: boolean) => ReactNode;
 }
-export declare function AgentBubble({ turn, live, onRetry, onOption, showUsage, showCopy, renderDeliveries }: AgentBubbleProps): import("react").JSX.Element;
+export declare function AgentBubble({ turn, live, onRetry, onOption, showUsage, showCopy, showDuration, renderDeliveries }: AgentBubbleProps): import("react").JSX.Element;

package/dist/react/Chips.d.ts

@@ -1,13 +1,17 @@
 import type { Reference } from "../core/types";
-/** Las referencias del mensaje: chips atómicos con ×. Clic en el chip = `onActivate` (resaltar en la app). */
-export declare function ReferenceChips({ references, onRemove, onActivate, }: {
+/**
+ * Las referencias del mensaje: chips atómicos con ×. Una con `prompt` (un elemento señalado) se pinta
+ * con la mira, como en Ghosty; las demás (tarjetas del tablero), con su etiqueta. Clic = `onActivate`.
+ */
+export declare function ReferenceChips({ references, onRemove, onActivate }: {
     references: Reference[];
     onRemove: (id: string) => void;
     onActivate?: (ref: Reference) => void;
 }): import("react").JSX.Element | null;
 /** Sugerencias para arrancar. Una que termina en «: » se escribe en la caja en vez de mandarse. */
-export declare function Suggestions({ items, onPick, onPrefill }: {
+export declare function Suggestions({ items, onPick, onPrefill, disabled }: {
     items: string[];
     onPick: (text: string) => void;
     onPrefill?: (text: string) => void;
+    disabled?: boolean;
 }): import("react").JSX.Element | null;

package/dist/react/Composer.d.ts

@@ -37,7 +37,10 @@ export interface ComposerProps {
     maxFileMb?: number;
 }
 export declare function Composer({ onSubmit, onStop, busy, canSteer, placeholder, initialValue, autoFocus, canSeeImages, attachments: withFiles, upload, transcribe, voiceNoteText, models, currentModel, onModelChange, references, onRemoveReference, onActivateReference, extras, maxFiles, maxFileMb, }: ComposerProps): import("react").JSX.Element;
-/** El selector de modelo: un menú corto hacia arriba, sin Radix. Cierra con clic fuera y Escape. */
+/**
+ * El selector de modelo. PORTADO de Ghosty (`ModelPicker.tsx`): dropdown discreto hacia arriba, sin
+ * Radix; cierra con clic fuera y con Escape.
+ */
 export declare function ModelPicker({ models, current, onChange }: {
     models: ModelOption[];
     current: string | null;

package/dist/react/Status.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import type { ConnectPhase } from "../core/types";
-/** Los tres puntos de «escribiendo». Color y animación por CSS (`.piloto-typing`). */
+/** Los tres puntitos de «escribiendo» (color y animación en CSS: `gc-typing`). */
 export declare function TypingDots(): import("react").JSX.Element;
 export declare function WaitLabel({ phase, since, elsewhere, onLost, showDuration, }: {
     phase: ConnectPhase;

package/dist/react/Steps.d.ts

@@ -1,22 +1,27 @@
-import { type ReactNode } from "react";
 import type { ToolEntry } from "../core/types";
 import { type PilotIcon } from "./context";
-/** La garra de máquina de peluches: el ícono de «usó una herramienta» que no tiene clase propia. */
+/** La garra de máquina de peluches: el ícono de «usó una herramienta» (baja, cierra y sube en bucle). */
 export declare function ClawIcon({ className }: {
     className?: string;
 }): import("react").JSX.Element;
-/** Íconos de casa por `kind`. Lo desconocido cae en la garra. */
+/** Brazo robot agarrando — «Robot grab» de Delapouite (game-icons.net, CC BY 3.0): los pasos técnicos. */
+export declare function RobotArmIcon({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** Máquina arcade (Iconoir «arcade», MIT): las herramientas de un MCP conectado. */
+export declare function ArcadeIcon({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** Un ícono por tipo de herramienta (los de Ghosty); lo desconocido cae en la garra. */
 export declare const DEFAULT_TOOL_ICONS: Record<string, PilotIcon>;
 export declare function AgentSteps({ tools, live }: {
     tools: ToolEntry[];
     live: boolean;
 }): import("react").JSX.Element;
-/** El detalle de un paso (lista desplegada): rótulo, detalle y ruta. */
 export declare function ToolRow({ tool }: {
     tool: ToolEntry;
 }): import("react").JSX.Element;
 /** La narración del agente como avance: una palomita por lo que ya dijo que hacía. */
-export declare function Narration({ steps, children }: {
+export declare function Narration({ steps }: {
     steps: string[];
-    children?: ReactNode;
 }): import("react").JSX.Element;

package/dist/react/connectingGate.d.ts

@@ -0,0 +1,17 @@
+/** Sin conexión por este rato, se enseña. */
+export declare const CONNECTING_DELAY_MS = 1200;
+/** Una vez a la vista, se queda al menos esto. */
+export declare const CONNECTING_MIN_MS = 700;
+export interface ConnectingGate {
+    /** Desde cuándo está a la vista (null = oculto). */
+    shownAt: number | null;
+    /** Desde cuándo falta la conexión (null = conectado). */
+    waitingSince: number | null;
+}
+export declare const initialGate: (now: number, connected: boolean) => ConnectingGate;
+/** El estado a `now`, y cuándo volver a mirar (null = no hace falta). */
+export declare function stepGate(g: ConnectingGate, connected: boolean, now: number, delay?: number, min?: number): {
+    gate: ConnectingGate;
+    visible: boolean;
+    recheckAt: number | null;
+};