@styleflow.app/flowpress-astro-core 1.0.0-beta.5 → 1.0.0-beta.6

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 1.0.0-beta.6
+
+- Added required `htmlProps`, `styleflowProps`, composition and deterministic
+  render context to every certified block adapter.
+- Added single-emission composition stylesheets for validated WordPress block
+  CSS, plus theme-aware positive/negative Site Logo rendering.
+- Added the no-hydration multi-theme runtime and `sf/theme-toggle` adapter.
+- Made `<S.*>` the only public Astro authoring syntax in package sources.
+- Added `FlowpressCompositionV1`, typed `resolvedData`,
+  `FlowpressClient.getComposition()` and recursive production fail-closed
+  rendering with exact compatibility commands in development.
+
 ## 1.0.0-beta.5
 
 - Updated the exact `@styleflow.app/astro` dependency to `1.0.0-beta.4`,
@@ -44,7 +56,6 @@
 - Updated the exact `@styleflow.app/astro` dependency to `1.0.0-beta.1`,
   keeping consumer trees on one runtime while adopting deterministic CLI
   reports. Runtime behavior is unchanged.
-
 ## 1.0.0-beta.0
 
 - Adopted the grouped Styleflow vNext project contract and the exact Astro v1

package/README.md

@@ -9,8 +9,8 @@ The package must not import from an application or project plugin.
 ## Install
 
 ```bash
-pnpm add @styleflow.app/flowpress-astro-core@1.0.0-beta.5 \
-  @styleflow.app/astro@1.0.0-beta.4
+pnpm add @styleflow.app/flowpress-astro-core@1.0.0-beta.6 \
+  @styleflow.app/astro@1.0.0-beta.5
 ```
 
 Prereleases are pinned exactly. The package expects Astro 7 or newer and the
@@ -79,6 +79,44 @@ grid and dead controls are hidden. If a legacy carousel contains any direct
 child other than `sf/carousel-item`, no interactive instance is initialized:
 the complete content renders statically, with a development diagnostic.
 
+## Site Editor composition
+
+`FlowpressClient.getComposition(uri, locale)` reads the public
+`FlowpressCompositionV1` contract. `CompositionRenderer.astro` walks its block
+tree through an explicit `FlowpressBlockAdapters` registry, passes authored
+attributes and `resolvedData` separately, and never renders `innerHtml` as a
+fallback. Blocking WordPress diagnostics always fail the render. Missing or
+draft adapters, absent block-type descriptors and schema-fingerprint drift
+are visible diagnostics in development and fail closed in production with
+the exact scaffold, refresh or approval command. The fingerprint comparison
+is repeated by Astro and does not rely only on the CMS gate.
+Before invoking an adapter, the renderer resolves the universal Styleflow
+attributes through the same framework-neutral validator used by the built-in
+renderer and passes them as `styleflowProps`. Project adapters can therefore
+apply the authored semantic context to their real root without accepting raw
+WordPress visual values.
+
+Every adapter also receives required normalized `htmlProps` (`anchor` → `id`
+and the additional classes), the full composition and a deterministic render
+context. WordPress-processed block custom CSS is emitted once at the root.
+`ThemeRuntime.astro` applies the persisted contract theme before paint and
+progressively enhances `sf/theme-toggle` without hydrating React. The shared
+Site Logo adapter renders positive and negative variants while inherited CSS
+variables make the nearest nested theme authoritative.
+
+```astro
+---
+import CompositionRenderer from "@styleflow.app/flowpress-astro-core/CompositionRenderer.astro";
+import { blockAdapters } from "./generated/block-adapter-registry";
+---
+
+<CompositionRenderer composition={composition} adapters={blockAdapters} />
+```
+
+Static adapters produce no JavaScript by default. A project opts into client
+runtime only inside adapters classified as interactive; React views rendered
+without `client:*` remain server-only HTML.
+
 Heading, rich-text, quote and matching core blocks accept Gutenberg alignment
 from either `style.typography.textAlign` or the FlowPress `textAlign` field.
 Only `left`, `center`, `right`, `justify`, `start` and `end` reach CSS.
