@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/ImageUpload/crop.js

@@ -0,0 +1,32 @@
+// src/components/ImageUpload/crop.ts
+/** Görselin penceredeki ölçeği (görsel pikseli başına pencere pikseli). */
+function baseScale(imgW, imgH, viewW, viewH) {
+	return Math.max(viewW / imgW, viewH / imgH);
+}
+/** Kaymayı, görsel pencereyi kaplamaya devam edecek biçimde sınırlar. */
+function clampCrop(s, imgW, imgH, viewW, viewH) {
+	const zoom = Math.min(8, Math.max(1, s.zoom));
+	const scale = baseScale(imgW, imgH, viewW, viewH) * zoom;
+	const maxX = Math.max(0, (imgW * scale - viewW) / 2);
+	const maxY = Math.max(0, (imgH * scale - viewH) / 2);
+	return {
+		zoom,
+		x: Math.min(maxX, Math.max(-maxX, s.x)),
+		y: Math.min(maxY, Math.max(-maxY, s.y))
+	};
+}
+/** Pencerede görünen bölgenin görsel pikselindeki dikdörtgeni (çıktı çizimi için). */
+function sourceRect(s, imgW, imgH, viewW, viewH) {
+	const scale = baseScale(imgW, imgH, viewW, viewH) * s.zoom;
+	const sw = viewW / scale;
+	const sh = viewH / scale;
+	const cx = imgW / 2 - s.x / scale;
+	const cy = imgH / 2 - s.y / scale;
+	return {
+		sx: cx - sw / 2,
+		sy: cy - sh / 2,
+		sw,
+		sh
+	};
+}
+export { baseScale, clampCrop, sourceRect };

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

@@ -0,0 +1,3 @@
+import { CropState, clampCrop, sourceRect } from "./crop.js";
+import { IMAGE_UPLOAD_TYPES, ImageUpload, ImageUploadProps, ImageUploadValue } from "./ImageUpload.js";
+export { type CropState, IMAGE_UPLOAD_TYPES, ImageUpload, ImageUploadProps, ImageUploadValue, clampCrop, sourceRect };

package/dist/components/InfiniteList/InfiniteList.css

@@ -0,0 +1,70 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-InfiniteList-root-05bbb {
+    gap: var(--sti-space-4);
+    inline-size: 100%;
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-InfiniteList-list-8f99b {
+    gap: var(--sti-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-InfiniteList-item-1faab {
+    border-radius: var(--sti-radius-md);
+    outline: none;
+    min-inline-size: 0;
+  }
+
+  .sti-InfiniteList-item-1faab:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-InfiniteList-sentinel-104a1 {
+    block-size: 1px;
+    margin-block-start: calc(var(--sti-space-4) * -1);
+  }
+
+  .sti-InfiniteList-footer-ddebf {
+    min-block-size: var(--sti-control-h-md);
+    justify-content: center;
+    display: flex;
+  }
+
+  .sti-InfiniteList-loading-9aea1 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    display: inline-flex;
+  }
+
+  .sti-InfiniteList-error-52886 {
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-2) var(--sti-space-3);
+    color: var(--sti-fg-danger);
+    font-size: var(--sti-font-size-sm);
+    text-align: center;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-InfiniteList-end-16ae5 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    align-self: center;
+    margin: 0;
+  }
+
+  .sti-InfiniteList-empty-81b7d {
+    min-inline-size: 0;
+  }
+}

