quassel 0.1.0

package/css/foundation/base.css

@@ -0,0 +1,24 @@
+/* Optional: App-weite Grundeinstellungen. Bewusst nicht Teil von index.css,
+   damit die Bibliothek einem Host nichts Globales aufzwingt. */
+* {
+    box-sizing: border-box;
+    scrollbar-width: none;
+}
+
+*::-webkit-scrollbar {
+    display: none;
+}
+
+html, body {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    padding: 16px;
+    background: var(--qsl-app-bg);
+    color: var(--qsl-text);
+    font-family: var(--qsl-font);
+    font-size: 14px;
+    line-height: 1.5;
+}

package/css/foundation/index.css

@@ -0,0 +1,3 @@
+@import "./tokens.css";
+@import "./wash.css";
+@import "./panel.css";

package/css/foundation/panel.css

@@ -0,0 +1,111 @@
+/* Das Glas-Panel lebt vom Zusammenspiel mit der Waschung dahinter: durchscheinende
+   Flaeche statt opacity, damit die Kinder deckend bleiben. */
+.qsl-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    border: 1px solid var(--qsl-line);
+    border-radius: var(--qsl-radius-panel);
+    background: color-mix(in srgb, var(--qsl-panel) 88%, transparent);
+    backdrop-filter: blur(18px) saturate(1.2);
+    box-shadow: var(--qsl-shadow-bar);
+}
+
+.qsl-panel__head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 14px 8px;
+}
+
+.qsl-panel__head h1,
+.qsl-panel__head h2 {
+    flex: 1;
+    margin: 0;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--qsl-ink);
+}
+
+.qsl-panel__body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0 8px 12px;
+}
+
+.qsl-panel__foot {
+    padding: 8px 14px;
+    border-top: 1px solid var(--qsl-line-soft);
+    font-size: 10px;
+    color: var(--qsl-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.qsl-field {
+    padding: 6px 10px;
+    border: 1px solid var(--qsl-line);
+    border-radius: var(--qsl-radius);
+    background: var(--qsl-content);
+    color: var(--qsl-ink);
+    font: inherit;
+    font-size: 12.5px;
+}
+
+.qsl-field:focus {
+    outline: none;
+    border-color: var(--qsl-accent);
+}
+
+.qsl-ghost {
+    display: block;
+    width: 100%;
+    padding: 7px 9px;
+    border: 0;
+    border-radius: var(--qsl-radius);
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+
+.qsl-ghost:hover,
+.qsl-ghost.qsl-ghost--active {
+    background: var(--qsl-surface);
+}
+
+.qsl-label {
+    padding: 12px 6px 4px;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: var(--qsl-muted);
+}
+
+.qsl-dot {
+    flex: 0 0 auto;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--qsl-line);
+}
+
+.qsl-dot--live {
+    background: var(--qsl-success);
+}
+
+.qsl-dot--working {
+    background: var(--qsl-accent);
+    animation: qsl-pulse 1.9s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
+}
+
+.qsl-pulse {
+    animation: qsl-pulse 1.9s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
+}
+
+@keyframes qsl-pulse {
+    50% { opacity: .3; }
+}

package/css/foundation/tokens.css

@@ -0,0 +1,68 @@
+:root {
+    --qsl-ink: #223347;
+    --qsl-muted: #7692ad;
+    --qsl-line: #d1dde9;
+    --qsl-line-soft: #e3ecf2;
+    --qsl-surface: #ecf2f7;
+    --qsl-panel: #f8fcff;
+    --qsl-content: #ffffff;
+    --qsl-accent: #2a94fa;
+    --qsl-danger: #ff004e;
+    --qsl-success: #72d500;
+    --qsl-app-bg: #f4f6fa;
+    --qsl-text: #1d2433;
+    --qsl-shadow-bar: 0 2px 10px rgba(34, 51, 71, 0.07);
+    --qsl-shadow-pop: 0 10px 30px rgba(118, 146, 173, 0.28);
+    --qsl-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --qsl-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --qsl-radius-panel: 14px;
+    --qsl-radius-large: 12px;
+    --qsl-radius: 8px;
+    --qsl-radius-small: 4px;
+    --qsl-wash-1: oklch(0.93 0.055 245 / 0.75);
+    --qsl-wash-2: oklch(0.94 0.05 165 / 0.7);
+    --qsl-wash-3: oklch(0.93 0.05 305 / 0.6);
+    --qsl-wash-4: oklch(0.95 0.045 75 / 0.65);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+        --qsl-ink: #dbe6f2;
+        --qsl-muted: #8ea6bf;
+        --qsl-line: #33465c;
+        --qsl-line-soft: #2b3c4f;
+        --qsl-surface: #223142;
+        --qsl-panel: #1b2938;
+        --qsl-content: #16212d;
+        --qsl-accent: #58aaff;
+        --qsl-danger: #ff4d7d;
+        --qsl-app-bg: #131c26;
+        --qsl-text: #dbe6f2;
+        --qsl-shadow-bar: 0 2px 10px rgba(0, 0, 0, 0.4);
+        --qsl-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5);
+        --qsl-wash-1: oklch(0.5 0.11 250 / 0.4);
+        --qsl-wash-2: oklch(0.5 0.1 170 / 0.3);
+        --qsl-wash-3: oklch(0.48 0.11 310 / 0.3);
+        --qsl-wash-4: oklch(0.55 0.09 75 / 0.24);
+    }
+}
+
+:root[data-theme="dark"] {
+    --qsl-ink: #dbe6f2;
+    --qsl-muted: #8ea6bf;
+    --qsl-line: #33465c;
+    --qsl-line-soft: #2b3c4f;
+    --qsl-surface: #223142;
+    --qsl-panel: #1b2938;
+    --qsl-content: #16212d;
+    --qsl-accent: #58aaff;
+    --qsl-danger: #ff4d7d;
+    --qsl-app-bg: #131c26;
+    --qsl-text: #dbe6f2;
+    --qsl-shadow-bar: 0 2px 10px rgba(0, 0, 0, 0.4);
+    --qsl-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5);
+    --qsl-wash-1: oklch(0.5 0.11 250 / 0.4);
+    --qsl-wash-2: oklch(0.5 0.1 170 / 0.3);
+    --qsl-wash-3: oklch(0.48 0.11 310 / 0.3);
+    --qsl-wash-4: oklch(0.55 0.09 75 / 0.24);
+}

