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

package/src/backoffice/tracking-drafts.ts

@@ -0,0 +1,150 @@
+/**
+ * Draft bookkeeping for the "Code & tracking" screen.
+ *
+ * The screen edits rows locally and reloads them from the server, and those two
+ * facts fight: reloading used to replace the whole editing state, so anything
+ * not yet saved — a new profile, a duplicate, edits to one profile while
+ * another was being saved — was thrown away the moment a refetch landed.
+ *
+ * So local rows are reconciled against the server list rather than replaced.
+ * A row the user has changed keeps its local value; an untouched row takes the
+ * server's; a row the server no longer has goes away; and a row that has never
+ * been saved is never dropped by a reload, because the server cannot possibly
+ * know about it yet.
+ *
+ * Pure module — no React, so the rules are testable on their own.
+ */
+
+/** The fields a draft row carries. Structural, to match the host's own type. */
+export type DraftProfile = {
+  id: string;
+  name: string;
+  scope_type: string;
+  scope_value: string;
+  enabled: boolean;
+  head_html: string;
+  body_start_html: string;
+  body_end_html: string;
+  gtm_id: string;
+  ga4_id: string;
+  meta_pixel_id: string;
+  tiktok_pixel_id: string;
+  extra_meta: { name: string; content: string }[];
+  sort_order: number;
+};
+
+export type DraftRow<T extends DraftProfile = DraftProfile> = {
+  /**
+   * Identity of the row in the editor, stable across saves and reloads.
+   *
+   * Not the server id: a row exists in the editor before it has one, and
+   * keying off `id` is what made an unsaved row and its saved counterpart look
+   * like the same row to React and like different rows to everything else.
+   */
+  key: string;
+  /** Current edited value. */
+  value: T;
+  /**
+   * The server row this draft was last in sync with, or null for a row that
+   * has never been saved. Local edits are exactly `value` differing from this.
+   */
+  base: T | null;
+};
+
+let counter = 0;
+
+/** A fresh editor key. */
+export function draftKey(): string {
+  counter += 1;
+  return `draft-${counter}`;
+}
+
+const COMPARED = [
+  "name",
+  "scope_type",
+  "scope_value",
+  "enabled",
+  "head_html",
+  "body_start_html",
+  "body_end_html",
+  "gtm_id",
+  "ga4_id",
+  "meta_pixel_id",
+  "tiktok_pixel_id",
+  "sort_order",
+] as const;
+
+/** True when two rows hold the same content, ignoring server-only fields. */
+export function sameProfile(a: DraftProfile, b: DraftProfile): boolean {
+  for (const field of COMPARED) {
+    if (a[field] !== b[field]) return false;
+  }
+  return JSON.stringify(a.extra_meta ?? []) === JSON.stringify(b.extra_meta ?? []);
+}
+
+/** True when the row holds edits the server has not seen. */
+export function isDirty(row: DraftRow): boolean {
+  return row.base === null || !sameProfile(row.value, row.base);
+}
+
+/** Wrap a freshly loaded server row. */
+export function serverRow<T extends DraftProfile>(value: T): DraftRow<T> {
+  return { key: draftKey(), value, base: value };
+}
+
+/** Wrap a row that exists only in the editor so far. */
+export function newRow<T extends DraftProfile>(value: T): DraftRow<T> {
+  return { key: draftKey(), value, base: null };
+}
+
+/**
+ * Fold a server list into the current rows.
+ *
+ * Saved rows keep the server's order; rows that have never been saved keep
+ * their own order after them, which is where they were added.
+ */
+export function mergeServerProfiles<T extends DraftProfile>(
+  rows: DraftRow<T>[],
+  profiles: T[],
+): DraftRow<T>[] {
+  const saved: DraftRow<T>[] = [];
+  for (const p of profiles) {
+    const row = rows.find((r) => r.base !== null && r.value.id === p.id);
+    if (!row) {
+      saved.push(serverRow(p));
+      continue;
+    }
+    // A row the user has edited keeps its edits and simply learns what the
+    // server now holds; an untouched row takes the server's version, so a real
+    // update still lands.
+    saved.push(isDirty(row) ? { ...row, base: p } : { ...row, value: p, base: p });
+  }
+
+  const unsaved = rows.filter((r) => r.base === null);
+  return [...saved, ...unsaved];
+}
+
+/**
+ * Record a successful save.
+ *
+ * `sent` is the value that actually went to the server, not whatever the row
+ * holds now — anything typed while the request was in flight is still unsaved
+ * and has to stay that way. `id` adopts the identity a newly created row was
+ * given, so the next reload reconciles with it instead of listing it twice.
+ */
+export function markSaved<T extends DraftProfile>(
+  rows: DraftRow<T>[],
+  key: string,
+  sent: T,
+  id?: string,
+): DraftRow<T>[] {
+  return rows.map((row) => {
+    if (row.key !== key) return row;
+    const savedId = id || row.value.id;
+    return {
+      ...row,
+      value: { ...row.value, id: savedId },
+      base: { ...sent, id: savedId },
+    };
+  });
+}

