@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/components/CommandPalette/CommandPalette.css

@@ -0,0 +1,122 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-CommandPalette-anchor-9355a {
+    display: none;
+  }
+
+  .sti-CommandPalette-overlay-475ab {
+    z-index: var(--sti-z-modal);
+    box-sizing: border-box;
+    padding: max(var(--sti-space-4), 12vh) var(--sti-space-4) var(--sti-space-4);
+    background: var(--sti-scrim);
+    justify-content: center;
+    align-items: flex-start;
+    display: flex;
+    position: fixed;
+    inset: 0;
+  }
+
+  .sti-CommandPalette-overlay-475ab[data-entering] {
+    animation: sti-CommandPalette-sti-palette-fade-944da var(--sti-duration-fast) var(--sti-ease-out);
+  }
+
+  .sti-CommandPalette-modal-36939 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-xl);
+    background: var(--sti-bg-surface);
+    max-block-size: min(32rem, 100%);
+    inline-size: min(40rem, 100%);
+    box-shadow: var(--sti-shadow-lg);
+    color: var(--sti-fg);
+    outline: none;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .sti-CommandPalette-modal-36939[data-entering] {
+    animation: sti-CommandPalette-sti-palette-in-39069 var(--sti-duration-fast) var(--sti-ease-out);
+  }
+
+  .sti-CommandPalette-dialog-d4dfa {
+    outline: none;
+    flex-direction: column;
+    flex: 1;
+    min-block-size: 0;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-CommandPalette-search-43548 {
+    padding: var(--sti-space-3);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    flex: none;
+  }
+
+  .sti-CommandPalette-menu-86bd0 {
+    min-block-size: 0;
+    padding: var(--sti-space-2);
+    flex: auto;
+    overflow-y: auto;
+  }
+
+  .sti-CommandPalette-empty-dd34f {
+    padding: var(--sti-space-8) var(--sti-space-4);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    text-align: center;
+    margin: 0;
+  }
+
+  .sti-CommandPalette-hints-9b0f2 {
+    align-items: center;
+    gap: var(--sti-space-2) var(--sti-space-4);
+    padding: var(--sti-space-2) var(--sti-space-4);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    flex-wrap: wrap;
+    flex: none;
+    display: flex;
+  }
+
+  .sti-CommandPalette-hints-9b0f2 > span {
+    align-items: center;
+    gap: var(--sti-space-1);
+    display: inline-flex;
+  }
+
+  .sti-CommandPalette-toggle-ecce6 {
+    margin-inline-start: auto;
+  }
+
+  @media (pointer: coarse) {
+    .sti-CommandPalette-hints-9b0f2 {
+      display: none;
+    }
+  }
+
+  @keyframes sti-CommandPalette-sti-palette-fade-944da {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes sti-CommandPalette-sti-palette-in-39069 {
+    from {
+      opacity: 0;
+      transform: translateY(-8px) scale(.98);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-CommandPalette-overlay-475ab[data-entering], .sti-CommandPalette-modal-36939[data-entering] {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-CommandPalette-modal-36939 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/components/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+export interface Command {
+  id: string;
+  label: string;
+  /** Adın altında kısa açıklama (aramaya da katılır). */
+  description?: string;
+  icon?: ReactNode;
+  /** Sağda kısayol gösterimi. */
+  shortcut?: readonly string[];
+  /** Aramada eşleşecek ek sözcükler (eş anlamlılar, eski adlar). */
+  keywords?: readonly string[];
+  /** Grup başlığı ("Sayfalar", "Eylemler"); aynı gruptakiler birlikte, verildiği sırayla. */
+  group?: string;
+  /** Verilirse komut bu sayfaya gider. */
+  href?: string;
+  onAction?: () => void;
+  isDisabled?: boolean;
+}
+export interface CommandPaletteProps {
+  commands: readonly Command[];
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Komut çalıştırılınca (komutun kendi `onAction`'ından sonra). */
+  onAction?: (id: string) => void;
+  /**
+   * Ctrl+K (Apple aygıtlarında ⌘K) paleti her yerden açar ve kapatır. Varsayılan `true`; sayfada
+   * birden çok palet varsa yalnız biri açık bırakılır.
+   */
+  shortcut?: boolean;
+  /** Pencerenin adı; verilmezse "Komut paleti". */
+  label?: string;
+  placeholder?: string;
+  emptyText?: string;
+}
+/**
+ * Komut paleti: Ctrl+K ile her yerden açılan arama penceresi; sayfalar ve eylemler gruplu,
+ * Türkçe harf kurallarıyla süzülür (ı/i, ş/s ayrımına takılmadan). Yazarken ilk sonuç vurgulanır,
+ * ↑/↓ gezer, Enter çalıştırır, Escape önce aramayı temizler sonra kapatır.
+ */
+export declare function CommandPalette({ commands, isOpen, defaultOpen, onOpenChange, onAction, shortcut, label, placeholder, emptyText }: CommandPaletteProps): import("react").JSX.Element;

package/dist/components/CommandPalette/CommandPalette.js

@@ -0,0 +1,140 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { useThemeContext } from "../_internal/themeContext.js";
+import { searchContains } from "../Combobox/searchFold.js";
+import { Kbd } from "../Kbd/Kbd.js";
+import { Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1 } from "../Menu/Menu.js";
+import { SearchField as SearchField$1 } from "../SearchField/SearchField.js";
+import CommandPalette_module_default from "./CommandPalette.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Autocomplete, Dialog, Modal, ModalOverlay } from "react-aria-components";
+// src/components/CommandPalette/CommandPalette.tsx
+const isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
+/**
+* Komut paleti: Ctrl+K ile her yerden açılan arama penceresi; sayfalar ve eylemler gruplu,
+* Türkçe harf kurallarıyla süzülür (ı/i, ş/s ayrımına takılmadan). Yazarken ilk sonuç vurgulanır,
+* ↑/↓ gezer, Enter çalıştırır, Escape önce aramayı temizler sonra kapatır.
+*/
+function CommandPalette({ commands, isOpen, defaultOpen = false, onOpenChange, onAction, shortcut = true, label, placeholder, emptyText }) {
+	const t = useMessages();
+	const locale = useLocale();
+	const [inner, setInner] = useState(defaultOpen);
+	const open = isOpen ?? inner;
+	const anchor = useRef(null);
+	const context = useThemeContext(anchor, open);
+	const [apple, setApple] = useState(false);
+	useEffect(() => setApple(isApple()), []);
+	const change = (next) => {
+		if (isOpen === void 0) setInner(next);
+		onOpenChange?.(next);
+	};
+	const changeRef = useRef(change);
+	changeRef.current = change;
+	const openRef = useRef(open);
+	openRef.current = open;
+	useEffect(() => {
+		if (!shortcut) return;
+		const onKey = (e) => {
+			if (!((e.key === "k" || e.key === "K") && (isApple() ? e.metaKey : e.ctrlKey) && !e.altKey)) return;
+			e.preventDefault();
+			changeRef.current(!openRef.current);
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [shortcut]);
+	const groups = /* @__PURE__ */ new Map();
+	for (const c of commands) {
+		const key = c.group ?? "";
+		groups.set(key, [...groups.get(key) ?? [], c]);
+	}
+	const byId = new Map(commands.map((c) => [c.id, c]));
+	const searchText = (c) => [
+		c.label,
+		c.description,
+		...c.keywords ?? []
+	].filter(Boolean).join(" ");
+	const item = (c) => /* @__PURE__ */ jsx(MenuItem$1, {
+		id: c.id,
+		textValue: searchText(c),
+		icon: c.icon,
+		description: c.description,
+		shortcut: c.shortcut,
+		href: c.href,
+		isDisabled: c.isDisabled,
+		children: c.label
+	}, c.id);
+	const name = label ?? t.commandPaletteLabel;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		ref: anchor,
+		className: CommandPalette_module_default.anchor,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ jsx(ModalOverlay, {
+		isOpen: open,
+		onOpenChange: change,
+		isDismissable: true,
+		className: CommandPalette_module_default.overlay,
+		...context,
+		children: /* @__PURE__ */ jsx(Modal, {
+			className: CommandPalette_module_default.modal,
+			children: /* @__PURE__ */ jsxs(Dialog, {
+				"aria-label": name,
+				className: CommandPalette_module_default.dialog,
+				children: [/* @__PURE__ */ jsxs(Autocomplete, {
+					filter: (text, query) => searchContains(text, query, locale),
+					children: [/* @__PURE__ */ jsx("div", {
+						className: CommandPalette_module_default.search,
+						children: /* @__PURE__ */ jsx(SearchField$1, {
+							label: name,
+							hideLabel: true,
+							placeholder: placeholder ?? t.commandPaletteSearch,
+							autoFocus: true
+						})
+					}), /* @__PURE__ */ jsx(Menu$1, {
+						"aria-label": name,
+						className: CommandPalette_module_default.menu,
+						onAction: (id) => {
+							byId.get(id)?.onAction?.();
+							onAction?.(id);
+							change(false);
+						},
+						renderEmptyState: () => /* @__PURE__ */ jsx("p", {
+							className: CommandPalette_module_default.empty,
+							children: emptyText ?? t.commandPaletteEmpty
+						}),
+						children: [...groups.entries()].map(([group, list]) => group ? /* @__PURE__ */ jsx(MenuSection$1, {
+							title: group,
+							children: list.map(item)
+						}, group) : list.map(item))
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: CommandPalette_module_default.hints,
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ jsxs("span", { children: [
+							/* @__PURE__ */ jsx(Kbd, { keys: ["↑"] }),
+							/* @__PURE__ */ jsx(Kbd, { keys: ["↓"] }),
+							" ",
+							t.commandPaletteNavigate
+						] }),
+						/* @__PURE__ */ jsxs("span", { children: [
+							/* @__PURE__ */ jsx(Kbd, { keys: ["Enter"] }),
+							" ",
+							t.commandPaletteRun
+						] }),
+						/* @__PURE__ */ jsxs("span", { children: [
+							/* @__PURE__ */ jsx(Kbd, { keys: ["Esc"] }),
+							" ",
+							t.commandPaletteClose
+						] }),
+						shortcut ? /* @__PURE__ */ jsx("span", {
+							className: CommandPalette_module_default.toggle,
+							children: /* @__PURE__ */ jsx(Kbd, { keys: [apple ? "⌘" : "Ctrl", "K"] })
+						}) : null
+					]
+				})]
+			})
+		})
+	})] });
+}
+export { CommandPalette };

package/dist/components/CommandPalette/CommandPalette.module.js

@@ -0,0 +1,16 @@
+import './CommandPalette.css';
+// src/components/CommandPalette/CommandPalette.module.css
+var CommandPalette_module_default = {
+	"anchor": "sti-CommandPalette-anchor-9355a",
+	"overlay": "sti-CommandPalette-overlay-475ab",
+	"sti-palette-fade": "sti-CommandPalette-sti-palette-fade-944da",
+	"modal": "sti-CommandPalette-modal-36939",
+	"sti-palette-in": "sti-CommandPalette-sti-palette-in-39069",
+	"dialog": "sti-CommandPalette-dialog-d4dfa",
+	"search": "sti-CommandPalette-search-43548",
+	"menu": "sti-CommandPalette-menu-86bd0",
+	"empty": "sti-CommandPalette-empty-dd34f",
+	"hints": "sti-CommandPalette-hints-9b0f2",
+	"toggle": "sti-CommandPalette-toggle-ecce6"
+};
+export { CommandPalette_module_default as default };

package/dist/components/CommandPalette/index.d.ts

@@ -0,0 +1,2 @@
+import { Command, CommandPalette, CommandPaletteProps } from "./CommandPalette.js";
+export { Command, CommandPalette, CommandPaletteProps };

package/dist/components/CommentThread/CommentThread.css

@@ -0,0 +1,154 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-CommentThread-root-a8f79 {
+    gap: var(--sti-space-4);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-CommentThread-title-a3fe6 {
+    align-items: baseline;
+    gap: var(--sti-space-2);
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-CommentThread-count-8e9e9 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-regular);
+  }
+
+  .sti-CommentThread-empty-f3182 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-CommentThread-list-7b3a2, .sti-CommentThread-replies-86ee8 {
+    gap: var(--sti-space-4);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-CommentThread-replies-86ee8 {
+    border-inline-start: 2px solid var(--sti-border-subtle);
+    margin-block-start: var(--sti-space-3);
+    margin-inline-start: calc(var(--sti-control-h-sm) / 2);
+    padding-inline-start: calc(var(--sti-control-h-sm) / 2 + var(--sti-space-2));
+  }
+
+  .sti-CommentThread-item-4bc0d {
+    min-inline-size: 0;
+  }
+
+  .sti-CommentThread-comment-8823a {
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-CommentThread-avatar-f64e7, .sti-CommentThread-composerAvatar-1b248 {
+    flex: none;
+    display: flex;
+  }
+
+  .sti-CommentThread-main-dd845 {
+    gap: var(--sti-space-1);
+    flex: auto;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-CommentThread-meta-ffbeb {
+    align-items: baseline;
+    gap: var(--sti-space-1) var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-CommentThread-author-addeb {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+  }
+
+  .sti-CommentThread-time-931e8, .sti-CommentThread-edited-8ad21 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-CommentThread-body-bffce {
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+    margin: 0;
+  }
+
+  .sti-CommentThread-mention-86831 {
+    border-radius: var(--sti-radius-xs);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+    font-weight: var(--sti-font-weight-medium);
+    padding-inline: .15em;
+  }
+
+  .sti-CommentThread-actions-c7d83 {
+    gap: var(--sti-space-1);
+    flex-wrap: wrap;
+    margin-inline-start: calc(var(--sti-space-3) * -1);
+    display: flex;
+  }
+
+  .sti-CommentThread-composer-0580a {
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-CommentThread-composerBody-6e185 {
+    gap: var(--sti-space-2);
+    flex: auto;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-CommentThread-composerActions-d9abc {
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-CommentThread-hint-c8dc5 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    margin-inline-end: auto;
+  }
+
+  @media (pointer: coarse) {
+    .sti-CommentThread-hint-c8dc5 {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-CommentThread-mention-86831 {
+      outline: 1px solid canvastext;
+    }
+  }
+}

package/dist/components/CommentThread/CommentThread.d.ts

@@ -0,0 +1,49 @@
+import { DateValue } from "../DateTime/instant.js";
+import { MentionUser } from "../Mentions/Mentions.js";
+import { ReactNode } from "react";
+export interface CommentAuthor {
+  name: string;
+  avatarSrc?: string;
+}
+export interface Comment {
+  id: string;
+  author: CommentAuthor;
+  time: DateValue;
+  /** Düz metin; "@Ad" anmaları vurgulanır. */
+  body: string;
+  isEdited?: boolean;
+  /** Kullanıcı düzenleyebilir / silebilir (yetkiyi sunucu ayrıca denetler). */
+  canEdit?: boolean;
+  canDelete?: boolean;
+  /** Yanıtlar (tek düzey). */
+  replies?: readonly Comment[];
+}
+export interface CommentThreadProps {
+  comments: readonly Comment[];
+  /** Yorum yazan kullanıcı (yazma alanının yanında). */
+  currentUser: CommentAuthor;
+  /** Anılabilecek kişiler. */
+  users?: readonly MentionUser[];
+  /** Yeni yorum ya da yanıt (`parentId`). Söz bitene kadar gönder düğmesi bekler; hata fırlatırsa metin korunur. */
+  onSubmit: (body: string, options: {
+    parentId?: string;
+    mentions: string[];
+  }) => void | Promise<void>;
+  onEdit?: (id: string, body: string) => void | Promise<void>;
+  onDelete?: (id: string) => void | Promise<void>;
+  /** Başlık; varsayılan "Yorumlar". */
+  title?: ReactNode;
+  /** Başlık düzeyi; varsayılan 2. */
+  level?: 2 | 3 | 4;
+  /** Yorumun en çok uzunluğu. Varsayılan 2000. */
+  maxLength?: number;
+  className?: string;
+  id?: string;
+}
+/**
+ * Yorum dizisi: başlık ve sayı, yorumlar (avatar, ad, göreli zaman, "düzenlendi", anmaları
+ * vurgulanmış metin), tek düzey yanıtlar, eylemler (Yanıtla, Düzenle, Sil; silme onay ister) ve
+ * altta yazma alanı (Mentions; Ctrl/⌘+Enter gönderir). Yanıt ve düzenleme yerinde açılır, Escape
+ * vazgeçer.
+ */
+export declare function CommentThread({ comments, currentUser, users, onSubmit, onEdit, onDelete, title, level, maxLength, className, id }: CommentThreadProps): import("react").JSX.Element;