@drawnagency/primitives 0.1.55 → 0.1.57

package/src/hooks/useBlockDnd.ts

@@ -0,0 +1,144 @@
+import { useEffect, useRef, useState } from "react";
+import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { buildBlockDragData, buildBlockDropData, isBlockDragData, canDropBlock } from "../lib/block-dnd";
+
+type AllowedEdges = Edge[];
+
+export interface UseBlockDndArgs {
+  blockId: string;
+  containerId: string;
+  index: number;
+  isContainer: boolean;
+  /** ["left","right"] inside a row container, ["top","bottom"] at root */
+  allowedEdges: AllowedEdges;
+  enabled: boolean;
+}
+
+/**
+ * Wires a block as a unified drag source + drop target. Manages only this block's
+ * local hover edge + dragging flag — the actual move dispatch is centralized in the
+ * EditorContent monitor (a later task), so nested targets never double-fire. The edge
+ * indicator is shown only when this element is the innermost drop target.
+ *
+ * Callers must pass a stable `allowedEdges` array (module-level constant or memoized)
+ * to avoid re-subscribing on every render.
+ */
+export function useBlockDnd({ blockId, containerId, index, isContainer, allowedEdges, enabled }: UseBlockDndArgs) {
+  const dragRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLButtonElement>(null);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    const element = dragRef.current;
+    const handle = handleRef.current;
+    if (!element || !enabled) return;
+
+    let cleanup: (() => void) | undefined;
+    let cancelled = false;
+
+    Promise.all([
+      import("@atlaskit/pragmatic-drag-and-drop/element/adapter"),
+      import("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"),
+    ]).then(([{ draggable, dropTargetForElements }, { attachClosestEdge, extractClosestEdge }]) => {
+      if (cancelled) return;
+
+      const cleanupDraggable = draggable({
+        element,
+        dragHandle: handle ?? undefined,
+        getInitialData: () => buildBlockDragData({ blockId, containerId, index, isContainer }),
+        onGenerateDragPreview: () => {
+          element.style.opacity = "0.4";
+          requestAnimationFrame(() => { element.style.opacity = ""; });
+        },
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false),
+      });
+
+      const cleanupDrop = dropTargetForElements({
+        element,
+        canDrop: ({ source }) => isBlockDragData(source.data) && canDropBlock(source.data, containerId),
+        getData: ({ input, element: el }) =>
+          attachClosestEdge(buildBlockDropData({ dropContainerId: containerId, index }), {
+            input, element: el, allowedEdges,
+          }),
+        onDrag: ({ self, source, location }) => {
+          const innermost = location.current.dropTargets[0]?.element === self.element;
+          if (!innermost || !isBlockDragData(source.data) || source.data.blockId === blockId) {
+            setClosestEdge(null);
+            return;
+          }
+          setClosestEdge(extractClosestEdge(self.data));
+        },
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: () => setClosestEdge(null),
+      });
+
+      cleanup = () => { cleanupDraggable(); cleanupDrop(); };
+    });
+
+    return () => { cancelled = true; cleanup?.(); };
+  }, [blockId, containerId, index, isContainer, enabled, allowedEdges]);
+
+  return { dragRef, handleRef, closestEdge, isDragging };
+}
+
+export interface UseBlockDropZoneArgs {
+  containerId: string;
+  index: number;
+  /** When set, the zone is a column-targeted drop (ghost/spacer): place at this 1-based column. */
+  toColumn?: number;
+  allowedEdges: AllowedEdges;
+  enabled: boolean;
+}
+
+/**
+ * A drop-target-ONLY zone (not draggable) — used for an empty container's first-drop
+ * area, where there are no child cells to act as targets. It advertises
+ * `{ dropContainerId, index }` and shows an edge indicator only when it is the innermost
+ * drop target. The actual move dispatch is centralized in the EditorContent monitor.
+ *
+ * Callers must pass a stable `allowedEdges` array (module-level constant or memoized).
+ */
+export function useBlockDropZone({ containerId, index, toColumn, allowedEdges, enabled }: UseBlockDropZoneArgs) {
+  const dropRef = useRef<HTMLDivElement>(null);
+  const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
+
+  useEffect(() => {
+    const element = dropRef.current;
+    if (!element || !enabled) return;
+
+    let cleanup: (() => void) | undefined;
+    let cancelled = false;
+
+    Promise.all([
+      import("@atlaskit/pragmatic-drag-and-drop/element/adapter"),
+      import("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"),
+    ]).then(([{ dropTargetForElements }, { attachClosestEdge, extractClosestEdge }]) => {
+      if (cancelled) return;
+
+      cleanup = dropTargetForElements({
+        element,
+        canDrop: ({ source }) => isBlockDragData(source.data) && canDropBlock(source.data, containerId),
+        getData: ({ input, element: el }) =>
+          attachClosestEdge(buildBlockDropData({ dropContainerId: containerId, index, toColumn }), {
+            input, element: el, allowedEdges,
+          }),
+        onDrag: ({ self, source, location }) => {
+          const innermost = location.current.dropTargets[0]?.element === self.element;
+          if (!innermost || !isBlockDragData(source.data)) {
+            setClosestEdge(null);
+            return;
+          }
+          setClosestEdge(extractClosestEdge(self.data));
+        },
+        onDragLeave: () => setClosestEdge(null),
+        onDrop: () => setClosestEdge(null),
+      });
+    });
+
+    return () => { cancelled = true; cleanup?.(); };
+  }, [containerId, index, toColumn, enabled, allowedEdges]);
+
+  return { dropRef, closestEdge };
+}