package/src/blocks/block-children.tsx

@@ -0,0 +1,40 @@
+import { createContext, useContext, type ReactNode } from "react";
+import type { BlockInstance } from "./types";
+
+/**
+ * How a container block renders the blocks inside it.
+ *
+ * The renderer that owns block lookup, global sections and the builder's
+ * selection wrappers installs this once per page; container blocks call it
+ * instead of importing the renderer, which keeps `src/blocks` free of any
+ * dependency on `src/site` and lets the builder and the public site share one
+ * recursion.
+ */
+export type BlockChildren = {
+  render: (blocks: BlockInstance[]) => ReactNode;
+  /** True inside the page builder, where empty containers still need shape. */
+  edit?: boolean;
+};
+
+const NO_CHILDREN: BlockChildren = { render: () => null };
+
+const BlockChildrenContext = createContext<BlockChildren>(NO_CHILDREN);
+
+export function BlockChildrenProvider({
+  value,
+  children,
+}: {
+  value: BlockChildren;
+  children: ReactNode;
+}) {
+  return <BlockChildrenContext.Provider value={value}>{children}</BlockChildrenContext.Provider>;
+}
+
+/**
+ * Renders child blocks. Outside a page renderer this renders nothing, so a
+ * container block used in isolation (a test, a storybook) degrades quietly
+ * rather than throwing.
+ */
+export function useBlockChildren(): BlockChildren {
+  return useContext(BlockChildrenContext);
+}

package/src/blocks/block-tree.ts

