@fonderie/vue-admin-screens 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -42,20 +42,49 @@ var import_vue_courier_admin_screens = require("@fonderie/vue-courier-admin-scre
 var import_vue14 = require("vue");
 
 // 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: "220px", borderRight: "1px solid #eee", padding: "16px", flexShrink: 0 },
   navGroup: {
-    fontSize: "11px",
+    fontSize: 11,
     textTransform: "uppercase",
-    letterSpacing: "0.6px",
-    color: "#888",
-    margin: "16px 0 6px"
+    letterSpacing: 0.6,
+    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: "6px",
+    borderRadius: t.radius,
     padding: "6px 8px",
     cursor: "pointer",
-    fontSize: "14px",
-    color: "#111"
+    fontSize: 14,
+    color: t.text,
+    fontFamily: "inherit"
+  },
+  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: 600,
+    marginTop: 0,
+    marginBottom: 12,
+    letterSpacing: t.trackingDisplay
   },
-  navItemActive: { background: "#f3f4f6", fontWeight: 600 },
-  main: { flex: 1, padding: "24px", maxWidth: "960px" },
-  container: { padding: "24px", maxWidth: "960px" },
-  title: { fontSize: "20px", fontWeight: 700, marginTop: 0, marginBottom: "12px" },
-  subtitle: { fontSize: "15px", fontWeight: 600, marginTop: "24px", marginBottom: "8px" },
-  status: { padding: "12px", color: "#666" },
-  error: { color: "#e11d48", marginBottom: "12px", fontSize: "14px" },
-  ok: { color: "#15803d", fontWeight: 600 },
-  bad: { color: "#e11d48", fontWeight: 600 },
-  advice: { color: "#b45309" },
-  muted: { color: "#666", fontSize: "13px" },
-  mono: { fontFamily: "ui-monospace, monospace", fontSize: "13px" },
-  table: { width: "100%", borderCollapse: "collapse", fontSize: "14px" },
+  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: "999px",
+    borderRadius: 999,
     padding: "1px 8px",
-    fontSize: "12px",
-    background: "#f3f4f6"
+    fontSize: 12,
+    background: t.surfaceAlt,
+    border: `1px solid ${t.border}`,
+    color: t.muted
   },
   button: {
-    background: "none",
-    border: "1px solid #ddd",
-    borderRadius: "8px",
+    background: t.surface,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.radius,
     padding: "4px 10px",
     cursor: "pointer",
-    fontSize: "13px"
+    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: "8px", alignItems: "center", marginBottom: "12px" }
+  accent: { color: t.accent }
 };
 
 // src/screens/AdminLogScreen.ts
