@styleflow.app/flowpress-astro-core 0.2.0-beta.3 → 0.2.0-beta.5

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 ## Unreleased
 
+## 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`.

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.3
+pnpm add @styleflow.app/flowpress-astro-core@0.2.0-beta.5
 ```
 
 Prereleases are pinned exactly. The package expects Astro 7 or newer and the
@@ -30,6 +30,12 @@ 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.
+
 ## Release
 
 ```bash

package/dist/astro/GutenbergRenderer.astro

@@ -1,10 +1,19 @@
 ---
 import S from "@styleflow.app/astro/S.astro";
-import {
-  resolveDynamicStyleflowProps,
-  type StyleflowContract
-} from "../styleflow.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 TextBlock from "./blocks/TextBlock.astro";
+import {
+  linkValue,
+  objectValue,
+  semanticProps,
+  textValue
+} from "./blocks/helpers.js";
 
 interface Props {
   blocks: FlowpressBlock[];
@@ -13,57 +22,6 @@ interface Props {
 
 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>
-    : {};
-}
-
 function youtubeEmbedUrl(value: unknown): string | null {
   try {
     const url = new URL(String(value ?? ""));
@@ -85,52 +43,62 @@ 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);
 
-  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 (name === "hero") {
+    return (
+      <HeroBlock block={block} contract={contract}>
+        <Astro.self blocks={children} contract={contract} />
+      </HeroBlock>
     );
+  }
+
+  if (name === "grid") {
     return (
-      <S
-        as={headingTag}
-        {...semantic}
-        {...typography}
-        set:html={text(block)}
-      />
+      <GridBlock block={block} contract={contract}>
+        <Astro.self blocks={children} contract={contract} />
+      </GridBlock>
+    );
+  }
+
+  if (name === "column") {
+    return (
+      <ColumnBlock block={block} contract={contract}>
+        <Astro.self blocks={children} contract={contract} />
+      </ColumnBlock>
     );
   }
 
-  if (name === "rich-text" || name === "core/paragraph") {
-    const html = String(block.attributes.content ?? block.innerHtml ?? "");
-    return <S as="div" {...semantic} set:html={html} />;
+  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} />
+      </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}
       >
-        {text(block, "label")}
+        {textValue(block, "label")}
       </S>
     );
   }
@@ -205,17 +173,8 @@ function youtubeEmbedUrl(value: unknown): string | null {
     ) : null;
   }
 
-  if (name === "quote") {
-    return (
-      <S as="blockquote" {...semantic}>
-        <S as="p" set:html={text(block, "quote")} />
-        {block.attributes.citation && <cite>{String(block.attributes.citation)}</cite>}
-      </S>
-    );
-  }
-
   if (name === "chip") {
-    return <S as="span" {...semantic}>{text(block, "label")}</S>;
+    return <S as="span" {...semantic}>{textValue(block, "label")}</S>;
   }
 
   if (name === "card") {
@@ -237,31 +196,32 @@ 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) => (
+        {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"
-              />
-            )}
-            {item.uri ? (
-              <S as="a" href={String(item.uri)}>{String(item.title ?? "")}</S>
+            {resolvedBlocks[index]?.length ? (
+              <Astro.self blocks={resolvedBlocks[index]} contract={contract} />
             ) : (
-              <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 <Astro.self blocks={children} contract={contract} />;
+  }
+
+  if (name === "form") {
+    return <FormBlock block={block} contract={contract} />;
+  }
+
   if (name === "accordion-item") {
     return (
       <S as="div" {...semantic}>
@@ -313,7 +273,7 @@ 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}>
       {block.innerHtml && children.length === 0

package/dist/astro/blocks/ColumnBlock.astro

@@ -0,0 +1,78 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import { responsiveValues, semanticProps } from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const values = responsiveValues(block.attributes, "span", 1);
+const partial = ["start", "end"].includes(String(block.attributes.partialContainer))
+  ? String(block.attributes.partialContainer)
+  : "none";
+const partialBreakpoint = ["base", "sm", "md", "lg", "xl", "2xl"].includes(
+  String(block.attributes.partialContainerBreakpoint)
+) ? String(block.attributes.partialContainerBreakpoint) : "lg";
+const semantic = semanticProps(block.attributes, contract);
+const style = [
+  `--flowpress-span-base:${values.base}`,
+  `--flowpress-span-sm:${values.sm}`,
+  `--flowpress-span-md:${values.md}`,
+  `--flowpress-span-lg:${values.lg}`,
+  `--flowpress-span-xl:${values.xl}`,
+  `--flowpress-span-2xl:${values["2xl"]}`
+].join(";");
+---
+
+<S
+  as="div"
+  {...semantic}
+  class="flowpress-column"
+  data-partial={partial}
+  data-partial-breakpoint={partialBreakpoint}
+  style={style}
+>
+  <slot />
+</S>
+
+<style>
+  .flowpress-column {
+    grid-column: span var(--flowpress-span-base) / span var(--flowpress-span-base);
+    min-width: 0;
+  }
+  .flowpress-column[data-partial="start"][data-partial-breakpoint="base"] {
+    padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2));
+  }
+  .flowpress-column[data-partial="end"][data-partial-breakpoint="base"] {
+    padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2));
+  }
+  @media (min-width: 40rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-sm) / span var(--flowpress-span-sm); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="sm"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="sm"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 48rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-md) / span var(--flowpress-span-md); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="md"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="md"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 64rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-lg) / span var(--flowpress-span-lg); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="lg"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="lg"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 80rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-xl) / span var(--flowpress-span-xl); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="xl"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="xl"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 96rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-2xl) / span var(--flowpress-span-2xl); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="2xl"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="2xl"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+</style>