@@ -167,7 +205,7 @@ 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.
 
-Publish v1 betas on `next` only after Components and WordPress Core are
+Publish `1.0.0-beta.6` on `next` only after Components and WordPress Core are
 available. Inspect `npm view`, `gitHead`, integrity and the downloaded tarball.
 Promote to `latest` only after the DMO canary and rollback gate.
 

package/dist/astro/BaseLayout.astro

@@ -1,19 +1,22 @@
 ---
 import type { SfSeo } from "../types.js";
 import S from "@styleflow.app/astro/S.astro";
+import ThemeRuntime from "./ThemeRuntime.astro";
 
 interface Props {
   lang?: string;
   seo?: SfSeo | null;
   siteName?: string;
   theme?: string;
+  themes?: string[];
 }
 
 const {
   lang = "it",
   seo = null,
   siteName = import.meta.env.PROJECT_NAME ?? "FlowPress",
-  theme
+  theme,
+  themes = theme ? [theme] : []
 } = Astro.props;
 const title = seo?.title || siteName;
 const description = seo?.description || "";
@@ -26,6 +29,7 @@ const jsonLd = seo?.jsonLd ? JSON.stringify(seo.jsonLd) : null;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
+    {theme && themes.length ? <ThemeRuntime themes={themes} defaultTheme={theme} /> : null}
     <title>{title}</title>
     {description && <meta name="description" content={description} />}
     {robots && <meta name="robots" content={robots} />}

package/dist/astro/CompositionRenderer.astro

@@ -0,0 +1,126 @@
+---
+import type { FlowpressBlockAdapters } from "../block-renderers.js";
+import {
+  flowpressAdapterCompatibilityIssue,
+  flowpressBlockHtmlProps,
+  flowpressCompositionLogoStyles,
+  flowpressBlockTypeDescriptors
+} from "../composition.js";
+import {
+  resolveFlowpressBlockStyleflowProps,
+  type StyleflowContract
+} from "../styleflow.js";
+import type { FlowpressBlock, FlowpressCompositionV1 } from "../types.js";
+
+interface Props {
+  composition: FlowpressCompositionV1;
+  adapters: FlowpressBlockAdapters;
+  blocks?: FlowpressBlock[];
+  contract?: StyleflowContract;
+  parentBlockName?: string;
+  production?: boolean;
+  depth?: number;
+}
+
+const {
+  composition,
+  adapters,
+  blocks = composition.blocks,
+  contract,
+  parentBlockName,
+  production = import.meta.env.PROD,
+  depth = 0
+} = Astro.props;
+
+const blocking = composition.diagnostics.filter((diagnostic) => diagnostic.blocking);
+if (blocking.length > 0 && production) {
+  throw new Error(
+    `FlowPress composition ${composition.sourceDigest} is not renderable:\n`
+      + blocking.map(({ code, message }) => `- ${code}: ${message}`).join("\n")
+  );
+}
+const descriptors = flowpressBlockTypeDescriptors(composition);
+const logoStyles = parentBlockName === undefined
+  ? flowpressCompositionLogoStyles(composition)
+  : "";
+---
+
+{parentBlockName === undefined && composition.stylesheets.map((stylesheet) => (
+  <style data-flowpress-composition-style={stylesheet.id} set:html={stylesheet.css} />
+))}
+{logoStyles ? <style data-flowpress-logo-styles set:html={logoStyles} /> : null}
+
+{blocking.length > 0 && !production && parentBlockName === undefined ? (
+  <aside data-flowpress-composition-diagnostics role="status">
+    <strong>FlowPress composition diagnostics</strong>
+    <ul>
+      {blocking.map(({ code, message, command }) => (
+        <li data-diagnostic-code={code}>
+          {message}
+          {command ? <code>{command}</code> : null}
+        </li>
+      ))}
+    </ul>
+  </aside>
+) : null}
+
+{blocks.map((block) => {
+  const adapter = adapters[block.name];
+  const issue = flowpressAdapterCompatibilityIssue(block.name, descriptors, adapters);
+  if (issue && production) throw new Error(issue.message);
+  if (!adapter) {
+    return (
+      <aside data-flowpress-compatibility={issue?.code ?? "missing-adapter"} data-block-name={block.name} role="status">
+        <strong>Missing block adapter: {block.name}</strong>
+        <code>{issue?.command}</code>
+      </aside>
+    );
+  }
+  const Adapter = adapter.renderer;
+  const children = block.innerBlocks ?? [];
+  const styleflowProps = resolveFlowpressBlockStyleflowProps(
+    block.attributes,
+    contract,
+    {},
+    {
+      strict: production,
+      onDiagnostic: (diagnostic) => console.warn(
+        `[${diagnostic.code}] ${diagnostic.message}`
+      )
+    }
+  );
+  const htmlProps = flowpressBlockHtmlProps(block.attributes);
+  return (
+    <>
+      {issue && (
+        <aside data-flowpress-compatibility={issue.code} data-block-name={block.name} role="status">
+          <strong>{issue.message}</strong>
+          <code>{issue.command}</code>
+        </aside>
+      )}
+      <Adapter
+        block={block}
+        parentBlockName={parentBlockName}
+        contract={contract}
+        composition={composition}
+        styleflowProps={styleflowProps}
+        htmlProps={htmlProps}
+        context={{
+          ...(parentBlockName ? { parentBlockName } : {}),
+          depth,
+          production
+        }}
+      >
+        <Astro.self
+          composition={composition}
+          adapters={adapters}
+          blocks={children}
+          contract={contract}
+          parentBlockName={block.name}
+          production={production}
+          depth={depth + 1}
+        />
+      </Adapter>
+    </>
+  );
+})}

