@hubpav/hwio-ui 0.1.0

package/src/components/HWioHubSpotForm.astro

@@ -0,0 +1,58 @@
+---
+/**
+ * Declarative HubSpot form posting through the website-forms Worker. Honeypot (class, not inline
+ * style), hs_language, lazy Turnstile, status line and dataLayer event are built in.
+ */
+import type { HWioFieldDef } from '../types';
+import HWioFormField from './HWioFormField.astro';
+import HWioTurnstile from './HWioTurnstile.astro';
+interface Props {
+  form: { key: string; guid: string; endpoint: string; event?: 'generate_lead' | 'newsletter_signup'; enrich?: boolean; kind?: string; source?: string };
+  fields: HWioFieldDef[];
+  labels: { submit: string; sending: string; success: string; error: string };
+  locale: string;
+  turnstileSiteKey?: string;
+  layout?: 'grid' | 'inline';
+  class?: string;
+}
+const { form, fields, labels, locale, turnstileSiteKey, layout = 'grid', class: className = '' } = Astro.props;
+const LAYOUT = { grid: 'grid gap-4 md:grid-cols-2', inline: 'flex flex-col gap-3 sm:flex-row sm:items-end' } as const;
+---
+<form
+  class:list={['hwio-form', className]}
+  method="post"
+  action={form.endpoint}
+  novalidate={undefined}
+  data-hs-form={form.key}
+  data-hs-form-guid={form.guid}
+  data-hs-endpoint={form.endpoint}
+  data-hs-event={form.event}
+  data-hs-enrich={form.enrich ? 'true' : undefined}
+  data-form-kind={form.kind}
+  data-inquiry-source={form.source}
+  data-hs-sending-msg={labels.sending}
+  data-hs-success-msg={labels.success}
+  data-hs-error-msg={labels.error}
+>
+  <div class={LAYOUT[layout]}>
+    {fields.map((field) => <HWioFormField field={field} />)}
+    {layout === 'inline' && <button type="submit" class="btn btn-primary">{labels.submit}</button>}
+  </div>
+  <input type="hidden" name="hs_language" value={locale} />
+  <div class="hwio-hp" aria-hidden="true">
+    <label>Leave this field empty <input type="text" name="hwio_hp" tabindex="-1" autocomplete="off" /></label>
+  </div>
+  {turnstileSiteKey && <div class="mt-4"><HWioTurnstile siteKey={turnstileSiteKey} /></div>}
+  <slot name="consent" />
+  {layout === 'grid' && (
+    <div class="mt-6 flex flex-wrap items-center gap-4">
+      <button type="submit" class="btn btn-primary btn-lg">{labels.submit}</button>
+      <slot name="after-submit" />
+    </div>
+  )}
+  <p data-hs-status hidden role="status" aria-live="polite"></p>
+</form>
+<script>
+  import { hwioFormsRuntime } from '@hubpav/hwio-web-runtime/forms';
+  hwioFormsRuntime();
+</script>

package/src/components/HWioIcon.astro

@@ -0,0 +1,44 @@
+---
+/** Curated inline SVG icons (Heroicons outline paths, MIT; brand social marks). No icon library dependency. */
+interface Props {
+  name: keyof typeof STROKE | keyof typeof FILL;
+  class?: string;
+  size?: 'sm' | 'md' | 'lg';
+  label?: string;
+}
+const STROKE = {
+  'arrow-right': 'M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3',
+  'arrow-up-right': 'm4.5 19.5 15-15m0 0H8.25m11.25 0v11.25',
+  external: 'M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25',
+  'chevron-down': 'm19.5 8.25-7.5 7.5-7.5-7.5',
+  'chevron-left': 'M15.75 19.5 8.25 12l7.5-7.5',
+  'chevron-right': 'm8.25 4.5 7.5 7.5-7.5 7.5',
+  check: 'm4.5 12.75 6 6 9-13.5',
+  close: 'M6 18 18 6M6 6l12 12',
+  menu: 'M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5',
+  sun: 'M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z',
+  moon: 'M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z',
+  globe: 'M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418',
+  bag: 'M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 9.75h12.974c.576 0 1.059.435 1.119 1.007Z',
+  phone: 'M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z',
+  mail: 'M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75',
+  download: 'M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3',
+} as const;
+const FILL = {
+  linkedin: 'M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77Z',
+  x: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
+  instagram: 'M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3Z',
+  youtube: 'M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73Z',
+  github: 'M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z',
+  forum: 'M12 3C6.5 3 2 6.58 2 11a7.218 7.218 0 0 0 2.75 5.5c0 .6-.42 2.17-2.75 4.5 2.37-.11 4.64-1 6.47-2.5H12c5.5 0 10-3.58 10-8s-4.5-8-10-8Z',
+} as const;
+const SIZE = { sm: 'size-4', md: 'size-5', lg: 'size-6' } as const;
+const { name, class: className = '', size = 'md', label } = Astro.props;
+const stroke = (STROKE as Record<string, string>)[name];
+const fill = (FILL as Record<string, string>)[name];
+---
+{stroke ? (
+  <svg class:list={[SIZE[size], className]} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden={label ? undefined : 'true'} role={label ? 'img' : undefined} aria-label={label}><path d={stroke} /></svg>
+) : (
+  <svg class:list={[SIZE[size], className]} viewBox="0 0 24 24" fill="currentColor" aria-hidden={label ? undefined : 'true'} role={label ? 'img' : undefined} aria-label={label}><path d={fill} /></svg>
+)}

