@stisocial/ui 0.1.0 → 0.2.1

package/dist/ai/ConversationList/ConversationList.js

@@ -0,0 +1,133 @@
+"use client";
+import { useFormatter, useLocale, useMessages } from "../../provider/UIProvider.js";
+import { matchesLoose, template } from "../../text/text.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { Button as Button$1 } from "../../components/Button/Button.js";
+import { Announcer } from "../../components/Announcer/Announcer.js";
+import { SearchField as SearchField$1 } from "../../components/SearchField/SearchField.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import { TrashIcon } from "../../icons/generated/TrashIcon.js";
+import { Skeleton } from "../../components/Skeleton/Skeleton.js";
+import ConversationList_module_default from "./ConversationList.module.js";
+import { groupConversations } from "./groups.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { GridList, GridListHeader, GridListItem, GridListSection } from "react-aria-components";
+// src/ai/ConversationList/ConversationList.tsx
+const GROUP_KEY = {
+	pinned: "aiGroupPinned",
+	today: "aiGroupToday",
+	yesterday: "aiGroupYesterday",
+	last7: "aiGroupLast7",
+	last30: "aiGroupLast30",
+	older: "aiGroupOlder"
+};
+/**
+* Sohbet geçmişi: sabitlenmiş ve zamana göre gruplanmış (bugün, dün, son 7 gün…), başlığa göre
+* aranabilen, tek seçimli liste. APG Grid/Listbox kalıbı (React Aria GridList): ↑ ↓ satırlar
+* arasında gezer, Enter ve Boşluk seçer; satırdaki "sil" düğmesine → ile geçilir.
+*/
+function ConversationList({ conversations, selectedId, defaultSelectedId = null, onSelect, onDelete, onNew, isLoading = false, isSearchable = true, now, label, size = "md", className, id }) {
+	const t = useMessages();
+	const locale = useLocale();
+	const { context } = useFormatter();
+	const [inner, setInner] = useState(defaultSelectedId);
+	const [query, setQuery] = useState("");
+	const [initialNow] = useState(() => /* @__PURE__ */ new Date());
+	const current = selectedId === void 0 ? inner : selectedId;
+	const name = label ?? t.aiConversations;
+	const shown = query.trim() ? conversations.filter((c) => matchesLoose(c.title || t.aiConversationUntitled, query, locale)) : conversations;
+	const groups = groupConversations(shown, now === void 0 ? initialNow : new Date(now), context.timeZone);
+	const onKeyDown = (e) => {
+		if (!onDelete || e.key !== "Delete" && e.key !== "Backspace") return;
+		const target = e.target;
+		if (target.getAttribute("role") !== "row") return;
+		const key = target.getAttribute("data-key");
+		if (!key) return;
+		e.preventDefault();
+		onDelete(key);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [ConversationList_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		"aria-busy": isLoading || void 0,
+		children: [onNew || isSearchable ? /* @__PURE__ */ jsxs("div", {
+			className: ConversationList_module_default.top,
+			children: [onNew ? /* @__PURE__ */ jsx(Button$1, {
+				variant: "secondary",
+				size: size === "lg" ? "md" : "sm",
+				iconStart: /* @__PURE__ */ jsx(PlusIcon, {}),
+				onPress: onNew,
+				fullWidth: true,
+				children: t.aiNewConversation
+			}) : null, isSearchable ? /* @__PURE__ */ jsx(SearchField$1, {
+				label: t.aiSearchConversations,
+				hideLabel: true,
+				placeholder: t.aiSearchConversations,
+				size: size === "lg" ? "md" : "sm",
+				value: query,
+				onChange: setQuery,
+				onClear: () => setQuery("")
+			}) : null]
+		}) : null, isLoading ? /* @__PURE__ */ jsxs("div", {
+			className: ConversationList_module_default.loading,
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				lines: 5,
+				textSize: "md"
+			}), /* @__PURE__ */ jsx(Announcer, { message: t.loading })]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: ConversationList_module_default.listWrap,
+			onKeyDown,
+			children: /* @__PURE__ */ jsx(GridList, {
+				"aria-label": name,
+				className: ConversationList_module_default.list,
+				selectionMode: "single",
+				selectedKeys: current ? [current] : [],
+				onSelectionChange: (keys) => {
+					const next = keys === "all" ? null : [...keys][0];
+					if (!next) return;
+					if (selectedId === void 0) setInner(next);
+					onSelect?.(next);
+				},
+				renderEmptyState: () => /* @__PURE__ */ jsx("p", {
+					className: ConversationList_module_default.empty,
+					children: query.trim() ? t.aiNoConversationMatch : t.aiNoConversations
+				}),
+				children: groups.map((group) => /* @__PURE__ */ jsxs(GridListSection, {
+					className: ConversationList_module_default.section,
+					children: [/* @__PURE__ */ jsx(GridListHeader, {
+						className: ConversationList_module_default.header,
+						children: t[GROUP_KEY[group.key]]
+					}), group.items.map((c) => {
+						const title = c.title || t.aiConversationUntitled;
+						return /* @__PURE__ */ jsxs(GridListItem, {
+							id: c.id,
+							textValue: title,
+							className: ConversationList_module_default.row,
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: ConversationList_module_default.texts,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: ConversationList_module_default.title,
+									children: title
+								}), c.subtitle ? /* @__PURE__ */ jsx("span", {
+									className: ConversationList_module_default.subtitle,
+									children: c.subtitle
+								}) : null]
+							}), onDelete ? /* @__PURE__ */ jsx("span", {
+								className: ConversationList_module_default.action,
+								children: /* @__PURE__ */ jsx(IconButton, {
+									size: "sm",
+									label: template(t.aiConversationDelete, { title }),
+									icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+									onPress: () => onDelete(c.id)
+								})
+							}) : null]
+						}, c.id);
+					})]
+				}, group.key))
+			})
+		})]
+	});
+}
+export { ConversationList };