package/dist/astro/blocks/FormBlock.astro

@@ -0,0 +1,232 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import { semanticProps } from "./helpers.js";
+
+interface FormField {
+  name: string;
+  type: string;
+  required?: boolean;
+  values?: string[];
+  labels?: string[];
+  options?: string[];
+}
+
+interface FormSchema {
+  id: number;
+  title: string;
+  fields: FormField[];
+  submitUrl: string;
+  turnstileSiteKey: string;
+  available: boolean;
+}
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const schema = block.attributes.formSchema as FormSchema | undefined;
+const semantic = semanticProps(block.attributes, contract);
+const labelFor = (field: FormField): string => field.name
+  .replace(/[-_]+/g, " ")
+  .replace(/\b\w/g, (letter) => letter.toUpperCase());
+const optionLabel = (field: FormField, index: number): string =>
+  field.labels?.[index] || field.values?.[index] || "";
+---
+
+{schema?.available ? (
+  <S as="div" {...semantic}>
+    <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>
+        ) : null}
+        {schema.fields.map((field) => {
+          if (field.type === "submit") {
+            return (
+              <button type="submit">
+                {field.values?.[0] || "Invia"}
+              </button>
+            );
+          }
+          if (field.type === "hidden") {
+            return <input type="hidden" name={field.name} value={field.values?.[0] || ""} />;
+          }
+          if (["checkbox", "radio"].includes(field.type)) {
+            return (
+              <fieldset>
+                <legend>{labelFor(field)}</legend>
+                {(field.values || []).map((value, index) => (
+                  <label>
+                    <input
+                      type={field.type}
+                      name={field.type === "checkbox" ? `${field.name}[]` : field.name}
+                      value={value}
+                      required={field.required}
+                    />
+                    {optionLabel(field, index)}
+                  </label>
+                ))}
+                <span data-field-error={field.name}></span>
+              </fieldset>
+            );
+          }
+          if (field.type === "acceptance") {
+            return (
+              <label>
+                <input type="checkbox" name={field.name} value="1" required={field.required} />
+                {field.values?.[0] || labelFor(field)}
+                <span data-field-error={field.name}></span>
+              </label>
+            );
+          }
+          if (field.type === "select") {
+            return (
+              <label>
+                {labelFor(field)}
+                <select
+                  name={field.options?.includes("multiple") ? `${field.name}[]` : field.name}
+                  required={field.required}
+                  multiple={field.options?.includes("multiple")}
+                >
+                  {(field.values || []).map((value, index) => (
+                    <option value={value}>{optionLabel(field, index)}</option>
+                  ))}
+                </select>
+                <span data-field-error={field.name}></span>
+              </label>
+            );
+          }
+          if (field.type === "textarea") {
+            return (
+              <label>
+                {labelFor(field)}
+                <textarea name={field.name} required={field.required}></textarea>
+                <span data-field-error={field.name}></span>
+              </label>
+            );
+          }
+          return (
+            <label>
+              {labelFor(field)}
+              <input
+                type={field.type === "file" ? "file" : field.type}
+                name={field.name}
+                required={field.required}
+              />
+              <span data-field-error={field.name}></span>
+            </label>
+          );
+        })}
+        <div
+          data-turnstile
+          data-sitekey={schema.turnstileSiteKey}
+          aria-label="Verifica anti-spam"
+        ></div>
+        <p data-form-status role="status" aria-live="polite"></p>
+      </form>
+    </flowpress-cf7-form>
+  </S>
+) : (
+  <S as="p" {...semantic} role="status">
+    Il modulo non è temporaneamente disponibile.
+  </S>
+)}
+
+<script>
+  declare global {
+    interface Window {
+      turnstile?: {
+        render(target: Element, options: Record<string, unknown>): string;
+        reset(widgetId?: string): void;
+      };
+    }
+  }
+
+  let turnstilePromise: Promise<void> | undefined;
+  const loadTurnstile = (): Promise<void> => {
+    if (window.turnstile) return Promise.resolve();
+    if (turnstilePromise) return turnstilePromise;
+    turnstilePromise = new Promise((resolve, reject) => {
+      const existing = document.querySelector<HTMLScriptElement>(
+        'script[data-flowpress-turnstile]'
+      );
+      if (existing) {
+        existing.addEventListener("load", () => resolve(), { once: true });
+        existing.addEventListener("error", () => reject(new Error("Turnstile unavailable")), { once: true });
+        return;
+      }
+      const script = document.createElement("script");
+      script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+      script.async = true;
+      script.defer = true;
+      script.dataset.flowpressTurnstile = "true";
+      script.addEventListener("load", () => resolve(), { once: true });
+      script.addEventListener("error", () => reject(new Error("Turnstile unavailable")), { once: true });
+      document.head.append(script);
+    });
+    return turnstilePromise;
+  };
+
+  if (!customElements.get("flowpress-cf7-form")) {
+    customElements.define("flowpress-cf7-form", class extends HTMLElement {
+      private widgetId?: string;
+
+      connectedCallback() {
+        const form = this.querySelector<HTMLFormElement>("form");
+        const target = this.querySelector<HTMLElement>("[data-turnstile]");
+        const status = this.querySelector<HTMLElement>("[data-form-status]");
+        if (!form || !target || !status) return;
+
+        loadTurnstile()
+          .then(() => {
+            if (!window.turnstile || this.widgetId) return;
+            this.widgetId = window.turnstile.render(target, {
+              sitekey: target.dataset.sitekey
+            });
+          })
+          .catch(() => {
+            status.textContent = "La verifica anti-spam non è disponibile.";
+          });
+
+        form.addEventListener("submit", async (event) => {
+          event.preventDefault();
+          status.textContent = "Invio in corso…";
+          form.querySelectorAll<HTMLElement>("[data-field-error]")
+            .forEach((node) => { node.textContent = ""; });
+          const submit = form.querySelector<HTMLButtonElement>('[type="submit"]');
+          if (submit) submit.disabled = true;
+          try {
+            const response = await fetch(form.action, {
+              method: "POST",
+              body: new FormData(form),
+              headers: { Accept: "application/json" }
+            });
+            const result = await response.json() as {
+              message?: string;
+              invalidFields?: Array<{ field?: string; into?: string; message?: string }>;
+            };
+            status.textContent = result.message || (response.ok ? "Messaggio inviato." : "Invio non riuscito.");
+            for (const invalid of result.invalidFields || []) {
+              const name = invalid.field || invalid.into?.replace(/^span\./, "") || "";
+              const node = name
+                ? form.querySelector<HTMLElement>(`[data-field-error="${CSS.escape(name)}"]`)
+                : null;
+              if (node) node.textContent = invalid.message || "";
+            }
+            if (response.ok) form.reset();
+            if (window.turnstile) window.turnstile.reset(this.widgetId);
+          } catch {
+            status.textContent = "Impossibile inviare il modulo. Riprova.";
+            if (window.turnstile) window.turnstile.reset(this.widgetId);
+          } finally {
+            if (submit) submit.disabled = false;
+          }
+        });
+      }
+    });
+  }
+</script>

