@bygghammar/cms-platform 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.5.0",
+  "version": "0.7.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,
@@ -72,7 +72,14 @@
     "./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/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",
+    "./backoffice/media/MediaCleanup": "./src/backoffice/media/MediaCleanup.tsx",
+    "./backoffice/media/MediaReplaceDialog": "./src/backoffice/media/MediaReplaceDialog.tsx",
+    "./backoffice/media/ReuploadOverwrite": "./src/backoffice/media/ReuploadOverwrite.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"
@@ -85,7 +92,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": {
@@ -96,6 +114,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/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;