@olwiba/ui 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -64,7 +64,7 @@
   "devDependencies": {
     "@content-collections/mdx": "^0.2.2",
     "@olwiba/cn": "0.1.26",
-    "@olwiba/docs": "0.1.35",
+    "@olwiba/docs": "0.1.38",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",
     "@tanstack/react-router-devtools": "1.154.8",

package/src/app/UpdateBanner.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import * as React from 'react';
+import { RefreshCw, Sparkles } from 'lucide-react';
+import { Button, Card, cn } from '@olwiba/cn';
+
+export interface UpdateBannerProps {
+  /** Version baked into the running client bundle (e.g. a git short SHA embedded at build time). */
+  currentVersion: string;
+  /**
+   * Fetches the currently deployed version from the server. The host app wires
+   * its own endpoint — the component stays app-agnostic.
+   */
+  fetchVersion: () => Promise<{ version: string }>;
+  /** Poll interval in ms. */
+  intervalMs?: number;
+  /** Force the banner to show (demos/testing). */
+  forceShow?: boolean;
+  /** Called on refresh click; defaults to a full page reload. Use it to hook a celebration first. */
+  onRefresh?: () => void;
+  message?: React.ReactNode;
+  buttonLabel?: string;
+  className?: string;
+}
+
+export function UpdateBanner({
+  currentVersion,
+  fetchVersion,
+  intervalMs = 5 * 60 * 1000,
+  forceShow = false,
+  onRefresh,
+  message = (
+    <>
+      <span className="font-semibold">App update available!</span> Refresh to get the latest features
+      and improvements.
+    </>
+  ),
+  buttonLabel = 'Refresh now',
+  className,
+}: UpdateBannerProps) {
+  const [show, setShow] = React.useState(forceShow);
+  const [entered, setEntered] = React.useState(false);
+  const [refreshing, setRefreshing] = React.useState(false);
+
+  React.useEffect(() => {
+    if (forceShow) {
+      setShow(true);
+      return;
+    }
+    setShow(false);
+
+    let cancelled = false;
+
+    const check = async () => {
+      try {
+        const server = await fetchVersion();
+        if (!cancelled && server.version && server.version !== currentVersion) {
+          setShow(true);
+        }
+      } catch {
+        // Version checks are best-effort; stay quiet on failure.
+      }
+    };
+
+    void check();
+    const id = setInterval(check, intervalMs);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [currentVersion, fetchVersion, forceShow, intervalMs]);
+
+  // Two-frame mount so the enter transition actually plays.
+  React.useEffect(() => {
+    if (!show) {
+      setEntered(false);
+      return;
+    }
+    const id = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(id);
+  }, [show]);
+
+  const handleRefresh = () => {
+    setRefreshing(true);
+    setTimeout(() => {
+      if (onRefresh) {
+        onRefresh();
+        setRefreshing(false);
+        if (forceShow) setShow(false);
+      } else {
+        window.location.reload();
+      }
+    }, 400);
+  };
+
+  if (!show) return null;
+
+  return (
+    <div className="pointer-events-none fixed inset-x-0 top-4 z-50 flex justify-center px-4">
+      <div
+        className={cn(
+          'pointer-events-auto transition-all duration-500 ease-out',
+          entered ? 'translate-y-0 opacity-100' : '-translate-y-24 opacity-0',
+        )}
+      >
+        <Card
+          className={cn(
+            'max-w-3xl border-amber-300/60 bg-amber-50 dark:border-amber-700/60 dark:bg-amber-950',
+            className,
+          )}
+        >
+          <div className="flex items-center justify-between gap-6 p-4">
+            <div className="flex items-center gap-3">
+              <Sparkles className="size-5 shrink-0 text-amber-600 dark:text-amber-400" aria-hidden="true" />
+              <p className="text-sm text-amber-800 dark:text-amber-200">{message}</p>
+            </div>
+            <Button
+              onClick={handleRefresh}
+              disabled={refreshing}
+              size="sm"
+              className="shrink-0 bg-amber-600 text-white hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700"
+            >
+              {refreshing ? <RefreshCw className="size-4 animate-spin" /> : buttonLabel}
+            </Button>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -76,13 +76,15 @@ export {
   type UpgradeComparisonRow,
 } from './app/UpgradePrompt';
 
+export { UpdateBanner, type UpdateBannerProps } from './app/UpdateBanner';
+
 // ─── Marketing — page sections ────────────────────────────────────────────────
 export { SectionTitle, type SectionTitleProps } from './marketing/SectionTitle';
 export { marketingSectionSpacing, type MarketingSectionSpacing } from './marketing/section-spacing';
 export { HeroSection, type HeroSectionProps } from './marketing/HeroSection';
 export { FeaturesSection, type FeaturesSectionProps } from './marketing/FeaturesSection';
 export { GroupedFeaturesSection, type GroupedFeaturesSectionProps, type GroupedFeatureGroup } from './marketing/GroupedFeaturesSection';
-export { StepsSection, type StepsSectionProps, type StepItem } from './marketing/StepsSection';
+export { StepsSection, type StepsSectionProps, type StepItem, type StepGroup } from './marketing/StepsSection';
 export { TechStackSection, type TechStackSectionProps, type TechStackItem } from './marketing/TechStackSection';
 export { FeatureMarqueeSection, type FeatureMarqueeSectionProps, type FeatureMarqueeRow, type FeatureMarqueeItem } from './marketing/FeatureMarqueeSection';
 export { CtaSection, type CtaSectionProps } from './marketing/CtaSection';

package/src/marketing/StepsSection.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import * as React from 'react';
 import { cn, useUIVariant } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
@@ -7,14 +8,77 @@ import { FadeIn } from '../motion/FadeIn';
 export interface StepItem {
   emoji?: string;
   title: string;
-  description: string;
+  description: React.ReactNode;
+}
+
+export interface StepGroup {
+  steps: StepItem[];
+  /** Content rendered after this group, outside the timeline (e.g. a CTA card). */
+  after?: React.ReactNode;
 }
 
 export interface StepsSectionProps {
   badge?: string;
   title?: string;
   description?: string;
+  steps?: StepItem[];
+  /** 'default': horizontal row (vertical on mobile). 'timeline': vertical numbered timeline with a fading accent line. */
+  variant?: 'default' | 'timeline';
+  /** Timeline only — step groups with optional interstitial content; overrides `steps`. Numbering continues across groups. */
+  groups?: StepGroup[];
+}
+
+function TimelineGroup({
+  steps,
+  startNumber,
+  fadeIn,
+}: {
   steps: StepItem[];
+  startNumber: number;
+  fadeIn: boolean;
+}) {
+  const fadePx = 48;
+  return (
+    <div className="relative">
+      {/* Accent line: optional fade-in head, solid middle, fade-out tail */}
+      {fadeIn && (
+        <div
+          aria-hidden="true"
+          className="absolute left-[19px] w-1 bg-gradient-to-b from-transparent to-primary"
+          style={{ top: 0, height: fadePx }}
+        />
+      )}
+      <div
+        aria-hidden="true"
+        className="absolute left-[19px] w-1 bg-primary"
+        style={{
+          top: fadeIn ? fadePx : 20,
+          height: fadeIn ? `calc(100% - ${fadePx}px)` : 'calc(100% - 20px)',
+        }}
+      />
+      <div
+        aria-hidden="true"
+        className="absolute left-[19px] w-1 bg-gradient-to-b from-primary to-transparent"
+        style={{ top: '100%', height: fadePx }}
+      />
+
+      <div className="space-y-10" style={fadeIn ? { paddingTop: fadePx } : undefined}>
+        {steps.map((step, i) => (
+          <FadeIn key={step.title} direction="up" delay={i * 80}>
+            <div className="relative flex gap-5">
+              <div className="relative z-10 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-primary bg-primary text-lg font-bold text-primary-foreground">
+                {step.emoji ?? startNumber + i}
+              </div>
+              <div className="flex-1 pt-1 pb-2">
+                <h3 className="mb-2 text-xl font-semibold text-foreground">{step.title}</h3>
+                <div className="text-sm leading-relaxed text-muted-foreground">{step.description}</div>
+              </div>
+            </div>
+          </FadeIn>
+        ))}
+      </div>
+    </div>
+  );
 }
 
 export function StepsSection({
@@ -22,6 +86,8 @@ export function StepsSection({
   title = 'From zero to shipped',
   description,
   steps,
+  variant = 'default',
+  groups,
 }: StepsSectionProps) {
   const mode = useUIVariant();
   const sectionClasses = cn(
@@ -31,6 +97,37 @@ export function StepsSection({
     !mode && 'rounded-2xl border',
   );
 
+  if (variant === 'timeline') {
+    const resolvedGroups: StepGroup[] = groups ?? (steps ? [{ steps }] : []);
+    let nextNumber = 1;
+
+    return (
+      <section className={sectionClasses}>
+        <div className="px-6 py-14 sm:px-10 sm:py-20">
+          <div className="mx-auto max-w-3xl">
+            <SectionTitle badge={badge} title={title} description={description} className="text-left [&>p]:mx-0" />
+            <div className="mt-12">
+              {resolvedGroups.map((group, groupIndex) => {
+                const startNumber = nextNumber;
+                nextNumber += group.steps.length;
+                return (
+                  <React.Fragment key={groupIndex}>
+                    <div className={cn(groupIndex > 0 && 'mt-10')}>
+                      <TimelineGroup steps={group.steps} startNumber={startNumber} fadeIn={groupIndex > 0} />
+                    </div>
+                    {group.after && <div className="mt-16">{group.after}</div>}
+                  </React.Fragment>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  const resolvedSteps = steps ?? [];
+
   return (
     <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">
@@ -39,12 +136,12 @@ export function StepsSection({
 
           <div className="mt-12">
             {/* Desktop: horizontal row */}
-            <div className="hidden sm:grid" style={{ gridTemplateColumns: `repeat(${steps.length}, 1fr)` }}>
-              {steps.map((step, i) => (
+            <div className="hidden sm:grid" style={{ gridTemplateColumns: `repeat(${resolvedSteps.length}, 1fr)` }}>
+              {resolvedSteps.map((step, i) => (
                 <FadeIn key={step.title} direction="up" delay={i * 80}>
                   <div className="relative flex flex-col items-center text-center px-4">
                     {/* Dashed connector to next step */}
-                    {i < steps.length - 1 && (
+                    {i < resolvedSteps.length - 1 && (
                       <div
                         aria-hidden="true"
                         className="absolute top-6 left-1/2 w-full border-t border-dashed border-border"
@@ -57,7 +154,7 @@ export function StepsSection({
                       )}
                     </div>
                     <h3 className="font-semibold text-foreground">{step.title}</h3>
-                    <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{step.description}</p>
+                    <div className="mt-2 text-sm leading-relaxed text-muted-foreground">{step.description}</div>
                   </div>
                 </FadeIn>
               ))}
@@ -65,11 +162,11 @@ export function StepsSection({
 
             {/* Mobile: vertical timeline */}
             <div className="flex flex-col gap-0 sm:hidden">
-              {steps.map((step, i) => (
+              {resolvedSteps.map((step, i) => (
                 <FadeIn key={step.title} direction="up" delay={i * 80}>
                   <div className="relative flex gap-4 pb-8 last:pb-0">
                     {/* Vertical connector */}
-                    {i < steps.length - 1 && (
+                    {i < resolvedSteps.length - 1 && (
                       <div
                         aria-hidden="true"
                         className="absolute left-[23px] top-14 bottom-0 w-px border-l border-dashed border-border"
@@ -83,7 +180,7 @@ export function StepsSection({
                     </div>
                     <div className="pt-3">
                       <h3 className="font-semibold text-foreground">{step.title}</h3>
-                      <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{step.description}</p>
+                      <div className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{step.description}</div>
                     </div>
                   </div>
                 </FadeIn>