@consilioweb/payload-support 0.5.2 → 0.6.0

package/dist/components/TicketConversation/components/CodeBlockInserter.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+
+const LANGUAGES = [
+  { value: "javascript", label: "JavaScript" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "php", label: "PHP" },
+  { value: "python", label: "Python" },
+  { value: "html", label: "HTML" },
+  { value: "css", label: "CSS" },
+  { value: "scss", label: "SCSS" },
+  { value: "json", label: "JSON" },
+  { value: "sql", label: "SQL" },
+  { value: "bash", label: "Bash" },
+  { value: "yaml", label: "YAML" },
+  { value: "xml", label: "XML" },
+  { value: "markdown", label: "Markdown" },
+  { value: "diff", label: "Diff" },
+  { value: "go", label: "Go" },
+  { value: "rust", label: "Rust" },
+  { value: "java", label: "Java" },
+  { value: "ruby", label: "Ruby" },
+  { value: "swift", label: "Swift" },
+  { value: "docker", label: "Dockerfile" },
+  { value: "nginx", label: "Nginx" },
+  { value: "env", label: ".env" }
+];
+function CodeBlockInserter({ onInsert, className, style }) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+  const dropdownRef = useRef(null);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (open && inputRef.current) inputRef.current.focus();
+  }, [open]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setOpen(false);
+        setFilter("");
+      }
+    };
+    if (open) document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  const filtered = filter ? LANGUAGES.filter((l) => l.label.toLowerCase().includes(filter.toLowerCase()) || l.value.includes(filter.toLowerCase())) : LANGUAGES;
+  const handleSelect = (lang) => {
+    onInsert(`
+\`\`\`${lang}
+
+\`\`\`
+`);
+    setOpen(false);
+    setFilter("");
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setOpen(!open),
+        className,
+        style: {
+          fontSize: 11,
+          fontWeight: 700,
+          padding: "4px 10px",
+          width: "auto",
+          cursor: "pointer",
+          ...style
+        },
+        type: "button",
+        "aria-label": "Ins\xE9rer un bloc de code",
+        "data-tooltip": "Bloc de code",
+        children: "</> Code"
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { style: {
+      position: "absolute",
+      bottom: "100%",
+      left: 0,
+      marginBottom: 4,
+      width: 200,
+      maxHeight: 280,
+      backgroundColor: "#1e293b",
+      border: "1px solid #334155",
+      borderRadius: 8,
+      boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
+      zIndex: 1e3,
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column"
+    }, children: [
+      /* @__PURE__ */ jsx("div", { style: { padding: "8px 8px 4px" }, children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: filter,
+          onChange: (e) => setFilter(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Escape") {
+              setOpen(false);
+              setFilter("");
+            }
+            if (e.key === "Enter" && filtered.length > 0) handleSelect(filtered[0].value);
+          },
+          placeholder: "Rechercher...",
+          style: {
+            width: "100%",
+            padding: "6px 10px",
+            fontSize: 12,
+            backgroundColor: "#0f172a",
+            border: "1px solid #334155",
+            borderRadius: 6,
+            color: "#e2e8f0",
+            outline: "none",
+            boxSizing: "border-box"
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { style: { overflowY: "auto", maxHeight: 230, padding: "4px 0" }, children: [
+        filtered.map((lang) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleSelect(lang.value),
+            style: {
+              display: "block",
+              width: "100%",
+              padding: "6px 12px",
+              fontSize: 12,
+              fontWeight: 500,
+              color: "#e2e8f0",
+              backgroundColor: "transparent",
+              border: "none",
+              cursor: "pointer",
+              textAlign: "left"
+            },
+            onMouseEnter: (e) => {
+              e.target.style.backgroundColor = "#334155";
+            },
+            onMouseLeave: (e) => {
+              e.target.style.backgroundColor = "transparent";
+            },
+            type: "button",
+            children: lang.label
+          },
+          lang.value
+        )),
+        filtered.length === 0 && /* @__PURE__ */ jsx("div", { style: { padding: "12px", fontSize: 12, color: "#64748b", textAlign: "center" }, children: "Aucun langage trouv\xE9" })
+      ] })
+    ] })
+  ] });
+}
+
+export { CodeBlockInserter };

