@styleflow.app/flowpress-astro-core 0.2.0-beta.11 → 0.2.0-beta.12

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+## 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

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.11
+pnpm add @styleflow.app/flowpress-astro-core@0.2.0-beta.12
 ```
 
 Prereleases are pinned exactly. The package expects Astro 7 or newer and the
@@ -44,6 +44,12 @@ visible characters. The exported
 from rendered CMS blocks so consumers can generate Tailwind
 `@source inline()` directives before compiling their frontend CSS.
 
+`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.
+
 ## Release
 
 ```bash

package/dist/astro/GutenbergRenderer.astro

@@ -7,6 +7,7 @@ import FormBlock from "./blocks/FormBlock.astro";
 import GridBlock from "./blocks/GridBlock.astro";
 import HeroBlock from "./blocks/HeroBlock.astro";
 import ListItemFallback from "./blocks/ListItemFallback.astro";
+import NumberSpinnerBlock from "./blocks/NumberSpinnerBlock.astro";
 import TextBlock from "./blocks/TextBlock.astro";
 import {
   blockHtmlAttributes,
@@ -71,6 +72,10 @@ function youtubeEmbedUrl(value: unknown): string | null {
     );
   }
 
+  if (name === "number-spinner") {
+    return <NumberSpinnerBlock block={block} contract={contract} />;
+  }
+
   if ([
     "heading",
     "rich-text",

package/dist/astro/blocks/NumberSpinnerBlock.astro

@@ -0,0 +1,131 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import {
+  clampSpinnerDuration,
+  spinnerFractionDigits
+} from "../../number-spinner.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import type { FlowpressBlock } from "../../types.js";
+import {
+  blockHtmlAttributes,
+  prefixedTextSemanticProps,
+  semanticProps,
+  textHtmlTag
+} from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const attributes = block.attributes;
+const prefix = String(attributes.prefix ?? "");
+const suffix = String(attributes.suffix ?? "");
+const candidateNumber = Number(attributes.number);
+const number = Number.isFinite(candidateNumber) ? candidateNumber : 0;
+const duration = clampSpinnerDuration(attributes.duration);
+const fractionDigits = spinnerFractionDigits(number);
+const locale = Astro.currentLocale ?? "";
+const numberText = String(number);
+const semantic = semanticProps(attributes, contract);
+const htmlAttributes = blockHtmlAttributes(
+  attributes,
+  "flowpress-number-spinner"
+);
+const prefixSemantic = prefixedTextSemanticProps(
+  attributes,
+  "prefix",
+  contract,
+  { ty: "body", v: "md", w: "default", foreground: "primary" }
+);
+const numberSemantic = prefixedTextSemanticProps(
+  attributes,
+  "number",
+  contract,
+  { ty: "heading", v: "2", w: "strong", foreground: "primary" }
+);
+const suffixSemantic = prefixedTextSemanticProps(
+  attributes,
+  "suffix",
+  contract,
+  { ty: "body", v: "md", w: "default", foreground: "primary" }
+);
+const prefixTag = textHtmlTag(attributes.prefixTag);
+const numberTag = textHtmlTag(attributes.numberTag);
+const suffixTag = textHtmlTag(attributes.suffixTag);
+---
+
+<S
+  as="div"
+  {...semantic}
+  {...htmlAttributes}
+  data-flowpress-number-spinner
+  data-spinner-target={number}
+  data-spinner-duration={duration}
+  data-spinner-fraction-digits={fractionDigits}
+  data-spinner-locale={locale || undefined}
+>
+  {prefix ? (
+    <S
+      as={prefixTag}
+      class="flowpress-number-spinner__segment"
+      {...prefixSemantic}
+    >
+      {prefix}
+    </S>
+  ) : null}
+  <S
+    as={numberTag}
+    class="flowpress-number-spinner__segment flowpress-number-spinner__number"
+    {...numberSemantic}
+  >
+    <S as="span" class="flowpress-number-spinner__accessible-value">
+      {numberText}
+    </S>
+    <S
+      as="span"
+      aria-hidden="true"
+      data-flowpress-number-spinner-value
+    >
+      {numberText}
+    </S>
+  </S>
+  {suffix ? (
+    <S
+      as={suffixTag}
+      class="flowpress-number-spinner__segment"
+      {...suffixSemantic}
+    >
+      {suffix}
+    </S>
+  ) : null}
+</S>
+
+<script>
+  import { initializeNumberSpinners } from "../../number-spinner.js";
+
+  initializeNumberSpinners();
+</script>
+
+<style>
+  .flowpress-number-spinner {
+    display: inline-flex;
+    align-items: baseline;
+  }
+
+  .flowpress-number-spinner__segment {
+    display: inline;
+    margin: 0;
+  }
+
+  .flowpress-number-spinner__accessible-value {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+</style>

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

@@ -9,7 +9,11 @@ export declare function blockHtmlAttributes(attributes: Record<string, unknown>,
     id?: string;
     class?: string;
 };
+export declare const TEXT_HTML_TAGS: readonly ["span", "p", "h1", "h2", "h3", "h4", "h5", "h6", "strong", "em", "small", "mark"];
+export type TextHtmlTag = (typeof TEXT_HTML_TAGS)[number];
+export declare function textHtmlTag(value: unknown): TextHtmlTag;
 export declare function semanticProps(attributes: Record<string, unknown>, contract?: StyleflowContract, defaults?: Record<string, unknown>): Record<string, unknown>;
+export declare function prefixedTextSemanticProps(attributes: Record<string, unknown>, prefix: string, 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;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;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAoB5D;AAED,sFAAsF;AACtF,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE3D;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,eAAO,MAAM,cAAc,6FAajB,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,WAAW,CAKvD;AAED,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,yBAAyB,CACvC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnC,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,iBAAiB,EAC5B,QAAQ,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GACrC,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;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAoB5D;AAED,sFAAsF;AACtF,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE3D;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

@@ -38,6 +38,26 @@ const SEMANTIC_KEYS = [
     "noRadius",
     "noForeground"
 ];
+export const TEXT_HTML_TAGS = [
+    "span",
+    "p",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "strong",
+    "em",
+    "small",
+    "mark"
+];
+export function textHtmlTag(value) {
+    const candidate = String(value ?? "span");
+    return TEXT_HTML_TAGS.includes(candidate)
+        ? candidate
+        : "span";
+}
 export function semanticProps(attributes, contract, defaults = DEFAULT_SEMANTIC_PROPS) {
     const input = Object.fromEntries(SEMANTIC_KEYS
         .filter((key) => attributes[key] !== undefined)
@@ -46,6 +66,15 @@ export function semanticProps(attributes, contract, defaults = DEFAULT_SEMANTIC_
         ? resolveDynamicStyleflowProps(input, defaults, contract)
         : { ...defaults, ...input };
 }
+export function prefixedTextSemanticProps(attributes, prefix, contract, defaults = {}) {
+    const attributeName = (name) => `${prefix}${name.charAt(0).toUpperCase()}${name.slice(1)}`;
+    return semanticProps({
+        ty: attributes[attributeName("ty")],
+        v: attributes[attributeName("v")],
+        w: attributes[attributeName("w")],
+        foreground: attributes[attributeName("foreground")]
+    }, contract, defaults);
+}
 export function objectValue(block, key) {
     const value = block.attributes[key];
     return value && typeof value === "object" && !Array.isArray(value)

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\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\n/**\n * Keep intentional blank lines visible across current and legacy RichText\n * serializations. Gutenberg can represent them either as repeated `<br>` tags,\n * empty paragraph elements, or literal newlines in an attribute value.\n */\nexport function preserveRichTextSpacing(html: string): string {\n  const visibleEmptyBlocks = html\n    .replace(/\\r\\n?/g, \"\\n\")\n    .replace(\n      /<(p|div)(\\s[^>]*)?>(?:\\s|&nbsp;|&#160;)*<\\/\\1>/gi,\n      (_match, tag: string, attributes = \"\") =>\n        `<${tag}${attributes}>&nbsp;</${tag}>`\n    );\n\n  return visibleEmptyBlocks\n    .split(/(<[^>]+>)/g)\n    .map((part) => {\n      if (part.startsWith(\"<\") || part.trim() === \"\") {\n        return part;\n      }\n      return part.replace(/\\n(?:[ \\t]*\\n)+/g, (newlines) =>\n        \"<br>\".repeat((newlines.match(/\\n/g) || []).length)\n      );\n    })\n    .join(\"\");\n}\n\n/** Keep an empty text element at its typographic line height without visible text. */\nexport function preserveEmptyTextBlock(html: string): string {\n  return html.trim() === \"\" ? \"&nbsp;\" : html;\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 const TEXT_HTML_TAGS = [\n  \"span\",\n  \"p\",\n  \"h1\",\n  \"h2\",\n  \"h3\",\n  \"h4\",\n  \"h5\",\n  \"h6\",\n  \"strong\",\n  \"em\",\n  \"small\",\n  \"mark\"\n] as const;\n\nexport type TextHtmlTag = (typeof TEXT_HTML_TAGS)[number];\n\nexport function textHtmlTag(value: unknown): TextHtmlTag {\n  const candidate = String(value ?? \"span\");\n  return TEXT_HTML_TAGS.includes(candidate as TextHtmlTag)\n    ? candidate as TextHtmlTag\n    : \"span\";\n}\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 prefixedTextSemanticProps(\n  attributes: Record<string, unknown>,\n  prefix: string,\n  contract?: StyleflowContract,\n  defaults: Record<string, unknown> = {}\n): Record<string, unknown> {\n  const attributeName = (name: string) =>\n    `${prefix}${name.charAt(0).toUpperCase()}${name.slice(1)}`;\n  return semanticProps({\n    ty: attributes[attributeName(\"ty\")],\n    v: attributes[attributeName(\"v\")],\n    w: attributes[attributeName(\"w\")],\n    foreground: attributes[attributeName(\"foreground\")]\n  }, contract, defaults);\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\n/**\n * Keep intentional blank lines visible across current and legacy RichText\n * serializations. Gutenberg can represent them either as repeated `<br>` tags,\n * empty paragraph elements, or literal newlines in an attribute value.\n */\nexport function preserveRichTextSpacing(html: string): string {\n  const visibleEmptyBlocks = html\n    .replace(/\\r\\n?/g, \"\\n\")\n    .replace(\n      /<(p|div)(\\s[^>]*)?>(?:\\s|&nbsp;|&#160;)*<\\/\\1>/gi,\n      (_match, tag: string, attributes = \"\") =>\n        `<${tag}${attributes}>&nbsp;</${tag}>`\n    );\n\n  return visibleEmptyBlocks\n    .split(/(<[^>]+>)/g)\n    .map((part) => {\n      if (part.startsWith(\"<\") || part.trim() === \"\") {\n        return part;\n      }\n      return part.replace(/\\n(?:[ \\t]*\\n)+/g, (newlines) =>\n        \"<br>\".repeat((newlines.match(/\\n/g) || []).length)\n      );\n    })\n    .join(\"\");\n}\n\n/** Keep an empty text element at its typographic line height without visible text. */\nexport function preserveEmptyTextBlock(html: string): string {\n  return html.trim() === \"\" ? \"&nbsp;\" : html;\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

@@ -50,6 +50,30 @@ const SEMANTIC_KEYS = [
   "noForeground"
 ] as const;
 
+export const TEXT_HTML_TAGS = [
+  "span",
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "strong",
+  "em",
+  "small",
+  "mark"
+] as const;
+
+export type TextHtmlTag = (typeof TEXT_HTML_TAGS)[number];
+
+export function textHtmlTag(value: unknown): TextHtmlTag {
+  const candidate = String(value ?? "span");
+  return TEXT_HTML_TAGS.includes(candidate as TextHtmlTag)
+    ? candidate as TextHtmlTag
+    : "span";
+}
+
 export function semanticProps(
   attributes: Record<string, unknown>,
   contract?: StyleflowContract,
@@ -65,6 +89,22 @@ export function semanticProps(
     : { ...defaults, ...input };
 }
 
+export function prefixedTextSemanticProps(
+  attributes: Record<string, unknown>,
+  prefix: string,
+  contract?: StyleflowContract,
+  defaults: Record<string, unknown> = {}
+): Record<string, unknown> {
+  const attributeName = (name: string) =>
+    `${prefix}${name.charAt(0).toUpperCase()}${name.slice(1)}`;
+  return semanticProps({
+    ty: attributes[attributeName("ty")],
+    v: attributes[attributeName("v")],
+    w: attributes[attributeName("w")],
+    foreground: attributes[attributeName("foreground")]
+  }, contract, defaults);
+}
+
 export function objectValue(
   block: FlowpressBlock,
   key: string

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./client.js";
 export * from "./env.js";
+export * from "./number-spinner.js";
 export * from "./styleflow.js";
 export * from "./style-classes.js";
 export * from "./template-hierarchy.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from "./client.js";
 export * from "./env.js";
+export * from "./number-spinner.js";
 export * from "./styleflow.js";
 export * from "./style-classes.js";
 export * from "./template-hierarchy.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC","sourcesContent":["export * from \"./client.js\";\nexport * from \"./env.js\";\nexport * from \"./styleflow.js\";\nexport * from \"./style-classes.js\";\nexport * from \"./template-hierarchy.js\";\nexport * from \"./types.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC","sourcesContent":["export * from \"./client.js\";\nexport * from \"./env.js\";\nexport * from \"./number-spinner.js\";\nexport * from \"./styleflow.js\";\nexport * from \"./style-classes.js\";\nexport * from \"./template-hierarchy.js\";\nexport * from \"./types.js\";\n"]}

package/dist/number-spinner.d.ts

@@ -0,0 +1,6 @@
+export declare function spinnerFractionDigits(value: number): number;
+export declare function clampSpinnerDuration(value: unknown): number;
+export declare function spinnerFrameValue(target: number, progress: number): number;
+export declare function formatSpinnerValue(value: number, locale: string, fractionDigits: number): string;
+export declare function initializeNumberSpinners(root?: ParentNode): void;
+//# sourceMappingURL=number-spinner.d.ts.map

package/dist/number-spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-spinner.d.ts","sourceRoot":"","sources":["../src/number-spinner.ts"],"names":[],"mappings":"AAIA,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAS3D;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAK3D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAI1E;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,MAAM,GACrB,MAAM,CAMR;AA2ED,wBAAgB,wBAAwB,CAAC,IAAI,GAAE,UAAqB,GAAG,IAAI,CAqD1E"}

package/dist/number-spinner.js

@@ -0,0 +1,131 @@
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const initializedSpinners = new WeakSet();
+const runningFrames = new Map();
+export function spinnerFractionDigits(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    const [coefficient = "", exponentText] = String(value).toLowerCase().split("e");
+    const coefficientDecimals = coefficient.split(".")[1]?.length ?? 0;
+    const exponent = Number(exponentText ?? 0);
+    return Math.min(20, Math.max(0, coefficientDecimals - exponent));
+}
+export function clampSpinnerDuration(value) {
+    const duration = Number(value);
+    return Number.isFinite(duration)
+        ? Math.min(10_000, Math.max(0, duration))
+        : 1200;
+}
+export function spinnerFrameValue(target, progress) {
+    const normalized = Math.min(1, Math.max(0, progress));
+    const eased = 1 - Math.pow(1 - normalized, 3);
+    return target * eased;
+}
+export function formatSpinnerValue(value, locale, fractionDigits) {
+    const digits = Math.min(20, Math.max(0, Math.trunc(fractionDigits)));
+    return new Intl.NumberFormat(locale || undefined, {
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits
+    }).format(value);
+}
+function spinnerDisplay(element) {
+    return element.querySelector("[data-flowpress-number-spinner-value]");
+}
+function spinnerTarget(element) {
+    const target = Number(element.dataset.spinnerTarget);
+    return Number.isFinite(target) ? target : 0;
+}
+function spinnerLocale(element) {
+    return element.dataset.spinnerLocale
+        || document.documentElement.lang
+        || navigator.language
+        || "en";
+}
+function renderSpinnerValue(element, value, final = false) {
+    const display = spinnerDisplay(element);
+    if (!display) {
+        return;
+    }
+    const target = spinnerTarget(element);
+    const digits = Number(element.dataset.spinnerFractionDigits) || 0;
+    display.textContent = formatSpinnerValue(final ? target : value, spinnerLocale(element), digits);
+    if (final) {
+        element.dataset.spinnerState = "complete";
+    }
+}
+function finishSpinner(element) {
+    const frame = runningFrames.get(element);
+    if (frame !== undefined) {
+        cancelAnimationFrame(frame);
+        runningFrames.delete(element);
+    }
+    renderSpinnerValue(element, spinnerTarget(element), true);
+}
+function animateSpinner(element) {
+    const duration = clampSpinnerDuration(element.dataset.spinnerDuration);
+    const target = spinnerTarget(element);
+    if (duration === 0 || target === 0) {
+        finishSpinner(element);
+        return;
+    }
+    element.dataset.spinnerState = "running";
+    renderSpinnerValue(element, 0);
+    const startedAt = performance.now();
+    const step = (now) => {
+        const progress = Math.min(1, (now - startedAt) / duration);
+        renderSpinnerValue(element, spinnerFrameValue(target, progress));
+        if (progress >= 1) {
+            finishSpinner(element);
+            return;
+        }
+        runningFrames.set(element, requestAnimationFrame(step));
+    };
+    runningFrames.set(element, requestAnimationFrame(step));
+}
+export function initializeNumberSpinners(root = document) {
+    if (typeof window === "undefined") {
+        return;
+    }
+    const elements = Array.from(root.querySelectorAll("[data-flowpress-number-spinner]")).filter((element) => {
+        if (initializedSpinners.has(element)) {
+            return false;
+        }
+        initializedSpinners.add(element);
+        return true;
+    });
+    if (!elements.length) {
+        return;
+    }
+    const reducedMotion = window.matchMedia(REDUCED_MOTION_QUERY);
+    if (reducedMotion.matches) {
+        elements.forEach(finishSpinner);
+        return;
+    }
+    if (!("IntersectionObserver" in window)) {
+        elements.forEach(animateSpinner);
+        return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            if (!entry.isIntersecting) {
+                continue;
+            }
+            const element = entry.target;
+            observer.unobserve(element);
+            animateSpinner(element);
+        }
+    }, {
+        threshold: 0.15
+    });
+    elements.forEach((element) => observer.observe(element));
+    const stopForReducedMotion = (event) => {
+        if (!event.matches) {
+            return;
+        }
+        observer.disconnect();
+        elements.forEach(finishSpinner);
+        reducedMotion.removeEventListener("change", stopForReducedMotion);
+    };
+    reducedMotion.addEventListener("change", stopForReducedMotion);
+}
+//# sourceMappingURL=number-spinner.js.map

package/dist/number-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-spinner.js","sourceRoot":"","sources":["../src/number-spinner.ts"],"names":[],"mappings":"AAAA,MAAM,oBAAoB,GAAG,kCAAkC,CAAC;AAChE,MAAM,mBAAmB,GAAG,IAAI,OAAO,EAAe,CAAC;AACvD,MAAM,aAAa,GAAG,IAAI,GAAG,EAAuB,CAAC;AAErD,MAAM,UAAU,qBAAqB,CAAC,KAAa;IACjD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,CAAC,CAAC;IACX,CAAC;IAED,MAAM,CAAC,WAAW,GAAG,EAAE,EAAE,YAAY,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAChF,MAAM,mBAAmB,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC;IACnE,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC;IAC3C,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,mBAAmB,GAAG,QAAQ,CAAC,CAAC,CAAC;AACnE,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,KAAc;IACjD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/B,OAAO,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAC9B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;QACzC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,MAAc,EAAE,QAAgB;IAChE,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU,EAAE,CAAC,CAAC,CAAC;IAC9C,OAAO,MAAM,GAAG,KAAK,CAAC;AACxB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,KAAa,EACb,MAAc,EACd,cAAsB;IAEtB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IACrE,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,IAAI,SAAS,EAAE;QAChD,qBAAqB,EAAE,MAAM;QAC7B,qBAAqB,EAAE,MAAM;KAC9B,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACnB,CAAC;AAED,SAAS,cAAc,CAAC,OAAoB;IAC1C,OAAO,OAAO,CAAC,aAAa,CAC1B,uCAAuC,CACxC,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,OAAoB;IACzC,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IACrD,OAAO,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAED,SAAS,aAAa,CAAC,OAAoB;IACzC,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa;WAC/B,QAAQ,CAAC,eAAe,CAAC,IAAI;WAC7B,SAAS,CAAC,QAAQ;WAClB,IAAI,CAAC;AACZ,CAAC;AAED,SAAS,kBAAkB,CACzB,OAAoB,EACpB,KAAa,EACb,KAAK,GAAG,KAAK;IAEb,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IACxC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO;IACT,CAAC;IACD,MAAM,MAAM,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAClE,OAAO,CAAC,WAAW,GAAG,kBAAkB,CACtC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EACtB,aAAa,CAAC,OAAO,CAAC,EACtB,MAAM,CACP,CAAC;IACF,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,CAAC,OAAO,CAAC,YAAY,GAAG,UAAU,CAAC;IAC5C,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,OAAoB;IACzC,MAAM,KAAK,GAAG,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACzC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC5B,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IACD,kBAAkB,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC;AAC5D,CAAC;AAED,SAAS,cAAc,CAAC,OAAoB;IAC1C,MAAM,QAAQ,GAAG,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACvE,MAAM,MAAM,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACtC,IAAI,QAAQ,KAAK,CAAC,IAAI,MAAM,KAAK,CAAC,EAAE,CAAC;QACnC,aAAa,CAAC,OAAO,CAAC,CAAC;QACvB,OAAO;IACT,CAAC;IAED,OAAO,CAAC,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC;IACzC,kBAAkB,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IAC/B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;IAEpC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE;QAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC;QAC3D,kBAAkB,CAAC,OAAO,EAAE,iBAAiB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;QACjE,IAAI,QAAQ,IAAI,CAAC,EAAE,CAAC;YAClB,aAAa,CAAC,OAAO,CAAC,CAAC;YACvB,OAAO;QACT,CAAC;QACD,aAAa,CAAC,GAAG,CAAC,OAAO,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC;IAEF,aAAa,CAAC,GAAG,CAAC,OAAO,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1D,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,OAAmB,QAAQ;IAClE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO;IACT,CAAC;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CACzB,IAAI,CAAC,gBAAgB,CAAc,iCAAiC,CAAC,CACtE,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE;QACnB,IAAI,mBAAmB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACrC,OAAO,KAAK,CAAC;QACf,CAAC;QACD,mBAAmB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACjC,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QACrB,OAAO;IACT,CAAC;IAED,MAAM,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC9D,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;QAC1B,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAChC,OAAO;IACT,CAAC;IAED,IAAI,CAAC,CAAC,sBAAsB,IAAI,MAAM,CAAC,EAAE,CAAC;QACxC,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QACjC,OAAO;IACT,CAAC;IAED,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,EAAE;QACpD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;gBAC1B,SAAS;YACX,CAAC;YACD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAqB,CAAC;YAC5C,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YAC5B,cAAc,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EAAE;QACD,SAAS,EAAE,IAAI;KAChB,CAAC,CAAC;IAEH,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAEzD,MAAM,oBAAoB,GAAG,CAAC,KAA0B,EAAE,EAAE;QAC1D,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QACD,QAAQ,CAAC,UAAU,EAAE,CAAC;QACtB,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAChC,aAAa,CAAC,mBAAmB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;IACpE,CAAC,CAAC;IACF,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AACjE,CAAC","sourcesContent":["const REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst initializedSpinners = new WeakSet<HTMLElement>();\nconst runningFrames = new Map<HTMLElement, number>();\n\nexport function spinnerFractionDigits(value: number): number {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  const [coefficient = \"\", exponentText] = String(value).toLowerCase().split(\"e\");\n  const coefficientDecimals = coefficient.split(\".\")[1]?.length ?? 0;\n  const exponent = Number(exponentText ?? 0);\n  return Math.min(20, Math.max(0, coefficientDecimals - exponent));\n}\n\nexport function clampSpinnerDuration(value: unknown): number {\n  const duration = Number(value);\n  return Number.isFinite(duration)\n    ? Math.min(10_000, Math.max(0, duration))\n    : 1200;\n}\n\nexport function spinnerFrameValue(target: number, progress: number): number {\n  const normalized = Math.min(1, Math.max(0, progress));\n  const eased = 1 - Math.pow(1 - normalized, 3);\n  return target * eased;\n}\n\nexport function formatSpinnerValue(\n  value: number,\n  locale: string,\n  fractionDigits: number\n): string {\n  const digits = Math.min(20, Math.max(0, Math.trunc(fractionDigits)));\n  return new Intl.NumberFormat(locale || undefined, {\n    minimumFractionDigits: digits,\n    maximumFractionDigits: digits\n  }).format(value);\n}\n\nfunction spinnerDisplay(element: HTMLElement): HTMLElement | null {\n  return element.querySelector<HTMLElement>(\n    \"[data-flowpress-number-spinner-value]\"\n  );\n}\n\nfunction spinnerTarget(element: HTMLElement): number {\n  const target = Number(element.dataset.spinnerTarget);\n  return Number.isFinite(target) ? target : 0;\n}\n\nfunction spinnerLocale(element: HTMLElement): string {\n  return element.dataset.spinnerLocale\n    || document.documentElement.lang\n    || navigator.language\n    || \"en\";\n}\n\nfunction renderSpinnerValue(\n  element: HTMLElement,\n  value: number,\n  final = false\n): void {\n  const display = spinnerDisplay(element);\n  if (!display) {\n    return;\n  }\n  const target = spinnerTarget(element);\n  const digits = Number(element.dataset.spinnerFractionDigits) || 0;\n  display.textContent = formatSpinnerValue(\n    final ? target : value,\n    spinnerLocale(element),\n    digits\n  );\n  if (final) {\n    element.dataset.spinnerState = \"complete\";\n  }\n}\n\nfunction finishSpinner(element: HTMLElement): void {\n  const frame = runningFrames.get(element);\n  if (frame !== undefined) {\n    cancelAnimationFrame(frame);\n    runningFrames.delete(element);\n  }\n  renderSpinnerValue(element, spinnerTarget(element), true);\n}\n\nfunction animateSpinner(element: HTMLElement): void {\n  const duration = clampSpinnerDuration(element.dataset.spinnerDuration);\n  const target = spinnerTarget(element);\n  if (duration === 0 || target === 0) {\n    finishSpinner(element);\n    return;\n  }\n\n  element.dataset.spinnerState = \"running\";\n  renderSpinnerValue(element, 0);\n  const startedAt = performance.now();\n\n  const step = (now: number) => {\n    const progress = Math.min(1, (now - startedAt) / duration);\n    renderSpinnerValue(element, spinnerFrameValue(target, progress));\n    if (progress >= 1) {\n      finishSpinner(element);\n      return;\n    }\n    runningFrames.set(element, requestAnimationFrame(step));\n  };\n\n  runningFrames.set(element, requestAnimationFrame(step));\n}\n\nexport function initializeNumberSpinners(root: ParentNode = document): void {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n\n  const elements = Array.from(\n    root.querySelectorAll<HTMLElement>(\"[data-flowpress-number-spinner]\")\n  ).filter((element) => {\n    if (initializedSpinners.has(element)) {\n      return false;\n    }\n    initializedSpinners.add(element);\n    return true;\n  });\n  if (!elements.length) {\n    return;\n  }\n\n  const reducedMotion = window.matchMedia(REDUCED_MOTION_QUERY);\n  if (reducedMotion.matches) {\n    elements.forEach(finishSpinner);\n    return;\n  }\n\n  if (!(\"IntersectionObserver\" in window)) {\n    elements.forEach(animateSpinner);\n    return;\n  }\n\n  const observer = new IntersectionObserver((entries) => {\n    for (const entry of entries) {\n      if (!entry.isIntersecting) {\n        continue;\n      }\n      const element = entry.target as HTMLElement;\n      observer.unobserve(element);\n      animateSpinner(element);\n    }\n  }, {\n    threshold: 0.15\n  });\n\n  elements.forEach((element) => observer.observe(element));\n\n  const stopForReducedMotion = (event: MediaQueryListEvent) => {\n    if (!event.matches) {\n      return;\n    }\n    observer.disconnect();\n    elements.forEach(finishSpinner);\n    reducedMotion.removeEventListener(\"change\", stopForReducedMotion);\n  };\n  reducedMotion.addEventListener(\"change\", stopForReducedMotion);\n}\n"]}

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/astro.d.ts","../src/client.ts","../src/env.ts","../src/index.ts","../src/style-classes.ts","../src/styleflow.ts","../src/template-hierarchy.ts","../src/templates.ts","../src/types.ts","../src/astro/blocks/helpers.ts"],"version":"5.9.3"}
+{"root":["../src/astro.d.ts","../src/client.ts","../src/env.ts","../src/index.ts","../src/number-spinner.ts","../src/style-classes.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.11",
+  "version": "0.2.0-beta.12",
   "description": "Project-agnostic WordPress routing, templates, SEO and GraphQL runtime for FlowPress Astro apps.",
   "type": "module",
   "private": false,