@wildo-ai/saas-website 1.1.1

package/src/core/hooks/useWebsiteLabel.ts

@@ -0,0 +1,121 @@
+import { useMemo } from 'react';
+
+import { useWebsitePage } from '../contexts/useWebsitePage';
+import { useWebsiteRuntime } from '../contexts/useWebsiteRuntime';
+import { useWebsiteSection } from '../contexts/useWebsiteSection';
+import {
+  WebsiteLabelKeySchema,
+  composeWebsiteLabelKey,
+  type WebsiteLabelKey,
+} from '../../schemas/label-keys/website-label-key.schemas';
+
+/**
+ * @wildo_source:part:start saas.website.use-label.hook facet:layer:core facet:family:website
+ *
+ * `useWebsiteLabel(slotPath)` — leaf-relative label resolution.
+ *
+ * Composes the slot leaf with the active page+section context to
+ * derive the full `WebsiteLabelKey` (`website.{pageRef}.{sectionRef}.{slotPath}`),
+ * looks it up in the active locale's label pack, and returns the
+ * resolved string.
+ *
+ * **Author ergonomics**: section authors call
+ * `useWebsiteLabel('headline')` from inside their section component
+ * without ever typing the page or section ref — the hook reads them
+ * from context. This keeps section components portable across pages
+ * (the same `<HeroSection />` can be reused on `landing` and on a
+ * dedicated `/about` page; only the surrounding `<WebsiteSection
+ * sectionRef="hero">` differs, and the label keys re-root accordingly).
+ *
+ * **Fail-loud diagnostics** for missing keys: returns the composed key
+ * itself (visible in the rendered DOM as e.g. `website.landing.hero.headline`)
+ * AND emits a `console.warn`. The visible-key fallback is preferred
+ * over an empty string or a thrown error because:
+ *   - empty string silently breaks layout (zero-height heading) and
+ *     leaks past visual review,
+ *   - throwing would crash the entire page on a single missing label
+ *     while the SEO crawler indexes a 500 page,
+ *   - the rendered key is a clear authoring signal ("ship the missing
+ *     pack entry") that designers and copywriters can spot without
+ *     opening DevTools.
+ *
+ * **Hard guards** (each enforced by the underlying context hooks):
+ *   - MUST be called inside `<WebsiteRuntimeContextProvider>`,
+ *   - MUST be called inside `<WebsitePageLayout>`,
+ *   - MUST be called inside `<WebsiteSection>`.
+ *
+ * @param slotPath leaf identifier (eg. `'headline'`, `'cta.primary'`,
+ *                 `'tiers[0].name'`). Anything that survives the slot
+ *                 portion of `WebsiteLabelKeySchema`'s regex.
+ * @returns the resolved label string, or the composed key itself when
+ *          the pack lacks an entry (with a `console.warn`).
+ */
+export function useWebsiteLabel(slotPath: string): string {
+  const { labelPack } = useWebsiteRuntime();
+  const { pageRef } = useWebsitePage();
+  const { sectionRef } = useWebsiteSection();
+
+  /**
+   * Compose + parse memoized on the three identity inputs. The parse
+   * itself is cheap (regex + brand) but executing it on every render
+   * of every label-bound primitive in a section adds up across a
+   * 12-section landing page.
+   */
+  const fullKey = useMemo<WebsiteLabelKey>(
+    () =>
+      composeWebsiteLabelKey({
+        pageRef: pageRef as unknown as string,
+        sectionRef: sectionRef as unknown as string,
+        slotPath,
+      }),
+    [pageRef, sectionRef, slotPath],
+  );
+
+  const resolved = labelPack[fullKey as unknown as string];
+  if (resolved === undefined) {
+    console.warn(
+      `[useWebsiteLabel] Missing label for key "${fullKey as unknown as string}". ` +
+        `Add it to the active locale's pack (or remove the section's claim on this slot).`,
+    );
+    return fullKey as unknown as string;
+  }
+  return resolved;
+}
+/** @wildo_source:part:end saas.website.use-label.hook */
+
+/**
+ * @wildo_source:part:start saas.website.use-label-by-key.hook facet:layer:core facet:family:website
+ *
+ * `useWebsiteLabelByKey(key)` — absolute key lookup.
+ *
+ * Use when the consumer already holds a fully-composed label key and
+ * does NOT need page+section composition. Two main call sites:
+ *   - the navigation header/footer rendering page meta titles
+ *     (`useWebsiteLabelByKey(manifest.metaLabelKeys.titleKey)`),
+ *   - section components that accept a `*Key` prop from their parent
+ *     page (`<HeroSection headlineKey="website.landing.hero.headline" />`)
+ *     instead of using the leaf-relative hook.
+ *
+ * Same fail-loud diagnostics as `useWebsiteLabel`: returns the key
+ * string and emits a `console.warn` on miss.
+ *
+ * Defensively re-parses the key through `WebsiteLabelKeySchema` so a
+ * caller that bypassed the type system (eg. an `as WebsiteLabelKey`
+ * cast on a malformed string) gets caught at the hook boundary
+ * instead of silently looking up garbage.
+ */
+export function useWebsiteLabelByKey(key: WebsiteLabelKey): string {
+  const { labelPack } = useWebsiteRuntime();
+
+  const safeKey = useMemo(() => WebsiteLabelKeySchema.parse(key), [key]);
+
+  const resolved = labelPack[safeKey as unknown as string];
+  if (resolved === undefined) {
+    console.warn(
+      `[useWebsiteLabelByKey] Missing label for key "${safeKey as unknown as string}".`,
+    );
+    return safeKey as unknown as string;
+  }
+  return resolved;
+}
+/** @wildo_source:part:end saas.website.use-label-by-key.hook */

