@trackany-device/components 1.0.0

package/src/components/appearance-tabs.tsx

@@ -0,0 +1,46 @@
+'use client';
+import type { LucideIcon } from 'lucide-react';
+import { Monitor, Moon, Sun } from 'lucide-react';
+import type { HTMLAttributes } from 'react';
+import type { Appearance } from '../hooks/use-appearance';
+import { useAppearance } from '../hooks/use-appearance';
+import { cn } from '../lib/utils';
+
+export default function AppearanceTabs({
+    className = '',
+    ...props
+}: HTMLAttributes<HTMLDivElement>) {
+    const { appearance, updateAppearance } = useAppearance();
+
+    const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [
+        { value: 'light', icon: Sun, label: 'Light' },
+        { value: 'dark', icon: Moon, label: 'Dark' },
+        { value: 'system', icon: Monitor, label: 'System' },
+    ];
+
+    return (
+        <div
+            className={cn(
+                'inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800',
+                className,
+            )}
+            {...props}
+        >
+            {tabs.map(({ value, icon: Icon, label }) => (
+                <button
+                    key={value}
+                    onClick={() => updateAppearance(value)}
+                    className={cn(
+                        'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
+                        appearance === value
+                            ? 'bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100'
+                            : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
+                    )}
+                >
+                    <Icon className="-ml-1 h-4 w-4" />
+                    <span className="ml-1.5 text-sm">{label}</span>
+                </button>
+            ))}
+        </div>
+    );
+}

package/src/components/breadcrumbs.tsx

@@ -0,0 +1,50 @@
+import { PlatformLink } from '../platform/context';
+import { Fragment } from 'react';
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from './ui/breadcrumb';
+import type { BreadcrumbItem as BreadcrumbItemType } from '../types/navigation';
+
+export function Breadcrumbs({
+    breadcrumbs,
+}: {
+    breadcrumbs: BreadcrumbItemType[];
+}) {
+    return (
+        <>
+            {breadcrumbs.length > 0 && (
+                <Breadcrumb>
+                    <BreadcrumbList>
+                        {breadcrumbs.map((item, index) => {
+                            const isLast = index === breadcrumbs.length - 1;
+
+                            return (
+                                <Fragment key={index}>
+                                    <BreadcrumbItem>
+                                        {isLast ? (
+                                            <BreadcrumbPage>
+                                                {item.title}
+                                            </BreadcrumbPage>
+                                        ) : (
+                                            <BreadcrumbLink asChild>
+                                                <PlatformLink href={item.href}>
+                                                    {item.title}
+                                                </PlatformLink>
+                                            </BreadcrumbLink>
+                                        )}
+                                    </BreadcrumbItem>
+                                    {!isLast && <BreadcrumbSeparator />}
+                                </Fragment>
+                            );
+                        })}
+                    </BreadcrumbList>
+                </Breadcrumb>
+            )}
+        </>
+    );
+}

package/src/components/cms/blurred-image.tsx