package/dist/components/TicketConversation/components/QuickActions.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { s, C } from '../constants';
+
+function QuickActions({
+  statusTransitions,
+  statusUpdating,
+  onStatusChange,
+  snoozeUntil,
+  snoozeSaving,
+  onCancelSnooze,
+  showMerge: _showMerge,
+  showExtMsg: _showExtMsg,
+  showSnooze: _showSnooze,
+  onToggleMerge,
+  onToggleExtMsg,
+  onToggleSnooze,
+  onNextTicket,
+  showNextTicket,
+  nextTicketId,
+  nextTicketInfo,
+  onCloseNextTicket
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap", marginBottom: "16px", alignItems: "center" }, children: [
+      statusTransitions.map((a) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onStatusChange(a.status),
+          disabled: statusUpdating,
+          style: s.outlineBtn(a.color, statusUpdating),
+          children: a.label
+        },
+        a.status
+      )),
+      snoozeUntil && new Date(snoozeUntil) > /* @__PURE__ */ new Date() && /* @__PURE__ */ jsx("button", { onClick: onCancelSnooze, disabled: snoozeSaving, style: { ...s.ghostBtn("#7c3aed", snoozeSaving), fontSize: "12px", padding: "5px 10px" }, children: "Annuler snooze" }),
+      /* @__PURE__ */ jsx("span", { style: { borderLeft: `1px solid ${C.border}`, height: "20px", margin: "0 4px" } }),
+      /* @__PURE__ */ jsx("button", { onClick: onToggleMerge, style: s.ghostBtn("#be185d"), children: "Fusionner" }),
+      /* @__PURE__ */ jsx("button", { onClick: onToggleExtMsg, style: s.ghostBtn("#4f46e5"), children: "+ Message re\xE7u" }),
+      /* @__PURE__ */ jsx("button", { onClick: onToggleSnooze, style: s.ghostBtn("#7c3aed"), children: "Snooze" }),
+      /* @__PURE__ */ jsx("button", { onClick: onNextTicket, style: s.ghostBtn("#16a34a"), children: "Ticket suivant" })
+    ] }),
+    showNextTicket && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 14px", borderRadius: "8px", backgroundColor: "#f0fdf4", border: `1px solid ${C.border}`, marginBottom: "14px", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      nextTicketId ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: "13px", color: "#166534", fontWeight: 600 }, children: [
+          "Ticket suivant : ",
+          /* @__PURE__ */ jsx("strong", { children: nextTicketInfo })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              window.location.href = `/admin/support/ticket?id=${nextTicketId}`;
+            },
+            style: { ...s.btn(C.statusResolved), color: C.white, fontSize: "12px", padding: "5px 14px" },
+            children: "Ouvrir"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "#166534", fontWeight: 700 }, children: nextTicketInfo }),
+      /* @__PURE__ */ jsx("button", { onClick: onCloseNextTicket, style: { border: "none", background: "none", color: C.textMuted, cursor: "pointer", fontSize: "16px", fontWeight: 700, marginLeft: "8px" }, children: "\xD7" })
+    ] })
+  ] });
+}
+
+export { QuickActions };

package/dist/components/TicketConversation/components/TicketHeader.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { C, statusLabels, s } from '../constants';
+
+const sourceLabels = {
+  email: "Email",
+  "live-chat": "Live Chat",
+  portal: "Portail",
+  admin: "Admin"
+};
+function TicketHeader({
+  ticketNumber,
+  currentStatus,
+  clientSentiment,
+  ticketSource,
+  chatSession,
+  snoozeUntil,
+  satisfaction,
+  copiedLink,
+  onCopyLink
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: "10px 14px",
+    borderRadius: "8px",
+    backgroundColor: "var(--theme-elevation-100)",
+    marginBottom: "12px",
+    flexWrap: "wrap"
+  }, children: [
+    ticketNumber && /* @__PURE__ */ jsx("span", { style: { fontFamily: "'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace", fontWeight: 700, fontSize: "14px", color: C.textPrimary }, children: ticketNumber }),
+    currentStatus && (() => {
+      const st = statusLabels[currentStatus] || statusLabels.open;
+      return /* @__PURE__ */ jsx("span", { style: s.badge(st.bg, st.color), children: st.label });
+    })(),
+    clientSentiment && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        style: { ...s.badge(`${clientSentiment.color}15`, clientSentiment.color), fontSize: "11px" },
+        title: `Sentiment : ${clientSentiment.label}`,
+        children: [
+          clientSentiment.emoji,
+          " ",
+          clientSentiment.label
+        ]
+      }
+    ),
+    ticketSource && ticketSource !== "portal" && /* @__PURE__ */ jsx("span", { style: s.badge("#f1f5f9", "#475569"), children: sourceLabels[ticketSource] || ticketSource }),
+    chatSession && ticketSource === "live-chat" && /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", color: C.textMuted }, children: [
+      "Session : ",
+      chatSession.slice(0, 16),
+      "..."
+    ] }),
+    snoozeUntil && new Date(snoozeUntil) > /* @__PURE__ */ new Date() && /* @__PURE__ */ jsxs("span", { style: s.badge("#f5f3ff", "#7c3aed"), children: [
+      "Snooz\xE9 ",
+      new Date(snoozeUntil).toLocaleDateString("fr-FR", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" })
+    ] }),
+    satisfaction && /* @__PURE__ */ jsxs("span", { style: s.badge(
+      satisfaction.rating >= 4 ? "#dcfce7" : satisfaction.rating >= 3 ? "#fef9c3" : "#fee2e2",
+      satisfaction.rating >= 4 ? "#166534" : satisfaction.rating >= 3 ? "#854d0e" : "#991b1b"
+    ), children: [
+      Array.from({ length: 5 }, (_, i) => i < satisfaction.rating ? "\u2605" : "\u2606").join(""),
+      " ",
+      satisfaction.rating,
+      "/5"
+    ] }),
+    /* @__PURE__ */ jsxs("span", { style: { marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: "4px" }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onCopyLink("admin"),
+          title: "Copier le lien admin",
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "13px", opacity: copiedLink === "admin" ? 1 : 0.5, padding: "2px 4px" },
+          children: copiedLink === "admin" ? "\u2705" : "\u{1F4CB}"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onCopyLink("client"),
+          title: "Copier le lien client",
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "13px", opacity: copiedLink === "client" ? 1 : 0.5, padding: "2px 4px" },
+          children: copiedLink === "client" ? "\u2705" : "\u{1F517}"
+        }
+      ),
+      copiedLink && /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: "#16a34a", fontWeight: 600 }, children: "Copi\xE9" })
+    ] })
+  ] });
+}
+
+export { TicketHeader };

