@styleflow.app/flowpress-astro-core 0.2.0-beta.2 → 0.2.0-beta.21

package/CHANGELOG.md

@@ -2,6 +2,117 @@
 
 ## Unreleased
 
+## 0.2.0-beta.21
+
+- Forced locale-aware thousands grouping for four-digit number spinner values,
+  matching the grouping already applied to larger values.
+
+## 0.2.0-beta.20
+
+- Added typed installable feature capabilities and normalized public JSON
+  configuration returned by FlowPress WordPress Core.
+- Added deterministic CSP, consent and tag-manager head slots before the
+  existing project-owned `head` slot.
+
+## 0.2.0-beta.19
+
+- Let the number spinner's visual and accessible value spans inherit the
+  selected number typography instead of assigning the StyleFlow `body-md`
+  fallback to both technical descendants.
+
+## 0.2.0-beta.18
+
+- Updated the exact StyleFlow Astro dependency to `0.3.0-beta.6`, matching
+  the final StyleFlow release that includes the corrected importer and the
+  branded Figma plugin bundle.
+
+## 0.2.0-beta.17
+
+- Updated the exact StyleFlow Astro dependency to `0.3.0-beta.5`, keeping
+  consumers on one runtime aligned with the corrected Figma contract import
+  release.
+
+## 0.2.0-beta.16
+
+- Updated the exact StyleFlow Astro dependency to `0.3.0-beta.4` so consumers
+  use the responsive compiler contract and a single matching runtime.
+
+## 0.2.0-beta.15
+
+- Applied Hero image and video `object-position` from a sanitized pair of
+  percentage coordinates, with a safe centered fallback.
+
+## 0.2.0-beta.14
+
+- Added a recursive project block-renderer registry to
+  `GutenbergRenderer.astro`, including imported `sf/template` and resolved
+  query-item descendants.
+
+## 0.2.0-beta.13
+
+- Kept number spinners static on their final values when
+  `IntersectionObserver` or motion preference detection is unavailable,
+  rather than starting outside a verifiable viewport intersection.
+
+## 0.2.0-beta.12
+
+- Added the reusable `sf/number-spinner` Astro renderer with independently
+  styled prefix, number and suffix text segments.
+- Started counting only on first viewport intersection, retained the final
+  target in no-JavaScript markup and disabled animation for reduced-motion
+  preferences, including preference changes during an active count.
+- Kept the final numeric value permanently available to assistive technology
+  while visual frame updates remain hidden from accessibility APIs.
+
+## 0.2.0-beta.11
+
+- Rendered empty Gutenberg and FlowPress text blocks with an internal
+  ` `, preserving their typographic line height without visible
+  characters or synthetic break elements.
+
+## 0.2.0-beta.10
+
+- Preserved intentionally empty core Gutenberg paragraphs as visible line
+  breaks, including paragraphs resolved through FlowPress templates.
+- Exported safe recursive collection of CMS-authored block class names for
+  Tailwind `@source inline()` generation.
+
+## 0.2.0-beta.9
+
+- Preserved repeated Gutenberg RichText spacing across `<br>` sequences,
+  legacy empty paragraphs and literal double/triple newlines.
+
+## 0.2.0-beta.8
+
+- Applied Gutenberg `anchor` and `className` attributes to each rendered
+  block root, merging custom classes with the required FlowPress renderer
+  classes and preserving transparent template blocks when neither is set.
+
+## 0.2.0-beta.5
+
+- Split Gutenberg rendering into dedicated hero, responsive layout, text,
+  list/template and CF7 modules.
+- Added semantic foreground/modifier propagation and core text block
+  rendering.
+- Added responsive 12-column inheritance, token-based partial containers,
+  hero media/scrim rendering and reduced-motion handling.
+- Added repeated query-item template rendering with the previous plain-list
+  fallback.
+- Added an accessible Turnstile/CF7 browser form compatible with static and
+  server builds.
+- Added Astro component checking to the release gate.
+
+## 0.2.0-beta.4
+
+- Updated the exact StyleFlow Astro dependency to `0.3.0-beta.2`.
+- Validated the npm Trusted Publisher path with a new OIDC-only publication.
+
+## 0.2.0-beta.3
+
+- Updated the exact StyleFlow Astro dependency to `0.3.0-beta.1`.
+- Made the optional PHP parity test compatible with standalone CI checkouts;
+  the TypeScript hierarchy tests remain mandatory.
+
 ## 0.2.0-beta.2
 
 - Made Gutenberg color axes inherit by omission until authors explicitly set

package/README.md