@@ -0,0 +1,378 @@
+/**
+ * The nested block model.
+ *
+ * A page is an ordered list of blocks. One block type — `layout` — is a
+ * container: it holds an array of columns, each an ordered list of blocks, so
+ * the page is a tree rather than a flat list. Everything that has to walk that
+ * tree (the builder's drag and drop, the renderer, page duplication, block
+ * counting) uses the operations here instead of reaching into `props.columns`,
+ * which keeps one definition of what "inside a column" means.
+ *
+ * Storage stays plain JSON: children live in the container's own `props`, so
+ * page versions, previews, the backup archive and the wire schema all keep
+ * working with no new table and no new column.
+ */
+
+import type { BlockInstance, BlockProps, Json } from "./types";
+
+export const LAYOUT_BLOCK_TYPE = "layout";
+
+/** Columns a layout may have on desktop. */
+export const LAYOUT_MIN_COLUMNS = 2;
+export const LAYOUT_MAX_COLUMNS = 8;
+
+/**
+ * How deep containers may nest. A layout inside a layout is genuinely useful
+ * (a two-column band whose left half splits again); five levels of it is a
+ * mistake, so the builder refuses the drop rather than letting a page become
+ * unrenderable.
+ */
+export const MAX_LAYOUT_DEPTH = 3;
+
+/** Fresh block id, in the same shape the builder has always minted. */
+export function newBlockId(prefix = "b"): string {
+  return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+}
+
+export function isLayoutBlock(block: BlockInstance | null | undefined): boolean {
+  return block?.type === LAYOUT_BLOCK_TYPE;
+}
+
+/** Desktop column count, clamped to what the block supports. */
+export function layoutColumnCountFromProps(props: BlockProps | undefined): number {
+  const raw = Number((props as { columnsDesktop?: unknown } | undefined)?.columnsDesktop);
+  const n = Number.isFinite(raw) ? Math.round(raw) : LAYOUT_MIN_COLUMNS;
+  return Math.min(LAYOUT_MAX_COLUMNS, Math.max(LAYOUT_MIN_COLUMNS, n));
+}
+
+export function layoutColumnCount(block: BlockInstance | null | undefined): number {
+  return layoutColumnCountFromProps(block?.props);
+}
+
+/**
+ * The block's columns, always exactly `layoutColumnCount` of them.
+ *
+ * Reducing the column count in the inspector must never delete content, so
+ * blocks in trimmed columns are folded into the last remaining column instead
+ * of being dropped.
+ */
+export function readColumnsFromProps(props: BlockProps | undefined): BlockInstance[][] {
+  const raw = (props as { columns?: unknown } | undefined)?.columns;
+  const stored: BlockInstance[][] = Array.isArray(raw)
+    ? raw.map((column) => (Array.isArray(column) ? (column as BlockInstance[]) : []))
+    : [];
+  const count = layoutColumnCountFromProps(props);
+  const columns: BlockInstance[][] = [];
+  for (let i = 0; i < count; i += 1) columns.push([...(stored[i] ?? [])]);
+  // Anything beyond the current count moves into the last column, never away.
+  const overflow = stored.slice(count).flat();
+  if (overflow.length) columns[count - 1] = [...(columns[count - 1] ?? []), ...overflow];
+  return columns;
+}
+
+export function readLayoutColumns(block: BlockInstance): BlockInstance[][] {
+  return readColumnsFromProps(block.props);
+}
+
+/** A copy of `block` whose columns are `columns`. */
+export function writeLayoutColumns(
+  block: BlockInstance,
+  columns: BlockInstance[][],
+): BlockInstance {
+  const props: BlockProps = { ...(block.props ?? {}) };
+  props["columns"] = columns as unknown as Json;
+  return { ...block, props };
+}
+
+/** Direct children of a block, per column. Non-containers have none. */
+export function blockColumns(block: BlockInstance): BlockInstance[][] {
+  return isLayoutBlock(block) ? readLayoutColumns(block) : [];
+}
+
+/** Where a block sits: which container, which column, which position. */
+export type BlockPath = {
+  /** `null` at the page root. */
+  parentId: string | null;
+  /** Column index inside the parent; always 0 at the root. */
+  column: number;
+  index: number;
+};
+
+/** A drop target, i.e. a `BlockPath` a block is about to occupy. */
+export type DropTarget = BlockPath;
+
+export const ROOT_TARGET = (index: number): DropTarget => ({
+  parentId: null,
+  column: 0,
+  index,
+});
+
+type Walked = {
+  block: BlockInstance;
+  path: BlockPath;
+  depth: number;
+};
+
+/** Depth-first walk over the whole tree, parents before their children. */
+export function walkBlockTree(blocks: readonly BlockInstance[]): Walked[] {
+  const out: Walked[] = [];
+  const visit = (list: readonly BlockInstance[], parentId: string | null, column: number, depth: number) => {
+    list.forEach((block, index) => {
+      out.push({ block, path: { parentId, column, index }, depth });
+      blockColumns(block).forEach((children, columnIndex) => {
+        visit(children, block.id, columnIndex, depth + 1);
+      });
+    });
+  };
+  visit(blocks, null, 0, 0);
+  return out;
+}
+
+/** Every block in the tree, in document order. */
+export function flattenBlockTree(blocks: readonly BlockInstance[]): BlockInstance[] {
+  return walkBlockTree(blocks).map((entry) => entry.block);
+}
+
+/** Total block count including nested children. */
+export function countBlocksDeep(blocks: readonly BlockInstance[]): number {
+  return walkBlockTree(blocks).length;
+}
+
+export function findBlockDeep(
+  blocks: readonly BlockInstance[],
+  id: string,
+): BlockInstance | null {
+  return walkBlockTree(blocks).find((entry) => entry.block.id === id)?.block ?? null;
+}
+
+export function findBlockPath(blocks: readonly BlockInstance[], id: string): BlockPath | null {
+  return walkBlockTree(blocks).find((entry) => entry.block.id === id)?.path ?? null;
+}
+
+/** Nesting depth of a block, 0 at the page root. */
+export function blockDepth(blocks: readonly BlockInstance[], id: string): number {
+  return walkBlockTree(blocks).find((entry) => entry.block.id === id)?.depth ?? 0;
+}
+
+/** Deepest level below `block`, 0 when it has no children. */
+export function subtreeHeight(block: BlockInstance): number {
+  const columns = blockColumns(block);
+  let height = 0;
+  for (const column of columns) {
+    for (const child of column) height = Math.max(height, 1 + subtreeHeight(child));
+  }
+  return height;
+}
+
+/** True when `id` is `block` itself or anywhere inside it. */
+export function containsBlockId(block: BlockInstance, id: string): boolean {
+  if (block.id === id) return true;
+  return blockColumns(block).some((column) => column.some((child) => containsBlockId(child, id)));
+}
+
+/** Rebuild a tree with one container's columns replaced. */
+function replaceColumns(
+  blocks: readonly BlockInstance[],
+  parentId: string,
+  update: (columns: BlockInstance[][]) => BlockInstance[][],
+): BlockInstance[] {
+  return blocks.map((block) => {
+    if (block.id === parentId && isLayoutBlock(block)) {
+      return writeLayoutColumns(block, update(readLayoutColumns(block)));
+    }
+    if (!isLayoutBlock(block)) return block;
+    const columns = readLayoutColumns(block);
+    const next = columns.map((column) => replaceColumns(column, parentId, update));
+    const changed = next.some((column, i) => column !== columns[i]);
+    return changed ? writeLayoutColumns(block, next) : block;
+  });
+}
+
+/** Remove a block from anywhere in the tree. Returns the block it removed. */
+export function removeBlockFromTree(
+  blocks: readonly BlockInstance[],
+  id: string,
+): { blocks: BlockInstance[]; removed: BlockInstance | null } {
+  let removed: BlockInstance | null = null;
+  const strip = (list: readonly BlockInstance[]): BlockInstance[] =>
+    list
+      .filter((block) => {
+        if (block.id !== id) return true;
+        removed = block;
+        return false;
+      })
+      .map((block) => {
+        if (!isLayoutBlock(block)) return block;
+        const columns = readLayoutColumns(block);
+        return writeLayoutColumns(
+          block,
+          columns.map((column) => strip(column)),
+        );
+      });
+  return { blocks: strip(blocks), removed };
+}
+
+/** Insert a block at an exact position. Out-of-range indexes clamp to the end. */
+/** True when `parentId` names a Layout block that can actually hold children. */
+function layoutParentExists(blocks: readonly BlockInstance[], parentId: string): boolean {
+  const parent = findBlockDeep(blocks, parentId);
+  return parent != null && isLayoutBlock(parent);
+}
+
+/** Why an insertion was refused, for a message the editor can show. */
+export type InsertRefusal = "missing-parent" | "too-deep";
+
+export type InsertResult =
+  | { ok: true; blocks: BlockInstance[] }
+  | { ok: false; reason: InsertRefusal };
+
+/**
+ * Place a block at an exact position, or refuse.
+ *
+ * Insertion is fallible on purpose. A drop target is calculated from the tree
+ * as it looked when the drag started, and an undo, a refetch or a second
+ * editor can retire that target before the drop lands. Returning a refusal
+ * rather than a tree is what stops {@link moveBlockInTree} — which has already
+ * lifted the block out by the time it gets here — from reporting success while
+ * the block goes nowhere.
+ */
+export function insertBlockIntoTree(
+  blocks: readonly BlockInstance[],
+  block: BlockInstance,
+  target: DropTarget,
+): InsertResult {
+  const depth = target.parentId == null ? 0 : blockDepth(blocks, target.parentId) + 1;
+  if (depth + subtreeHeight(block) > MAX_LAYOUT_DEPTH) {
+    return { ok: false, reason: "too-deep" };
+  }
+  if (target.parentId == null) {
+    const next = [...blocks];
+    next.splice(Math.max(0, Math.min(target.index, next.length)), 0, block);
+    return { ok: true, blocks: next };
+  }
+  if (!layoutParentExists(blocks, target.parentId)) {
+    return { ok: false, reason: "missing-parent" };
+  }
+  return {
+    ok: true,
+    blocks: replaceColumns(blocks, target.parentId, (columns) => {
+      const columnIndex = Math.max(0, Math.min(target.column, columns.length - 1));
+      const next = columns.map((column) => [...column]);
+      const column = next[columnIndex] ?? [];
+      column.splice(Math.max(0, Math.min(target.index, column.length)), 0, block);
+      next[columnIndex] = column;
+      return next;
+    }),
+  };
+}
+
+/** Why a move was refused, for a message the editor can show. */
+export type MoveRefusal = "self" | "descendant" | "too-deep" | "missing";
+
+export type MoveResult =
+  | { ok: true; blocks: BlockInstance[] }
+  | { ok: false; reason: MoveRefusal };
+
+/**
+ * Move a block to an exact position anywhere in the tree.
+ *
+ * Root to column, column to column, reorder within a column and column back to
+ * root are all the same operation. A container may not be dropped into itself
+ * or into anything it contains — that would detach the subtree from the page —
+ * and nesting deeper than `MAX_LAYOUT_DEPTH` is refused rather than saved.
+ *
+ * `target.index` is a position in the destination list *after* the block has
+ * been taken out of wherever it was, which is what `arrayMove` has always done
+ * in the builder: moving the first of `[A, B, C]` to index 2 gives
+ * `[B, C, A]`.
+ */
+export function moveBlockInTree(
+  blocks: readonly BlockInstance[],
+  id: string,
+  target: DropTarget,
+): MoveResult {
+  if (target.parentId === id) return { ok: false, reason: "self" };
+  const moving = findBlockDeep(blocks, id);
+  if (!moving) return { ok: false, reason: "missing" };
+  if (target.parentId && containsBlockId(moving, target.parentId)) {
+    return { ok: false, reason: "descendant" };
+  }
+  // Check the destination before lifting the block out. A target that has been
+  // retired since the drag started would otherwise leave the block with
+  // nowhere to land, and the move would report success having deleted it.
+  if (target.parentId != null && !layoutParentExists(blocks, target.parentId)) {
+    return { ok: false, reason: "missing" };
+  }
+
+  const targetDepth = target.parentId == null ? 0 : blockDepth(blocks, target.parentId) + 1;
+  if (targetDepth + subtreeHeight(moving) > MAX_LAYOUT_DEPTH) {
+    return { ok: false, reason: "too-deep" };
+  }
+
+  const { blocks: without, removed } = removeBlockFromTree(blocks, id);
+  if (!removed) return { ok: false, reason: "missing" };
+  const inserted = insertBlockIntoTree(without, removed, target);
+  // Belt and braces: never hand back a tree the block did not reach.
+  if (!inserted.ok) {
+    return { ok: false, reason: inserted.reason === "too-deep" ? "too-deep" : "missing" };
+  }
+  return { ok: true, blocks: inserted.blocks };
+}
+
+/** True when a block can legally be dropped at `target`. */
+export function canDropBlock(
+  blocks: readonly BlockInstance[],
+  id: string,
+  target: DropTarget,
+): boolean {
+  return moveBlockInTree(blocks, id, target).ok;
+}
+
+/** Deepest nesting a new block of this kind could add at `target`. */
+export function canNestAt(blocks: readonly BlockInstance[], target: DropTarget, height = 0): boolean {
+  if (target.parentId != null && !layoutParentExists(blocks, target.parentId)) return false;
+  const depth = target.parentId == null ? 0 : blockDepth(blocks, target.parentId) + 1;
+  return depth + height <= MAX_LAYOUT_DEPTH;
+}
+
+/** Patch one block anywhere in the tree, leaving the rest untouched. */
+export function patchBlockInTree(
+  blocks: readonly BlockInstance[],
+  id: string,
+  patch: (block: BlockInstance) => BlockInstance,
+): BlockInstance[] {
+  return blocks.map((block) => {
+    if (block.id === id) return patch(block);
+    if (!isLayoutBlock(block)) return block;
+    const columns = readLayoutColumns(block);
+    return writeLayoutColumns(
+      block,
+      columns.map((column) => patchBlockInTree(column, id, patch)),
+    );
+  });
+}
+
+/**
+ * A deep copy with brand-new ids, top to bottom.
+ *
+ * Used by "duplicate block" in the builder and by page duplication on the
+ * server: two blocks sharing an id would make the outline, the selection and
+ * every drag target ambiguous.
+ */
+export function cloneBlockDeep(block: BlockInstance): BlockInstance {
+  const clone: BlockInstance = {
+    ...block,
+    id: newBlockId(block.type),
+    props: block.props ? (structuredClone(block.props) as BlockProps) : undefined,
+  };
+  if (!isLayoutBlock(clone)) return clone;
+  return writeLayoutColumns(
+    clone,
+    readLayoutColumns(clone).map((column) => column.map((child) => cloneBlockDeep(child))),
+  );
+}
+
+/** `cloneBlockDeep` over a whole list — the page-duplication entry point. */
+export function duplicateBlockTree(blocks: readonly BlockInstance[]): BlockInstance[] {
+  return blocks.map((block) => cloneBlockDeep(block));
+}