@bygghammar/cms-platform 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -67,7 +67,16 @@
     "./i18n/json": "./src/i18n/json.ts",
     "./i18n/resolve-locale": "./src/i18n/resolve-locale.ts",
     "./i18n/translation-meta": "./src/i18n/translation-meta.ts",
-    "./platform": "./src/platform/index.ts"
+    "./platform": "./src/platform/index.ts",
+    "./admin/format-log": "./src/admin/format-log.ts",
+    "./backoffice/forms/ConditionBuilder": "./src/backoffice/forms/ConditionBuilder.tsx",
+    "./backoffice/forms/RuleSimulator": "./src/backoffice/forms/RuleSimulator.tsx",
+    "./backoffice/forms/SmartTags": "./src/backoffice/forms/SmartTags.tsx",
+    "./backoffice/forms/ActivityLog": "./src/backoffice/forms/ActivityLog.tsx",
+    "./backoffice/ProgressBar": "./src/backoffice/ProgressBar.tsx",
+    "./backoffice/PreviewLightbox": "./src/backoffice/PreviewLightbox.tsx",
+    "./backoffice/RichTextEditor": "./src/backoffice/RichTextEditor.tsx",
+    "./backoffice/media/ConfirmDialog": "./src/backoffice/media/ConfirmDialog.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"
@@ -80,7 +89,18 @@
     "sonner": ">=2",
     "@supabase/supabase-js": ">=2",
     "@tanstack/react-start": ">=1",
-    "@tanstack/react-router": ">=1"
+    "@tanstack/react-router": ">=1",
+    "@tiptap/react": ">=3",
+    "@tiptap/starter-kit": ">=3",
+    "@tiptap/pm": ">=3",
+    "@tiptap/extensions": ">=3",
+    "@tiptap/extension-image": ">=3",
+    "@tiptap/extension-text-align": ">=3",
+    "@tiptap/extension-highlight": ">=3",
+    "@tiptap/extension-subscript": ">=3",
+    "@tiptap/extension-superscript": ">=3",
+    "@tiptap/extension-text-style": ">=3",
+    "@tiptap/extension-table": ">=3"
   },
   "peerDependenciesMeta": {
     "@supabase/supabase-js": {
@@ -91,6 +111,39 @@
     },
     "@tanstack/react-router": {
       "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "@tiptap/pm": {
+      "optional": true
+    },
+    "@tiptap/extensions": {
+      "optional": true
+    },
+    "@tiptap/extension-image": {
+      "optional": true
+    },
+    "@tiptap/extension-text-align": {
+      "optional": true
+    },
+    "@tiptap/extension-highlight": {
+      "optional": true
+    },
+    "@tiptap/extension-subscript": {
+      "optional": true
+    },
+    "@tiptap/extension-superscript": {
+      "optional": true
+    },
+    "@tiptap/extension-text-style": {
+      "optional": true
+    },
+    "@tiptap/extension-table": {
+      "optional": true
     }
   }
 }

package/src/admin/format-log.ts