@@ -135,7 +192,7 @@ function table(headers, rows) {
     (0, import_vue.h)("thead", [
       (0, import_vue.h)(
         "tr",
-        headers.map((t) => (0, import_vue.h)("th", { style: styles.th }, t))
+        headers.map((t2) => (0, import_vue.h)("th", { style: styles.th }, t2))
       )
     ]),
     (0, import_vue.h)("tbody", rows)
@@ -554,8 +611,8 @@ var TokensScreen = (0, import_vue9.defineComponent)({
                   name: name.value.trim(),
                   scopes: scopes.value,
                   ...days.value && Number.isInteger(d) && d > 0 ? { expiresInDays: d } : {}
-                }).then((t) => {
-                  minted.value = { name: t.name, token: t.token };
+                }).then((t2) => {
+                  minted.value = { name: t2.name, token: t2.token };
                   name.value = "";
                   days.value = "";
                 }).catch(() => {
@@ -601,35 +658,35 @@ var TokensScreen = (0, import_vue9.defineComponent)({
           r?.issued && r.issued.length > 0 ? table(
             ["Name", "Scopes", "Created", "Expires", "Last used", ""],
             r.issued.map(
-              (t) => (0, import_vue9.h)("tr", { key: t.id }, [
+              (t2) => (0, import_vue9.h)("tr", { key: t2.id }, [
                 td([
-                  t.name,
-                  t.revokedAt ? (0, import_vue9.h)("span", { style: styles.badge }, " revoked") : ""
+                  t2.name,
+                  t2.revokedAt ? (0, import_vue9.h)("span", { style: styles.badge }, " revoked") : ""
                 ]),
-                td(t.scopes.join(", "), styles.mono),
+                td(t2.scopes.join(", "), styles.mono),
                 td(
-                  `${new Date(t.createdAt).toLocaleDateString()} \xB7 ${t.createdBy}`,
+                  `${new Date(t2.createdAt).toLocaleDateString()} \xB7 ${t2.createdBy}`,
                   styles.muted
                 ),
                 td(
-                  t.expiresAt ? new Date(t.expiresAt).toLocaleDateString() : "never",
+                  t2.expiresAt ? new Date(t2.expiresAt).toLocaleDateString() : "never",
                   styles.muted
                 ),
                 td(
-                  t.lastUsedAt ? new Date(t.lastUsedAt).toLocaleString() : "never",
+                  t2.lastUsedAt ? new Date(t2.lastUsedAt).toLocaleString() : "never",
                   styles.muted
                 ),
                 td(
-                  t.revokedAt ? "" : (0, import_vue9.h)(
+                  t2.revokedAt ? "" : (0, import_vue9.h)(
                     "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(() => {
                           });
                       }
                     },
@@ -875,7 +932,7 @@ var CatalogScreen = (0, import_vue11.defineComponent)({
             {
               style: {
                 ...styles.mono,
-                background: "#f9fafb",
+                background: "var(--fonderie-surface-alt,#fafafa)",
                 padding: "12px",
                 overflowX: "auto"
               }
@@ -935,11 +992,11 @@ var SubscriberScreen = (0, import_vue12.defineComponent)({
     const subscriber = (0, import_vue12.ref)(null);
     const list = (0, import_vue_admin11.useAdminSubscribers)(props.client, { limit: props.pageSize });
     const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = (0, import_vue_admin11.useAdminSubscriber)(props.client, subscriber, { limit: 20 });
-    const open = (t, id) => {
+    const open = (t2, id) => {
       granted.value = null;
-      type.value = t;
+      type.value = t2;
       idInput.value = id;
-      subscriber.value = { type: t, id };
+      subscriber.value = { type: t2, id };
     };
     const amount = (0, import_vue12.ref)("");
     const note = (0, import_vue12.ref)("");
@@ -1119,11 +1176,11 @@ var SubscriberScreen = (0, import_vue12.defineComponent)({
             ledger.value.length === 0 ? (0, import_vue12.h)("p", { style: styles.muted }, "Nothing moved yet.") : table(
               ["When", "Kind", "Amount", "Note"],
               ledger.value.map(
-                (t) => (0, import_vue12.h)("tr", { key: t.id }, [
-                  td(new Date(t.createdAt).toLocaleString(), styles.muted),
-                  td(t.type),
-                  td(t.amount, styles.mono),
-                  td(t.description ?? "", styles.muted)
+                (t2) => (0, import_vue12.h)("tr", { key: t2.id }, [
+                  td(new Date(t2.createdAt).toLocaleString(), styles.muted),
+                  td(t2.type),
+                  td(t2.amount, styles.mono),
+                  td(t2.description ?? "", styles.muted)
                 ])
               )
             ),
@@ -1378,7 +1435,7 @@ var AdminShell = (0, import_vue14.defineComponent)({
             ];
           return (0, import_vue14.h)(import_vue_courier_admin_screens.TemplateListScreen, {
             client: kc,
-            "onSelect-template": (t) => editing.value = { kind: "template", type: t.type }
+            "onSelect-template": (t2) => editing.value = { kind: "template", type: t2.type }
           });
         }
       }