@fonderie/react-admin-screens 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -42,20 +42,49 @@ var import_react_courier_admin_screens = require("@fonderie/react-courier-admin-
 var import_react5 = require("react");
 
 // src/styles.ts
+var t = {
+  text: "var(--fonderie-text,#171717)",
+  muted: "var(--fonderie-text-muted,#5c5c5c)",
+  bg: "var(--fonderie-bg,#fafafa)",
+  surface: "var(--fonderie-surface,#fff)",
+  surfaceAlt: "var(--fonderie-surface-alt,#fafafa)",
+  border: "var(--fonderie-border,#e0e0e0)",
+  borderLight: "var(--fonderie-border-light,#f5f5f5)",
+  accent: "var(--fonderie-accent,#00d294)",
+  accentStrong: "var(--fonderie-accent-strong,#009767)",
+  warning: "var(--fonderie-warning,#f5a623)",
+  danger: "var(--fonderie-danger,#e00)",
+  font: 'var(--fonderie-font,Inter,"Inter Fallback",-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif)',
+  mono: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)',
+  radius: "var(--fonderie-radius,4px)",
+  radiusLg: "var(--fonderie-radius-lg,8px)",
+  trackingDisplay: "var(--fonderie-tracking-display,-0.05em)",
+  shadowCard: "var(--fonderie-shadow-card,0 2px 3px 0 rgba(0,0,0,.05))"
+};
 var styles = {
   shell: {
     display: "flex",
     minHeight: "100vh",
-    fontFamily: "system-ui, sans-serif",
-    color: "#111"
+    fontFamily: t.font,
+    color: t.text,
+    background: t.bg
+  },
+  // The sidebar sits on the raised surface against the page canvas, which is
+  // what separates the two without a heavy rule between them.
+  nav: {
+    width: 220,
+    borderRight: `1px solid ${t.border}`,
+    padding: 16,
+    flexShrink: 0,
+    background: t.surface
   },
-  nav: { width: 220, borderRight: "1px solid #eee", padding: 16, flexShrink: 0 },
   navGroup: {
     fontSize: 11,
     textTransform: "uppercase",
     letterSpacing: 0.6,
-    color: "#888",
-    margin: "16px 0 6px"
+    color: t.muted,
+    margin: "16px 0 6px",
+    fontWeight: 600
   },
   navItem: {
     display: "block",
@@ -63,51 +92,79 @@ var styles = {
     textAlign: "left",
     background: "none",
     border: "none",
-    borderRadius: 6,
+    borderRadius: t.radius,
     padding: "6px 8px",
     cursor: "pointer",
     fontSize: 14,
-    color: "#111"
+    color: t.text,
+    fontFamily: "inherit"
   },
-  navItemActive: { background: "#f3f4f6", fontWeight: 600 },
+  navItemActive: { background: t.surfaceAlt, fontWeight: 600, color: t.accentStrong },
   main: { flex: 1, padding: 24, maxWidth: 960 },
   container: { padding: 24, maxWidth: 960 },
-  title: { fontSize: 20, fontWeight: 700, marginTop: 0, marginBottom: 12 },
-  subtitle: { fontSize: 15, fontWeight: 600, marginTop: 24, marginBottom: 8 },
-  status: { padding: 12, color: "#666" },
-  error: { color: "#e11d48", marginBottom: 12, fontSize: 14 },
-  ok: { color: "#15803d", fontWeight: 600 },
-  bad: { color: "#e11d48", fontWeight: 600 },
-  advice: { color: "#b45309" },
-  muted: { color: "#666", fontSize: 13 },
-  mono: { fontFamily: "ui-monospace, monospace", fontSize: 13 },
+  title: {
+    fontSize: 20,
+    fontWeight: 600,
+    marginTop: 0,
+    marginBottom: 12,
+    letterSpacing: t.trackingDisplay
+  },
+  subtitle: {
+    fontSize: 15,
+    fontWeight: 600,
+    marginTop: 24,
+    marginBottom: 8,
+    letterSpacing: t.trackingDisplay
+  },
+  status: { padding: 12, color: t.muted },
+  error: { color: t.danger, marginBottom: 12, fontSize: 14 },
+  ok: { color: t.accentStrong, fontWeight: 600 },
+  bad: { color: t.danger, fontWeight: 600 },
+  advice: { color: t.warning },
+  muted: { color: t.muted, fontSize: 13 },
+  mono: { fontFamily: t.mono, fontSize: 13 },
   table: { width: "100%", borderCollapse: "collapse", fontSize: 14 },
   th: {
     textAlign: "left",
-    borderBottom: "1px solid #ddd",
+    borderBottom: `1px solid ${t.border}`,
     padding: "6px 8px",
     fontWeight: 600,
-    color: "#444"
+    color: t.muted
   },
-  td: { borderBottom: "1px solid #eee", padding: "6px 8px", verticalAlign: "top" },
+  td: { borderBottom: `1px solid ${t.borderLight}`, padding: "6px 8px", verticalAlign: "top" },
   list: { listStyle: "none", padding: 0, margin: 0 },
-  row: { borderBottom: "1px solid #eee", padding: "8px 0" },
+  row: { borderBottom: `1px solid ${t.borderLight}`, padding: "8px 0" },
   badge: {
     display: "inline-block",
     borderRadius: 999,
     padding: "1px 8px",
     fontSize: 12,
-    background: "#f3f4f6"
+    background: t.surfaceAlt,
+    border: `1px solid ${t.border}`,
+    color: t.muted
   },
   button: {
-    background: "none",
-    border: "1px solid #ddd",
-    borderRadius: 8,
+    background: t.surface,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.radius,
     padding: "4px 10px",
     cursor: "pointer",
-    fontSize: 13
+    fontSize: 13,
+    color: t.text,
+    fontFamily: "inherit",
+    boxShadow: t.shadowCard
+  },
+  toolbar: { display: "flex", gap: 8, alignItems: "center", marginBottom: 12 },
+  // Surfaces the screens compose themselves, kept here so a card looks the
+  // same on every page rather than being re-invented per screen.
+  card: {
+    background: t.surface,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.radiusLg,
+    padding: 16,
+    boxShadow: t.shadowCard
   },
-  toolbar: { display: "flex", gap: 8, alignItems: "center", marginBottom: 12 }
+  accent: { color: t.accent }
 };
 
 // src/screens/AdminLogScreen.tsx
@@ -450,8 +507,8 @@ function TokensScreen({ client }) {
               name: name.trim(),
               scopes,
               ...days && Number.isInteger(d) && d > 0 ? { expiresInDays: d } : {}
-            }).then((t) => {
-              setMinted({ name: t.name, token: t.token });
+            }).then((t2) => {
+              setMinted({ name: t2.name, token: t2.token });
               setName("");
               setDays("");
             }).catch(() => {
@@ -504,35 +561,35 @@ function TokensScreen({ client }) {
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { style: styles.th, children: "Last used" }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { style: styles.th })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: report.issued.map((t) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: report.issued.map((t2) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("td", { style: styles.td, children: [
-            t.name,
-            t.revokedAt ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.badge, children: " revoked" }) : null
+            t2.name,
+            t2.revokedAt ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: styles.badge, children: " revoked" }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: { ...styles.td, ...styles.mono }, children: t.scopes.join(", ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: { ...styles.td, ...styles.mono }, children: t2.scopes.join(", ") }),
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("td", { style: { ...styles.td, ...styles.muted }, children: [
-            new Date(t.createdAt).toLocaleDateString(),
+            new Date(t2.createdAt).toLocaleDateString(),
             " \xB7 ",
-            t.createdBy
+            t2.createdBy
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: t.expiresAt ? new Date(t.expiresAt).toLocaleDateString() : "never" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: t.lastUsedAt ? new Date(t.lastUsedAt).toLocaleString() : "never" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: styles.td, children: t.revokedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: t2.expiresAt ? new Date(t2.expiresAt).toLocaleDateString() : "never" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: t2.lastUsedAt ? new Date(t2.lastUsedAt).toLocaleString() : "never" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { style: styles.td, children: t2.revokedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
               style: styles.button,
               onClick: () => {
                 if (window.confirm(
-                  `Revoke "${t.name}"? Anything using it stops working immediately.`
+                  `Revoke "${t2.name}"? Anything using it stops working immediately.`
                 ))
-                  void revoke(t.id).catch(() => {
+                  void revoke(t2.id).catch(() => {
                   });
               },
               children: "Revoke"
             }
           ) })
-        ] }, t.id)) })
+        ] }, t2.id)) })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: styles.muted, children: "None issued." })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { style: styles.subtitle, children: "Legacy per-brick tokens" }),
@@ -768,7 +825,7 @@ function CatalogScreen({ client }) {
     isLoading && !catalog ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: styles.status, children: "Loading\u2026" }) : null,
     catalog ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { style: styles.subtitle, children: "Configured (code)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { style: { ...styles.mono, background: "#f9fafb", padding: 12, overflowX: "auto" }, children: JSON.stringify(catalog.configured, null, 2) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { style: { ...styles.mono, background: "var(--fonderie-surface-alt,#fafafa)", padding: 12, overflowX: "auto" }, children: JSON.stringify(catalog.configured, null, 2) }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { style: styles.subtitle, children: "Stored (database)" }),
       catalog.stored.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: styles.muted, children: "No stored plans." }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { style: styles.table, children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { children: [
@@ -826,11 +883,11 @@ function SubscriberScreen({ client, pageSize = 50 }) {
   const [amount, setAmount] = (0, import_react3.useState)("");
   const [note, setNote] = (0, import_react3.useState)("");
   const [granted, setGranted] = (0, import_react3.useState)(null);
-  const open = (t, id) => {
+  const open = (t2, id) => {
     setGranted(null);
-    setType(t);
+    setType(t2);
     setIdInput(id);
-    setSubscriber({ type: t, id });
+    setSubscriber({ type: t2, id });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: styles.container, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { style: styles.title, children: "Subscriber" }),
@@ -1041,12 +1098,12 @@ function SubscriberScreen({ client, pageSize = 50 }) {
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { style: styles.th, children: "Amount" }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { style: styles.th, children: "Note" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: ledger.map((t) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: new Date(t.createdAt).toLocaleString() }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: styles.td, children: t.type }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: { ...styles.td, ...styles.mono }, children: t.amount }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: t.description ?? "" })
-          ] }, t.id)) })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: ledger.map((t2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: new Date(t2.createdAt).toLocaleString() }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: styles.td, children: t2.type }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: { ...styles.td, ...styles.mono }, children: t2.amount }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { style: { ...styles.td, ...styles.muted }, children: t2.description ?? "" })
+          ] }, t2.id)) })
         ] }),
         hasMoreLedger ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "button",
@@ -1281,7 +1338,7 @@ function AdminShell({
         import_react_courier_admin_screens.TemplateListScreen,
         {
           client: courierClient,
-          onSelectTemplate: (t) => setEditing({ kind: "template", type: t.type })
+          onSelectTemplate: (t2) => setEditing({ kind: "template", type: t2.type })
         }
       );
       break;