package/src/components/HWioLanguageSwitcher.astro

@@ -0,0 +1,27 @@
+---
+import HWioIcon from './HWioIcon.astro';
+interface Item { code: string; label: string; href: string; current?: boolean }
+interface Props { items: Item[]; label: string; variant?: 'pills' | 'dropdown'; class?: string }
+const { items, label, variant = 'dropdown', class: className = '' } = Astro.props;
+const current = items.find((i) => i.current);
+---
+{variant === 'pills' ? (
+  <nav aria-label={label} class:list={['join', className]}>
+    {items.map((i) => (
+      <a href={i.href} hreflang={i.code} lang={i.code} class:list={['btn btn-sm join-item', i.current ? 'btn-primary' : 'btn-ghost']} aria-current={i.current ? 'page' : undefined}>{i.label}</a>
+    ))}
+  </nav>
+) : (
+  <details class:list={['dropdown dropdown-end', className]}>
+    <summary class="btn btn-ghost btn-sm gap-1" aria-label={label}>
+      <HWioIcon name="globe" size="sm" />
+      <span class="uppercase">{current?.code ?? items[0]?.code}</span>
+      <HWioIcon name="chevron-down" size="sm" />
+    </summary>
+    <ul class="menu dropdown-content bg-base-100 rounded-box z-50 mt-2 w-44 p-2 shadow-lg border border-base-300" aria-label={label}>
+      {items.map((i) => (
+        <li><a href={i.href} hreflang={i.code} lang={i.code} class:list={[i.current ? 'menu-active' : '']} aria-current={i.current ? 'page' : undefined}>{i.label}</a></li>
+      ))}
+    </ul>
+  </details>
+)}

package/src/components/HWioLogoStrip.astro

@@ -0,0 +1,29 @@
+---
+/** Customer/partner logos as a static row or an infinite marquee (paused on hover, static under reduced motion). */
+import type { HWioTone } from '../types';
+interface Logo { src: string; alt: string; href?: string; width: number; height: number; class?: string }
+interface Props { id?: string; logos: Logo[]; label?: string; marquee?: boolean; grey?: boolean; tone?: HWioTone; class?: string }
+const { id, logos, label, marquee = true, grey = true, tone = 'base', class: className = '' } = Astro.props;
+const TONE = { base: 'bg-base-100', alt: 'bg-base-200', neutral: 'bg-neutral text-neutral-content' } as const;
+const FADE = { base: 'from-base-100', alt: 'from-base-200', neutral: 'from-neutral' } as const;
+const groups = marquee ? [0, 1, 2, 3] : [0];
+---
+<section id={id} class:list={['overflow-hidden border-y border-base-300 py-10', TONE[tone], className]}>
+  {label && <div class="container"><p class="mb-8 text-center text-sm font-semibold opacity-70">{label}</p></div>}
+  <div class="relative">
+    {marquee && <div class:list={['pointer-events-none absolute inset-y-0 left-0 z-10 w-16 bg-gradient-to-r to-transparent md:w-32', FADE[tone]]}></div>}
+    {marquee && <div class:list={['pointer-events-none absolute inset-y-0 right-0 z-10 w-16 bg-gradient-to-l to-transparent md:w-32', FADE[tone]]}></div>}
+    <div class:list={[marquee ? 'hwio-marquee-track flex' : 'container flex flex-wrap items-center justify-center gap-x-12 gap-y-6']} role="group" aria-label={label}>
+      {groups.map((g) => (
+        <div class="flex shrink-0 items-center" aria-hidden={g > 0 ? 'true' : undefined}>
+          {logos.map((logo) => {
+            const img = <img src={logo.src} alt={logo.alt} width={logo.width} height={logo.height} loading="lazy" decoding="async" class:list={['h-7 w-auto transition-transform duration-300 hover:scale-105', grey ? 'hwio-logo-grey' : '', logo.class]} />;
+            return logo.href
+              ? <a href={logo.href} target="_blank" rel="noopener noreferrer" class="mx-8" tabindex={g > 0 ? -1 : undefined}>{img}</a>
+              : <span class="mx-8">{img}</span>;
+          })}
+        </div>
+      ))}
+    </div>
+  </div>
+</section>

