@usethrottle/auth 0.2.0 → 0.2.2

package/README.md

@@ -305,6 +305,7 @@ every top-level component renders:
 | `colorMuted` | `--throttle-color-muted` | `#eceef2` |
 | `colorMutedForeground` | `--throttle-color-muted-foreground` | `#5b6472` |
 | `colorBorder` | `--throttle-color-border` | `#e2e8f0` |
+| `colorBorderControl` | `--throttle-color-border-control` | `#8b93a1` |
 | `colorDanger` | `--throttle-color-danger` | `#c2321f` |
 | `colorDangerSurface` | `--throttle-color-danger-surface` | `#fef2f2` |
 | `colorDangerBorder` | `--throttle-color-danger-border` | `#fecaca` |

package/dist/react/components/index.cjs

@@ -595,6 +595,7 @@ var VARIABLE_PROPERTY = {
   colorMuted: "--throttle-color-muted",
   colorMutedForeground: "--throttle-color-muted-foreground",
   colorBorder: "--throttle-color-border",
+  colorBorderControl: "--throttle-color-border-control",
   colorDanger: "--throttle-color-danger",
   colorDangerSurface: "--throttle-color-danger-surface",
   colorDangerBorder: "--throttle-color-danger-border",
@@ -1209,6 +1210,13 @@ var THROTTLE_STYLES = `
   --throttle-color-muted: #eceef2;
   --throttle-color-muted-foreground: #5b6472;
   --throttle-color-border: #e2e8f0;
+  /* The boundary of an INTERACTIVE control, which WCAG 1.4.11 requires to
+     reach 3:1 against its adjacent colour \u2014 an input identified only by a
+     1.23:1 hairline is not identifiable at all. Decorative separators (card
+     edges, table rules, dividers) keep --throttle-color-border: they do not
+     identify a control, so the requirement does not apply and darkening
+     them would only add noise. */
+  --throttle-color-border-control: #8b93a1;
   --throttle-color-danger: #c2321f;
   --throttle-color-danger-surface: #fef2f2;
   --throttle-color-danger-border: #fecaca;
@@ -1261,6 +1269,7 @@ var THROTTLE_STYLES = `
   --throttle-color-muted: #21262d;
   --throttle-color-muted-foreground: #9aa4b2;
   --throttle-color-border: #30363d;
+  --throttle-color-border-control: #5c6570;
   --throttle-color-danger: #ff6b58;
   --throttle-color-danger-surface: #2a1513;
   --throttle-color-danger-border: #5c2b25;
@@ -1283,6 +1292,7 @@ var THROTTLE_STYLES = `
     --throttle-color-muted: #21262d;
     --throttle-color-muted-foreground: #9aa4b2;
     --throttle-color-border: #30363d;
+    --throttle-color-border-control: #5c6570;
     --throttle-color-danger: #ff6b58;
     --throttle-color-danger-surface: #2a1513;
     --throttle-color-danger-border: #5c2b25;
@@ -1330,7 +1340,7 @@ var THROTTLE_STYLES = `
   font-size: var(--throttle-font-size);
   color: var(--throttle-color-foreground);
   background: var(--throttle-color-background);
-  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border: var(--throttle-border-width) solid var(--throttle-color-border-control);
   border-radius: var(--throttle-radius-sm);
   /* padding-block stays 0 so min-height alone owns the height, exactly as
      .throttle-button does. With 12px vertical padding the box computed to
@@ -1385,7 +1395,7 @@ var THROTTLE_STYLES = `
 .throttle-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary); }
 .throttle-button--primary { background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground); width: 100%; }
 .throttle-button--primary:hover:not(:disabled) { filter: brightness(0.92); }
-.throttle-button--secondary { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); border-color: var(--throttle-color-border); }
+.throttle-button--secondary { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); border-color: var(--throttle-color-border-control); }
 .throttle-button--secondary:hover:not(:disabled) { background: var(--throttle-color-muted); }
 .throttle-button--danger { background: transparent; color: var(--throttle-color-danger); border-color: var(--throttle-color-border); }
 .throttle-button--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--throttle-color-danger) 10%, transparent); }
@@ -1808,14 +1818,14 @@ function Modal(props) {
         e.preventDefault();
         return;
       }
-      const first = items[0];
+      const first2 = items[0];
       const last = items[items.length - 1];
-      if (e.shiftKey && document.activeElement === first) {
+      if (e.shiftKey && document.activeElement === first2) {
         e.preventDefault();
         last.focus();
       } else if (!e.shiftKey && document.activeElement === last) {
         e.preventDefault();
-        first.focus();
+        first2.focus();
       }
     };
     document.addEventListener("keydown", onKeyDown);
@@ -2900,9 +2910,10 @@ function ProfilePanel(props) {
   const resource = useCustomer();
   const { submitting, error, notice, run } = useAction();
   const [form, setForm] = (0, import_react21.useState)({ firstName: "", lastName: "", phone: "", company: "", acceptsMarketing: false });
+  const edited = (0, import_react21.useRef)(false);
   (0, import_react21.useEffect)(() => {
     const c = resource.data;
-    if (!c) return;
+    if (!c || edited.current) return;
     setForm({
       firstName: c.firstName ?? "",
       lastName: c.lastName ?? "",
@@ -2926,6 +2937,7 @@ function ProfilePanel(props) {
           onSubmit: (e) => {
             e.preventDefault();
             void run(async () => {
+              edited.current = false;
               await resource.update({
                 firstName: form.firstName,
                 lastName: form.lastName,
@@ -2955,7 +2967,10 @@ function ProfilePanel(props) {
                 label: t.profile.firstName,
                 value: form.firstName,
                 autoComplete: "given-name",
-                onChange: (v) => setForm((f) => ({ ...f, firstName: v }))
+                onChange: (v) => {
+                  edited.current = true;
+                  setForm((f) => ({ ...f, firstName: v }));
+                }
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -2964,7 +2979,10 @@ function ProfilePanel(props) {
                 label: t.profile.lastName,
                 value: form.lastName,
                 autoComplete: "family-name",
-                onChange: (v) => setForm((f) => ({ ...f, lastName: v }))
+                onChange: (v) => {
+                  edited.current = true;
+                  setForm((f) => ({ ...f, lastName: v }));
+                }
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -2974,7 +2992,10 @@ function ProfilePanel(props) {
                 type: "tel",
                 value: form.phone,
                 autoComplete: "tel",
-                onChange: (v) => setForm((f) => ({ ...f, phone: v }))
+                onChange: (v) => {
+                  edited.current = true;
+                  setForm((f) => ({ ...f, phone: v }));
+                }
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -2983,7 +3004,10 @@ function ProfilePanel(props) {
                 label: t.profile.company,
                 value: form.company,
                 autoComplete: "organization",
-                onChange: (v) => setForm((f) => ({ ...f, company: v }))
+                onChange: (v) => {
+                  edited.current = true;
+                  setForm((f) => ({ ...f, company: v }));
+                }
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: "throttle-row", children: [
@@ -2992,7 +3016,10 @@ function ProfilePanel(props) {
                 {
                   type: "checkbox",
                   checked: form.acceptsMarketing,
-                  onChange: (e) => setForm((f) => ({ ...f, acceptsMarketing: e.target.checked }))
+                  onChange: (e) => {
+                    edited.current = true;
+                    setForm((f) => ({ ...f, acceptsMarketing: e.target.checked }));
+                  }
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: t.profile.acceptsMarketing })
@@ -3433,7 +3460,15 @@ function OrderDetail(props) {
   const { t, locale } = useCopy(props.localization);
   const resource = useOrder(props.orderId);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ...a.el("orderDetail.root", "throttle-panel"), children: [
-    props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) : null,
+    props.onBack ? (
+      // Wrapped on purpose. The panel is a column flex container, so a
+      // direct child stretches to its full width however `width: auto`
+      // the link variant is — the control rendered 748px wide with a
+      // centred label. The wrapper takes the stretch; the button keeps
+      // its own width. A CSS fix would need a compound selector, and
+      // those outrank the merchant overrides in `appearance.elements`.
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) })
+    ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       PanelState,
       {
@@ -3575,7 +3610,15 @@ function InvoiceDetail(props) {
   const resource = useInvoice(props.invoiceId);
   const { submitting, error, run } = useAction();
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ...a.el("invoiceDetail.root", "throttle-panel"), children: [
-    props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) : null,
+    props.onBack ? (
+      // Wrapped on purpose. The panel is a column flex container, so a
+      // direct child stretches to its full width however `width: auto`
+      // the link variant is — the control rendered 748px wide with a
+      // centred label. The wrapper takes the stretch; the button keeps
+      // its own width. A CSS fix would need a compound selector, and
+      // those outrank the merchant overrides in `appearance.elements`.
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) })
+    ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PanelState, { resource, isEmpty: (i) => i === null, emptyTitle: t.invoices.empty, skeletonRows: 4, children: (invoice) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "throttle-row", children: [
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { children: invoice.number }),
@@ -3825,6 +3868,38 @@ function SubscriptionsPanel(props) {
 
 // src/react/components/account/SecurityPanel.tsx
 var import_react26 = require("react");
+
+// src/react/components/account/device.ts
+var BROWSERS = [
+  [/\bEdg(?:e|A|iOS)?\//, "Edge"],
+  [/\bOPR\/|\bOpera\b/, "Opera"],
+  // No leading \b: real agents ship prefixed builds (HeadlessChrome), and a
+  // word boundary there sends them to the Safari rule instead.
+  [/Chrome\/|CriOS\//, "Chrome"],
+  [/\bFirefox\/|\bFxiOS\//, "Firefox"],
+  [/\bSafari\//, "Safari"]
+];
+var PLATFORMS = [
+  [/\biPhone\b|\biPad\b|\biPod\b/, "iOS"],
+  [/\bAndroid\b/, "Android"],
+  [/\bMac OS X\b|\bMacintosh\b/, "macOS"],
+  [/\bWindows\b/, "Windows"],
+  [/\bLinux\b|\bX11\b/, "Linux"]
+];
+function first(ua, table) {
+  for (const [pattern, label] of table) if (pattern.test(ua)) return label;
+  return null;
+}
+function describeDevice(userAgent) {
+  const ua = (userAgent ?? "").trim();
+  if (!ua) return "";
+  const browser = first(ua, BROWSERS);
+  if (!browser) return ua;
+  const platform = first(ua, PLATFORMS);
+  return platform ? `${browser} on ${platform}` : browser;
+}
+
+// src/react/components/account/SecurityPanel.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function SecurityPanel(props) {
   const a = useAppearance(props.appearance);
@@ -3905,7 +3980,7 @@ function SecurityPanel(props) {
           rows: sessions,
           columns: [
             { key: "device", label: t.security.columnDevice, render: (session) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: session.userAgent || session.ipPrefix || session.id }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
               session.current ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge, { tone: "success", children: t.security.thisDevice }) : null
             ] }) },
             { key: "lastActive", label: t.security.lastActive, render: (session) => formatDate(session.lastUsedAt, locale) },
@@ -3927,7 +4002,7 @@ function SecurityPanel(props) {
       ) : (sessions ?? []).map((session) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("securityPanel.sessionItem", itemBase), children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("strong", { children: session.userAgent || session.ipPrefix || session.id }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("strong", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
             session.current ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge, { tone: "success", children: t.security.thisDevice }) : null
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "throttle-muted", children: [