@bygghammar/cms-platform 0.90.0-m7.9 → 0.91.0

package/src/backoffice/inspectors/blocks.tsx

@@ -57,6 +57,7 @@ import type {
   PriceGroup,
   IntroImageAspect,
   CountdownProps,
+  LayoutProps,
 } from "../../blocks/types";
 import { INTRO_IMAGE_ASPECTS } from "../../blocks/types";
 import { BLOCK_ICON_NAMES, resolveBlockIcon } from "../../blocks/icons";
@@ -67,6 +68,8 @@ import {
   TextField,
   MediaField,
   MediaMultiField,
+  SelectField,
+  NumberField,
 } from "./fields";
 import { RichTextEditor } from "../../host";
 import { useEditLockBlocked } from "../EditLock";
@@ -74,6 +77,13 @@ import { Plus, Trash2, ArrowUp, ArrowDown } from "lucide-react";
 import type { LocalizedString, Locale } from "../../i18n";
 import { SUPPORTED_LOCALES } from "../../i18n";
 import { normalizeRevealMode, type RevealMode } from "../../ui/Reveal";
+import {
+  clampAutoplayMs,
+  DEFAULT_AUTOPLAY_MS,
+  MIN_AUTOPLAY_MS,
+  MAX_AUTOPLAY_MS,
+} from "../../ui/MobileCarousel";
+import { LAYOUT_MAX_COLUMNS, LAYOUT_MIN_COLUMNS } from "../../blocks/block-tree";
 
 export type BlockPatchProps = {
   block: BlockInstance;
@@ -1881,6 +1891,43 @@ function IconGridInspector({ block, patch }: BlockPatchProps) {
         </label>
         <TextField label="Anchor id" value={p.anchor} onChange={(v) => update({ ...p, anchor: v })} />
       </InspectorSection>
+      <InspectorSection title="Mobile presentation">
+        <SelectField
+          label="On phones"
+          value={p.mobileLayout ?? "stack"}
+          options={[
+            { value: "stack", label: "Stack (one card per row)" },
+            { value: "slider", label: "Slider (swipe sideways)" },
+          ]}
+          onChange={(v) => update({ ...p, mobileLayout: v as IconGridProps["mobileLayout"] })}
+          hint="Tablet and desktop keep the column grid above."
+        />
+        {p.mobileLayout === "slider" ? (
+          <>
+            <SelectField
+              label="Autoplay"
+              value={p.mobileAutoplay ? "on" : "off"}
+              options={[
+                { value: "off", label: "Off" },
+                { value: "on", label: "On" },
+              ]}
+              onChange={(v) => update({ ...p, mobileAutoplay: v === "on" })}
+              hint="Readers who ask for reduced motion never see it move on its own."
+            />
+            {p.mobileAutoplay ? (
+              <NumberField
+                label="Autoplay interval"
+                value={Math.round(clampAutoplayMs(p.mobileAutoplayMs) / 1000)}
+                min={MIN_AUTOPLAY_MS / 1000}
+                max={MAX_AUTOPLAY_MS / 1000}
+                suffix="seconds"
+                onChange={(v) => update({ ...p, mobileAutoplayMs: clampAutoplayMs(v * 1000) })}
+                hint={`Between ${MIN_AUTOPLAY_MS / 1000} and ${MAX_AUTOPLAY_MS / 1000} seconds. Default ${DEFAULT_AUTOPLAY_MS / 1000}.`}
+              />
+            ) : null}
+          </>
+        ) : null}
+      </InspectorSection>
       <InspectorSection title={`Cards (${items.length})`}>
         <div className="space-y-4">
           {items.map((item, i) => {
@@ -2412,7 +2459,109 @@ function MediaSplitInspector({ block, patch }: BlockPatchProps) {
 }
 
 
+/* ---------------- Layout (columns container) ---------------- */
+function LayoutInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as LayoutProps;
+  const update = (next: LayoutProps) => patch(next as unknown as BlockProps);
+  const desktop = p.columnsDesktop ?? 2;
+  const desktopOptions = Array.from(
+    { length: LAYOUT_MAX_COLUMNS - LAYOUT_MIN_COLUMNS + 1 },
+    (_, i) => LAYOUT_MIN_COLUMNS + i,
+  );
+
+  return (
+    <>
+      <InspectorSection title="Columns">
+        <SelectField
+          label="Desktop columns"
+          value={String(desktop)}
+          options={desktopOptions.map((n) => ({ value: String(n), label: `${n} columns` }))}
+          onChange={(v) =>
+            update({ ...p, columnsDesktop: Number(v) as LayoutProps["columnsDesktop"] })
+          }
+        />
+        <SelectField
+          label="Tablet columns"
+          value={String(p.columnsTablet ?? Math.min(2, desktop))}
+          options={[1, 2, 3, 4].map((n) => ({
+            value: String(n),
+            label: n === 1 ? "1 column (stacked)" : `${n} columns`,
+          }))}
+          onChange={(v) =>
+            update({ ...p, columnsTablet: Number(v) as LayoutProps["columnsTablet"] })
+          }
+        />
+        <p className="text-[0.7rem] text-ink/50">
+          Blocks are added to a column from the page outline: drag any block onto the column you
+          want it in. Reducing the column count never deletes anything — leftover blocks move into
+          the last column.
+        </p>
+      </InspectorSection>
+      <InspectorSection title="Appearance">
+        <SelectField
+          label="Gap between columns"
+          value={p.gap ?? "md"}
+          options={[
+            { value: "none", label: "None" },
+            { value: "sm", label: "Small" },
+            { value: "md", label: "Medium" },
+            { value: "lg", label: "Large" },
+          ]}
+          onChange={(v) => update({ ...p, gap: v as LayoutProps["gap"] })}
+        />
+        <SelectField
+          label="Vertical alignment"
+          value={p.align ?? "stretch"}
+          options={[
+            { value: "stretch", label: "Equal height" },
+            { value: "start", label: "Top" },
+            { value: "center", label: "Centre" },
+          ]}
+          onChange={(v) => update({ ...p, align: v as LayoutProps["align"] })}
+        />
+        <SelectField
+          label="Background"
+          value={p.tone ?? "transparent"}
+          options={[
+            { value: "transparent", label: "Transparent" },
+            { value: "white", label: "White" },
+            { value: "paper", label: "Paper" },
+            { value: "ice", label: "Ice" },
+          ]}
+          onChange={(v) => update({ ...p, tone: v as LayoutProps["tone"] })}
+        />
+        <SelectField
+          label="Vertical padding"
+          value={p.padding ?? "none"}
+          options={[
+            { value: "none", label: "None" },
+            { value: "compact", label: "Compact" },
+            { value: "normal", label: "Normal" },
+            { value: "roomy", label: "Roomy" },
+          ]}
+          onChange={(v) => update({ ...p, padding: v as LayoutProps["padding"] })}
+        />
+        <SelectField
+          label="Width"
+          value={p.contained === false ? "full" : "contained"}
+          options={[
+            { value: "contained", label: "Inside the page container" },
+            { value: "full", label: "Full width" },
+          ]}
+          onChange={(v) => update({ ...p, contained: v !== "full" })}
+        />
+        <TextField
+          label="Anchor id"
+          value={p.anchor ?? ""}
+          onChange={(v) => update({ ...p, anchor: v })}
+        />
+      </InspectorSection>
+    </>
+  );
+}
+
 export {
+  LayoutInspector,
   HeroInspector,
   IntroInspector,
   FaqInspector,

package/src/backoffice/inspectors/fields.tsx

@@ -112,6 +112,87 @@ export function TextField({
   );
 }
 
+const CONTROL_CLASS =
+  "w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea";
+
+/** Labelled `<select>` in the inspector's house style. */
+export function SelectField<T extends string>({
+  label,
+  value,
+  options,
+  onChange,
+  hint,
+}: {
+  label: string;
+  value: T;
+  options: readonly { value: T; label: string }[];
+  onChange: (v: T) => void;
+  hint?: string;
+}) {
+  return (
+    <label className="block space-y-1.5">
+      <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value as T)}
+        className={CONTROL_CLASS}
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+      {hint ? <span className="block text-[0.7rem] text-ink/50">{hint}</span> : null}
+    </label>
+  );
+}
+
+/** Labelled number input with a unit suffix and hard bounds. */
+export function NumberField({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  suffix,
+  hint,
+}: {
+  label: string;
+  value: number;
+  onChange: (v: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  suffix?: string;
+  hint?: string;
+}) {
+  return (
+    <label className="block space-y-1.5">
+      <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+      <span className="flex items-center gap-2">
+        <input
+          type="number"
+          value={Number.isFinite(value) ? value : ""}
+          min={min}
+          max={max}
+          step={step}
+          onChange={(e) => {
+            const n = Number(e.target.value);
+            if (!Number.isFinite(n)) return;
+            const clamped = Math.min(max ?? n, Math.max(min ?? n, n));
+            onChange(clamped);
+          }}
+          className={CONTROL_CLASS}
+        />
+        {suffix ? <span className="shrink-0 text-xs text-ink/60">{suffix}</span> : null}
+      </span>
+      {hint ? <span className="block text-[0.7rem] text-ink/50">{hint}</span> : null}
+    </label>
+  );
+}
+
 export function InspectorSection({
   title,
   children,

package/src/backoffice/inspectors/index.tsx

@@ -42,6 +42,7 @@ import {
   CtaBannerInspector,
   CountdownInspector,
   MediaSplitInspector,
+  LayoutInspector,
   type BlockPatchProps,
 } from "./blocks";
 
@@ -722,6 +723,8 @@ export function BlockInspector({
   globalSections: { key: string; name: string }[];
 }) {
   switch (block.type) {
+    case "layout":
+      return <LayoutInspector block={block} patch={patch} />;
     case "hero":
       return <HeroInspector block={block} patch={patch} />;
     case "intro":

package/src/backoffice/media/ConfirmDialog.tsx

@@ -1,8 +1,13 @@
+import { useEffect, useId, useRef, type ReactNode } from "react";
 import { Loader2 } from "lucide-react";
 
 /**
- * Small backoffice confirmation modal (English UI) used before destructive or
- * bulk actions in the Media Library.
+ * Small backoffice confirmation modal (English UI) used before destructive,
+ * bulk or publication-changing actions.
+ *
+ * It is a real dialog for assistive technology: labelled by its heading,
+ * described by its body, focus moved to the confirm button on open and
+ * restored on close, Escape cancels and Tab is trapped inside.
  */
 export function ConfirmDialog({
   title,
@@ -12,6 +17,7 @@ export function ConfirmDialog({
   cancelLabel = "Cancel",
   danger = false,
   busy = false,
+  children,
   onConfirm,
   onCancel,
 }: {
@@ -22,23 +28,76 @@ export function ConfirmDialog({
   cancelLabel?: string;
   danger?: boolean;
   busy?: boolean;
+  /** Extra controls, e.g. the name field a duplicate is created with. */
+  children?: ReactNode;
   onConfirm: () => void;
   onCancel: () => void;
 }) {
+  const id = useId();
+  const panel = useRef<HTMLDivElement>(null);
+  const confirmButton = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const opener = document.activeElement as HTMLElement | null;
+    // Custom content owns the focus (a text field wants it); otherwise the
+    // safe default is the confirm button the dialog was opened to offer.
+    if (!children) confirmButton.current?.focus();
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onCancel();
+        return;
+      }
+      if (event.key !== "Tab" || !panel.current) return;
+      const focusable = panel.current.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (!first || !last) return;
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown, true);
+      opener?.focus?.();
+    };
+    // Mount-only: re-running would steal focus back mid-interaction.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div
       className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
       onClick={() => !busy && onCancel()}
     >
       <div
+        ref={panel}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={`${id}-title`}
+        aria-describedby={description ? `${id}-description` : undefined}
         className="w-full max-w-md border border-ink/15 bg-white"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="border-b border-ink/10 px-4 py-3">
-          <h2 className="text-sm font-medium text-ink">{title}</h2>
+          <h2 id={`${id}-title`} className="text-sm font-medium text-ink">
+            {title}
+          </h2>
         </div>
         <div className="space-y-3 px-4 py-4">
-          {description ? <p className="text-sm text-ink/70">{description}</p> : null}
+          {description ? (
+            <p id={`${id}-description`} className="text-sm text-ink/70">
+              {description}
+            </p>
+          ) : null}
+          {children}
           {details?.length ? (
             <ul className="max-h-40 space-y-1 overflow-auto border border-ink/10 bg-ice/30 p-2 text-[0.72rem] text-ink/70">
               {details.map((d) => (
@@ -59,6 +118,7 @@ export function ConfirmDialog({
             {cancelLabel}
           </button>
           <button
+            ref={confirmButton}
             type="button"
             disabled={busy}
             onClick={onConfirm}

package/src/backoffice/routes/host.ts

@@ -81,6 +81,19 @@ export type BackofficeHost = {
     // locale domains
     saveLocaleDomain: HostServerFn;
     deleteLocaleDomain: HostServerFn;
+    /*
+     * Which hostname actually serves the backoffice, and why.
+     *
+     * `SITE_URL` is server information: it cannot be read from the browser,
+     * and a value baked into this registry would be a guess presented to an
+     * administrator as fact about their own install. So the answer is fetched
+     * from the server instead, and returns the package's `EffectiveAdminHost`.
+     *
+     * Optional: a host that has not registered it simply gets no statement
+     * about the backoffice hostname on the domains screen. The editor works
+     * either way — this only ever adds an explanation, never a permission.
+     */
+    getEffectiveAdminHost?: HostServerFn;
     /*
      * Popup opt-in destinations, for the popup editor's picker.
      *
@@ -179,6 +192,8 @@ export type BackofficeHost = {
       saveForm: HostServerFn;
       syncSubmissionsToSheet: HostServerFn;
       testWebhook: HostServerFn;
+      /** Optional: verifies the Google Sheets credentials, sheet and tab. */
+      testSheetConnection?: HostServerFn;
       listSubmissions: HostServerFn;
       setSubmissionStatus: HostServerFn;
       pushSubmissionsToSheet: HostServerFn;
@@ -211,6 +226,13 @@ export type BackofficeHost = {
       listPagePublications: HostServerFn;
       cancelPagePublication: HostServerFn;
       renamePage: HostServerFn;
+      /**
+       * Optional publish/unpublish and duplicate, both confirmed in the UI.
+       * Optional so a host that has not registered them keeps working: the
+       * Pages list simply hides the two actions.
+       */
+      setPageStatus?: HostServerFn;
+      duplicatePage?: HostServerFn;
       /**
        * The site's pages, listed.
        *
@@ -226,6 +248,14 @@ export type BackofficeHost = {
     /**
      * React hook returning a resolver for a page's public URL. Implemented as a
      * hook so a site can read its slug overrides and locale domains.
+     *
+     * `path` is site-relative. `host` is the public hostname for that locale,
+     * or `""` when the locale has no public hostname — since m7.10 the
+     * locale-to-domain table is explicit, so a locale missing from it has no
+     * public site at all. An empty `host` therefore means NO PUBLIC URL
+     * EXISTS; it is not a signal to use `path` on its own, and a host must
+     * not answer it by borrowing the current hostname or another locale's
+     * domain. Screens are expected to offer no public link in that case.
      */
     usePageUrl: () => (
       pageKey: string,
@@ -317,6 +347,7 @@ export function backofficePaths(host: BackofficeHost = backofficeHost()) {
     email: `${base}/admin/email`,
     contact: `${base}/admin/contact`,
     tracking: `${base}/admin/tracking`,
+    domains: `${base}/admin/domains`,
     redirects: `${base}/admin/redirects`,
     sitemap: `${base}/admin/sitemap`,
     navigation: `${base}/admin/navigation`,