package/src/core/layouts/WebsitePageLayout.tsx

@@ -0,0 +1,311 @@
+import React, { useMemo, type ReactNode } from 'react';
+import { BUILTIN_PROVIDER_CAPABILITY } from '@wildo-ai/saas-models/public-runtime';
+
+import { WebsitePageContextProvider } from '../contexts/WebsitePageContext';
+import type { WebsitePageContextValue } from '../contexts/WebsitePageContext';
+import { useWebsiteRuntime } from '../contexts/useWebsiteRuntime';
+import { useWebsiteLabelByKey } from '../hooks/useWebsiteLabel';
+import {
+  WebsitePageRefSchema,
+  type WebsitePageRef,
+} from '../../schemas/refs/page-ref.schemas';
+
+/**
+ * Stable DOM id stamped on the `<main>` element so the framework's
+ * skip-link `<a href="#main-content">` can move keyboard focus past
+ * the chrome on every page (Phase 6 audit fix M-α). Co-located here
+ * (rather than exposed as a prop) because:
+ *   - The skip-link target is a framework concern — exposing it as a
+ *     consumer-tunable id would invite drift between the link's href
+ *     and the main element's id.
+ *   - Screen readers announce the heading inside `<main id="...">` on
+ *     focus; a stable, framework-owned id keeps that affordance
+ *     deterministic across every page on every site.
+ */
+const MAIN_CONTENT_DOM_ID = 'main-content';
+
+/**
+ * Inline style for the skip link's "visually hidden by default,
+ * visible on focus" pattern. Inlined (NOT shipped as a CSS class)
+ * because:
+ *   - The framework intentionally avoids shipping any CSS file the
+ *     consumer must opt in to — the only stylesheet emitted is the
+ *     `:root { --website-*: … }` design-token block, and the rest of
+ *     the styling surface lives in consumer code (see Phase 5
+ *     `renderWebsiteDesignTokensCss`). Inlining keeps the skip link
+ *     self-sufficient and side-effect-free.
+ *   - The "skip-link" pattern is a small, well-known a11y idiom; the
+ *     handful of style declarations here do not benefit from being
+ *     reorganized into a class with a custom-property hook.
+ *
+ * The "focused" variant uses BOTH `:focus` AND `:focus-visible`
+ * pseudo-classes via a scoped `<style>` tag inside the layout output.
+ * We cannot apply pseudo-class styles via a `style` attribute, but
+ * emitting a tiny scoped block once at the layout root is safe (one
+ * block per page render, ~120 bytes) and avoids importing a CSS-in-JS
+ * runtime.
+ *
+ * **Why both selectors and not just `:focus-visible`** (Phase 6 fourth
+ * audit fix M-Η): `:focus-visible` is the modern UA-heuristic-driven
+ * selector that hides focus rings on mouse clicks, and it is the
+ * RIGHT default for buttons / links. For a skip link though we WANT
+ * the affordance to appear on EVERY focus event — the link is
+ * invisible by default and a keyboard-only user (the only intended
+ * audience) is the only one who can reach it. Older browsers that
+ * predate `:focus-visible` (and Safari < 15.4 with the feature
+ * disabled) would skip the rule entirely with a `:focus-visible`-only
+ * declaration, leaving the keyboard user looking at an apparently
+ * empty page when they pressed Tab. Pairing `:focus, :focus-visible`
+ * is the documented WCAG 2.1 fallback pattern.
+ */
+const SKIP_LINK_HIDDEN_STYLE: React.CSSProperties = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0 0 0 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+};
+
+/**
+ * Single scoped style block for the skip link's `:focus-visible`
+ * affordance. Targets the `data-website-skip-link` attribute (NOT a
+ * class) so consumer Tailwind / utility classes cannot accidentally
+ * shadow it. Stays trivially small to keep payload under the
+ * "framework rendering" implicit budget.
+ */
+const SKIP_LINK_FOCUS_CSS = `
+[data-website-skip-link]:focus,
+[data-website-skip-link]:focus-visible {
+  position: fixed !important;
+  top: 0.5rem !important;
+  left: 0.5rem !important;
+  width: auto !important;
+  height: auto !important;
+  padding: 0.75rem 1rem !important;
+  margin: 0 !important;
+  overflow: visible !important;
+  clip: auto !important;
+  white-space: normal !important;
+  background: var(--website-colors-background, #fff) !important;
+  color: var(--website-colors-foreground, #000) !important;
+  border: 2px solid var(--website-colors-primary, #000) !important;
+  border-radius: var(--website-radii-md, 0.375rem) !important;
+  z-index: 9999 !important;
+  text-decoration: none !important;
+}
+`.trim();
+
+/**
+ * @wildo_source:part:start saas.website.page-layout.component facet:layer:core facet:family:website
+ *
+ * `WebsitePageLayout` — the per-page structural primitive.
+ *
+ * **Three responsibilities** (each carrying its own semantic weight):
+ *
+ *   1. **Provides `WebsitePageContext`** — registers the active page
+ *      ref so child sections (`<WebsiteSection>`) and label hooks
+ *      (`useWebsiteLabel`) can derive label keys without re-typing
+ *      the page ref at every leaf.
+ *   2. **Renders the site-wide chrome** — pulls
+ *      `headerComponent` and `footerComponent` from the runtime
+ *      navigation config and wraps the page's main content in the
+ *      site's standard header/main/footer scaffold. Per-page
+ *      overrides (`header={…}` / `footer={…}` props) take precedence
+ *      over the runtime defaults so individual pages can opt into a
+ *      custom chrome (eg. a campaign landing page running with
+ *      header-only minimal chrome).
+ *   3. **Stamps DOM landmarks** — emits `data-website-page-ref` on
+ *      the layout root for analytics / SEO crawlers / overlay
+ *      tooling that needs to identify the active page from the DOM
+ *      without booting React. When the website facet hydrates
+ *      frontend-provider bootstraps, the same root also carries the
+ *      active public provider refs for analytics / browser-monitoring /
+ *      captcha so non-React tooling can detect the configured vendor
+ *      without reverse-engineering app code.
+ *
+ * **Why semantic `<header>` / `<main>` / `<footer>` elements**:
+ * marketing-site SEO scoring penalizes pages that ship a single
+ * unstructured `<div>` tree. Using semantic landmarks costs nothing
+ * and improves crawler accessibility AND screen-reader
+ * navigability — both are first-class concerns for a public
+ * marketing surface.
+ *
+ * **Why this lives in `core/`** (not `components/`): the layout is
+ * structural framework machinery (it owns the page-context
+ * provisioning + the navigation slot resolution), not a styled
+ * primitive. Designers override `header` / `footer` via runtime
+ * config or per-page props, NOT by replacing this component.
+ */
+export interface WebsitePageLayoutProps {
+  /**
+   * The active page's ref. Accepts either an already-branded
+   * `WebsitePageRef` or a raw string — the layout parses through
+   * `WebsitePageRefSchema` so a malformed ref fails loud at render.
+   *
+   * Typically sourced from the page's `WebsitePageManifest.ref`
+   * (eg. `<WebsitePageLayout pageRef={LANDING_PAGE_MANIFEST.ref}>`).
+   */
+  pageRef: WebsitePageRef | string;
+  /**
+   * Per-page header override. When supplied, takes precedence over
+   * `WebsiteRuntimeContext.designTokens` navigation config's
+   * `headerComponent`. Pass `null` explicitly to suppress the header
+   * entirely (campaign landing pages without site-wide nav).
+   */
+  header?: ReactNode | null;
+  /**
+   * Per-page footer override. Same semantics as `header`.
+   */
+  footer?: ReactNode | null;
+  /**
+   * Optional className applied to the root `<div data-website-page-ref="…">`
+   * wrapper. Use for page-level layout tweaks (eg. `min-h-screen` on
+   * landing pages).
+   */
+  className?: string;
+  /**
+   * Optional className applied to the inner `<main>` element. Use for
+   * vertical-rhythm overrides on long-scroll landing pages.
+   */
+  mainClassName?: string;
+  /**
+   * The page's section composition. Typically a sequence of
+   * `<WebsiteSection>` wrappers around concrete section components.
+   */
+  children: ReactNode;
+}
+
+export function WebsitePageLayout({
+  pageRef,
+  header,
+  footer,
+  className,
+  mainClassName,
+  children,
+}: WebsitePageLayoutProps): ReactNode {
+  const runtime = useWebsiteRuntime();
+
+  /**
+   * Defensive parse: callers should pass a `WebsitePageManifest.ref`
+   * (already branded), but accepting raw strings + parsing here means
+   * a hand-typed call site can't smuggle a malformed ref into the
+   * label-key derivation chain.
+   */
+  const safePageRef = useMemo<WebsitePageRef>(
+    () => WebsitePageRefSchema.parse(pageRef),
+    [pageRef],
+  );
+
+  const pageContextValue = useMemo<WebsitePageContextValue>(
+    () => ({ pageRef: safePageRef }),
+    [safePageRef],
+  );
+
+  /**
+   * Header resolution rules:
+   *   - `header === null`      => explicit suppression
+   *   - `header !== undefined` => per-page override (any ReactNode)
+   *   - `header === undefined` => fall back to the runtime navigation
+   *                                config's `headerComponent`
+   *
+   * The fallback is the common path: every page renders the same
+   * site-wide chrome. The override path is the escape hatch (campaign
+   * landing pages with custom header layouts).
+   */
+  const resolvedHeader = useMemo<ReactNode>(() => {
+    if (header === null) return null;
+    if (header !== undefined) return header;
+    const HeaderComponent = runtime.navigation.headerComponent;
+    return <HeaderComponent />;
+  }, [header, runtime.navigation.headerComponent]);
+
+  const resolvedFooter = useMemo<ReactNode>(() => {
+    if (footer === null) return null;
+    if (footer !== undefined) return footer;
+    const FooterComponent = runtime.navigation.footerComponent;
+    return <FooterComponent />;
+  }, [footer, runtime.navigation.footerComponent]);
+
+  const providerRootAttributes = useMemo<Record<string, string>>(() => {
+    const attrs: Record<string, string> = {};
+    const productAnalyticsProviderRef = runtime.frontendProviderRegistry
+      ?.findProviderByProviderCapability(
+        BUILTIN_PROVIDER_CAPABILITY.FRONTEND_PRODUCT_ANALYTICS,
+      )
+      ?.metadata.ref;
+    const errorMonitoringProviderRef = runtime.frontendProviderRegistry
+      ?.findProviderByProviderCapability(
+        BUILTIN_PROVIDER_CAPABILITY.FRONTEND_ERROR_MONITORING,
+      )
+      ?.metadata.ref;
+    const captchaProviderRef = runtime.frontendProviderRegistry
+      ?.findProviderByProviderCapability(
+        BUILTIN_PROVIDER_CAPABILITY.FRONTEND_CAPTCHA,
+      )
+      ?.metadata.ref;
+
+    if (productAnalyticsProviderRef) {
+      attrs['data-website-product-analytics-provider-ref'] = productAnalyticsProviderRef;
+    }
+    if (errorMonitoringProviderRef) {
+      attrs['data-website-error-monitoring-provider-ref'] = errorMonitoringProviderRef;
+    }
+    if (captchaProviderRef) {
+      attrs['data-website-captcha-provider-ref'] = captchaProviderRef;
+    }
+
+    return attrs;
+  }, [runtime.frontendProviderRegistry]);
+
+  /**
+   * Resolved skip-link label. Reads through the runtime label pack
+   * via the standard `useWebsiteLabelByKey` hook so a missing
+   * translation surfaces the same diagnostic shape as any other
+   * missing chrome label. The framework guarantees the key reaches
+   * the bridge (see `pickLabelsForPage`) and the consumer's
+   * label-pack validator (see `composeEffectiveChromeLabelKeys` in
+   * `label-pack-loader.ts`) ensures it is present in every locale
+   * pack — there is therefore no silent-fallback path that would
+   * ship an English skip link to a non-EN visitor.
+   */
+  const skipLinkLabel = useWebsiteLabelByKey(runtime.skipToMainContentLabelKey);
+
+  return (
+    <WebsitePageContextProvider value={pageContextValue}>
+      <div
+        data-website-page-ref={safePageRef as unknown as string}
+        className={className}
+        {...providerRootAttributes}
+      >
+        {/*
+         * Skip link rendered as the FIRST focusable element on the
+         * page so a keyboard / AT user can bypass the chrome on every
+         * navigation (WCAG 2.1 §2.4.1 "Bypass Blocks", Level A).
+         * Visually hidden by default; revealed on focus via the
+         * scoped `<style>` block below.
+         */}
+        <style>{SKIP_LINK_FOCUS_CSS}</style>
+        <a
+          href={`#${MAIN_CONTENT_DOM_ID}`}
+          data-website-skip-link=""
+          style={SKIP_LINK_HIDDEN_STYLE}
+        >
+          {skipLinkLabel}
+        </a>
+        {resolvedHeader !== null ? <header>{resolvedHeader}</header> : null}
+        <main id={MAIN_CONTENT_DOM_ID} className={mainClassName} tabIndex={-1}>
+          {children}
+        </main>
+        {resolvedFooter !== null ? <footer>{resolvedFooter}</footer> : null}
+      </div>
+    </WebsitePageContextProvider>
+  );
+}
+WebsitePageLayout.displayName = 'WebsitePageLayout';
+/** @wildo_source:part:end saas.website.page-layout.component */

