@stisocial/ui 0.1.0 → 0.2.1

package/dist/editor/JsonEditor/json.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Katı JSON (RFC 8259) denetleyici ve biçimlendirici. Yerleşik `JSON.parse` hatanın yerini
+ * tarayıcıya göre farklı (ve yerelleştirilemeyen) metinle verir; burada hata bir kod ve metin
+ * konumuyla döner. Biçimlendirme sayıları ve dizeleri yazıldığı gibi korur (büyük tam sayılar ve
+ * ondalık gösterim `JSON.stringify` gibi yuvarlanmaz).
+ */
+export type JsonErrorCode = "empty" | "unexpectedChar" | "unexpectedEnd" | "expectedValue" | "expectedKey" | "expectedColon" | "expectedComma" | "trailingComma" | "badString" | "badNumber" | "trailing" | "tooDeep";
+export interface JsonError {
+  code: JsonErrorCode;
+  /** Hatanın metindeki konumu (UTF-16 birimi, 0 tabanlı). */
+  offset: number;
+  /** 1 tabanlı satır ve sütun. */
+  line: number;
+  column: number;
+  /** `unexpectedChar` için karakter. */
+  char?: string;
+}
+export type JsonCheck = {
+  ok: true;
+} | {
+  ok: false;
+  error: JsonError;
+};
+/** Metnin geçerli JSON olup olmadığını denetler. */
+export declare function checkJson(text: string): JsonCheck;
+/** Geçerli JSON'u ayrıştırıp değeri verir (geçersizse hata). */
+export declare function parseJson(text: string): {
+  ok: true;
+  value: unknown;
+} | {
+  ok: false;
+  error: JsonError;
+};
+/**
+ * Biçimlendirir: `indent` bir sayı (boşluk sayısı) ya da dizedir (`"\t"`); `0`/`""` sıkıştırır.
+ * Geçersiz metinde hata döner, metin değiştirilmez.
+ */
+export declare function formatJson(text: string, indent?: number | string): {
+  ok: true;
+  text: string;
+} | {
+  ok: false;
+  error: JsonError;
+};

package/dist/editor/JsonEditor/json.js