@@ -9,7 +9,7 @@ The package must not import from an application or project plugin.
 ## Install
 
 ```bash
-pnpm add @styleflow.app/flowpress-astro-core@0.2.0-beta.0
+pnpm add @styleflow.app/flowpress-astro-core@0.2.0-beta.19
 ```
 
 Prereleases are pinned exactly. The package expects Astro 7 or newer and the
@@ -30,6 +30,57 @@ For local Cloudflare development, prefer an HTTP loopback endpoint dedicated
 to server-to-server traffic. Keep the public HTTPS backend URL separate for
 canonical URL rewriting.
 
+`GutenbergRenderer.astro` renders the responsive hero/grid/column contract,
+StyleFlow text axes and resolved content/query templates. CF7 schemas
+serialized by WordPress become accessible client forms that submit directly
+to the protected FlowPress REST endpoint, so the same component works in
+static and server output modes. Gutenberg `anchor` and `className` attributes
+are applied to the rendered block root as HTML `id` and `class`. Rich Text
+preserves intentional double, triple and longer line breaks, including content
+saved by older editor versions as empty paragraphs. Empty textual blocks render
+an internal ` `, preserving their typographic line height without adding
+visible characters. The exported
+`collectFlowpressClassNames()` helper recursively extracts safe class tokens
+from rendered CMS blocks so consumers can generate Tailwind
+`@source inline()` directives before compiling their frontend CSS.
+
+Hero image and video backgrounds apply the catalog `objectPosition` value as
+two percentages (for example `77% 100%`). Invalid or missing CMS values safely
+fall back to `50% 50%`.
+
+Projects can add renderers for project-owned Gutenberg blocks without copying
+or patching the core renderer. Pass a `FlowpressBlockRenderers` map keyed by the
+full block name; the registry is propagated through every recursive rendering
+path, including imported `sf/template` content and resolved query-item
+templates.
+
+```astro
+---
+import GutenbergRenderer from "@styleflow.app/flowpress-astro-core/GutenbergRenderer.astro";
+import type {
+  FlowpressBlockRenderers
+} from "@styleflow.app/flowpress-astro-core";
+import ProjectTimelineBlock from "./ProjectTimelineBlock.astro";
+
+const blockRenderers = {
+  "sf/timeline": ProjectTimelineBlock
+} satisfies FlowpressBlockRenderers;
+---
+
+<GutenbergRenderer blocks={blocks} blockRenderers={blockRenderers} />
+```
+
+Each custom renderer receives the original `block` and optional StyleFlow
+`contract`. Its default slot contains recursively rendered child blocks, so a
+container override can place `<slot />` where its children belong.
+
+`sf/number-spinner` renders prefix, target number and suffix with independent
+semantic tags and StyleFlow text coordinates. Its numeric value counts from
+zero only when it enters the viewport. The final target remains available to
+assistive technology and without JavaScript; `prefers-reduced-motion: reduce`
+skips the animation entirely. Browsers without viewport observation keep the
+server-rendered final value instead of guessing when to start.
+
 ## Release
 
 ```bash
@@ -45,3 +96,10 @@ release and in CI.
 The first publish requires npm organization access and 2FA. Subsequent
 publishes use `.github/workflows/publish.yml` with npm trusted publishing
 (OIDC); no long-lived publish token belongs in this repository.
+
+The TypeScript template-hierarchy suite is self-contained. Its additional PHP
+parity test runs when the sibling `flowpress-wordpress-core` checkout is
+available locally and is skipped in a standalone package checkout.
+
+Release activity reports are indexed in
+[`docs/activities/README.md`](docs/activities/README.md).

package/dist/astro/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import type { SfSeo } from "../types.js";
+import S from "@styleflow.app/astro/S.astro";
 
 interface Props {
   lang?: string;
@@ -41,9 +42,14 @@ const jsonLd = seo?.jsonLd ? JSON.stringify(seo.jsonLd) : null;
     {seo?.twitter?.image?.url && <meta name="twitter:image" content={seo.twitter.image.url} />}
     {seo?.twitter?.image?.alt && <meta name="twitter:image:alt" content={seo.twitter.image.alt} />}
     {jsonLd && <script type="application/ld+json" set:html={jsonLd} />}
+    <slot name="head-csp" />
+    <slot name="head-consent" />
+    <slot name="head-tag-manager" />
     <slot name="head" />
   </head>
   <body>
-    <slot />
+    <S.main tone="neutral" intensity={1} surface="default" layoutRole="none" density="md">
+      <slot />
+    </S.main>
   </body>
 </html>

package/dist/astro/DefaultTemplate.astro

@@ -7,28 +7,38 @@ import type { FlowpressTemplateProps } from "../types.js";
 const { route, content, styleflowContract } = Astro.props as FlowpressTemplateProps;
 const title = content?.title || route.seo?.title || "Contenuto";
 const isNotFound = route.queryType === "404" || route.status === 404;
+const hasGutembergBlocks = Array.isArray(content?.contentBlocks) && content.contentBlocks.length > 0 ? true : false;
+//TODO SET GLOBAL LOCAL ON ENV
 ---
 
 <BaseLayout lang={route.locale || "it"} seo={route.seo}>
-  <S.main tone="neutral" intensity={1} surface="default" layoutRole="container" density="md">
-    <S.section tone="neutral" intensity={1} surface="default" layoutRole="section" density="md">
-      <S.h1 ty="heading" v="1" w="strong">{isNotFound ? "Pagina non trovata" : title}</S.h1>
-      {content?.excerpt && <S.p ty="body" v="md" w="default">{content.excerpt}</S.p>}
-      {Array.isArray(content?.contentBlocks) && content.contentBlocks.length > 0 ? (
-        <GutenbergRenderer
-          blocks={content.contentBlocks as import("../types.js").FlowpressBlock[]}
-          contract={styleflowContract}
-        />
-      ) : content?.content && (
-        <S.div
-          tone="neutral"
-          intensity={1}
-          surface="default"
-          layoutRole="stack"
-          density="md"
-          set:html={String(content.content)}
-        />
-      )}
-    </S.section>
-  </S.main>
+
+  {hasGutembergBlocks ? (
+    <GutenbergRenderer
+        blocks={content?.contentBlocks as import("../types.js").FlowpressBlock[]}
+        contract={styleflowContract}
+      />
+  ) : ( 
+      <S.section tone="neutral" intensity={1} surface="default" layoutRole="section" density="md">
+        <S.h1 ty="heading" v="1" w="strong">{isNotFound ? "Pagina non trovata" : title}</S.h1>
+        {content?.excerpt && <S.p ty="body" v="md" w="default">{content.excerpt}</S.p>}
+        {Array.isArray(content?.contentBlocks) && content.contentBlocks.length > 0 ? (
+          <GutenbergRenderer
+            blocks={content.contentBlocks as import("../types.js").FlowpressBlock[]}
+            contract={styleflowContract}
+          />
+        ) : content?.content && (
+          <S.div
+            tone="neutral"
+            intensity={1}
+            surface="default"
+            layoutRole="stack"
+            density="md"
+            set:html={String(content.content)}
+          />
+        )}
+      </S.section>
+   )}
+
+  
 </BaseLayout>

package/dist/astro/GutenbergRenderer.astro

@@ -1,68 +1,30 @@
 ---
 import S from "@styleflow.app/astro/S.astro";
-import {
-  resolveDynamicStyleflowProps,
-  type StyleflowContract
-} from "../styleflow.js";
+import type { FlowpressBlockRenderers } from "../block-renderers.js";
+import type { StyleflowContract } from "../styleflow.js";
 import type { FlowpressBlock } from "../types.js";
+import ColumnBlock from "./blocks/ColumnBlock.astro";
+import FormBlock from "./blocks/FormBlock.astro";
+import GridBlock from "./blocks/GridBlock.astro";
+import HeroBlock from "./blocks/HeroBlock.astro";
+import ListItemFallback from "./blocks/ListItemFallback.astro";
+import NumberSpinnerBlock from "./blocks/NumberSpinnerBlock.astro";
+import TextBlock from "./blocks/TextBlock.astro";
+import {
+  blockHtmlAttributes,
+  linkValue,
+  objectValue,
+  semanticProps,
+  textValue
+} from "./blocks/helpers.js";
 
 interface Props {
   blocks: FlowpressBlock[];
   contract?: StyleflowContract;
+  blockRenderers?: FlowpressBlockRenderers;
 }
 
-const { blocks, contract } = Astro.props;
-
-const defaults = {
-  surface: "default",
-  layoutRole: "stack",
-  density: "md"
-};
-
-function styleflowProps(attributes: Record<string, unknown>) {
-  if (!contract) return defaults;
-  return resolveDynamicStyleflowProps(attributes, defaults, contract);
-}
-
-function dynamicProps(
-  attributes: Record<string, unknown>,
-  fallback: Record<string, unknown>
-) {
-  if (!contract) return fallback;
-  return resolveDynamicStyleflowProps(attributes, fallback, contract);
-}
-
-function text(block: FlowpressBlock, key = "text"): string {
-  return String(block.attributes[key] ?? "");
-}
-
-function objectValue(
-  block: FlowpressBlock,
-  key: string
-): Record<string, unknown> {
-  const value = block.attributes[key];
-  return value && typeof value === "object" && !Array.isArray(value)
-    ? value as Record<string, unknown>
-    : {};
-}
-
-function linkValue(block: FlowpressBlock, key = "link"): string {
-  const value = block.attributes[key];
-  const href = typeof value === "string"
-    ? value
-    : String(objectValue(block, key).url ?? "");
-  if (/^(?:\/(?!\/)|#|https?:\/\/|mailto:|tel:)/i.test(href)) {
-    return href;
-  }
-  return "";
-}
-
-function itemImage(item: Record<string, unknown>): Record<string, unknown> {
-  const value = item.image;
-  return value && typeof value === "object" && !Array.isArray(value)
-    ? value as Record<string, unknown>
-    : {};
-}
+const { blocks, contract, blockRenderers = {} } = Astro.props;
 
 function youtubeEmbedUrl(value: unknown): string | null {
   try {
@@ -85,52 +47,97 @@ function youtubeEmbedUrl(value: unknown): string | null {
 {blocks.map((block) => {
   const name = block.name.replace(/^sf\//, "");
   const children = block.innerBlocks ?? [];
-  const semantic = styleflowProps(block.attributes);
+  const semantic = semanticProps(block.attributes, contract);
+  const htmlAttributes = blockHtmlAttributes(block.attributes);
+  const CustomBlockRenderer = blockRenderers[block.name];
 
-  if (name === "heading") {
-    const level = Math.min(6, Math.max(1, Number(block.attributes.level ?? 2)));
-    const headingTag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    const typography = dynamicProps(
-      {
-        ty: "heading",
-        v: String(block.attributes.variant ?? level),
-        w: String(block.attributes.weight ?? "strong")
-      },
-      { ty: "heading", v: String(level), w: "strong" }
+  if (CustomBlockRenderer) {
+    return (
+      <CustomBlockRenderer block={block} contract={contract}>
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
+      </CustomBlockRenderer>
     );
+  }
+
+  if (name === "hero") {
     return (
-      <S
-        as={headingTag}
-        {...semantic}
-        {...typography}
-        set:html={text(block)}
-      />
+      <HeroBlock block={block} contract={contract}>
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
+      </HeroBlock>
+    );
+  }
+
+  if (name === "grid") {
+    return (
+      <GridBlock block={block} contract={contract}>
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
+      </GridBlock>
     );
   }
 
-  if (name === "rich-text" || name === "core/paragraph") {
-    const html = String(block.attributes.content ?? block.innerHtml ?? "");
-    return <S as="div" {...semantic} set:html={html} />;
+  if (name === "column") {
+    return (
+      <ColumnBlock block={block} contract={contract}>
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
+      </ColumnBlock>
+    );
+  }
+
+  if (name === "number-spinner") {
+    return <NumberSpinnerBlock block={block} contract={contract} />;
+  }
+
+  if ([
+    "heading",
+    "rich-text",
+    "quote",
+    "core/paragraph",
+    "core/heading",
+    "core/list",
+    "core/list-item",
+    "core/quote"
+  ].includes(name)) {
+    return (
+      <TextBlock block={block} contract={contract} hasChildren={children.length > 0}>
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
+      </TextBlock>
+    );
   }
 
   if (name === "button") {
     const href = linkValue(block, "href") || "#";
-    const interaction = dynamicProps(
-      {
-        interactivePriority: String(
-          block.attributes.interactivePriority ?? "primary"
-        )
-      },
-      { interactivePriority: "primary" }
-    );
+    const link = objectValue(block, "href");
+    const opensInNewTab = Boolean(link.opensInNewTab);
     return (
       <S
         as="a"
         href={href}
+        target={opensInNewTab ? "_blank" : undefined}
+        rel={opensInNewTab ? "noopener noreferrer" : undefined}
         {...semantic}
-        {...interaction}
+        {...htmlAttributes}
       >
-        {text(block, "label")}
+        {textValue(block, "label")}
       </S>
     );
   }
@@ -144,7 +151,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
     } | undefined;
     const src = image?.url ?? image?.sourceUrl;
     return src ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <img
           src={src}
           alt={String(block.attributes.alt ?? image?.alt ?? image?.altText ?? "")}
@@ -160,7 +167,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       ? block.attributes.images as Array<Record<string, unknown>>
       : [];
     return (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         {images.map((image) => image.url ? (
           <img
             src={String(image.url)}
@@ -177,7 +184,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const video = objectValue(block, "video");
     const poster = objectValue(block, "poster");
     return video.url ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <video
           src={String(video.url)}
           poster={poster.url ? String(poster.url) : undefined}
@@ -193,7 +200,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
   if (name === "video-youtube") {
     const embed = youtubeEmbedUrl(block.attributes.url);
     return embed ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <iframe
           src={embed}
           title={String(block.attributes.title ?? "YouTube video")}
@@ -205,24 +212,19 @@ function youtubeEmbedUrl(value: unknown): string | null {
     ) : null;
   }
 
-  if (name === "quote") {
+  if (name === "chip") {
     return (
-      <S as="blockquote" {...semantic}>
-        <S as="p" set:html={text(block, "quote")} />
-        {block.attributes.citation && <cite>{String(block.attributes.citation)}</cite>}
+      <S as="span" {...semantic} {...htmlAttributes}>
+        {textValue(block, "label")}
       </S>
     );
   }
 
-  if (name === "chip") {
-    return <S as="span" {...semantic}>{text(block, "label")}</S>;
-  }
-
   if (name === "card") {
     const media = objectValue(block, "image");
     const href = linkValue(block);
     return (
-      <S as="article" {...semantic}>
+      <S as="article" {...semantic} {...htmlAttributes}>
         {media.url && (
           <img src={String(media.url)} alt={String(media.alt ?? "")} loading="lazy" />
         )}
@@ -237,37 +239,60 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const items = Array.isArray(block.attributes.resolvedItems)
       ? block.attributes.resolvedItems as Array<Record<string, unknown>>
       : [];
+    const resolvedBlocks = Array.isArray(block.attributes.resolvedBlocks)
+      ? block.attributes.resolvedBlocks as FlowpressBlock[][]
+      : [];
     return (
-      <S as="ul" {...semantic}>
-        {items.map((item) => (
+      <S as="ul" {...semantic} {...htmlAttributes}>
+        {items.map((item, index) => (
           <S as="li">
-            {itemImage(item).url && (
-              <img
-                src={String(itemImage(item).url)}
-                alt={String(itemImage(item).alt ?? "")}
-                loading="lazy"
-                decoding="async"
+            {resolvedBlocks[index]?.length ? (
+              <Astro.self
+                blocks={resolvedBlocks[index]}
+                contract={contract}
+                blockRenderers={blockRenderers}
               />
-            )}
-            {item.uri ? (
-              <S as="a" href={String(item.uri)}>{String(item.title ?? "")}</S>
             ) : (
-              <S as="span">{String(item.title ?? "")}</S>
+              <ListItemFallback item={item} />
             )}
-            {item.excerpt && <S as="p">{String(item.excerpt)}</S>}
-            {item.priceHtml && <S as="div" set:html={String(item.priceHtml)} />}
           </S>
         ))}
       </S>
     );
   }
 
+  if (name === "template") {
+    return Object.keys(htmlAttributes).length > 0 ? (
+      <div {...htmlAttributes}>
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+        />
+      </div>
+    ) : (
+      <Astro.self
+        blocks={children}
+        contract={contract}
+        blockRenderers={blockRenderers}
+      />
+    );
+  }
+
+  if (name === "form") {
+    return <FormBlock block={block} contract={contract} />;
+  }
+
   if (name === "accordion-item") {
     return (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <details>
           <summary>{String(block.attributes.title ?? "")}</summary>
-          <Astro.self blocks={children} contract={contract} />
+          <Astro.self
+            blocks={children}
+            contract={contract}
+            blockRenderers={blockRenderers}
+          />
         </details>
       </S>
     );
@@ -290,7 +315,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
         + `?key=${encodeURIComponent(googleMapsApiKey)}`
         + `&q=${encodeURIComponent(query)}`;
       return (
-        <S as="div" {...semantic}>
+        <S as="div" {...semantic} {...htmlAttributes}>
           <iframe
             src={source}
             title={address || "Map"}
@@ -301,7 +326,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       );
     }
     return query ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <S
           as="a"
           href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(query)}`}
@@ -313,12 +338,18 @@ function youtubeEmbedUrl(value: unknown): string | null {
     ) : null;
   }
 
-  const layoutTag = ["section", "hero"].includes(name) ? "section" : "div";
+  const layoutTag = name === "section" ? "section" : "div";
   return (
-    <S as={layoutTag} {...semantic}>
+    <S as={layoutTag} {...semantic} {...htmlAttributes}>
       {block.innerHtml && children.length === 0
         ? <S as="div" set:html={block.innerHtml} />
-        : <Astro.self blocks={children} contract={contract} />}
+        : (
+          <Astro.self
+            blocks={children}
+            contract={contract}
+            blockRenderers={blockRenderers}
+          />
+        )}
     </S>
   );
 })}