pukaad-ui-lib 1.351.0 → 1.352.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.351.0",
+  "version": "1.352.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/card/card-review.d.vue.ts

@@ -1,10 +1,14 @@
-import type { CardReviewProps } from "#pukaad-ui/types/components/card/card-review";
+import type { CardReviewProps, Replies } from "#pukaad-ui/types/components/card/card-review";
 type __VLS_Props = {
     item: CardReviewProps;
     isProfile: boolean;
     disabledLike?: boolean;
     disabledMenu?: boolean;
-    /** ถ้ามี place context → like/unlike และ edit จัดการใน component เลย */
+    /** เปิดให้ตอบกลับรีวิวได้ (สำหรับ business เจ้าของสถานที่เท่านั้น) — เมนู "ตอบกลับ" จะโผล่ในปุ่ม ⋮ */
+    allowReply?: boolean;
+    /** avatar ของ business ที่ใช้แสดงในฟอร์มตอบกลับ (Figma 2456:53296) */
+    replyAvatar?: string;
+    /** ถ้ามี place context → like/unlike, edit และ reply จัดการใน component เลย */
     place?: {
         id: string | number;
         name?: string;
@@ -18,17 +22,25 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
     "select-image": (item: CardReviewProps, index: number) => any;
     "review-updated": (data: unknown) => any;
+    "reply-updated": (item: CardReviewProps, reply?: Replies | undefined) => any;
+    "reply-submit": (item: CardReviewProps, description: string) => any;
+    "reply-delete": (item: CardReviewProps) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: ((item: CardReviewProps) => any) | undefined;
     onEdit?: ((item: CardReviewProps) => any) | undefined;
     "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
     "onSelect-image"?: ((item: CardReviewProps, index: number) => any) | undefined;
     "onReview-updated"?: ((data: unknown) => any) | undefined;
+    "onReply-updated"?: ((item: CardReviewProps, reply?: Replies | undefined) => any) | undefined;
+    "onReply-submit"?: ((item: CardReviewProps, description: string) => any) | undefined;
+    "onReply-delete"?: ((item: CardReviewProps) => any) | undefined;
 }>, {
     item: CardReviewProps;
     disabledMenu: boolean;
     isProfile: boolean;
     disabledLike: boolean;
+    allowReply: boolean;
+    replyAvatar: string;
     place: {
         id: string | number;
         name?: string;

package/dist/runtime/components/card/card-review.vue

@@ -44,6 +44,7 @@
                   disabled-padding
                   @review-edit="onEdit"
                   @review-delete="emit('delete', props.item)"
+                  @review-reply="openReplyForm"
                 />
               </div>
             </div>
@@ -78,16 +79,46 @@
         </div>
       </div>
 
-      <div v-if="props.item.replies">
-        <div class="p-[16px] rounded-sm bg-bright">
+      <div
+        v-if="localReplies && !isReplyOpen"
+        class="relative p-[16px] rounded-md bg-bright flex flex-col gap-[4px]"
+      >
+        <!-- หางบอลลูนชี้ขึ้นบน (Figma 2456:53435 Polygon 8) -->
+        <div
+          class="absolute -top-[9px] left-[8px] w-0 h-0 border-l-[9px] border-l-transparent border-r-[9px] border-r-transparent border-b-[12px] border-b-bright"
+        />
+        <div class="flex justify-between items-center">
           <div class="text-gray font-body-large">
-            การตอบกลับจาก {{ props.item.replies?.author }}
-          </div>
-          <div class="font-body-large">
-            {{ props.item.replies?.description }}
+            การตอบกลับจาก {{ localReplies.author }}
           </div>
+          <!-- เมนูจัดการคำตอบกลับของตัวเอง — เฉพาะ business (Figma 2456:88751) -->
+          <PickerOptionMenuUser
+            v-if="props.allowReply"
+            state="my-reply"
+            disabled-padding
+            @reply-edit="openReplyForm"
+            @reply-delete="emit('reply-delete', props.item)"
+          />
+        </div>
+        <!-- whitespace-pre-wrap ให้ \n จาก Shift+Enter แสดงจริง (เทียบ comment.vue) -->
+        <div class="font-body-large whitespace-pre-wrap break-words">
+          {{ normalizeContent(localReplies.description) }}
         </div>
       </div>
+
+      <!-- ฟอร์มตอบกลับ (business เท่านั้น) — Figma 2456:53296/53525
+           ไม่ส่ง reply-to → ชื่อคนอยู่ใน placeholder เฉยๆ ไม่ปนลงไปในข้อความที่ส่ง -->
+      <InputComment
+        v-if="isReplyOpen"
+        v-model="replyText"
+        :avatar="props.replyAvatar"
+        :placeholder="`\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A ${props.item.user?.name ?? ''}`"
+        :loading="isSubmittingReply"
+        submit-text="ตอบกลับ"
+        autofocus
+        @submit="submitReply"
+        @cancel="isReplyOpen = false"
+      />
     </div>
   </div>
 
@@ -148,9 +179,11 @@ const props = defineProps({
   isProfile: { type: Boolean, required: true, default: false },
   disabledLike: { type: Boolean, required: false, default: false },
   disabledMenu: { type: Boolean, required: false, default: false },
+  allowReply: { type: Boolean, required: false, default: false },
+  replyAvatar: { type: String, required: false, default: "" },
   place: { type: Object, required: false, default: void 0 }
 });
-const emit = defineEmits(["toggle-like", "select-image", "edit", "delete", "review-updated"]);
+const emit = defineEmits(["toggle-like", "select-image", "edit", "delete", "review-updated", "reply-updated", "reply-submit", "reply-delete"]);
 const isOpen = ref(false);
 const startIndex = ref(0);
 const liked = ref(props.item.review?.liked ?? false);
@@ -178,9 +211,11 @@ const drawerItem = computed(() => ({
   description: props.item.review?.description ?? "",
   photos: (props.item.review?.images ?? []).map((url) => ({ url }))
 }));
-const menuType = computed(
-  () => props.item.user?.is_my_review ? "my-review" : "report-review"
-);
+const menuType = computed(() => {
+  if (props.item.user?.is_my_review) return "my-review";
+  if (props.allowReply && !localReplies.value) return "business-review";
+  return "report-review";
+});
 const navigateToProfile = (pathName) => {
   if (!pathName) return;
   router.push(`/@${pathName}`);
@@ -221,6 +256,56 @@ const onEdit = () => {
 const onReviewSuccess = (data) => {
   emit("review-updated", data);
 };
+const localReplies = ref(props.item.replies);
+const isReplyOpen = ref(false);
+const replyText = ref("");
+const isSubmittingReply = ref(false);
+const normalizeContent = (text) => text.replace(/\n{3,}/g, "\n\n");
+watch(
+  () => props.item.replies,
+  (val) => {
+    localReplies.value = val;
+  }
+);
+const openReplyForm = () => {
+  replyText.value = localReplies.value?.description ?? "";
+  isReplyOpen.value = true;
+};
+const submitReply = async () => {
+  const description = replyText.value.trim();
+  if (!description || isSubmittingReply.value) return;
+  if (!props.place?.id) {
+    emit("reply-submit", props.item, description);
+    isReplyOpen.value = false;
+    return;
+  }
+  isSubmittingReply.value = true;
+  try {
+    const isEdit = !!localReplies.value;
+    const res = await api(
+      `/suggest-places/${props.place.id}/reviews/${props.item.review_id}/reply`,
+      {
+        method: isEdit ? "patch" : "post",
+        body: { description }
+      }
+    );
+    localReplies.value = res?.data ?? {
+      replies_id: localReplies.value?.replies_id ?? 0,
+      author: localReplies.value?.author ?? "",
+      description,
+      created_at: localReplies.value?.created_at ?? (/* @__PURE__ */ new Date()).toISOString()
+    };
+    emit("reply-updated", props.item, localReplies.value);
+    isReplyOpen.value = false;
+    $toast.success(
+      isEdit ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E01\u0E32\u0E23\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 !" : "\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A\u0E23\u0E35\u0E27\u0E34\u0E27\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 !"
+    );
+  } catch {
+    $toast.error("\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07");
+  } finally {
+    isSubmittingReply.value = false;
+  }
+};
 const selectImage = (index) => {
   startIndex.value = index;
   isOpen.value = true;

package/dist/runtime/components/card/card-review.vue.d.ts

@@ -1,10 +1,14 @@
-import type { CardReviewProps } from "#pukaad-ui/types/components/card/card-review";
+import type { CardReviewProps, Replies } from "#pukaad-ui/types/components/card/card-review";
 type __VLS_Props = {
     item: CardReviewProps;
     isProfile: boolean;
     disabledLike?: boolean;
     disabledMenu?: boolean;
-    /** ถ้ามี place context → like/unlike และ edit จัดการใน component เลย */
+    /** เปิดให้ตอบกลับรีวิวได้ (สำหรับ business เจ้าของสถานที่เท่านั้น) — เมนู "ตอบกลับ" จะโผล่ในปุ่ม ⋮ */
+    allowReply?: boolean;
+    /** avatar ของ business ที่ใช้แสดงในฟอร์มตอบกลับ (Figma 2456:53296) */
+    replyAvatar?: string;
+    /** ถ้ามี place context → like/unlike, edit และ reply จัดการใน component เลย */
     place?: {
         id: string | number;
         name?: string;
@@ -18,17 +22,25 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
     "select-image": (item: CardReviewProps, index: number) => any;
     "review-updated": (data: unknown) => any;
+    "reply-updated": (item: CardReviewProps, reply?: Replies | undefined) => any;
+    "reply-submit": (item: CardReviewProps, description: string) => any;
+    "reply-delete": (item: CardReviewProps) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: ((item: CardReviewProps) => any) | undefined;
     onEdit?: ((item: CardReviewProps) => any) | undefined;
     "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
     "onSelect-image"?: ((item: CardReviewProps, index: number) => any) | undefined;
     "onReview-updated"?: ((data: unknown) => any) | undefined;
+    "onReply-updated"?: ((item: CardReviewProps, reply?: Replies | undefined) => any) | undefined;
+    "onReply-submit"?: ((item: CardReviewProps, description: string) => any) | undefined;
+    "onReply-delete"?: ((item: CardReviewProps) => any) | undefined;
 }>, {
     item: CardReviewProps;
     disabledMenu: boolean;
     isProfile: boolean;
     disabledLike: boolean;
+    allowReply: boolean;
+    replyAvatar: string;
     place: {
         id: string | number;
         name?: string;

package/dist/runtime/components/comment.vue

@@ -7,43 +7,17 @@
       </div>
     </div>
 
-    <div class="flex flex-col gap-[16px]">
-      <div class="flex gap-[8px] w-full">
-        <Avatar :size="30" :src="currentUser.avatar" />
-        <div ref="mainInputRef" contenteditable="true"
-          class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
-          data-placeholder="เพิ่มความคิดเห็น" @focus="isShowMainActions = true" @input="onMainCommentInput"
-          @keydown.enter.exact.prevent="onSendComment" @keydown.shift.enter.prevent="onInsertLineBreak" />
-      </div>
-      <div v-if="isShowMainActions" class="flex justify-end gap-[8px]">
-        <Button variant="outline" class="w-[56px]" @click="onCancelComment">
-          ยกเลิก
-        </Button>
-        <Button color="primary" class="w-[56px]" :disabled="!mainCommentInput" @click="onSendComment">
-          ส่ง
-        </Button>
-      </div>
-    </div>
+    <!-- กล่องคอมเมนต์หลัก — ปุ่มโผล่ตอนคลิกเข้าช่องพิมพ์ (actions-on-focus) -->
+    <InputComment ref="mainInputRef" v-model="mainCommentInput" :avatar="currentUser.avatar"
+      placeholder="เพิ่มความคิดเห็น" actions-on-focus @submit="onSendComment" />
     <div v-for="cmt in resolvedComments" :key="cmt.id" class="flex flex-col gap-[16px] w-full">
       <div class="flex flex-col gap-[4px] w-full">
         <div class="flex gap-[8px]" @mouseenter="hoveredId = cmt.id" @mouseleave="hoveredId = null">
           <Avatar :size="30" :src="cmt.user.avatar" class="cursor-pointer" @click="onViewProfileComment(cmt.user.id)" />
           <template v-if="editingId === cmt.id">
-            <div class="flex-1 flex flex-col gap-[4px]">
-              <div :ref="(el) => setEditInputRef(el, cmt.id)" contenteditable="true"
-                class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white"
-                @input="onEditInput($event, cmt.id)" @keydown.enter.exact.prevent="onSendEdit(cmt, 'comment')"
-                @keydown.shift.enter.prevent="onInsertLineBreak" />
-              <div class="flex justify-end gap-[8px]">
-                <Button variant="outline" class="w-[56px]" @click="onCancelEdit">
-                  ยกเลิก
-                </Button>
-                <Button color="primary" class="w-[56px]" :disabled="!editTextMap[cmt.id]"
-                  @click="onSendEdit(cmt, 'comment')">
-                  ส่ง
-                </Button>
-              </div>
-            </div>
+            <!-- กล่องแก้ไข — อวาตาร์ใช้ของแถวข้างนอก เลย disabled-avatar -->
+            <InputComment v-model="editText" disabled-avatar autofocus class="flex-1 min-w-0"
+              @submit="onSendEdit(cmt, 'comment')" @cancel="onCancelEdit" />
           </template>
           <template v-else>
             <div class="flex flex-col gap-[4px] bg-bright p-[8px] rounded-lg">
@@ -105,25 +79,10 @@
           </Button>
         </div>
       </div>
-      <div v-if="replyingToId === cmt.id" class="flex flex-col gap-[16px]">
-        <div class="flex gap-[8px] w-full">
-          <Avatar :size="30" :src="currentUser.avatar" />
-          <div class="flex-1">
-            <div :ref="(el) => setReplyInputRef(el, cmt.id)" contenteditable="true"
-              class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
-              data-placeholder="เขียนการตอบกลับ..." @input="onReplyInput($event, cmt.id)"
-              @keydown.enter.exact.prevent="onSendReplyComment(cmt)" @keydown.shift.enter.prevent="onInsertLineBreak" />
-          </div>
-        </div>
-        <div class="flex justify-end gap-[8px]">
-          <Button variant="outline" class="w-[56px]" @click="onCancelReplyComment">
-            ยกเลิก
-          </Button>
-          <Button color="primary" class="w-[68px]" :disabled="!replyTextMap[cmt.id]" @click="onSendReplyComment(cmt)">
-            ตอบกลับ
-          </Button>
-        </div>
-      </div>
+      <!-- กล่องตอบกลับคอมเมนต์ — ชิป mention ผ่าน v-model:reply-to -->
+      <InputComment v-if="replyingToId === cmt.id" v-model="replyText" v-model:reply-to="replyToUser"
+        :avatar="currentUser.avatar" placeholder="เขียนการตอบกลับ..." submit-text="ตอบกลับ" autofocus
+        @submit="onSendReplyComment(cmt)" @cancel="onCancelReplyComment" />
       <div v-if="cmt.reply.length > 0" v-show="
   openedComments.includes(cmt.id) || cmt.reply.some((r) => pinnedReplyIds.has(r.id))
 " class="pl-[38px] flex flex-col gap-[16px]">
@@ -134,21 +93,9 @@
               <Avatar :size="30" :src="reply.user.avatar" class="cursor-pointer"
                 @click="onViewProfileComment(reply.user.id)" />
               <template v-if="editingId === reply.id">
-                <div class="flex-1 flex flex-col gap-[4px]">
-                  <div :ref="(el) => setEditInputRef(el, reply.id)" contenteditable="true"
-                    class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white"
-                    @input="onEditInput($event, reply.id)" @keydown.enter.exact.prevent="onSendEdit(reply, 'reply')"
-                    @keydown.shift.enter.prevent="onInsertLineBreak" />
-                  <div class="flex justify-end gap-[8px]">
-                    <Button variant="outline" class="w-[56px]" @click="onCancelEdit">
-                      ยกเลิก
-                    </Button>
-                    <Button color="primary" class="w-[56px]" :disabled="!editTextMap[reply.id]"
-                      @click="onSendEdit(reply, 'reply')">
-                      ส่ง
-                    </Button>
-                  </div>
-                </div>
+                <!-- แก้ไข reply — ชิป reply_to โชว์ผ่าน v-model:reply-to (ข้อความที่ส่งไม่รวมชื่อ) -->
+                <InputComment v-model="editText" v-model:reply-to="editReplyTo" disabled-avatar autofocus
+                  class="flex-1 min-w-0" @submit="onSendEdit(reply, 'reply')" @cancel="onCancelEdit" />
               </template>
               <template v-else>
                 <div class="flex flex-col bg-bright p-[8px] rounded-lg gap-[4px]">
@@ -199,27 +146,10 @@
               </div>
             </div>
           </div>
-          <div v-if="replyingToId === reply.id" class="flex flex-col gap-[16px]">
-            <div class="flex gap-[8px] w-full">
-              <Avatar :size="30" :src="currentUser.avatar" />
-              <div class="flex-1">
-                <div :ref="(el) => setReplyInputRef(el, reply.id)" contenteditable="true"
-                  class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
-                  data-placeholder="เขียนการตอบกลับ..." @input="onReplyInput($event, reply.id)"
-                  @keydown.enter.exact.prevent="onSendReplyComment(cmt)"
-                  @keydown.shift.enter.prevent="onInsertLineBreak" />
-              </div>
-            </div>
-            <div class="flex justify-end gap-[8px]">
-              <Button variant="outline" class="w-[56px]" @click="onCancelReplyComment">
-                ยกเลิก
-              </Button>
-              <Button color="primary" class="w-[68px]" :disabled="!replyTextMap[reply.id]"
-                @click="onSendReplyComment(cmt)">
-                ตอบกลับ
-              </Button>
-            </div>
-          </div>
+          <!-- ตอบกลับ reply — submit ยังผูกกับ comment แม่ (cmt) เหมือนเดิม -->
+          <InputComment v-if="replyingToId === reply.id" v-model="replyText" v-model:reply-to="replyToUser"
+            :avatar="currentUser.avatar" placeholder="เขียนการตอบกลับ..." submit-text="ตอบกลับ" autofocus
+            @submit="onSendReplyComment(cmt)" @cancel="onCancelReplyComment" />
         </div>
       </div>
     </div>
@@ -270,11 +200,9 @@ const expandedContentIds = ref([]);
 const truncatedTexts = ref({});
 const mainInputRef = ref(null);
 const mainCommentInput = ref("");
-const isShowMainActions = ref(false);
 const replyingToId = ref(null);
-const replyToUser = ref(null);
-const replyInputRefs = ref({});
-const replyTextMap = ref({});
+const replyToUser = ref(void 0);
+const replyText = ref("");
 const pinnedReplyIds = ref(/* @__PURE__ */ new Set());
 const knownRepliesPerComment = /* @__PURE__ */ new WeakMap();
 watch(
@@ -309,17 +237,9 @@ const hoveredId = ref(null);
 const openMenuId = ref(null);
 const isMenuVisible = (id) => hoveredId.value === id || openMenuId.value === id;
 const editingId = ref(null);
-const editInputRefs = ref({});
-const editTextMap = ref({});
+const editText = ref("");
+const editReplyTo = ref(void 0);
 const isSelfUser = (user) => !!props.currentUser.id && user.id === props.currentUser.id;
-const buildMentionChip = (name) => {
-  const chip = document.createElement("span");
-  chip.dataset.type = "mention";
-  chip.contentEditable = "false";
-  chip.className = "inline-flex items-center text-primary font-body-large-prominent select-none mr-1";
-  chip.textContent = name;
-  return chip;
-};
 const onToggleReplyComment = (id) => {
   if (openedComments.value.includes(id)) {
     openedComments.value = openedComments.value.filter((i) => i !== id);
@@ -395,113 +315,26 @@ const toggleContentExpand = (id) => {
     expandedContentIds.value.push(id);
   }
 };
-const clearMainInput = () => {
-  mainCommentInput.value = "";
-  if (mainInputRef.value) mainInputRef.value.innerText = "";
-};
-const onCancelComment = () => {
-  clearMainInput();
-  isShowMainActions.value = false;
-};
 const onSendComment = () => {
   if (!mainCommentInput.value.trim()) return;
   emit("submit", mainCommentInput.value.trim());
-  clearMainInput();
-  isShowMainActions.value = false;
-};
-const setReplyInputRef = (el, id) => {
-  if (el) replyInputRefs.value[id] = el;
-  else delete replyInputRefs.value[id];
+  mainInputRef.value?.reset();
 };
 const onReplyComment = (id, user) => {
-  const isSelf = isSelfUser(user);
   replyingToId.value = id;
-  replyToUser.value = isSelf ? null : user;
-  replyTextMap.value[id] = "";
-  nextTick(() => {
-    const el = replyInputRefs.value[id];
-    if (!el) return;
-    el.innerHTML = "";
-    if (!isSelf) {
-      const space = document.createTextNode("\xA0");
-      el.appendChild(buildMentionChip(user.name));
-      el.appendChild(space);
-      const range = document.createRange();
-      const sel = window.getSelection();
-      range.setStartAfter(space);
-      range.collapse(true);
-      sel?.removeAllRanges();
-      sel?.addRange(range);
-    }
-    el.focus();
-  });
-};
-const readTextWithBreaks = (el, skipMention = false) => {
-  const nodes = Array.from(el.childNodes);
-  while (nodes.length && nodes.at(-1)?.nodeName === "BR") nodes.pop();
-  let text = "";
-  nodes.forEach((node) => {
-    if (skipMention && node.dataset?.type === "mention")
-      return;
-    if (node.nodeName === "BR") {
-      text += "\n";
-      return;
-    }
-    if (node.nodeName === "DIV") {
-      text += "\n" + node.innerText;
-      return;
-    }
-    text += node.textContent ?? "";
-  });
-  return text.replace(/\n{3,}/g, "\n\n").replace(/^\u00A0/, "").trim();
-};
-const onInsertLineBreak = (event) => {
-  const el = event.target;
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0) return;
-  const range = sel.getRangeAt(0);
-  range.deleteContents();
-  const br = document.createElement("br");
-  range.insertNode(br);
-  if (!br.nextSibling || br.nextSibling.nodeName !== "BR" && br.nextSibling.textContent === "") {
-    const phantom = document.createElement("br");
-    br.after(phantom);
-  }
-  range.setStartAfter(br);
-  range.collapse(true);
-  sel.removeAllRanges();
-  sel.addRange(range);
-  el.dispatchEvent(new Event("input", { bubbles: true }));
-};
-const onMainCommentInput = (event) => {
-  const el = event.target;
-  mainCommentInput.value = readTextWithBreaks(el);
-};
-const onReplyInput = (event, id) => {
-  const el = event.target;
-  const chipExists = !!el.querySelector('[data-type="mention"]');
-  if (!chipExists) replyToUser.value = null;
-  replyTextMap.value[id] = readTextWithBreaks(el, true);
+  replyToUser.value = isSelfUser(user) ? void 0 : user;
+  replyText.value = "";
 };
 const onCancelReplyComment = () => {
-  const id = replyingToId.value;
-  if (id && replyInputRefs.value[id]) {
-    replyInputRefs.value[id].innerHTML = "";
-    delete replyTextMap.value[id];
-  }
   replyingToId.value = null;
-  replyToUser.value = null;
+  replyToUser.value = void 0;
+  replyText.value = "";
 };
 const onSendReplyComment = (comment) => {
-  const id = replyingToId.value;
-  if (!id) return;
-  const content = replyTextMap.value[id]?.trim() ?? "";
+  const content = replyText.value.trim();
   if (!content) return;
   emit("reply", comment.id, replyToUser.value?.id, content);
-  if (replyInputRefs.value[id]) replyInputRefs.value[id].innerHTML = "";
-  delete replyTextMap.value[id];
-  replyingToId.value = null;
-  replyToUser.value = null;
+  onCancelReplyComment();
 };
 const onToggleLikeComment = (comment) => {
   emit("like-comment", comment);
@@ -512,47 +345,22 @@ const onToggleLikeReplyComment = (reply) => {
 const onViewProfileComment = (id) => {
   if (id) router.push(`/@${id}`);
 };
-const setEditInputRef = (el, id) => {
-  if (el) editInputRefs.value[id] = el;
-  else delete editInputRefs.value[id];
-};
 const onEditClick = (id, content, replyTo) => {
   editingId.value = id;
-  editTextMap.value[id] = content;
-  nextTick(() => {
-    const el = editInputRefs.value[id];
-    if (!el) return;
-    el.innerHTML = "";
-    if (replyTo) {
-      el.appendChild(buildMentionChip(replyTo.name));
-      el.appendChild(document.createTextNode("\xA0"));
-    }
-    el.appendChild(document.createTextNode(content));
-    const range = document.createRange();
-    range.selectNodeContents(el);
-    range.collapse(false);
-    const sel = window.getSelection();
-    sel?.removeAllRanges();
-    sel?.addRange(range);
-    el.focus();
-  });
-};
-const onEditInput = (event, id) => {
-  const el = event.target;
-  editTextMap.value[id] = readTextWithBreaks(el, true);
+  editText.value = content;
+  editReplyTo.value = replyTo;
 };
 const onCancelEdit = () => {
-  const id = editingId.value;
-  if (id) delete editTextMap.value[id];
   editingId.value = null;
+  editText.value = "";
+  editReplyTo.value = void 0;
 };
 const onSendEdit = (item, type) => {
-  const content = editTextMap.value[item.id]?.trim() ?? "";
+  const content = editText.value.trim();
   if (!content) return;
   if (type === "comment") emit("edit-comment", item, content);
   else emit("edit-reply", item, content);
-  delete editTextMap.value[item.id];
-  editingId.value = null;
+  onCancelEdit();
 };
 const getCommentMenuItems = (comment) => isSelfUser(comment.user) ? [
   {

package/dist/runtime/components/input/input-comment.d.vue.ts

@@ -1,13 +1,58 @@
-import type { InputCommentProps } from "#pukaad-ui/types/components/input/input-comment";
+import type { HTMLAttributes } from "vue";
+import type { User } from "#pukaad-ui/types/components/comment.d.ts";
+export interface InputCommentProps {
+    /** อวาตาร์ของคนที่กำลังพิมพ์ — ส่ง undefined ได้ Avatar จะขึ้นตัวแทน */
+    avatar?: string;
+    /** ไม่ต้องวาดอวาตาร์ — ใช้ตอนที่แถวข้างนอกมีอวาตาร์อยู่แล้ว (กล่องแก้ไขของ Comment) */
+    disabledAvatar?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    /** กำลังส่ง — ล็อกช่องพิมพ์ + spinner ที่ปุ่มส่ง */
+    loading?: boolean;
+    submitText?: string;
+    cancelText?: string;
+    /** ซ่อนปุ่มไว้ก่อน โผล่ตอนคลิกเข้าช่องพิมพ์ (กล่องคอมเมนต์หลักของ Comment) */
+    actionsOnFocus?: boolean;
+    /** โฟกัส + วาง caret ท้ายข้อความทันทีที่ mount — สำหรับกล่องที่โผล่จากการกดปุ่ม (ตอบกลับ/แก้ไข) */
+    autofocus?: boolean;
+    /** ไม่ต้องมีปุ่ม — ให้ parent คุมเอง */
+    disabledActions?: boolean;
+    class?: HTMLAttributes["class"];
+}
 type __VLS_Props = InputCommentProps;
 type __VLS_ModelProps = {
-    modelValue?: string | undefined;
+    /** ข้อความล้วน — ไม่รวมชื่อคนที่ตอบกลับ (ชิป mention ถูกข้ามตอนอ่าน) */
+    modelValue?: string;
+    /**
+     * คนที่ถูกตอบกลับ → แสดงเป็นชิปสี primary หน้าข้อความ
+     * เป็น v-model เพราะผู้ใช้ลบชิปทิ้งได้ แล้วคอมโพเนนต์ต้องบอก parent กลับ
+     */
+    "replyTo"?: User | undefined;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+    reset: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (value: string) => any;
+    cancel: () => any;
+    "update:modelValue": (value: string) => any;
+    "update:replyTo": (value: User | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    onSubmit?: ((value: string) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:replyTo"?: ((value: User | undefined) => any) | undefined;
+}>, {
+    loading: boolean;
+    disabled: boolean;
+    placeholder: string;
+    disabledAvatar: boolean;
+    submitText: string;
+    cancelText: string;
+    actionsOnFocus: boolean;
+    autofocus: boolean;
+    disabledActions: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-comment.vue

@@ -1,43 +1,197 @@
 <template>
-  <div
-    contenteditable="true"
-    ref="editorRef"
-    @input="onInput"
-    class="w-full min-h-[40px] px-[12px] py-[8px] font-body-large bg-white ring-[1px] ring-cloud rounded-[8px] outline-none focus:outline-none focus:ring-[2px] focus:ring-primary whitespace-pre-wrap break-words text-black"
-  />
+  <!-- Figma "Input - Comments / Reply" (2456:53525 → 1981:2017): avatar + ช่องพิมพ์ / ปุ่มชิดขวา -->
+  <div :class="['flex flex-col gap-[16px] items-end w-full', props.class]">
+    <!-- focusin (ไม่ใช่ focus) เพราะต้องการให้ bubble ขึ้นมาจากช่องพิมพ์ข้างใน -->
+    <div class="flex gap-[8px] items-start w-full" @focusin="isFocused = true">
+      <!-- pt-[5px] ดันอวาตาร์ลงให้ตรงบรรทัดแรกของข้อความ (Figma 2477:33564) -->
+      <div
+        v-if="!props.disabledAvatar"
+        class="flex items-center pt-[5px] shrink-0"
+      >
+        <Avatar :src="props.avatar" :size="30" />
+      </div>
+      <div
+        ref="editorRef"
+        :contenteditable="isLocked ? 'false' : 'true'"
+        :data-placeholder="props.placeholder"
+        :class="[
+  'relative flex-1 min-w-0 min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury bg-white shadow-xs font-body-large text-black',
+  'whitespace-pre-wrap break-words outline-none focus:outline-none focus:ring-2 focus:ring-primary',
+  isEmpty && 'before:content-[attr(data-placeholder)] before:text-gray before:absolute before:pointer-events-none',
+  isLocked && 'opacity-50 cursor-not-allowed'
+]"
+        @input="onInput"
+        @keydown.enter.exact.prevent="onEnter"
+        @keydown.shift.enter.prevent="onInsertLineBreak"
+      />
+    </div>
+
+    <div
+      v-if="isActionsVisible"
+      class="flex gap-[8px] items-center justify-end w-full"
+    >
+      <Button
+        variant="outline"
+        size="sm"
+        :disabled="props.loading"
+        @click="onCancel"
+      >
+        {{ props.cancelText }}
+      </Button>
+      <Button
+        color="primary"
+        size="sm"
+        :disabled="!modelValue.trim() || props.loading"
+        :loading="props.loading"
+        @click="onEnter"
+      >
+        {{ props.submitText }}
+      </Button>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, watch, onMounted, nextTick } from "vue";
+import { ref, computed, watch, onMounted, nextTick } from "vue";
 const props = defineProps({
-  userReply: { type: Object, required: false }
+  avatar: { type: String, required: false },
+  disabledAvatar: { type: Boolean, required: false, default: false },
+  placeholder: { type: String, required: false, default: "" },
+  disabled: { type: Boolean, required: false, default: false },
+  loading: { type: Boolean, required: false, default: false },
+  submitText: { type: String, required: false, default: "\u0E2A\u0E48\u0E07" },
+  cancelText: { type: String, required: false, default: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01" },
+  actionsOnFocus: { type: Boolean, required: false, default: false },
+  autofocus: { type: Boolean, required: false, default: false },
+  disabledActions: { type: Boolean, required: false, default: false },
+  class: { type: null, required: false }
 });
-const modelValue = defineModel({ type: null });
+const emit = defineEmits(["submit", "cancel"]);
+const modelValue = defineModel({ type: String, ...{ default: "" } });
+const replyTo = defineModel("replyTo", { type: null });
 const editorRef = ref(null);
+const isFocused = ref(false);
+const isLocked = computed(() => props.disabled || props.loading);
+const isEmpty = computed(() => !modelValue.value.trim() && !replyTo.value);
+const isActionsVisible = computed(() => {
+  if (props.disabledActions) return false;
+  return !props.actionsOnFocus || isFocused.value;
+});
+const buildMentionChip = (name) => {
+  const chip = document.createElement("span");
+  chip.dataset.type = "mention";
+  chip.contentEditable = "false";
+  chip.className = "inline-flex items-center text-primary font-body-large-prominent select-none mr-1";
+  chip.textContent = name;
+  return chip;
+};
+const readText = (el) => {
+  const nodes = Array.from(el.childNodes);
+  while (nodes.length && nodes.at(-1)?.nodeName === "BR") nodes.pop();
+  let text = "";
+  nodes.forEach((node) => {
+    if (node.dataset?.type === "mention") return;
+    if (node.nodeName === "BR") {
+      text += "\n";
+      return;
+    }
+    if (node.nodeName === "DIV") {
+      text += "\n" + node.innerText;
+      return;
+    }
+    text += node.textContent ?? "";
+  });
+  return text.replace(/\n{3,}/g, "\n\n").replace(/^\u00A0/, "").trim();
+};
+const render = () => {
+  const el = editorRef.value;
+  if (!el) return;
+  el.innerHTML = "";
+  if (replyTo.value) {
+    el.appendChild(buildMentionChip(replyTo.value.name));
+    el.appendChild(document.createTextNode("\xA0"));
+  }
+  modelValue.value.split("\n").forEach((line, i) => {
+    if (i) el.appendChild(document.createElement("br"));
+    if (line) el.appendChild(document.createTextNode(line));
+  });
+};
+const focusEnd = () => {
+  const el = editorRef.value;
+  if (!el) return;
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  range.collapse(false);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+};
+const chipName = (el) => el.querySelector('[data-type="mention"]')?.textContent ?? void 0;
+const onInput = () => {
+  const el = editorRef.value;
+  if (!el) return;
+  isFocused.value = true;
+  if (replyTo.value && !chipName(el)) replyTo.value = void 0;
+  modelValue.value = readText(el);
+};
 onMounted(() => {
-  if (editorRef.value) {
-    editorRef.value.innerText = modelValue.value ?? "";
+  render();
+  if (props.autofocus) nextTick(() => focus());
+});
+watch([modelValue, replyTo], ([, user], [, prevUser]) => {
+  const el = editorRef.value;
+  if (!el) return;
+  if (readText(el) === modelValue.value && chipName(el) === user?.name) return;
+  render();
+  const justMentioned = !!user && user !== prevUser;
+  if (justMentioned || document.activeElement === el) {
+    nextTick(() => {
+      el.focus();
+      focusEnd();
+    });
   }
 });
-const onInput = (e) => {
-  const target = e.target;
-  modelValue.value = target.innerText;
-};
-watch(
-  () => modelValue.value,
-  (val) => {
-    if (editorRef.value) {
-      const next = val ?? "";
-      if (editorRef.value.innerText !== next) editorRef.value.innerText = next;
-    }
+const onEnter = () => {
+  if (isLocked.value || !modelValue.value.trim()) return;
+  emit("submit", modelValue.value);
+};
+const onCancel = () => {
+  modelValue.value = "";
+  replyTo.value = void 0;
+  isFocused.value = false;
+  emit("cancel");
+};
+const onInsertLineBreak = (event) => {
+  if (isLocked.value) return;
+  const el = event.target;
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+  range.deleteContents();
+  const br = document.createElement("br");
+  range.insertNode(br);
+  if (!br.nextSibling || br.nextSibling.nodeName !== "BR" && br.nextSibling.textContent === "") {
+    const phantom = document.createElement("br");
+    br.after(phantom);
   }
-);
-watch(() => props.userReply, (user) => {
-  if (!user) return;
-  const mention = `${user.name} `;
-  const current = modelValue.value ?? "";
-  const withoutPrev = current.replace(/^\S+\s+/, "");
-  const next = mention + withoutPrev;
-  modelValue.value = next;
-}, { immediate: true });
+  range.setStartAfter(br);
+  range.collapse(true);
+  sel.removeAllRanges();
+  sel.addRange(range);
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+};
+const focus = () => {
+  isFocused.value = true;
+  editorRef.value?.focus();
+  focusEnd();
+};
+const reset = () => {
+  modelValue.value = "";
+  replyTo.value = void 0;
+  isFocused.value = false;
+};
+defineExpose({
+  focus,
+  reset
+});
 </script>

package/dist/runtime/components/input/input-comment.vue.d.ts

@@ -1,13 +1,58 @@
-import type { InputCommentProps } from "#pukaad-ui/types/components/input/input-comment";
+import type { HTMLAttributes } from "vue";
+import type { User } from "#pukaad-ui/types/components/comment.d.ts";
+export interface InputCommentProps {
+    /** อวาตาร์ของคนที่กำลังพิมพ์ — ส่ง undefined ได้ Avatar จะขึ้นตัวแทน */
+    avatar?: string;
+    /** ไม่ต้องวาดอวาตาร์ — ใช้ตอนที่แถวข้างนอกมีอวาตาร์อยู่แล้ว (กล่องแก้ไขของ Comment) */
+    disabledAvatar?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    /** กำลังส่ง — ล็อกช่องพิมพ์ + spinner ที่ปุ่มส่ง */
+    loading?: boolean;
+    submitText?: string;
+    cancelText?: string;
+    /** ซ่อนปุ่มไว้ก่อน โผล่ตอนคลิกเข้าช่องพิมพ์ (กล่องคอมเมนต์หลักของ Comment) */
+    actionsOnFocus?: boolean;
+    /** โฟกัส + วาง caret ท้ายข้อความทันทีที่ mount — สำหรับกล่องที่โผล่จากการกดปุ่ม (ตอบกลับ/แก้ไข) */
+    autofocus?: boolean;
+    /** ไม่ต้องมีปุ่ม — ให้ parent คุมเอง */
+    disabledActions?: boolean;
+    class?: HTMLAttributes["class"];
+}
 type __VLS_Props = InputCommentProps;
 type __VLS_ModelProps = {
-    modelValue?: string | undefined;
+    /** ข้อความล้วน — ไม่รวมชื่อคนที่ตอบกลับ (ชิป mention ถูกข้ามตอนอ่าน) */
+    modelValue?: string;
+    /**
+     * คนที่ถูกตอบกลับ → แสดงเป็นชิปสี primary หน้าข้อความ
+     * เป็น v-model เพราะผู้ใช้ลบชิปทิ้งได้ แล้วคอมโพเนนต์ต้องบอก parent กลับ
+     */
+    "replyTo"?: User | undefined;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+    reset: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (value: string) => any;
+    cancel: () => any;
+    "update:modelValue": (value: string) => any;
+    "update:replyTo": (value: User | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    onSubmit?: ((value: string) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:replyTo"?: ((value: User | undefined) => any) | undefined;
+}>, {
+    loading: boolean;
+    disabled: boolean;
+    placeholder: string;
+    disabledAvatar: boolean;
+    submitText: string;
+    cancelText: string;
+    actionsOnFocus: boolean;
+    autofocus: boolean;
+    disabledActions: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/label/label-card-content.d.vue.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "vue";
+export type LabelCardContentOverflow = "slide" | "ellipsis";
+export type LabelCardContentItem = {
+    text: string;
+    color: string;
+    isSpecial?: boolean;
+};
+export interface LabelCardContentProps {
+    class?: HTMLAttributes["class"];
+    items?: LabelCardContentItem | LabelCardContentItem[];
+    overflow?: LabelCardContentOverflow;
+    clickable?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<LabelCardContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (item: LabelCardContentItem) => any;
+}, string, import("vue").PublicProps, Readonly<LabelCardContentProps> & Readonly<{
+    onClick?: ((item: LabelCardContentItem) => any) | undefined;
+}>, {
+    items: LabelCardContentItem | LabelCardContentItem[];
+    overflow: LabelCardContentOverflow;
+    clickable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/label/label-card-content.vue

@@ -0,0 +1,105 @@
+<template>
+  <div :class="['relative', props.class]">
+    <div
+      ref="scroller"
+      class="flex items-center gap-[8px] scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      :class="isEllipsis ? 'overflow-hidden' : 'overflow-x-auto'"
+      @scroll="syncArrows"
+    >
+      <div
+        v-for="(item, index) in labels"
+        :key="`${item.text}-${index}`"
+        :class="[
+  'inline-flex items-center rounded-[2px] border-2 border-solid px-[6px] py-[2px] font-title-small-prominent',
+  item.isSpecial === false ? 'bg-white' : 'text-white',
+  isEllipsis ? 'min-w-0' : 'shrink-0',
+  props.clickable && 'cursor-pointer'
+]"
+        :style="itemStyles(item)"
+        @click="props.clickable && emit('click', item)"
+      >
+        <span class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{{
+          item.text
+        }}</span>
+      </div>
+    </div>
+
+    <template v-if="canSlide">
+      <div
+        v-if="canScrollLeft"
+        class="absolute top-0 left-0 flex h-[32px] w-[50px] items-center bg-gradient-to-r from-bright from-50% to-transparent pl-[4px]"
+      >
+        <Button
+          variant="icon"
+          circle
+          class="size-[24px] hover:bg-mercury hover:drop-shadow"
+          @click="slide(-1)"
+        >
+          <Icon name="lucide:chevron-left" size="16" />
+        </Button>
+      </div>
+
+      <div
+        v-if="canScrollRight"
+        class="absolute top-0 right-0 flex h-[32px] w-[50px] items-center justify-end bg-gradient-to-l from-bright from-50% to-transparent pr-[4px]"
+      >
+        <Button
+          variant="icon"
+          circle
+          class="size-[24px] hover:bg-mercury hover:drop-shadow"
+          @click="slide(1)"
+        >
+          <Icon name="lucide:chevron-right" size="16" />
+        </Button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+const props = defineProps({
+  class: { type: null, required: false },
+  items: { type: [Object, Array], required: false, default: () => [] },
+  overflow: { type: String, required: false, default: "slide" },
+  clickable: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["click"]);
+const labels = computed(
+  () => Array.isArray(props.items) ? props.items : [props.items]
+);
+const isEllipsis = computed(() => props.overflow === "ellipsis");
+const canSlide = computed(() => !isEllipsis.value);
+const itemStyles = (item) => {
+  const color = item.color?.startsWith("#") ? item.color : `#${item.color}`;
+  return item.isSpecial === false ? { color, borderColor: color } : { backgroundColor: color, borderColor: color };
+};
+const scroller = ref(null);
+const canScrollLeft = ref(false);
+const canScrollRight = ref(false);
+const SCROLL_EPSILON = 1;
+const syncArrows = () => {
+  const element = scroller.value;
+  if (!element) return;
+  canScrollLeft.value = element.scrollLeft > SCROLL_EPSILON;
+  canScrollRight.value = element.scrollLeft + element.clientWidth < element.scrollWidth - SCROLL_EPSILON;
+};
+const slide = (direction) => {
+  const element = scroller.value;
+  if (!element) return;
+  element.scrollBy({
+    left: direction * element.clientWidth * 0.8,
+    behavior: "smooth"
+  });
+};
+let observer;
+onMounted(() => {
+  syncArrows();
+  if (scroller.value && typeof ResizeObserver !== "undefined") {
+    observer = new ResizeObserver(syncArrows);
+    observer.observe(scroller.value);
+  }
+});
+onBeforeUnmount(() => observer?.disconnect());
+watch(labels, syncArrows, { flush: "post" });
+</script>

package/dist/runtime/components/label/label-card-content.vue.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "vue";
+export type LabelCardContentOverflow = "slide" | "ellipsis";
+export type LabelCardContentItem = {
+    text: string;
+    color: string;
+    isSpecial?: boolean;
+};
+export interface LabelCardContentProps {
+    class?: HTMLAttributes["class"];
+    items?: LabelCardContentItem | LabelCardContentItem[];
+    overflow?: LabelCardContentOverflow;
+    clickable?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<LabelCardContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (item: LabelCardContentItem) => any;
+}, string, import("vue").PublicProps, Readonly<LabelCardContentProps> & Readonly<{
+    onClick?: ((item: LabelCardContentItem) => any) | undefined;
+}>, {
+    items: LabelCardContentItem | LabelCardContentItem[];
+    overflow: LabelCardContentOverflow;
+    clickable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.d.vue.ts

@@ -5,9 +5,12 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "blog-unpin": () => any;
     "blog-pin": () => any;
     "blog-delete": () => any;
+    "reply-delete": () => any;
     "report-review": () => any;
     "review-edit": () => any;
     "review-delete": () => any;
+    "review-reply": () => any;
+    "reply-edit": () => any;
     "profile-name-updated": (name: string) => any;
     "profile-edit": () => any;
     "profile-share": () => any;
@@ -24,9 +27,12 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "onBlog-unpin"?: (() => any) | undefined;
     "onBlog-pin"?: (() => any) | undefined;
     "onBlog-delete"?: (() => any) | undefined;
+    "onReply-delete"?: (() => any) | undefined;
     "onReport-review"?: (() => any) | undefined;
     "onReview-edit"?: (() => any) | undefined;
     "onReview-delete"?: (() => any) | undefined;
+    "onReview-reply"?: (() => any) | undefined;
+    "onReply-edit"?: (() => any) | undefined;
     "onProfile-name-updated"?: ((name: string) => any) | undefined;
     "onProfile-edit"?: (() => any) | undefined;
     "onProfile-share"?: (() => any) | undefined;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue

@@ -21,7 +21,7 @@
 
 <script setup>
 import { computed, ref } from "vue";
-const emit = defineEmits(["profile-edit", "profile-share", "profile-follower-delete", "profile-block", "blog-pin", "blog-unpin", "blog-edit", "blog-delete", "report-blog", "report-place", "report-profile", "report-announce", "report-review", "place-close-duplicate", "review-edit", "review-delete", "archive", "profile-name-updated"]);
+const emit = defineEmits(["profile-edit", "profile-share", "profile-follower-delete", "profile-block", "blog-pin", "blog-unpin", "blog-edit", "blog-delete", "report-blog", "report-place", "report-profile", "report-announce", "report-review", "place-close-duplicate", "review-edit", "review-delete", "review-reply", "reply-edit", "reply-delete", "archive", "profile-name-updated"]);
 const props = defineProps({
   state: { type: String, required: false },
   profileDetail: { type: Object, required: false },
@@ -162,6 +162,16 @@ const menu = [
       emit("report-announce");
     }
   },
+  // ลำดับใน array นี้ = ลำดับที่แสดงในเมนู (items ใช้ menu.filter ซึ่งคงลำดับเดิมไว้)
+  // "ตอบกลับ" ต้องอยู่เหนือ "รายงานรีวิวนี้" ตาม Figma 2456:51570
+  {
+    label: "\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A",
+    name: "review-reply",
+    icon: "lucide:reply",
+    action: () => {
+      emit("review-reply");
+    }
+  },
   {
     label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27\u0E19\u0E35\u0E49",
     name: "report-review",
@@ -187,6 +197,23 @@ const menu = [
     action: () => {
       emit("review-delete");
     }
+  },
+  // เมนูของกล่อง "การตอบกลับจาก ..." ที่ธุรกิจตอบไว้ (Figma 2456:88751)
+  {
+    label: "\u0E41\u0E01\u0E49\u0E44\u0E02",
+    name: "reply-edit",
+    icon: "lucide:square-pen",
+    action: () => {
+      emit("reply-edit");
+    }
+  },
+  {
+    label: "\u0E25\u0E1A",
+    name: "reply-delete",
+    icon: "lucide:trash-2",
+    action: () => {
+      emit("reply-delete");
+    }
   }
 ];
 const items = computed(() => {
@@ -242,6 +269,16 @@ const items = computed(() => {
       (item) => ["report-review"].includes(item.name)
     );
   }
+  if (props.state === "business-review") {
+    return menu.filter(
+      (item) => ["review-reply", "report-review"].includes(item.name)
+    );
+  }
+  if (props.state === "my-reply") {
+    return menu.filter(
+      (item) => ["reply-edit", "reply-delete"].includes(item.name)
+    );
+  }
   return menu;
 });
 </script>

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue.d.ts

@@ -5,9 +5,12 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "blog-unpin": () => any;
     "blog-pin": () => any;
     "blog-delete": () => any;
+    "reply-delete": () => any;
     "report-review": () => any;
     "review-edit": () => any;
     "review-delete": () => any;
+    "review-reply": () => any;
+    "reply-edit": () => any;
     "profile-name-updated": (name: string) => any;
     "profile-edit": () => any;
     "profile-share": () => any;
@@ -24,9 +27,12 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "onBlog-unpin"?: (() => any) | undefined;
     "onBlog-pin"?: (() => any) | undefined;
     "onBlog-delete"?: (() => any) | undefined;
+    "onReply-delete"?: (() => any) | undefined;
     "onReport-review"?: (() => any) | undefined;
     "onReview-edit"?: (() => any) | undefined;
     "onReview-delete"?: (() => any) | undefined;
+    "onReview-reply"?: (() => any) | undefined;
+    "onReply-edit"?: (() => any) | undefined;
     "onProfile-name-updated"?: ((name: string) => any) | undefined;
     "onProfile-edit"?: (() => any) | undefined;
     "onProfile-share"?: (() => any) | undefined;

package/dist/runtime/components/ui/popover/PopoverContent.d.vue.ts

@@ -22,7 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
-    align: "center" | "start" | "end";
+    align: "start" | "center" | "end";
     sideOffset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/popover/PopoverContent.vue.d.ts

@@ -22,7 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
-    align: "center" | "start" | "end";
+    align: "start" | "center" | "end";
     sideOffset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.351.0",
+  "version": "1.352.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",

package/dist/runtime/components/label/label-card-atom.d.vue.ts

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/label/label-card-atom.vue

@@ -1,17 +0,0 @@
-<template>
-  <!-- <div :class="['flex py-[2px]', state, color]">
-    <div class="font-body-extra-small text-word-on-surface">
-      {{ props.text }}
-    </div>
-  </div> -->
-</template>
-
-<script setup>
-
-</script>
-
-<style scoped>
-/* .state-last {
-//   clip-path: "polygon(0 0, 100% 0, 90% 100%, 0 100%)";
-// } */
-</style>

package/dist/runtime/components/label/label-card-atom.vue.d.ts

@@ -1,3 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;