package/src/components/HWioNotFound.astro

@@ -0,0 +1,12 @@
+---
+import type { HWioCta } from '../types';
+import HWioButton from './HWioButton.astro';
+interface Props { code?: string; title: string; text?: string; cta: HWioCta }
+const { code = '404', title, text, cta } = Astro.props;
+---
+<section class="container flex min-h-[60vh] flex-col items-center justify-center py-24 text-center">
+  <p class="hwio-eyebrow mb-4">{code}</p>
+  <h1>{title}</h1>
+  {text && <p class="hwio-lead mt-4 max-w-xl">{text}</p>}
+  <div class="mt-8"><HWioButton href={cta.href} variant="primary" arrow track={cta.track}>{cta.label}</HWioButton></div>
+</section>

package/src/components/HWioPricingTiers.astro

@@ -0,0 +1,28 @@
+---
+import type { HWioCta } from '../types';
+import HWioButton from './HWioButton.astro';
+import HWioIcon from './HWioIcon.astro';
+interface Tier { name: string; price?: string; description?: string; features: string[]; cta?: HWioCta; featured?: boolean; badge?: string }
+interface Props { tiers: Tier[]; class?: string }
+const { tiers, class: className = '' } = Astro.props;
+const COLS = { 1: 'grid gap-6', 2: 'grid gap-6 md:grid-cols-2', 3: 'grid gap-6 md:grid-cols-3', 4: 'grid gap-6 md:grid-cols-2 lg:grid-cols-4' } as const;
+const cols = (Math.min(Math.max(tiers.length, 1), 4) as 1 | 2 | 3 | 4);
+---
+<div class:list={[COLS[cols], className]}>
+  {tiers.map((tier) => (
+    <article class:list={['card card-border bg-base-100 h-full', tier.featured ? 'border-primary shadow-lg' : '']}>
+      <div class="card-body">
+        <div class="flex items-start justify-between gap-2">
+          <h3 class="card-title text-[1.375rem]">{tier.name}</h3>
+          {tier.badge && <span class="badge badge-primary">{tier.badge}</span>}
+        </div>
+        {tier.price && <p class="text-3xl font-bold">{tier.price}</p>}
+        {tier.description && <p class="opacity-80">{tier.description}</p>}
+        <ul class="my-4 space-y-2 text-sm">
+          {tier.features.map((f) => <li class="flex items-start gap-2"><HWioIcon name="check" size="sm" class="mt-0.5 shrink-0 text-accent" /><span>{f}</span></li>)}
+        </ul>
+        {tier.cta && <div class="card-actions mt-auto"><HWioButton href={tier.cta.href} external={tier.cta.external} variant={tier.featured ? 'primary' : 'secondary'} class="w-full" track={tier.cta.track}>{tier.cta.label}</HWioButton></div>}
+      </div>
+    </article>
+  ))}
+</div>

package/src/components/HWioProcessSteps.astro