@@ -0,0 +1,246 @@
+function lineColumn(text, offset) {
+	const before = text.slice(0, offset);
+	return {
+		line: before.split("\n").length,
+		column: offset - (before.lastIndexOf("\n") + 1) + 1
+	};
+}
+var Failure = class extends Error {
+	code;
+	offset;
+	char;
+	constructor(code, offset, char) {
+		super(code);
+		this.code = code;
+		this.offset = offset;
+		this.char = char;
+	}
+};
+const WS = /* @__PURE__ */ new Set([
+	" ",
+	"	",
+	"\n",
+	"\r"
+]);
+const ESCAPES = /* @__PURE__ */ new Set([
+	"\"",
+	"\\",
+	"/",
+	"b",
+	"f",
+	"n",
+	"r",
+	"t"
+]);
+const NUMBER = /-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?/y;
+var Parser = class {
+	text;
+	pos = 0;
+	constructor(text) {
+		this.text = text;
+	}
+	ws() {
+		while (this.pos < this.text.length && WS.has(this.text.charAt(this.pos))) this.pos += 1;
+	}
+	fail(code, offset = this.pos, char) {
+		throw new Failure(code, offset, char);
+	}
+	/** Bir değer bekleyen konumda görülen karakter. */
+	unexpected() {
+		if (this.pos >= this.text.length) this.fail("unexpectedEnd", this.text.length);
+		return this.fail("unexpectedChar", this.pos, this.text.charAt(this.pos));
+	}
+	value(depth) {
+		if (depth > 200) this.fail("tooDeep");
+		this.ws();
+		const c = this.text.charAt(this.pos);
+		if (this.pos >= this.text.length) this.fail("unexpectedEnd", this.text.length);
+		if (c === "{") return this.object(depth);
+		if (c === "[") return this.array(depth);
+		if (c === "\"") return {
+			k: "lit",
+			raw: this.string()
+		};
+		if (c === "-" || c >= "0" && c <= "9") return {
+			k: "lit",
+			raw: this.number()
+		};
+		for (const word of [
+			"true",
+			"false",
+			"null"
+		]) if (this.text.startsWith(word, this.pos)) {
+			const end = this.pos + word.length;
+			if (/[\p{L}\p{N}_]/u.test(this.text.charAt(end))) return this.unexpected();
+			this.pos = end;
+			return {
+				k: "lit",
+				raw: word
+			};
+		}
+		return this.unexpected();
+	}
+	string() {
+		const start = this.pos;
+		this.pos += 1;
+		for (;;) {
+			if (this.pos >= this.text.length) this.fail("badString", start);
+			const c = this.text.charAt(this.pos);
+			if (c === "\"") {
+				this.pos += 1;
+				return this.text.slice(start, this.pos);
+			}
+			if (c < " ") this.fail("badString", start);
+			if (c === "\\") {
+				const e = this.text.charAt(this.pos + 1);
+				if (ESCAPES.has(e)) this.pos += 2;
+				else if (e === "u" && /^[\da-fA-F]{4}$/.test(this.text.slice(this.pos + 2, this.pos + 6))) this.pos += 6;
+				else this.fail("badString", this.pos);
+			} else this.pos += 1;
+		}
+	}
+	number() {
+		NUMBER.lastIndex = this.pos;
+		const m = NUMBER.exec(this.text);
+		const start = this.pos;
+		if (!m) this.fail("badNumber", start);
+		const end = start + m[0].length;
+		if (/[\d.eE+-]/.test(this.text.charAt(end))) this.fail("badNumber", start);
+		this.pos = end;
+		return m[0];
+	}
+	array(depth) {
+		this.pos += 1;
+		const items = [];
+		this.ws();
+		if (this.text.charAt(this.pos) === "]") {
+			this.pos += 1;
+			return {
+				k: "arr",
+				items
+			};
+		}
+		for (;;) {
+			items.push(this.value(depth + 1));
+			this.ws();
+			const c = this.text.charAt(this.pos);
+			if (this.pos >= this.text.length) this.fail("unexpectedEnd", this.text.length);
+			if (c === ",") {
+				const comma = this.pos;
+				this.pos += 1;
+				this.ws();
+				if (this.text.charAt(this.pos) === "]") this.fail("trailingComma", comma);
+			} else if (c === "]") {
+				this.pos += 1;
+				return {
+					k: "arr",
+					items
+				};
+			} else this.fail("expectedComma");
+		}
+	}
+	object(depth) {
+		this.pos += 1;
+		const entries = [];
+		this.ws();
+		if (this.text.charAt(this.pos) === "}") {
+			this.pos += 1;
+			return {
+				k: "obj",
+				entries
+			};
+		}
+		for (;;) {
+			this.ws();
+			if (this.pos >= this.text.length) this.fail("unexpectedEnd", this.text.length);
+			if (this.text.charAt(this.pos) !== "\"") this.fail("expectedKey");
+			const key = this.string();
+			this.ws();
+			if (this.pos >= this.text.length) this.fail("unexpectedEnd", this.text.length);
+			if (this.text.charAt(this.pos) !== ":") this.fail("expectedColon");
+			this.pos += 1;
+			entries.push([key, this.value(depth + 1)]);
+			this.ws();
+			const c = this.text.charAt(this.pos);
+			if (this.pos >= this.text.length) this.fail("unexpectedEnd", this.text.length);
+			if (c === ",") {
+				const comma = this.pos;
+				this.pos += 1;
+				this.ws();
+				if (this.text.charAt(this.pos) === "}") this.fail("trailingComma", comma);
+			} else if (c === "}") {
+				this.pos += 1;
+				return {
+					k: "obj",
+					entries
+				};
+			} else this.fail("expectedComma");
+		}
+	}
+	document() {
+		this.ws();
+		if (this.pos >= this.text.length) this.fail("empty", 0);
+		const node = this.value(0);
+		this.ws();
+		if (this.pos < this.text.length) this.fail("trailing");
+		return node;
+	}
+};
+function parse(text) {
+	try {
+		return {
+			ok: true,
+			node: new Parser(text).document()
+		};
+	} catch (e) {
+		if (!(e instanceof Failure)) throw e;
+		return {
+			ok: false,
+			error: {
+				code: e.code,
+				offset: e.offset,
+				char: e.char,
+				...lineColumn(text, e.offset)
+			}
+		};
+	}
+}
+/** Metnin geçerli JSON olup olmadığını denetler. */
+function checkJson(text) {
+	const r = parse(text);
+	return r.ok ? { ok: true } : r;
+}
+/** Geçerli JSON'u ayrıştırıp değeri verir (geçersizse hata). */
+function parseJson(text) {
+	const r = parse(text);
+	return r.ok ? {
+		ok: true,
+		value: JSON.parse(text)
+	} : r;
+}
+function print(node, indent, level) {
+	if (node.k === "lit") return node.raw;
+	const pretty = indent !== "";
+	const pad = pretty ? `\n${indent.repeat(level + 1)}` : "";
+	const close = pretty ? `\n${indent.repeat(level)}` : "";
+	if (node.k === "arr") {
+		if (node.items.length === 0) return "[]";
+		return `[${pad}${node.items.map((n) => print(n, indent, level + 1)).join(`,${pad}`)}${close}]`;
+	}
+	if (node.entries.length === 0) return "{}";
+	return `{${pad}${node.entries.map(([k, n]) => `${k}${pretty ? ": " : ":"}${print(n, indent, level + 1)}`).join(`,${pad}`)}${close}}`;
+}
+/**
+* Biçimlendirir: `indent` bir sayı (boşluk sayısı) ya da dizedir (`"\t"`); `0`/`""` sıkıştırır.
+* Geçersiz metinde hata döner, metin değiştirilmez.
+*/
+function formatJson(text, indent = 2) {
+	const r = parse(text);
+	if (!r.ok) return r;
+	const unit = typeof indent === "number" ? " ".repeat(Math.max(0, Math.min(indent, 10))) : indent;
+	return {
+		ok: true,
+		text: print(r.node, unit, 0)
+	};
+}
+export { checkJson, formatJson, lineColumn, parseJson };