package/dist/ai/ConversationList/ConversationList.module.js

@@ -0,0 +1,18 @@
+import './ConversationList.css';
+// src/ai/ConversationList/ConversationList.module.css
+var ConversationList_module_default = {
+	"root": "sti-ConversationList-root-55198",
+	"top": "sti-ConversationList-top-53f61",
+	"listWrap": "sti-ConversationList-listWrap-79dee",
+	"list": "sti-ConversationList-list-f6bf1",
+	"section": "sti-ConversationList-section-5ef1b",
+	"header": "sti-ConversationList-header-0c8a7",
+	"row": "sti-ConversationList-row-3d853",
+	"texts": "sti-ConversationList-texts-9f082",
+	"title": "sti-ConversationList-title-739e1",
+	"subtitle": "sti-ConversationList-subtitle-ff812",
+	"action": "sti-ConversationList-action-d6963",
+	"empty": "sti-ConversationList-empty-be07a",
+	"loading": "sti-ConversationList-loading-7eded"
+};
+export { ConversationList_module_default as default };

package/dist/ai/ConversationList/groups.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Sohbetlerin zamana göre gruplanması (saf mantık, kancasız). Gün sınırı saat dilimine göre
+ * hesaplanır: sunucu ile tarayıcı aynı gruplamayı üretir (hydration uyuşmazlığı olmaz).
+ */
+export type ConversationGroupKey = "pinned" | "today" | "yesterday" | "last7" | "last30" | "older";
+export interface Conversation {
+  /** Kalıcı anahtar. */
+  id: string;
+  /** Sohbetin başlığı; boşsa yerleşik "Başlıksız sohbet" yazılır. */
+  title: string;
+  /** Başlığın altında kısa önizleme. */
+  subtitle?: string;
+  /** Son etkinlik zamanı: gruplamayı ve sıralamayı belirler. */
+  updatedAt: Date | string | number;
+  /** Sabitlenmiş sohbetler en üstte, ayrı grupta durur. */
+  isPinned?: boolean;
+}
+export interface ConversationGroup {
+  key: ConversationGroupKey;
+  items: Conversation[];
+}
+/** Sohbetleri gruplara böler; her grup yeniden eskiye sıralıdır, boş gruplar atlanır. */
+export declare function groupConversations(conversations: readonly Conversation[], now: Date, timeZone: string): ConversationGroup[];

