@styleflow.app/flowpress-astro-core 0.2.0-beta.9 → 1.0.0-beta.1

package/CHANGELOG.md

@@ -2,6 +2,115 @@
 
 ## Unreleased
 
+## 1.0.0-beta.1
+
+- 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
+  runtime dependency, removing the consumer dependency on Styleflow Core.
+- Added project-aware validation for tone/intensity and type/variant pairs,
+  theme propagation and diagnostic-only explicit fallbacks.
+- Made invalid CMS coordinates blocking in strict builds while preserving all
+  existing recursive renderers, forms, responsive media, trusted code, SEO,
+  RichText spacing and accessibility behavior.
+
+## 0.2.0-beta.23
+
+- Added validated Gutenberg text alignment for FlowPress and core text blocks.
+- Added a typed project icon renderer, recursive propagation, standalone icon
+  blocks and ordered button icons with the StyleFlow `control` layout role.
+- Treated `foreground=inherit` as omission, matching inherited tone and
+  intensity behavior.
+- Rendered trusted `sf/code` documents in the main DOM only when WordPress
+  serialization supplies `codeApproved=true`; unapproved documents fail closed.
+
+## 0.2.0-beta.22
+
+- Added a dedicated `sf/image` renderer with WordPress responsive `srcset`,
+  authored or attachment-default `sizes`, intrinsic dimensions, per-image CSS
+  classes and validated loading, decoding and fetch-priority controls.
+- Included per-image CSS classes in the recursive CMS class collector used by
+  consumer Tailwind safelists.
+
+## 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,

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Styleflow
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -9,11 +9,21 @@ The package must not import from an application or project plugin.
 ## Install
 
 ```bash
-pnpm add @styleflow.app/flowpress-astro-core@0.2.0-beta.9
+pnpm add @styleflow.app/flowpress-astro-core@1.0.0-beta.1 \
+  @styleflow.app/astro@1.0.0-beta.1
 ```
 
 Prereleases are pinned exactly. The package expects Astro 7 or newer and the
-matching StyleFlow `0.3.0-beta.x` line.
+exact Styleflow Astro v1 dependency. `styleflowAstro()` must be installed in
+the project configuration and the bundle must first be compiled by the v1
+CLI.
+
+CMS coordinates are validated against the grouped project contract. Valid
+tone/intensity and type/variant pairs are project-specific; numeric intensity,
+v0.x density and browser states passed as component props are rejected.
+`theme` is propagated as a semantic scope. A fallback is permitted only when
+the catalog or `agentPolicy` declares an explicit default, always emits a
+diagnostic, and becomes blocking in strict production builds.
 
 The client reports the GraphQL operation, sanitized endpoint, HTTP/content
 type failures and underlying network/TLS cause. Upstream GraphQL debug details
@@ -37,7 +47,80 @@ 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.
+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.
+
+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.
+`foreground=inherit` is omitted so icons and text inherit the surrounding
+foreground instead of serializing an invalid StyleFlow role.
+
+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%`.
+
+`sf/image` renders the responsive attachment data serialized by WordPress as a
+single `<img>` with `srcset`, `sizes` and positive intrinsic dimensions. The
+block-root `className` remains on its StyleFlow wrapper while `imageClassName`
+targets the image. Loading defaults to `lazy`, decoding to `async` and fetch
+priority to `auto`; invalid stored values fail closed to those defaults.
+
+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.
+
+Projects provide their SVG implementation through the typed `iconRenderer`
+prop. It is used by `sf/icon`, propagated through all recursive paths and used
+for optional button icons in `before` or `after` position.
+
+```astro
+---
+import GutenbergRenderer from "@styleflow.app/flowpress-astro-core/GutenbergRenderer.astro";
+import ProjectIcon from "@sf/ui/Icon.astro";
+---
+
+<GutenbergRenderer blocks={blocks} iconRenderer={ProjectIcon} />
+```
+
+`sf/code` is deliberately a trusted-code boundary, not a sandbox. The renderer
+emits its complete HTML fragment (including style, script, iframe and embed
+elements) in the main document only when the serialized block contains the
+server-issued boolean `codeApproved=true`. The WordPress editor must never
+execute the document, and consumers must not synthesize this flag.
+
+`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
 
