@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/marketing/Hero.svelte

@@ -0,0 +1,206 @@
+<!--
+  @file widgets/marketing/Hero.svelte
+  @description Bespoke MARKETING hero — the visual centerpiece of the landing
+    pack (type `marketing-hero`). Distinct from the borrowed layout/Hero (plain
+    centered headline): this is an ASYMMETRIC editorial hero. Copy block (eyebrow
+    pill, large tight-tracked headline, subtitle, primary + optional secondary
+    CTA) sits on the left; a self-contained, hand-built CSS "canvas" panel sits
+    on the right (layered dot-grid texture + a soft drifting radial/conic glow +
+    a floating spec chip). Collapses to a single stacked column below lg.
+
+  STATIC-SAFETY (non-negotiable — renders prerendered, JS OFF):
+    - No onMount, no JS engine, no client-only primitives. The full resting state
+      is baked into markup.
+    - The only motion is a slow CSS @keyframes glow drift on the visual panel;
+      it is purely declarative (runs without hydration, like premium/Aurora) and
+      is disabled under prefers-reduced-motion. With JS off the panel still reads
+      as a finished, composed visual — animation is enhancement, not structure.
+    - All colors are token-driven (bg-primary / --primary / border / muted etc.)
+      so the host theme controls the palette; no hardcoded "AI" accent.
+
+  CONTRACT (props the pocketpaw assembler wires):
+    eyebrow?, title (required), subtitle?, cta?, ctaHref?,
+    secondaryCta?, secondaryCtaHref?,
+    visual? = 'grid' | 'glow' | 'plain' (default 'grid'),
+    align? = 'left' | 'center' (default 'left').
+  @created 2026-06-09 — ITEM 4: bespoke marketing Hero.
+-->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import { cn } from '../../utils.js';
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Small label above the headline (rendered as a bordered pill). */
+    eyebrow?: string;
+    /** The headline. Required. */
+    title: string;
+    /** Supporting line under the headline. */
+    subtitle?: string;
+    /** Primary CTA label. Rendered only when set. */
+    cta?: string;
+    /** Primary CTA destination. */
+    ctaHref?: string;
+    /** Optional secondary (ghost) CTA label. */
+    secondaryCta?: string;
+    /** Secondary CTA destination. */
+    secondaryCtaHref?: string;
+    /**
+     * Visual treatment of the right-hand panel:
+     *  - 'grid'  : dot-grid texture + drifting glow + floating spec chip (default)
+     *  - 'glow'  : drifting glow only (no grid, no chip) — softer
+     *  - 'plain' : single-column, no visual panel (copy centered)
+     */
+    visual?: 'grid' | 'glow' | 'plain';
+    /** Copy alignment. 'left' (default) or 'center'. Forced center when visual='plain'. */
+    align?: 'left' | 'center';
+  }
+  let {
+    id, class: className, style,
+    eyebrow, title, subtitle,
+    cta, ctaHref = '#',
+    secondaryCta, secondaryCtaHref = '#',
+    visual = 'grid', align = 'left',
+  }: Props = $props();
+
+  const styleString = $derived(
+    style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined
+  );
+
+  // 'plain' has no visual panel, so the copy always centers.
+  const centered = $derived(align === 'center' || visual === 'plain');
+  const split = $derived(visual !== 'plain');
+</script>
+
+<section
+  {id}
+  class={cn(
+    'ripple-mhero relative w-full overflow-hidden rounded-2xl border border-border bg-card text-card-foreground',
+    'px-6 py-14 md:px-10 md:py-20',
+    className
+  )}
+  style={styleString}
+>
+  <div
+    class={cn(
+      'relative z-10 mx-auto grid w-full max-w-6xl items-center gap-10',
+      split && 'lg:grid-cols-2 lg:gap-16'
+    )}
+  >
+    <!-- Copy block -->
+    <div class={cn('flex flex-col gap-5', centered && 'items-center text-center')}>
+      {#if eyebrow}
+        <span
+          class="inline-flex w-fit items-center rounded-full border border-border bg-background/60 px-3 py-1 text-xs font-medium uppercase tracking-wider text-muted-foreground backdrop-blur"
+        >{eyebrow}</span>
+      {/if}
+      <h1
+        class={cn(
+          'text-4xl font-semibold leading-[1.05] tracking-tight md:text-5xl lg:text-6xl',
+          centered && 'max-w-3xl'
+        )}
+      >{title}</h1>
+      {#if subtitle}
+        <p
+          class={cn(
+            'text-base leading-relaxed text-muted-foreground md:text-lg',
+            centered ? 'max-w-xl' : 'max-w-md'
+          )}
+        >{subtitle}</p>
+      {/if}
+      {#if cta || secondaryCta}
+        <div class={cn('mt-2 flex flex-wrap gap-3', centered && 'justify-center')}>
+          {#if cta}
+            <a
+              href={safeUrl(ctaHref)}
+              class="inline-flex items-center rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-opacity hover:opacity-90"
+            >{cta}</a>
+          {/if}
+          {#if secondaryCta}
+            <a
+              href={safeUrl(secondaryCtaHref)}
+              class="inline-flex items-center rounded-md border border-border bg-background px-5 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-muted"
+            >{secondaryCta}</a>
+          {/if}
+        </div>
+      {/if}
+    </div>
+
+    <!-- Bespoke visual panel (omitted entirely when visual='plain') -->
+    {#if split}
+      <div
+        class={cn(
+          'ripple-mhero-panel relative aspect-[4/3] w-full overflow-hidden rounded-xl border border-border bg-background',
+          visual === 'grid' && 'ripple-mhero-grid'
+        )}
+        aria-hidden="true"
+      >
+        <!-- drifting glow (CSS keyframes; reduced-motion disables it) -->
+        <div class="ripple-mhero-glow pointer-events-none absolute inset-0"></div>
+        {#if visual === 'grid'}
+          <!-- floating spec chip — gives the panel a product/composed feel -->
+          <div
+            class="absolute bottom-5 left-5 right-5 rounded-lg border border-border bg-card/80 p-4 shadow-lg backdrop-blur"
+          >
+            <div class="flex items-center gap-2">
+              <span class="h-2 w-2 rounded-full bg-primary"></span>
+              <span class="h-2 w-16 rounded-full bg-foreground/70"></span>
+              <span class="ml-auto h-2 w-8 rounded-full bg-muted-foreground/40"></span>
+            </div>
+            <div class="mt-3 space-y-2">
+              <span class="block h-2 w-full rounded-full bg-muted-foreground/25"></span>
+              <span class="block h-2 w-4/5 rounded-full bg-muted-foreground/20"></span>
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</section>
+
+<style>
+  /* Dot-grid texture for the 'grid' visual — pure CSS background, baked in markup. */
+  .ripple-mhero-grid {
+    background-image: radial-gradient(
+      circle,
+      color-mix(in oklab, var(--foreground) 12%, transparent) 1px,
+      transparent 1px
+    );
+    background-size: 22px 22px;
+  }
+
+  /* Soft layered glow that slowly drifts. Declarative CSS animation: it runs
+     without JS (like premium/Aurora) and the resting frame is already a
+     finished gradient, so JS-off prerender looks complete. */
+  .ripple-mhero-glow {
+    background:
+      radial-gradient(60% 60% at 30% 25%, color-mix(in oklab, var(--primary) 45%, transparent) 0%, transparent 60%),
+      radial-gradient(50% 50% at 80% 70%, color-mix(in oklab, var(--primary) 28%, transparent) 0%, transparent 60%);
+    filter: blur(34px) saturate(1.15);
+    opacity: 0.55;
+    background-size: 180% 180%;
+    animation: ripple-mhero-drift 16s ease-in-out infinite alternate;
+  }
+  @keyframes ripple-mhero-drift {
+    from { background-position: 0% 50%, 100% 0%; }
+    to { background-position: 100% 0%, 0% 100%; }
+  }
+
+  /* A faint top-edge sheen on the whole hero for depth (tinted, not a glow). */
+  .ripple-mhero::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: linear-gradient(
+      180deg,
+      color-mix(in oklab, var(--foreground) 4%, transparent) 0%,
+      transparent 28%
+    );
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ripple-mhero-glow { animation: none; }
+  }
+</style>

package/dist/widgets/marketing/Hero.svelte.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    /** Small label above the headline (rendered as a bordered pill). */
+    eyebrow?: string;
+    /** The headline. Required. */
+    title: string;
+    /** Supporting line under the headline. */
+    subtitle?: string;
+    /** Primary CTA label. Rendered only when set. */
+    cta?: string;
+    /** Primary CTA destination. */
+    ctaHref?: string;
+    /** Optional secondary (ghost) CTA label. */
+    secondaryCta?: string;
+    /** Secondary CTA destination. */
+    secondaryCtaHref?: string;
+    /**
+     * Visual treatment of the right-hand panel:
+     *  - 'grid'  : dot-grid texture + drifting glow + floating spec chip (default)
+     *  - 'glow'  : drifting glow only (no grid, no chip) — softer
+     *  - 'plain' : single-column, no visual panel (copy centered)
+     */
+    visual?: 'grid' | 'glow' | 'plain';
+    /** Copy alignment. 'left' (default) or 'center'. Forced center when visual='plain'. */
+    align?: 'left' | 'center';
+}
+declare const Hero: import("svelte").Component<Props, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/widgets/marketing/LogoCloud.svelte

@@ -0,0 +1,30 @@
+<!--
+  @file widgets/marketing/LogoCloud.svelte
+  @description Row of client/partner logos with an optional heading. Grayscale
+    by default, color on hover. Layout + images.
+  @created 2026-05-30 — RFC 12 marketing widget pack.
+-->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import { cn } from '../../utils.js';
+  interface Logo { src: string; alt: string; href?: string; }
+  interface Props {
+    id?: string; class?: string; style?: Record<string, string>;
+    heading?: string; logos?: Logo[];
+  }
+  let { id, class: className, style, heading, logos = [] }: Props = $props();
+  const styleString = $derived(style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined);
+</script>
+
+<section {id} class={cn('w-full flex flex-col gap-6 items-center py-8', className)} style={styleString}>
+  {#if heading}<p class="text-xs uppercase tracking-wider text-muted-foreground">{heading}</p>{/if}
+  <div class="flex flex-wrap items-center justify-center gap-8 md:gap-12">
+    {#each logos as logo}
+      {#if logo.href}
+        <a href={safeUrl(logo.href)}><img src={safeUrl(logo.src, { kind: 'resource' })} alt={logo.alt} class="h-7 md:h-8 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition" /></a>
+      {:else}
+        <img src={safeUrl(logo.src, { kind: 'resource' })} alt={logo.alt} class="h-7 md:h-8 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition" />
+      {/if}
+    {/each}
+  </div>
+</section>

package/dist/widgets/marketing/LogoCloud.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Logo {
+    src: string;
+    alt: string;
+    href?: string;
+}
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    heading?: string;
+    logos?: Logo[];
+}
+declare const LogoCloud: import("svelte").Component<Props, {}, "">;
+type LogoCloud = ReturnType<typeof LogoCloud>;
+export default LogoCloud;

package/dist/widgets/marketing/Navbar.svelte

@@ -0,0 +1,46 @@
+<!--
+  @file widgets/marketing/Navbar.svelte
+  @description Marketing top nav: brand + links + optional CTA. Layout + text.
+    On a narrow card the links and CTA wrap under the brand instead of running
+    past the edge; a label never breaks inside itself. The body gate is
+    `hasChildren || children` with an optional `children?.()` call, so a
+    hand-written Svelte caller that passes children but no `hasChildren`
+    renders them.
+-->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface NavLink { label: string; href: string; }
+  interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    brand?: string;
+    links?: NavLink[];
+    /** Optional CTA label rendered as a button on the right. */
+    cta?: string;
+    /** href for the CTA. */
+    ctaHref?: string;
+    /** Stick to the top on scroll. Default false. */
+    sticky?: boolean;
+    children?: Snippet;
+    hasChildren?: boolean;
+  }
+  let { id, class: className, style, brand, links = [], cta, ctaHref = '#', sticky = false, children, hasChildren = false }: Props = $props();
+  const styleString = $derived(style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined);
+</script>
+
+<nav {id} class={cn('flex flex-wrap items-center justify-between gap-x-6 gap-y-3 px-6 py-4 w-full', sticky && 'sticky top-0 z-40 backdrop-blur bg-background/80 border-b border-border', className)} style={styleString}>
+  {#if brand}<span class="text-lg font-semibold tracking-tight">{brand}</span>{/if}
+  <div class="flex flex-wrap items-center gap-x-6 gap-y-2">
+    {#each links as link}
+      <a href={safeUrl(link.href)} class="text-sm whitespace-nowrap text-muted-foreground hover:text-foreground transition-colors">{link.label}</a>
+    {/each}
+    {#if cta}
+      <a href={safeUrl(ctaHref)} class="text-sm font-medium whitespace-nowrap rounded-md bg-primary text-primary-foreground px-4 py-2 hover:opacity-90 transition-opacity">{cta}</a>
+    {/if}
+    {#if hasChildren || children}{@render children?.()}{/if}
+  </div>
+</nav>

package/dist/widgets/marketing/Navbar.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+interface NavLink {
+    label: string;
+    href: string;
+}
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    brand?: string;
+    links?: NavLink[];
+    /** Optional CTA label rendered as a button on the right. */
+    cta?: string;
+    /** href for the CTA. */
+    ctaHref?: string;
+    /** Stick to the top on scroll. Default false. */
+    sticky?: boolean;
+    children?: Snippet;
+    hasChildren?: boolean;
+}
+declare const Navbar: import("svelte").Component<Props, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/widgets/marketing/Newsletter.svelte

@@ -0,0 +1,32 @@
+<!--
+  @file widgets/marketing/Newsletter.svelte
+  @description Email-capture band. Renders a <form>; on submit it preventDefaults
+    and calls the onsubmit prop with the entered email. NodeRenderer wires
+    onsubmit from node.on_submit (e.g. an emit / call_binding handler).
+  @created 2026-05-30 — RFC 12 marketing widget pack.
+-->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  interface Props {
+    id?: string; class?: string; style?: Record<string, string>;
+    heading?: string; subtext?: string; placeholder?: string; button?: string;
+    onsubmit?: (value: unknown) => void;
+  }
+  let { id, class: className, style, heading, subtext, placeholder = 'you@example.com', button = 'Subscribe', onsubmit }: Props = $props();
+  let email = $state('');
+  const styleString = $derived(style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined);
+
+  function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    onsubmit?.(email);
+  }
+</script>
+
+<section {id} class={cn('w-full flex flex-col gap-4 items-center text-center rounded-xl border border-border bg-card text-card-foreground p-8', className)} style={styleString}>
+  {#if heading}<h3 class="text-xl font-semibold tracking-tight">{heading}</h3>{/if}
+  {#if subtext}<p class="text-sm text-muted-foreground max-w-md">{subtext}</p>{/if}
+  <form class="flex w-full max-w-md gap-2" onsubmit={handleSubmit}>
+    <input type="email" required bind:value={email} {placeholder} class="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm" />
+    <button type="submit" class="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:opacity-90 transition-opacity">{button}</button>
+  </form>
+</section>

package/dist/widgets/marketing/Newsletter.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    heading?: string;
+    subtext?: string;
+    placeholder?: string;
+    button?: string;
+    onsubmit?: (value: unknown) => void;
+}
+declare const Newsletter: import("svelte").Component<Props, {}, "">;
+type Newsletter = ReturnType<typeof Newsletter>;
+export default Newsletter;

package/dist/widgets/marketing/Testimonial.svelte

@@ -0,0 +1,26 @@
+<!--
+  @file widgets/marketing/Testimonial.svelte
+  @description Single testimonial card: quote, author, role, optional avatar.
+  @created 2026-05-30 — RFC 12 marketing widget pack.
+-->
+<script lang="ts">
+  import { safeUrl } from '@ripple-ui/core';
+  import { cn } from '../../utils.js';
+  interface Props {
+    id?: string; class?: string; style?: Record<string, string>;
+    quote: string; author?: string; role?: string; avatar?: string;
+  }
+  let { id, class: className, style, quote, author, role, avatar }: Props = $props();
+  const styleString = $derived(style ? Object.entries(style).map(([k, v]) => `${k}:${v}`).join(';') : undefined);
+</script>
+
+<figure {id} class={cn('flex flex-col gap-4 rounded-xl border border-border bg-card text-card-foreground p-6', className)} style={styleString}>
+  <blockquote class="text-lg leading-relaxed">"{quote}"</blockquote>
+  <figcaption class="flex items-center gap-3">
+    {#if avatar}<img src={safeUrl(avatar, { kind: 'resource' })} alt={author ?? ''} class="h-10 w-10 rounded-full object-cover" />{/if}
+    <div class="flex flex-col">
+      {#if author}<span class="text-sm font-semibold">{author}</span>{/if}
+      {#if role}<span class="text-xs text-muted-foreground">{role}</span>{/if}
+    </div>
+  </figcaption>
+</figure>

package/dist/widgets/marketing/Testimonial.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    id?: string;
+    class?: string;
+    style?: Record<string, string>;
+    quote: string;
+    author?: string;
+    role?: string;
+    avatar?: string;
+}
+declare const Testimonial: import("svelte").Component<Props, {}, "">;
+type Testimonial = ReturnType<typeof Testimonial>;
+export default Testimonial;

package/dist/widgets/marketing/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Navbar } from './Navbar.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Cta } from './Cta.svelte';
+export { default as Testimonial } from './Testimonial.svelte';
+export { default as FeatureGrid } from './FeatureGrid.svelte';
+export { default as Newsletter } from './Newsletter.svelte';
+export { default as LogoCloud } from './LogoCloud.svelte';
+export { default as Faq } from './Faq.svelte';
+export { default as MarketingHero } from './Hero.svelte';

package/dist/widgets/marketing/index.js

@@ -0,0 +1,14 @@
+// @file widgets/marketing/index.ts — barrel for the marketing widget pack.
+// @created 2026-05-30 — RFC 12.
+// @change 2026-06-09 — added Faq (native <details>, type `faq`, ITEM 3) and
+//   MarketingHero (bespoke hero, type `marketing-hero`, ITEM 4). MarketingHero
+//   is exported under that name to avoid colliding with layout/Hero.
+export { default as Navbar } from './Navbar.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Cta } from './Cta.svelte';
+export { default as Testimonial } from './Testimonial.svelte';
+export { default as FeatureGrid } from './FeatureGrid.svelte';
+export { default as Newsletter } from './Newsletter.svelte';
+export { default as LogoCloud } from './LogoCloud.svelte';
+export { default as Faq } from './Faq.svelte';
+export { default as MarketingHero } from './Hero.svelte';