package/dist/ai/ConversationList/groups.js

@@ -0,0 +1,47 @@
+// src/ai/ConversationList/groups.ts
+const GROUP_ORDER = [
+	"pinned",
+	"today",
+	"yesterday",
+	"last7",
+	"last30",
+	"older"
+];
+/** Zaman diliminde takvim gününün sıra numarası (1970-01-01'den beri geçen gün). */
+function dayNumber(date, timeZone) {
+	const parts = new Intl.DateTimeFormat("en-CA", {
+		timeZone,
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit"
+	}).formatToParts(date);
+	const get = (type) => Number(parts.find((p) => p.type === type)?.value);
+	return Math.floor(Date.UTC(get("year"), get("month") - 1, get("day")) / 864e5);
+}
+const toTime = (value) => new Date(value).getTime();
+/** Hangi gruba girdiği: bugün 0 gün, dün 1 gün, "son 7 gün" 2–7 gün, "son 30 gün" 8–30 gün. */
+function groupOf(updatedAt, now, timeZone) {
+	const age = dayNumber(now, timeZone) - dayNumber(new Date(updatedAt), timeZone);
+	if (age <= 0) return "today";
+	if (age === 1) return "yesterday";
+	if (age <= 7) return "last7";
+	if (age <= 30) return "last30";
+	return "older";
+}
+/** Sohbetleri gruplara böler; her grup yeniden eskiye sıralıdır, boş gruplar atlanır. */
+function groupConversations(conversations, now, timeZone) {
+	const buckets = /* @__PURE__ */ new Map();
+	for (const c of conversations) {
+		const key = c.isPinned ? "pinned" : groupOf(c.updatedAt, now, timeZone);
+		buckets.set(key, [...buckets.get(key) ?? [], c]);
+	}
+	return GROUP_ORDER.flatMap((key) => {
+		const items = buckets.get(key);
+		if (!items?.length) return [];
+		return [{
+			key,
+			items: [...items].sort((a, b) => toTime(b.updatedAt) - toTime(a.updatedAt))
+		}];
+	});
+}
+export { GROUP_ORDER, dayNumber, groupConversations, groupOf };

package/dist/ai/MessageActions/MessageActions.css

@@ -0,0 +1,9 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-MessageActions-root-977db {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    color: var(--sti-fg-muted);
+    display: inline-flex;
+  }
+}