@@ -59,5 +142,9 @@ 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
+available. Inspect `npm view`, `gitHead`, integrity and the downloaded tarball.
+Promote to `latest` only after the DMO canary and rollback gate.
+
 Release activity reports are indexed in
 [`docs/activities/README.md`](docs/activities/README.md).

package/dist/astro/BaseLayout.astro

@@ -6,12 +6,14 @@ interface Props {
   lang?: string;
   seo?: SfSeo | null;
   siteName?: string;
+  theme?: string;
 }
 
 const {
   lang = "it",
   seo = null,
-  siteName = import.meta.env.PROJECT_NAME ?? "FlowPress"
+  siteName = import.meta.env.PROJECT_NAME ?? "FlowPress",
+  theme
 } = Astro.props;
 const title = seo?.title || siteName;
 const description = seo?.description || "";
@@ -42,10 +44,13 @@ 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>
-    <S.main tone="neutral" intensity={1} surface="default" layoutRole="none" density="md">
+    <S.main theme={theme} surface="default" layoutRole="none" density="regular">
       <slot />
     </S.main>
   </body>

package/dist/astro/DefaultTemplate.astro

@@ -11,7 +11,7 @@ const hasGutembergBlocks = Array.isArray(content?.contentBlocks) && content.cont
 //TODO SET GLOBAL LOCAL ON ENV
 ---
 
