@schlenkr/quassel 0.0.0-stage → 0.5.0

package/package.json

@@ -1,6 +1,55 @@
 {
   "name": "@schlenkr/quassel",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.5.0",
+  "description": "Chat building blocks for React: streaming transcript with thinking and tool steps, input card, themable Tailwind styles and an event contract",
+  "license": "MIT",
+  "author": "Ronald Schlenker",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SchlenkR/quassel.git"
+  },
+  "homepage": "https://github.com/SchlenkR/quassel#readme",
+  "keywords": [
+    "chat",
+    "react",
+    "llm",
+    "agent",
+    "streaming",
+    "ui",
+    "tailwind"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./events": {
+      "types": "./events.d.ts",
+      "default": "./events.js"
+    },
+    "./chat.css": "./chat.css"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.3.0",
+    "lucide-react": "^1.46.0",
+    "streamdown": "^2.6.0"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  }
+}

package/texts.d.ts

@@ -0,0 +1,71 @@
+export interface ChatTexts {
+    working: string;
+    toolRunning: string;
+    toolStillRunning: string;
+    toolElapsedSeconds: string;
+    currentTool: string;
+    thinkingChip: string;
+    toolChip: string;
+    stepGroupOne: string;
+    stepGroupMany: string;
+    stepGroupErrorOne?: string;
+    stepGroupErrorMany?: string;
+    stepGroupCollapse: string;
+    thinkingTitle: string;
+    toolTitle: string;
+    argumentsLabel: string;
+    resultLabel: string;
+    close: string;
+    jumpToEnd: string;
+    send: string;
+    sendIntoRun: string;
+    stop: string;
+    placeholder: string;
+    steeringPlaceholder: string;
+    steered: string;
+    detailModeTitle: string;
+    detailModeOff: string;
+    detailModeCurrent: string;
+    detailModeIcons: string;
+    detailModeChips: string;
+    detailModeGrouped: string;
+    detailModeCompact: string;
+    detailModeFull: string;
+    showAllMessages?: string;
+    showLatestExchange?: string;
+    showTimestamps: string;
+    hideTimestamps: string;
+    copyMessage: string;
+    editMessage: string;
+    retryMessage: string;
+    copyCode: string;
+    copied: string;
+    pendingAction: string;
+    dismissAction: string;
+    actionDismissed: string;
+    actionFailed: string;
+    clipboardUnavailable: string;
+    transcript: string;
+    attachments: string;
+    attachFiles: string;
+    attachFilesHint: string;
+    removeAttachment: string;
+    attachmentPreparing: string;
+    attachmentsPreparing: string;
+    attachmentReadFailed: string;
+    attachmentsWhileBusy: string;
+    tooManyAttachments: string;
+    attachmentsTooLarge: string;
+    attachmentUnsupported: string;
+    attachmentUnsupportedByModel: string;
+    attachmentKindImage: string;
+    attachmentKindVideo: string;
+    attachmentKindPdf: string;
+    notSent: string;
+    notSentAttachments: string;
+    insertUnsent: string;
+}
+export declare const fillText: (text: string, values: Record<string, string | number>) => string;
+export declare const englishTexts: Required<ChatTexts>;
+export declare const germanTexts: Required<ChatTexts>;
+export declare const defaultTexts: Required<ChatTexts>;

package/timestamps.d.ts

@@ -0,0 +1,7 @@
+import type { TimestampOptions } from "./options";
+export declare function messageDate(at: string | undefined): Date | undefined;
+export declare function timestampLabel(date: Date, options?: TimestampOptions, now?: number): string;
+export declare function timestampDay(date: Date, options?: TimestampOptions): {
+    key: string;
+    label: string;
+};

package/types.d.ts

