@stisocial/ui 0.1.0 → 0.2.1

package/dist/editor/CodeEditor/CodeEditor.css

@@ -0,0 +1,312 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-CodeEditor-root-79dc6 {
+    --sti-code-font-size: var(--sti-font-size-sm);
+    --sti-code-line-height: var(--sti-line-height-md);
+    --sti-code-pad-inline: var(--sti-space-3);
+    --sti-code-pad-block: var(--sti-space-3);
+    --sti-code-radius: var(--sti-radius-md);
+    --sti-code-gutter-gap: var(--sti-space-3);
+  }
+
+  .sti-CodeEditor-frame-9daac {
+    --sti-code-rows: 6;
+    --sti-code-tab: 2;
+    border: var(--sti-border-width) solid var(--sti-border-control);
+    border-radius: var(--sti-code-radius);
+    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);
+    grid-template-columns: minmax(0, 1fr);
+    display: grid;
+    overflow: hidden;
+  }
+
+  .sti-CodeEditor-frame-9daac: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-CodeEditor-root-79dc6[data-invalid] .sti-CodeEditor-frame-9daac {
+    border-color: var(--sti-fg-danger);
+  }
+
+  .sti-CodeEditor-root-79dc6[data-invalid] .sti-CodeEditor-frame-9daac:focus-within {
+    box-shadow: 0 0 0 var(--sti-field-halo)
+      color-mix(in oklab, var(--sti-fg-danger) 25%, transparent);
+  }
+
+  .sti-CodeEditor-root-79dc6[data-disabled] .sti-CodeEditor-frame-9daac {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-CodeEditor-root-79dc6[data-readonly] .sti-CodeEditor-frame-9daac {
+    background: var(--sti-bg-subtle);
+    border-style: dashed;
+  }
+
+  .sti-CodeEditor-header-f5364 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-block-size: var(--sti-control-h-md);
+    padding-block: var(--sti-space-1);
+    padding-inline: var(--sti-code-pad-inline) var(--sti-space-1);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-subtle);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-CodeEditor-language-85518 {
+    color: var(--sti-fg-muted);
+    font-family: var(--sti-font-mono);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-xs);
+    letter-spacing: var(--sti-tracking-code);
+    white-space: nowrap;
+    flex: none;
+  }
+
+  .sti-CodeEditor-actions-870c4 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    flex: none;
+    display: flex;
+  }
+
+  .sti-CodeEditor-scroller-b4d5f {
+    box-sizing: border-box;
+    min-inline-size: 0;
+    font-family: var(--sti-font-mono);
+    font-size: var(--sti-code-font-size);
+    line-height: var(--sti-code-line-height);
+    font-variant-ligatures: none;
+    scrollbar-width: thin;
+    block-size: calc(var(--sti-code-rows) * 1lh + 2 * var(--sti-code-pad-block));
+    overflow: auto;
+  }
+
+  .sti-CodeEditor-grid-fa567 {
+    grid-template-columns: auto minmax(max-content, 1fr);
+    min-block-size: 100%;
+    inline-size: max-content;
+    min-inline-size: 100%;
+    display: grid;
+  }
+
+  .sti-CodeEditor-frame-9daac:not([data-line-numbers]) .sti-CodeEditor-grid-fa567 {
+    grid-template-columns: minmax(max-content, 1fr);
+  }
+
+  .sti-CodeEditor-gutter-a279b {
+    z-index: var(--sti-z-raised);
+    box-sizing: border-box;
+    padding-block: var(--sti-code-pad-block);
+    padding-inline: var(--sti-code-pad-inline) var(--sti-code-gutter-gap);
+    border-inline-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    -webkit-user-select: none;
+    user-select: none;
+    grid-area: 1 / 1;
+    position: sticky;
+    inset-inline-start: 0;
+  }
+
+  .sti-CodeEditor-number-877bf {
+    min-block-size: 1lh;
+    display: block;
+  }
+
+  .sti-CodeEditor-number-877bf[data-active] {
+    color: var(--sti-fg);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-CodeEditor-number-877bf[data-marker="danger"] {
+    color: var(--sti-fg-danger);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-CodeEditor-number-877bf[data-marker="warning"] {
+    color: var(--sti-fg-warning);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-CodeEditor-highlight-250a3, .sti-CodeEditor-input-d00ce {
+    box-sizing: border-box;
+    padding-block: var(--sti-code-pad-block);
+    padding-inline: var(--sti-code-pad-inline);
+    font: inherit;
+    letter-spacing: normal;
+    tab-size: var(--sti-code-tab);
+    white-space: pre;
+    word-spacing: normal;
+    border: 0;
+    grid-area: 1 / 2;
+    margin: 0;
+  }
+
+  .sti-CodeEditor-frame-9daac:not([data-line-numbers]) .sti-CodeEditor-highlight-250a3, .sti-CodeEditor-frame-9daac:not([data-line-numbers]) .sti-CodeEditor-input-d00ce {
+    grid-column: 1;
+  }
+
+  .sti-CodeEditor-highlight-250a3 {
+    z-index: var(--sti-z-base);
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    pointer-events: none;
+  }
+
+  .sti-CodeEditor-code-b5a15 {
+    font: inherit;
+    display: block;
+  }
+
+  .sti-CodeEditor-line-70e99 {
+    min-block-size: 1lh;
+    display: block;
+  }
+
+  .sti-CodeEditor-line-70e99[data-active] {
+    background: color-mix(in oklab, var(--sti-fg) 6%, transparent);
+  }
+
+  .sti-CodeEditor-line-70e99[data-marker="danger"] {
+    background: var(--sti-bg-danger-subtle);
+  }
+
+  .sti-CodeEditor-line-70e99[data-marker="warning"] {
+    background: var(--sti-bg-warning-subtle);
+  }
+
+  .sti-CodeEditor-input-d00ce {
+    z-index: var(--sti-z-raised);
+    block-size: 100%;
+    min-block-size: 100%;
+    inline-size: 100%;
+    caret-color: var(--sti-fg);
+    color: #0000;
+    resize: none;
+    background: none;
+    outline: none;
+    overflow: hidden;
+  }
+
+  .sti-CodeEditor-input-d00ce::placeholder {
+    color: var(--sti-fg-muted);
+    opacity: 1;
+  }
+
+  .sti-CodeEditor-input-d00ce::selection {
+    background: color-mix(in srgb, var(--sti-selection-bg) 55%, transparent);
+    color: #0000;
+  }
+
+  .sti-CodeEditor-input-d00ce:disabled {
+    cursor: not-allowed;
+  }
+
+  .sti-CodeEditor-t_keyword-7bf4f {
+    color: var(--sti-fg-signal);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-CodeEditor-t_string-94758 {
+    color: var(--sti-fg-success);
+  }
+
+  .sti-CodeEditor-t_number-79bb8, .sti-CodeEditor-t_literal-5f743 {
+    color: var(--sti-fg-warning);
+  }
+
+  .sti-CodeEditor-t_comment-d69b0 {
+    color: var(--sti-fg-muted);
+    font-style: italic;
+  }
+
+  .sti-CodeEditor-t_function-0dc0e {
+    color: var(--sti-fg-link);
+  }
+
+  .sti-CodeEditor-t_property-52054, .sti-CodeEditor-t_attr-c07aa {
+    color: var(--sti-fg-info);
+  }
+
+  .sti-CodeEditor-t_tag-7d611 {
+    color: var(--sti-fg-danger);
+  }
+
+  .sti-CodeEditor-t_punct-6d0db {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-CodeEditor-footer-b7a14 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-1) var(--sti-space-4);
+    padding-block: var(--sti-space-1);
+    padding-inline: var(--sti-code-pad-inline);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    font-variant-numeric: tabular-nums;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-CodeEditor-position-fbc14 {
+    white-space: nowrap;
+  }
+
+  .sti-CodeEditor-description-f88d1, .sti-CodeEditor-hint-2c24c {
+    display: block;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-CodeEditor-frame-9daac {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-CodeEditor-frame-9daac {
+      border-color: fieldtext;
+    }
+
+    .sti-CodeEditor-frame-9daac:focus-within {
+      outline: var(--sti-focus-ring-width) solid Highlight;
+      outline-offset: 0;
+    }
+
+    .sti-CodeEditor-highlight-250a3 {
+      visibility: hidden;
+    }
+
+    .sti-CodeEditor-input-d00ce {
+      color: fieldtext;
+    }
+
+    .sti-CodeEditor-input-d00ce::selection {
+      color: highlighttext;
+      background: highlight;
+    }
+
+    .sti-CodeEditor-line-70e99[data-active], .sti-CodeEditor-line-70e99[data-marker] {
+      background: none;
+    }
+
+    .sti-CodeEditor-number-877bf[data-marker] {
+      text-decoration: underline;
+    }
+  }
+}

package/dist/editor/CodeEditor/CodeEditor.d.ts

@@ -0,0 +1,66 @@
+import { ErrorMessage } from "../../components/Field/Field.js";
+import { CodeLanguage } from "./codeEdits.js";
+import { KeyboardEvent, ReactNode, Ref } from "react";
+/** Satıra iliştirilen işaret (hata ya da uyarı); yalnız görsel, ayrıntı `errorMessage` ile verilir. */
+export interface CodeMarker {
+  /** 1 tabanlı satır numarası. */
+  line: number;
+  tone?: "danger" | "warning";
+}
+export interface CodeEditorProps {
+  /** Alanın adı (zorunlu). */
+  label: ReactNode;
+  /** Etiket görsel olarak gizlenir; ad yine okunur. */
+  hideLabel?: boolean;
+  description?: ReactNode;
+  errorMessage?: ErrorMessage;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Renklendirme ve yorum satırı dili. Varsayılan `plain` (renklendirme yok). */
+  language?: CodeLanguage;
+  /** Başlıkta yazan dil adı; verilmezse dilin adı. */
+  languageLabel?: string;
+  lineNumbers?: boolean;
+  /** Sekme durağı genişliği (sütun). Varsayılan 2. */
+  tabSize?: number;
+  /** Girinti boşlukla (varsayılan) ya da sekme karakteriyle. */
+  insertSpaces?: boolean;
+  /** Tab tuşu girinti ekler (varsayılan). Kapalıysa Tab odağı taşır. */
+  indentWithTab?: boolean;
+  /** Açılış ayracı ve tırnağın karşılığını kendiliğinden ekler. Varsayılan açık. */
+  autoClose?: boolean;
+  /** En az ve en çok görünür satır; içerik arttıkça alan bu aralıkta uzar. */
+  minRows?: number;
+  maxRows?: number;
+  /** Üstteki şerit: dil adı, kopyalama düğmesi. Varsayılan açık. */
+  showHeader?: boolean;
+  /** Alttaki şerit: imleç konumu ve Tab ipucu. Varsayılan açık. */
+  showFooter?: boolean;
+  /** Başlık şeridinde kopyalama düğmesinden önce yer alan eylemler. */
+  headerActions?: ReactNode;
+  /** Alt şeritte imleç konumunun yanında yer alan durum. */
+  footerStatus?: ReactNode;
+  markers?: readonly CodeMarker[];
+  placeholder?: string;
+  name?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  autoFocus?: boolean;
+  onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+  onBlur?: () => void;
+  inputRef?: Ref<HTMLTextAreaElement>;
+  className?: string;
+  id?: string;
+}
+/**
+ * Kod düzenleyici: dış kütüphanesiz, çok satırlı gerçek bir metin alanı (klavye, seçim, geri alma
+ * ve yazma yöntemleri tarayıcınındır) ve arkasında aynı ölçülerle çizilen renklendirme katmanı.
+ * Girinti (Tab, Shift+Tab), satır başı girintisini sürdüren Enter, ikili ayraç ve tırnak, Ctrl+/ ile
+ * yorum, Alt+↑/↓ ile satır taşıma desteklenir. Tab tuşu odağı hapsetmez: Esc'e, ardından Tab'a
+ * basmak odağı sonraki öğeye taşır (WCAG 2.1.2).
+ */
+export declare function CodeEditor({ label, hideLabel, description, errorMessage, value, defaultValue, onChange, language, languageLabel, lineNumbers, tabSize, insertSpaces, indentWithTab, autoClose, minRows, maxRows, showHeader, showFooter, headerActions, footerStatus, markers, placeholder, name, isRequired, isDisabled, isReadOnly, isInvalid, autoFocus, onKeyDown, onBlur, inputRef, className, id }: CodeEditorProps): import("react").JSX.Element;
+export type { CodeLanguage };

package/dist/editor/CodeEditor/CodeEditor.js

@@ -0,0 +1,256 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../../components/Field/Field.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { announce } from "../../components/Alert/announcer.js";
+import { CopyButton } from "../../components/CopyButton/CopyButton.js";
+import { applyEdit } from "../_shared/textEdit.js";
+import CodeEditor_module_default from "./CodeEditor.module.js";
+import { backspaceEdit, caretPosition, commentEdit, enterEdit, indentEdit, indentUnit, moveLinesEdit, typeEdit } from "./codeEdits.js";
+import { splitLines, tokenize } from "./highlight.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { TextArea, TextField } from "react-aria-components";
+// src/editor/CodeEditor/CodeEditor.tsx
+const LANGUAGE_NAMES = {
+	javascript: "JavaScript",
+	typescript: "TypeScript",
+	json: "JSON",
+	css: "CSS",
+	html: "HTML",
+	sql: "SQL"
+};
+/**
+* Kod düzenleyici: dış kütüphanesiz, çok satırlı gerçek bir metin alanı (klavye, seçim, geri alma
+* ve yazma yöntemleri tarayıcınındır) ve arkasında aynı ölçülerle çizilen renklendirme katmanı.
+* Girinti (Tab, Shift+Tab), satır başı girintisini sürdüren Enter, ikili ayraç ve tırnak, Ctrl+/ ile
+* yorum, Alt+↑/↓ ile satır taşıma desteklenir. Tab tuşu odağı hapsetmez: Esc'e, ardından Tab'a
+* basmak odağı sonraki öğeye taşır (WCAG 2.1.2).
+*/
+function CodeEditor({ label, hideLabel, description, errorMessage, value, defaultValue, onChange, language = "plain", languageLabel, lineNumbers = true, tabSize = 2, insertSpaces = true, indentWithTab = true, autoClose = true, minRows = 6, maxRows = 20, showHeader = true, showFooter = true, headerActions, footerStatus, markers, placeholder, name, isRequired, isDisabled, isReadOnly, isInvalid, autoFocus, onKeyDown, onBlur, inputRef, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const [inner, setInner] = useState(defaultValue ?? "");
+	const text = value ?? inner;
+	const area = useRef(null);
+	const frame = useRef(null);
+	const [caret, setCaret] = useState({
+		line: 1,
+		column: 1
+	});
+	const [released, setReleased] = useState(false);
+	const releasedRef = useRef(false);
+	const unit = useMemo(() => indentUnit(tabSize, insertSpaces), [tabSize, insertSpaces]);
+	const editable = !isReadOnly && !isDisabled;
+	const setRef = useCallback((el) => {
+		area.current = el;
+		if (typeof inputRef === "function") inputRef(el);
+		else if (inputRef) inputRef.current = el;
+	}, [inputRef]);
+	const lines = useMemo(() => splitLines(tokenize(text, language)), [text, language]);
+	const lineCount = lines.length;
+	const markerTone = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const m of markers ?? []) map.set(m.line, m.tone ?? "danger");
+		return map;
+	}, [markers]);
+	useLayoutEffect(() => {
+		const el = frame.current;
+		if (!el) return;
+		const rows = Math.min(Math.max(lineCount, minRows), Math.max(maxRows, minRows));
+		el.style.setProperty("--sti-code-rows", String(rows));
+		el.style.setProperty("--sti-code-tab", String(tabSize));
+	}, [
+		lineCount,
+		minRows,
+		maxRows,
+		tabSize
+	]);
+	const readCaret = useCallback(() => {
+		const el = area.current;
+		if (!el) return;
+		const next = caretPosition(el.value, el.selectionStart ?? 0);
+		setCaret((prev) => prev.line === next.line && prev.column === next.column ? prev : next);
+	}, []);
+	useEffect(() => {
+		const el = area.current;
+		if (!el) return;
+		const events = [
+			"keyup",
+			"mouseup",
+			"focus",
+			"select",
+			"touchend"
+		];
+		for (const e of events) el.addEventListener(e, readCaret);
+		document.addEventListener("selectionchange", readCaret);
+		return () => {
+			for (const e of events) el.removeEventListener(e, readCaret);
+			document.removeEventListener("selectionchange", readCaret);
+		};
+	}, [readCaret]);
+	useLayoutEffect(readCaret, [text, readCaret]);
+	const setRelease = (next) => {
+		releasedRef.current = next;
+		setReleased(next);
+	};
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		if (e.defaultPrevented || !editable || e.nativeEvent.isComposing) return;
+		const el = e.currentTarget;
+		const state = {
+			value: el.value,
+			start: el.selectionStart ?? 0,
+			end: el.selectionEnd ?? 0
+		};
+		const mod = e.ctrlKey || e.metaKey;
+		let edit = null;
+		if (e.key === "Escape") {
+			if (indentWithTab && !releasedRef.current) {
+				setRelease(true);
+				announce(t.codeEditorTabFocusAnnounce);
+				e.stopPropagation();
+			}
+			return;
+		}
+		if (e.key === "Tab" && !mod && !e.altKey) {
+			if (!indentWithTab) return;
+			if (releasedRef.current) {
+				setRelease(false);
+				return;
+			}
+			edit = indentEdit(state, unit, e.shiftKey);
+		} else {
+			if (releasedRef.current && ![
+				"Shift",
+				"Control",
+				"Alt",
+				"Meta"
+			].includes(e.key)) setRelease(false);
+			if (e.key === "Enter" && !mod && !e.altKey) edit = enterEdit(state, unit, language);
+			else if (e.key === "Backspace" && !mod && !e.altKey && !e.shiftKey) edit = backspaceEdit(state, unit, autoClose && language !== "plain");
+			else if (mod && e.key === "/" && !e.altKey) edit = commentEdit(state, language);
+			else if (e.altKey && !mod && (e.key === "ArrowUp" || e.key === "ArrowDown")) edit = moveLinesEdit(state, e.key === "ArrowUp" ? -1 : 1);
+			else if (autoClose && language !== "plain" && e.key.length === 1 && !mod && !e.altKey) edit = typeEdit(state, e.key);
+		}
+		if (!edit) return;
+		e.preventDefault();
+		applyEdit(el, edit);
+		readCaret();
+	};
+	const languageName = languageLabel ?? (language === "plain" ? t.codeEditorLanguagePlain : LANGUAGE_NAMES[language]);
+	const hint = indentWithTab && editable ? released ? t.codeEditorHintFocus : t.codeEditorHintIndent : "";
+	const labelNode = hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(FieldLabel, { children: label }) }) : /* @__PURE__ */ jsx(FieldLabel, { children: label });
+	return /* @__PURE__ */ jsxs(TextField, {
+		id,
+		value: text,
+		onChange: (v) => {
+			if (value === void 0) setInner(v);
+			onChange?.(v);
+		},
+		name,
+		isRequired,
+		isDisabled,
+		isReadOnly,
+		isInvalid,
+		autoFocus,
+		className: [
+			fieldStyles.root,
+			CodeEditor_module_default.root,
+			className
+		].filter(Boolean).join(" "),
+		children: [
+			labelNode,
+			/* @__PURE__ */ jsxs("div", {
+				ref: frame,
+				className: CodeEditor_module_default.frame,
+				"data-language": language,
+				"data-line-numbers": lineNumbers ? "" : void 0,
+				children: [
+					showHeader ? /* @__PURE__ */ jsxs("div", {
+						className: CodeEditor_module_default.header,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: CodeEditor_module_default.language,
+							children: languageName
+						}), /* @__PURE__ */ jsxs("span", {
+							className: CodeEditor_module_default.actions,
+							children: [headerActions, /* @__PURE__ */ jsx(CopyButton, {
+								value: text,
+								variant: "ghost",
+								size: "sm",
+								iconOnly: true,
+								isDisabled: text === ""
+							})]
+						})]
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						className: CodeEditor_module_default.scroller,
+						children: /* @__PURE__ */ jsxs("div", {
+							className: CodeEditor_module_default.grid,
+							children: [
+								lineNumbers ? /* @__PURE__ */ jsx("div", {
+									className: CodeEditor_module_default.gutter,
+									"aria-hidden": "true",
+									children: lines.map((_, i) => /* @__PURE__ */ jsx("span", {
+										className: CodeEditor_module_default.number,
+										"data-active": i + 1 === caret.line ? "" : void 0,
+										"data-marker": markerTone.get(i + 1),
+										children: i + 1
+									}, i))
+								}) : null,
+								/* @__PURE__ */ jsx("pre", {
+									className: CodeEditor_module_default.highlight,
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ jsx("code", {
+										className: CodeEditor_module_default.code,
+										children: lines.map((tokens, i) => /* @__PURE__ */ jsx("span", {
+											className: CodeEditor_module_default.line,
+											"data-active": i + 1 === caret.line && editable ? "" : void 0,
+											"data-marker": markerTone.get(i + 1),
+											children: tokens.map((token, j) => token.type === "plain" ? token.text : /* @__PURE__ */ jsx("span", {
+												className: CodeEditor_module_default[`t_${token.type}`],
+												children: token.text
+											}, j))
+										}, i))
+									})
+								}),
+								/* @__PURE__ */ jsx(TextArea, {
+									ref: setRef,
+									className: CodeEditor_module_default.input,
+									placeholder,
+									spellCheck: false,
+									autoCapitalize: "off",
+									autoComplete: "off",
+									autoCorrect: "off",
+									wrap: "off",
+									onKeyDown: handleKeyDown,
+									onBlur
+								})
+							]
+						})
+					}),
+					showFooter ? /* @__PURE__ */ jsxs("div", {
+						className: CodeEditor_module_default.footer,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: CodeEditor_module_default.position,
+							children: template(t.codeEditorPosition, {
+								line: f.number(caret.line),
+								column: f.number(caret.column)
+							})
+						}), footerStatus]
+					}) : null
+				]
+			}),
+			description || hint ? /* @__PURE__ */ jsxs(FieldDescription, { children: [description ? /* @__PURE__ */ jsx("span", {
+				className: CodeEditor_module_default.description,
+				children: description
+			}) : null, hint ? /* @__PURE__ */ jsx("span", {
+				className: CodeEditor_module_default.hint,
+				children: hint
+			}) : null] }) : null,
+			/* @__PURE__ */ jsx(FieldErrorText, { errorMessage })
+		]
+	});
+}
+export { CodeEditor };