-<BaseLayout lang={route.locale || "it"} seo={route.seo}>
+<BaseLayout lang={route.locale || "it"} seo={route.seo} theme={styleflowContract?.defaultTheme}>
 
   {hasGutembergBlocks ? (
     <GutenbergRenderer
@@ -19,9 +19,9 @@ const hasGutembergBlocks = Array.isArray(content?.contentBlocks) && content.cont
         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>}
+      <S.section surface="default" layoutRole="section" density="regular">
+        <S.h1>{isNotFound ? "Pagina non trovata" : title}</S.h1>
+        {content?.excerpt && <S.p>{content.excerpt}</S.p>}
         {Array.isArray(content?.contentBlocks) && content.contentBlocks.length > 0 ? (
           <GutenbergRenderer
             blocks={content.contentBlocks as import("../types.js").FlowpressBlock[]}
@@ -29,11 +29,9 @@ const hasGutembergBlocks = Array.isArray(content?.contentBlocks) && content.cont
           />
         ) : content?.content && (
           <S.div
-            tone="neutral"
-            intensity={1}
             surface="default"
             layoutRole="stack"
-            density="md"
+            density="regular"
             set:html={String(content.content)}
           />
         )}

package/dist/astro/GutenbergRenderer.astro

@@ -1,12 +1,18 @@
 ---
 import S from "@styleflow.app/astro/S.astro";
+import type {
+  FlowpressBlockRenderers,
+  FlowpressIconRenderer
+} 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 ImageBlock from "./blocks/ImageBlock.astro";
 import ListItemFallback from "./blocks/ListItemFallback.astro";
+import NumberSpinnerBlock from "./blocks/NumberSpinnerBlock.astro";
 import TextBlock from "./blocks/TextBlock.astro";
 import {
   blockHtmlAttributes,
@@ -19,9 +25,11 @@ import {
 interface Props {
   blocks: FlowpressBlock[];
   contract?: StyleflowContract;
+  blockRenderers?: FlowpressBlockRenderers;
+  iconRenderer?: FlowpressIconRenderer;
 }
 
-const { blocks, contract } = Astro.props;
+const { blocks, contract, blockRenderers = {}, iconRenderer: IconRenderer } = Astro.props;
 
 function youtubeEmbedUrl(value: unknown): string | null {
   try {
@@ -46,11 +54,30 @@ function youtubeEmbedUrl(value: unknown): string | null {
   const children = block.innerBlocks ?? [];
   const semantic = semanticProps(block.attributes, contract);
   const htmlAttributes = blockHtmlAttributes(block.attributes);
+  const CustomBlockRenderer = blockRenderers[block.name];
+
+  if (CustomBlockRenderer) {
+    return (
+      <CustomBlockRenderer block={block} contract={contract}>
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+          iconRenderer={IconRenderer}
+        />
+      </CustomBlockRenderer>
+    );
+  }
 
   if (name === "hero") {
     return (
       <HeroBlock block={block} contract={contract}>
-        <Astro.self blocks={children} contract={contract} />
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+          iconRenderer={IconRenderer}
+        />
       </HeroBlock>
     );
   }
@@ -58,7 +85,12 @@ function youtubeEmbedUrl(value: unknown): string | null {
   if (name === "grid") {
     return (
       <GridBlock block={block} contract={contract}>
-        <Astro.self blocks={children} contract={contract} />
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+          iconRenderer={IconRenderer}
+        />
       </GridBlock>
     );
   }
@@ -66,11 +98,20 @@ function youtubeEmbedUrl(value: unknown): string | null {
   if (name === "column") {
     return (
       <ColumnBlock block={block} contract={contract}>
-        <Astro.self blocks={children} contract={contract} />
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+          iconRenderer={IconRenderer}
+        />
       </ColumnBlock>
     );
   }
 
+  if (name === "number-spinner") {
+    return <NumberSpinnerBlock block={block} contract={contract} />;
+  }
+
   if ([
     "heading",
     "rich-text",
@@ -83,7 +124,12 @@ function youtubeEmbedUrl(value: unknown): string | null {
   ].includes(name)) {
     return (
       <TextBlock block={block} contract={contract} hasChildren={children.length > 0}>
-        <Astro.self blocks={children} contract={contract} />
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+          iconRenderer={IconRenderer}
+        />
       </TextBlock>
     );
   }
@@ -92,40 +138,71 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const href = linkValue(block, "href") || "#";
     const link = objectValue(block, "href");
     const opensInNewTab = Boolean(link.opensInNewTab);
+    const icon = String(block.attributes.icon ?? "").trim();
+    const iconPosition = ["after", "right"].includes(
+      String(block.attributes.iconPosition ?? "before")
+    ) ? "after" : "before";
+    const buttonSemantic = semanticProps(block.attributes, contract, {
+      layoutRole: "control",
+      density: "regular"
+    });
+    const buttonIcon = IconRenderer && icon ? (
+      <IconRenderer name={icon} display="inline" size={4} />
+    ) : null;
     return (
       <S
         as="a"
         href={href}
         target={opensInNewTab ? "_blank" : undefined}
         rel={opensInNewTab ? "noopener noreferrer" : undefined}
-        {...semantic}
+        {...buttonSemantic}
         {...htmlAttributes}
       >
+        {iconPosition === "before" ? buttonIcon : null}
         {textValue(block, "label")}
+        {iconPosition === "after" ? buttonIcon : null}
       </S>
     );
   }
 
-  if (name === "image") {
-    const image = block.attributes.image as {
-      url?: string;
-      sourceUrl?: string;
-      alt?: string;
-      altText?: string;
-    } | undefined;
-    const src = image?.url ?? image?.sourceUrl;
-    return src ? (
-      <S as="div" {...semantic} {...htmlAttributes}>
-        <img
-          src={src}
-          alt={String(block.attributes.alt ?? image?.alt ?? image?.altText ?? "")}
-          loading="lazy"
-          decoding="async"
-        />
-      </S>
+  if (name === "icon") {
+    const icon = String(block.attributes.icon ?? "").trim();
+    const display = block.attributes.display === "block" ? "block" : "inline";
+    const numericSize = Number(block.attributes.size ?? 4);
+    const size = Number.isFinite(numericSize) && numericSize > 0
+      ? numericSize
+      : 4;
+    const iconSemantic = semanticProps({
+      foreground: block.attributes.foreground,
+      tone: block.attributes.tone,
+      intensity: block.attributes.intensity
+    }, contract, {});
+    return IconRenderer && icon ? (
+      <IconRenderer
+        name={icon}
+        display={display}
+        size={size}
+        label={String(block.attributes.label ?? "").trim() || undefined}
+        {...iconSemantic}
+        {...htmlAttributes}
+      />
+    ) : null;
+  }
+
+  if (name === "code") {
+    return block.attributes.codeApproved === true ? (
+      <div
+        data-flowpress-trusted-code
+        {...htmlAttributes}
+        set:html={String(block.attributes.document ?? "")}
+      />
     ) : null;
   }
 
+  if (name === "image") {
+    return <ImageBlock block={block} contract={contract} />;
+  }
+
   if (name === "gallery") {
     const images = Array.isArray(block.attributes.images)
       ? block.attributes.images as Array<Record<string, unknown>>
@@ -211,7 +288,12 @@ function youtubeEmbedUrl(value: unknown): string | null {
         {items.map((item, index) => (
           <S as="li">
             {resolvedBlocks[index]?.length ? (
-              <Astro.self blocks={resolvedBlocks[index]} contract={contract} />
+              <Astro.self
+                blocks={resolvedBlocks[index]}
+                contract={contract}
+                blockRenderers={blockRenderers}
+                iconRenderer={IconRenderer}
+              />
             ) : (
               <ListItemFallback item={item} />
             )}
@@ -224,10 +306,20 @@ function youtubeEmbedUrl(value: unknown): string | null {
   if (name === "template") {
     return Object.keys(htmlAttributes).length > 0 ? (
       <div {...htmlAttributes}>
-        <Astro.self blocks={children} contract={contract} />
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+          iconRenderer={IconRenderer}
+        />
       </div>
     ) : (
-      <Astro.self blocks={children} contract={contract} />
+      <Astro.self
+        blocks={children}
+        contract={contract}
+        blockRenderers={blockRenderers}
+        iconRenderer={IconRenderer}
+      />
     );
   }
 
@@ -240,7 +332,12 @@ function youtubeEmbedUrl(value: unknown): string | null {
       <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}
+            iconRenderer={IconRenderer}
+          />
         </details>
       </S>
     );
@@ -291,7 +388,14 @@ function youtubeEmbedUrl(value: unknown): string | null {
     <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}
+            iconRenderer={IconRenderer}
+          />
+        )}
     </S>
   );
 })}

package/dist/astro/blocks/GridBlock.astro

@@ -25,7 +25,7 @@ const align = ["start", "center", "end", "stretch"].includes(
 const semantic = semanticProps(block.attributes, contract, {
   surface: "default",
   layoutRole: "container",
-  density: "md"
+  density: "regular"
 });
 const htmlAttributes = blockHtmlAttributes(block.attributes, "flowpress-grid");
 const style = [

package/dist/astro/blocks/HeroBlock.astro

@@ -4,6 +4,7 @@ import type { FlowpressBlock } from "../../types.js";
 import type { StyleflowContract } from "../../styleflow.js";
 import {
   blockHtmlAttributes,
+  heroObjectPosition,
   objectValue,
   semanticProps
 } from "./helpers.js";
@@ -18,7 +19,7 @@ const attributes = block.attributes;
 const semantic = semanticProps(attributes, contract, {
   surface: "default",
   layoutRole: "region",
-  density: "md"
+  density: "regular"
 });
 const htmlAttributes = blockHtmlAttributes(attributes, "flowpress-hero");
 const backgroundType = ["color", "image", "video"].includes(
@@ -28,6 +29,7 @@ const image = objectValue(block, "backgroundImage");
 const video = objectValue(block, "backgroundVideo");
 const imageSrc = String(image.url ?? image.sourceUrl ?? "");
 const videoSrc = String(video.url ?? video.sourceUrl ?? video.mediaItemUrl ?? "");
+const objectPosition = heroObjectPosition(attributes.objectPosition);
 const scrimEnabled = Boolean(attributes.scrimEnabled) && backgroundType !== "color";
 const scrimIntensity = Math.min(10, Math.max(1, Number(attributes.scrimIntensity) || 6));
 ---
@@ -36,7 +38,10 @@ const scrimIntensity = Math.min(10, Math.max(1, Number(attributes.scrimIntensity
   as="section"
   {...semantic}
   {...htmlAttributes}
-  style={`--flowpress-scrim-opacity:${scrimIntensity * 10}%`}
+  style={[
+    `--flowpress-hero-object-position:${objectPosition}`,
+    `--flowpress-scrim-opacity:${scrimIntensity * 10}%`
+  ].join(";")}
 >
   {backgroundType === "image" && imageSrc ? (
     <img
@@ -87,6 +92,7 @@ const scrimIntensity = Math.min(10, Math.max(1, Number(attributes.scrimIntensity
   .flowpress-hero__media {
     z-index: -2;
     object-fit: cover;
+    object-position: var(--flowpress-hero-object-position);
   }
 
   .flowpress-hero__scrim {