@consilioweb/payload-support 4.0.0 → 6.0.0

package/dist/views/TicketDetailView/client.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useRef, useState, useEffect, useCallback } from 'react';
+import React, { useRef, useId, useState, useEffect, useCallback } from 'react';
 import { useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { RichTextEditor } from '../../components/RichTextEditor/index.js';
@@ -25,6 +25,11 @@ const TicketDetailClient = () => {
   const threadEndRef = useRef(null);
   const dropdownRef = useRef(null);
   const fileInputRef = useRef(null);
+  const manualTimeId = useId();
+  const billingTypeId = useId();
+  const flatAmountId = useId();
+  const billedAmountId = useId();
+  const paymentStatusId = useId();
   const [ticket, setTicket] = useState(null);
   const [messages, setMessages] = useState([]);
   const [client, setClient] = useState(null);
@@ -755,7 +760,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                   Array.isArray(msg.attachments) && msg.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: s.attachments, children: msg.attachments.map((att, i) => {
                     const file = typeof att.file === "object" ? att.file : null;
                     if (!file) return null;
-                    return (file.mimeType || "").startsWith("image/") ? /* @__PURE__ */ jsx("a", { href: file.url || "#", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx("img", { src: file.url || "", alt: "", className: s.attachmentImg }) }, i) : /* @__PURE__ */ jsxs("a", { href: file.url || "#", target: "_blank", rel: "noopener noreferrer", className: s.attachmentFile, children: [
+                    return (file.mimeType || "").startsWith("image/") ? /* @__PURE__ */ jsx("a", { href: file.url || "#", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx("img", { src: file.url || "", alt: file.filename || t("detail.file"), className: s.attachmentImg }) }, i) : /* @__PURE__ */ jsxs("a", { href: file.url || "#", target: "_blank", rel: "noopener noreferrer", className: s.attachmentFile, children: [
                       "PJ ",
                       file.filename || "Fichier"
                     ] }, i);
@@ -846,7 +851,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                   "\u{1F4CE} ",
                   t("detail.file")
                 ] }),
-                /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: s.hiddenFileInput, onChange: (e) => handleFileSelect(e.target.files) }),
+                /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", multiple: true, "aria-label": t("detail.file"), className: s.hiddenFileInput, onChange: (e) => handleFileSelect(e.target.files) }),
                 macros.length > 0 && /* @__PURE__ */ jsxs(
                   "select",
                   {
@@ -920,6 +925,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                   /* @__PURE__ */ jsxs(
                     "select",
                     {
+                      "aria-label": t("detail.sendAs"),
                       value: sendAsClient ? "client" : "admin",
                       onChange: (e) => {
                         const asClient = e.target.value === "client";
@@ -1132,9 +1138,9 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             ] }),
             /* @__PURE__ */ jsx("div", { className: s.timerBar, "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: s.timerBarFill, style: { width: `${Math.min(100, (totalMin + Math.floor(timerSeconds / 60)) / 120 * 100)}%` } }) }),
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 8, alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx("input", { type: "number", min: "1", placeholder: "min", style: { width: 60, padding: "4px 8px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, id: "manual-time-input" }),
+              /* @__PURE__ */ jsx("input", { type: "number", min: "1", placeholder: "min", "aria-label": t("detail.manualMinutes"), style: { width: 60, padding: "4px 8px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, id: manualTimeId }),
               /* @__PURE__ */ jsx("button", { className: `${s.timerBtn} ${s.timerBtnGhost}`, onClick: async () => {
-                const input = document.getElementById("manual-time-input");
+                const input = document.getElementById(manualTimeId);
                 const mins = Number(input?.value);
                 if (!mins || mins < 1 || !ticketId) return;
                 try {
@@ -1145,7 +1151,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                 }
               }, style: { fontSize: 11 }, children: t("detail.addTime") })
             ] }),
-            /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, fontSize: 11, color: "var(--theme-elevation-500)" }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, fontSize: 11, color: "var(--theme-elevation-650)" }, children: [
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "2px 0", alignItems: "center" }, children: [
                 /* @__PURE__ */ jsx("span", { children: t("detail.billing.billable") }),
                 /* @__PURE__ */ jsx(
@@ -1172,7 +1178,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                 ] })
               ] })
             ] }),