package/css/foundation/wash.css

@@ -0,0 +1,26 @@
+/* Vier blasse Farbwaschungen, bewusst statisch. inset -25% laesst die Raender nie anschneiden. */
+.qsl-wash {
+    position: relative;
+    isolation: isolate;
+}
+
+.qsl-wash::before {
+    content: "";
+    position: absolute;
+    inset: -25%;
+    z-index: -1;
+    pointer-events: none;
+    background:
+        radial-gradient(38% 42% at 18% 22%, var(--qsl-wash-1), transparent 72%),
+        radial-gradient(34% 38% at 82% 16%, var(--qsl-wash-2), transparent 72%),
+        radial-gradient(42% 46% at 74% 82%, var(--qsl-wash-3), transparent 72%),
+        radial-gradient(36% 40% at 22% 86%, var(--qsl-wash-4), transparent 72%);
+}
+
+body.qsl-wash::before {
+    position: fixed;
+}
+
+.qsl-wash--clip {
+    overflow: hidden;
+}

package/css/question.css

@@ -0,0 +1,149 @@
+/* Rückfrage-Karte (QuestionCard). */
+
+/* Eigenes Fundament, damit die Karte auch ohne foundation/base.css eines Hosts traegt. */
+.qsl-question,
+.qsl-question * {
+    box-sizing: border-box;
+}
+
+.qsl-question {
+    display: block;
+    padding: 12px 14px;
+    border: 1px solid var(--qsl-line);
+    border-radius: var(--qsl-radius-large);
+    background: var(--qsl-content);
+    font-family: var(--qsl-font);
+    color: var(--qsl-ink);
+}
+
+.qsl-question__text {
+    margin-bottom: 10px;
+    line-height: 1.5;
+}
+
+.qsl-question__options {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+}
+
+.qsl-question__option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 12px;
+    border: 1px solid var(--qsl-line);
+    border-radius: var(--qsl-radius);
+    background: none;
+    color: var(--qsl-ink);
+    font: inherit;
+    font-size: 12px;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color .12s ease, background-color .12s ease;
+}
+
+.qsl-question__option:hover:not(:disabled) {
+    border-color: var(--qsl-accent);
+    background: var(--qsl-surface);
+}
+
+.qsl-question__option:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+.qsl-question__option--gewaehlt {
+    border-color: var(--qsl-accent);
+    background: color-mix(in srgb, var(--qsl-accent) 8%, transparent);
+}
+
+.qsl-question__kasten {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    border: 1px solid var(--qsl-line);
+    border-radius: 4px;
+    color: var(--qsl-accent);
+}
+
+.qsl-question__option--gewaehlt .qsl-question__kasten {
+    border-color: var(--qsl-accent);
+}
+
+.qsl-question__uebernehmen {
+    margin-top: 8px;
+    padding: 6px 12px;
+    border: none;
+    border-radius: var(--qsl-radius);
+    background: var(--qsl-accent);
+    color: #ffffff;
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.qsl-question__uebernehmen:disabled {
+    opacity: 0.4;
+    cursor: default;
+}
+
+.qsl-question__frei {
+    display: flex;
+    gap: 6px;
+    margin-top: 10px;
+}
+
+/* Die Feld-Optik steht hier vollstaendig, damit die Karte auch ohne .qsl-field eines Hosts stimmt. */
+.qsl-question__frei-feld {
+    flex: 1;
+    min-width: 0;
+    padding: 6px 10px;
+    border: 1px solid var(--qsl-line);
+    border-radius: var(--qsl-radius);
+    background: var(--qsl-content);
+    color: var(--qsl-ink);
+    font: inherit;
+    font-size: 12px;
+}
+
+.qsl-question__frei-feld:focus {
+    outline: none;
+    border-color: var(--qsl-accent);
+}
+
+.qsl-question__frei-senden {
+    padding: 5px 11px;
+    border: 1px solid var(--qsl-line);
+    border-radius: var(--qsl-radius);
+    background: none;
+    color: var(--qsl-ink);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.qsl-question__frei-senden:hover:not(:disabled) {
+    border-color: var(--qsl-accent);
+}
+
+.qsl-question__frei-senden:disabled {
+    opacity: 0.4;
+    cursor: default;
+}
+
+.qsl-question__answered {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--qsl-muted);
+}
+
+.qsl-question__check {
+    color: var(--qsl-success);
+}

package/events.d.ts

@@ -0,0 +1,88 @@
+export type Role = "user" | "assistant" | "thinking" | "tool" | "system" | "question";
+export interface ToolInfo {
+    id: string;
+    name: string;
+    arguments: string;
+    result?: string;
+    isError?: boolean;
+}
+/** Eine Rückfrage des Assistenten. `answer` gesetzt heißt: beantwortet, die Karte ist nur noch Beleg. */
+export interface Question {
+    callId: string;
+    options: string[];
+    multi?: boolean;
+    answer?: string;
+}
+export interface Message {
+    key: string;
+    role: Role;
+    text: string;
+    closed?: boolean;
+    tool?: ToolInfo;
+    question?: Question;
+    /** ISO-Zeitpunkt der Nachricht; Anzeige optional (ChatMessages showTimestamps). */
+    at?: string;
+    /** Farbige Sprechblase statt Fliesstext, z.B. fuer Mehrparteien-Gespraeche. */
+    bubble?: {
+        color: string;
+        side: "start" | "end";
+        label?: string;
+    };
+}
+export type ChatEvent = {
+    kind: "reset";
+} | {
+    kind: "user";
+    text: string;
+    at?: string;
+} | {
+    kind: "text";
+    delta: string;
+    at?: string;
+} | {
+    kind: "thinking";
+    delta: string;
+    at?: string;
+} | {
+    kind: "tool";
+    id: string;
+    name: string;
+    arguments: string;
+    label?: string;
+    at?: string;
+} | {
+    kind: "tool-result";
+    id: string;
+    result: string;
+    isError?: boolean;
+} | {
+    kind: "question";
+    callId: string;
+    text: string;
+    options: string[];
+    multi?: boolean;
+    at?: string;
+} | {
+    kind: "question-answered";
+    callId: string;
+    answer: string;
+} | {
+    kind: "system";
+    text: string;
+    at?: string;
+} | {
+    kind: "status";
+    running: boolean;
+} | {
+    kind: "turn-done";
+} | {
+    kind: "extension";
+    pluginId: string;
+    type: string;
+    payload?: unknown;
+    at?: string;
+};
+/** Der Streaming-Kern: Deltas verschmelzen mit dem letzten offenen Block, alles andere schließt ihn. */
+export declare function applyEvent(messages: Message[], event: ChatEvent): Message[];
+export declare function prettyJson(value: string): string;
+export declare function compactToolLine(tool: ToolInfo): string;

package/events.js

@@ -0,0 +1,11 @@
+import {
+  applyEvent,
+  compactToolLine,
+  prettyJson
+} from "./chunk-DOLTANTM.js";
+export {
+  applyEvent,
+  compactToolLine,
+  prettyJson
+};
+//# sourceMappingURL=events.js.map

package/events.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/icons.d.ts

@@ -0,0 +1,15 @@
+interface IconProps {
+    size?: number;
+    className?: string;
+}
+export declare function IconSend(props: IconProps): import("react").JSX.Element;
+export declare function IconStop(props: IconProps): import("react").JSX.Element;
+export declare function IconX(props: IconProps): import("react").JSX.Element;
+export declare function IconChevronDown(props: IconProps): import("react").JSX.Element;
+export declare function IconChevronRight(props: IconProps): import("react").JSX.Element;
+export declare function IconLayers(props: IconProps): import("react").JSX.Element;
+export declare function IconCheck(props: IconProps): import("react").JSX.Element;
+export declare function IconSpark(props: IconProps): import("react").JSX.Element;
+export declare function IconClock(props: IconProps): import("react").JSX.Element;
+export declare function IconTool(props: IconProps): import("react").JSX.Element;
+export {};

package/index.d.ts

@@ -0,0 +1,16 @@
+export type { Role, ToolInfo, Question, Message, DetailMode, StepState, ChatEvent, ChatAnnouncement } from "./types";
+export { applyEvent, prettyJson, compactToolLine, stepState } from "./types";
+export type { ChatTexts } from "./texts";
+export { defaultTexts } from "./texts";
+export { useChat } from "./useChat";
+export { ChatMessages } from "./ChatMessages";
+export { ChatPanel } from "./ChatPanel";
+export { TimestampSwitch } from "./TimestampSwitch";
+export { ChatInputToolbar } from "./ChatInputToolbar";
+export type { ToolbarAction } from "./ChatInputToolbar";
+export { Markdown, markdownPlainText } from "./Markdown";
+export { announce } from "./announce";
+export type { ChatAppearance, TimestampOptions, CodeBlockOptions, BubbleOptions, MessageAction, MessageActionsOptions, SendShortcut } from "./options";
+export type { LinkClickHandler } from "./Markdown";
+export { DetailModeSwitch, DETAIL_MODES, detailModeLabel } from "./DetailModeSwitch";
+export { IconSend, IconStop, IconX, IconChevronDown, IconChevronRight, IconLayers, IconCheck, IconSpark, IconTool, IconClock, } from "./icons";