@fonderie/react-admin-screens 0.7.0 → 0.8.0

package/dist/index.js

@@ -4,20 +4,49 @@ import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/react-courie
 import { useState as useState5 } from "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",
@@ -25,51 +54,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
@@ -412,8 +469,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(() => {
@@ -466,35 +523,35 @@ function TokensScreen({ client }) {
           /* @__PURE__ */ jsx8("th", { style: styles.th, children: "Last used" }),
           /* @__PURE__ */ jsx8("th", { style: styles.th })
         ] }) }),
-        /* @__PURE__ */ jsx8("tbody", { children: report.issued.map((t) => /* @__PURE__ */ jsxs8("tr", { children: [
+        /* @__PURE__ */ jsx8("tbody", { children: report.issued.map((t2) => /* @__PURE__ */ jsxs8("tr", { children: [
           /* @__PURE__ */ jsxs8("td", { style: styles.td, children: [
-            t.name,
-            t.revokedAt ? /* @__PURE__ */ jsx8("span", { style: styles.badge, children: " revoked" }) : null
+            t2.name,
+            t2.revokedAt ? /* @__PURE__ */ jsx8("span", { style: styles.badge, children: " revoked" }) : null
           ] }),
-          /* @__PURE__ */ jsx8("td", { style: { ...styles.td, ...styles.mono }, children: t.scopes.join(", ") }),
+          /* @__PURE__ */ jsx8("td", { style: { ...styles.td, ...styles.mono }, children: t2.scopes.join(", ") }),
           /* @__PURE__ */ jsxs8("td", { style: { ...styles.td, ...styles.muted }, children: [
-            new Date(t.createdAt).toLocaleDateString(),
+            new Date(t2.createdAt).toLocaleDateString(),
             " \xB7 ",
-            t.createdBy
+            t2.createdBy
           ] }),
-          /* @__PURE__ */ jsx8("td", { style: { ...styles.td, ...styles.muted }, children: t.expiresAt ? new Date(t.expiresAt).toLocaleDateString() : "never" }),
-          /* @__PURE__ */ jsx8("td", { style: { ...styles.td, ...styles.muted }, children: t.lastUsedAt ? new Date(t.lastUsedAt).toLocaleString() : "never" }),
-          /* @__PURE__ */ jsx8("td", { style: styles.td, children: t.revokedAt ? null : /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx8("td", { style: { ...styles.td, ...styles.muted }, children: t2.expiresAt ? new Date(t2.expiresAt).toLocaleDateString() : "never" }),
+          /* @__PURE__ */ jsx8("td", { style: { ...styles.td, ...styles.muted }, children: t2.lastUsedAt ? new Date(t2.lastUsedAt).toLocaleString() : "never" }),
+          /* @__PURE__ */ jsx8("td", { style: styles.td, children: t2.revokedAt ? null : /* @__PURE__ */ jsx8(
             "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__ */ jsx8("p", { style: styles.muted, children: "None issued." })
     ] }),
     /* @__PURE__ */ jsx8("h2", { style: styles.subtitle, children: "Legacy per-brick tokens" }),
@@ -735,7 +792,7 @@ function CatalogScreen({ client }) {
     isLoading && !catalog ? /* @__PURE__ */ jsx10("p", { style: styles.status, children: "Loading\u2026" }) : null,
     catalog ? /* @__PURE__ */ jsxs10(Fragment6, { children: [
       /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Configured (code)" }),
-      /* @__PURE__ */ jsx10("pre", { style: { ...styles.mono, background: "#f9fafb", padding: 12, overflowX: "auto" }, children: JSON.stringify(catalog.configured, null, 2) }),
+      /* @__PURE__ */ jsx10("pre", { style: { ...styles.mono, background: "var(--fonderie-surface-alt,#fafafa)", padding: 12, overflowX: "auto" }, children: JSON.stringify(catalog.configured, null, 2) }),
       /* @__PURE__ */ jsx10("h2", { style: styles.subtitle, children: "Stored (database)" }),
       catalog.stored.length === 0 ? /* @__PURE__ */ jsx10("p", { style: styles.muted, children: "No stored plans." }) : /* @__PURE__ */ jsxs10("table", { style: styles.table, children: [
         /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
@@ -793,11 +850,11 @@ function SubscriberScreen({ client, pageSize = 50 }) {
   const [amount, setAmount] = useState3("");
   const [note, setNote] = useState3("");
   const [granted, setGranted] = useState3(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__ */ jsxs11("div", { style: styles.container, children: [
     /* @__PURE__ */ jsx11("h1", { style: styles.title, children: "Subscriber" }),
@@ -1008,12 +1065,12 @@ function SubscriberScreen({ client, pageSize = 50 }) {
             /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Amount" }),
             /* @__PURE__ */ jsx11("th", { style: styles.th, children: "Note" })
           ] }) }),
-          /* @__PURE__ */ jsx11("tbody", { children: ledger.map((t) => /* @__PURE__ */ jsxs11("tr", { children: [
-            /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted }, children: new Date(t.createdAt).toLocaleString() }),
-            /* @__PURE__ */ jsx11("td", { style: styles.td, children: t.type }),
-            /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.mono }, children: t.amount }),
-            /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted }, children: t.description ?? "" })
-          ] }, t.id)) })
+          /* @__PURE__ */ jsx11("tbody", { children: ledger.map((t2) => /* @__PURE__ */ jsxs11("tr", { children: [
+            /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted }, children: new Date(t2.createdAt).toLocaleString() }),
+            /* @__PURE__ */ jsx11("td", { style: styles.td, children: t2.type }),
+            /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.mono }, children: t2.amount }),
+            /* @__PURE__ */ jsx11("td", { style: { ...styles.td, ...styles.muted }, children: t2.description ?? "" })
+          ] }, t2.id)) })
         ] }),
         hasMoreLedger ? /* @__PURE__ */ jsx11(
           "button",
@@ -1248,7 +1305,7 @@ function AdminShell({
         TemplateListScreen,
         {
           client: courierClient,
-          onSelectTemplate: (t) => setEditing({ kind: "template", type: t.type })
+          onSelectTemplate: (t2) => setEditing({ kind: "template", type: t2.type })
         }
       );
       break;