@@ -0,0 +1,217 @@
+// Turn machine action codes and JSON meta into human-readable strings for the
+// backoffice Audit and Email log views.
+
+const ACTION_LABELS: Record<string, string> = {
+  "user.create": "Created user",
+  "user.delete": "Deleted user",
+  "user.password_reset": "Reset password",
+  "user.invite": "Invited user",
+  "role.grant": "Granted role",
+  "role.revoke": "Revoked role",
+  "role.update": "Updated role",
+  "email.settings.update": "Updated email settings",
+  "email.settings.test": "Sent test email",
+  "content.section.save": "Saved section",
+  "content.section.delete": "Deleted section",
+  "page.create": "Created page",
+  "page.update": "Updated page",
+  "page.delete": "Deleted page",
+  "page.publish": "Published page",
+  "page.unpublish": "Unpublished page",
+  "page.version.create": "Saved page version",
+  "page.version.restore": "Restored page version",
+  "template.create": "Created block template",
+  "template.update": "Updated block template",
+  "template.delete": "Deleted block template",
+  "global.section.save": "Saved global block",
+  "global.section.delete": "Deleted global block",
+  "domain.create": "Added locale domain",
+  "domain.update": "Updated locale domain",
+  "domain.delete": "Removed locale domain",
+  "seo.update": "Updated SEO",
+  "media.upload": "Uploaded media",
+  "media.delete": "Deleted media",
+  "media.import": "Imported external media",
+  "translate.run": "Ran auto-translation",
+  "form.create": "Created form",
+  "form.update": "Updated form",
+  "form.duplicate": "Duplicated form",
+  "form.soft_delete": "Moved form to bin",
+  "form.restore": "Restored form",
+  "form.purge": "Permanently deleted form",
+  "form.defaults.update": "Updated shared form defaults",
+  "auth.login": "Signed in",
+  "auth.logout": "Signed out",
+};
+
+const ENTITY_LABELS: Record<string, string> = {
+  user: "User",
+  user_role: "Role",
+  content_section: "Section",
+  page: "Page",
+  page_version: "Page version",
+  page_publication: "Publication",
+  block_template: "Template",
+  global_section: "Global block",
+  locale_domain: "Domain",
+  page_seo: "SEO",
+  email_settings: "Email settings",
+  media: "Media",
+  redirect: "Redirect",
+  forms: "Form",
+};
+
+export function humanizeAction(action: string | null | undefined): string {
+  if (!action) return "—";
+  if (ACTION_LABELS[action]) return ACTION_LABELS[action];
+  // Fallback: turn "some.snake_case.action" into "Some snake case action".
+  return action
+    .replace(/[._-]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .replace(/^./, (c) => c.toUpperCase());
+}
+
+export function humanizeEntity(entity: string | null | undefined): string {
+  if (!entity) return "—";
+  return (
+    ENTITY_LABELS[entity] ?? entity.replace(/[._-]+/g, " ").replace(/^./, (c) => c.toUpperCase())
+  );
+}
+
+function shortId(id: string): string {
+  if (id.length <= 12) return id;
+  // UUID-style: keep first + last block for context
+  if (/^[0-9a-f]{8}-/i.test(id)) return id.slice(0, 8) + "…";
+  return id.slice(0, 10) + "…";
+}
+
+export function formatEntityRef(
+  entity: string | null | undefined,
+  entityId: string | null | undefined,
+): string {
+  const label = humanizeEntity(entity);
+  if (!entityId) return label;
+  return `${label} · ${shortId(entityId)}`;
+}
+
+/**
+ * Convert an arbitrary `meta` payload into a short prose summary suitable for
+ * a log row. Falls back to compact key: value pairs, and finally to nothing.
+ */
+export function summarizeMeta(meta: unknown): string {
+  if (!meta || typeof meta !== "object") return "";
+  const m = meta as Record<string, unknown>;
+  if (!Object.keys(m).length) return "";
+
+  const parts: string[] = [];
+  const push = (label: string, value: unknown) => {
+    if (value == null || value === "") return;
+    if (typeof value === "object") {
+      try {
+        parts.push(`${label}: ${JSON.stringify(value)}`);
+      } catch {
+        /* noop */
+      }
+      return;
+    }
+    parts.push(`${label}: ${String(value)}`);
+  };
+
+  // Common well-known fields, in a nice order
+  const known = [
+    ["summary", "Summary"],
+    ["email", "Email"],
+    ["role", "Role"],
+    ["name", "Name"],
+    ["key", "Key"],
+    ["slug", "Slug"],
+    ["locale", "Locale"],
+    ["from", "From"],
+    ["to", "To"],
+    ["reason", "Reason"],
+    ["status", "Status"],
+    ["version", "Version"],
+    ["count", "Count"],
+    ["path", "Path"],
+    ["domain", "Domain"],
+    ["title", "Title"],
+  ] as const;
+  const used = new Set<string>();
+  for (const [k, label] of known) {
+    if (k in m) {
+      push(label, m[k]);
+      used.add(k);
+    }
+  }
+  // Any remaining keys, up to 4 total extra fields
+  const extras = Object.keys(m)
+    .filter((k) => !used.has(k))
+    .slice(0, 4);
+  for (const k of extras) {
+    push(
+      k.replace(/[._-]+/g, " ").replace(/^./, (c) => c.toUpperCase()),
+      m[k],
+    );
+  }
+  return parts.join(" · ");
+}
+
+export function formatRelativeTime(iso: string): string {
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "—";
+  const diff = Date.now() - then;
+  const s = Math.round(diff / 1000);
+  if (s < 45) return "just now";
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m} min ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h} h ago`;
+  const d = Math.round(h / 24);
+  if (d < 30) return `${d} d ago`;
+  const mo = Math.round(d / 30);
+  if (mo < 12) return `${mo} mo ago`;
+  const y = Math.round(mo / 12);
+  return `${y} y ago`;
+}
+
+export function formatAbsoluteTime(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "—";
+  return d.toLocaleString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export function emailStatusTone(status: string | null | undefined): {
+  label: string;
+  className: string;
+} {
+  const s = (status ?? "").toLowerCase();
+  const map: Record<string, { label: string; className: string }> = {
+    sent: { label: "Sent", className: "border-green-600 text-green-700 bg-green-50" },
+    delivered: { label: "Delivered", className: "border-green-600 text-green-700 bg-green-50" },
+    queued: { label: "Queued", className: "border-ink/30 text-ink/70 bg-ink/5" },
+    pending: { label: "Pending", className: "border-ink/30 text-ink/70 bg-ink/5" },
+    failed: { label: "Failed", className: "border-red-600 text-red-700 bg-red-50" },
+    rejected: { label: "Rejected", className: "border-red-600 text-red-700 bg-red-50" },
+    bounced: { label: "Bounced", className: "border-amber-600 text-amber-700 bg-amber-50" },
+    complained: { label: "Complained", className: "border-amber-600 text-amber-700 bg-amber-50" },
+    suppressed: { label: "Suppressed", className: "border-amber-600 text-amber-700 bg-amber-50" },
+    unsubscribed: { label: "Unsubscribed", className: "border-ink/30 text-ink/70 bg-ink/5" },
+    rate_limited: {
+      label: "Rate limited",
+      className: "border-amber-600 text-amber-700 bg-amber-50",
+    },
+  };
+  return (
+    map[s] ?? {
+      label: status ?? "Unknown",
+      className: "border-ink/30 text-ink/60 bg-white",
+    }
+  );
+}

package/src/backoffice/PreviewLightbox.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { Lightbox } from "../ui/Lightbox";
+
+const DESIGN_WIDTH = 1280;
+
+/**
+ * Backoffice preview lightbox: renders a route inside a scaled iframe.
+ * Closing follows the shared site behaviour — Escape, backdrop click, or a
+ * click on the preview itself (the frame is look-only, covered by a
+ * transparent click catcher because iframe clicks never bubble out).
+ */
+export function PreviewLightbox({
+  open,
+  onClose,
+  src,
+  title,
+}: {
+  open: boolean;
+  onClose: () => void;
+  src: string;
+  title: string;
+}) {
+  const [scale, setScale] = useState(1);
+  const [frameHeight, setFrameHeight] = useState(800);
+
+  useEffect(() => {
+    if (!open) return;
+    const measure = () => {
+      const availW = Math.max(320, window.innerWidth - 96);
+      const availH = Math.max(320, window.innerHeight - 120);
+      setScale(Math.min(1, availW / DESIGN_WIDTH));
+      setFrameHeight(Math.round(availH / Math.min(1, availW / DESIGN_WIDTH)));
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <Lightbox open={open} onClose={onClose} label={title} closeOnContentClick>
+      <div
+        className="relative bg-white shadow-2xl overflow-hidden"
+        style={{
+          width: DESIGN_WIDTH * scale,
+          height: frameHeight * scale,
+        }}
+      >
+        <iframe
+          src={src}
+          title={title}
+          className="absolute left-0 top-0 border-0"
+          style={{
+            width: DESIGN_WIDTH,
+            height: frameHeight,
+            transform: `scale(${scale})`,
+            transformOrigin: "top left",
+          }}
+        />
+        {/* Click catcher: iframe clicks can't bubble to the overlay. */}
+        <div className="absolute inset-0 cursor-pointer" onClick={onClose} />
+      </div>
+    </Lightbox>
+  );
+}

package/src/backoffice/ProgressBar.tsx

@@ -0,0 +1,36 @@
+type Props = {
+  /** 0–100, or null for an indeterminate bar */
+  value: number | null;
+  label?: string;
+  detail?: string;
+};
+
+/** Slim determinate/indeterminate progress bar used by the backoffice long-running tools. */
+export function ProgressBar({ value, label, detail }: Props) {
+  const pct = value === null ? null : Math.max(0, Math.min(100, value));
+  return (
+    <div className="w-full">
+      {label || detail ? (
+        <div className="mb-2 flex items-baseline justify-between gap-4">
+          <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+          <span className="text-[0.65rem] tabular-nums text-ink/45">
+            {detail}
+            {pct !== null ? `${detail ? " · " : ""}${Math.round(pct)}%` : ""}
+          </span>
+        </div>
+      ) : null}
+      <div className="h-1.5 w-full overflow-hidden bg-ink/10">
+        {pct === null ? (
+          <div className="h-full w-1/3 animate-[progress-slide_1.2s_ease-in-out_infinite] bg-sea" />
+        ) : (
+          <div
+            className="h-full bg-sea transition-[width] duration-300 ease-out"
+            style={{ width: `${pct}%` }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ProgressBar;