package/dist/components/InfiniteList/InfiniteList.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+export interface InfiniteListProps<T> {
+  items: readonly T[];
+  renderItem: (item: T, index: number) => ReactNode;
+  /** Kalıcı anahtar (sayfalar arasında değişmemeli). */
+  getKey: (item: T) => string;
+  /** Yüklenecek başka kayıt var mı. */
+  hasMore: boolean;
+  isLoading?: boolean;
+  /** Sonraki sayfayı ister; yüklenirken ya da hata varken bileşen yeniden çağırmaz. */
+  onLoadMore: () => void;
+  /**
+   * `button` (varsayılan) yalnız "Daha fazla yükle" düğmesiyle; `auto` liste sonu görünüme gelince
+   * de yükler (düğme klavye ve yardımcı teknoloji için yerinde kalır).
+   */
+  mode?: "button" | "auto";
+  /** Yükleme hatası; verilirse hata metni ve "Yeniden dene" gösterilir, otomatik yükleme durur. */
+  error?: ReactNode;
+  /** Listenin adı (zorunlu): "Bildirimler", "Gönderiler". */
+  label: string;
+  /** Liste boşken (ilk yükleme bitmişse). */
+  empty?: ReactNode;
+  /** Kayıtlar bitince gösterilir; verilmezse "Tüm kayıtlar gösterildi." */
+  endText?: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * Sonsuz liste: kayıtlar sayfa sayfa yüklenir. "Daha fazla yükle" düğmesi her zaman vardır (sayfa
+ * altına ulaşılabilir, klavye kullanıcısı kayıtlar arasında kaybolmaz); `auto` kipte liste sonu
+ * görünüme gelince kendiliğinden de yükler. Yeni kayıt sayısı ekran okuyucuya duyurulur; düğmeyle
+ * yüklemede odak ilk yeni kayda taşınır. Yüklenirken liste `aria-busy` taşır.
+ */
+export declare function InfiniteList<T>({ items, renderItem, getKey, hasMore, isLoading, onLoadMore, mode, error, label, empty, endText, className, id }: InfiniteListProps<T>): import("react").JSX.Element;

package/dist/components/InfiniteList/InfiniteList.js

@@ -0,0 +1,134 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Spinner } from "../Spinner/Spinner.js";
+import { announce } from "../Alert/announcer.js";
+import { Button } from "../Button/Button.js";
+import InfiniteList_module_default from "./InfiniteList.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef } from "react";
+// src/components/InfiniteList/InfiniteList.tsx
+/**
+* Sonsuz liste: kayıtlar sayfa sayfa yüklenir. "Daha fazla yükle" düğmesi her zaman vardır (sayfa
+* altına ulaşılabilir, klavye kullanıcısı kayıtlar arasında kaybolmaz); `auto` kipte liste sonu
+* görünüme gelince kendiliğinden de yükler. Yeni kayıt sayısı ekran okuyucuya duyurulur; düğmeyle
+* yüklemede odak ilk yeni kayda taşınır. Yüklenirken liste `aria-busy` taşır.
+*/
+function InfiniteList({ items, renderItem, getKey, hasMore, isLoading = false, onLoadMore, mode = "button", error, label, empty, endText, className, id }) {
+	const t = useMessages();
+	const list = useRef(null);
+	const sentinel = useRef(null);
+	const previous = useRef(items.length);
+	const focusNew = useRef(null);
+	const blocked = isLoading || Boolean(error) || !hasMore;
+	const loadRef = useRef(onLoadMore);
+	loadRef.current = onLoadMore;
+	const blockedRef = useRef(blocked);
+	blockedRef.current = blocked;
+	const pending = useRef(false);
+	useEffect(() => {
+		pending.current = false;
+	}, [
+		items.length,
+		isLoading,
+		error
+	]);
+	const request = () => {
+		if (blockedRef.current || pending.current) return false;
+		pending.current = true;
+		loadRef.current();
+		return true;
+	};
+	const requestRef = useRef(request);
+	requestRef.current = request;
+	const retry = useRef(null);
+	useEffect(() => {
+		if (error && (document.activeElement === null || document.activeElement === document.body)) retry.current?.focus();
+	}, [error]);
+	useLayoutEffect(() => {
+		const before = previous.current;
+		previous.current = items.length;
+		if (items.length <= before) {
+			if (items.length < before) focusNew.current = null;
+			return;
+		}
+		if (before > 0) announce(template(t.infiniteLoaded, { count: items.length - before }));
+		if (focusNew.current !== null) {
+			(list.current?.children[focusNew.current])?.focus();
+			focusNew.current = null;
+		}
+	}, [items.length, t.infiniteLoaded]);
+	useEffect(() => {
+		if (mode !== "auto" || !sentinel.current || typeof IntersectionObserver === "undefined") return;
+		const io = new IntersectionObserver((entries) => {
+			if (entries.some((e) => e.isIntersecting)) requestRef.current();
+		}, { rootMargin: "0px 0px 200px 0px" });
+		io.observe(sentinel.current);
+		return () => io.disconnect();
+	}, [mode]);
+	useEffect(() => {
+		if (mode !== "auto" || blocked || !sentinel.current) return;
+		const r = sentinel.current.getBoundingClientRect();
+		if (r.top < window.innerHeight + 200 && r.bottom > -200) requestRef.current();
+	}, [
+		mode,
+		blocked,
+		items.length
+	]);
+	const requestByButton = () => {
+		const at = items.length;
+		if (request()) focusNew.current = at;
+	};
+	const showEmpty = items.length === 0 && !isLoading && !error && !hasMore;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [InfiniteList_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			showEmpty ? /* @__PURE__ */ jsx("div", {
+				className: InfiniteList_module_default.empty,
+				children: empty
+			}) : /* @__PURE__ */ jsx("ul", {
+				ref: list,
+				"aria-label": label,
+				"aria-busy": isLoading || void 0,
+				className: InfiniteList_module_default.list,
+				children: items.map((item, i) => /* @__PURE__ */ jsx("li", {
+					tabIndex: -1,
+					className: InfiniteList_module_default.item,
+					children: renderItem(item, i)
+				}, getKey(item)))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: sentinel,
+				className: InfiniteList_module_default.sentinel,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: InfiniteList_module_default.footer,
+				children: error ? /* @__PURE__ */ jsxs("div", {
+					className: InfiniteList_module_default.error,
+					children: [/* @__PURE__ */ jsx("span", {
+						role: "alert",
+						children: error === true ? t.infiniteFailed : error
+					}), /* @__PURE__ */ jsx(Button, {
+						ref: retry,
+						size: "sm",
+						onPress: () => onLoadMore(),
+						children: t.infiniteRetry
+					})]
+				}) : isLoading ? /* @__PURE__ */ jsxs("span", {
+					className: InfiniteList_module_default.loading,
+					children: [/* @__PURE__ */ jsx(Spinner, { size: "sm" }), /* @__PURE__ */ jsx("span", { children: t.infiniteLoading })]
+				}) : hasMore ? /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onPress: requestByButton,
+					children: t.infiniteLoadMore
+				}) : items.length > 0 ? /* @__PURE__ */ jsx("p", {
+					className: InfiniteList_module_default.end,
+					children: endText ?? t.infiniteEnd
+				}) : null
+			})
+		]
+	});
+}
+export { InfiniteList };