package/dist/ai/MessageActions/MessageActions.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+export type MessageRating = "up" | "down";
+export interface MessageActionsProps {
+  /** Kopyalanacak yanıt metni; verilmezse kopyala düğmesi gösterilmez. */
+  text?: string;
+  /** Kopyalama başarılı olunca. */
+  onCopy?: (text: string) => void;
+  /** Verilirse "Yanıtı yeniden üret" düğmesi gösterilir. */
+  onRegenerate?: () => void;
+  /** Yeniden üretim sürüyor: düğme bekleme durumundadır, basma yok sayılır. */
+  isRegenerating?: boolean;
+  /** Kontrollü değerlendirme. */
+  rating?: MessageRating | null;
+  /** Kontrolsüz başlangıç değerlendirmesi. */
+  defaultRating?: MessageRating | null;
+  /** Verilirse yararlı/yararlı değil düğmeleri gösterilir; seçili düğmeye yeniden basmak kaldırır. */
+  onRatingChange?: (rating: MessageRating | null) => void;
+  /** Boy: `sm` ya da `md` (varsayılan). */
+  size?: "sm" | "md";
+  isDisabled?: boolean;
+  /** Yerleşik düğmelerden sonra gelen ek eylemler (`IconButton` vb.). */
+  children?: ReactNode;
+  /** Araç çubuğunun adı; verilmezse yerleşik "Yanıt işlemleri". */
+  "aria-label"?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Yapay zekâ yanıtının altındaki eylemler: kopyala, yeniden üret ve yararlı / yararlı değil
+ * değerlendirmesi. APG araç çubuğudur (tek sekme durağı, oklarla gezinme). Değerlendirme basılı
+ * durumlu iki düğmedir (`aria-pressed`) ve karşılıklı dışlayıcıdır.
+ */
+export declare function MessageActions({ text, onCopy, onRegenerate, isRegenerating, rating, defaultRating, onRatingChange, size, isDisabled, children, "aria-label": ariaLabel, className, id }: MessageActionsProps): import("react").JSX.Element;

package/dist/ai/MessageActions/MessageActions.js

@@ -0,0 +1,89 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { announce } from "../../components/Alert/announcer.js";
+import { CopyButton } from "../../components/CopyButton/CopyButton.js";
+import { RefreshIcon } from "../../icons/generated/RefreshIcon.js";
+import { ToggleButton } from "../../components/ToggleButton/ToggleButton.js";
+import { Toolbar } from "../../components/Toolbar/Toolbar.js";
+import { Tooltip } from "../../components/Tooltip/Tooltip.js";
+import { ThumbDownGlyph, ThumbUpGlyph } from "../_internal/glyphs.js";
+import MessageActions_module_default from "./MessageActions.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/ai/MessageActions/MessageActions.tsx
+/**
+* Yapay zekâ yanıtının altındaki eylemler: kopyala, yeniden üret ve yararlı / yararlı değil
+* değerlendirmesi. APG araç çubuğudur (tek sekme durağı, oklarla gezinme). Değerlendirme basılı
+* durumlu iki düğmedir (`aria-pressed`) ve karşılıklı dışlayıcıdır.
+*/
+function MessageActions({ text, onCopy, onRegenerate, isRegenerating, rating, defaultRating = null, onRatingChange, size = "md", isDisabled, children, "aria-label": ariaLabel, className, id }) {
+	const t = useMessages();
+	const [inner, setInner] = useState(defaultRating);
+	const current = rating === void 0 ? inner : rating;
+	const buttonSize = size === "sm" ? "sm" : "md";
+	const rate = (value, selected) => {
+		const next = selected ? value : null;
+		setInner(next);
+		onRatingChange?.(next);
+		if (next) announce(t.aiRatingThanks);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: [MessageActions_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		children: /* @__PURE__ */ jsxs(Toolbar, {
+			"aria-label": ariaLabel ?? t.aiMessageActions,
+			children: [
+				text !== void 0 ? /* @__PURE__ */ jsx(Tooltip, {
+					content: t.aiCopyResponse,
+					children: /* @__PURE__ */ jsx(CopyButton, {
+						value: text,
+						label: t.aiCopyResponse,
+						iconOnly: true,
+						variant: "ghost",
+						size: buttonSize,
+						isDisabled,
+						onCopy
+					})
+				}) : null,
+				onRegenerate ? /* @__PURE__ */ jsx(Tooltip, {
+					content: t.aiRegenerate,
+					children: /* @__PURE__ */ jsx(IconButton, {
+						label: t.aiRegenerate,
+						icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
+						size: buttonSize,
+						isPending: isRegenerating,
+						isDisabled,
+						onPress: onRegenerate
+					})
+				}) : null,
+				onRatingChange ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+					content: t.aiRateUp,
+					children: /* @__PURE__ */ jsx(ToggleButton, {
+						label: t.aiRateUp,
+						icon: /* @__PURE__ */ jsx(ThumbUpGlyph, {}),
+						variant: "ghost",
+						size: buttonSize,
+						isSelected: current === "up",
+						isDisabled,
+						onChange: (selected) => rate("up", selected)
+					})
+				}), /* @__PURE__ */ jsx(Tooltip, {
+					content: t.aiRateDown,
+					children: /* @__PURE__ */ jsx(ToggleButton, {
+						label: t.aiRateDown,
+						icon: /* @__PURE__ */ jsx(ThumbDownGlyph, {}),
+						variant: "ghost",
+						size: buttonSize,
+						isSelected: current === "down",
+						isDisabled,
+						onChange: (selected) => rate("down", selected)
+					})
+				})] }) : null,
+				children
+			]
+		})
+	});
+}
+export { MessageActions };

package/dist/ai/MessageActions/MessageActions.module.js

@@ -0,0 +1,4 @@
+import './MessageActions.css';
+// src/ai/MessageActions/MessageActions.module.css
+var MessageActions_module_default = { "root": "sti-MessageActions-root-977db" };
+export { MessageActions_module_default as default };

