@consilioweb/payload-support 5.0.0 → 6.0.0

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",
         {

package/dist/views/TimeDashboardView/client.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useId, useState, useCallback, useEffect } from 'react';
 import { SkeletonDashboard } from '../shared/Skeleton.js';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
 import styles from '../../styles/TimeDashboard.module.scss';
@@ -25,6 +25,9 @@ function getMonthRange(offset) {
 const MONTHS_FR = ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"];
 const TimeDashboardClient = () => {
   const { t } = useTranslation();
+  const fromId = useId();
+  const toId = useId();
+  const groupById = useId();
   const [entries, setEntries] = useState([]);
   const [loading, setLoading] = useState(true);
   const [from, setFrom] = useState(() => getMonthRange(0).from);
@@ -108,16 +111,16 @@ const TimeDashboardClient = () => {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: styles.filterRow, children: [
         /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { className: styles.label, children: t("timeDashboard.filters.from") }),
-          /* @__PURE__ */ jsx("input", { type: "date", value: from, onChange: (e) => setFrom(e.target.value), className: styles.input })
+          /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: fromId, children: t("timeDashboard.filters.from") }),
+          /* @__PURE__ */ jsx("input", { id: fromId, type: "date", value: from, onChange: (e) => setFrom(e.target.value), className: styles.input })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { className: styles.label, children: t("timeDashboard.filters.to") }),
-          /* @__PURE__ */ jsx("input", { type: "date", value: to, onChange: (e) => setTo(e.target.value), className: styles.input })
+          /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: toId, children: t("timeDashboard.filters.to") }),
+          /* @__PURE__ */ jsx("input", { id: toId, type: "date", value: to, onChange: (e) => setTo(e.target.value), className: styles.input })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
-          /* @__PURE__ */ jsx("label", { className: styles.label, children: t("timeDashboard.filters.groupBy") }),
-          /* @__PURE__ */ jsxs("select", { value: groupBy, onChange: (e) => setGroupBy(e.target.value), className: styles.select, children: [
+          /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: groupById, children: t("timeDashboard.filters.groupBy") }),
+          /* @__PURE__ */ jsxs("select", { id: groupById, value: groupBy, onChange: (e) => setGroupBy(e.target.value), className: styles.select, children: [
             /* @__PURE__ */ jsx("option", { value: "day", children: t("timeDashboard.filters.day") }),
             /* @__PURE__ */ jsx("option", { value: "week", children: t("timeDashboard.filters.week") }),
             /* @__PURE__ */ jsx("option", { value: "project", children: t("timeDashboard.filters.project") })

package/dist/views/shared/ErrorBoundary.d.ts

@@ -3,15 +3,50 @@ interface ErrorBoundaryProps {
     children: React.ReactNode;
     fallback?: React.ReactNode;
     viewName?: string;
+    /**
+     * Values that identify the input the subtree renders from (a ticket id, a
+     * filter, a page number...). When any of them changes the boundary clears
+     * the error on its own, because the new input may well render fine.
+     */
+    resetKeys?: unknown[];
 }
 interface ErrorBoundaryState {
     hasError: boolean;
     error: Error | null;
+    /**
+     * Bumped on every reset. It is used as the `key` of the wrapper around the
+     * children so that a retry REMOUNTS the subtree. Clearing `hasError` alone
+     * keeps the broken component instance and its state, so anything that threw
+     * from a bad piece of state throws again on the very next render.
+     */
+    resetCount: number;
 }
+/**
+ * Shallow comparison of two reset-key arrays. A missing array is treated as
+ * empty, so a boundary declared without `resetKeys` never auto-resets.
+ */
+export declare function haveResetKeysChanged(previous?: unknown[], next?: unknown[]): boolean;
+/**
+ * Default fallback UI.
+ *
+ * Exported so it can be rendered (and asserted on) in isolation. It is the
+ * only screen a user sees when a view is broken, so it must stay readable in
+ * both themes: every colour comes from a Payload theme token, never a hex
+ * literal that only works on a light background.
+ *
+ * The thrown message is deliberately NOT displayed — it can carry a stack
+ * fragment, an internal path or a raw API payload. It is logged to the console
+ * by `componentDidCatch` instead.
+ */
+export declare function AdminErrorFallback({ onRetry }: {
+    onRetry: () => void;
+}): React.ReactElement;
 export declare class AdminErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
     constructor(props: ErrorBoundaryProps);
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): Pick<ErrorBoundaryState, 'hasError' | 'error'>;
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    componentDidUpdate(prevProps: ErrorBoundaryProps): void;
+    reset: () => void;
     render(): React.ReactNode;
 }
 export {};

package/dist/views/shared/ErrorBoundary.js

@@ -1,11 +1,53 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
 
+function haveResetKeysChanged(previous, next) {
+  const a = previous ?? [];
+  const b = next ?? [];
+  if (a.length !== b.length) return true;
+  return a.some((value, index) => !Object.is(value, b[index]));
+}
+function AdminErrorFallback({ onRetry }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      style: {
+        padding: "40px",
+        textAlign: "center",
+        color: "var(--theme-error-550)"
+      },
+      children: [
+        /* @__PURE__ */ jsx("h2", { style: { marginBottom: "16px", fontSize: "18px" }, children: t("errorBoundary.title") }),
+        /* @__PURE__ */ jsx("p", { style: { marginBottom: "24px", color: "var(--theme-elevation-650)", fontSize: "14px" }, children: t("errorBoundary.description") }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRetry,
+            style: {
+              padding: "8px 20px",
+              backgroundColor: "var(--theme-success-550)",
+              color: "var(--theme-elevation-0)",
+              border: "none",
+              borderRadius: "6px",
+              cursor: "pointer",
+              fontSize: "14px"
+            },
+            children: t("errorBoundary.retry")
+          }
+        )
+      ]
+    }
+  );
+}
 class AdminErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { hasError: false, error: null };