package/dist/components/InfiniteList/InfiniteList.module.js

@@ -0,0 +1,14 @@
+import './InfiniteList.css';
+// src/components/InfiniteList/InfiniteList.module.css
+var InfiniteList_module_default = {
+	"root": "sti-InfiniteList-root-05bbb",
+	"list": "sti-InfiniteList-list-8f99b",
+	"item": "sti-InfiniteList-item-1faab",
+	"sentinel": "sti-InfiniteList-sentinel-104a1",
+	"footer": "sti-InfiniteList-footer-ddebf",
+	"loading": "sti-InfiniteList-loading-9aea1",
+	"error": "sti-InfiniteList-error-52886",
+	"end": "sti-InfiniteList-end-16ae5",
+	"empty": "sti-InfiniteList-empty-81b7d"
+};
+export { InfiniteList_module_default as default };

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

@@ -0,0 +1,2 @@
+import { InfiniteList, InfiniteListProps } from "./InfiniteList.js";
+export { InfiniteList, InfiniteListProps };

package/dist/components/Inline/Inline.css

@@ -0,0 +1,181 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Inline-root-f358a {
+    --sti-inline-gap: var(--sti-space-2);
+    --sti-inline-row-gap: var(--sti-inline-gap);
+    align-items: center;
+    column-gap: var(--sti-inline-gap);
+    row-gap: var(--sti-inline-row-gap);
+    flex-flow: wrap;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-Inline-root-f358a[data-inline] {
+    vertical-align: middle;
+    display: inline-flex;
+  }
+
+  .sti-Inline-root-f358a[data-wrap="false"] {
+    flex-wrap: nowrap;
+  }
+
+  .sti-Inline-root-f358a[data-gap="0"] {
+    --sti-inline-gap: var(--sti-space-0);
+  }
+
+  .sti-Inline-root-f358a[data-gap="0-5"] {
+    --sti-inline-gap: var(--sti-space-0-5);
+  }
+
+  .sti-Inline-root-f358a[data-gap="1"] {
+    --sti-inline-gap: var(--sti-space-1);
+  }
+
+  .sti-Inline-root-f358a[data-gap="2"] {
+    --sti-inline-gap: var(--sti-space-2);
+  }
+
+  .sti-Inline-root-f358a[data-gap="3"] {
+    --sti-inline-gap: var(--sti-space-3);
+  }
+
+  .sti-Inline-root-f358a[data-gap="4"] {
+    --sti-inline-gap: var(--sti-space-4);
+  }
+
+  .sti-Inline-root-f358a[data-gap="5"] {
+    --sti-inline-gap: var(--sti-space-5);
+  }
+
+  .sti-Inline-root-f358a[data-gap="6"] {
+    --sti-inline-gap: var(--sti-space-6);
+  }
+
+  .sti-Inline-root-f358a[data-gap="8"] {
+    --sti-inline-gap: var(--sti-space-8);
+  }
+
+  .sti-Inline-root-f358a[data-gap="10"] {
+    --sti-inline-gap: var(--sti-space-10);
+  }
+
+  .sti-Inline-root-f358a[data-gap="12"] {
+    --sti-inline-gap: var(--sti-space-12);
+  }
+
+  .sti-Inline-root-f358a[data-gap="16"] {
+    --sti-inline-gap: var(--sti-space-16);
+  }
+
+  .sti-Inline-root-f358a[data-gap="20"] {
+    --sti-inline-gap: var(--sti-space-20);
+  }
+
+  .sti-Inline-root-f358a[data-gap="24"] {
+    --sti-inline-gap: var(--sti-space-24);
+  }
+
+  .sti-Inline-root-f358a[data-gap="32"] {
+    --sti-inline-gap: var(--sti-space-32);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="0"] {
+    --sti-inline-row-gap: var(--sti-space-0);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="0-5"] {
+    --sti-inline-row-gap: var(--sti-space-0-5);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="1"] {
+    --sti-inline-row-gap: var(--sti-space-1);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="2"] {
+    --sti-inline-row-gap: var(--sti-space-2);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="3"] {
+    --sti-inline-row-gap: var(--sti-space-3);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="4"] {
+    --sti-inline-row-gap: var(--sti-space-4);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="5"] {
+    --sti-inline-row-gap: var(--sti-space-5);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="6"] {
+    --sti-inline-row-gap: var(--sti-space-6);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="8"] {
+    --sti-inline-row-gap: var(--sti-space-8);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="10"] {
+    --sti-inline-row-gap: var(--sti-space-10);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="12"] {
+    --sti-inline-row-gap: var(--sti-space-12);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="16"] {
+    --sti-inline-row-gap: var(--sti-space-16);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="20"] {
+    --sti-inline-row-gap: var(--sti-space-20);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="24"] {
+    --sti-inline-row-gap: var(--sti-space-24);
+  }
+
+  .sti-Inline-root-f358a[data-row-gap="32"] {
+    --sti-inline-row-gap: var(--sti-space-32);
+  }
+
+  .sti-Inline-root-f358a[data-align="start"] {
+    align-items: flex-start;
+  }
+
+  .sti-Inline-root-f358a[data-align="center"] {
+    align-items: center;
+  }
+
+  .sti-Inline-root-f358a[data-align="end"] {
+    align-items: flex-end;
+  }
+
+  .sti-Inline-root-f358a[data-align="baseline"] {
+    align-items: baseline;
+  }
+
+  .sti-Inline-root-f358a[data-align="stretch"] {
+    align-items: stretch;
+  }
+
+  .sti-Inline-root-f358a[data-justify="start"] {
+    justify-content: flex-start;
+  }
+
+  .sti-Inline-root-f358a[data-justify="center"] {
+    justify-content: center;
+  }
+
+  .sti-Inline-root-f358a[data-justify="end"] {
+    justify-content: flex-end;
+  }
+
+  .sti-Inline-root-f358a[data-justify="between"] {
+    justify-content: space-between;
+  }
+}