package/dist/astro/blocks/GridBlock.astro

@@ -0,0 +1,65 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import { responsiveValues, semanticProps } from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const values = responsiveValues(
+  block.attributes,
+  "columns",
+  Number(block.attributes.columns) || 12
+);
+const align = ["start", "center", "end", "stretch"].includes(
+  String(block.attributes.align)
+) ? String(block.attributes.align) : "stretch";
+const semantic = semanticProps(block.attributes, contract, {
+  surface: "default",
+  layoutRole: "container",
+  density: "md"
+});
+const style = [
+  `--flowpress-grid-base:${values.base}`,
+  `--flowpress-grid-sm:${values.sm}`,
+  `--flowpress-grid-md:${values.md}`,
+  `--flowpress-grid-lg:${values.lg}`,
+  `--flowpress-grid-xl:${values.xl}`,
+  `--flowpress-grid-2xl:${values["2xl"]}`
+].join(";");
+---
+
+<S as="div" {...semantic} class="flowpress-grid" data-align={align} style={style}>
+  <slot />
+</S>
+
+<style>
+  .flowpress-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--flowpress-grid-base), minmax(0, 1fr));
+    align-items: var(--flowpress-grid-align, stretch);
+  }
+  .flowpress-grid[data-align="start"] { --flowpress-grid-align: start; }
+  .flowpress-grid[data-align="center"] { --flowpress-grid-align: center; }
+  .flowpress-grid[data-align="end"] { --flowpress-grid-align: end; }
+  .flowpress-grid[data-align="stretch"] { --flowpress-grid-align: stretch; }
+  @media (min-width: 40rem) {
+    .flowpress-grid { grid-template-columns: repeat(var(--flowpress-grid-sm), minmax(0, 1fr)); }
+  }
+  @media (min-width: 48rem) {
+    .flowpress-grid { grid-template-columns: repeat(var(--flowpress-grid-md), minmax(0, 1fr)); }
+  }
+  @media (min-width: 64rem) {
+    .flowpress-grid { grid-template-columns: repeat(var(--flowpress-grid-lg), minmax(0, 1fr)); }
+  }
+  @media (min-width: 80rem) {
+    .flowpress-grid { grid-template-columns: repeat(var(--flowpress-grid-xl), minmax(0, 1fr)); }
+  }
+  @media (min-width: 96rem) {
+    .flowpress-grid { grid-template-columns: repeat(var(--flowpress-grid-2xl), minmax(0, 1fr)); }
+  }
+</style>

package/dist/astro/blocks/HeroBlock.astro

