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

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 0.2.0-beta.8
+
+- Applied Gutenberg `anchor` and `className` attributes to each rendered
+  block root, merging custom classes with the required FlowPress renderer
+  classes and preserving transparent template blocks when neither is set.
+
 ## 0.2.0-beta.5
 
 - Split Gutenberg rendering into dedicated hero, responsive layout, text,

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.5
+pnpm add @styleflow.app/flowpress-astro-core@0.2.0-beta.8
 ```
 
 Prereleases are pinned exactly. The package expects Astro 7 or newer and the
@@ -34,7 +34,8 @@ canonical URL rewriting.
 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.
+static and server output modes. Gutenberg `anchor` and `className` attributes
+are applied to the rendered block root as HTML `id` and `class`.
 
 ## Release
 

package/dist/astro/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import type { SfSeo } from "../types.js";
+import S from "@styleflow.app/astro/S.astro";
 
 interface Props {
   lang?: string;
@@ -44,6 +45,8 @@ const jsonLd = seo?.jsonLd ? JSON.stringify(seo.jsonLd) : null;
     <slot name="head" />
   </head>
   <body>
-    <slot />
+    <S.main tone="neutral" intensity={1} surface="default" layoutRole="none" density="md">
+      <slot />
+    </S.main>
   </body>
 </html>

package/dist/astro/DefaultTemplate.astro

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

package/dist/astro/GutenbergRenderer.astro

@@ -9,6 +9,7 @@ import HeroBlock from "./blocks/HeroBlock.astro";
 import ListItemFallback from "./blocks/ListItemFallback.astro";
 import TextBlock from "./blocks/TextBlock.astro";
 import {
+  blockHtmlAttributes,
   linkValue,
   objectValue,
   semanticProps,
@@ -44,6 +45,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
   const name = block.name.replace(/^sf\//, "");
   const children = block.innerBlocks ?? [];
   const semantic = semanticProps(block.attributes, contract);
+  const htmlAttributes = blockHtmlAttributes(block.attributes);
 
   if (name === "hero") {
     return (
@@ -97,6 +99,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
         target={opensInNewTab ? "_blank" : undefined}
         rel={opensInNewTab ? "noopener noreferrer" : undefined}
         {...semantic}
+        {...htmlAttributes}
       >
         {textValue(block, "label")}
       </S>
@@ -112,7 +115,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
     } | undefined;
     const src = image?.url ?? image?.sourceUrl;
     return src ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <img
           src={src}
           alt={String(block.attributes.alt ?? image?.alt ?? image?.altText ?? "")}
@@ -128,7 +131,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       ? block.attributes.images as Array<Record<string, unknown>>
       : [];
     return (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         {images.map((image) => image.url ? (
           <img
             src={String(image.url)}
@@ -145,7 +148,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const video = objectValue(block, "video");
     const poster = objectValue(block, "poster");
     return video.url ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <video
           src={String(video.url)}
           poster={poster.url ? String(poster.url) : undefined}
@@ -161,7 +164,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
   if (name === "video-youtube") {
     const embed = youtubeEmbedUrl(block.attributes.url);
     return embed ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <iframe
           src={embed}
           title={String(block.attributes.title ?? "YouTube video")}
@@ -174,14 +177,18 @@ function youtubeEmbedUrl(value: unknown): string | null {
   }
 
   if (name === "chip") {
-    return <S as="span" {...semantic}>{textValue(block, "label")}</S>;
+    return (
+      <S as="span" {...semantic} {...htmlAttributes}>
+        {textValue(block, "label")}
+      </S>
+    );
   }
 
   if (name === "card") {
     const media = objectValue(block, "image");
     const href = linkValue(block);
     return (
-      <S as="article" {...semantic}>
+      <S as="article" {...semantic} {...htmlAttributes}>
         {media.url && (
           <img src={String(media.url)} alt={String(media.alt ?? "")} loading="lazy" />
         )}
@@ -200,7 +207,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       ? block.attributes.resolvedBlocks as FlowpressBlock[][]
       : [];
     return (
-      <S as="ul" {...semantic}>
+      <S as="ul" {...semantic} {...htmlAttributes}>
         {items.map((item, index) => (
           <S as="li">
             {resolvedBlocks[index]?.length ? (
@@ -215,7 +222,13 @@ function youtubeEmbedUrl(value: unknown): string | null {
   }
 
   if (name === "template") {
-    return <Astro.self blocks={children} contract={contract} />;
+    return Object.keys(htmlAttributes).length > 0 ? (
+      <div {...htmlAttributes}>
+        <Astro.self blocks={children} contract={contract} />
+      </div>
+    ) : (
+      <Astro.self blocks={children} contract={contract} />
+    );
   }
 
   if (name === "form") {
@@ -224,7 +237,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
 
   if (name === "accordion-item") {
     return (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <details>
           <summary>{String(block.attributes.title ?? "")}</summary>
           <Astro.self blocks={children} contract={contract} />
@@ -250,7 +263,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
         + `?key=${encodeURIComponent(googleMapsApiKey)}`
         + `&q=${encodeURIComponent(query)}`;
       return (
-        <S as="div" {...semantic}>
+        <S as="div" {...semantic} {...htmlAttributes}>
           <iframe
             src={source}
             title={address || "Map"}
@@ -261,7 +274,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       );
     }
     return query ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <S
           as="a"
           href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(query)}`}