package/dist/components/Inline/Inline.d.ts

@@ -0,0 +1,26 @@
+import { LayoutRootProps, Space } from "../Stack/layout.js";
+import { ReactNode } from "react";
+export type InlineElement = "div" | "span" | "nav" | "header" | "footer" | "ul" | "ol";
+export interface InlineProps extends LayoutRootProps {
+  /** Öğeler arası yatay aralık (boşluk ölçeğinin adı). Varsayılan `2` (8 piksel). */
+  gap?: Space;
+  /** Satıra inen öğelerin satırları arası aralık; verilmezse `gap` ile aynıdır. */
+  rowGap?: Space;
+  /** Öğelerin dikey hizası. Varsayılan `center`; farklı boyda yazı için `baseline`. */
+  align?: "start" | "center" | "end" | "baseline" | "stretch";
+  /** Öğelerin yatay dağılımı. `between`: ilk öğe başa, son öğe sona. */
+  justify?: "start" | "center" | "end" | "between";
+  /**
+   * Sığmayan öğe alt satıra iner (varsayılan). `false` verilirse tek satırda kalır; bu durumda
+   * öğeler daralabilmelidir (kesilen metin ya da küçülebilen alan), yoksa kapsayıcıdan taşar.
+   */
+  wrap?: boolean;
+  /** Kök öğe. `span` satır içi akışta (metnin içinde) kullanılır; `ul`/`ol` seçilirse çocuklar `li` olmalıdır. */
+  as?: InlineElement;
+  children?: ReactNode;
+}
+/**
+ * Yatay dizi: öğeleri tasarım değerindeki aralıkla yan yana dizer; dar ekranda sığmayan öğe alt
+ * satıra iner. Sunucu bileşenidir.
+ */
+export declare function Inline(props: InlineProps): import("react").JSX.Element;