@@ -0,0 +1,17 @@
+---
+/** Numbered process steps. Order carries meaning here, so the numbers are content, not decoration. */
+interface Props { items: { title: string; text: string }[]; orientation?: 'horizontal' | 'vertical'; class?: string }
+const { items, orientation = 'horizontal', class: className = '' } = Astro.props;
+const LAYOUT = { horizontal: 'grid gap-8 md:grid-cols-2 lg:grid-cols-4', vertical: 'grid gap-8' } as const;
+---
+<ol class:list={[LAYOUT[orientation], className]} data-hwio-steps>
+  {items.map((step, i) => (
+    <li class="flex gap-4">
+      <span class="badge badge-primary badge-lg shrink-0 font-semibold" aria-hidden="true">{i + 1}</span>
+      <div>
+        <h3 class="text-lg font-semibold"><span class="sr-only">{i + 1}. </span>{step.title}</h3>
+        <p class="mt-1 opacity-80">{step.text}</p>
+      </div>
+    </li>
+  ))}
+</ol>

package/src/components/HWioSection.astro

@@ -0,0 +1,10 @@
+---
+import type { HWioTone } from '../types';
+interface Props { id?: string; tone?: HWioTone; spacing?: 'normal' | 'compact' | 'none'; container?: boolean; as?: 'section' | 'div' | 'article'; reveal?: boolean; class?: string; [key: string]: unknown }
+const TONE = { base: 'bg-base-100 text-base-content hwio-tone-base', alt: 'bg-base-200 text-base-content hwio-tone-alt', neutral: 'bg-neutral text-neutral-content hwio-tone-neutral' } as const;
+const SPACING = { normal: 'hwio-section', compact: 'hwio-section-compact', none: '' } as const;
+const { id, tone = 'base', spacing = 'normal', container = true, as: Tag = 'section', reveal = false, class: className = '', ...rest } = Astro.props;
+---
+<Tag id={id} class:list={[TONE[tone], SPACING[spacing], className]} data-hwio-reveal={reveal ? 'true' : undefined} {...rest}>
+  {container ? <div class="container"><slot /></div> : <slot />}
+</Tag>

package/src/components/HWioSectionHeader.astro

@@ -0,0 +1,24 @@
+---
+/** Kicker + heading + lead. `layout="split"` puts the lead beside the heading (direction A's section opener). */
+interface Props { eyebrow?: string; title: string; lead?: string; align?: 'left' | 'center'; layout?: 'stack' | 'split'; level?: 1 | 2 | 3; class?: string }
+const ALIGN = { left: 'text-left', center: 'mx-auto text-center' } as const;
+const { eyebrow, title, lead, align = 'center', layout = 'stack', level = 2, class: className = '' } = Astro.props;
+const Heading = `h${level}` as 'h1' | 'h2' | 'h3';
+---
+{layout === 'split' ? (
+  <div class:list={['grid gap-8 lg:grid-cols-[5fr_7fr] lg:items-end', className]}>
+    <div>
+      {eyebrow && <p class="hwio-kicker mb-4">{eyebrow}</p>}
+      <Heading><slot name="title">{title}</slot></Heading>
+    </div>
+    {lead && <p class="hwio-lead lg:max-w-[36rem]">{lead}</p>}
+    <slot />
+  </div>
+) : (
+  <div class:list={['max-w-3xl', ALIGN[align], className]}>
+    {eyebrow && <p class="hwio-kicker mb-4">{eyebrow}</p>}
+    <Heading><slot name="title">{title}</slot></Heading>
+    {lead && <p class="hwio-lead mt-4">{lead}</p>}
+    <slot />
+  </div>
+)}

package/src/components/HWioSeoHead.astro