package/dist/editor/CodeEditor/CodeEditor.module.js

@@ -0,0 +1,32 @@
+import './CodeEditor.css';
+// src/editor/CodeEditor/CodeEditor.module.css
+var CodeEditor_module_default = {
+	"root": "sti-CodeEditor-root-79dc6",
+	"frame": "sti-CodeEditor-frame-9daac",
+	"header": "sti-CodeEditor-header-f5364",
+	"language": "sti-CodeEditor-language-85518",
+	"actions": "sti-CodeEditor-actions-870c4",
+	"scroller": "sti-CodeEditor-scroller-b4d5f",
+	"grid": "sti-CodeEditor-grid-fa567",
+	"gutter": "sti-CodeEditor-gutter-a279b",
+	"number": "sti-CodeEditor-number-877bf",
+	"highlight": "sti-CodeEditor-highlight-250a3",
+	"input": "sti-CodeEditor-input-d00ce",
+	"code": "sti-CodeEditor-code-b5a15",
+	"line": "sti-CodeEditor-line-70e99",
+	"t_keyword": "sti-CodeEditor-t_keyword-7bf4f",
+	"t_string": "sti-CodeEditor-t_string-94758",
+	"t_number": "sti-CodeEditor-t_number-79bb8",
+	"t_literal": "sti-CodeEditor-t_literal-5f743",
+	"t_comment": "sti-CodeEditor-t_comment-d69b0",
+	"t_function": "sti-CodeEditor-t_function-0dc0e",
+	"t_property": "sti-CodeEditor-t_property-52054",
+	"t_attr": "sti-CodeEditor-t_attr-c07aa",
+	"t_tag": "sti-CodeEditor-t_tag-7d611",
+	"t_punct": "sti-CodeEditor-t_punct-6d0db",
+	"footer": "sti-CodeEditor-footer-b7a14",
+	"position": "sti-CodeEditor-position-fbc14",
+	"description": "sti-CodeEditor-description-f88d1",
+	"hint": "sti-CodeEditor-hint-2c24c"
+};
+export { CodeEditor_module_default as default };

package/dist/editor/CodeEditor/codeEdits.d.ts

@@ -0,0 +1 @@
+export type CodeLanguage = "plain" | "javascript" | "typescript" | "json" | "css" | "html" | "sql";