package/dist/components/Inline/Inline.js

@@ -0,0 +1,26 @@
+import { cx, rootAttributes } from "../Stack/layout.js";
+import Inline_module_default from "./Inline.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/Inline/Inline.tsx
+/**
+* Yatay dizi: öğeleri tasarım değerindeki aralıkla yan yana dizer; dar ekranda sığmayan öğe alt
+* satıra iner. Sunucu bileşenidir.
+*/
+function Inline(props) {
+	const { gap = "2", rowGap, align = "center", justify = "start", wrap = true, as: Tag = "div", className, ref, children } = props;
+	const isList = Tag === "ul" || Tag === "ol";
+	return /* @__PURE__ */ jsx(Tag, {
+		...rootAttributes(props),
+		ref,
+		className: cx(Inline_module_default.root, className),
+		role: isList ? "list" : void 0,
+		"data-gap": gap,
+		"data-row-gap": rowGap,
+		"data-align": align,
+		"data-justify": justify,
+		"data-wrap": wrap ? void 0 : "false",
+		"data-inline": Tag === "span" || void 0,
+		children
+	});
+}
+export { Inline };

package/dist/components/Inline/Inline.module.js

@@ -0,0 +1,4 @@
+import './Inline.css';
+// src/components/Inline/Inline.module.css
+var Inline_module_default = { "root": "sti-Inline-root-f358a" };
+export { Inline_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Inline, InlineElement, InlineProps } from "./Inline.js";
+export { Inline, InlineElement, InlineProps };