package/dist/astro/DefaultTemplate.astro

@@ -11,7 +11,12 @@ const hasGutembergBlocks = Array.isArray(content?.contentBlocks) && content.cont
 //TODO SET GLOBAL LOCAL ON ENV
 ---
 
-<BaseLayout lang={route.locale || "it"} seo={route.seo} theme={styleflowContract?.defaultTheme}>
+<BaseLayout
+  lang={route.locale || "it"}
+  seo={route.seo}
+  theme={styleflowContract?.defaultTheme}
+  themes={styleflowContract?.semantic.themes}
+>
 
   {hasGutembergBlocks ? (
     <GutenbergRenderer

package/dist/astro/GutenbergRenderer.astro

@@ -5,7 +5,8 @@ import type {
   FlowpressIconRenderer
 } from "../block-renderers.js";
 import type { StyleflowContract } from "../styleflow.js";
-import type { FlowpressBlock } from "../types.js";
+import type { FlowpressBlock, FlowpressBlockHtmlProps } from "../types.js";
+import type { DynamicStyleflowProps } from "../styleflow.js";
 import ColumnBlock from "./blocks/ColumnBlock.astro";
 import CarouselBlock from "./blocks/CarouselBlock.astro";
 import CarouselItemBlock from "./blocks/CarouselItemBlock.astro";
@@ -29,9 +30,18 @@ interface Props {
   contract?: StyleflowContract;
   blockRenderers?: FlowpressBlockRenderers;
   iconRenderer?: FlowpressIconRenderer;
+  rootHtmlProps?: FlowpressBlockHtmlProps;
+  rootStyleflowProps?: DynamicStyleflowProps;
 }
 
-const { blocks, contract, blockRenderers = {}, iconRenderer: IconRenderer } = Astro.props;
+const {
+  blocks,
+  contract,
+  blockRenderers = {},
+  iconRenderer: IconRenderer,
+  rootHtmlProps,
+  rootStyleflowProps
+} = Astro.props;
 
 function youtubeEmbedUrl(value: unknown): string | null {
   try {
@@ -51,11 +61,15 @@ function youtubeEmbedUrl(value: unknown): string | null {
 }
 ---
 
-{blocks.map((block) => {
+{blocks.map((block, index) => {
   const name = block.name.replace(/^sf\//, "");
   const children = block.innerBlocks ?? [];
-  const genericSemantic = () => semanticProps(block.attributes, contract);
-  const htmlAttributes = blockHtmlAttributes(block.attributes);
+  const semantic = index === 0 && blocks.length === 1 && rootStyleflowProps
+    ? rootStyleflowProps
+    : semanticProps(block.attributes, contract);
+  const htmlAttributes = index === 0 && blocks.length === 1 && rootHtmlProps
+    ? rootHtmlProps
+    : blockHtmlAttributes(block.attributes);
   const CustomBlockRenderer = blockRenderers[block.name];
 
   if (CustomBlockRenderer) {
@@ -193,8 +207,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       </>
     );
     return href ? (
-      <S
-        as="a"
+      <S.a
         href={href}
         target={opensInNewTab ? "_blank" : undefined}
         rel={opensInNewTab ? "noopener noreferrer" : undefined}
@@ -202,17 +215,16 @@ function youtubeEmbedUrl(value: unknown): string | null {
         {...htmlAttributes}
       >
         {buttonContent}
-      </S>
+      </S.a>
     ) : (
-      <S
-        as="span"
+      <S.span
         aria-disabled="true"
         data-flowpress-link-unresolved
         {...buttonSemantic}
         {...htmlAttributes}
       >
         {buttonContent}
-      </S>
+      </S.span>
     );
   }
 
@@ -259,7 +271,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       ? block.attributes.images as Array<Record<string, unknown>>
       : [];
     return (
-      <S as="div" {...genericSemantic()} {...htmlAttributes}>
+      <S.div {...semantic} {...htmlAttributes}>
         {images.map((image) => image.url ? (
           <img
             src={String(image.url)}
@@ -268,7 +280,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
             decoding="async"
           />
         ) : null)}
-      </S>
+      </S.div>
     );
   }
 
@@ -276,7 +288,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const video = objectValue(block, "video");
     const poster = objectValue(block, "poster");
     return video.url ? (
-      <S as="div" {...genericSemantic()} {...htmlAttributes}>
+      <S.div {...semantic} {...htmlAttributes}>
         <video
           src={String(video.url)}
           poster={poster.url ? String(poster.url) : undefined}
@@ -285,14 +297,14 @@ function youtubeEmbedUrl(value: unknown): string | null {
           muted={Boolean(block.attributes.autoplay)}
           playsinline
         />
-      </S>
+      </S.div>
     ) : null;
   }
 
   if (name === "video-youtube") {
     const embed = youtubeEmbedUrl(block.attributes.url);
     return embed ? (
-      <S as="div" {...genericSemantic()} {...htmlAttributes}>
+      <S.div {...semantic} {...htmlAttributes}>
         <iframe
           src={embed}
           title={String(block.attributes.title ?? "YouTube video")}
@@ -300,15 +312,15 @@ function youtubeEmbedUrl(value: unknown): string | null {
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowfullscreen
         />
-      </S>
+      </S.div>
     ) : null;
   }
 
   if (name === "chip") {
     return (
-      <S as="span" {...genericSemantic()} {...htmlAttributes}>
+      <S.span {...semantic} {...htmlAttributes}>
         {textValue(block, "label")}
-      </S>
+      </S.span>
     );
   }
 
@@ -316,14 +328,14 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const media = objectValue(block, "image");
     const href = linkValue(block);
     return (
-      <S as="article" {...genericSemantic()} {...htmlAttributes}>
+      <S.article {...semantic} {...htmlAttributes}>
         {media.url && (
           <img src={String(media.url)} alt={String(media.alt ?? "")} loading="lazy" />
         )}
-        {block.attributes.title && <S as="h3">{String(block.attributes.title)}</S>}
-        {block.attributes.text && <S as="p">{String(block.attributes.text)}</S>}
-        {href && <S as="a" href={href}>Scopri</S>}
-      </S>
+        {block.attributes.title && <S.h3>{String(block.attributes.title)}</S.h3>}
+        {block.attributes.text && <S.p>{String(block.attributes.text)}</S.p>}
+        {href && <S.a href={href}>Scopri</S.a>}
+      </S.article>
     );
   }
 
@@ -335,9 +347,9 @@ function youtubeEmbedUrl(value: unknown): string | null {
       ? block.attributes.resolvedBlocks as FlowpressBlock[][]
       : [];
     return (
-      <S as="ul" {...genericSemantic()} {...htmlAttributes}>
+      <S.ul {...semantic} {...htmlAttributes}>
         {items.map((item, index) => (
-          <S as="li">
+          <S.li>
             {resolvedBlocks[index]?.length ? (
               <Astro.self
                 blocks={resolvedBlocks[index]}
@@ -348,9 +360,9 @@ function youtubeEmbedUrl(value: unknown): string | null {
             ) : (
               <ListItemFallback item={item} />
             )}
-          </S>
+          </S.li>
         ))}
-      </S>
+      </S.ul>
     );
   }
 
@@ -380,7 +392,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
 
   if (name === "accordion-item") {
     return (
-      <S as="div" {...genericSemantic()} {...htmlAttributes}>
+      <S.div {...semantic} {...htmlAttributes}>
         <details>
           <summary>{String(block.attributes.title ?? "")}</summary>
           <Astro.self
@@ -390,7 +402,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
             iconRenderer={IconRenderer}
           />
         </details>
-      </S>
+      </S.div>
     );
   }
 
@@ -411,42 +423,41 @@ function youtubeEmbedUrl(value: unknown): string | null {
         + `?key=${encodeURIComponent(googleMapsApiKey)}`
         + `&q=${encodeURIComponent(query)}`;
       return (
-        <S as="div" {...genericSemantic()} {...htmlAttributes}>
+        <S.div {...semantic} {...htmlAttributes}>
           <iframe
             src={source}
             title={address || "Map"}
             loading="lazy"
             referrerpolicy="no-referrer-when-downgrade"
           />
-        </S>
+        </S.div>
       );
     }
     return query ? (
-      <S as="div" {...genericSemantic()} {...htmlAttributes}>
-        <S
-          as="a"
+      <S.div {...semantic} {...htmlAttributes}>
+        <S.a
           href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(query)}`}
           rel="noreferrer"
         >
           {address || query}
-        </S>
-      </S>
+        </S.a>
+      </S.div>
     ) : null;
   }
 
-  const layoutTag = name === "section" ? "section" : "div";
-  return (
-    <S as={layoutTag} {...genericSemantic()} {...htmlAttributes}>
-      {block.innerHtml && children.length === 0
-        ? <S as="div" set:html={block.innerHtml} />
-        : (
-          <Astro.self
-            blocks={children}
-            contract={contract}
-            blockRenderers={blockRenderers}
-            iconRenderer={IconRenderer}
-          />
-        )}
-    </S>
+  const fallbackContent = block.innerHtml && children.length === 0
+    ? <S.div set:html={block.innerHtml} />
+    : (
+      <Astro.self
+        blocks={children}
+        contract={contract}
+        blockRenderers={blockRenderers}
+        iconRenderer={IconRenderer}
+      />
+    );
+  return name === "section" ? (
+    <S.section {...semantic} {...htmlAttributes}>{fallbackContent}</S.section>
+  ) : (
+    <S.div {...semantic} {...htmlAttributes}>{fallbackContent}</S.div>
   );
 })}

package/dist/astro/ThemeRuntime.astro

@@ -0,0 +1,24 @@
+---
+import { styleflowThemeBootstrapScript } from "../theme-runtime.js";
+
+interface Props {
+  themes: string[];
+  defaultTheme: string;
+}
+
+const { themes, defaultTheme } = Astro.props;
+const bootstrap = styleflowThemeBootstrapScript(themes, defaultTheme);
+---
+
+<script is:inline set:html={bootstrap}></script>
+<script>
+  import { initializeStyleflowThemeRuntime } from "../theme-runtime.js";
+
+  const initialize = () => initializeStyleflowThemeRuntime();
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initialize, { once: true });
+  } else {
+    initialize();
+  }
+  document.addEventListener("astro:page-load", initialize);
+</script>

package/dist/astro/blocks/CarouselBlock.astro

@@ -44,8 +44,7 @@ if (!validChildren && import.meta.env.DEV) {
 
 {validChildren ? (
   <flowpress-carousel>
-    <S
-      as="section"
+    <S.section
       {...semantic}
       {...htmlAttributes}
       aria-label={settings.ariaLabel}
@@ -79,11 +78,10 @@ if (!validChildren && import.meta.env.DEV) {
           <span class="splide__toggle__pause">Pausa</span>
         </button>
       ) : null}
-    </S>
+    </S.section>
   </flowpress-carousel>
 ) : (
-  <S
-    as="section"
+  <S.section
     {...semantic}
     {...htmlAttributes}
     aria-label={settings.ariaLabel}
@@ -92,7 +90,7 @@ if (!validChildren && import.meta.env.DEV) {
     style={style}
   >
     <slot />
-  </S>
+  </S.section>
 )}
 
 <script>

package/dist/astro/blocks/CarouselItemBlock.astro

@@ -17,9 +17,9 @@ const htmlAttributes = blockHtmlAttributes(
 );
 ---
 
-<S as="li" {...semantic} {...htmlAttributes}>
+<S.li {...semantic} {...htmlAttributes}>
   <slot />
-</S>
+</S.li>
 
 <style>
   .flowpress-carousel-item { min-width: 0; }

package/dist/astro/blocks/ColumnBlock.astro

@@ -33,8 +33,7 @@ const style = [
 ].join(";");
 ---
 
-<S
-  as="div"
+<S.div
   {...semantic}
   {...htmlAttributes}
   data-partial={partial}
@@ -42,7 +41,7 @@ const style = [
   style={style}
 >
   <slot />
-</S>
+</S.div>
 
 <style>
   .flowpress-column {

package/dist/astro/blocks/FormBlock.astro

@@ -39,11 +39,11 @@ const optionLabel = (field: FormField, index: number): string =>
 ---
 
 {schema?.available ? (
-  <S as="div" {...semantic} {...htmlAttributes}>
+  <S.div {...semantic} {...htmlAttributes}>
     <flowpress-cf7-form>
       <form action={schema.submitUrl} method="post" enctype="multipart/form-data" novalidate>
         {block.attributes.title || schema.title ? (
-          <S as="h2">{String(block.attributes.title || schema.title)}</S>
+          <S.h2>{String(block.attributes.title || schema.title)}</S.h2>
         ) : null}
         {schema.fields.map((field) => {
           if (field.type === "submit") {
@@ -130,11 +130,11 @@ const optionLabel = (field: FormField, index: number): string =>
         <p data-form-status role="status" aria-live="polite"></p>
       </form>
     </flowpress-cf7-form>
-  </S>
+  </S.div>
 ) : (
-  <S as="p" {...semantic} {...htmlAttributes} role="status">
+  <S.p {...semantic} {...htmlAttributes} role="status">
     Il modulo non è temporaneamente disponibile.
-  </S>
+  </S.p>
 )}
 
 <script>

package/dist/astro/blocks/GridBlock.astro

@@ -38,9 +38,9 @@ const style = [
 ].join(";");
 ---
 
-<S as="div" {...semantic} {...htmlAttributes} data-align={align} style={style}>
+<S.div {...semantic} {...htmlAttributes} data-align={align} style={style}>
   <slot />
-</S>
+</S.div>
 
 <style>
   .flowpress-grid {

package/dist/astro/blocks/HeroBlock.astro

@@ -34,8 +34,7 @@ const scrimEnabled = Boolean(attributes.scrimEnabled) && backgroundType !== "col
 const scrimIntensity = Math.min(10, Math.max(1, Number(attributes.scrimIntensity) || 6));
 ---
 
-<S
-  as="section"
+<S.section
   {...semantic}
   {...htmlAttributes}
   style={[
@@ -71,7 +70,7 @@ const scrimIntensity = Math.min(10, Math.max(1, Number(attributes.scrimIntensity
   <div class="flowpress-hero__content">
     <slot />
   </div>
-</S>
+</S.section>
 
 <style>
   .flowpress-hero {