@@ -0,0 +1,111 @@
+import { ImageOff } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+type Props = {
+    src: string | null | undefined;
+    alt: string;
+    className?: string;
+    /** Inner padding around the sharp image. Larger value = bigger blur halo. */
+    padding?: string;
+    /** Object-fit for the sharp image. */
+    fit?: 'contain' | 'cover';
+    /** Rounding on the wrapper. */
+    rounded?: 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    /** Blur radius on the background. */
+    blur?: 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /** Opacity of the white wash overlaying the blur (0–100). */
+    whiteWash?: number;
+};
+
+/**
+ * Image with a blurred copy of itself behind it, washed toward the
+ * surface color (white in light mode, --background in dark mode) so the
+ * image edge fades seamlessly into the page background regardless of the
+ * original asset's edges. Use for: partner logos, customer avatars,
+ * device product photos, blog cover images.
+ *
+ * Inspired by the Launch UI / Apple TV poster glow technique.
+ */
+export function BlurredImage({
+    src,
+    alt,
+    className,
+    padding = 'p-6',
+    fit = 'contain',
+    rounded = 'xl',
+    blur = '2xl',
+    whiteWash = 70,
+}: Props) {
+    const roundedCls = {
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+        '2xl': 'rounded-2xl',
+        full: 'rounded-full',
+    }[rounded];
+
+    const blurCls = {
+        md: 'blur-md',
+        lg: 'blur-lg',
+        xl: 'blur-xl',
+        '2xl': 'blur-2xl',
+        '3xl': 'blur-3xl',
+    }[blur];
+
+    if (!src) {
+        return (
+            <div
+                className={cn(
+                    'inline-flex aspect-square items-center justify-center bg-muted text-muted-foreground',
+                    roundedCls,
+                    padding,
+                    className,
+                )}
+                aria-label={alt}
+            >
+                <ImageOff className="size-1/2 opacity-40" />
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className={cn(
+                'relative inline-flex items-center justify-center overflow-hidden',
+                roundedCls,
+                padding,
+                className,
+            )}
+        >
+            {/* Layer 1: scaled, blurred copy of the image acts as ambient halo */}
+            <div
+                aria-hidden
+                className={cn('absolute inset-0 scale-125', blurCls)}
+                style={{
+                    backgroundImage: `url(${src})`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                }}
+            />
+            {/* Layer 2: surface-coloured wash blends the blur edge to white
+                (light) / --background (dark) so the image dissolves into the
+                page rather than terminating with a hard rectangle */}
+            <div
+                aria-hidden
+                className="absolute inset-0 bg-background"
+                style={{ opacity: whiteWash / 100 }}
+            />
+            {/* Layer 3: the sharp source image */}
+            <img
+                src={src}
+                alt={alt}
+                className={cn(
+                    'relative h-full w-full',
+                    fit === 'cover' ? 'object-cover' : 'object-contain',
+                )}
+                loading="lazy"
+            />
+        </div>
+    );
+}

package/src/components/cms/section-bg.tsx

@@ -0,0 +1,473 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+import { hasGoogleMapsKey, loadGoogleMaps } from '../../lib/google-maps-loader';
+import {
+    isDarkMode,
+    mapStyleForAppearance,
+    watchDarkMode,
+} from '../../lib/map-styles';
+import { cn } from '../../lib/utils';
+
+export type CmsBackground = {
+    kind?: 'image' | 'color' | 'gradient' | 'video' | 'map' | null;
+    image_path?: string | null;
+    video_url?: string | null;
+    video_poster?: string | null;
+    color_token?: string | null;
+    gradient_from?: string | null;
+    gradient_to?: string | null;
+    gradient_direction?: string | null;
+    overlay_alpha?: number | null;
+    map_center_lat?: number | null;
+    map_center_lng?: number | null;
+    map_zoom?: number | null;
+    map_show_devices?: boolean | null;
+};
+
+const COLOR_TOKEN_CLASSES: Record<string, string> = {
+    primary: 'bg-primary',
+    accent: 'bg-accent',
+    muted: 'bg-muted',
+    surface: 'bg-card',
+    card: 'bg-card',
+    secondary: 'bg-secondary',
+};
+
+const GRADIENT_DIRECTION_CLASSES: Record<string, string> = {
+    'to-r': 'bg-gradient-to-r',
+    'to-l': 'bg-gradient-to-l',
+    'to-b': 'bg-gradient-to-b',
+    'to-t': 'bg-gradient-to-t',
+    'to-br': 'bg-gradient-to-br',
+    'to-bl': 'bg-gradient-to-bl',
+};
+
+/**
+ * Absolute-positioned background layer for a section. Sits behind content;
+ * caller is responsible for putting it inside a `relative` parent and giving
+ * the parent dimensions.
+ */
+export function SectionBackground({ bg }: { bg?: CmsBackground | null }) {
+    if (!bg || !bg.kind) {
+        return null;
+    }
+
+    const overlay = bg.overlay_alpha ?? 0;
+
+    if (bg.kind === 'color') {
+        return (
+            <div
+                aria-hidden
+                className={cn(
+                    'absolute inset-0',
+                    COLOR_TOKEN_CLASSES[bg.color_token ?? 'primary'] ??
+                        'bg-primary',
+                )}
+            />
+        );
+    }
+
+    if (bg.kind === 'gradient') {
+        const directionClass =
+            GRADIENT_DIRECTION_CLASSES[bg.gradient_direction ?? 'to-br'] ??
+            'bg-gradient-to-br';
+
+        return (
+            <>
+                <div
+                    aria-hidden
+                    className={cn('absolute inset-0', directionClass)}
+                    style={{
+                        backgroundImage: `linear-gradient(${cssDirection(bg.gradient_direction)}, ${bg.gradient_from ?? '#1e293b'}, ${bg.gradient_to ?? '#0f172a'})`,
+                    }}
+                />
+                <div
+                    aria-hidden
+                    className="absolute inset-0"
+                    style={{
+                        backgroundImage:
+                            'linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.35))',
+                    }}
+                />
+                {overlay > 0 && (
+                    <div
+                        aria-hidden
+                        className="absolute inset-0 bg-black"
+                        style={{ opacity: overlay / 100 }}
+                    />
+                )}
+            </>
+        );
+    }
+
+    if (bg.kind === 'image' && bg.image_path) {
+        const imageOverlay = bg.overlay_alpha == null ? 50 : overlay;
+
+        return (
+            <>
+                <div
+                    aria-hidden
+                    className="absolute inset-0 bg-cover bg-center"
+                    style={{ backgroundImage: `url(${bg.image_path})` }}
+                />
+                {imageOverlay > 0 && (
+                    <div
+                        aria-hidden
+                        className="absolute inset-0 bg-black"
+                        style={{ opacity: imageOverlay / 100 }}
+                    />
+                )}
+            </>
+        );
+    }
+
+    if (bg.kind === 'video' && bg.video_url) {
+        const videoOverlay = bg.overlay_alpha == null ? 50 : overlay;
+
+        return (
+            <>
+                <video
+                    aria-hidden
+                    autoPlay
+                    muted
+                    loop
+                    playsInline
+                    poster={bg.video_poster ?? undefined}
+                    className="absolute inset-0 h-full w-full object-cover"
+                >
+                    <source src={bg.video_url} />
+                </video>
+                {videoOverlay > 0 && (
+                    <div
+                        aria-hidden
+                        className="absolute inset-0 bg-black"
+                        style={{ opacity: videoOverlay / 100 }}
+                    />
+                )}
+            </>
+        );
+    }
+
+    if (bg.kind === 'map') {
+        return (
+            <MapBackground
+                lat={bg.map_center_lat ?? 31.5204}
+                lng={bg.map_center_lng ?? 74.3587}
+                zoom={bg.map_zoom ?? 6}
+                showDevices={bg.map_show_devices ?? false}
+                overlay={overlay}
+            />
+        );
+    }
+
+    return null;
+}
+
+function cssDirection(dir?: string | null): string {
+    switch (dir) {
+        case 'to-r':
+            return 'to right';
+        case 'to-l':
+            return 'to left';
+        case 'to-b':
+            return 'to bottom';
+        case 'to-t':
+            return 'to top';
+        case 'to-bl':
+            return 'to bottom left';
+        case 'to-br':
+        default:
+            return 'to bottom right';
+    }
+}
+
+function MapBackground({
+    lat,
+    lng,
+    zoom,
+    showDevices,
+    overlay,
+}: {
+    lat: number;
+    lng: number;
+    zoom: number;
+    showDevices: boolean;
+    overlay: number;
+}) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const mapRef = useRef<google.maps.Map | null>(null);
+    const animationRef = useRef<number | null>(null);
+    const panCleanupRef = useRef<(() => void) | null>(null);
+
+    useEffect(() => {
+        if (!containerRef.current || mapRef.current || !hasGoogleMapsKey()) {
+            return;
+        }
+
+        const container = containerRef.current;
+
+        loadGoogleMaps()
+            .then((maps) => {
+                if (!containerRef.current) {
+                    return;
+                }
+
+                mapRef.current = new maps.Map(containerRef.current, {
+                    center: { lat, lng },
+                    zoom,
+                    disableDefaultUI: true,
+                    gestureHandling: 'none',
+                    keyboardShortcuts: false,
+                    clickableIcons: false,
+                    backgroundColor: isDarkMode() ? '#212121' : '#f5f5f5',
+                    styles: mapStyleForAppearance(isDarkMode()),
+                });
+
+                if (showDevices) {
+                    const samples: Array<{ lat: number; lng: number }> = [
+                        { lat: lat + 0.3, lng: lng - 0.8 },
+                        { lat: lat - 0.4, lng: lng + 0.6 },
+                        { lat: lat + 0.1, lng: lng + 1.2 },
+                        { lat: lat - 0.6, lng: lng - 0.5 },
+                        { lat: lat + 0.5, lng: lng + 0.2 },
+                    ];
+                    samples.forEach((p) => {
+                        new maps.Marker({
+                            position: p,
+                            map: mapRef.current!,
+                            icon: {
+                                path: maps.SymbolPath.CIRCLE,
+                                scale: 6,
+                                fillColor: 'var(--primary)',
+                                fillOpacity: 0.9,
+                                strokeColor: '#ffffff',
+                                strokeWeight: 2,
+                            },
+                        });
+                    });
+                }
+
+                panCleanupRef.current = startSlowPan(
+                    maps,
+                    mapRef,
+                    animationRef,
+                    container,
+                    { lat, lng },
+                );
+            })
+            .catch((e) => {
+                console.warn('Google Maps load failed', e);
+            });
+
+        return () => {
+            if (animationRef.current !== null) {
+                cancelAnimationFrame(animationRef.current);
+                animationRef.current = null;
+            }
+
+            if (panCleanupRef.current) {
+                panCleanupRef.current();
+                panCleanupRef.current = null;
+            }
+        };
+    }, [lat, lng, zoom, showDevices]);
+
+    useEffect(() => {
+        return watchDarkMode((isDark) => {
+            mapRef.current?.setOptions({
+                styles: mapStyleForAppearance(isDark),
+                backgroundColor: isDark ? '#212121' : '#f5f5f5',
+            });
+        });
+    }, []);
+
+    if (!hasGoogleMapsKey()) {
+        return <MapBackgroundStub overlay={overlay} />;
+    }
+
+    return (
+        <>
+            <div aria-hidden ref={containerRef} className="absolute inset-0" />
+            <div
+                aria-hidden
+                className="absolute inset-0"
+                style={{
+                    background:
+                        'radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.15) 100%)',
+                }}
+            />
+            {overlay > 0 && (
+                <div
+                    aria-hidden
+                    className="absolute inset-0 bg-black"
+                    style={{ opacity: overlay / 100 }}
+                />
+            )}
+        </>
+    );
+}
+
+function startSlowPan(
+    maps: typeof google.maps,
+    mapRef: React.MutableRefObject<google.maps.Map | null>,
+    animationRef: React.MutableRefObject<number | null>,
+    container: HTMLElement,
+    origin: { lat: number; lng: number },
+): () => void {
+    const noop = () => {};
+
+    if (typeof window === 'undefined') {
+        return noop;
+    }
+
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    if (reduced.matches) {
+        return noop;
+    }
+
+    const maxRadiusLat = 0.8;
+    const maxRadiusLng = 1.1;
+    const speedLat = 0.35;
+    const speedLng = 0.5;
+    const decayPerSec = 0.6;
+    const deadZone = 0.05;
+
+    let cursor: { x: number; y: number } | null = null;
+
+    const handleMove = (e: PointerEvent) => {
+        const rect = container.getBoundingClientRect();
+
+        if (rect.width === 0 || rect.height === 0) {
+            return;
+        }
+
+        const nx = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+        const ny = ((e.clientY - rect.top) / rect.height) * 2 - 1;
+        cursor = {
+            x: Math.max(-1, Math.min(1, nx)),
+            y: Math.max(-1, Math.min(1, ny)),
+        };
+    };
+
+    const handleLeave = () => {
+        cursor = null;
+    };
+
+    container.addEventListener('pointermove', handleMove);
+    container.addEventListener('pointerleave', handleLeave);
+    container.addEventListener('pointercancel', handleLeave);
+
+    let offsetLat = 0;
+    let offsetLng = 0;
+    let last = performance.now();
+
+    const tick = (now: number) => {
+        if (!mapRef.current) {
+            return;
+        }
+
+        const dt = Math.min(0.1, Math.max(0, (now - last) / 1000));
+        last = now;
+
+        if (cursor) {
+            const mag = Math.hypot(cursor.x, cursor.y);
+
+            if (mag > deadZone) {
+                offsetLat += -cursor.y * speedLat * dt;
+                offsetLng += cursor.x * speedLng * dt;
+            }
+        } else if (offsetLat !== 0 || offsetLng !== 0) {
+            const decay = Math.max(0, 1 - decayPerSec * dt);
+            offsetLat *= decay;
+            offsetLng *= decay;
+        }
+
+        offsetLat = Math.max(-maxRadiusLat, Math.min(maxRadiusLat, offsetLat));
+        offsetLng = Math.max(-maxRadiusLng, Math.min(maxRadiusLng, offsetLng));
+
+        mapRef.current.panTo(
+            new maps.LatLng(origin.lat + offsetLat, origin.lng + offsetLng),
+        );
+        animationRef.current = window.requestAnimationFrame(tick);
+    };
+
+    animationRef.current = window.requestAnimationFrame(tick);
+
+    return () => {
+        container.removeEventListener('pointermove', handleMove);
+        container.removeEventListener('pointerleave', handleLeave);
+        container.removeEventListener('pointercancel', handleLeave);
+    };
+}
+
+function MapBackgroundStub({ overlay }: { overlay: number }) {
+    return (
+        <>
+            <div
+                aria-hidden
+                className="absolute inset-0 bg-muted"
+                style={{
+                    backgroundImage:
+                        'radial-gradient(circle, oklch(0 0 0 / 0.06) 1px, transparent 1px)',
+                    backgroundSize: '24px 24px',
+                }}
+            />
+            <svg
+                aria-hidden
+                className="absolute inset-0 h-full w-full"
+                viewBox="0 0 800 400"
+                preserveAspectRatio="xMidYMid slice"
+            >
+                {[
+                    [180, 120],
+                    [320, 250],
+                    [500, 90],
+                    [640, 220],
+                    [240, 320],
+                    [560, 340],
+                ].map(([cx, cy], i) => (
+                    <g key={i}>
+                        <circle
+                            cx={cx}
+                            cy={cy}
+                            r="14"
+                            className="fill-primary"
+                            opacity="0.15"
+                        >
+                            <animate
+                                attributeName="r"
+                                values="14;28;14"
+                                dur="2.5s"
+                                begin={`${i * 0.3}s`}
+                                repeatCount="indefinite"
+                            />
+                            <animate
+                                attributeName="opacity"
+                                values="0.4;0;0.4"
+                                dur="2.5s"
+                                begin={`${i * 0.3}s`}
+                                repeatCount="indefinite"
+                            />
+                        </circle>
+                        <circle
+                            cx={cx}
+                            cy={cy}
+                            r="5"
+                            className="fill-primary"
+                        />
+                    </g>
+                ))}
+            </svg>
+            {overlay > 0 && (
+                <div
+                    aria-hidden
+                    className="absolute inset-0 bg-background"
+                    style={{ opacity: overlay / 100 }}
+                />
+            )}
+        </>
+    );
+}