@bygghammar/cms-platform 0.3.1 → 0.5.0

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.3.1",
+  "version": "0.5.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,
   "license": "UNLICENSED",
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "access": "public"
   },
   "files": [
     "src",
@@ -18,9 +17,6 @@
     "url": "git+https://github.com/byggis79/devsba.git",
     "directory": "packages/cms-platform"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "exports": {
     ".": "./src/index.ts",
     "./i18n": "./src/i18n/index.ts",
@@ -44,7 +40,39 @@
     "./blocks/registry": "./src/blocks/registry.tsx",
     "./trips": "./src/trips/index.ts",
     "./trips/TripSectionEditor": "./src/trips/TripSectionEditor.tsx",
-    "./navigation": "./src/navigation/index.ts"
+    "./navigation": "./src/navigation/index.ts",
+    "./forms/conditions": "./src/forms/conditions.ts",
+    "./forms/field-sets": "./src/forms/field-sets.ts",
+    "./forms/form-audit": "./src/forms/form-audit.ts",
+    "./forms/rich-text": "./src/forms/rich-text.tsx",
+    "./media/urls": "./src/media/urls.ts",
+    "./media/filename": "./src/media/filename.ts",
+    "./media/focus": "./src/media/focus.ts",
+    "./media/internal-paths": "./src/media/internal-paths.ts",
+    "./media/optimize": "./src/media/optimize.ts",
+    "./media/srcset": "./src/media/srcset.ts",
+    "./media/media-meta": "./src/media/media-meta.ts",
+    "./media/review-image": "./src/media/review-image.ts",
+    "./media/storage": "./src/media/storage.ts",
+    "./media/usage-types": "./src/media/usage-types.ts",
+    "./cms/version-diff": "./src/cms/version-diff.ts",
+    "./cms/shared-draft-store": "./src/cms/shared-draft-store.ts",
+    "./http/cache-policy": "./src/http/cache-policy.ts",
+    "./http/compression": "./src/http/compression.ts",
+    "./http/response-headers": "./src/http/response-headers.ts",
+    "./backup/datasets": "./src/backup/datasets.ts",
+    "./backup/export-core": "./src/backup/export-core.ts",
+    "./backup/restore-core": "./src/backup/restore-core.ts",
+    "./backup/media-export": "./src/backup/media-export.ts",
+    "./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",
+    "./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"
   },
   "dependencies": {
     "fflate": "^0.8.3"
@@ -54,6 +82,20 @@
     "lucide-react": ">=0.5.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "sonner": ">=2"
+    "sonner": ">=2",
+    "@supabase/supabase-js": ">=2",
+    "@tanstack/react-start": ">=1",
+    "@tanstack/react-router": ">=1"
+  },
+  "peerDependenciesMeta": {
+    "@supabase/supabase-js": {
+      "optional": true
+    },
+    "@tanstack/react-start": {
+      "optional": true
+    },
+    "@tanstack/react-router": {
+      "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/forms/ActivityLog.tsx

@@ -0,0 +1,153 @@
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+/** Shape of one audit row the host site returns for form activity. */
+export type FormActivityRow = {
+  id: string;
+  action: string;
+  actor_email: string | null;
+  actor_id: string | null;
+  entity_id: string | null;
+  meta: Record<string, unknown> | null;
+  created_at: string;
+};
+import type { FormAuditChange } from "../../forms/form-audit";
+import { formatAbsoluteTime, formatRelativeTime } from "../../admin/format-log";
+
+const ACTION_LABELS: Record<string, string> = {
+  "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",
+};
+
+function label(action: string) {
+  return ACTION_LABELS[action] ?? action.replace(/[._]/g, " ");
+}
+
+/** Who changed what and when, for one form or for the whole Forms module. */
+export function ActivityLog({
+  formKey,
+  fetchActivity,
+}: {
+  formKey?: string;
+  /** Host-provided reader for form audit rows. */
+  fetchActivity: (input: {
+    data: { formKey?: string; limit: number };
+  }) => Promise<FormActivityRow[]>;
+}) {
+  const q = useQuery({
+    queryKey: ["form-activity", formKey ?? "all"],
+    queryFn: () => fetchActivity({ data: { ...(formKey ? { formKey } : {}), limit: 200 } }),
+  });
+  const [search, setSearch] = useState("");
+  const [open, setOpen] = useState<string | null>(null);
+
+  const rows = (q.data ?? []) as FormActivityRow[];
+  const filtered = useMemo(() => {
+    const s = search.trim().toLowerCase();
+    if (!s) return rows;
+    return rows.filter((r) =>
+      [r.actor_email, label(r.action), JSON.stringify(r.meta ?? {})]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase()
+        .includes(s),
+    );
+  }, [rows, search]);
+
+  return (
+    <div className="border border-ink/10 bg-white">
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-ink/10 p-4">
+        <div>
+          <h3 className="font-serif text-base">Activity log</h3>
+          <p className="text-xs text-ink/60">
+            Every change to this form and its fields — who, what and when.
+          </p>
+        </div>
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search user, field, change…"
+          className="w-64 border border-ink/15 px-3 py-2 text-sm focus:border-sea focus:outline-none"
+        />
+      </div>
+
+      {q.isLoading ? (
+        <p className="p-6 text-sm text-ink/50">Loading activity…</p>
+      ) : filtered.length === 0 ? (
+        <p className="p-6 text-sm text-ink/50">
+          {rows.length === 0 ? "No changes recorded yet." : "No entries match your search."}
+        </p>
+      ) : (
+        <ul className="divide-y divide-ink/10">
+          {filtered.map((r) => {
+            const meta = (r.meta ?? {}) as {
+              summary?: string;
+              name?: string;
+              key?: string;
+              changes?: FormAuditChange[];
+            };
+            const changes = Array.isArray(meta.changes) ? meta.changes : [];
+            const isOpen = open === r.id;
+            return (
+              <li key={r.id}>
+                <button
+                  type="button"
+                  onClick={() => setOpen(isOpen ? null : r.id)}
+                  className="flex w-full items-start gap-4 p-4 text-left hover:bg-ink/[0.02]"
+                >
+                  <div className="w-40 shrink-0">
+                    <div className="text-sm text-ink">{formatRelativeTime(r.created_at)}</div>
+                    <div className="text-[0.65rem] text-ink/50">
+                      {formatAbsoluteTime(r.created_at)}
+                    </div>
+                  </div>
+                  <div className="w-56 shrink-0 text-sm text-ink/80 break-all">
+                    {r.actor_email ?? "System"}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm text-ink">{label(r.action)}</div>
+                    <div className="mt-1 text-xs text-ink/60 line-clamp-2">
+                      {meta.summary ??
+                        (changes.length ? `${changes.length} change(s)` : (meta.name ?? ""))}
+                    </div>
+                  </div>
+                  <span className="pt-1 text-xs text-ink/40">{isOpen ? "▾" : "▸"}</span>
+                </button>
+                {isOpen ? (
+                  <div className="border-t border-ink/10 bg-ink/[0.02] p-4">
+                    {changes.length === 0 ? (
+                      <p className="text-xs text-ink/60">No field-level detail recorded.</p>
+                    ) : (
+                      <table className="w-full text-xs">
+                        <thead className="text-[0.6rem] uppercase tracking-[0.2em] text-ink/50">
+                          <tr>
+                            <th className="p-2 text-left">What</th>
+                            <th className="p-2 text-left">Before</th>
+                            <th className="p-2 text-left">After</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {changes.map((c, i) => (
+                            <tr key={i} className="border-t border-ink/10 align-top">
+                              <td className="p-2 text-ink/80">{c.label}</td>
+                              <td className="p-2 text-ink/60 break-all">{c.from ?? "—"}</td>
+                              <td className="p-2 text-ink break-all">{c.to ?? "—"}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    )}
+                  </div>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/backoffice/forms/ConditionBuilder.tsx

@@ -0,0 +1,170 @@
+import { useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { CONDITION_OPERATORS, isUnaryOperator } from "../../forms/conditions";
+import type { ConditionRule, FieldCondition, FormFieldDef } from "../../forms/field-sets";
+
+/**
+ * Editor for one show/require rule: "all|any of these conditions match".
+ * Conditions can only reference other fields, never the field itself.
+ */
+export function ConditionBuilder({
+  title,
+  description,
+  rule,
+  fields,
+  selfKey,
+  onChange,
+}: {
+  title: string;
+  description: string;
+  rule: ConditionRule | undefined;
+  fields: FormFieldDef[];
+  selfKey?: string;
+  onChange: (rule: ConditionRule | undefined) => void;
+}) {
+  const conditions = rule?.conditions ?? [];
+  const mode = rule?.mode ?? "all";
+  const candidates = fields.filter((f) => f.key !== selfKey);
+
+  const set = (next: FieldCondition[], nextMode: "all" | "any" = mode) =>
+    onChange(next.length ? { mode: nextMode, conditions: next } : undefined);
+
+  const patch = (i: number, p: Partial<FieldCondition>) =>
+    set(conditions.map((c, idx) => (idx === i ? { ...c, ...p } : c)));
+
+  const optionsFor = (key: string) => fields.find((f) => f.key === key)?.options ?? [];
+
+  return (
+    <div className="space-y-2 border border-ink/10 bg-white p-3">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <div className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">{title}</div>
+          <p className="mt-0.5 text-xs text-ink/45">{description}</p>
+        </div>
+        {conditions.length > 1 ? (
+          <select
+            value={mode}
+            onChange={(e) => set(conditions, e.target.value as "all" | "any")}
+            className="border border-ink/15 px-2 py-1 text-xs"
+          >
+            <option value="all">Match all</option>
+            <option value="any">Match any</option>
+          </select>
+        ) : null}
+      </div>
+
+      {conditions.length === 0 ? (
+        <p className="text-xs text-ink/40">No conditions — always applies.</p>
+      ) : null}
+
+      {conditions.map((c, i) => {
+        const opts = optionsFor(c.field);
+        return (
+          <div key={i} className="flex flex-wrap items-center gap-2">
+            <select
+              value={c.field}
+              onChange={(e) => patch(i, { field: e.target.value })}
+              className="min-w-[130px] flex-1 border border-ink/15 px-2 py-1 text-xs"
+            >
+              <option value="">Choose a field…</option>
+              {candidates.map((f) => (
+                <option key={f.key} value={f.key}>
+                  {f.label.sv || f.label.en || f.key}
+                </option>
+              ))}
+            </select>
+            <select
+              value={c.op}
+              onChange={(e) => patch(i, { op: e.target.value as FieldCondition["op"] })}
+              className="min-w-[120px] border border-ink/15 px-2 py-1 text-xs"
+            >
+              {CONDITION_OPERATORS.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
+            </select>
+            {isUnaryOperator(c.op) ? null : opts.length ? (
+              <select
+                value={c.value ?? ""}
+                onChange={(e) => patch(i, { value: e.target.value })}
+                className="min-w-[120px] flex-1 border border-ink/15 px-2 py-1 text-xs"
+              >
+                <option value="">—</option>
+                {opts.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label?.sv || o.label?.en || o.value}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <input
+                value={c.value ?? ""}
+                onChange={(e) => patch(i, { value: e.target.value })}
+                placeholder="value"
+                className="min-w-[120px] flex-1 border border-ink/15 px-2 py-1 text-xs"
+              />
+            )}
+            <button
+              type="button"
+              onClick={() => set(conditions.filter((_, idx) => idx !== i))}
+              className="text-ink/35 hover:text-red-500"
+              title="Remove condition"
+            >
+              <Trash2 className="size-3.5" />
+            </button>
+          </div>
+        );
+      })}
+
+      <button
+        type="button"
+        disabled={candidates.length === 0}
+        onClick={() =>
+          set([...conditions, { field: candidates[0]?.key ?? "", op: "equals", value: "" }])
+        }
+        className="inline-flex items-center gap-1.5 border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea disabled:opacity-40"
+      >
+        <Plus className="size-3.5" />
+        Add condition
+      </button>
+    </div>
+  );
+}
+
+/** Compact summary chip used in collapsed field rows. */
+export function RuleSummary({
+  rule,
+  fields,
+  prefix,
+}: {
+  rule: ConditionRule | undefined;
+  fields: FormFieldDef[];
+  prefix: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const list = rule?.conditions ?? [];
+  if (list.length === 0) return null;
+  const nameOf = (key: string) => {
+    const f = fields.find((x) => x.key === key);
+    return f?.label.sv || f?.label.en || key;
+  };
+  const opLabel = (op: FieldCondition["op"]) =>
+    CONDITION_OPERATORS.find((o) => o.value === op)?.label ?? op;
+  const text = list
+    .map(
+      (c) =>
+        `${nameOf(c.field)} ${opLabel(c.op)}${isUnaryOperator(c.op) ? "" : ` “${c.value ?? ""}”`}`,
+    )
+    .join(rule?.mode === "any" ? " or " : " and ");
+  return (
+    <button
+      type="button"
+      onClick={() => setOpen((v) => !v)}
+      title={text}
+      className="max-w-full truncate bg-sea/15 px-2 py-0.5 text-[0.6rem] uppercase tracking-[0.14em] text-ink/70"
+    >
+      {prefix}: {open ? text : `${list.length} condition${list.length === 1 ? "" : "s"}`}
+    </button>
+  );
+}