package/src/core/layouts/WebsiteSection.tsx

@@ -0,0 +1,139 @@
+import React, { useMemo, type HTMLAttributes, type ReactNode } from 'react';
+
+import { WebsiteSectionContextProvider } from '../contexts/WebsiteSectionContext';
+import type { WebsiteSectionContextValue } from '../contexts/WebsiteSectionContext';
+import { WebsiteSectionCategory } from '../../schemas/sections/website-section-category.shared';
+import {
+  WebsiteSectionRefSchema,
+  type WebsiteSectionRef,
+} from '../../schemas/refs/section-ref.schemas';
+
+/**
+ * @wildo_source:part:start saas.website.section.component facet:layer:core facet:family:website
+ *
+ * `WebsiteSection` — the per-section structural primitive.
+ *
+ * **Three responsibilities** (semantic-weight discipline):
+ *
+ *   1. **Provides `WebsiteSectionContext`** — registers the active
+ *      sectionRef + category so leaf primitives (`useWebsiteLabel`,
+ *      analytics overlays, structured-data emitters) can derive
+ *      keys / metadata without re-typing the section's identity.
+ *   2. **Renders a semantic `<section>` landmark** — emits
+ *      `data-section-ref` and `data-section-category` attributes so
+ *      analytics tooling and SEO crawlers can identify and group
+ *      sections without parsing className conventions. Optional
+ *      `id` prop wires up anchor-link navigation
+ *      (`<a href="#pricing">`).
+ *   3. **Provides a styling seam** — `className` is forwarded to the
+ *      `<section>` element so designers can apply utility-class
+ *      decorations (background, padding, max-width container) without
+ *      having to compose multiple wrappers.
+ *
+ * **Why NOT render a `<div>` instead of `<section>`**: marketing
+ * pages benefit from semantic landmarks for SEO scoring and
+ * accessibility (screen-reader section navigation). A `<section>`
+ * with `data-section-category="hero"` is structurally meaningful;
+ * a `<div>` with the same data-attribute carries the same metadata
+ * but loses the landmark benefit.
+ *
+ * **Why expose `as` is NOT a prop**: switching the rendered tag
+ * (`<article>` for blog post bodies, `<aside>` for sidebar widgets)
+ * is legitimate but rare enough to be worth a separate primitive
+ * (Phase 4: `<WebsiteAside>`, `<WebsiteArticle>`). Keeping
+ * `WebsiteSection` rendered as a literal `<section>` removes a
+ * rarely-used prop from the section-author API and keeps the SEO
+ * landmark contract guaranteed at the type level.
+ */
+export interface WebsiteSectionProps {
+  /**
+   * The section's ref. Accepts an already-branded `WebsiteSectionRef`
+   * or a raw string — the layout parses through
+   * `WebsiteSectionRefSchema` so a malformed ref fails loud at
+   * render. Typically sourced from the page manifest's
+   * `sectionRefs[]` (eg. `<WebsiteSection sectionRef="hero" …>`).
+   */
+  sectionRef: WebsiteSectionRef | string;
+  /**
+   * The section's structural intent (see `WebsiteSectionCategory`).
+   * Required at the wrapper level (rather than only on the section
+   * definition) because the wrapper emits `data-section-category`
+   * for analytics, and asking the wrapper to look up the category
+   * on a separate manifest registry would re-introduce the runtime
+   * coupling the per-section context exists to avoid.
+   */
+  category: WebsiteSectionCategory;
+  /**
+   * Optional DOM id. Wires anchor-link navigation
+   * (`<a href="#pricing">`). When omitted, the section has no DOM
+   * id — by design; not every section is an anchor target.
+   */
+  id?: string;
+  /**
+   * Optional className applied to the `<section>` element. Used by
+   * designers for layout / spacing utilities. Section components
+   * themselves should NOT pass className through to this wrapper —
+   * keep the styling responsibility at the page-composition level.
+   */
+  className?: string;
+  /**
+   * The section's body. Typically a single section component
+   * (`<HeroSection {…heroProps} />`). May be plain JSX for one-off
+   * sections that don't justify a `defineWebsiteSection` factory call.
+   */
+  children: ReactNode;
+  /**
+   * Pass-through `aria-*` / `role` attributes for sections that need
+   * to refine their landmark semantics (eg. `aria-label="Featured
+   * customer logos"` on a logo wall).
+   */
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+}
+
+export function WebsiteSection({
+  sectionRef,
+  category,
+  id,
+  className,
+  children,
+  ariaLabel,
+  ariaLabelledBy,
+}: WebsiteSectionProps): ReactNode {
+  const safeSectionRef = useMemo<WebsiteSectionRef>(
+    () => WebsiteSectionRefSchema.parse(sectionRef),
+    [sectionRef],
+  );
+
+  const sectionContextValue = useMemo<WebsiteSectionContextValue>(
+    () => ({ sectionRef: safeSectionRef, category }),
+    [safeSectionRef, category],
+  );
+
+  /**
+   * Build the `<section>` attribute set imperatively to keep
+   * `aria-*` props off the element when omitted (rendering
+   * `aria-label={undefined}` still emits the attribute in some
+   * React versions — explicit absence is cleaner).
+   */
+  const sectionAttrs: HTMLAttributes<HTMLElement> = {
+    className,
+  };
+  if (id !== undefined) sectionAttrs.id = id;
+  if (ariaLabel !== undefined) sectionAttrs['aria-label'] = ariaLabel;
+  if (ariaLabelledBy !== undefined) sectionAttrs['aria-labelledby'] = ariaLabelledBy;
+
+  return (
+    <WebsiteSectionContextProvider value={sectionContextValue}>
+      <section
+        data-section-ref={safeSectionRef as unknown as string}
+        data-section-category={category}
+        {...sectionAttrs}
+      >
+        {children}
+      </section>
+    </WebsiteSectionContextProvider>
+  );
+}
+WebsiteSection.displayName = 'WebsiteSection';
+/** @wildo_source:part:end saas.website.section.component */