@@ -0,0 +1,83 @@
+---
+/**
+ * Everything in <head> for a site page. Sites keep a thin BaseLayout that renders
+ * <html {...hwioHtmlAttrs(...)}><head><HWioSeoHead …/></head><body><HWioShell …/></body></html>.
+ * Copy-free: title, description, alternates, JSON-LD and the OG image all come from the site.
+ */
+import { consentDefaults, themeBootstrap } from '@hubpav/hwio-web-runtime/inline';
+import type { HWioAlternate } from '../types';
+import HWioFontGate from './HWioFontGate.astro';
+
+interface Props {
+  siteName: string;
+  siteUrl: string;
+  title: string;
+  /** Appended as " | <siteName>" unless the title already contains it. */
+  suffix?: boolean;
+  description: string;
+  canonical: string;
+  locale: string;
+  ogLocale?: string;
+  alternates?: HWioAlternate[];
+  ogImage: { url: string; width?: number; height?: number; alt?: string };
+  pageType?: 'website' | 'article' | 'product' | 'profile';
+  article?: { publishedTime?: string; modifiedTime?: string; authors?: string[]; section?: string; tags?: string[] };
+  noindex?: boolean;
+  jsonLd?: object[];
+  preloadImage?: string;
+  twitterSite?: string;
+  favicons?: { svg?: string; png32?: string; apple?: string };
+  /** Font files to preload and gate on (null disables the gate). */
+  fonts?: string[] | null;
+  /** Emit Consent Mode v2 denied defaults (sites with GTM). */
+  consentMode?: boolean;
+  themeColor?: string;
+}
+const {
+  siteName, siteUrl, title, suffix = true, description, canonical, locale, ogLocale, alternates = [], ogImage,
+  pageType = 'website', article, noindex = false, jsonLd = [], preloadImage, twitterSite,
+  favicons = { svg: '/favicon.svg', png32: '/favicon-32x32.png', apple: '/apple-touch-icon.png' },
+  fonts = null, consentMode = false, themeColor,
+} = Astro.props;
+const fullTitle = suffix && !title.includes(siteName) ? `${title} | ${siteName}` : title;
+const abs = (u: string) => (u.startsWith('http') ? u : `${siteUrl}${u}`);
+---
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+{fonts && <HWioFontGate files={fonts} />}
+<script is:inline set:html={themeBootstrap.code} />
+{consentMode && <script is:inline set:html={consentDefaults.code} />}
+<meta name="generator" content={Astro.generator} />
+<title>{fullTitle}</title>
+<meta name="description" content={description} />
+<link rel="canonical" href={canonical} />
+{noindex && <meta name="robots" content="noindex, nofollow" />}
+{themeColor && <meta name="theme-color" content={themeColor} />}
+{favicons.svg && <link rel="icon" type="image/svg+xml" href={favicons.svg} />}
+{favicons.png32 && <link rel="icon" type="image/png" sizes="32x32" href={favicons.png32} />}
+{favicons.apple && <link rel="apple-touch-icon" sizes="180x180" href={favicons.apple} />}
+{!noindex && alternates.map((a) => <link rel="alternate" hreflang={a.lang} href={a.href} />)}
+<meta property="og:type" content={pageType} />
+<meta property="og:url" content={canonical} />
+<meta property="og:title" content={fullTitle} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={abs(ogImage.url)} />
+{ogImage.width && <meta property="og:image:width" content={String(ogImage.width)} />}
+{ogImage.height && <meta property="og:image:height" content={String(ogImage.height)} />}
+<meta property="og:image:alt" content={ogImage.alt ?? title} />
+<meta property="og:site_name" content={siteName} />
+{ogLocale && <meta property="og:locale" content={ogLocale} />}
+{pageType === 'article' && article?.publishedTime && <meta property="article:published_time" content={article.publishedTime} />}
+{pageType === 'article' && article?.modifiedTime && <meta property="article:modified_time" content={article.modifiedTime} />}
+{pageType === 'article' && article?.section && <meta property="article:section" content={article.section} />}
+{pageType === 'article' && article?.authors?.map((a) => <meta property="article:author" content={a} />)}
+{pageType === 'article' && article?.tags?.map((t) => <meta property="article:tag" content={t} />)}
+<meta name="twitter:card" content="summary_large_image" />
+{twitterSite && <meta name="twitter:site" content={twitterSite} />}
+<meta name="twitter:title" content={fullTitle} />
+<meta name="twitter:description" content={description} />
+<meta name="twitter:image" content={abs(ogImage.url)} />
+<meta name="twitter:image:alt" content={ogImage.alt ?? title} />
+{preloadImage && <link rel="preload" href={preloadImage} as="image" fetchpriority="high" />}
+{jsonLd.map((ld) => <script is:inline type="application/ld+json" set:html={JSON.stringify(ld)} />)}
+<slot />

package/src/components/HWioShell.astro

@@ -0,0 +1,20 @@
+---
+/** Body skeleton: skip link, header, optional breadcrumb, <main id="main-content">, footer, consent. Also mounts CTA tracking. */
+import HWioSkipLink from './HWioSkipLink.astro';
+interface Props { skipLabel: string; class?: string }
+const { skipLabel, class: className = '' } = Astro.props;
+---
+<div class:list={['min-h-screen flex flex-col bg-base-100 text-base-content', className]}>
+  <HWioSkipLink label={skipLabel} />
+  <slot name="header" />
+  <slot name="breadcrumb" />
+  <main id="main-content" class="flex-1">
+    <slot />
+  </main>
+  <slot name="footer" />
+  <slot name="consent" />
+</div>
+<script>
+  import { hwioTrackRuntime } from '@hubpav/hwio-web-runtime/track';
+  hwioTrackRuntime();
+</script>