@@ -0,0 +1,108 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import { objectValue, semanticProps } from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const attributes = block.attributes;
+const semantic = semanticProps(attributes, contract, {
+  surface: "default",
+  layoutRole: "region",
+  density: "md"
+});
+const backgroundType = ["color", "image", "video"].includes(
+  String(attributes.backgroundType)
+) ? String(attributes.backgroundType) : "color";
+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 scrimEnabled = Boolean(attributes.scrimEnabled) && backgroundType !== "color";
+const scrimIntensity = Math.min(10, Math.max(1, Number(attributes.scrimIntensity) || 6));
+---
+
+<S
+  as="section"
+  {...semantic}
+  class="flowpress-hero"
+  style={`--flowpress-scrim-opacity:${scrimIntensity * 10}%`}
+>
+  {backgroundType === "image" && imageSrc ? (
+    <img
+      class="flowpress-hero__media"
+      src={imageSrc}
+      alt=""
+      aria-hidden="true"
+      loading="eager"
+      decoding="async"
+    />
+  ) : null}
+  {backgroundType === "video" && videoSrc ? (
+    <video
+      class="flowpress-hero__media"
+      src={videoSrc}
+      poster={imageSrc || undefined}
+      autoplay
+      muted
+      loop
+      playsinline
+      preload="metadata"
+      aria-hidden="true"
+      tabindex="-1"
+    />
+  ) : null}
+  {scrimEnabled ? <span class="flowpress-hero__scrim" aria-hidden="true"></span> : null}
+  <div class="flowpress-hero__content">
+    <slot />
+  </div>
+</S>
+
+<style>
+  .flowpress-hero {
+    position: relative;
+    display: grid;
+    overflow: hidden;
+    isolation: isolate;
+  }
+
+  .flowpress-hero__media,
+  .flowpress-hero__scrim {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .flowpress-hero__media {
+    z-index: -2;
+    object-fit: cover;
+  }
+
+  .flowpress-hero__scrim {
+    z-index: -1;
+    background: color-mix(
+      in srgb,
+      var(--sf-background) var(--flowpress-scrim-opacity),
+      transparent
+    );
+    pointer-events: none;
+  }
+
+  .flowpress-hero__content {
+    position: relative;
+    display: grid;
+    gap: inherit;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flowpress-hero__media:is(video) {
+      display: none;
+    }
+  }
+</style>

package/dist/astro/blocks/ListItemFallback.astro

@@ -0,0 +1,28 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+
+interface Props {
+  item: Record<string, unknown>;
+}
+
+const { item } = Astro.props;
+const image = item.image && typeof item.image === "object" && !Array.isArray(item.image)
+  ? item.image as Record<string, unknown>
+  : {};
+---
+
+{image.url ? (
+  <img
+    src={String(image.url)}
+    alt={String(image.alt ?? "")}
+    loading="lazy"
+    decoding="async"
+  />
+) : null}
+{item.uri ? (
+  <S as="a" href={String(item.uri)}>{String(item.title ?? "")}</S>
+) : (
+  <S as="span">{String(item.title ?? "")}</S>
+)}
+{item.excerpt ? <S as="p">{String(item.excerpt)}</S> : null}
+{item.priceHtml ? <S as="div" set:html={String(item.priceHtml)} /> : null}

package/dist/astro/blocks/TextBlock.astro

@@ -0,0 +1,61 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import { semanticProps, textValue, unwrapCoreHtml } from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+  hasChildren?: boolean;
+}
+
+const { block, contract, hasChildren = false } = Astro.props;
+const name = block.name.replace(/^sf\//, "");
+const attributes = block.attributes;
+const heading = name === "heading" || name === "core/heading";
+const level = Math.min(6, Math.max(1, Number(attributes.level ?? 2)));
+const headingTag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+const defaults = heading
+  ? {
+      ty: "heading",
+      v: String(attributes.v ?? attributes.variant ?? level),
+      w: String(attributes.w ?? attributes.weight ?? "strong"),
+      foreground: "primary"
+    }
+  : {
+      ty: "body",
+      v: String(attributes.v ?? (name.includes("quote") ? "lg" : "md")),
+      w: String(attributes.w ?? "default"),
+      foreground: "primary"
+    };
+const semantic = semanticProps(attributes, contract, defaults);
+const html = name === "heading"
+  ? textValue(block)
+  : name === "rich-text"
+    ? String(attributes.content ?? "")
+    : name === "quote"
+      ? textValue(block, "quote")
+      : unwrapCoreHtml(String(attributes.content ?? attributes.value ?? block.innerHtml ?? ""));
+const listTag = Boolean(attributes.ordered) ? "ol" : "ul";
+---
+
+{heading ? (
+  <S as={headingTag} {...semantic} set:html={html} />
+) : name === "core/list" ? (
+  <S as={listTag} {...semantic}>
+    {hasChildren ? <slot /> : <Fragment set:html={html} />}
+  </S>
+) : name === "core/list-item" ? (
+  <S as="li" {...semantic}>
+    <span set:html={html}></span>
+    {hasChildren ? <slot /> : null}
+  </S>
+) : name === "quote" || name === "core/quote" ? (
+  <S as="blockquote" {...semantic}>
+    {hasChildren ? <slot /> : <div set:html={html}></div>}
+    {attributes.citation ? <cite>{String(attributes.citation)}</cite> : null}
+  </S>
+) : (
+  <S as={name === "core/paragraph" ? "p" : "div"} {...semantic} set:html={html} />
+)}

package/dist/astro/blocks/helpers.d.ts

@@ -0,0 +1,14 @@
+import { type StyleflowContract } from "../../styleflow.js";
+import type { FlowpressBlock } from "../../types.js";
+export declare const DEFAULT_SEMANTIC_PROPS: {
+    surface: string;
+    layoutRole: string;
+    density: string;
+};
+export declare function semanticProps(attributes: Record<string, unknown>, contract?: StyleflowContract, defaults?: Record<string, unknown>): Record<string, unknown>;
+export declare function objectValue(block: FlowpressBlock, key: string): Record<string, unknown>;
+export declare function textValue(block: FlowpressBlock, key?: string): string;
+export declare function linkValue(block: FlowpressBlock, key?: string): string;
+export declare function responsiveValues(attributes: Record<string, unknown>, prefix: "columns" | "span", fallback: number): Record<"base" | "sm" | "md" | "lg" | "xl" | "2xl", number>;
+export declare function unwrapCoreHtml(html: string): string;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/astro/blocks/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/astro/blocks/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,eAAO,MAAM,sBAAsB;;;;CAIlC,CAAC;AAqBF,wBAAgB,aAAa,CAC3B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnC,QAAQ,CAAC,EAAE,iBAAiB,EAC5B,QAAQ,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAA0B,GACzD,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CASzB;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,EACrB,GAAG,EAAE,MAAM,GACV,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAKzB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,SAAS,GAAG,MAAM,CAErE;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,EAAE,GAAG,SAAS,GAAG,MAAM,CAMrE;AAED,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnC,MAAM,EAAE,SAAS,GAAG,MAAM,EAC1B,QAAQ,EAAE,MAAM,GACf,MAAM,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,MAAM,CAAC,CAe5D;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAKnD"}

package/dist/astro/blocks/helpers.js

@@ -0,0 +1,69 @@
+import { resolveDynamicStyleflowProps } from "../../styleflow.js";
+export const DEFAULT_SEMANTIC_PROPS = {
+    surface: "default",
+    layoutRole: "stack",
+    density: "md"
+};
+const SEMANTIC_KEYS = [
+    "tone",
+    "intensity",
+    "surface",
+    "layoutRole",
+    "density",
+    "ty",
+    "v",
+    "w",
+    "foreground",
+    "interactivePriority",
+    "noBackground",
+    "noBorder",
+    "noPadding",
+    "noGap",
+    "noRadius",
+    "noForeground"
+];
+export function semanticProps(attributes, contract, defaults = DEFAULT_SEMANTIC_PROPS) {
+    const input = Object.fromEntries(SEMANTIC_KEYS
+        .filter((key) => attributes[key] !== undefined)
+        .map((key) => [key, attributes[key]]));
+    return contract
+        ? resolveDynamicStyleflowProps(input, defaults, contract)
+        : { ...defaults, ...input };
+}
+export function objectValue(block, key) {
+    const value = block.attributes[key];
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : {};
+}
+export function textValue(block, key = "text") {
+    return String(block.attributes[key] ?? "");
+}
+export function linkValue(block, key = "link") {
+    const value = block.attributes[key];
+    const href = typeof value === "string"
+        ? value
+        : String(objectValue(block, key).url ?? "");
+    return /^(?:\/(?!\/)|#|https?:\/\/|mailto:|tel:)/i.test(href) ? href : "";
+}
+export function responsiveValues(attributes, prefix, fallback) {
+    const keys = ["base", "sm", "md", "lg", "xl", "2xl"];
+    const result = {};
+    let inherited = fallback;
+    for (const key of keys) {
+        const suffix = key === "base"
+            ? "Base"
+            : key === "2xl" ? "2xl" : key.charAt(0).toUpperCase() + key.slice(1);
+        const candidate = Number(attributes[`${prefix}${suffix}`]);
+        if (Number.isInteger(candidate) && candidate >= 1 && candidate <= 12) {
+            inherited = candidate;
+        }
+        result[key] = inherited;
+    }
+    return result;
+}
+export function unwrapCoreHtml(html) {
+    const match = html.trim().match(/^<(p|h[1-6]|ul|ol|li|blockquote)(?:\s[^>]*)?>([\s\S]*)<\/\1>$/);
+    return match?.[2] ?? html;
+}
+//# sourceMappingURL=helpers.js.map

package/dist/astro/blocks/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/astro/blocks/helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  resolveDynamicStyleflowProps,\n  type StyleflowContract\n} from \"../../styleflow.js\";\nimport type { FlowpressBlock } from \"../../types.js\";\n\nexport const DEFAULT_SEMANTIC_PROPS = {\n  surface: \"default\",\n  layoutRole: \"stack\",\n  density: \"md\"\n};\n\nconst SEMANTIC_KEYS = [\n  \"tone\",\n  \"intensity\",\n  \"surface\",\n  \"layoutRole\",\n  \"density\",\n  \"ty\",\n  \"v\",\n  \"w\",\n  \"foreground\",\n  \"interactivePriority\",\n  \"noBackground\",\n  \"noBorder\",\n  \"noPadding\",\n  \"noGap\",\n  \"noRadius\",\n  \"noForeground\"\n] as const;\n\nexport function semanticProps(\n  attributes: Record<string, unknown>,\n  contract?: StyleflowContract,\n  defaults: Record<string, unknown> = DEFAULT_SEMANTIC_PROPS\n): Record<string, unknown> {\n  const input = Object.fromEntries(\n    SEMANTIC_KEYS\n      .filter((key) => attributes[key] !== undefined)\n      .map((key) => [key, attributes[key]])\n  );\n  return contract\n    ? resolveDynamicStyleflowProps(input, defaults, contract)\n    : { ...defaults, ...input };\n}\n\nexport function objectValue(\n  block: FlowpressBlock,\n  key: string\n): Record<string, unknown> {\n  const value = block.attributes[key];\n  return value && typeof value === \"object\" && !Array.isArray(value)\n    ? value as Record<string, unknown>\n    : {};\n}\n\nexport function textValue(block: FlowpressBlock, key = \"text\"): string {\n  return String(block.attributes[key] ?? \"\");\n}\n\nexport function linkValue(block: FlowpressBlock, key = \"link\"): string {\n  const value = block.attributes[key];\n  const href = typeof value === \"string\"\n    ? value\n    : String(objectValue(block, key).url ?? \"\");\n  return /^(?:\\/(?!\\/)|#|https?:\\/\\/|mailto:|tel:)/i.test(href) ? href : \"\";\n}\n\nexport function responsiveValues(\n  attributes: Record<string, unknown>,\n  prefix: \"columns\" | \"span\",\n  fallback: number\n): Record<\"base\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\", number> {\n  const keys = [\"base\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\"] as const;\n  const result = {} as Record<(typeof keys)[number], number>;\n  let inherited = fallback;\n  for (const key of keys) {\n    const suffix = key === \"base\"\n      ? \"Base\"\n      : key === \"2xl\" ? \"2xl\" : key.charAt(0).toUpperCase() + key.slice(1);\n    const candidate = Number(attributes[`${prefix}${suffix}`]);\n    if (Number.isInteger(candidate) && candidate >= 1 && candidate <= 12) {\n      inherited = candidate;\n    }\n    result[key] = inherited;\n  }\n  return result;\n}\n\nexport function unwrapCoreHtml(html: string): string {\n  const match = html.trim().match(\n    /^<(p|h[1-6]|ul|ol|li|blockquote)(?:\\s[^>]*)?>([\\s\\S]*)<\\/\\1>$/\n  );\n  return match?.[2] ?? html;\n}\n"]}

