@bygghammar/cms-platform 0.76.0 → 0.78.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.78.0
+
+- Countdown block: the unit tiles now always stay on a single row on mobile.
+  Tiles shrink to fit (with smaller mobile padding, digits, labels and gaps)
+  instead of wrapping; desktop sizing and all colour/layout settings unchanged.
+
+## 0.77.0
+
+- Global Sections list: preview thumbnails now use the section's first block type
+  and show a text snippet from the saved content (including Rich text `html`),
+  instead of a blank generic placeholder. Multi-block sections show a count badge.
+- Shared thumbnail: text detection reads `html`, `body`, `lead`, `subtitle` and
+  `heading`, with locale fallback and HTML stripped to plain text.
+
 ## 0.76.0
 
 - Rich text editor colours: swatches are now derived from the consuming site's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.76.0",
+  "version": "0.78.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": [

package/src/backoffice/GlobalSectionsListView.tsx

@@ -27,6 +27,24 @@ export type GlobalSectionsListDeps = {
   previewSrc: (key: string) => string;
 };
 
+/** Saved sections store an array of block instances; shapes may vary by age. */
+function blockList(blocks: unknown): Record<string, unknown>[] {
+  if (!Array.isArray(blocks)) return [];
+  return blocks.filter((b): b is Record<string, unknown> => !!b && typeof b === "object");
+}
+
+function blockCount(blocks: unknown): number {
+  return blockList(blocks).length;
+}
+
+/** Block type of the first block, so the thumbnail can draw its wireframe. */
+function firstBlockType(blocks: unknown): string | undefined {
+  const first = blockList(blocks)[0];
+  const type = first?.["type"];
+  return typeof type === "string" && type ? type : undefined;
+}
+
+
 /**
  * Library screen listing global sections — reusable groups of blocks that update
  * everywhere at once. All data access and navigation is host-supplied.
@@ -98,7 +116,12 @@ export function GlobalSectionsListView({ deps }: { deps: GlobalSectionsListDeps
                       onClick={() => setPreview({ key: g.key, name: g.name })}
                       className="group relative block"
                     >
-                      <DataThumb data={g.blocks} />
+                      <DataThumb data={g.blocks} blockType={firstBlockType(g.blocks)} />
+                      {blockCount(g.blocks) > 1 && (
+                        <span className="absolute bottom-1 right-1 rounded bg-ink/70 px-1 text-[0.55rem] leading-4 text-white">
+                          {blockCount(g.blocks)}
+                        </span>
+                      )}
                       <span className="absolute inset-0 hidden items-center justify-center bg-ink/50 text-white group-hover:flex">
                         <Eye className="size-4" />
                       </span>

package/src/backoffice/SectionThumb.tsx

@@ -64,6 +64,42 @@ function findImage(node: unknown, depth = 0): string | null {
   return null;
 }
 
+const ENTITIES: Record<string, string> = {
+  "&nbsp;": " ",
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&#39;": "'",
+  "&apos;": "'",
+};
+
+/** Plain-text snippet from sanitized editor HTML (no DOM needed, SSR-safe). */
+function htmlToText(html: string): string {
+  const withBreaks = html.replace(/<(br|\/p|\/h[1-6]|\/li|\/div)[^>]*>/gi, " ");
+  const stripped = withBreaks.replace(/<[^>]*>/g, "");
+  const decoded = stripped
+    .replace(/&nbsp;|&amp;|&lt;|&gt;|&quot;|&#39;|&apos;/gi, (m) => ENTITIES[m.toLowerCase()] ?? m)
+    .replace(/&#(\d+);/g, (_, code: string) => String.fromCodePoint(Number(code)));
+  return decoded.replace(/\s+/g, " ").trim();
+}
+
+/** Text keys, in the order a block would show them. */
+const TEXT_KEYS = ["title", "heading", "name", "label", "eyebrow", "html", "body", "lead", "subtitle"];
+
+/** Picks a string out of a plain string or a localized map (active locale first). */
+function localizedString(value: unknown): string | null {
+  if (typeof value === "string") return value.trim() ? value : null;
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const map = value as Record<string, unknown>;
+  const ordered = ["sv", "en", ...Object.keys(map)];
+  for (const locale of ordered) {
+    const candidate = map[locale];
+    if (typeof candidate === "string" && candidate.trim()) return candidate;
+  }
+  return null;
+}
+
 function findText(node: unknown, depth = 0): string | null {
   if (node == null || depth > 4) return null;
   if (Array.isArray(node)) {
@@ -75,13 +111,16 @@ function findText(node: unknown, depth = 0): string | null {
   }
   if (typeof node !== "object") return null;
   const obj = node as Record<string, unknown>;
-  for (const key of ["title", "name", "label", "eyebrow"]) {
-    const value = obj[key];
-    if (typeof value === "string" && value.trim()) return value;
-    if (value && typeof value === "object") {
-      const sv = (value as Record<string, unknown>).sv;
-      if (typeof sv === "string" && sv.trim()) return sv;
-    }
+  const nested = obj["props"];
+  if (nested && typeof nested === "object") {
+    const found = findText(nested, depth + 1);
+    if (found) return found;
+  }
+  for (const key of TEXT_KEYS) {
+    const raw = localizedString(obj[key]);
+    if (!raw) continue;
+    const text = key === "html" || /<[a-z][^>]*>/i.test(raw) ? htmlToText(raw) : raw.trim();
+    if (text) return text.length > 120 ? `${text.slice(0, 120)}…` : text;
   }
   return null;
 }
@@ -372,7 +411,7 @@ export function DataThumb({
 
   return (
     <div className="relative shrink-0 border border-ink/10 bg-white overflow-hidden" style={style}>
-      {text && !blockType ? (
+      {text ? (
         <div className="flex size-full flex-col justify-center gap-1.5 p-2">
           <div className="h-1 w-6 bg-sea/60" />
           <div className="text-[0.5rem] leading-tight text-ink/70 line-clamp-2 font-serif">

package/src/blocks/components/CountdownBlock.tsx

@@ -10,12 +10,28 @@ import { useCountdownReplacement } from "../countdown-replacement";
 import type { CountdownProps } from "../types";
 
 const TILE_SIZE = {
-  sm: { box: "min-w-14 px-3 py-2.5", digit: "text-2xl md:text-3xl", unit: "text-[0.55rem]" },
-  md: { box: "min-w-20 px-4 py-3.5", digit: "text-3xl md:text-5xl", unit: "text-[0.6rem]" },
-  lg: { box: "min-w-28 px-6 py-5", digit: "text-4xl md:text-6xl", unit: "text-[0.68rem]" },
+  sm: {
+    box: "min-w-0 flex-1 px-2 py-2 sm:min-w-14 sm:flex-none sm:px-3 sm:py-2.5",
+    digit: "text-xl sm:text-2xl md:text-3xl",
+    unit: "text-[0.5rem] sm:text-[0.55rem]",
+  },
+  md: {
+    box: "min-w-0 flex-1 px-2 py-2.5 sm:min-w-20 sm:flex-none sm:px-4 sm:py-3.5",
+    digit: "text-2xl sm:text-3xl md:text-5xl",
+    unit: "text-[0.5rem] sm:text-[0.6rem]",
+  },
+  lg: {
+    box: "min-w-0 flex-1 px-2 py-3 sm:min-w-28 sm:flex-none sm:px-6 sm:py-5",
+    digit: "text-2xl sm:text-4xl md:text-6xl",
+    unit: "text-[0.5rem] sm:text-[0.68rem]",
+  },
 } as const;
 
-const GAP = { sm: "gap-2", md: "gap-3 md:gap-4", lg: "gap-5 md:gap-7" } as const;
+const GAP = {
+  sm: "gap-1.5 sm:gap-2",
+  md: "gap-1.5 sm:gap-3 md:gap-4",
+  lg: "gap-2 sm:gap-5 md:gap-7",
+} as const;
 const PADDING = {
   compact: "py-8 md:py-10",
   normal: "py-14 md:py-20",
@@ -149,11 +165,12 @@ export function CountdownBlock({ props: p }: { props: CountdownProps }) {
     <>
       {heading(p.title, p.body)}
       <div
-        className={`mt-8 flex flex-wrap items-stretch ${GAP[p.gap ?? "md"]} ${align.row}`}
+        className={`mt-8 flex w-full flex-nowrap items-stretch sm:w-auto sm:flex-wrap ${GAP[p.gap ?? "md"]} ${align.row}`}
         aria-live="off"
       >
         {units.map((u, i) => (
-          <div key={i} className="flex items-stretch">
+          <div key={i} className="flex min-w-0 flex-1 items-stretch sm:flex-none">
+
             <div
               className={`flex flex-col items-center justify-center bg-[var(--cd-tile-bg)] ${size.box} ${border} ${shadow}`}
               style={{ borderRadius: "var(--cd-radius)" }}