-            timeEntries.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginTop: 8, fontSize: 11 }, children: timeEntries.slice(0, 6).map((e) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "3px 0", color: "var(--theme-elevation-500)" }, children: [
+            timeEntries.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginTop: 8, fontSize: 11 }, children: timeEntries.slice(0, 6).map((e) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "3px 0", color: "var(--theme-elevation-650)" }, children: [
               /* @__PURE__ */ jsx("span", { children: new Date(e.date).toLocaleDateString(DATE_LOCALE, { day: "numeric", month: "short" }) }),
               /* @__PURE__ */ jsxs("span", { title: e.description, style: { fontWeight: 600, cursor: e.description ? "help" : "default" }, children: [
                 e.duration,
@@ -1191,6 +1197,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                 "input",
                 {
                   className: s.tagInput,
+                  "aria-label": t("detail.addTag"),
                   value: newTagValue,
                   onChange: (e) => setNewTagValue(e.target.value),
                   onKeyDown: (e) => {
@@ -1211,10 +1218,11 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
             /* @__PURE__ */ jsx("div", { className: s.sideSectionTitle, children: t("detail.billing.title") }),
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                /* @__PURE__ */ jsx("span", { style: { fontSize: 12 }, children: t("detail.billing.type") }),
+                /* @__PURE__ */ jsx("label", { style: { fontSize: 12 }, htmlFor: billingTypeId, children: t("detail.billing.type") }),
                 /* @__PURE__ */ jsxs(
                   "select",
                   {
+                    id: billingTypeId,
                     value: ticket?.billingType || "hourly",
                     onChange: async (e) => {
                       try {
@@ -1237,11 +1245,12 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                 )
               ] }),
               ticket?.billingType === "flat" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                /* @__PURE__ */ jsx("span", { style: { fontSize: 12 }, children: t("detail.billing.flatAmount") }),
+                /* @__PURE__ */ jsx("label", { style: { fontSize: 12 }, htmlFor: flatAmountId, children: t("detail.billing.flatAmount") }),
                 /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
                   /* @__PURE__ */ jsx(
                     "input",
                     {
+                      id: flatAmountId,
                       type: "number",
                       defaultValue: ticket?.flatRateAmount ?? "",
                       placeholder: "0",
@@ -1265,11 +1274,12 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                /* @__PURE__ */ jsx("span", { style: { fontSize: 12 }, children: t("detail.billing.billedAmount") }),
+                /* @__PURE__ */ jsx("label", { style: { fontSize: 12 }, htmlFor: billedAmountId, children: t("detail.billing.billedAmount") }),
                 /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
                   /* @__PURE__ */ jsx(
                     "input",
                     {
+                      id: billedAmountId,
                       type: "number",
                       defaultValue: ticket?.billedAmount ?? "",
                       placeholder: "0",
@@ -1293,10 +1303,11 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                /* @__PURE__ */ jsx("span", { style: { fontSize: 12 }, children: t("detail.billing.payment") }),
+                /* @__PURE__ */ jsx("label", { style: { fontSize: 12 }, htmlFor: paymentStatusId, children: t("detail.billing.payment") }),
                 /* @__PURE__ */ jsxs(
                   "select",
                   {
+                    id: paymentStatusId,
                     value: ticket?.paymentStatus || "unpaid",
                     onChange: async (e) => {
                       try {
@@ -1382,6 +1393,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
         "input",
         {
           className: s.splitInput,
+          "aria-label": t("detail.split.subjectLabel"),
           value: splitSubject,
           onChange: (e) => setSplitSubject(e.target.value),
           onKeyDown: (e) => {

package/dist/views/TicketDetailView/index.js

@@ -1,14 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { DefaultTemplate } from '@payloadcms/next/templates';
 import { redirect } from 'next/navigation';
+import { supportViewRedirectTarget } from '../shared/viewAccess.js';
 import { AdminErrorBoundary } from '../shared/ErrorBoundary.js';
 import { TicketDetailClient } from './client.js';
 
 const TicketDetailView = ({ initPageResult }) => {
   const { req, visibleEntities } = initPageResult;
-  if (!req.user) {
-    redirect("/admin/login");
-  }
+  const redirectTo = supportViewRedirectTarget(initPageResult);
+  if (redirectTo) redirect(redirectTo);
   return /* @__PURE__ */ jsx(
     DefaultTemplate,
     {
@@ -18,7 +18,7 @@ const TicketDetailView = ({ initPageResult }) => {
       payload: req.payload,
       permissions: initPageResult.permissions,
       searchParams: {},
-      user: req.user,
+      user: req.user ?? void 0,
       visibleEntities,
       children: /* @__PURE__ */ jsx(AdminErrorBoundary, { viewName: "TicketDetailView", children: /* @__PURE__ */ jsx(TicketDetailClient, {}) })
     }

package/dist/views/TicketInboxView/client.js

@@ -9,6 +9,7 @@ import { StatusPill } from '../shared/StatusPill.js';
 import { computeSlaState, formatSlaRemaining } from '../shared/sla.js';
 import s from '../../styles/TicketInbox.module.scss';
 
+const INBOX_TABPANEL_ID = "inbox-tabpanel";
 const PRIORITY_COLORS = {
   urgent: "var(--theme-error-500)",
   high: "var(--theme-warning-500)",
@@ -213,6 +214,7 @@ const TicketInboxClient = () => {
             {
               type: "text",
               className: s.searchInput,
+              "aria-label": t("inbox.searchLabel"),
               placeholder: t("inbox.searchPlaceholder"),
               value: search,
               onChange: (e) => setSearch(e.target.value)
@@ -223,31 +225,55 @@ const TicketInboxClient = () => {
         /* @__PURE__ */ jsx(Link, { href: "/admin/support/new-ticket", className: s.newTicketBtn, children: t("inbox.newTicketBtn") })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: s.tabs, role: "tablist", children: tabs.map((tk) => {
-      const isAlert = tk.alert && tk.count > 0;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          role: "tab",
-          "aria-selected": tab === tk.key,
-          className: `${s.tab} ${tab === tk.key ? s.tabActive : ""} ${isAlert ? s.tabAlert : ""}`,
-          onClick: () => {
-            setTab(tk.key);
-            setSelectedIdx(-1);
-          },
-          children: [
-            tk.label,
-            /* @__PURE__ */ jsx("span", { className: `${s.tabCount} ${isAlert ? s.tabCountAlert : ""}`, children: tk.count })
-          ]
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: s.tabs,
+        role: "tablist",
+        "aria-label": t("inbox.tabsLabel"),
+        onKeyDown: (e) => {
+          const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+          if (!keys.includes(e.key)) return;
+          e.preventDefault();
+          const i = tabs.findIndex((tk) => tk.key === tab);
+          const next = e.key === "Home" ? 0 : e.key === "End" ? tabs.length - 1 : e.key === "ArrowLeft" ? (i - 1 + tabs.length) % tabs.length : (i + 1) % tabs.length;
+          const target = tabs[next];
+          if (!target) return;
+          setTab(target.key);
+          setSelectedIdx(-1);
+          document.getElementById(`inbox-tab-${target.key}`)?.focus();
         },
-        tk.key
-      );
-    }) }),
+        children: tabs.map((tk) => {
+          const isAlert = tk.alert && tk.count > 0;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              id: `inbox-tab-${tk.key}`,
+              "aria-selected": tab === tk.key,
+              "aria-controls": INBOX_TABPANEL_ID,
+              tabIndex: tab === tk.key ? 0 : -1,
+              className: `${s.tab} ${tab === tk.key ? s.tabActive : ""} ${isAlert ? s.tabAlert : ""}`,
+              onClick: () => {
+                setTab(tk.key);
+                setSelectedIdx(-1);
+              },
+              children: [
+                tk.label,
+                /* @__PURE__ */ jsx("span", { className: `${s.tabCount} ${isAlert ? s.tabCountAlert : ""}`, children: tk.count })
+              ]
+            },
+            tk.key
+          );
+        })
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: s.sortRow, children: checkedIds.size > 0 ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flex: 1 }, children: [
       /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--theme-text)" }, children: checkedIds.size > 1 ? t("inbox.selectedPlural", { count: String(checkedIds.size) }) : t("inbox.selected", { count: String(checkedIds.size) }) }),
-      /* @__PURE__ */ jsx("button", { className: s.sortSelect, onClick: () => handleBulkAction("close"), disabled: bulkProcessing, children: t("inbox.closeAction") }),
-      /* @__PURE__ */ jsx("button", { className: s.sortSelect, onClick: () => handleBulkAction("reopen"), disabled: bulkProcessing, children: t("inbox.reopenAction") }),
-      /* @__PURE__ */ jsxs("select", { className: s.sortSelect, value: bulkAction, onChange: (e) => {
+      /* @__PURE__ */ jsx("button", { type: "button", className: s.sortSelect, onClick: () => handleBulkAction("close"), disabled: bulkProcessing, children: t("inbox.closeAction") }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: s.sortSelect, onClick: () => handleBulkAction("reopen"), disabled: bulkProcessing, children: t("inbox.reopenAction") }),
+      /* @__PURE__ */ jsxs("select", { className: s.sortSelect, "aria-label": t("inbox.moreActions"), value: bulkAction, onChange: (e) => {
         if (e.target.value) handleBulkAction(e.target.value);
         setBulkAction("");
       }, children: [
@@ -255,14 +281,14 @@ const TicketInboxClient = () => {
         /* @__PURE__ */ jsx("option", { value: "set_priority", children: t("inbox.changePriority") }),
         /* @__PURE__ */ jsx("option", { value: "delete", children: t("inbox.deleteAction") })
       ] }),
-      /* @__PURE__ */ jsx("button", { className: s.sortSelect, onClick: () => setCheckedIds(/* @__PURE__ */ new Set()), style: { marginLeft: "auto" }, children: t("inbox.deselect") })
-    ] }) : /* @__PURE__ */ jsxs("select", { className: s.sortSelect, value: sort, onChange: (e) => setSort(e.target.value), children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: s.sortSelect, onClick: () => setCheckedIds(/* @__PURE__ */ new Set()), style: { marginLeft: "auto" }, children: t("inbox.deselect") })
+    ] }) : /* @__PURE__ */ jsxs("select", { className: s.sortSelect, "aria-label": t("inbox.sortLabel"), value: sort, onChange: (e) => setSort(e.target.value), children: [
       /* @__PURE__ */ jsx("option", { value: "-updatedAt", children: t("inbox.sort.newest") }),
       /* @__PURE__ */ jsx("option", { value: "updatedAt", children: t("inbox.sort.oldest") }),
       /* @__PURE__ */ jsx("option", { value: "-createdAt", children: t("inbox.sort.created") }),
       /* @__PURE__ */ jsx("option", { value: "priority", children: t("inbox.sort.priority") })
     ] }) }),
-    loading ? /* @__PURE__ */ jsx("div", { className: s.loading, children: t("common.loading") }) : tickets.length === 0 ? /* @__PURE__ */ jsxs("div", { className: s.empty, children: [
+    /* @__PURE__ */ jsx("div", { role: "tabpanel", id: INBOX_TABPANEL_ID, "aria-labelledby": `inbox-tab-${tab}`, children: loading ? /* @__PURE__ */ jsx("div", { className: s.loading, children: t("common.loading") }) : tickets.length === 0 ? /* @__PURE__ */ jsxs("div", { className: s.empty, children: [
       /* @__PURE__ */ jsx("div", { className: s.emptyIcon, children: "--" }),
       /* @__PURE__ */ jsx("div", { className: s.emptyText, children: t("inbox.empty") })
     ] }) : /* @__PURE__ */ jsx("div", { className: s.list, children: tickets.map((tk, idx) => {
@@ -333,7 +359,7 @@ const TicketInboxClient = () => {
         },
         tk.id
       );
-    }) }),
+    }) }) }),
     /* @__PURE__ */ jsxs("div", { className: s.keyboardHints, children: [
       /* @__PURE__ */ jsxs("span", { children: [
         /* @__PURE__ */ jsx("kbd", { children: "\u2191" }),

package/dist/views/TicketInboxView/index.js

@@ -1,12 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { DefaultTemplate } from '@payloadcms/next/templates';
 import { redirect } from 'next/navigation';
+import { supportViewRedirectTarget } from '../shared/viewAccess.js';
 import { AdminErrorBoundary } from '../shared/ErrorBoundary.js';
 import { TicketInboxClient } from './client.js';
 
 const TicketInboxView = ({ initPageResult }) => {
   const { req, visibleEntities } = initPageResult;
-  if (!req.user) redirect("/admin/login");
+  const redirectTo = supportViewRedirectTarget(initPageResult);
+  if (redirectTo) redirect(redirectTo);
   return /* @__PURE__ */ jsx(
     DefaultTemplate,
     {
@@ -16,7 +18,7 @@ const TicketInboxView = ({ initPageResult }) => {
       payload: req.payload,
       permissions: initPageResult.permissions,
       searchParams: {},
-      user: req.user,
+      user: req.user ?? void 0,
       visibleEntities,
       children: /* @__PURE__ */ jsx(AdminErrorBoundary, { viewName: "TicketInboxView", children: /* @__PURE__ */ jsx(TicketInboxClient, {}) })
     }

package/dist/views/TicketingSettingsView/TicketingSettings.module.scss

@@ -70,7 +70,7 @@
 
 .sectionDescription {
   font-size: 0.8125rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 0 0 1rem;
   line-height: 1.5;
 }
@@ -143,7 +143,7 @@
 
 .featureDesc {
   font-size: 0.75rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin-top: 0.125rem;
 }
 
@@ -166,7 +166,7 @@
 
 .fieldDescription {
   font-size: 0.75rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-weight: 400;
   margin-top: 0.125rem;
 }
@@ -194,7 +194,7 @@
 .inputReadonly {
   composes: input;
   background: var(--theme-elevation-50);
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   cursor: not-allowed;
 }
 
@@ -230,7 +230,7 @@
 
 .inlineDesc {
   font-size: 0.75rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin-top: 0.125rem;
 }
 
@@ -244,7 +244,7 @@
 
 .slaHint {
   font-size: 0.75rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 // ── API Key ───────────────────────────────────
@@ -290,7 +290,7 @@
 .aiToggleDesc {
   display: block;
   font-size: 0.6875rem;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 // ── Signature ─────────────────────────────────

package/dist/views/TicketingSettingsView/client.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect } from 'react';
-import { Settings, Mail, Bot, Clock, Timer, Globe, FileSignature } from 'lucide-react';
+import React, { useState, useEffect, useId } from 'react';
+import { Settings, Mail, Bot, Clock, Timer, Globe, FileSignature } from '../shared/icons.js';
 import { btnStyle, V } from '../shared/adminTokens.js';
 import { AdminViewHeader } from '../shared/AdminViewHeader.js';
 import { DEFAULT_FEATURES } from '../../components/TicketConversation/config.js';
@@ -196,13 +196,16 @@ const CollapsibleSection = ({ title, icon, color, defaultOpen = true, children,
     open && /* @__PURE__ */ jsx("div", { className: ts.sectionBody, children })
   ] });
 };
-const FieldRow = ({ label, description, children }) => /* @__PURE__ */ jsxs("div", { className: ts.fieldRow, children: [
-  /* @__PURE__ */ jsxs("div", { className: ts.fieldLabel, children: [
-    label,
-    description && /* @__PURE__ */ jsx("div", { className: ts.fieldDescription, children: description })
-  ] }),
-  /* @__PURE__ */ jsx("div", { className: ts.fieldContent, children })
-] });
+const FieldRow = ({ label, description, children }) => {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { className: ts.fieldRow, children: [
+    /* @__PURE__ */ jsxs("div", { className: ts.fieldLabel, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: id, children: label }),
+      description && /* @__PURE__ */ jsx("div", { className: ts.fieldDescription, children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: ts.fieldContent, children: typeof children === "function" ? children(id) : children })
+  ] });
+};
 const TicketingSettingsClient = () => {
   const { t } = useTranslation();
   const FEATURE_LIST = React.useMemo(() => getFeatureList(t), [t]);
@@ -283,7 +286,7 @@ const TicketingSettingsClient = () => {
         title: t("settingsView.configTitle"),
         subtitle: t("settings.subtitle", { enabled: String(enabledCount), total: String(totalCount) }),
         actions: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-          /* @__PURE__ */ jsx("button", { onClick: handleReset, style: btnStyle("var(--theme-elevation-400)", { small: true }), children: t("settingsView.reset") }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: handleReset, style: btnStyle(V.neutralBg, { small: true, fg: V.neutralFg }), children: t("settingsView.reset") }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -358,9 +361,10 @@ const TicketingSettingsClient = () => {
         defaultOpen: false,
         children: [
           /* @__PURE__ */ jsx("p", { className: ts.sectionDescription, children: t("settingsView.emailDescription") }),
-          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.senderAddress"), description: t("settingsView.senderAddressDesc"), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.senderAddress"), description: t("settingsView.senderAddressDesc"), children: (id) => /* @__PURE__ */ jsx(
             "input",
             {
+              id,
               type: "email",
               value: settings.email.fromAddress,
               onChange: (e) => updateEmail("fromAddress", e.target.value),
@@ -368,9 +372,10 @@ const TicketingSettingsClient = () => {
               className: ts.input
             }
           ) }),
-          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.senderName"), description: t("settingsView.senderNameDesc"), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.senderName"), description: t("settingsView.senderNameDesc"), children: (id) => /* @__PURE__ */ jsx(
             "input",
             {
+              id,
               type: "text",
               value: settings.email.fromName,
               onChange: (e) => updateEmail("fromName", e.target.value),
@@ -378,9 +383,10 @@ const TicketingSettingsClient = () => {
               className: ts.input
             }
           ) }),
-          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.replyTo"), description: t("settingsView.replyToDesc"), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.replyTo"), description: t("settingsView.replyToDesc"), children: (id) => /* @__PURE__ */ jsx(
             "input",
             {
+              id,
               type: "email",
               value: settings.email.replyToAddress,
               onChange: (e) => updateEmail("replyToAddress", e.target.value),
@@ -389,18 +395,20 @@ const TicketingSettingsClient = () => {
             }
           ) }),
           /* @__PURE__ */ jsx("div", { className: ts.separator }),
-          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.smtpServer"), description: t("settingsView.smtpServerDesc"), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.smtpServer"), description: t("settingsView.smtpServerDesc"), children: (id) => /* @__PURE__ */ jsx(
             "input",
             {
+              id,
               type: "text",
               value: smtpHost,
               readOnly: true,
               className: ts.inputReadonly
             }
           ) }),
-          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.smtpPort"), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.smtpPort"), children: (id) => /* @__PURE__ */ jsx(
             "input",
             {
+              id,
               type: "text",
               value: smtpPort,
               readOnly: true,
@@ -421,9 +429,10 @@ const TicketingSettingsClient = () => {
         badge: features.ai ? /* @__PURE__ */ jsx("span", { className: ts.badge, style: { backgroundColor: "#dcfce7", color: "#166534" }, children: t("settingsView.aiBadgeActive") }) : /* @__PURE__ */ jsx("span", { className: ts.badge, style: { backgroundColor: "#fee2e2", color: "#991b1b" }, children: t("settingsView.aiBadgeInactive") }),
         children: [
           /* @__PURE__ */ jsx("p", { className: ts.sectionDescription, children: t("settingsView.aiDescription") }),
-          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.aiProvider"), description: t("settingsView.aiProviderDesc"), children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.aiProvider"), description: t("settingsView.aiProviderDesc"), children: (id) => /* @__PURE__ */ jsxs(
             "select",
             {
+              id,
               value: settings.ai.provider,
               onChange: (e) => updateAI("provider", e.target.value),
               className: ts.select,
@@ -435,10 +444,11 @@ const TicketingSettingsClient = () => {
               ]
             }
           ) }),
-          settings.ai.provider !== "ollama" && /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.aiApiKey"), description: t("settingsView.aiApiKeyDesc"), children: /* @__PURE__ */ jsxs("div", { className: ts.apiKeyRow, children: [
+          settings.ai.provider !== "ollama" && /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.aiApiKey"), description: t("settingsView.aiApiKeyDesc"), children: (id) => /* @__PURE__ */ jsxs("div", { className: ts.apiKeyRow, children: [
             /* @__PURE__ */ jsx(
               "input",
               {
+                id,
                 type: showApiKey ? "text" : "password",
                 value: settings.ai.apiKey,
                 onChange: (e) => updateAI("apiKey", e.target.value),
@@ -456,9 +466,10 @@ const TicketingSettingsClient = () => {
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.aiModel"), description: t("settingsView.aiModelDesc"), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.aiModel"), description: t("settingsView.aiModelDesc"), children: (id) => /* @__PURE__ */ jsx(
             "input",
             {
+              id,
               type: "text",
               value: settings.ai.model,
               onChange: (e) => updateAI("model", e.target.value),
@@ -500,10 +511,11 @@ const TicketingSettingsClient = () => {
         defaultOpen: false,
         children: [
           /* @__PURE__ */ jsx("p", { className: ts.sectionDescription, children: t("settingsView.slaDescription") }),
-          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.slaFirstResponse"), description: t("settingsView.slaFirstResponseDesc"), children: /* @__PURE__ */ jsxs("div", { className: ts.slaInline, children: [
+          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.slaFirstResponse"), description: t("settingsView.slaFirstResponseDesc"), children: (id) => /* @__PURE__ */ jsxs("div", { className: ts.slaInline, children: [
             /* @__PURE__ */ jsx(
               "input",
               {
+                id,
                 type: "number",
                 min: 1,
                 value: settings.sla.firstResponseMinutes,
@@ -520,10 +532,11 @@ const TicketingSettingsClient = () => {
               ")"
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.slaResolution"), description: t("settingsView.slaResolutionDesc"), children: /* @__PURE__ */ jsxs("div", { className: ts.slaInline, children: [
+          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.slaResolution"), description: t("settingsView.slaResolutionDesc"), children: (id) => /* @__PURE__ */ jsxs("div", { className: ts.slaInline, children: [
             /* @__PURE__ */ jsx(
               "input",
               {
+                id,
                 type: "number",
                 min: 1,
                 value: settings.sla.resolutionMinutes,
@@ -556,9 +569,10 @@ const TicketingSettingsClient = () => {
             ] })
           ] }),
           /* @__PURE__ */ jsx("div", { className: ts.separator }),
-          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.escalationEmail"), description: t("settingsView.escalationEmailDesc"), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.escalationEmail"), description: t("settingsView.escalationEmailDesc"), children: (id) => /* @__PURE__ */ jsx(
             "input",
             {
+              id,
               type: "email",
               value: settings.sla.escalationEmail,
               onChange: (e) => updateSLA("escalationEmail", e.target.value),
@@ -594,10 +608,11 @@ const TicketingSettingsClient = () => {
             /* @__PURE__ */ jsx("span", { className: ts.inlineLabel, children: t("settingsView.autoCloseEnable") })
           ] }),
           settings.autoClose.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.autoCloseDelay"), description: t("settingsView.autoCloseDelayDesc"), children: /* @__PURE__ */ jsxs("div", { className: ts.slaInline, children: [
+            /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.autoCloseDelay"), description: t("settingsView.autoCloseDelayDesc"), children: (id) => /* @__PURE__ */ jsxs("div", { className: ts.slaInline, children: [
               /* @__PURE__ */ jsx(
                 "input",
                 {
+                  id,
                   type: "number",
                   min: 1,
                   max: 90,
@@ -608,10 +623,11 @@ const TicketingSettingsClient = () => {
               ),
               /* @__PURE__ */ jsx("span", { className: ts.slaHint, children: t("settingsView.days") })
             ] }) }),
-            /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.autoCloseReminder"), description: t("settingsView.autoCloseReminderDesc"), children: /* @__PURE__ */ jsxs("div", { className: ts.slaInline, children: [
+            /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.autoCloseReminder"), description: t("settingsView.autoCloseReminderDesc"), children: (id) => /* @__PURE__ */ jsxs("div", { className: ts.slaInline, children: [
               /* @__PURE__ */ jsx(
                 "input",
                 {
+                  id,
                   type: "number",
                   min: 1,
                   max: settings.autoClose.daysBeforeClose - 1,
@@ -646,9 +662,10 @@ const TicketingSettingsClient = () => {
         defaultOpen: false,
         children: [
           /* @__PURE__ */ jsx("p", { className: ts.sectionDescription, children: t("settingsView.localeDescription") }),
-          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.language"), description: t("settingsView.languageDesc"), children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(FieldRow, { label: t("settingsView.language"), description: t("settingsView.languageDesc"), children: (id) => /* @__PURE__ */ jsxs(
             "select",
             {
+              id,
               value: settings.locale.language,
               onChange: (e) => updateLocale("language", e.target.value),
               className: ts.select,
@@ -673,6 +690,7 @@ const TicketingSettingsClient = () => {
           /* @__PURE__ */ jsx(
             "textarea",
             {
+              "aria-label": t("settingsView.signatureTitle"),
               value: signature,
               onChange: (e) => {
                 setSignature(e.target.value);
@@ -710,7 +728,7 @@ const TicketingSettingsClient = () => {
                 alert(t("import.errorTitle"));
               }
             },
-            style: { ...btnStyle(opt.days === 0 ? "#ef4444" : "var(--theme-elevation-500)", { small: true }), fontSize: 11 },
+            style: { ...btnStyle(opt.days === 0 ? V.red : V.neutralBg, { small: true, fg: opt.days === 0 ? void 0 : V.neutralFg }), fontSize: 11 },
             children: opt.label
           },
           opt.days
@@ -718,7 +736,7 @@ const TicketingSettingsClient = () => {
       ] }, col)) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: ts.bottomBar, children: [
-      /* @__PURE__ */ jsx("button", { onClick: handleReset, style: btnStyle("var(--theme-elevation-400)", { small: true }), children: t("settingsView.resetAll") }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: handleReset, style: btnStyle(V.neutralBg, { small: true, fg: V.neutralFg }), children: t("settingsView.resetAll") }),
       /* @__PURE__ */ jsx(
         "button",
         {