@mailoo/blog 0.0.0-stage → 1.33.0

package/dist/client/marks.cjs

@@ -0,0 +1,300 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/blog-article-marks.tsx
+var blog_article_marks_exports = {};
+__export(blog_article_marks_exports, {
+  BlogArticleMarks: () => BlogArticleMarks
+});
+module.exports = __toCommonJS(blog_article_marks_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var STORAGE_KEY = "mailoo_blog_visitor_key";
+var VISITOR_STATE_PREFIX = "mailoo_blog_mark:";
+var BTN = "inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60";
+var BTN_IDLE = "border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800";
+var BTN_ACTIVE = "border-blue-600 bg-blue-50 text-blue-800 focus:ring-blue-500 dark:border-blue-400 dark:bg-blue-950 dark:text-blue-200";
+function createVisitorKey() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function readVisitorKey() {
+  try {
+    const existing = localStorage.getItem(STORAGE_KEY);
+    if (existing && existing.length >= 32) return existing;
+    const next = createVisitorKey();
+    localStorage.setItem(STORAGE_KEY, next);
+    return next;
+  } catch {
+    return createVisitorKey();
+  }
+}
+function readLocalMark(slug) {
+  try {
+    const raw = localStorage.getItem(`${VISITOR_STATE_PREFIX}${slug}`);
+    if (!raw) return { sentiment: null, hasFeedback: false };
+    const parsed = JSON.parse(raw);
+    return {
+      sentiment: parsed.sentiment === "LIKE" || parsed.sentiment === "DISLIKE" ? parsed.sentiment : null,
+      hasFeedback: Boolean(parsed.hasFeedback)
+    };
+  } catch {
+    return { sentiment: null, hasFeedback: false };
+  }
+}
+function writeLocalMark(slug, mark) {
+  try {
+    localStorage.setItem(
+      `${VISITOR_STATE_PREFIX}${slug}`,
+      JSON.stringify(mark)
+    );
+  } catch {
+  }
+}
+async function postMark(apiBasePath, slug, kind, body) {
+  const res = await fetch(
+    `${apiBasePath}/slug/${encodeURIComponent(slug)}/${kind}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    }
+  );
+  const json = await res.json();
+  if (!res.ok || !json.data) {
+    throw new Error(json.message || json.error || `HTTP ${res.status}`);
+  }
+  return json.data;
+}
+function BlogArticleMarks({
+  slug,
+  locale,
+  likeCount = 0,
+  dislikeCount = 0,
+  feedbackCount = 0,
+  apiBasePath = "/api/v1/blog",
+  labels,
+  className
+}) {
+  const [visitorKey, setVisitorKey] = (0, import_react.useState)(null);
+  const [counts, setCounts] = (0, import_react.useState)({
+    likeCount,
+    dislikeCount,
+    feedbackCount
+  });
+  const [sentiment, setSentiment] = (0, import_react.useState)(
+    null
+  );
+  const [hasFeedback, setHasFeedback] = (0, import_react.useState)(false);
+  const [pending, setPending] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [modal, setModal] = (0, import_react.useState)(null);
+  const [comment, setComment] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    const key = readVisitorKey();
+    setVisitorKey(key);
+    const local = readLocalMark(slug);
+    setSentiment(local.sentiment);
+    setHasFeedback(local.hasFeedback);
+  }, [slug]);
+  (0, import_react.useEffect)(() => {
+    setCounts({ likeCount, dislikeCount, feedbackCount });
+  }, [likeCount, dislikeCount, feedbackCount]);
+  const applyState = (0, import_react.useCallback)(
+    (state) => {
+      setCounts({
+        likeCount: state.likeCount,
+        dislikeCount: state.dislikeCount,
+        feedbackCount: state.feedbackCount
+      });
+      setSentiment(state.sentiment);
+      setHasFeedback(state.hasFeedback);
+      writeLocalMark(slug, {
+        sentiment: state.sentiment,
+        hasFeedback: state.hasFeedback
+      });
+    },
+    [slug]
+  );
+  const run = (0, import_react.useCallback)(
+    async (kind, body) => {
+      if (!visitorKey || pending) return;
+      setPending(true);
+      setError(null);
+      try {
+        const state = await postMark(apiBasePath, slug, kind, {
+          ...body,
+          visitorKey,
+          ...locale ? { locale } : {}
+        });
+        applyState(state);
+        setModal(null);
+        setComment("");
+      } catch {
+        setError(labels.error);
+      } finally {
+        setPending(false);
+      }
+    },
+    [apiBasePath, applyState, labels.error, locale, pending, slug, visitorKey]
+  );
+  const onLike = (0, import_react.useCallback)(() => {
+    if (sentiment === "LIKE") {
+      void run("reaction", { action: "clear" });
+      return;
+    }
+    void run("reaction", { action: "set", sentiment: "LIKE" });
+  }, [run, sentiment]);
+  const onDislikeClick = (0, import_react.useCallback)(() => {
+    if (sentiment === "DISLIKE") {
+      void run("reaction", { action: "clear" });
+      return;
+    }
+    if (hasFeedback) {
+      void run("reaction", { action: "set", sentiment: "DISLIKE" });
+      return;
+    }
+    setModal("dislike");
+  }, [hasFeedback, run, sentiment]);
+  const onSubmitModal = (0, import_react.useCallback)(() => {
+    const trimmed = comment.trim();
+    if (!trimmed) {
+      setError(labels.dislikeRequiresComment);
+      return;
+    }
+    if (modal === "dislike") {
+      void run("reaction", {
+        action: "set",
+        sentiment: "DISLIKE",
+        comment: trimmed
+      });
+      return;
+    }
+    void run("feedback", { action: "set", comment: trimmed });
+  }, [comment, labels.dislikeRequiresComment, modal, run]);
+  const rootClass = (0, import_react.useMemo)(
+    () => [
+      "mt-8 flex flex-col gap-3 border-t border-gray-200 pt-6 dark:border-gray-700",
+      className
+    ].filter(Boolean).join(" "),
+    [className]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: rootClass, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: `${BTN} ${sentiment === "LIKE" ? BTN_ACTIVE : BTN_IDLE}`,
+          disabled: pending || !visitorKey,
+          onClick: onLike,
+          "aria-pressed": sentiment === "LIKE",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: labels.like }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tabular-nums", children: counts.likeCount })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: `${BTN} ${sentiment === "DISLIKE" ? BTN_ACTIVE : BTN_IDLE}`,
+          disabled: pending || !visitorKey,
+          onClick: onDislikeClick,
+          "aria-pressed": sentiment === "DISLIKE",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: labels.dislike }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tabular-nums", children: counts.dislikeCount })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: `${BTN} ${hasFeedback ? BTN_ACTIVE : BTN_IDLE}`,
+          disabled: pending || !visitorKey,
+          onClick: () => {
+            setError(null);
+            setModal("feedback");
+          },
+          "aria-pressed": hasFeedback,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: labels.feedback }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tabular-nums", children: counts.feedbackCount })
+          ]
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", role: "alert", children: error }) : null,
+    modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-lg border border-gray-200 p-4 dark:border-gray-700", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "mb-2 block text-sm font-medium text-gray-800 dark:text-gray-200", children: modal === "dislike" ? labels.dislikeRequiresComment : labels.feedback }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "textarea",
+        {
+          className: "mb-3 w-full rounded-md border border-gray-300 bg-white p-2 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100",
+          rows: 3,
+          maxLength: 1e3,
+          value: comment,
+          placeholder: labels.feedbackPlaceholder,
+          onChange: (e) => setComment(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: `${BTN} ${BTN_ACTIVE}`,
+            disabled: pending,
+            onClick: onSubmitModal,
+            children: labels.submit
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: `${BTN} ${BTN_IDLE}`,
+            disabled: pending,
+            onClick: () => {
+              setModal(null);
+              setComment("");
+              setError(null);
+            },
+            children: labels.cancel
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BlogArticleMarks
+});
+//# sourceMappingURL=marks.cjs.map

package/dist/client/marks.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/blog-article-marks.tsx"],"sourcesContent":["'use client'\n\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport type {\n  BlogArticleMarkCounts,\n  BlogArticleMarkState,\n  BlogPostReactionSentiment,\n} from '../types.js'\n\nconst STORAGE_KEY = 'mailoo_blog_visitor_key'\nconst VISITOR_STATE_PREFIX = 'mailoo_blog_mark:'\n\nconst BTN =\n  'inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60'\nconst BTN_IDLE =\n  'border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800'\nconst BTN_ACTIVE =\n  'border-blue-600 bg-blue-50 text-blue-800 focus:ring-blue-500 dark:border-blue-400 dark:bg-blue-950 dark:text-blue-200'\n\nfunction createVisitorKey(): string {\n  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {\n    return crypto.randomUUID()\n  }\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {\n    const r = (Math.random() * 16) | 0\n    const v = c === 'x' ? r : (r & 0x3) | 0x8\n    return v.toString(16)\n  })\n}\n\nfunction readVisitorKey(): string {\n  try {\n    const existing = localStorage.getItem(STORAGE_KEY)\n    if (existing && existing.length >= 32) return existing\n    const next = createVisitorKey()\n    localStorage.setItem(STORAGE_KEY, next)\n    return next\n  } catch {\n    return createVisitorKey()\n  }\n}\n\ntype LocalMark = {\n  sentiment: BlogPostReactionSentiment | null\n  hasFeedback: boolean\n}\n\nfunction readLocalMark(slug: string): LocalMark {\n  try {\n    const raw = localStorage.getItem(`${VISITOR_STATE_PREFIX}${slug}`)\n    if (!raw) return { sentiment: null, hasFeedback: false }\n    const parsed = JSON.parse(raw) as LocalMark\n    return {\n      sentiment:\n        parsed.sentiment === 'LIKE' || parsed.sentiment === 'DISLIKE'\n          ? parsed.sentiment\n          : null,\n      hasFeedback: Boolean(parsed.hasFeedback),\n    }\n  } catch {\n    return { sentiment: null, hasFeedback: false }\n  }\n}\n\nfunction writeLocalMark(slug: string, mark: LocalMark): void {\n  try {\n    localStorage.setItem(\n      `${VISITOR_STATE_PREFIX}${slug}`,\n      JSON.stringify(mark)\n    )\n  } catch {\n    // ignore quota / private mode\n  }\n}\n\nexport type BlogArticleMarksLabels = {\n  like: string\n  dislike: string\n  feedback: string\n  feedbackPlaceholder: string\n  submit: string\n  cancel: string\n  dislikeRequiresComment: string\n  error: string\n}\n\nexport type BlogArticleMarksProps = {\n  slug: string\n  locale?: string\n  likeCount?: number\n  dislikeCount?: number\n  feedbackCount?: number\n  /** Same-origin BFF base, e.g. `/api/v1/blog` */\n  apiBasePath?: string\n  labels: BlogArticleMarksLabels\n  className?: string\n}\n\nasync function postMark(\n  apiBasePath: string,\n  slug: string,\n  kind: 'reaction' | 'feedback',\n  body: Record<string, unknown>\n): Promise<BlogArticleMarkState> {\n  const res = await fetch(\n    `${apiBasePath}/slug/${encodeURIComponent(slug)}/${kind}`,\n    {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(body),\n    }\n  )\n  const json = (await res.json()) as {\n    data?: BlogArticleMarkState\n    error?: string\n    message?: string\n  }\n  if (!res.ok || !json.data) {\n    throw new Error(json.message || json.error || `HTTP ${res.status}`)\n  }\n  return json.data\n}\n\n/**\n * Public like / dislike / feedback controls with counts.\n * POSTs to same-origin BFF (never sends API key).\n */\nexport function BlogArticleMarks({\n  slug,\n  locale,\n  likeCount = 0,\n  dislikeCount = 0,\n  feedbackCount = 0,\n  apiBasePath = '/api/v1/blog',\n  labels,\n  className,\n}: BlogArticleMarksProps) {\n  const [visitorKey, setVisitorKey] = useState<string | null>(null)\n  const [counts, setCounts] = useState<BlogArticleMarkCounts>({\n    likeCount,\n    dislikeCount,\n    feedbackCount,\n  })\n  const [sentiment, setSentiment] = useState<BlogPostReactionSentiment | null>(\n    null\n  )\n  const [hasFeedback, setHasFeedback] = useState(false)\n  const [pending, setPending] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n  const [modal, setModal] = useState<'dislike' | 'feedback' | null>(null)\n  const [comment, setComment] = useState('')\n\n  useEffect(() => {\n    const key = readVisitorKey()\n    setVisitorKey(key)\n    const local = readLocalMark(slug)\n    setSentiment(local.sentiment)\n    setHasFeedback(local.hasFeedback)\n  }, [slug])\n\n  useEffect(() => {\n    setCounts({ likeCount, dislikeCount, feedbackCount })\n  }, [likeCount, dislikeCount, feedbackCount])\n\n  const applyState = useCallback(\n    (state: BlogArticleMarkState) => {\n      setCounts({\n        likeCount: state.likeCount,\n        dislikeCount: state.dislikeCount,\n        feedbackCount: state.feedbackCount,\n      })\n      setSentiment(state.sentiment)\n      setHasFeedback(state.hasFeedback)\n      writeLocalMark(slug, {\n        sentiment: state.sentiment,\n        hasFeedback: state.hasFeedback,\n      })\n    },\n    [slug]\n  )\n\n  const run = useCallback(\n    async (kind: 'reaction' | 'feedback', body: Record<string, unknown>) => {\n      if (!visitorKey || pending) return\n      setPending(true)\n      setError(null)\n      try {\n        const state = await postMark(apiBasePath, slug, kind, {\n          ...body,\n          visitorKey,\n          ...(locale ? { locale } : {}),\n        })\n        applyState(state)\n        setModal(null)\n        setComment('')\n      } catch {\n        setError(labels.error)\n      } finally {\n        setPending(false)\n      }\n    },\n    [apiBasePath, applyState, labels.error, locale, pending, slug, visitorKey]\n  )\n\n  const onLike = useCallback(() => {\n    if (sentiment === 'LIKE') {\n      void run('reaction', { action: 'clear' })\n      return\n    }\n    void run('reaction', { action: 'set', sentiment: 'LIKE' })\n  }, [run, sentiment])\n\n  const onDislikeClick = useCallback(() => {\n    if (sentiment === 'DISLIKE') {\n      void run('reaction', { action: 'clear' })\n      return\n    }\n    if (hasFeedback) {\n      void run('reaction', { action: 'set', sentiment: 'DISLIKE' })\n      return\n    }\n    setModal('dislike')\n  }, [hasFeedback, run, sentiment])\n\n  const onSubmitModal = useCallback(() => {\n    const trimmed = comment.trim()\n    if (!trimmed) {\n      setError(labels.dislikeRequiresComment)\n      return\n    }\n    if (modal === 'dislike') {\n      void run('reaction', {\n        action: 'set',\n        sentiment: 'DISLIKE',\n        comment: trimmed,\n      })\n      return\n    }\n    void run('feedback', { action: 'set', comment: trimmed })\n  }, [comment, labels.dislikeRequiresComment, modal, run])\n\n  const rootClass = useMemo(\n    () =>\n      [\n        'mt-8 flex flex-col gap-3 border-t border-gray-200 pt-6 dark:border-gray-700',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' '),\n    [className]\n  )\n\n  return (\n    <div className={rootClass}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <button\n          type=\"button\"\n          className={`${BTN} ${sentiment === 'LIKE' ? BTN_ACTIVE : BTN_IDLE}`}\n          disabled={pending || !visitorKey}\n          onClick={onLike}\n          aria-pressed={sentiment === 'LIKE'}\n        >\n          <span>{labels.like}</span>\n          <span className=\"tabular-nums\">{counts.likeCount}</span>\n        </button>\n        <button\n          type=\"button\"\n          className={`${BTN} ${sentiment === 'DISLIKE' ? BTN_ACTIVE : BTN_IDLE}`}\n          disabled={pending || !visitorKey}\n          onClick={onDislikeClick}\n          aria-pressed={sentiment === 'DISLIKE'}\n        >\n          <span>{labels.dislike}</span>\n          <span className=\"tabular-nums\">{counts.dislikeCount}</span>\n        </button>\n        <button\n          type=\"button\"\n          className={`${BTN} ${hasFeedback ? BTN_ACTIVE : BTN_IDLE}`}\n          disabled={pending || !visitorKey}\n          onClick={() => {\n            setError(null)\n            setModal('feedback')\n          }}\n          aria-pressed={hasFeedback}\n        >\n          <span>{labels.feedback}</span>\n          <span className=\"tabular-nums\">{counts.feedbackCount}</span>\n        </button>\n      </div>\n\n      {error ? (\n        <p className=\"text-sm text-red-600 dark:text-red-400\" role=\"alert\">\n          {error}\n        </p>\n      ) : null}\n\n      {modal ? (\n        <div className=\"rounded-lg border border-gray-200 p-4 dark:border-gray-700\">\n          <label className=\"mb-2 block text-sm font-medium text-gray-800 dark:text-gray-200\">\n            {modal === 'dislike'\n              ? labels.dislikeRequiresComment\n              : labels.feedback}\n          </label>\n          <textarea\n            className=\"mb-3 w-full rounded-md border border-gray-300 bg-white p-2 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100\"\n            rows={3}\n            maxLength={1000}\n            value={comment}\n            placeholder={labels.feedbackPlaceholder}\n            onChange={(e) => setComment(e.target.value)}\n          />\n          <div className=\"flex gap-2\">\n            <button\n              type=\"button\"\n              className={`${BTN} ${BTN_ACTIVE}`}\n              disabled={pending}\n              onClick={onSubmitModal}\n            >\n              {labels.submit}\n            </button>\n            <button\n              type=\"button\"\n              className={`${BTN} ${BTN_IDLE}`}\n              disabled={pending}\n              onClick={() => {\n                setModal(null)\n                setComment('')\n                setError(null)\n              }}\n            >\n              {labels.cancel}\n            </button>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/client/marks.d.cts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+
+type BlogArticleMarksLabels = {
+    like: string;
+    dislike: string;
+    feedback: string;
+    feedbackPlaceholder: string;
+    submit: string;
+    cancel: string;
+    dislikeRequiresComment: string;
+    error: string;
+};
+type BlogArticleMarksProps = {
+    slug: string;
+    locale?: string;
+    likeCount?: number;
+    dislikeCount?: number;
+    feedbackCount?: number;
+    /** Same-origin BFF base, e.g. `/api/v1/blog` */
+    apiBasePath?: string;
+    labels: BlogArticleMarksLabels;
+    className?: string;
+};
+/**
+ * Public like / dislike / feedback controls with counts.
+ * POSTs to same-origin BFF (never sends API key).
+ */
+declare function BlogArticleMarks({ slug, locale, likeCount, dislikeCount, feedbackCount, apiBasePath, labels, className, }: BlogArticleMarksProps): react.JSX.Element;
+
+export { BlogArticleMarks, type BlogArticleMarksLabels, type BlogArticleMarksProps };

package/dist/client/marks.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+
+type BlogArticleMarksLabels = {
+    like: string;
+    dislike: string;
+    feedback: string;
+    feedbackPlaceholder: string;
+    submit: string;
+    cancel: string;
+    dislikeRequiresComment: string;
+    error: string;
+};
+type BlogArticleMarksProps = {
+    slug: string;
+    locale?: string;
+    likeCount?: number;
+    dislikeCount?: number;
+    feedbackCount?: number;
+    /** Same-origin BFF base, e.g. `/api/v1/blog` */
+    apiBasePath?: string;
+    labels: BlogArticleMarksLabels;
+    className?: string;
+};
+/**
+ * Public like / dislike / feedback controls with counts.
+ * POSTs to same-origin BFF (never sends API key).
+ */
+declare function BlogArticleMarks({ slug, locale, likeCount, dislikeCount, feedbackCount, apiBasePath, labels, className, }: BlogArticleMarksProps): react.JSX.Element;
+
+export { BlogArticleMarks, type BlogArticleMarksLabels, type BlogArticleMarksProps };

package/dist/client/marks.js

@@ -0,0 +1,276 @@
+"use client";
+
+// src/components/blog-article-marks.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STORAGE_KEY = "mailoo_blog_visitor_key";
+var VISITOR_STATE_PREFIX = "mailoo_blog_mark:";
+var BTN = "inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60";
+var BTN_IDLE = "border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800";
+var BTN_ACTIVE = "border-blue-600 bg-blue-50 text-blue-800 focus:ring-blue-500 dark:border-blue-400 dark:bg-blue-950 dark:text-blue-200";
+function createVisitorKey() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function readVisitorKey() {
+  try {
+    const existing = localStorage.getItem(STORAGE_KEY);
+    if (existing && existing.length >= 32) return existing;
+    const next = createVisitorKey();
+    localStorage.setItem(STORAGE_KEY, next);
+    return next;
+  } catch {
+    return createVisitorKey();
+  }
+}
+function readLocalMark(slug) {
+  try {
+    const raw = localStorage.getItem(`${VISITOR_STATE_PREFIX}${slug}`);
+    if (!raw) return { sentiment: null, hasFeedback: false };
+    const parsed = JSON.parse(raw);
+    return {
+      sentiment: parsed.sentiment === "LIKE" || parsed.sentiment === "DISLIKE" ? parsed.sentiment : null,
+      hasFeedback: Boolean(parsed.hasFeedback)
+    };
+  } catch {
+    return { sentiment: null, hasFeedback: false };
+  }
+}
+function writeLocalMark(slug, mark) {
+  try {
+    localStorage.setItem(
+      `${VISITOR_STATE_PREFIX}${slug}`,
+      JSON.stringify(mark)
+    );
+  } catch {
+  }
+}
+async function postMark(apiBasePath, slug, kind, body) {
+  const res = await fetch(
+    `${apiBasePath}/slug/${encodeURIComponent(slug)}/${kind}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    }
+  );
+  const json = await res.json();
+  if (!res.ok || !json.data) {
+    throw new Error(json.message || json.error || `HTTP ${res.status}`);
+  }
+  return json.data;
+}
+function BlogArticleMarks({
+  slug,
+  locale,
+  likeCount = 0,
+  dislikeCount = 0,
+  feedbackCount = 0,
+  apiBasePath = "/api/v1/blog",
+  labels,
+  className
+}) {
+  const [visitorKey, setVisitorKey] = useState(null);
+  const [counts, setCounts] = useState({
+    likeCount,
+    dislikeCount,
+    feedbackCount
+  });
+  const [sentiment, setSentiment] = useState(
+    null
+  );
+  const [hasFeedback, setHasFeedback] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState(null);
+  const [modal, setModal] = useState(null);
+  const [comment, setComment] = useState("");
+  useEffect(() => {
+    const key = readVisitorKey();
+    setVisitorKey(key);
+    const local = readLocalMark(slug);
+    setSentiment(local.sentiment);
+    setHasFeedback(local.hasFeedback);
+  }, [slug]);
+  useEffect(() => {
+    setCounts({ likeCount, dislikeCount, feedbackCount });
+  }, [likeCount, dislikeCount, feedbackCount]);
+  const applyState = useCallback(
+    (state) => {
+      setCounts({
+        likeCount: state.likeCount,
+        dislikeCount: state.dislikeCount,
+        feedbackCount: state.feedbackCount
+      });
+      setSentiment(state.sentiment);
+      setHasFeedback(state.hasFeedback);
+      writeLocalMark(slug, {
+        sentiment: state.sentiment,
+        hasFeedback: state.hasFeedback
+      });
+    },
+    [slug]
+  );
+  const run = useCallback(
+    async (kind, body) => {
+      if (!visitorKey || pending) return;
+      setPending(true);
+      setError(null);
+      try {
+        const state = await postMark(apiBasePath, slug, kind, {
+          ...body,
+          visitorKey,
+          ...locale ? { locale } : {}
+        });
+        applyState(state);
+        setModal(null);
+        setComment("");
+      } catch {
+        setError(labels.error);
+      } finally {
+        setPending(false);
+      }
+    },
+    [apiBasePath, applyState, labels.error, locale, pending, slug, visitorKey]
+  );
+  const onLike = useCallback(() => {
+    if (sentiment === "LIKE") {
+      void run("reaction", { action: "clear" });
+      return;
+    }
+    void run("reaction", { action: "set", sentiment: "LIKE" });
+  }, [run, sentiment]);
+  const onDislikeClick = useCallback(() => {
+    if (sentiment === "DISLIKE") {
+      void run("reaction", { action: "clear" });
+      return;
+    }
+    if (hasFeedback) {
+      void run("reaction", { action: "set", sentiment: "DISLIKE" });
+      return;
+    }
+    setModal("dislike");
+  }, [hasFeedback, run, sentiment]);
+  const onSubmitModal = useCallback(() => {
+    const trimmed = comment.trim();
+    if (!trimmed) {
+      setError(labels.dislikeRequiresComment);
+      return;
+    }
+    if (modal === "dislike") {
+      void run("reaction", {
+        action: "set",
+        sentiment: "DISLIKE",
+        comment: trimmed
+      });
+      return;
+    }
+    void run("feedback", { action: "set", comment: trimmed });
+  }, [comment, labels.dislikeRequiresComment, modal, run]);
+  const rootClass = useMemo(
+    () => [
+      "mt-8 flex flex-col gap-3 border-t border-gray-200 pt-6 dark:border-gray-700",
+      className
+    ].filter(Boolean).join(" "),
+    [className]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `${BTN} ${sentiment === "LIKE" ? BTN_ACTIVE : BTN_IDLE}`,
+          disabled: pending || !visitorKey,
+          onClick: onLike,
+          "aria-pressed": sentiment === "LIKE",
+          children: [
+            /* @__PURE__ */ jsx("span", { children: labels.like }),
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: counts.likeCount })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `${BTN} ${sentiment === "DISLIKE" ? BTN_ACTIVE : BTN_IDLE}`,
+          disabled: pending || !visitorKey,
+          onClick: onDislikeClick,
+          "aria-pressed": sentiment === "DISLIKE",
+          children: [
+            /* @__PURE__ */ jsx("span", { children: labels.dislike }),
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: counts.dislikeCount })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `${BTN} ${hasFeedback ? BTN_ACTIVE : BTN_IDLE}`,
+          disabled: pending || !visitorKey,
+          onClick: () => {
+            setError(null);
+            setModal("feedback");
+          },
+          "aria-pressed": hasFeedback,
+          children: [
+            /* @__PURE__ */ jsx("span", { children: labels.feedback }),
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: counts.feedbackCount })
+          ]
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400", role: "alert", children: error }) : null,
+    modal ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-gray-200 p-4 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx("label", { className: "mb-2 block text-sm font-medium text-gray-800 dark:text-gray-200", children: modal === "dislike" ? labels.dislikeRequiresComment : labels.feedback }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: "mb-3 w-full rounded-md border border-gray-300 bg-white p-2 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100",
+          rows: 3,
+          maxLength: 1e3,
+          value: comment,
+          placeholder: labels.feedbackPlaceholder,
+          onChange: (e) => setComment(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${BTN} ${BTN_ACTIVE}`,
+            disabled: pending,
+            onClick: onSubmitModal,
+            children: labels.submit
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `${BTN} ${BTN_IDLE}`,
+            disabled: pending,
+            onClick: () => {
+              setModal(null);
+              setComment("");
+              setError(null);
+            },
+            children: labels.cancel
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+}
+export {
+  BlogArticleMarks
+};
+//# sourceMappingURL=marks.js.map