@@ -0,0 +1,23 @@
+import type { Message } from "./events";
+export type { Role, ToolInfo, PendingAction, Message, ChatEvent, ChatTextCursor, ChatJournalCursor, ChatAttachment, ChatAttachmentInput, ChatAttachmentCapabilities, ChatStartupStatus } from "./events";
+export { applyEvent, prettyJson, compactToolLine } from "./events";
+export type TranscriptMode = "all" | "latest";
+/**
+ * current = only the running step, off = answers only, icons = steps as plain icons side by side,
+ * chips = steps as icon + short text side by side (wrapping),
+ * grouped = consecutive steps as one expandable line, single line each inside,
+ * compact = thinking and tools on a single line, full = everything expanded.
+ */
+export type DetailMode = "off" | "current" | "icons" | "chips" | "grouped" | "compact" | "full";
+/** running = call still open, thinking = thought block still open, done = finished, error = failed. */
+export type StepState = "running" | "thinking" | "done" | "error";
+/** The single derivation of a step state, so chips, hosts and tests read the same signal. */
+export declare function stepState(message: Message): StepState;
+/** A moment worth one screen reader announcement: a finished reply or a new pending action. */
+export type ChatAnnouncement = {
+    kind: "reply";
+    message: Message;
+} | {
+    kind: "action";
+    message: Message;
+};

package/ui/button.d.ts

@@ -0,0 +1,8 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
+export { Button, buttonVariants };

package/ui/card.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+export { Card };

package/ui/cn.d.ts

@@ -0,0 +1,2 @@
+import type { CnFunction } from "cn";
+export declare const cn: CnFunction;

package/ui/popover.d.ts

@@ -0,0 +1,6 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+declare function Popover({ ...props }: PopoverPrimitive.Root.Props): import("react").JSX.Element;
+declare function PopoverContent({ className, align, alignOffset, side, sideOffset, anchor, collisionPadding, keepMounted, portalContainer, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "anchor" | "collisionPadding"> & Pick<PopoverPrimitive.Portal.Props, "keepMounted"> & {
+    portalContainer?: HTMLElement | ShadowRoot;
+}): import("react").JSX.Element;
+export { Popover, PopoverContent };

package/ui/spinner.d.ts

@@ -0,0 +1,2 @@
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): import("react").JSX.Element;
+export { Spinner };

package/ui/stop-button.d.ts

@@ -0,0 +1,10 @@
+import { SquareIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { Button } from "./button";
+/** The one stop glyph: a filled red square; never used as a state icon. */
+export declare function StopGlyph({ className, ...props }: Omit<ComponentProps<typeof SquareIcon>, "fill">): import("react").JSX.Element;
+/** Every stop button looks the same: the glyph as icon, the word in the tooltip, red at rest and on hover. */
+export declare function StopButton({ label, busy, className, title, ...props }: Omit<ComponentProps<typeof Button>, "children" | "variant"> & {
+    label: string;
+    busy?: boolean;
+}): import("react").JSX.Element;

package/ui/toggle.d.ts

@@ -0,0 +1,8 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { type VariantProps } from "class-variance-authority";
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
+export { Toggle, toggleVariants };

package/ui/useFileInput.d.ts

@@ -0,0 +1,20 @@
+import { type ChangeEvent, type ClipboardEvent, type DragEvent } from "react";
+export declare function useFileInput({ disabled, onFiles, onPasteText }: {
+    disabled?: boolean;
+    onFiles: (files: File[]) => void | Promise<void>;
+    onPasteText?: (text: string) => void;
+}): {
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+    dragging: boolean;
+    clearDragging: () => void;
+    inputProps: {
+        ref: import("react").RefObject<HTMLInputElement | null>;
+        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    };
+    dropProps: {
+        onDragOver: (event: DragEvent<HTMLElement>) => void;
+        onDragLeave: (event: DragEvent<HTMLElement>) => void;
+        onDrop: (event: DragEvent<HTMLElement>) => void;
+        onPaste: (event: ClipboardEvent<HTMLElement>) => void;
+    };
+};

package/useChatAction.d.ts

@@ -0,0 +1,6 @@
+export declare function useChatAction(): {
+    status: "done" | "idle" | "pending";
+    error: string | undefined;
+    invoke: (action: () => void | Promise<void>, failureLabel: string) => Promise<void>;
+};
+export declare function copyChatText(text: string, unavailable: string): Promise<void>;