package/dist/components/InlineEdit/InlineEdit.css

@@ -0,0 +1,133 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-InlineEdit-root-4a1f4 {
+    --sti-inline-h: var(--sti-control-h-md);
+    --sti-inline-px: var(--sti-space-4);
+    gap: var(--sti-space-2);
+    grid-template-columns: minmax(0, 1fr);
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-InlineEdit-root-4a1f4[data-size="sm"] {
+    --sti-inline-h: var(--sti-control-h-sm);
+    --sti-inline-px: var(--sti-space-3);
+    gap: var(--sti-space-1);
+  }
+
+  .sti-InlineEdit-root-4a1f4[data-size="lg"] {
+    --sti-inline-h: var(--sti-control-h-lg);
+    --sti-inline-px: var(--sti-space-5);
+  }
+
+  @media (pointer: coarse) {
+    .sti-InlineEdit-root-4a1f4[data-size="sm"] {
+      --sti-inline-h: var(--sti-control-h-md);
+    }
+  }
+
+  .sti-InlineEdit-label-22f13 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-sm);
+  }
+
+  .sti-InlineEdit-display-9e868 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-width: 0;
+    min-height: var(--sti-inline-h);
+    padding-inline: var(--sti-inline-px);
+    border: var(--sti-border-width) solid transparent;
+    border-radius: var(--sti-radius-md);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-body);
+    line-height: var(--sti-line-height-md);
+    text-align: start;
+    cursor: text;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      border-color var(--sti-duration-fast) var(--sti-ease-snap);
+    background: none;
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-InlineEdit-value-41ac1 {
+    overflow-wrap: anywhere;
+    min-width: 0;
+  }
+
+  .sti-InlineEdit-empty-5be88 {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-InlineEdit-icon-bd60b {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-sm);
+    opacity: 0;
+    transition: opacity var(--sti-duration-fast) var(--sti-ease-snap);
+    flex: none;
+  }
+
+  @media (hover: hover) {
+    .sti-InlineEdit-display-9e868[data-hovered] {
+      border-color: var(--sti-border-control);
+      background: var(--sti-bg-surface-hover);
+    }
+
+    .sti-InlineEdit-display-9e868[data-hovered] .sti-InlineEdit-icon-bd60b {
+      opacity: 1;
+    }
+  }
+
+  @media (hover: none) {
+    .sti-InlineEdit-icon-bd60b {
+      opacity: 1;
+    }
+  }
+
+  .sti-InlineEdit-display-9e868[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-InlineEdit-display-9e868[data-focus-visible] .sti-InlineEdit-icon-bd60b {
+    opacity: 1;
+  }
+
+  .sti-InlineEdit-display-9e868[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-InlineEdit-editor-7eab2 {
+    gap: var(--sti-space-2);
+    grid-template-columns: minmax(0, 1fr);
+    display: grid;
+  }
+
+  .sti-InlineEdit-actions-47d7c {
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-InlineEdit-display-9e868, .sti-InlineEdit-icon-bd60b {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-InlineEdit-display-9e868 {
+      border-color: buttontext;
+    }
+
+    .sti-InlineEdit-icon-bd60b {
+      opacity: 1;
+    }
+  }
+}