package/dist/components/TicketConversation/components/TimeTrackingPanel.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { s, C } from '../constants';
+
+function TimeTrackingPanel({
+  timeEntries,
+  totalMinutes,
+  timerRunning,
+  timerSeconds,
+  setTimerSeconds,
+  timerDescription,
+  setTimerDescription,
+  handleTimerStart,
+  handleTimerStop,
+  handleTimerSave,
+  handleTimerDiscard,
+  duration,
+  setDuration,
+  timeDescription,
+  setTimeDescription,
+  handleAddTime,
+  addingTime,
+  timeSuccess
+}) {
+  const totalH = Math.floor(totalMinutes / 60);
+  const totalM = totalMinutes % 60;
+  return /* @__PURE__ */ jsxs("div", { style: s.section, children: [
+    /* @__PURE__ */ jsxs("h4", { style: s.sectionTitle, children: [
+      "Temps",
+      totalMinutes > 0 && /* @__PURE__ */ jsxs("span", { style: s.badge("#fef3c7", "#92400e"), children: [
+        totalH,
+        "h",
+        String(totalM).padStart(2, "0"),
+        " total"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      flexWrap: "wrap",
+      padding: "12px 16px",
+      borderRadius: "10px",
+      marginBottom: "14px",
+      backgroundColor: timerRunning ? "#fef2f2" : "var(--theme-elevation-100)",
+      border: timerRunning ? "1px solid #fca5a5" : "1px solid var(--theme-elevation-300)"
+    }, children: [
+      /* @__PURE__ */ jsxs("div", { style: {
+        fontFamily: "monospace",
+        fontSize: "24px",
+        fontWeight: 700,
+        color: timerRunning ? "#dc2626" : "var(--theme-text)",
+        minWidth: "90px"
+      }, children: [
+        String(Math.floor(timerSeconds / 3600)).padStart(2, "0"),
+        ":",
+        String(Math.floor(timerSeconds % 3600 / 60)).padStart(2, "0"),
+        ":",
+        String(timerSeconds % 60).padStart(2, "0")
+      ] }),
+      !timerRunning && timerSeconds > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [-5, -1, 1, 5, 15, 30].map((m) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setTimerSeconds((p) => Math.max(0, p + m * 60)),
+          style: { width: Math.abs(m) >= 15 ? "32px" : "28px", height: "28px", borderRadius: "6px", border: "1px solid #e2e8f0", background: "white", cursor: "pointer", fontSize: Math.abs(m) >= 15 ? "12px" : "14px", fontWeight: 700, color: "#64748b" },
+          title: `${m > 0 ? "+" : ""}${m} min`,
+          children: m > 0 ? `+${m}` : String(m)
+        },
+        m
+      )) }),
+      !timerRunning && timerSeconds === 0 && /* @__PURE__ */ jsx("button", { onClick: () => handleTimerStart(true), style: { ...s.btn("#dc2626", false), fontSize: "12px", padding: "6px 16px", display: "flex", alignItems: "center", gap: "6px" }, children: "\u25B6 D\xE9marrer" }),
+      timerRunning && /* @__PURE__ */ jsx("button", { onClick: handleTimerStop, style: { ...s.btn("#374151", false), fontSize: "12px", padding: "6px 16px", display: "flex", alignItems: "center", gap: "6px" }, children: "\u23F8 Pause" }),
+      !timerRunning && timerSeconds > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("button", { onClick: () => handleTimerStart(false), style: { ...s.btn("#dc2626", false), fontSize: "12px", padding: "6px 14px" }, children: "\u25B6 Reprendre" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: timerDescription,
+            onChange: (e) => setTimerDescription(e.target.value),
+            placeholder: "Description...",
+            style: { ...s.input, fontSize: "12px", flex: 1, minWidth: "120px" }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleTimerSave,
+            disabled: addingTime || timerSeconds < 60,
+            style: { ...s.btn("#16a34a", addingTime || timerSeconds < 60), fontSize: "12px", padding: "6px 14px" },
+            title: timerSeconds < 60 ? "Minimum 1 minute" : `Sauvegarder ${Math.round(timerSeconds / 60)} min`,
+            children: [
+              "\u{1F4BE} ",
+              Math.round(timerSeconds / 60),
+              " min"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { onClick: handleTimerDiscard, style: { background: "none", border: "none", cursor: "pointer", fontSize: "14px", color: "#94a3b8", padding: "4px" }, title: "Annuler", children: "\u2715" })
+      ] }),
+      timerRunning && /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: "#dc2626", fontWeight: 600 }, children: "\u25CF Enregistrement en cours \u2014 session maintenue active" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "flex-end", flexWrap: "wrap", marginBottom: "14px" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "11px", color: C.textSecondary, marginBottom: "3px", fontWeight: 600 }, children: "Min" }),
+        /* @__PURE__ */ jsx("input", { type: "number", min: "1", value: duration, onChange: (e) => setDuration(e.target.value), placeholder: "30", style: { ...s.input, width: "80px" } })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "11px", color: C.textSecondary, marginBottom: "3px", fontWeight: 600 }, children: "Description" }),
+        /* @__PURE__ */ jsx("input", { type: "text", value: timeDescription, onChange: (e) => setTimeDescription(e.target.value), placeholder: "Travail effectu\xE9...", style: { ...s.input, width: "100%" } })
+      ] }),
+      /* @__PURE__ */ jsx("button", { onClick: handleAddTime, disabled: addingTime || !duration, style: s.btn(C.amber, addingTime || !duration), children: addingTime ? "..." : "+ Temps" }),
+      timeSuccess && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#16a34a", fontWeight: 600 }, children: timeSuccess })
+    ] }),
+    timeEntries.length > 0 && /* @__PURE__ */ jsx("div", { style: { fontSize: "12px" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${C.border}` }, children: [
+        /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "6px 8px", fontWeight: 600, fontSize: "11px", color: C.textSecondary }, children: "Date" }),
+        /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "6px 8px", fontWeight: 600, fontSize: "11px", color: C.textSecondary }, children: "Dur\xE9e" }),
+        /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "6px 8px", fontWeight: 600, fontSize: "11px", color: C.textSecondary }, children: "Description" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: timeEntries.map((entry) => /* @__PURE__ */ jsxs("tr", { style: { borderBottom: "1px solid #f1f5f9" }, children: [
+        /* @__PURE__ */ jsx("td", { style: { padding: "6px 8px", color: "#374151" }, children: new Date(entry.date).toLocaleDateString("fr-FR", { day: "numeric", month: "short" }) }),
+        /* @__PURE__ */ jsxs("td", { style: { padding: "6px 8px", fontWeight: 600, color: "#374151" }, children: [
+          entry.duration,
+          " min"
+        ] }),
+        /* @__PURE__ */ jsx("td", { style: { padding: "6px 8px", color: C.textSecondary }, children: entry.description || "\u2014" })
+      ] }, entry.id)) })
+    ] }) })
+  ] });
+}
+
+export { TimeTrackingPanel };

package/dist/components/TicketConversation/config.js

@@ -0,0 +1,41 @@
+"use client";
+const DEFAULT_FEATURES = {
+  timeTracking: true,
+  ai: true,
+  satisfaction: true,
+  chat: true,
+  emailTracking: true,
+  canned: true,
+  merge: true,
+  snooze: true,
+  externalMessages: true,
+  clientHistory: true,
+  activityLog: true,
+  splitTicket: true,
+  scheduledReplies: true,
+  autoClose: true,
+  autoCloseDays: 7,
+  roundRobin: false
+};
+const STORAGE_KEY = "ticketing_features";
+function getFeatures() {
+  if (typeof window === "undefined") return DEFAULT_FEATURES;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return { ...DEFAULT_FEATURES, ...parsed };
+    }
+  } catch {
+  }
+  return DEFAULT_FEATURES;
+}
+function saveFeatures(features) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(features));
+  } catch {
+  }
+}
+
+export { DEFAULT_FEATURES, getFeatures, saveFeatures };

package/dist/components/TicketConversation/constants.js

@@ -0,0 +1,96 @@
+"use client";
+const statusLabels = {
+  open: { label: "Ouvert", bg: "#dbeafe", color: "#1e40af" },
+  waiting_client: { label: "Attente", bg: "#fef3c7", color: "#92400e" },
+  resolved: { label: "R\xE9solu", bg: "#dcfce7", color: "#166534" }
+};
+const projectStatusLabels = {
+  active: { label: "Actif", bg: "#dcfce7", color: "#166534" },
+  paused: { label: "En pause", bg: "#fef3c7", color: "#92400e" },
+  completed: { label: "Termin\xE9", bg: "#e5e7eb", color: "#374151" }
+};
+const C = {
+  blue: "#2563eb",
+  amber: "#d97706",
+  orange: "#ea580c",
+  black: "var(--theme-text)",
+  white: "#fff",
+  bg: "#fafafa",
+  textPrimary: "var(--theme-text)",
+  textSecondary: "#6b7280",
+  textMuted: "#9ca3af",
+  border: "#e2e8f0",
+  statusOpen: "#2563eb",
+  statusProgress: "#ea580c",
+  statusWaiting: "#d97706",
+  statusResolved: "#16a34a",
+  statusClosed: "#6b7280",
+  adminBg: "#f8fafc",
+  adminBorder: "#2563eb",
+  clientBg: "#fafafa",
+  clientBorder: "#e2e8f0",
+  emailBg: "#fffbeb",
+  emailBorder: "#ea580c",
+  internalBg: "#fefce8",
+  internalBorder: "#d97706"
+};
+const s = {
+  section: { borderTop: `1px solid ${C.border}`, paddingTop: "18px", marginTop: "20px" },
+  sectionTitle: { fontSize: "14px", fontWeight: 600, marginBottom: "12px", display: "flex", alignItems: "center", gap: "8px" },
+  btn: (bg, disabled) => {
+    const hex = bg.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16) || 0;
+    const g = parseInt(hex.substring(2, 4), 16) || 0;
+    const b = parseInt(hex.substring(4, 6), 16) || 0;
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    const textColor = luminance > 0.6 ? "#374151" : C.white;
+    return {
+      padding: "7px 14px",
+      borderRadius: "6px",
+      border: `1px solid ${C.border}`,
+      backgroundColor: bg,
+      color: textColor,
+      fontWeight: 600,
+      fontSize: "13px",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.5 : 1,
+      whiteSpace: "nowrap"
+    };
+  },
+  ghostBtn: (color, disabled) => ({
+    padding: "7px 14px",
+    borderRadius: "6px",
+    border: `1px solid ${C.border}`,
+    backgroundColor: "transparent",
+    color,
+    fontWeight: 600,
+    fontSize: "13px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    whiteSpace: "nowrap"
+  }),
+  outlineBtn: (color, disabled) => ({
+    padding: "7px 14px",
+    borderRadius: "6px",
+    border: `1px solid ${color}`,
+    backgroundColor: "transparent",
+    color,
+    fontWeight: 600,
+    fontSize: "13px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    whiteSpace: "nowrap"
+  }),
+  input: { padding: "8px 12px", borderRadius: "6px", border: `1px solid ${C.border}`, fontSize: "14px", color: "#374151", backgroundColor: C.white },
+  badge: (bg, color) => ({
+    display: "inline-block",
+    padding: "2px 8px",
+    borderRadius: "4px",
+    fontSize: "11px",
+    fontWeight: 600,
+    backgroundColor: bg,
+    color
+  })
+};
+
+export { C, projectStatusLabels, s, statusLabels };

package/dist/components/TicketConversation/context.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+const TicketContext = createContext(null);
+function useTicketContext() {
+  const ctx = useContext(TicketContext);
+  if (!ctx) throw new Error("useTicketContext must be used within TicketContext.Provider");
+  return ctx;
+}
+
+export { TicketContext, useTicketContext };