package/src/components/HWioSkipLink.astro

@@ -0,0 +1,5 @@
+---
+interface Props { label: string; target?: string }
+const { label, target = '#main-content' } = Astro.props;
+---
+<a href={target} class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] btn btn-primary btn-sm">{label}</a>

package/src/components/HWioStatsBand.astro

@@ -0,0 +1,27 @@
+---
+/** Proof numbers in a hairline band with dividers (direction A); counts up on first view unless `animate` is false. */
+interface Props { id?: string; items: { value: string | number; suffix?: string; label: string; description?: string }[]; animate?: boolean; class?: string }
+const { id, items, animate = true, class: className = '' } = Astro.props;
+const COLS = { 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3', 4: 'sm:grid-cols-2 lg:grid-cols-4' } as const;
+const cols = COLS[(Math.min(Math.max(items.length, 2), 4) as 2 | 3 | 4)];
+---
+<section id={id} class:list={['border-y border-base-300 bg-base-100 text-base-content', className]}>
+  <div class:list={['container grid py-9', cols]}>
+    {items.map((s, i) => {
+      const numeric = typeof s.value === 'number';
+      return (
+        <div class:list={['px-8 py-2', i > 0 ? 'sm:border-l sm:border-base-300' : '']}>
+          <div class="mb-2.5 text-[2.5rem] font-bold leading-none tracking-[-0.03em]">
+            <span class="hwio-stat-value" data-hwio-counter={animate && numeric ? 'true' : undefined} data-target={numeric ? String(s.value) : undefined} data-suffix={s.suffix ?? ''}>{s.value}{s.suffix ?? ''}</span>
+          </div>
+          <div class="text-[15px] font-semibold">{s.label}</div>
+          {s.description && <div class="hwio-muted mt-0.5 text-sm">{s.description}</div>}
+        </div>
+      );
+    })}
+  </div>
+</section>
+<script>
+  import { hwioCounterRuntime } from '@hubpav/hwio-web-runtime/counter';
+  hwioCounterRuntime();
+</script>

package/src/components/HWioThemeToggle.astro

@@ -0,0 +1,22 @@
+---
+import HWioIcon from './HWioIcon.astro';
+interface Props { label: string; class?: string }
+const { label, class: className = '' } = Astro.props;
+---
+<button type="button" data-hwio-theme-toggle class:list={['btn btn-ghost btn-square btn-sm hwio-theme-toggle', className]} aria-label={label} title={label} aria-pressed="false">
+  <HWioIcon name="moon" class="hwio-theme-toggle__moon" />
+  <HWioIcon name="sun" class="hwio-theme-toggle__sun" />
+</button>
+<style>
+  .hwio-theme-toggle :global(.hwio-theme-toggle__sun) { display: none; }
+  :global([data-theme$='-dark']) .hwio-theme-toggle :global(.hwio-theme-toggle__sun) { display: block; }
+  :global([data-theme$='-dark']) .hwio-theme-toggle :global(.hwio-theme-toggle__moon) { display: none; }
+  @media (prefers-color-scheme: dark) {
+    :global(html:not([data-theme])) .hwio-theme-toggle :global(.hwio-theme-toggle__sun) { display: block; }
+    :global(html:not([data-theme])) .hwio-theme-toggle :global(.hwio-theme-toggle__moon) { display: none; }
+  }
+</style>
+<script>
+  import { hwioThemeRuntime } from '@hubpav/hwio-web-runtime/theme';
+  hwioThemeRuntime();
+</script>

package/src/components/HWioTurnstile.astro

@@ -0,0 +1,10 @@
+---
+/** Lazy explicit Cloudflare Turnstile widget; place inside a <form>. The site key is public by design. */
+interface Props { siteKey: string }
+const { siteKey } = Astro.props;
+---
+<div class="cf-turnstile" data-sitekey={siteKey}></div>
+<script>
+  import { hwioTurnstileRuntime } from '@hubpav/hwio-web-runtime/turnstile';
+  hwioTurnstileRuntime();
+</script>

package/src/html.ts

@@ -0,0 +1,31 @@
+/**
+ * Attributes for a site's <html> element. The runtime bootstraps (theme, font gate, consent)
+ * read these instead of being templated per site, which keeps their CSP hashes stable.
+ *   <html {...hwioHtmlAttrs({ lang, consentVersion, themes: { light: 'hwio', dark: 'hwio-dark' }, font: { family: 'Inter', sample, sampleExt } })}>
+ */
+export interface HWioHtmlOptions {
+  lang: string;
+  consentVersion: string;
+  themes: { light: string; dark?: string };
+  /** Pin data-theme on <html> (single-theme sites such as enerooo, or a fixed catalog page). */
+  pinTheme?: boolean;
+  font?: { family: string; sample?: string; sampleExt?: string } | null;
+  class?: string;
+}
+
+export function hwioHtmlAttrs(o: HWioHtmlOptions): Record<string, string> {
+  const attrs: Record<string, string> = {
+    lang: o.lang,
+    class: [o.font ? 'fonts-loading' : '', o.class ?? ''].filter(Boolean).join(' '),
+    'data-hwio-consent-version': o.consentVersion,
+    'data-hwio-theme-light': o.themes.light,
+  };
+  if (o.themes.dark) attrs['data-hwio-theme-dark'] = o.themes.dark;
+  if (o.pinTheme || !o.themes.dark) attrs['data-theme'] = o.themes.light;
+  if (o.font) {
+    attrs['data-hwio-font-family'] = o.font.family;
+    if (o.font.sample) attrs['data-hwio-font-sample'] = o.font.sample;
+    if (o.font.sampleExt) attrs['data-hwio-font-sample-ext'] = o.font.sampleExt;
+  }
+  return attrs;
+}

package/src/integration.mjs

@@ -0,0 +1,61 @@
+// Astro integration for sites on the design system.
+//   import { hwioUi } from '@hubpav/hwio-ui/integration';
+//   integrations: [hwioUi({ headers: { gtm: true, turnstile: true, submitEndpoint: 'https://submit.hardwario.com', earlyHints: ['/fonts/inter-latin.woff2', '/fonts/inter-latin-ext.woff2'] } })]
+// It (1) forces component scripts to stay external (script-src 'self' covers them), (2) serves the
+// brand fonts and logos in dev and copies them into the build output, (3) writes `_headers`
+// from one options object so security headers have a single source of truth.
+import { copyFileSync, mkdirSync, readdirSync, writeFileSync, existsSync, readFileSync } from 'node:fs';
+import { join, dirname, extname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+import { hwioRenderHeadersFile } from '@hubpav/hwio-web-worker/headers';
+
+const require = createRequire(import.meta.url);
+
+function brandDir() {
+  return dirname(require.resolve('@hubpav/hwio-brand/package.json'));
+}
+
+const MIME = { '.woff2': 'font/woff2', '.svg': 'image/svg+xml', '.png': 'image/png', '.ico': 'image/x-icon' };
+
+/**
+ * @param {{ headers?: import('@hubpav/hwio-web-worker/headers').HWioHeadersOptions | false, assets?: boolean }} [options]
+ * @returns {import('astro').AstroIntegration}
+ */
+export function hwioUi(options = {}) {
+  const { headers = false, assets = true } = options;
+  const brand = brandDir();
+  const fontsDir = join(brand, 'dist/fonts');
+  const logosDir = join(brand, 'logos');
+  return {
+    name: '@hubpav/hwio-ui',
+    hooks: {
+      'astro:config:setup': ({ updateConfig }) => {
+        updateConfig({ vite: { build: { assetsInlineLimit: 0 } } });
+      },
+      'astro:server:setup': ({ server }) => {
+        if (!assets) return;
+        server.middlewares.use((req, res, next) => {
+          const url = req.url ?? '';
+          const map = url.startsWith('/fonts/') ? [fontsDir, url.slice('/fonts/'.length)] : url.startsWith('/brand/') ? [logosDir, url.slice('/brand/'.length)] : null;
+          if (!map) return next();
+          const file = join(map[0], map[1].split('?')[0]);
+          if (!file.startsWith(map[0]) || !existsSync(file)) return next();
+          res.setHeader('Content-Type', MIME[extname(file)] ?? 'application/octet-stream');
+          res.end(readFileSync(file));
+        });
+      },
+      'astro:build:done': ({ dir }) => {
+        const out = fileURLToPath(dir);
+        if (assets) {
+          for (const [src, dest] of [[fontsDir, 'fonts'], [logosDir, 'brand']]) {
+            if (!existsSync(src)) continue;
+            mkdirSync(join(out, dest), { recursive: true });
+            for (const f of readdirSync(src)) if (extname(f) !== '.css') copyFileSync(join(src, f), join(out, dest, f));
+          }
+        }
+        if (headers) writeFileSync(join(out, '_headers'), hwioRenderHeadersFile(headers));
+      },
+    },
+  };
+}

package/src/schemas.ts

@@ -0,0 +1,51 @@
+// Zod fragments for site content collections (Astro's bundled zod), so rebuilt micro-sites
+// validate the YAML that feeds the composed components.
+import { z } from 'astro/zod';
+
+export const hwioCtaSchema = z.object({
+  label: z.string(),
+  href: z.string(),
+  external: z.boolean().optional(),
+  track: z.object({ id: z.string(), location: z.string().optional() }).optional(),
+});
+
+export const hwioStatSchema = z.object({
+  value: z.number(),
+  suffix: z.string().optional(),
+  label: z.string(),
+});
+
+export const hwioStepSchema = z.object({
+  title: z.string(),
+  text: z.string(),
+});
+
+export const hwioFaqItemSchema = z.object({
+  q: z.string(),
+  a: z.string(),
+});
+
+export const hwioFeatureSchema = z.object({
+  icon: z.string().optional(),
+  title: z.string(),
+  text: z.string(),
+  href: z.string().optional(),
+});
+
+export const hwioTierSchema = z.object({
+  name: z.string(),
+  price: z.string().optional(),
+  description: z.string().optional(),
+  features: z.array(z.string()),
+  cta: hwioCtaSchema.optional(),
+  featured: z.boolean().optional(),
+  badge: z.string().optional(),
+});
+
+export const hwioLogoSchema = z.object({
+  src: z.string(),
+  alt: z.string(),
+  href: z.string().optional(),
+  width: z.number(),
+  height: z.number(),
+});

package/src/styles/prose.css

@@ -0,0 +1,24 @@
+/* Markdown/long-form typography on semantic colours. Import next to styles.css when a site renders prose. */
+@layer components {
+  .hwio-prose { line-height: 1.7; color: var(--color-base-content); }
+  .hwio-prose p { margin-bottom: calc(var(--spacing) * 4); }
+  .hwio-prose h2 { margin-top: calc(var(--spacing) * 10); margin-bottom: calc(var(--spacing) * 4); }
+  .hwio-prose h3 { margin-top: calc(var(--spacing) * 8); margin-bottom: calc(var(--spacing) * 3); }
+  .hwio-prose h4 { margin-top: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 2); }
+  .hwio-prose ul { list-style: disc; padding-left: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 4); }
+  .hwio-prose ol { list-style: decimal; padding-left: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 4); }
+  .hwio-prose li { padding-left: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 2); }
+  .hwio-prose a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 0.2em; }
+  .hwio-prose a:hover { color: var(--color-primary); }
+  .hwio-prose strong { font-weight: 600; }
+  .hwio-prose blockquote { border-left: 4px solid var(--color-secondary); padding-left: calc(var(--spacing) * 4); font-style: italic; margin-block: calc(var(--spacing) * 6); }
+  .hwio-prose code { background: var(--color-base-200); padding: 0.125em 0.375em; border-radius: var(--radius-field); font-size: 0.9em; }
+  .hwio-prose pre { background: var(--color-neutral); color: var(--color-neutral-content); padding: calc(var(--spacing) * 4); border-radius: var(--radius-box); overflow-x: auto; margin-block: calc(var(--spacing) * 6); }
+  .hwio-prose pre code { background: transparent; padding: 0; color: inherit; }
+  .hwio-prose hr { border-color: var(--color-base-300); margin-block: calc(var(--spacing) * 8); }
+  .hwio-prose img { border-radius: var(--radius-box); margin-block: calc(var(--spacing) * 6); margin-inline: auto; max-width: 100%; }
+  .hwio-prose table { width: 100%; border-collapse: collapse; margin-block: calc(var(--spacing) * 6); }
+  .hwio-prose th { background: var(--color-base-200); border: 1px solid var(--color-base-300); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); text-align: left; font-weight: 600; }
+  .hwio-prose td { border: 1px solid var(--color-base-300); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); }
+  .hwio-prose-lg { font-size: var(--text-lg); }
+}