@bygghammar/cms-platform 0.1.0

package/src/backoffice/inspectors/fields.tsx

@@ -0,0 +1,436 @@
+import { useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { X, Image as ImageIcon, Upload, Loader2 } from "lucide-react";
+
+import type { LocalizedString } from "../../i18n";
+import { SUPPORTED_LOCALES, LOCALE_LABELS, type Locale } from "../../i18n";
+
+
+import {
+  FocalImage,
+  FocusPicker,
+  useHostMediaLibraryOptions,
+  useHostMediaUpload,
+  type HostMediaItem as MediaItem,
+} from "../../host";
+
+type LocValue = Partial<LocalizedString> | undefined;
+
+export function LocalizedField({
+  label,
+  value,
+  onChange,
+  multiline,
+  placeholder,
+}: {
+  label: string;
+  value: LocValue;
+  onChange: (next: Partial<LocalizedString>) => void;
+  multiline?: boolean;
+  placeholder?: Partial<Record<Locale, string>>;
+}) {
+  const v = (value ?? {}) as Record<string, string>;
+  return (
+    <div className="space-y-1.5">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+        {label}
+      </div>
+      <div className="space-y-2">
+        {SUPPORTED_LOCALES.map((loc) => {
+          const commonProps = {
+            value: v[loc] ?? "",
+            placeholder: placeholder?.[loc] ?? "",
+            onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+              onChange({ ...v, [loc]: e.target.value } as Partial<LocalizedString>),
+            className:
+              "w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea",
+          };
+          return (
+            <div key={loc} className="flex gap-2 items-start">
+              <span className="mt-1.5 shrink-0 text-[0.65rem] uppercase tracking-widest text-ink/45 w-8">
+                {LOCALE_LABELS[loc] ?? loc}
+              </span>
+              {multiline ? (
+                <textarea rows={3} {...commonProps} />
+              ) : (
+                <input type="text" {...commonProps} />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function TextField({
+  label,
+  value,
+  onChange,
+  placeholder,
+}: {
+  label: string;
+  value: string | undefined;
+  onChange: (v: string) => void;
+  placeholder?: string;
+}) {
+  return (
+    <label className="block space-y-1.5">
+      <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+        {label}
+      </span>
+      <input
+        type="text"
+        value={value ?? ""}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+      />
+    </label>
+  );
+}
+
+export function InspectorSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-3 border-b border-ink/10 pb-5 last:border-b-0 last:pb-0">
+      <div className="text-xs font-medium uppercase tracking-[0.18em] text-ink">
+        {title}
+      </div>
+      <div className="space-y-4">{children}</div>
+    </section>
+  );
+}
+
+/* ---------------- Media picker ---------------- */
+
+export function MediaPickerDialog({
+  accept,
+  onPick,
+  onPickMany,
+  onClose,
+  multiple,
+}: {
+  accept?: "image" | "video" | "any";
+  onPick: (item: MediaItem) => void;
+  onPickMany?: (items: MediaItem[]) => void;
+  onClose: () => void;
+  multiple?: boolean;
+}) {
+  const mediaLibraryOptions = useHostMediaLibraryOptions();
+  const { data = [], isLoading } = useQuery(mediaLibraryOptions);
+  const [q, setQ] = useState("");
+  const [selected, setSelected] = useState<MediaItem[]>([]);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const { upload, uploading, progress } = useHostMediaUpload(data);
+  const acceptAttr = accept === "image" ? "image/*" : accept === "video" ? "video/*" : undefined;
+
+  const handleFiles = async (files: FileList | null) => {
+    if (!files?.length) return;
+    try {
+      const urls = await upload(files);
+      if (fileInput.current) fileInput.current.value = "";
+      const items = urls.map((last) => {
+        const name = decodeURIComponent(last.split("/").pop() ?? "");
+        return {
+          name,
+          path: name,
+          size: 0,
+          contentType: /\.(mp4|webm|mov)$/i.test(name) ? "video/mp4" : "image/webp",
+          updatedAt: null,
+          url: last,
+        } as MediaItem;
+      });
+      if (!items.length) return;
+      toast.success(`Uploaded ${items.length} file${items.length > 1 ? "s" : ""}`);
+      if (multiple) {
+        setSelected((prev) => {
+          const seen = new Set(prev.map((m) => m.path));
+          return [...prev, ...items.filter((m) => !seen.has(m.path))];
+        });
+      } else {
+        onPick(items[items.length - 1]);
+        onClose();
+      }
+    } catch (e: any) {
+      toast.error(e?.message ?? "Upload failed");
+    }
+  };
+
+  const toggle = (m: MediaItem) => {
+    if (!multiple) {
+      onPick(m);
+      onClose();
+      return;
+    }
+    setSelected((prev) =>
+      prev.some((x) => x.path === m.path)
+        ? prev.filter((x) => x.path !== m.path)
+        : [...prev, m],
+    );
+  };
+
+  const confirm = () => {
+    if (onPickMany) onPickMany(selected);
+    else selected.forEach(onPick);
+    onClose();
+  };
+
+
+  const filtered = data.filter((m) => {
+    if (accept === "image" && !(m.contentType ?? "").startsWith("image/")) return false;
+    if (accept === "video" && !(m.contentType ?? "").startsWith("video/")) return false;
+    if (q && !m.name.toLowerCase().includes(q.toLowerCase())) return false;
+    return true;
+  });
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
+      <div
+        className="w-full max-w-4xl max-h-[85vh] bg-white border border-ink/15 flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 border-b border-ink/10 p-3">
+          <ImageIcon className="size-4 text-ink/60" />
+          <span className="text-sm font-medium text-ink">Media library</span>
+          <input
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search…"
+            className="ml-3 flex-1 border border-ink/15 px-2 py-1 text-sm focus:outline-none focus:border-sea"
+          />
+          <input
+            ref={fileInput}
+            type="file"
+            multiple
+            accept={acceptAttr}
+            className="hidden"
+            onChange={(e) => handleFiles(e.target.files)}
+          />
+          <button
+            type="button"
+            disabled={uploading}
+            onClick={() => fileInput.current?.click()}
+            className="inline-flex items-center gap-1.5 border border-ink/20 px-3 py-1 text-xs uppercase tracking-widest text-ink hover:border-sea disabled:opacity-50"
+          >
+            {uploading ? <Loader2 className="size-3.5 animate-spin" /> : <Upload className="size-3.5" />}
+            {uploading ? "Uploading…" : "Upload"}
+          </button>
+          <button onClick={onClose} className="text-ink/50 hover:text-ink p-1"><X className="size-4" /></button>
+        </div>
+        {progress ? (
+          <div className="border-b border-ink/10 px-3 py-2">
+            <div className="mb-1 flex items-center justify-between text-[0.7rem] text-ink/60">
+              <span className="truncate">{progress.label}</span>
+              <span>{progress.percent}%</span>
+            </div>
+            <div className="h-1.5 w-full bg-ice/60 overflow-hidden">
+              <div
+                className="h-full bg-sea transition-all duration-200"
+                style={{ width: `${progress.percent}%` }}
+              />
+            </div>
+          </div>
+        ) : null}
+        <div className="flex-1 overflow-auto p-3">
+          {isLoading ? (
+            <div className="text-sm text-ink/60">Loading…</div>
+          ) : filtered.length === 0 ? (
+            <div className="text-sm text-ink/60">No media yet — use Upload above to add files.</div>
+
+          ) : (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+              {filtered.map((m) => {
+                const isImg = (m.contentType ?? "").startsWith("image/");
+                const isVid = (m.contentType ?? "").startsWith("video/");
+                const isSel = multiple && selected.some((x) => x.path === m.path);
+                return (
+                  <button
+                    key={m.path}
+                    onClick={() => toggle(m)}
+                    className={`group border text-left relative ${
+                      isSel ? "border-sea ring-2 ring-sea/40" : "border-ink/10 hover:border-sea"
+                    }`}
+                  >
+                    {isSel && (
+                      <span className="absolute top-2 right-2 z-10 flex size-5 items-center justify-center bg-sea text-ink text-xs font-bold">✓</span>
+                    )}
+                    <div className="aspect-video bg-ice/40 flex items-center justify-center overflow-hidden">
+                      {isImg ? (
+                        <img src={m.url} alt="" className="h-full w-full object-cover" />
+                      ) : isVid ? (
+                        <video src={m.url} muted className="h-full w-full object-cover" />
+                      ) : (
+                        <span className="text-xs text-ink/50">{m.contentType ?? "file"}</span>
+                      )}
+                    </div>
+                    <div className="px-2 py-1.5 text-[0.7rem] text-ink truncate">{m.name}</div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        {multiple && (
+          <div className="flex items-center justify-end gap-2 border-t border-ink/10 p-3">
+            <span className="text-xs text-ink/60">{selected.length} selected</span>
+            <button
+              type="button"
+              onClick={confirm}
+              disabled={selected.length === 0}
+              className="inline-flex items-center gap-1.5 bg-ink px-4 py-1.5 text-xs uppercase tracking-widest text-white hover:bg-sea hover:text-ink disabled:opacity-40"
+            >
+              Add selected
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function MediaField({
+  label,
+  value,
+  onChange,
+  accept = "any",
+  placeholder,
+}: {
+  label: string;
+  value: string | undefined;
+  onChange: (url: string) => void;
+  accept?: "image" | "video" | "any";
+  placeholder?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [focusOpen, setFocusOpen] = useState(false);
+  const isImg = value && /\.(png|jpe?g|gif|webp|avif|svg)(\?|$)/i.test(value);
+  const isVid = value && /\.(mp4|webm|mov)(\?|$)/i.test(value);
+  return (
+    <div className="space-y-1.5">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</div>
+      {value ? (
+        <div className="border border-ink/10 bg-ice/30 aspect-video overflow-hidden flex items-center justify-center">
+          {isImg ? (
+            <FocalImage src={value} responsive={false} alt="" className="h-full w-full object-cover" />
+          ) : isVid ? (
+            <video src={value} muted className="h-full w-full object-cover" />
+          ) : (
+            <span className="text-xs text-ink/50 p-2 break-all">{value}</span>
+          )}
+        </div>
+      ) : null}
+      <div className="flex flex-wrap items-center gap-2">
+        <input
+          type="text"
+          value={value ?? ""}
+          placeholder={placeholder ?? "https://…"}
+          onChange={(e) => onChange(e.target.value)}
+          className="min-w-0 flex-1 basis-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+        />
+
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className="border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-widest text-ink hover:border-sea"
+        >
+          Library
+        </button>
+        {isImg ? (
+          <button
+            type="button"
+            onClick={() => setFocusOpen(true)}
+            className="border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-widest text-ink hover:border-sea"
+            title="Choose which part of the image stays visible when cropped"
+          >
+            Focus
+          </button>
+        ) : null}
+        {value ? (
+          <button
+            type="button"
+            onClick={() => onChange("")}
+            className="border border-ink/20 px-2 py-1.5 text-ink/50 hover:text-red-600"
+            title="Clear"
+          ><X className="size-4" /></button>
+        ) : null}
+      </div>
+      {open && (
+        <MediaPickerDialog
+          accept={accept}
+          onPick={(m) => onChange(m.url)}
+          onClose={() => setOpen(false)}
+        />
+      )}
+      {focusOpen && value ? (
+        <FocusPicker
+          src={value}
+          modal
+          title={value.split("/").pop()}
+          onClose={() => setFocusOpen(false)}
+        />
+      ) : null}
+
+    </div>
+  );
+}
+
+export function MediaMultiField({
+  label,
+  values,
+  onChange,
+  accept = "image",
+}: {
+  label: string;
+  values: string[];
+  onChange: (next: string[]) => void;
+  accept?: "image" | "video" | "any";
+}) {
+  const [open, setOpen] = useState(false);
+  const add = (items: MediaItem[]) => {
+    const seen = new Set(values);
+    const fresh = items.filter((m) => m.url && !seen.has(m.url)).map((m) => m.url);
+    if (fresh.length) onChange([...values, ...fresh]);
+  };
+  return (
+    <div className="space-y-2">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</div>
+      <div className="flex flex-wrap gap-2">
+        {values.map((url, i) => (
+          <div key={`${url}-${i}`} className="relative group border border-ink/10">
+            <img src={url} alt="" className="size-16 object-cover" />
+            <button
+              type="button"
+              onClick={() => onChange(values.filter((_, j) => j !== i))}
+              className="absolute -top-1.5 -right-1.5 flex size-5 items-center justify-center bg-ink text-white hover:bg-red-600"
+              title="Remove"
+            ><X className="size-3" /></button>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className="flex size-16 items-center justify-center border border-dashed border-ink/30 text-ink/50 hover:border-sea hover:text-ink"
+          title="Add images"
+        >
+          <ImageIcon className="size-5" />
+        </button>
+      </div>
+      {open && (
+        <MediaPickerDialog
+          accept={accept}
+          multiple
+          onPick={(m) => add([m])}
+          onPickMany={(items) => add(items)}
+          onClose={() => setOpen(false)}
+        />
+      )}
+
+    </div>
+  );
+}

package/src/blocks/block-props-context.tsx

@@ -0,0 +1,36 @@
+import { createContext, useContext, type ReactNode } from "react";
+import type { BlockProps } from "./types";
+import type { LocalizedString } from "../i18n";
+
+const Ctx = createContext<BlockProps>({});
+
+export function BlockPropsProvider({
+  value,
+  children,
+}: {
+  value: BlockProps | undefined;
+  children: ReactNode;
+}) {
+  return <Ctx.Provider value={value ?? {}}>{children}</Ctx.Provider>;
+}
+
+export function useBlockProps<T = BlockProps>(): T {
+  return useContext(Ctx) as unknown as T;
+}
+
+/**
+ * Merge an override localized string over a base one. Only non-empty
+ * string values in the override are applied; missing/empty locales fall
+ * back to the base value so admins can translate only what they need.
+ */
+export function mergeLocalized(
+  override: Partial<LocalizedString> | undefined | null,
+  base: LocalizedString,
+): LocalizedString {
+  if (!override) return base;
+  const out: Record<string, string> = { ...(base as unknown as Record<string, string>) };
+  for (const [k, v] of Object.entries(override)) {
+    if (typeof v === "string" && v.trim() !== "") out[k] = v;
+  }
+  return out as unknown as LocalizedString;
+}

package/src/blocks/components/CabinTabsBlock.tsx

@@ -0,0 +1,167 @@
+import { useState } from "react";
+import { Check, ChevronLeft, ChevronRight } from "lucide-react";
+import { useT } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import { FocalImage } from "../../host";
+import type { CabinTabsProps } from "../types";
+
+const TONE: Record<string, string> = {
+  white: "bg-white",
+  paper: "bg-paper",
+  ice: "bg-ice",
+};
+
+/**
+ * Cabin categories as clickable tabs — each tab keeps its own description,
+ * bullet list and image gallery. Everything is editable in the page builder.
+ */
+export function CabinTabsBlock({ props }: { props: CabinTabsProps }) {
+  const { t } = useT();
+  const items = props.items ?? [];
+  const [active, setActive] = useState(0);
+  const [slide, setSlide] = useState(0);
+
+  if (items.length === 0) return null;
+
+  const item = items[Math.min(active, items.length - 1)];
+  const images = (item.images ?? []).filter((i) => i.src);
+  const image = images.length > 0 ? images[slide % images.length] : undefined;
+  const tone = TONE[props.tone ?? "white"] ?? "bg-white";
+
+  const select = (i: number) => {
+    setActive(i);
+    setSlide(0);
+  };
+
+  return (
+    <section id={props.anchor || undefined} className={`${tone} py-16 md:py-24`}>
+      <div className="container-editorial">
+        {props.eyebrow || props.title || props.lead ? (
+          <Reveal>
+            <div className="max-w-2xl">
+              {props.eyebrow ? (
+                <span className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+                  {t(props.eyebrow)}
+                </span>
+              ) : null}
+              {props.title ? (
+                <h2 className="mt-3 font-serif text-[clamp(1.8rem,3.6vw,2.9rem)] leading-[1.06] text-ink">
+                  {t(props.title)}
+                </h2>
+              ) : null}
+              {props.lead ? (
+                <p className="mt-4 text-base leading-relaxed text-ink/70 whitespace-pre-line">
+                  {t(props.lead)}
+                </p>
+              ) : null}
+            </div>
+          </Reveal>
+        ) : null}
+
+        <Reveal>
+          <div className="mt-10 grid gap-8 lg:grid-cols-[minmax(0,15rem)_minmax(0,1fr)_minmax(0,1.05fr)] lg:gap-10">
+            {/* Tabs */}
+            <div
+              role="tablist"
+              aria-label={t(props.title) || "Categories"}
+              className="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
+            >
+              {items.map((it, i) => {
+                const on = i === Math.min(active, items.length - 1);
+                return (
+                  <button
+                    key={it.id ?? i}
+                    role="tab"
+                    aria-selected={on}
+                    onClick={() => select(i)}
+                    className={`shrink-0 border px-4 py-3 text-left text-[0.7rem] uppercase tracking-[0.2em] transition-colors lg:shrink ${
+                      on
+                        ? "border-sea bg-sea text-white"
+                        : "border-ink/12 bg-white text-ink/70 hover:border-sea hover:text-ink"
+                    }`}
+                  >
+                    {t(it.label)}
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Copy */}
+            <div className="min-w-0">
+              <h3 className="font-serif text-2xl md:text-3xl text-sea">
+                {t(item.title) || t(item.label)}
+              </h3>
+              {item.body ? (
+                <p className="mt-4 text-base leading-relaxed text-ink/75 whitespace-pre-line">
+                  {t(item.body)}
+                </p>
+              ) : null}
+              {(item.bullets ?? []).length > 0 ? (
+                <ul className="mt-6 space-y-2.5">
+                  {(item.bullets ?? []).map((b, i) => (
+                    <li key={b.id ?? i} className="flex items-start gap-3">
+                      <Check className="mt-1 size-4 shrink-0 text-sea" aria-hidden />
+                      <span className="leading-relaxed text-ink/85">{t(b.text)}</span>
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+            </div>
+
+            {/* Gallery */}
+            <div className="min-w-0">
+              <div className="relative aspect-[4/3] w-full overflow-hidden bg-ink/10">
+                {image?.src ? (
+                  <FocalImage
+                    key={`${item.id}-${slide}`}
+                    src={image.src}
+                    alt={t(image.alt) || t(item.label) || ""}
+                    loading="lazy"
+                    sizes="(max-width: 1024px) 92vw, 40vw"
+                    className="absolute inset-0 h-full w-full object-cover"
+                  />
+                ) : null}
+                {images.length > 1 ? (
+                  <>
+                    <button
+                      onClick={() => setSlide((s) => (s - 1 + images.length) % images.length)}
+                      aria-label="Föregående bild"
+                      className="absolute left-0 top-1/2 -translate-y-1/2 bg-ink/45 p-3 text-white hover:bg-ink/70"
+                    >
+                      <ChevronLeft className="size-5" />
+                    </button>
+                    <button
+                      onClick={() => setSlide((s) => (s + 1) % images.length)}
+                      aria-label="Nästa bild"
+                      className="absolute right-0 top-1/2 -translate-y-1/2 bg-ink/45 p-3 text-white hover:bg-ink/70"
+                    >
+                      <ChevronRight className="size-5" />
+                    </button>
+                    <div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-2">
+                      {images.map((im, i) => (
+                        <button
+                          key={im.id ?? i}
+                          onClick={() => setSlide(i)}
+                          aria-label={`Bild ${i + 1}`}
+                          className={`size-2 rounded-full ${
+                            i === slide % images.length ? "bg-white" : "bg-white/50"
+                          }`}
+                        />
+                      ))}
+                    </div>
+                  </>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </Reveal>
+
+        {props.note ? (
+          <p className="mt-8 max-w-3xl text-sm leading-relaxed text-ink/65 whitespace-pre-line">
+            {t(props.note)}
+          </p>
+        ) : null}
+      </div>
+    </section>
+  );
+}