@@ -275,7 +288,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
 
   const layoutTag = name === "section" ? "section" : "div";
   return (
-    <S as={layoutTag} {...semantic}>
+    <S as={layoutTag} {...semantic} {...htmlAttributes}>
       {block.innerHtml && children.length === 0
         ? <S as="div" set:html={block.innerHtml} />
         : <Astro.self blocks={children} contract={contract} />}

package/dist/astro/blocks/ColumnBlock.astro

@@ -2,7 +2,11 @@
 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";
+import {
+  blockHtmlAttributes,
+  responsiveValues,
+  semanticProps
+} from "./helpers.js";
 
 interface Props {
   block: FlowpressBlock;
@@ -18,6 +22,7 @@ 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 htmlAttributes = blockHtmlAttributes(block.attributes, "flowpress-column");
 const style = [
   `--flowpress-span-base:${values.base}`,
   `--flowpress-span-sm:${values.sm}`,
@@ -31,7 +36,7 @@ const style = [
 <S
   as="div"
   {...semantic}
-  class="flowpress-column"
+  {...htmlAttributes}
   data-partial={partial}
   data-partial-breakpoint={partialBreakpoint}
   style={style}

package/dist/astro/blocks/FormBlock.astro

@@ -2,7 +2,7 @@
 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";
+import { blockHtmlAttributes, semanticProps } from "./helpers.js";
 
 interface FormField {
   name: string;
@@ -30,6 +30,7 @@ interface Props {
 const { block, contract } = Astro.props;
 const schema = block.attributes.formSchema as FormSchema | undefined;
 const semantic = semanticProps(block.attributes, contract);
+const htmlAttributes = blockHtmlAttributes(block.attributes);
 const labelFor = (field: FormField): string => field.name
   .replace(/[-_]+/g, " ")
   .replace(/\b\w/g, (letter) => letter.toUpperCase());
@@ -38,7 +39,7 @@ const optionLabel = (field: FormField, index: number): string =>
 ---
 
 {schema?.available ? (
-  <S as="div" {...semantic}>
+  <S as="div" {...semantic} {...htmlAttributes}>
     <flowpress-cf7-form>
       <form action={schema.submitUrl} method="post" enctype="multipart/form-data" novalidate>
         {block.attributes.title || schema.title ? (
@@ -131,7 +132,7 @@ const optionLabel = (field: FormField, index: number): string =>
     </flowpress-cf7-form>
   </S>
 ) : (
-  <S as="p" {...semantic} role="status">
+  <S as="p" {...semantic} {...htmlAttributes} role="status">
     Il modulo non è temporaneamente disponibile.
   </S>
 )}

package/dist/astro/blocks/GridBlock.astro

@@ -2,7 +2,11 @@
 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";
+import {
+  blockHtmlAttributes,
+  responsiveValues,
+  semanticProps
+} from "./helpers.js";
 
 interface Props {
   block: FlowpressBlock;
@@ -23,6 +27,7 @@ const semantic = semanticProps(block.attributes, contract, {
   layoutRole: "container",
   density: "md"
 });
+const htmlAttributes = blockHtmlAttributes(block.attributes, "flowpress-grid");
 const style = [
   `--flowpress-grid-base:${values.base}`,
   `--flowpress-grid-sm:${values.sm}`,
@@ -33,7 +38,7 @@ const style = [
 ].join(";");
 ---
 
-<S as="div" {...semantic} class="flowpress-grid" data-align={align} style={style}>
+<S as="div" {...semantic} {...htmlAttributes} data-align={align} style={style}>
   <slot />
 </S>
 

package/dist/astro/blocks/HeroBlock.astro

@@ -2,7 +2,11 @@
 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";
+import {
+  blockHtmlAttributes,
+  objectValue,
+  semanticProps
+} from "./helpers.js";
 
 interface Props {
   block: FlowpressBlock;
@@ -16,6 +20,7 @@ const semantic = semanticProps(attributes, contract, {
   layoutRole: "region",
   density: "md"
 });
+const htmlAttributes = blockHtmlAttributes(attributes, "flowpress-hero");
 const backgroundType = ["color", "image", "video"].includes(
   String(attributes.backgroundType)
 ) ? String(attributes.backgroundType) : "color";
@@ -30,7 +35,7 @@ const scrimIntensity = Math.min(10, Math.max(1, Number(attributes.scrimIntensity
 <S
   as="section"
   {...semantic}
-  class="flowpress-hero"
+  {...htmlAttributes}
   style={`--flowpress-scrim-opacity:${scrimIntensity * 10}%`}
 >
   {backgroundType === "image" && imageSrc ? (

package/dist/astro/blocks/TextBlock.astro

@@ -2,7 +2,12 @@
 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";
+import {
+  blockHtmlAttributes,
+  semanticProps,
+  textValue,
+  unwrapCoreHtml
+} from "./helpers.js";
 
 interface Props {
   block: FlowpressBlock;
@@ -30,6 +35,7 @@ const defaults = heading
       foreground: "primary"
     };
 const semantic = semanticProps(attributes, contract, defaults);
+const htmlAttributes = blockHtmlAttributes(attributes);
 const html = name === "heading"
   ? textValue(block)
   : name === "rich-text"
@@ -41,21 +47,26 @@ const listTag = Boolean(attributes.ordered) ? "ol" : "ul";
 ---
 
 {heading ? (
-  <S as={headingTag} {...semantic} set:html={html} />
+  <S as={headingTag} {...semantic} {...htmlAttributes} set:html={html} />
 ) : name === "core/list" ? (
-  <S as={listTag} {...semantic}>
+  <S as={listTag} {...semantic} {...htmlAttributes}>
     {hasChildren ? <slot /> : <Fragment set:html={html} />}
   </S>
 ) : name === "core/list-item" ? (
-  <S as="li" {...semantic}>
+  <S as="li" {...semantic} {...htmlAttributes}>
     <span set:html={html}></span>
     {hasChildren ? <slot /> : null}
   </S>
 ) : name === "quote" || name === "core/quote" ? (
-  <S as="blockquote" {...semantic}>
+  <S as="blockquote" {...semantic} {...htmlAttributes}>
     {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} />
+  <S
+    as={name === "core/paragraph" ? "p" : "div"}
+    {...semantic}
+    {...htmlAttributes}
+    set:html={html}
+  />
 )}

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

@@ -5,6 +5,10 @@ export declare const DEFAULT_SEMANTIC_PROPS: {
     layoutRole: string;
     density: string;
 };
+export declare function blockHtmlAttributes(attributes: Record<string, unknown>, baseClass?: string): {
+    id?: string;
+    class?: 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;

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

@@ -1 +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"}
+{"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;AAEF,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnC,SAAS,SAAK,GACb;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAgBjC;AAqBD,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

@@ -4,6 +4,22 @@ export const DEFAULT_SEMANTIC_PROPS = {
     layoutRole: "stack",
     density: "md"
 };
+export function blockHtmlAttributes(attributes, baseClass = "") {
+    const anchor = typeof attributes.anchor === "string"
+        ? attributes.anchor.trim()
+        : "";
+    const customClass = typeof attributes.className === "string"
+        ? attributes.className.trim()
+        : "";
+    const className = [baseClass.trim(), customClass]
+        .filter(Boolean)
+        .join(" ")
+        .replace(/\s+/g, " ");
+    return {
+        ...(anchor ? { id: anchor } : {}),
+        ...(className ? { class: className } : {})
+    };
+}
 const SEMANTIC_KEYS = [
     "tone",
     "intensity",

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

@@ -1 +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"]}
+{"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\nexport function blockHtmlAttributes(\n  attributes: Record<string, unknown>,\n  baseClass = \"\"\n): { id?: string; class?: string } {\n  const anchor = typeof attributes.anchor === \"string\"\n    ? attributes.anchor.trim()\n    : \"\";\n  const customClass = typeof attributes.className === \"string\"\n    ? attributes.className.trim()\n    : \"\";\n  const className = [baseClass.trim(), customClass]\n    .filter(Boolean)\n    .join(\" \")\n    .replace(/\\s+/g, \" \");\n\n  return {\n    ...(anchor ? { id: anchor } : {}),\n    ...(className ? { class: className } : {})\n  };\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

@@ -10,6 +10,27 @@ export const DEFAULT_SEMANTIC_PROPS = {
   density: "md"
 };
 
+export function blockHtmlAttributes(
+  attributes: Record<string, unknown>,
+  baseClass = ""
+): { id?: string; class?: string } {
+  const anchor = typeof attributes.anchor === "string"
+    ? attributes.anchor.trim()
+    : "";
+  const customClass = typeof attributes.className === "string"
+    ? attributes.className.trim()
+    : "";
+  const className = [baseClass.trim(), customClass]
+    .filter(Boolean)
+    .join(" ")
+    .replace(/\s+/g, " ");
+
+  return {
+    ...(anchor ? { id: anchor } : {}),
+    ...(className ? { class: className } : {})
+  };
+}
+
 const SEMANTIC_KEYS = [
   "tone",
   "intensity",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@styleflow.app/flowpress-astro-core",
-  "version": "0.2.0-beta.5",
+  "version": "0.2.0-beta.8",
   "description": "Project-agnostic WordPress routing, templates, SEO and GraphQL runtime for FlowPress Astro apps.",
   "type": "module",
   "private": false,