@dotss/tictoccroc 0.9.0 → 0.9.1

package/dist/shared/components/ChatKit/ImageMessage/ImageMessage.mjs

@@ -62,22 +62,23 @@ function C({ id: y, assets: b, mine: C, status: w, regDatetime: T, unreadUserCou
 					overflow: "hidden"
 				},
 				children: b.map((e, n) => {
-					let i = b.length % h === 1 && n === b.length - 1, a = i ? g : v, o = e.state ?? "NORMAL", u = o === "NORMAL" ? void 0 : r(o);
+					let i = b.length % h === 1 && n === b.length - 1, a = i ? g : v, o = e.state ?? "NORMAL", u = o === "NORMAL" ? void 0 : r(o), d = !!j, _ = o === "NORMAL" ? `${n + 1}번째 사진` : `${n + 1}번째 사진, ${u}`;
 					return /* @__PURE__ */ p(s, {
-						tag: "button",
-						type: "button",
+						tag: d ? "button" : "div",
+						type: d ? "button" : void 0,
+						role: d ? void 0 : "img",
 						flexDirection: "column",
 						justifyContent: "center",
 						alignItems: "center",
 						gap: 1,
-						onClick: () => j?.(n),
-						"aria-label": o === "NORMAL" ? `${n + 1}번째 사진 보기` : `${n + 1}번째 사진, ${u}`,
+						onClick: d ? () => j(n) : void 0,
+						"aria-label": d && o === "NORMAL" ? `${_} 보기` : _,
 						inlineCSS: {
 							gridColumn: i ? "1 / -1" : void 0,
 							padding: 0,
 							border: "none",
 							background: z[20],
-							cursor: "pointer"
+							cursor: d ? "pointer" : "default"
 						},
 						children: o === "NORMAL" ? /* @__PURE__ */ p(t, {
 							src: e.source,

package/dist/shared/components/ChatKit/Message/Message.utils.mjs

@@ -15,8 +15,20 @@ function t(e) {
 		}))];
 	});
 }
-function n({ mine: t, status: n, unreadUserCount: r, content: i, regDatetime: a }) {
-	return `${t ? "나" : "상대방"}, ${i}, ${r && r > 0 ? "읽지 않음" : "읽음"}, ${n === "SUCCEEDED" ? "전송됨" : "전송 실패"}, ${e(a).format("YYYY년 MM월 DD일 A h:mm")}`;
+var n = {
+	SUCCEEDED: "전송됨",
+	FAILED: "전송 실패",
+	PENDING: "전송 중"
+};
+function r({ mine: t, status: r, unreadUserCount: i, content: a, regDatetime: o }) {
+	let s = n[r];
+	return [
+		t ? "나" : "상대방",
+		a,
+		i && i > 0 ? "읽지 않음" : "읽음",
+		s,
+		e(o).format("YYYY년 MM월 DD일 A h:mm")
+	].join(", ");
 }
 //#endregion
-export { n as getMessageLabel, t as markMessageGroupBoundaries };
+export { r as getMessageLabel, t as markMessageGroupBoundaries };

package/dist/shared/components/ChatKit/Message/Message.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/shared/components/Image/Image.mjs

@@ -2,134 +2,136 @@ import e from "../../hooks/useInView/index.mjs";
 import t from "../../hooks/useIsomorphicLayoutEffect/index.mjs";
 import n from "../../utils/getImageUrl/index.mjs";
 import r from "./Image.error.mjs";
-import { forwardRef as i, useEffect as a, useImperativeHandle as o, useRef as s, useState as c } from "react";
-import { Flexbox as l, Skeleton as u } from "@dotss/ui";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { convertHeicToPng as ee, isHeicSource as i } from "./Image.utils.mjs";
+import { forwardRef as a, useEffect as o, useImperativeHandle as s, useRef as c, useState as l } from "react";
+import { Flexbox as u, Skeleton as d } from "@dotss/ui";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region shared/components/Image/Image.tsx
-var m = i(({ src: i, width: m, height: h, fit: g = "cover", position: _ = "center", alt: v, scale: y = 2, onLoad: b, onLazyLoad: x, lazy: S = !1, borderRadius: C, disabledResizing: w = !1, withIntrinsicRatio: T = !1, enableBlurPlaceholder: E = !1, enableFallback: D = !1, enableErrorFallback: O = !0, renderErrorFallback: k, wrapperProps: A = {}, inViewOptions: j = {}, onError: M, ...N }, P) => {
-	let F = s(null), I = s(!1), L = s(null);
-	o(P, () => L.current);
-	let { isInView: R } = e(F, {
+var h = a(({ src: a, width: h, height: g, fit: _ = "cover", position: v = "center", alt: y, scale: b = 2, onLoad: x, onLazyLoad: S, lazy: C = !1, borderRadius: w, disabledResizing: T = !1, withIntrinsicRatio: E = !1, enableBlurPlaceholder: D = !1, enableFallback: O = !1, enableErrorFallback: k = !0, renderErrorFallback: A, wrapperProps: j = {}, inViewOptions: te = {}, onError: M, ...N }, P) => {
+	let F = c(null), I = c(!1), L = c(null), R = c(M);
+	R.current = M, s(P, () => L.current);
+	let { isInView: z } = e(F, {
 		threshold: .4,
-		...j
-	}), [z, B] = c(!1), [V, H] = c(!1), [U, W] = c(!1), [G, K] = c(!1), [q, J] = c(n({
+		...te
+	}), [B, V] = l(!1), [H, U] = l(!1), [W, G] = l(!1), [K, ne] = l(!1), [q, J] = l(n({
 		mode: "original",
-		src: i,
-		width: m,
-		height: h,
-		fit: g,
-		position: _,
-		scale: y,
-		disabledResizing: w
-	})), Y = i?.endsWith(".heic"), X = E ? n({
+		src: a,
+		width: h,
+		height: g,
+		fit: _,
+		position: v,
+		scale: b,
+		disabledResizing: T
+	})), Y = i(a), X = D ? n({
 		mode: "blur",
-		src: i,
-		width: m,
-		fit: g,
-		position: _,
+		src: a,
+		width: h,
+		fit: _,
+		position: v,
 		scale: 1 / 3,
-		disabledResizing: w
+		disabledResizing: T
 	}) : null, Z = (e) => {
-		H(!0), W(!1), typeof b == "function" && b(e);
+		U(!0), G(!1), typeof x == "function" && x(e);
 	}, Q = (e) => {
-		typeof M == "function" && M(e.nativeEvent), W(!0), H(!1);
-	}, $ = () => K(!0);
-	return a(() => {
-		if (S && F.current) {
+		Y && !q.startsWith("blob:") || (typeof M == "function" && M(e.nativeEvent), G(!0), U(!1));
+	}, $ = () => ne(!0);
+	return o(() => {
+		if (C && F.current) {
 			let e = () => {
-				R && B(!0);
+				z && V(!0);
 			};
 			return e(), window.appScreenContent?.addEventListener("scroll", e), window.addEventListener("resize", e), window.addEventListener("orientationchange", e), () => {
 				window.appScreenContent?.removeEventListener("scroll", e), window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e);
 			};
 		}
-	}), a(() => {
-		typeof x == "function" && z && !I.current && (I.current = !0, x());
-	}, [x, z]), t(() => {
-		let e = L.current, t = (e) => {
-			window.fetch(i).then(async (t) => {
-				let n = await t.blob(), r = (await import("heic2any")).default, i = await r({
-					blob: n,
-					toType: "image/png"
-				});
-				J(URL.createObjectURL(i)), e.onload = () => {
-					e.style.opacity = "1", H(!0), W(!1), e.onload = null, e.onerror = null;
+	}), o(() => {
+		typeof S == "function" && B && !I.current && (I.current = !0, S());
+	}, [S, B]), t(() => {
+		let e = L.current, t = !1, n = (e) => {
+			ee(a).then((n) => {
+				t || (J(URL.createObjectURL(n)), e.onload = () => {
+					e.style.opacity = "1", U(!0), G(!1), e.onload = null, e.onerror = null;
 				}, e.onerror = () => {
-					W(!0), H(!1), e.onload = null, e.onerror = null;
-				};
+					G(!0), U(!1), e.onload = null, e.onerror = null;
+				});
+			}).catch((e) => {
+				t || (G(!0), U(!1), typeof R.current == "function" && R.current(new ErrorEvent("error", {
+					error: e,
+					message: e.message
+				})));
 			});
 		};
-		return e?.complete ? Y ? e.src.startsWith("blob:") || (e.style.transition = "opacity 0.3s", e.style.opacity = "0", t(e)) : e.naturalWidth > 0 ? (e.style.transition = "none", e.style.opacity = "1", H(!0)) : (e.style.opacity = "0", W(!0)) : e && (e.style.transition = "opacity 0.3s", e.style.opacity = "0", e.onload = () => {
-			e.style.opacity = "1", H(!0), e.onload = null;
+		return e?.complete ? Y ? e.src.startsWith("blob:") || (e.style.transition = "opacity 0.3s", e.style.opacity = "0", n(e)) : e.naturalWidth > 0 ? (e.style.transition = "none", e.style.opacity = "1", U(!0)) : (e.style.opacity = "0", G(!0)) : e && (e.style.transition = "opacity 0.3s", e.style.opacity = "0", e.onload = () => {
+			e.style.opacity = "1", U(!0), e.onload = null;
 		}, e.onerror = () => {
 			if (!Y) {
-				W(!0), e.onerror = null;
+				G(!0), e.onerror = null;
 				return;
 			}
-			W(!1), e.style.transition = "opacity 0.3s", e.style.opacity = "0", t(e);
+			G(!1), e.style.transition = "opacity 0.3s", e.style.opacity = "0", n(e);
 		}), () => {
-			e && (e.onload = null, e.onerror = null);
+			t = !0, e && (e.onload = null, e.onerror = null);
 		};
 	}, [
-		z,
-		i,
+		B,
+		a,
 		Y
-	]), a(() => {
+	]), o(() => {
 		J(n({
 			mode: "original",
-			src: i,
-			width: m,
-			height: h,
-			fit: g,
-			position: _,
-			scale: y,
-			disabledResizing: w
+			src: a,
+			width: h,
+			height: g,
+			fit: _,
+			position: v,
+			scale: b,
+			disabledResizing: T
 		}));
 	}, [
-		i,
-		m,
+		a,
 		h,
 		g,
 		_,
-		y,
-		w
-	]), S ? /* @__PURE__ */ p(l, {
-		...A,
+		v,
+		b,
+		T
+	]), C ? /* @__PURE__ */ m(u, {
+		...j,
 		ref: F,
-		inlineCSS: T ? {
+		inlineCSS: E ? {
 			position: "relative",
-			paddingTop: `calc(100% / ${m} * ${h})`,
+			paddingTop: `calc(100% / ${h} * ${g})`,
 			minWidth: "100%",
-			borderRadius: C,
+			borderRadius: w,
 			overflow: "hidden",
-			...A?.inlineCSS
+			...j?.inlineCSS
 		} : {
 			position: "relative",
-			width: m,
-			minWidth: m,
-			height: h,
-			borderRadius: C,
+			width: h,
+			minWidth: h,
+			height: g,
+			borderRadius: w,
 			overflow: "hidden",
-			...A?.inlineCSS
+			...j?.inlineCSS
 		},
 		children: [
-			D && /* @__PURE__ */ f(u, {
+			O && /* @__PURE__ */ p(d, {
 				width: "100%",
 				height: "100%",
-				borderRadius: C || 0,
+				borderRadius: w || 0,
 				inlineCSS: {
 					position: "absolute",
 					top: 0,
 					left: 0,
-					opacity: V || E && G ? 0 : 1,
+					opacity: H || D && K ? 0 : 1,
 					transition: "opacity 0.3s"
 				}
 			}),
-			E && X && z && /* @__PURE__ */ f("img", {
+			D && X && B && /* @__PURE__ */ p("img", {
 				src: X,
 				alt: "",
-				width: m,
-				height: h,
+				width: h,
+				height: g,
 				onLoad: $,
 				draggable: !1,
 				style: {
@@ -139,21 +141,21 @@ var m = i(({ src: i, width: m, height: h, fit: g = "cover", position: _ = "cente
 					width: "100%",
 					height: "100%",
 					filter: "blur(5px)",
-					opacity: G && !V ? 1 : 0,
+					opacity: K && !H ? 1 : 0,
 					transition: "opacity 0.3s",
-					objectFit: g,
-					objectPosition: _
+					objectFit: _,
+					objectPosition: v
 				}
 			}),
-			z && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("img", {
+			B && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("img", {
 				ref: L,
 				src: q,
-				alt: v,
-				width: m,
-				height: h,
+				alt: y,
+				width: h,
+				height: g,
 				onLoad: Z,
 				onError: Q,
-				"aria-hidden": U,
+				"aria-hidden": W,
 				draggable: !1,
 				...N,
 				style: {
@@ -165,46 +167,46 @@ var m = i(({ src: i, width: m, height: h, fit: g = "cover", position: _ = "cente
 					transition: "opacity 0.3s",
 					...N.style
 				}
-			}), O && U && (k?.() || /* @__PURE__ */ f(r, {}))] })
+			}), k && W && (A?.() || /* @__PURE__ */ p(r, {}))] })
 		]
-	}) : /* @__PURE__ */ p(l, {
-		...A,
+	}) : /* @__PURE__ */ m(u, {
+		...j,
 		ref: F,
-		inlineCSS: T ? {
+		inlineCSS: E ? {
 			position: "relative",
-			paddingTop: `calc(100% / ${m} * ${h})`,
+			paddingTop: `calc(100% / ${h} * ${g})`,
 			minWidth: "100%",
 			transition: "padding-top 0.2s",
-			borderRadius: C,
+			borderRadius: w,
 			overflow: "hidden",
-			...A?.inlineCSS
+			...j?.inlineCSS
 		} : {
 			position: "relative",
-			width: m,
-			minWidth: m,
-			height: h,
-			borderRadius: C,
+			width: h,
+			minWidth: h,
+			height: g,
+			borderRadius: w,
 			overflow: "hidden",
-			...A?.inlineCSS
+			...j?.inlineCSS
 		},
 		children: [
-			D && /* @__PURE__ */ f(u, {
+			O && /* @__PURE__ */ p(d, {
 				width: "100%",
 				height: "100%",
-				borderRadius: C || 0,
+				borderRadius: w || 0,
 				inlineCSS: {
 					position: "absolute",
 					top: 0,
 					left: 0,
-					opacity: V || E && G ? 0 : 1,
+					opacity: H || D && K ? 0 : 1,
 					transition: "opacity 0.3s"
 				}
 			}),
-			E && X && /* @__PURE__ */ f("img", {
+			D && X && /* @__PURE__ */ p("img", {
 				src: X,
 				alt: "",
-				width: m,
-				height: h,
+				width: h,
+				height: g,
 				onLoad: $,
 				draggable: !1,
 				style: {
@@ -214,19 +216,19 @@ var m = i(({ src: i, width: m, height: h, fit: g = "cover", position: _ = "cente
 					width: "100%",
 					height: "100%",
 					filter: "blur(5px)",
-					opacity: G && !V ? 1 : 0,
+					opacity: K && !H ? 1 : 0,
 					transition: "opacity 0.3s"
 				}
 			}),
-			/* @__PURE__ */ f("img", {
+			/* @__PURE__ */ p("img", {
 				ref: L,
 				src: q,
-				alt: v,
-				width: m,
-				height: h,
+				alt: y,
+				width: h,
+				height: g,
 				onLoad: Z,
 				onError: Q,
-				"aria-hidden": U,
+				"aria-hidden": W,
 				draggable: !1,
 				...N,
 				style: {
@@ -239,9 +241,9 @@ var m = i(({ src: i, width: m, height: h, fit: g = "cover", position: _ = "cente
 					...N.style
 				}
 			}),
-			O && U && (k?.() || /* @__PURE__ */ f(r, {}))
+			k && W && (A?.() || /* @__PURE__ */ p(r, {}))
 		]
 	});
 });
 //#endregion
-export { m as default };
+export { h as default };

package/dist/shared/components/Image/Image.utils.d.ts

@@ -0,0 +1,7 @@
+export declare function isHeicSource(src?: string): boolean;
+/**
+ * heic/heif 원본을 PNG Blob 으로 바꾼다. 같은 src 는 한 번만 변환하고 결과를 공유한다.
+ *
+ * 실패는 캐시에 남기지 않는다. 소비처의 다시 시도가 같은 src 로 다시 들어오기 때문이다.
+ */
+export declare function convertHeicToPng(src: string): Promise<Blob>;

package/dist/shared/components/Image/Image.utils.mjs

@@ -0,0 +1,21 @@
+//#region shared/components/Image/Image.utils.ts
+var e = [".heic", ".heif"];
+function t(t) {
+	let n = t?.toLowerCase() ?? "";
+	return e.some((e) => n.endsWith(e));
+}
+var n = /* @__PURE__ */ new Map();
+function r(e) {
+	let t = n.get(e);
+	if (t) return t;
+	let r = window.fetch(e).then((e) => e.blob()).then(async (e) => {
+		let { heicTo: t } = await import("heic-to");
+		return t({
+			blob: e,
+			type: "image/png"
+		});
+	});
+	return n.set(e, r), r.catch(() => n.delete(e)), r;
+}
+//#endregion
+export { r as convertHeicToPng, t as isHeicSource };

package/dist/shared/components/Image/Image.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -139,7 +139,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "dayjs": "^1.11.13",
-    "heic2any": "^0.0.4",
+    "heic-to": "1.5.2",
     "dompurify": "^3.3.1",
     "marked": "^17.0.3",
     "react": "^18.0.0 || ^19.0.0",