package/dist/editor/MarkdownEditor/MarkdownEditor.css

@@ -0,0 +1,173 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-MarkdownEditor-root-e6e3a {
+    --sti-md-pad: var(--sti-space-4);
+    --sti-md-min: var(--sti-space-32);
+    container-type: inline-size;
+  }
+
+  .sti-MarkdownEditor-frame-bb380 {
+    border: var(--sti-border-width) solid var(--sti-border-control);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-canvas);
+    min-inline-size: 0;
+    transition: border-color var(--sti-duration-fast) var(--sti-ease-snap),
+      box-shadow var(--sti-duration-fast) var(--sti-ease-snap);
+    flex-direction: column;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .sti-MarkdownEditor-frame-bb380:focus-within {
+    border-color: var(--sti-focus-ring);
+    box-shadow: 0 0 0 var(--sti-field-halo)
+      color-mix(in oklab, var(--sti-focus-ring) 25%, transparent);
+  }
+
+  .sti-MarkdownEditor-root-e6e3a[data-invalid] .sti-MarkdownEditor-frame-bb380 {
+    border-color: var(--sti-fg-danger);
+  }
+
+  .sti-MarkdownEditor-root-e6e3a[data-invalid] .sti-MarkdownEditor-frame-bb380:focus-within {
+    box-shadow: 0 0 0 var(--sti-field-halo)
+      color-mix(in oklab, var(--sti-fg-danger) 25%, transparent);
+  }
+
+  .sti-MarkdownEditor-root-e6e3a[data-disabled] .sti-MarkdownEditor-frame-bb380 {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-MarkdownEditor-root-e6e3a[data-readonly] .sti-MarkdownEditor-frame-bb380 {
+    background: var(--sti-bg-subtle);
+    border-style: dashed;
+  }
+
+  .sti-MarkdownEditor-tabs-60cfd {
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-MarkdownEditor-bar-4a424 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-1) var(--sti-space-4);
+    min-inline-size: 0;
+    padding-inline: var(--sti-space-3);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-subtle);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-MarkdownEditor-toolbar-8b529 {
+    padding-block: var(--sti-space-1);
+    flex: 0 auto;
+  }
+
+  .sti-MarkdownEditor-panel-da748, .sti-MarkdownEditor-previewPanel-93a37 {
+    min-inline-size: 0;
+  }
+
+  .sti-MarkdownEditor-panel-da748[data-inert] {
+    display: none;
+  }
+
+  .sti-MarkdownEditor-input-703b3 {
+    box-sizing: border-box;
+    inline-size: 100%;
+    padding: var(--sti-md-pad);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-field-font-size);
+    line-height: var(--sti-line-height-md);
+    resize: none;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    outline: none;
+    margin: 0;
+    display: block;
+  }
+
+  .sti-MarkdownEditor-input-703b3::placeholder {
+    color: var(--sti-fg-muted);
+    opacity: 1;
+  }
+
+  .sti-MarkdownEditor-input-703b3:disabled {
+    cursor: not-allowed;
+  }
+
+  .sti-MarkdownEditor-previewPanel-93a37, .sti-MarkdownEditor-previewPane-24a28 {
+    box-sizing: border-box;
+    min-block-size: var(--sti-md-min);
+    max-block-size: calc(var(--sti-space-32) * 4);
+    padding: var(--sti-md-pad);
+    overflow-wrap: anywhere;
+    overflow-y: auto;
+  }
+
+  .sti-MarkdownEditor-empty-17dbe {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-MarkdownEditor-footer-941ae {
+    padding-block: var(--sti-space-1);
+    padding-inline: var(--sti-space-3);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-subtle);
+    justify-content: flex-end;
+    display: flex;
+  }
+
+  .sti-MarkdownEditor-split-39df0 {
+    grid-template-columns: minmax(0, 1fr);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-MarkdownEditor-pane-1509b {
+    min-inline-size: 0;
+  }
+
+  .sti-MarkdownEditor-previewPane-24a28 {
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-subtle);
+  }
+
+  @container (inline-size >= 40rem) {
+    .sti-MarkdownEditor-split-39df0 {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    .sti-MarkdownEditor-previewPane-24a28 {
+      border-block-start: 0;
+      border-inline-start: var(--sti-border-width) solid var(--sti-border-subtle);
+      block-size: 0;
+      min-block-size: 100%;
+      max-block-size: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-MarkdownEditor-frame-bb380 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-MarkdownEditor-frame-bb380 {
+      border-color: fieldtext;
+    }
+
+    .sti-MarkdownEditor-frame-bb380:focus-within {
+      outline: var(--sti-focus-ring-width) solid Highlight;
+      outline-offset: 0;
+    }
+  }
+}

package/dist/editor/MarkdownEditor/MarkdownEditor.d.ts

@@ -0,0 +1,47 @@
+import { ErrorMessage } from "../../components/Field/Field.js";
+import { KeyboardEvent, ReactNode, Ref } from "react";
+export type MarkdownEditorView = "write" | "preview";
+export interface MarkdownEditorProps {
+  label: ReactNode;
+  hideLabel?: boolean;
+  description?: ReactNode;
+  errorMessage?: ErrorMessage;
+  value?: string;
+  defaultValue?: string;
+  /** Markdown metni (düz metin). */
+  onChange?: (value: string) => void;
+  /** Görünüm (`tabs` yerleşiminde): yazma ya da önizleme. */
+  view?: MarkdownEditorView;
+  defaultView?: MarkdownEditorView;
+  onViewChange?: (view: MarkdownEditorView) => void;
+  /**
+   * Yerleşim: `tabs` (varsayılan) Yaz ve Önizleme sekmeleri; `split` geniş alanda yan yana, dar
+   * alanda alt alta iki bölme.
+   */
+  layout?: "tabs" | "split";
+  /** Biçimlendirme çubuğu. Varsayılan açık. */
+  toolbar?: boolean;
+  minRows?: number;
+  maxRows?: number;
+  maxLength?: number;
+  /** Önizlemede görseller yüklensin mi. Varsayılan kapalı: görsel adresi üçüncü tarafa istek olur. */
+  allowImages?: boolean;
+  placeholder?: string;
+  name?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  autoFocus?: boolean;
+  onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+  inputRef?: Ref<HTMLTextAreaElement>;
+  className?: string;
+  id?: string;
+}
+/**
+ * Markdown düzenleyici: çok satırlı metin alanı, biçimlendirme çubuğu ve güvenli önizleme (HTML
+ * üretmez; `Markdown` bileşeniyle aynı ayrıştırıcı). Değer düz Markdown metnidir. Kısayollar:
+ * Ctrl/⌘+B kalın, +I italik, +K bağlantı; Enter liste, görev ve alıntıyı sürdürür. Biçimlendirme
+ * tarayıcının geri alma yığınına yazılır: Ctrl+Z her komutu geri alır.
+ */
+export declare function MarkdownEditor({ label, hideLabel, description, errorMessage, value, defaultValue, onChange, view, defaultView, onViewChange, layout, toolbar, minRows, maxRows, maxLength, allowImages, placeholder, name, isRequired, isDisabled, isReadOnly, isInvalid, autoFocus, onKeyDown, inputRef, className, id }: MarkdownEditorProps): import("react").JSX.Element;