@fonderie/vue-admin-screens 0.7.0 → 0.8.0

package/dist/index.js

@@ -4,20 +4,49 @@ import { TemplateEditorScreen, TemplateListScreen } from "@fonderie/vue-courier-
 import { computed as computed2, defineComponent as defineComponent13, h as h14, ref as ref5 } from "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",
@@ -25,51 +54,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
@@ -97,7 +154,7 @@ function table(headers, rows) {
     h("thead", [
       h(
         "tr",
-        headers.map((t) => h("th", { style: styles.th }, t))
+        headers.map((t2) => h("th", { style: styles.th }, t2))
       )
     ]),
     h("tbody", rows)
@@ -516,8 +573,8 @@ var TokensScreen = defineComponent8({
                   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(() => {
@@ -563,35 +620,35 @@ var TokensScreen = defineComponent8({
           r?.issued && r.issued.length > 0 ? table(
             ["Name", "Scopes", "Created", "Expires", "Last used", ""],
             r.issued.map(
-              (t) => h9("tr", { key: t.id }, [
+              (t2) => h9("tr", { key: t2.id }, [
                 td([
-                  t.name,
-                  t.revokedAt ? h9("span", { style: styles.badge }, " revoked") : ""
+                  t2.name,
+                  t2.revokedAt ? h9("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 ? "" : h9(
+                  t2.revokedAt ? "" : h9(
                     "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(() => {
                           });
                       }
                     },
@@ -842,7 +899,7 @@ var CatalogScreen = defineComponent10({
             {
               style: {
                 ...styles.mono,
-                background: "#f9fafb",
+                background: "var(--fonderie-surface-alt,#fafafa)",
                 padding: "12px",
                 overflowX: "auto"
               }
@@ -902,11 +959,11 @@ var SubscriberScreen = defineComponent11({
     const subscriber = ref3(null);
     const list = useAdminSubscribers(props.client, { limit: props.pageSize });
     const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = 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 = ref3("");
     const note = ref3("");
@@ -1086,11 +1143,11 @@ var SubscriberScreen = defineComponent11({
             ledger.value.length === 0 ? h12("p", { style: styles.muted }, "Nothing moved yet.") : table(
               ["When", "Kind", "Amount", "Note"],
               ledger.value.map(
-                (t) => h12("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) => h12("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)
                 ])
               )
             ),
@@ -1345,7 +1402,7 @@ var AdminShell = defineComponent13({
             ];
           return h14(TemplateListScreen, {
             client: kc,
-            "onSelect-template": (t) => editing.value = { kind: "template", type: t.type }
+            "onSelect-template": (t2) => editing.value = { kind: "template", type: t2.type }
           });
         }
       }