package/dist/ai/MessageActions/index.d.ts

@@ -0,0 +1,2 @@
+import { MessageActions, MessageActionsProps, MessageRating } from "./MessageActions.js";
+export { MessageActions, MessageActionsProps, MessageRating };

package/dist/ai/ModelSelect/ModelSelect.css

@@ -0,0 +1,7 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ModelSelect-root-f9693 {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+}

package/dist/ai/ModelSelect/ModelSelect.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+export interface AiModel {
+  /** Kalıcı anahtar (değer budur). */
+  id: string;
+  /** Görünür ad; harfle arama de buna göre yapılır. */
+  name: string;
+  /** Adın altında kısa açıklama ("Hızlı yanıtlar", "Karmaşık görevler"). */
+  description?: string;
+  /** Adın önünde süs ikonu. */
+  icon?: ReactNode;
+  /** Gruplama: aynı değeri taşıyan modeller başlıklı bir grupta toplanır (ör. sağlayıcı adı). */
+  group?: string;
+  isDisabled?: boolean;
+}
+export interface ModelSelectProps {
+  models: readonly AiModel[];
+  value?: string | null;
+  defaultValue?: string | null;
+  onChange?: (modelId: string | null) => void;
+  /** Alanın etiketi; verilmezse yerleşik "Model". */
+  label?: ReactNode;
+  description?: ReactNode;
+  /** Seçim yokken düğmede görünen metin. */
+  placeholder?: string;
+  size?: "sm" | "md" | "lg";
+  name?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Yapay zekâ modeli seçimi: ad ve açıklamalı, isteğe bağlı gruplu tek seçim listesi. `Select`'in
+ * (APG Select-Only Combobox) davranışını taşır: Enter ya da ↓ açar, oklar gezer, harf yazmak
+ * Türkçe kurallarla arar, Enter seçer, Escape kapatır.
+ */
+export declare function ModelSelect({ models, label, className, ...rest }: ModelSelectProps): import("react").JSX.Element;

package/dist/ai/ModelSelect/ModelSelect.js

@@ -0,0 +1,41 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { Select } from "../../components/Select/Select.js";
+import ModelSelect_module_default from "./ModelSelect.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/ai/ModelSelect/ModelSelect.tsx
+/**
+* Yapay zekâ modeli seçimi: ad ve açıklamalı, isteğe bağlı gruplu tek seçim listesi. `Select`'in
+* (APG Select-Only Combobox) davranışını taşır: Enter ya da ↓ açar, oklar gezer, harf yazmak
+* Türkçe kurallarla arar, Enter seçer, Escape kapatır.
+*/
+function ModelSelect({ models, label, className, ...rest }) {
+	const t = useMessages();
+	const toOption = (m) => ({
+		id: m.id,
+		label: m.name,
+		description: m.description,
+		icon: m.icon,
+		isDisabled: m.isDisabled
+	});
+	const groups = /* @__PURE__ */ new Map();
+	for (const m of models) if (m.group) groups.set(m.group, [...groups.get(m.group) ?? [], m]);
+	const emitted = /* @__PURE__ */ new Set();
+	const items = models.flatMap((m) => {
+		if (!m.group) return [toOption(m)];
+		if (emitted.has(m.group)) return [];
+		emitted.add(m.group);
+		return [{
+			id: `group:${m.group}`,
+			title: m.group,
+			options: (groups.get(m.group) ?? []).map(toOption)
+		}];
+	});
+	return /* @__PURE__ */ jsx(Select, {
+		...rest,
+		className: [ModelSelect_module_default.root, className].filter(Boolean).join(" "),
+		label: label ?? t.aiModel,
+		items
+	});
+}
+export { ModelSelect };

package/dist/ai/ModelSelect/ModelSelect.module.js

@@ -0,0 +1,4 @@
+import './ModelSelect.css';
+// src/ai/ModelSelect/ModelSelect.module.css
+var ModelSelect_module_default = { "root": "sti-ModelSelect-root-f9693" };
+export { ModelSelect_module_default as default };

package/dist/ai/ModelSelect/index.d.ts

@@ -0,0 +1,2 @@
+import { AiModel, ModelSelect, ModelSelectProps } from "./ModelSelect.js";
+export { AiModel, ModelSelect, ModelSelectProps };

package/dist/ai/PromptInput/PromptInput.css

@@ -0,0 +1,176 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PromptInput-root-fa354 {
+    --sti-prompt-font-size: var(--sti-font-size-md);
+    --sti-prompt-line-height: var(--sti-line-height-md);
+    --sti-prompt-radius: var(--sti-radius-lg);
+    --sti-prompt-pad: var(--sti-space-2);
+    --sti-prompt-border: var(--sti-border-control);
+    box-sizing: border-box;
+    gap: var(--sti-space-2);
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-PromptInput-root-fa354[data-size="sm"] {
+    --sti-prompt-font-size: var(--sti-font-size-sm);
+    --sti-prompt-line-height: var(--sti-line-height-sm);
+    --sti-prompt-radius: var(--sti-radius-md);
+    --sti-prompt-pad: var(--sti-space-1);
+  }
+
+  .sti-PromptInput-root-fa354[data-size="lg"] {
+    --sti-prompt-font-size: var(--sti-font-size-body);
+    --sti-prompt-line-height: var(--sti-line-height-body);
+    --sti-prompt-radius: var(--sti-radius-xl);
+    --sti-prompt-pad: var(--sti-space-3);
+  }
+
+  .sti-PromptInput-box-7b1bf {
+    box-sizing: border-box;
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    padding: var(--sti-prompt-pad);
+    border: var(--sti-border-width) solid var(--sti-prompt-border);
+    border-radius: var(--sti-prompt-radius);
+    background: var(--sti-bg-surface);
+    transition: border-color var(--sti-duration-fast) var(--sti-ease-snap),
+      background-color var(--sti-duration-fast) var(--sti-ease-snap);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-PromptInput-box-7b1bf[data-focused] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-PromptInput-box-7b1bf[data-invalid] {
+    --sti-prompt-border: var(--sti-border-danger);
+  }
+
+  .sti-PromptInput-box-7b1bf[data-dragging] {
+    --sti-prompt-border: var(--sti-border-accent);
+    background: var(--sti-bg-accent-subtle);
+  }
+
+  .sti-PromptInput-box-7b1bf[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-PromptInput-attachments-57918 {
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    padding: var(--sti-space-1) var(--sti-space-1) 0;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-PromptInput-field-db785 {
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-PromptInput-textarea-a0032 {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: var(--sti-space-1) var(--sti-space-2);
+    border-radius: var(--sti-radius-sm);
+    color: var(--sti-fg);
+    font: inherit;
+    font-size: var(--sti-prompt-font-size);
+    line-height: var(--sti-prompt-line-height);
+    overflow-wrap: anywhere;
+    resize: none;
+    background: none;
+    border: 0;
+    outline: none;
+    margin: 0;
+    display: block;
+  }
+
+  .sti-PromptInput-textarea-a0032::placeholder {
+    color: var(--sti-fg-muted);
+    opacity: 1;
+  }
+
+  .sti-PromptInput-textarea-a0032:disabled {
+    cursor: not-allowed;
+  }
+
+  .sti-PromptInput-bar-66dc1 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-PromptInput-tools-46fff {
+    align-items: center;
+    gap: var(--sti-space-1);
+    flex-wrap: wrap;
+    flex: auto;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-PromptInput-send-bfdbe {
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex: none;
+    display: flex;
+  }
+
+  .sti-PromptInput-count-9bab2 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-PromptInput-count-9bab2[data-over] {
+    color: var(--sti-fg-danger-strong);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-PromptInput-hint-b3d4e {
+    padding-inline: var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    margin: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-PromptInput-box-7b1bf {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-PromptInput-box-7b1bf {
+      border-color: canvastext;
+    }
+
+    .sti-PromptInput-box-7b1bf[data-focused] {
+      outline-color: highlight;
+    }
+
+    .sti-PromptInput-box-7b1bf[data-invalid] {
+      border-color: mark;
+    }
+
+    .sti-PromptInput-box-7b1bf[data-disabled] {
+      opacity: 1;
+      border-color: graytext;
+    }
+  }
+}