package/src/hooks/useEditorPublish.ts

@@ -2,7 +2,7 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import type { SiteIndex, SiteConfig } from "../schemas/site-config";
 import type { LoadedSection } from "../lib/loader";
 import type { MediaManifest, MediaItem } from "../media/types";
-import { getDirtySectionRows, hasLocalChanges, discardSavedChanges, cacheContent, getPendingMediaBlobs, clearPendingMediaByIds } from "../lib/dexie";
+import { getDirtySectionRows, hasLocalChanges, discardSavedChanges, cacheContent, clearContentCache, getPendingMediaBlobs, clearPendingMediaByIds } from "../lib/dexie";
 
 function blobToBase64(blob: Blob): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -34,6 +34,10 @@ interface PublishDeps {
   onMediaPublished: (publishedItems: MediaItem[], publishedDeletions: string[]) => void;
   onShasUpdated: (savedSha: string | null, mainSha: string | null) => void;
   onPublishComplete?: () => void;
+  // The draft version this editor is based on (saved-branch head, or null when
+  // no draft exists yet). Sent with saves so the server can 409 on a concurrent
+  // edit instead of silently overwriting it. Read at save time (latest value).
+  getBaseVersion: () => string | null;
 }
 
 interface GatheredMedia {
@@ -62,6 +66,7 @@ export function useEditorPublish({
   onMediaPublished,
   onShasUpdated,
   onPublishComplete,
+  getBaseVersion,
 }: PublishDeps) {
   const [publishAction, setPublishAction] = useState<PublishAction>("idle");
   const [publishFeedback, setPublishFeedback] = useState<string | null>(null);
@@ -172,6 +177,7 @@ export function useEditorPublish({
           content,
         })),
         siteIndex,
+        baseVersion: getBaseVersion(),
         ...(args.deletedSectionIds?.length ? { deletedSectionIds: args.deletedSectionIds } : {}),
         ...(args.isConfigDirty() ? { siteConfig: args.siteConfig } : {}),
         ...(gathered.hasMediaChanges ? {
@@ -189,7 +195,8 @@ export function useEditorPublish({
 
     if (!response.ok) {
       const errorBody = await response.json().catch(() => ({}));
-      throw new Error(errorBody.error || "Save failed");
+      const message = errorBody.message || errorBody.error || "Save failed";
+      throw Object.assign(new Error(message), { status: response.status });
     }
 
     const responseData = await response.json().catch(() => null);
@@ -247,7 +254,8 @@ export function useEditorPublish({
       showFeedback("Saved", 3000);
     } catch (error) {
       console.error("Save failed:", error);
-      showFeedback("Save failed", 5000);
+      const isConflict = (error as { status?: number })?.status === 409;
+      showFeedback(isConflict ? (error as Error).message : "Save failed", isConflict ? 8000 : 5000);
     } finally {
       inFlightRef.current = false;
       setPublishAction("idle");
@@ -275,6 +283,10 @@ export function useEditorPublish({
       }
       const { sha } = responseData;
 
+      // The draft branch is gone after publish — drop the cached content snapshot
+      // so its now-stale diff state (savedBranchSha/changedSectionIds) can't be
+      // restored on a later cache hit. (Save & Publish already re-caches instead.)
+      await clearContentCache();
       onShasUpdated(null, sha);
       onPublishComplete?.();
     } catch (error) {
@@ -342,7 +354,8 @@ export function useEditorPublish({
       onPublishComplete?.();
     } catch (error) {
       console.error("Publish failed:", error);
-      showFeedback("Publish failed", 5000);
+      const isConflict = (error as { status?: number })?.status === 409;
+      showFeedback(isConflict ? (error as Error).message : "Publish failed", isConflict ? 8000 : 5000);
     } finally {
       inFlightRef.current = false;
       setPublishAction("idle");

package/src/lib/block-dnd.ts

@@ -0,0 +1,58 @@
+import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+
+/** The page root behaves like a single-column container (spec §3). */
+export const ROOT_CONTAINER_ID = "__root__";
+
+export interface BlockDragData {
+  dragType: "block";
+  blockId: string;
+  /** Container the block currently lives in: ROOT_CONTAINER_ID or a container section id. */
+  containerId: string;
+  index: number;
+  /** True if the dragged block is itself a container (used for the depth guard). */
+  isContainer: boolean;
+  [key: string | symbol]: unknown;
+}
+
+export interface BlockDropData {
+  dropContainerId: string;
+  index: number;
+  /** When set, a column-targeted drop (ghost/spacer cell): place at this 1-based grid column. */
+  toColumn?: number;
+  [key: string | symbol]: unknown;
+}
+
+export function buildBlockDragData(args: {
+  blockId: string;
+  containerId: string;
+  index: number;
+  isContainer: boolean;
+}): BlockDragData {
+  return { dragType: "block", ...args };
+}
+
+export function buildBlockDropData(args: { dropContainerId: string; index: number; toColumn?: number }): BlockDropData {
+  return { ...args };
+}
+
+export function isBlockDragData(data: Record<string | symbol, unknown>): data is BlockDragData {
+  return data.dragType === "block";
+}
+
+/**
+ * May `source` drop into `dropContainerId`?
+ * - A container block may only land at the page root (v1 one-level nesting → no
+ *   container-in-container; MAX_BLOCK_DEPTH=2).
+ * - Nothing may drop onto itself.
+ */
+export function canDropBlock(source: BlockDragData, dropContainerId: string): boolean {
+  if (source.blockId === dropContainerId) return false;
+  if (source.isContainer && dropContainerId !== ROOT_CONTAINER_ID) return false;
+  return true;
+}
+
+/** Closest edge → insertion index (before = index, after = index + 1). */
+export function resolveDropIndex(targetIndex: number, edge: Edge | null): number {
+  if (edge === "left" || edge === "top") return targetIndex;
+  return targetIndex + 1; // right / bottom / null
+}

package/src/lib/block-move.ts

@@ -0,0 +1,236 @@
+import type { LoadedSection } from "./loader";
+import type { Section } from "../schemas/sections";
+import type { SiteIndex, SectionMeta } from "../schemas/site-config";
+import { ROOT_CONTAINER_ID, canDropBlock } from "./block-dnd";
+import { getContainerChildren, reorderChild, insertChildAt, removeChildAt, placeBlockAtColumn, trimTrailingSpacers } from "./container-ops";
+import { reorderSectionInPage, addSectionToPage, removeSectionFromPages } from "./pages";
+
+export interface BlockMoveState {
+  sections: LoadedSection[];
+  index: SiteIndex;
+  rootPageId: string;
+}
+
+export interface BlockMove {
+  blockId: string;
+  fromContainerId: string;
+  fromIndex: number;
+  toContainerId: string;
+  /** Raw insertion index in the ORIGINAL (pre-removal) array, 0..len — as resolveDropIndex returns. applyBlockMove shifts it for same-container moves. */
+  toIndex: number;
+  /** When set, place at this 1-based grid column (ghost/spacer drop) instead of toIndex. */
+  toColumn?: number;
+}
+
+export interface BlockMoveEffects {
+  markDirtySectionIds: string[];
+  indexDirty: boolean;
+  deleteSectionIds: string[];
+  createSectionIds: string[];
+}
+
+export interface BlockMoveResult {
+  sections: LoadedSection[];
+  index: SiteIndex;
+  effects: BlockMoveEffects;
+  changed: boolean;
+}
+
+function defaultNewId(): string {
+  return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+    ? crypto.randomUUID()
+    : `block-${Math.random().toString(36).slice(2)}`;
+}
+
+const DEFAULT_CHILD_META = (type: string): SectionMeta => ({ type, status: "draft", access: [] });
+
+function isContainerSection(section: Section): boolean {
+  return Array.isArray((section.content as { children?: unknown })?.children);
+}
+
+function mapContainerSection(sections: LoadedSection[], id: string, fn: (s: Section) => Section): LoadedSection[] {
+  return sections.map((l) => (l.section.id === id ? { ...l, section: fn(l.section) } : l));
+}
+
+function noop(state: BlockMoveState): BlockMoveResult {
+  return {
+    sections: state.sections,
+    index: state.index,
+    effects: { markDirtySectionIds: [], indexDirty: false, deleteSectionIds: [], createSectionIds: [] },
+    changed: false,
+  };
+}
+
+export function applyBlockMove(
+  state: BlockMoveState,
+  move: BlockMove,
+  newId: () => string = defaultNewId,
+): BlockMoveResult {
+  const { sections, index, rootPageId } = state;
+  const { blockId, fromContainerId, fromIndex, toContainerId, toIndex } = move;
+
+  if (move.toColumn != null) return applyColumnPlacement(state, move, newId);
+
+  const draggedSection = findBlock(sections, fromContainerId, fromIndex, blockId);
+  if (!draggedSection) return noop(state);
+  const dragData = {
+    dragType: "block" as const,
+    blockId,
+    containerId: fromContainerId,
+    index: fromIndex,
+    isContainer: isContainerSection(draggedSection),
+  };
+  if (!canDropBlock(dragData, toContainerId)) return noop(state);
+
+  if (fromContainerId === toContainerId) {
+    // toIndex is the raw insertion index in the original (pre-removal) array.
+    // Both reorderSectionInPage and reorderChild use splice(from,1)+splice(to,0,moved),
+    // so we must convert to the post-removal position for same-container moves.
+    const adjusted = fromIndex < toIndex ? toIndex - 1 : toIndex;
+    if (fromContainerId === ROOT_CONTAINER_ID) {
+      const nextIndex = reorderSectionInPage(index, rootPageId, fromIndex, adjusted);
+      if (nextIndex === index) return noop(state);
+      return {
+        sections,
+        index: nextIndex,
+        effects: { markDirtySectionIds: [], indexDirty: true, deleteSectionIds: [], createSectionIds: [] },
+        changed: true,
+      };
+    }
+    const nextSections = mapContainerSection(sections, fromContainerId, (c) => reorderChild(c, fromIndex, adjusted));
+    return {
+      sections: nextSections,
+      index,
+      effects: { markDirtySectionIds: [fromContainerId], indexDirty: false, deleteSectionIds: [], createSectionIds: [] },
+      changed: true,
+    };
+  }
+
+  const markDirty = new Set<string>();
+  const deleteSectionIds: string[] = [];
+  const createSectionIds: string[] = [];
+  let indexDirty = false;
+  let nextSections = sections;
+  let nextIndex = index;
+
+  let moving: Section;
+  if (fromContainerId === ROOT_CONTAINER_ID) {
+    moving = draggedSection;
+    nextSections = nextSections.filter((l) => l.section.id !== blockId);
+    nextIndex = removeSectionFromPages(nextIndex, blockId);
+    deleteSectionIds.push(blockId);
+    indexDirty = true;
+  } else {
+    const src = nextSections.find((l) => l.section.id === fromContainerId);
+    if (!src) return noop(state);
+    const { container, removed } = removeChildAt(src.section, fromIndex);
+    if (!removed) return noop(state);
+    moving = removed;
+    nextSections = mapContainerSection(nextSections, fromContainerId, () => container);
+    markDirty.add(fromContainerId);
+  }
+
+  if (toContainerId === ROOT_CONTAINER_ID) {
+    const { layout: _dropLayout, ...rootBlock } = moving as Section & { layout?: unknown };
+    const meta = DEFAULT_CHILD_META(rootBlock.type);
+    nextIndex = addSectionToPage(nextIndex, rootPageId, rootBlock.id, meta, toIndex);
+    nextSections = [...nextSections, { section: rootBlock as Section, meta }];
+    indexDirty = true;
+    createSectionIds.push(rootBlock.id);
+    markDirty.add(rootBlock.id);
+  } else {
+    const dest = nextSections.find((l) => l.section.id === toContainerId);
+    if (!dest) return noop(state);
+    nextSections = mapContainerSection(nextSections, toContainerId, (c) => insertChildAt(c, moving, toIndex));
+    markDirty.add(toContainerId);
+  }
+
+  return {
+    sections: nextSections,
+    index: nextIndex,
+    effects: { markDirtySectionIds: [...markDirty], indexDirty, deleteSectionIds, createSectionIds },
+    changed: true,
+  };
+}
+
+/**
+ * Column-targeted placement (a ghost/spacer drop). Removes the dragged block from its source
+ * (root or a container), then places it at 1-based column `toColumn` of the destination
+ * container — padding intervening empty columns with spacers, or replacing a spacer already at
+ * that column. Root is never a column target (it has no columns).
+ */
+function applyColumnPlacement(
+  state: BlockMoveState,
+  move: BlockMove,
+  newId: () => string,
+): BlockMoveResult {
+  const { sections, index } = state;
+  const { blockId, fromContainerId, fromIndex, toContainerId } = move;
+  const toColumn = move.toColumn!;
+
+  if (toContainerId === ROOT_CONTAINER_ID) return noop(state);
+
+  const draggedSection = findBlock(sections, fromContainerId, fromIndex, blockId);
+  if (!draggedSection) return noop(state);
+  const dragData = {
+    dragType: "block" as const,
+    blockId,
+    containerId: fromContainerId,
+    index: fromIndex,
+    isContainer: isContainerSection(draggedSection),
+  };
+  if (!canDropBlock(dragData, toContainerId)) return noop(state);
+
+  const markDirty = new Set<string>();
+  const deleteSectionIds: string[] = [];
+  let indexDirty = false;
+  let nextSections = sections;
+  let nextIndex = index;
+  let moving: Section;
+
+  if (fromContainerId === ROOT_CONTAINER_ID) {
+    moving = draggedSection;
+    nextSections = nextSections.filter((l) => l.section.id !== blockId);
+    nextIndex = removeSectionFromPages(nextIndex, blockId);
+    deleteSectionIds.push(blockId);
+    indexDirty = true;
+  } else {
+    const src = nextSections.find((l) => l.section.id === fromContainerId);
+    if (!src) return noop(state);
+    const { container, removed } = removeChildAt(src.section, fromIndex);
+    if (!removed) return noop(state);
+    moving = removed;
+    nextSections = mapContainerSection(nextSections, fromContainerId, () => trimTrailingSpacers(container));
+    markDirty.add(fromContainerId);
+  }
+
+  const dest = nextSections.find((l) => l.section.id === toContainerId);
+  if (!dest) return noop(state);
+  const columns = ((dest.section.content as { columns?: number })?.columns) ?? 1;
+  nextSections = mapContainerSection(nextSections, toContainerId, (c) =>
+    placeBlockAtColumn(c, moving, toColumn, columns, newId),
+  );
+  markDirty.add(toContainerId);
+
+  return {
+    sections: nextSections,
+    index: nextIndex,
+    effects: { markDirtySectionIds: [...markDirty], indexDirty, deleteSectionIds, createSectionIds: [] },
+    changed: true,
+  };
+}
+
+function findBlock(
+  sections: LoadedSection[],
+  containerId: string,
+  index: number,
+  blockId: string,
+): Section | null {
+  if (containerId === ROOT_CONTAINER_ID) {
+    return sections.find((l) => l.section.id === blockId)?.section ?? null;
+  }
+  const host = sections.find((l) => l.section.id === containerId);
+  if (!host) return null;
+  const children = getContainerChildren(host.section);
+  return children[index]?.id === blockId ? children[index] : (children.find((c) => c.id === blockId) ?? null);
+}

package/src/lib/container-grid.ts

@@ -0,0 +1,58 @@
+/** Max columns a container exposes in v1 (covers halves/thirds/sixths via spans). */
+export const MAX_CONTAINER_COLUMNS = 6;
+
+/**
+ * Column count -> grid-cols classes that collapse by the CONTAINER's own width
+ * (Tailwind 4 container-query `@` variants), not the viewport. Full static
+ * strings so Tailwind's source scan generates them (no interpolation/purge gap).
+ */
+export const containerGridClass: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 @sm:grid-cols-2",
+  3: "grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3",
+  4: "grid-cols-1 @xs:grid-cols-2 @lg:grid-cols-4",
+  5: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3 @xl:grid-cols-5",
+  6: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3 @2xl:grid-cols-6",
+};
+
+/**
+ * Per-child colSpan -> col-span classes, keyed [columns][span]. A child's span
+ * must clamp to the columns AVAILABLE at each container-query breakpoint, and the
+ * collapse curve differs per column count — so the class depends on BOTH the
+ * parent's column count and the child's span, not span alone. At every breakpoint
+ * the emitted span = min(span, columns-at-that-breakpoint), guaranteeing a span
+ * never exceeds the tracks that exist (no phantom column). Span 1 needs no class.
+ * Full static strings so Tailwind's source scan generates them.
+ */
+export const colSpanClass: Record<number, Record<number, string>> = {
+  1: { 1: "" },
+  2: { 1: "", 2: "col-span-1 @sm:col-span-2" },
+  3: { 1: "", 2: "col-span-1 @sm:col-span-2", 3: "col-span-1 @sm:col-span-2 @lg:col-span-3" },
+  4: { 1: "", 2: "col-span-1 @xs:col-span-2", 3: "col-span-1 @xs:col-span-2 @lg:col-span-3", 4: "col-span-1 @xs:col-span-2 @lg:col-span-4" },
+  5: { 1: "", 2: "col-span-1 @xs:col-span-2", 3: "col-span-1 @xs:col-span-2 @md:col-span-3", 4: "col-span-1 @xs:col-span-2 @md:col-span-3 @xl:col-span-4", 5: "col-span-1 @xs:col-span-2 @md:col-span-3 @xl:col-span-5" },
+  6: { 1: "", 2: "col-span-1 @xs:col-span-2", 3: "col-span-1 @xs:col-span-2 @md:col-span-3", 4: "col-span-1 @xs:col-span-2 @md:col-span-3 @2xl:col-span-4", 5: "col-span-1 @xs:col-span-2 @md:col-span-3 @2xl:col-span-5", 6: "col-span-1 @xs:col-span-2 @md:col-span-3 @2xl:col-span-6" },
+};
+
+/** Gap token -> Tailwind gap class. Retained as a utility; the container now uses a
+ *  fixed gap (the Gap setting was removed), but the map stays for general use. */
+export const gapClass: Record<string, string> = {
+  none: "gap-0",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-8",
+};
+
+/**
+ * Per-column-count container-query classes that HIDE a spacer cell once the container
+ * collapses to a single column (mobile). Mirrors `containerGridClass`'s collapse curve:
+ * hidden at base width, shown at the first breakpoint where the grid has ≥2 columns.
+ * Static strings so Tailwind's source scan generates them.
+ */
+export const spacerHiddenClass: Record<number, string> = {
+  1: "hidden",
+  2: "hidden @sm:block",
+  3: "hidden @sm:block",
+  4: "hidden @xs:block",
+  5: "hidden @xs:block",
+  6: "hidden @xs:block",
+};