+    this.state = { hasError: false, error: null, resetCount: 0 };
   }
   static getDerivedStateFromError(error) {
     return { hasError: true, error };
@@ -13,38 +55,27 @@ class AdminErrorBoundary extends React.Component {
   componentDidCatch(error, errorInfo) {
     console.error(`[${this.props.viewName || "AdminView"}] Error:`, error, errorInfo);
   }
+  componentDidUpdate(prevProps) {
+    if (!this.state.hasError) return;
+    if (!haveResetKeysChanged(prevProps.resetKeys, this.props.resetKeys)) return;
+    this.reset();
+  }
+  reset = () => {
+    this.setState((prev) => ({
+      hasError: false,
+      error: null,
+      resetCount: prev.resetCount + 1
+    }));
+  };
   render() {
     if (this.state.hasError) {
       if (this.props.fallback) {
         return this.props.fallback;
       }
-      return /* @__PURE__ */ jsxs("div", { style: {
-        padding: "40px",
-        textAlign: "center",
-        color: "#dc2626"
-      }, children: [
-        /* @__PURE__ */ jsx("h2", { style: { marginBottom: "16px", fontSize: "18px" }, children: "Une erreur est survenue" }),
-        /* @__PURE__ */ jsx("p", { style: { marginBottom: "24px", color: "#6b7280", fontSize: "14px" }, children: this.state.error?.message || "Erreur inattendue" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => this.setState({ hasError: false, error: null }),
-            style: {
-              padding: "8px 20px",
-              backgroundColor: "#2563eb",
-              color: "#fff",
-              border: "none",
-              borderRadius: "6px",
-              cursor: "pointer",
-              fontSize: "14px"
-            },
-            children: "Reessayer"
-          }
-        )
-      ] });
+      return /* @__PURE__ */ jsx(AdminErrorFallback, { onRetry: this.reset });
     }
-    return this.props.children;
+    return /* @__PURE__ */ jsx(React.Fragment, { children: this.props.children }, this.state.resetCount);
   }
 }
 
-export { AdminErrorBoundary };
+export { AdminErrorBoundary, AdminErrorFallback, haveResetKeysChanged };

package/dist/views/shared/adminTokens.d.ts

@@ -1,19 +1,29 @@
 import type React from 'react';
 export declare const V: {
     readonly text: "var(--theme-text)";
-    readonly textSecondary: "var(--theme-elevation-500)";
+    readonly textSecondary: "var(--theme-elevation-650)";
     readonly bg: "var(--theme-elevation-50)";
     readonly bgCard: "var(--theme-elevation-100)";
     readonly border: "var(--theme-elevation-300)";
     readonly blue: "#2563eb";
-    readonly amber: "#d97706";
-    readonly orange: "#ea580c";
-    readonly green: "#16a34a";
+    readonly amber: "#b45309";
+    readonly orange: "#c2410c";
+    readonly green: "#15803d";
     readonly red: "#dc2626";
+    readonly neutralBg: "var(--theme-elevation-150)";
+    readonly neutralFg: "var(--theme-text)";
     readonly cyan: "#2563eb";
-    readonly yellow: "#d97706";
+    readonly yellow: "#b45309";
 };
+/**
+ * Button style factory.
+ *
+ * `bg` is expected to be one of the fixed hex values of `V`; the default
+ * foreground is white, which reaches AA on all of them. Pass `fg` whenever
+ * `bg` is a theme variable, since white only works on one of the two themes.
+ */
 export declare const btnStyle: (bg: string, opts?: {
     disabled?: boolean;
     small?: boolean;
+    fg?: string;
 }) => React.CSSProperties;

package/dist/views/shared/adminTokens.js

@@ -1,25 +1,41 @@
 const V = {
   text: "var(--theme-text)",
-  textSecondary: "var(--theme-elevation-500)",
+  // elevation-650, not elevation-500: Payload's dark theme does not redefine
+  // the 500 step (colors.scss jumps from 450 to 550), so elevation-500 stays
+  // rgb(128,128,128) in both themes — 3.62:1 on a light background and 4.03:1
+  // on a dark one, below WCAG AA in both. elevation-650 gives 6.63:1 / 9.03:1.
+  textSecondary: "var(--theme-elevation-650)",
   bg: "var(--theme-elevation-50)",
   bgCard: "var(--theme-elevation-100)",
   border: "var(--theme-elevation-300)",
-  // Professional palette
+  // Professional palette. These are fixed hex values (they do not follow the
+  // admin theme), so they are only ever used as a background behind white
+  // text; each one is dark enough for white to reach at least 4.5:1.
   blue: "#2563eb",
-  amber: "#d97706",
-  orange: "#ea580c",
-  green: "#16a34a",
+  // white on it: 5.17:1
+  amber: "#b45309",
+  // white on it: 5.02:1
+  orange: "#c2410c",
+  // white on it: 5.18:1
+  green: "#15803d",
+  // white on it: 5.02:1
   red: "#dc2626",
+  // white on it: 4.83:1
+  // Neutral / secondary button. Both halves follow the admin theme, so they
+  // must be used together — white on a theme token is unreadable in one of
+  // the two themes whichever token is picked.
+  neutralBg: "var(--theme-elevation-150)",
+  neutralFg: "var(--theme-text)",
   // Legacy aliases (backward compat for views not yet updated)
   cyan: "#2563eb",
-  yellow: "#d97706"
+  yellow: "#b45309"
 };
 const btnStyle = (bg, opts) => ({
   padding: opts?.small ? "6px 12px" : "8px 14px",
   borderRadius: 6,
   border: `1px solid var(--theme-elevation-300)`,
   backgroundColor: bg,
-  color: "#fff",
+  color: opts?.fg ?? "#fff",
   fontWeight: 600,
   fontSize: opts?.small ? 12 : 13,
   cursor: opts?.disabled ? "not-allowed" : "pointer",

package/dist/views/shared/icons.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Inlined Lucide icons.
+ *
+ * The plugin used to require `lucide-react` as a peer dependency for exactly
+ * 15 icons across two admin views. That made every integrator install an icon set,
+ * and a missing install a build-time failure, for 15 paths totalling a few
+ * hundred bytes. They are inlined here instead, and `lucide-react` is no longer
+ * a peer dependency.
+ *
+ * The geometry below is copied from lucide-react v1.41.0 and, like the rest of
+ * Lucide, is under the ISC licence:
+ *
+ *   ISC License
+ *   Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as
+ *   part of Feather (MIT). All other copyright (c) for Lucide are held by
+ *   Lucide Contributors 2022.
+ *
+ *   Permission to use, copy, modify, and/or distribute this software for any
+ *   purpose with or without fee is hereby granted, provided that the above
+ *   copyright notice and this permission notice appear in all copies.
+ *
+ *   THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ *   WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ *   MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ *   ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ *   WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ *   ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+ *   IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+import React from 'react';
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+    /** Rendered width and height. Lucide's own default is 24. */
+    size?: number | string;
+}
+export declare const Bot: React.FC<IconProps>;
+export declare const ChevronDown: React.FC<IconProps>;
+export declare const ChevronUp: React.FC<IconProps>;
+export declare const Clock: React.FC<IconProps>;
+export declare const FileSignature: React.FC<IconProps>;
+export declare const Globe: React.FC<IconProps>;
+export declare const Inbox: React.FC<IconProps>;
+export declare const Link2: React.FC<IconProps>;
+export declare const Mail: React.FC<IconProps>;
+export declare const Paperclip: React.FC<IconProps>;
+export declare const Plus: React.FC<IconProps>;
+export declare const Search: React.FC<IconProps>;
+export declare const Settings: React.FC<IconProps>;
+export declare const Timer: React.FC<IconProps>;
+export declare const X: React.FC<IconProps>;