package/dist/astro/blocks/helpers.ts

@@ -0,0 +1,95 @@
+import {
+  resolveDynamicStyleflowProps,
+  type StyleflowContract
+} from "../../styleflow.js";
+import type { FlowpressBlock } from "../../types.js";
+
+export const DEFAULT_SEMANTIC_PROPS = {
+  surface: "default",
+  layoutRole: "stack",
+  density: "md"
+};
+
+const SEMANTIC_KEYS = [
+  "tone",
+  "intensity",
+  "surface",
+  "layoutRole",
+  "density",
+  "ty",
+  "v",
+  "w",
+  "foreground",
+  "interactivePriority",
+  "noBackground",
+  "noBorder",
+  "noPadding",
+  "noGap",
+  "noRadius",
+  "noForeground"
+] as const;
+
+export function semanticProps(
+  attributes: Record<string, unknown>,
+  contract?: StyleflowContract,
+  defaults: Record<string, unknown> = DEFAULT_SEMANTIC_PROPS
+): Record<string, unknown> {
+  const input = Object.fromEntries(
+    SEMANTIC_KEYS
+      .filter((key) => attributes[key] !== undefined)
+      .map((key) => [key, attributes[key]])
+  );
+  return contract
+    ? resolveDynamicStyleflowProps(input, defaults, contract)
+    : { ...defaults, ...input };
+}
+
+export 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>
+    : {};
+}
+
+export function textValue(block: FlowpressBlock, key = "text"): string {
+  return String(block.attributes[key] ?? "");
+}
+
+export function linkValue(block: FlowpressBlock, key = "link"): string {
+  const value = block.attributes[key];
+  const href = typeof value === "string"
+    ? value
+    : String(objectValue(block, key).url ?? "");
+  return /^(?:\/(?!\/)|#|https?:\/\/|mailto:|tel:)/i.test(href) ? href : "";
+}
+
+export function responsiveValues(
+  attributes: Record<string, unknown>,
+  prefix: "columns" | "span",
+  fallback: number
+): Record<"base" | "sm" | "md" | "lg" | "xl" | "2xl", number> {
+  const keys = ["base", "sm", "md", "lg", "xl", "2xl"] as const;
+  const result = {} as Record<(typeof keys)[number], number>;
+  let inherited = fallback;
+  for (const key of keys) {
+    const suffix = key === "base"
+      ? "Base"
+      : key === "2xl" ? "2xl" : key.charAt(0).toUpperCase() + key.slice(1);
+    const candidate = Number(attributes[`${prefix}${suffix}`]);
+    if (Number.isInteger(candidate) && candidate >= 1 && candidate <= 12) {
+      inherited = candidate;
+    }
+    result[key] = inherited;
+  }
+  return result;
+}
+
+export function unwrapCoreHtml(html: string): string {
+  const match = html.trim().match(
+    /^<(p|h[1-6]|ul|ol|li|blockquote)(?:\s[^>]*)?>([\s\S]*)<\/\1>$/
+  );
+  return match?.[2] ?? html;
+}

package/dist/styleflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styleflow.d.ts","sourceRoot":"","sources":["../src/styleflow.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,WAAW,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;QACpC,QAAQ,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,SAAS,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;IACF,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;QACnC,OAAO,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;IACF,WAAW,EAAE;QACX,UAAU,EAAE,MAAM,EAAE,CAAC;QACrB,MAAM,EAAE,MAAM,EAAE,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,qBAAqB,CAAC;CAC7B;AAED,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAoB5D;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,qBAAqB,EAC5B,QAAQ,EAAE,qBAAqB,EAC/B,QAAQ,EAAE,iBAAiB,GAC1B,qBAAqB,CAwCvB"}
+{"version":3,"file":"styleflow.d.ts","sourceRoot":"","sources":["../src/styleflow.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,WAAW,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;QACpC,QAAQ,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,SAAS,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;IACF,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;QACnC,OAAO,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;IACF,WAAW,EAAE;QACX,UAAU,EAAE,MAAM,EAAE,CAAC;QACrB,MAAM,EAAE,MAAM,EAAE,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,qBAAqB,CAAC;CAC7B;AAED,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAqB5D;;;GAGG;AACH,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,qBAAqB,EAC5B,QAAQ,EAAE,qBAAqB,EAC/B,QAAQ,EAAE,iBAAiB,GAC1B,qBAAqB,CA+CvB"}

package/dist/styleflow.js

@@ -1,4 +1,5 @@
 const INHERITED_COLOR_PROPS = new Set(["tone", "intensity"]);
+const FOREGROUND_ROLES = ["primary", "secondary", "tertiary", "muted", "accent"];
 const AXIS_BY_PROP = {
     tone: ["color", "tones"],
     intensity: ["color", "intensities"],
@@ -35,6 +36,12 @@ export function resolveDynamicStyleflowProps(input, defaults, contract) {
                 : defaults.v;
             continue;
         }
+        if (key === "foreground") {
+            resolved.foreground = FOREGROUND_ROLES.includes(String(value))
+                ? value
+                : defaults.foreground;
+            continue;
+        }
         const axisPath = AXIS_BY_PROP[key];
         if (!axisPath) {
             resolved[key] = value;

package/dist/styleflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"styleflow.js","sourceRoot":"","sources":["../src/styleflow.ts"],"names":[],"mappings":"AA2BA,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;AAE7D,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC;IACnC,OAAO,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC;IAC9B,UAAU,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC/B,OAAO,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC;IAChC,EAAE,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC;IAC3B,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC;IAC5B,mBAAmB,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC;IAClD,gBAAgB,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;CACnC,CAAC;AAEX,SAAS,aAAa,CAAC,SAAkB,EAAE,OAAgB;IACzD,OAAO,MAAM,CAAC,SAAS,CAAC,KAAK,MAAM,CAAC,OAAO,CAAC,CAAC;AAC/C,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,4BAA4B,CAC1C,KAA4B,EAC5B,QAA+B,EAC/B,QAA2B;IAE3B,MAAM,QAAQ,GAA0B,EAAE,GAAG,QAAQ,EAAE,CAAC;IAExD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACjD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YAC1D,SAAS;QACX,CAAC;QAED,IAAI,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC1D,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;YACrB,SAAS;QACX,CAAC;QAED,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;YAChB,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;YACnD,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAC/D,QAAQ,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;gBACpE,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;YACf,SAAS;QACX,CAAC;QAED,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAgC,CAAC,CAAC;QAChE,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YACtB,SAAS;QACX,CAAC;QAED,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAC;QAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,IAGvB,CAAC;QACF,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAC5C,QAAQ,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAChE,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC","sourcesContent":["export interface StyleflowContractAxes {\n  color: {\n    tones: string[];\n    intensities: Array<string | number>;\n    surfaces: string[];\n  };\n  layout: {\n    roles: string[];\n    densities: string[];\n  };\n  typography: {\n    types: string[];\n    variants: Record<string, string[]>;\n    weights: string[];\n  };\n  interaction: {\n    priorities: string[];\n    states: string[];\n  };\n}\n\nexport interface StyleflowContract {\n  axes: StyleflowContractAxes;\n}\n\nexport type DynamicStyleflowProps = Record<string, unknown>;\n\nconst INHERITED_COLOR_PROPS = new Set([\"tone\", \"intensity\"]);\n\nconst AXIS_BY_PROP = {\n  tone: [\"color\", \"tones\"],\n  intensity: [\"color\", \"intensities\"],\n  surface: [\"color\", \"surfaces\"],\n  layoutRole: [\"layout\", \"roles\"],\n  density: [\"layout\", \"densities\"],\n  ty: [\"typography\", \"types\"],\n  w: [\"typography\", \"weights\"],\n  interactivePriority: [\"interaction\", \"priorities\"],\n  interactionState: [\"interaction\", \"states\"]\n} as const;\n\nfunction sameAxisValue(candidate: unknown, allowed: unknown): boolean {\n  return String(candidate) === String(allowed);\n}\n\n/**\n * CMS values can outlive a contract revision. Invalid values fail closed to\n * component defaults before reaching Styleflow's Astro runtime.\n */\nexport function resolveDynamicStyleflowProps(\n  input: DynamicStyleflowProps,\n  defaults: DynamicStyleflowProps,\n  contract: StyleflowContract\n): DynamicStyleflowProps {\n  const resolved: DynamicStyleflowProps = { ...defaults };\n\n  for (const [key, value] of Object.entries(input)) {\n    if (value === undefined || value === null || value === \"\") {\n      continue;\n    }\n\n    if (INHERITED_COLOR_PROPS.has(key) && value === \"inherit\") {\n      delete resolved[key];\n      continue;\n    }\n\n    if (key === \"v\") {\n      const type = String(input.ty ?? defaults.ty ?? \"\");\n      const variants = contract.axes.typography.variants[type] ?? [];\n      resolved.v = variants.some((variant) => sameAxisValue(value, variant))\n        ? value\n        : defaults.v;\n      continue;\n    }\n\n    const axisPath = AXIS_BY_PROP[key as keyof typeof AXIS_BY_PROP];\n    if (!axisPath) {\n      resolved[key] = value;\n      continue;\n    }\n\n    const [group, axis] = axisPath;\n    const groups = contract.axes as unknown as Record<\n      string,\n      Record<string, unknown[]>\n    >;\n    const allowed = groups[group]?.[axis] ?? [];\n    resolved[key] = allowed.some((item) => sameAxisValue(value, item))\n      ? value\n      : defaults[key];\n  }\n\n  return resolved;\n}\n"]}
+{"version":3,"file":"styleflow.js","sourceRoot":"","sources":["../src/styleflow.ts"],"names":[],"mappings":"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","sourcesContent":["export interface StyleflowContractAxes {\n  color: {\n    tones: string[];\n    intensities: Array<string | number>;\n    surfaces: string[];\n  };\n  layout: {\n    roles: string[];\n    densities: string[];\n  };\n  typography: {\n    types: string[];\n    variants: Record<string, string[]>;\n    weights: string[];\n  };\n  interaction: {\n    priorities: string[];\n    states: string[];\n  };\n}\n\nexport interface StyleflowContract {\n  axes: StyleflowContractAxes;\n}\n\nexport type DynamicStyleflowProps = Record<string, unknown>;\n\nconst INHERITED_COLOR_PROPS = new Set([\"tone\", \"intensity\"]);\nconst FOREGROUND_ROLES = [\"primary\", \"secondary\", \"tertiary\", \"muted\", \"accent\"];\n\nconst AXIS_BY_PROP = {\n  tone: [\"color\", \"tones\"],\n  intensity: [\"color\", \"intensities\"],\n  surface: [\"color\", \"surfaces\"],\n  layoutRole: [\"layout\", \"roles\"],\n  density: [\"layout\", \"densities\"],\n  ty: [\"typography\", \"types\"],\n  w: [\"typography\", \"weights\"],\n  interactivePriority: [\"interaction\", \"priorities\"],\n  interactionState: [\"interaction\", \"states\"]\n} as const;\n\nfunction sameAxisValue(candidate: unknown, allowed: unknown): boolean {\n  return String(candidate) === String(allowed);\n}\n\n/**\n * CMS values can outlive a contract revision. Invalid values fail closed to\n * component defaults before reaching Styleflow's Astro runtime.\n */\nexport function resolveDynamicStyleflowProps(\n  input: DynamicStyleflowProps,\n  defaults: DynamicStyleflowProps,\n  contract: StyleflowContract\n): DynamicStyleflowProps {\n  const resolved: DynamicStyleflowProps = { ...defaults };\n\n  for (const [key, value] of Object.entries(input)) {\n    if (value === undefined || value === null || value === \"\") {\n      continue;\n    }\n\n    if (INHERITED_COLOR_PROPS.has(key) && value === \"inherit\") {\n      delete resolved[key];\n      continue;\n    }\n\n    if (key === \"v\") {\n      const type = String(input.ty ?? defaults.ty ?? \"\");\n      const variants = contract.axes.typography.variants[type] ?? [];\n      resolved.v = variants.some((variant) => sameAxisValue(value, variant))\n        ? value\n        : defaults.v;\n      continue;\n    }\n\n    if (key === \"foreground\") {\n      resolved.foreground = FOREGROUND_ROLES.includes(String(value))\n        ? value\n        : defaults.foreground;\n      continue;\n    }\n\n    const axisPath = AXIS_BY_PROP[key as keyof typeof AXIS_BY_PROP];\n    if (!axisPath) {\n      resolved[key] = value;\n      continue;\n    }\n\n    const [group, axis] = axisPath;\n    const groups = contract.axes as unknown as Record<\n      string,\n      Record<string, unknown[]>\n    >;\n    const allowed = groups[group]?.[axis] ?? [];\n    resolved[key] = allowed.some((item) => sameAxisValue(value, item))\n      ? value\n      : defaults[key];\n  }\n\n  return resolved;\n}\n"]}

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/astro.d.ts","../src/client.ts","../src/env.ts","../src/index.ts","../src/styleflow.ts","../src/template-hierarchy.ts","../src/templates.ts","../src/types.ts"],"version":"5.9.3"}
+{"root":["../src/astro.d.ts","../src/client.ts","../src/env.ts","../src/index.ts","../src/styleflow.ts","../src/template-hierarchy.ts","../src/templates.ts","../src/types.ts","../src/astro/blocks/helpers.ts"],"version":"5.9.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@styleflow.app/flowpress-astro-core",
-  "version": "0.2.0-beta.3",
+  "version": "0.2.0-beta.5",
   "description": "Project-agnostic WordPress routing, templates, SEO and GraphQL runtime for FlowPress Astro apps.",
   "type": "module",
   "private": false,
@@ -35,7 +35,7 @@
   ],
   "scripts": {
     "build": "tsc -b && node ./scripts/copy-astro.mjs",
-    "typecheck": "tsc -b --pretty false && node ./scripts/copy-astro.mjs",
+    "typecheck": "tsc -b --pretty false && node ./scripts/copy-astro.mjs && astro check",
     "test": "vitest run",
     "release:check": "npm run typecheck && npm test && npm pack --dry-run",
     "release:publish:next": "npm publish --access public --tag next",
@@ -43,12 +43,13 @@
     "prepublishOnly": "npm run typecheck && npm test && npm run build"
   },
   "dependencies": {
-    "@styleflow.app/astro": "0.3.0-beta.1"
+    "@styleflow.app/astro": "0.3.0-beta.3"
   },
   "peerDependencies": {
     "astro": ">=7.0.0"
   },
   "devDependencies": {
+    "@astrojs/check": "^0.9.9",
     "@types/node": "^22.19.3",
     "astro": "^7.0.4",
     "typescript": "^5.9.3",