@goldlabelapps/theme 3.2.0 → 3.5.6

package/dist/components/layouts/GuideBreadcrumbs.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { AppRouterLink as Link } from "@goldlabelapps/uberedux";
+import { Home, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+export function GuideBreadcrumbs({ items, homeHref = "/", homeLabel = "Home", className, }) {
+    if (!items)
+        return null;
+    return (_jsxs("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center gap-2 text-xs sm:text-sm text-slate-500 overflow-x-auto no-scrollbar whitespace-nowrap py-1", className), children: [_jsxs(Link, { href: homeHref, className: "hover:text-[#0f172a] transition-colors flex items-center gap-1 font-medium shrink-0", children: [_jsx(Home, { className: "h-3.5 w-3.5" }), _jsx("span", { children: homeLabel })] }), items.map((item, idx) => {
+                const isLastItem = item.isLast ?? idx === items.length - 1;
+                return (_jsxs(React.Fragment, { children: [_jsx(ChevronRight, { className: "h-3.5 w-3.5 text-slate-400 shrink-0" }), isLastItem ? (_jsx("span", { className: "font-semibold text-slate-900 truncate shrink-0", children: item.label })) : (_jsx(Link, { href: item.href, className: "hover:text-[#0f172a] transition-colors text-slate-600 font-medium shrink-0", children: item.label }))] }, idx));
+            })] }));
+}
+export { GuideBreadcrumbs as GuideBreadcrumb };

package/dist/components/layouts/MarkdownContent.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function MarkdownContent({ content }) {
+    // Simple markdown renderer for headers, tables, code blocks, and lists
+    return (_jsx("div", { className: "prose prose-slate dark:prose-invert max-w-none text-slate-800 dark:text-slate-100 leading-relaxed font-sans", children: _jsx("div", { dangerouslySetInnerHTML: { __html: content } }) }));
+}

package/dist/components/layouts/Standard.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { GuideMeta } from "../../types";
+export interface StandardProps {
+    guides: GuideMeta[];
+    currentGuide?: GuideMeta;
+    children: React.ReactNode;
+}
+export type StandardLayoutProps = StandardProps;
+export declare function Standard({ guides, currentGuide, children, }: StandardProps): React.JSX.Element;
+export { Standard as StandardLayout };

package/dist/components/layouts/Standard.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MarkdownMenu } from "../navigation/MarkdownMenu";
+export function Standard({ guides, currentGuide, children, }) {
+    return (_jsx("div", { className: "min-h-screen pt-28 pb-20 bg-white", children: _jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-8", children: [_jsx("aside", { className: "lg:col-span-3 space-y-4", children: _jsx(MarkdownMenu, { guides: guides, currentGuide: currentGuide }) }), _jsx("main", { className: "lg:col-span-9", children: children })] }) }) }));
+}
+export { Standard as StandardLayout };

package/dist/components/navigation/DropdownMenu.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import Link from "next/link";
+import { AppRouterLink as Link } from "@goldlabelapps/uberedux";
 import { usePathname } from "next/navigation";
 import { ChevronDown, Layers, Terminal, Code2, Cpu, Globe, Layout, Sparkles, Building2, BookOpen, Newspaper, History, LifeBuoy, ShieldCheck, Zap, Play, Video, ExternalLink, Download, Settings, } from "lucide-react";
 import { cn } from "../../lib/utils";

package/dist/components/navigation/Header.js

@@ -1,14 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import Link from "next/link";
-import { LayoutDashboard, ExternalLink } from "lucide-react";
+import { AppRouterLink as Link } from "@goldlabelapps/uberedux";
 import { useSiteConfig } from "../../context/ConfigContext";
 import { LogoContextMenu } from "./LogoContextMenu";
 import { DropdownMenu } from "./DropdownMenu";
-import { MobileMenu } from "./MobileMenu";
-import { ShareMenu } from "./ShareMenu";
-import { Button } from "../ui/Button";
+import { LayoutActions } from "./LayoutActions";
 import { cn } from "../../lib/utils";
 export function Header({ className }) {
     const siteConfig = useSiteConfig();
@@ -28,5 +25,5 @@ export function Header({ className }) {
                                     return _jsx(DropdownMenu, { item: item }, idx);
                                 }
                                 return (_jsx(Link, { href: item.href || "#", target: item.external ? "_blank" : undefined, rel: item.external ? "noreferrer" : undefined, className: "px-3.5 py-1.5 text-sm font-medium text-slate-600 hover:text-[#012867] hover:bg-slate-100/80 rounded-full transition-colors", children: item.label }, idx));
-                            }) })] }), _jsxs("div", { className: "flex items-center gap-2.5 sm:gap-3", children: [_jsx(ShareMenu, {}), siteConfig.navigation.remoteControlBadge?.enabled && (_jsxs("a", { href: siteConfig.navigation.remoteControlBadge.href, target: "_blank", rel: "noopener noreferrer", title: siteConfig.navigation.remoteControlBadge.tooltip, className: "hidden sm:inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold text-slate-700 bg-slate-100/80 hover:bg-[#012867]/[0.08] hover:text-[#012867] border border-slate-200/80 transition-colors", children: [_jsx(LayoutDashboard, { className: "h-3.5 w-3.5 text-slate-500" }), _jsx("span", { children: siteConfig.navigation.remoteControlBadge.label }), _jsx(ExternalLink, { className: "h-3 w-3 text-slate-400" })] })), _jsx(Button, { href: siteConfig.navigation.primaryCta.href, variant: "primary", size: "sm", icon: siteConfig.navigation.primaryCta.icon, iconPosition: "right", className: "shadow-sm shadow-[#012867]/20 font-bold bg-[#012867] hover:bg-[#011f52] text-white", children: _jsx("span", { children: siteConfig.navigation.primaryCta.label }) }), _jsx(MobileMenu, { isOpen: mobileMenuOpen, onToggle: () => setMobileMenuOpen((prev) => !prev), onClose: () => setMobileMenuOpen(false) })] })] }) }));
+                            }) })] }), _jsx(LayoutActions, { mobileMenuOpen: mobileMenuOpen, setMobileMenuOpen: setMobileMenuOpen })] }) }));
 }

package/dist/components/navigation/LayoutActions.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface LayoutActionsProps {
+    mobileMenuOpen: boolean;
+    setMobileMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    className?: string;
+}
+export declare function LayoutActions({ mobileMenuOpen, setMobileMenuOpen, className, }: LayoutActionsProps): React.JSX.Element;

package/dist/components/navigation/LayoutActions.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LayoutDashboard, ExternalLink } from "lucide-react";
+import { useSiteConfig } from "../../context/ConfigContext";
+import { ShareMenu } from "./ShareMenu";
+import { MobileMenu } from "./MobileMenu";
+import { Button } from "../ui/Button";
+import { cn } from "../../lib/utils";
+export function LayoutActions({ mobileMenuOpen, setMobileMenuOpen, className, }) {
+    const siteConfig = useSiteConfig();
+    return (_jsxs("div", { className: cn("flex items-center gap-2.5 sm:gap-3", className), children: [_jsx(ShareMenu, {}), siteConfig.navigation.remoteControlBadge?.enabled && (_jsxs("a", { href: siteConfig.navigation.remoteControlBadge.href, target: "_blank", rel: "noopener noreferrer", title: siteConfig.navigation.remoteControlBadge.tooltip, className: "hidden sm:inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold text-slate-700 bg-slate-100/80 hover:bg-[#012867]/[0.08] hover:text-[#012867] border border-slate-200/80 transition-colors", children: [_jsx(LayoutDashboard, { className: "h-3.5 w-3.5 text-slate-500" }), _jsx("span", { children: siteConfig.navigation.remoteControlBadge.label }), _jsx(ExternalLink, { className: "h-3 w-3 text-slate-400" })] })), _jsx(Button, { href: siteConfig.navigation.primaryCta.href, variant: "primary", size: "sm", icon: siteConfig.navigation.primaryCta.icon, iconPosition: "right", className: "shadow-sm shadow-[#012867]/20 font-bold bg-[#012867] hover:bg-[#011f52] text-white", children: _jsx("span", { children: siteConfig.navigation.primaryCta.label }) }), _jsx(MobileMenu, { isOpen: mobileMenuOpen, onToggle: () => setMobileMenuOpen((prev) => !prev), onClose: () => setMobileMenuOpen(false) })] }));
+}

package/dist/components/navigation/LogoContextMenu.d.ts

@@ -2,6 +2,5 @@ import React from "react";
 export declare function BrandLogo({ className }: {
     className?: string;
 }): React.JSX.Element;
-export declare const EchoPayLogo: typeof BrandLogo;
 export declare const NxLogo: typeof BrandLogo;
 export declare function LogoContextMenu(): React.JSX.Element;

package/dist/components/navigation/LogoContextMenu.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
-import Link from "next/link";
+import { AppRouterLink as Link } from "@goldlabelapps/uberedux";
 import Image from "next/image";
 import { Copy, Check, FileText } from "lucide-react";
 import { useSiteConfig } from "../../context/ConfigContext";
@@ -9,7 +9,6 @@ export function BrandLogo({ className = "h-8 w-auto" }) {
     const siteConfig = useSiteConfig();
     return (_jsxs("div", { className: `inline-flex items-center gap-2.5 font-bold tracking-tight select-none ${className}`, children: [_jsx(Image, { src: siteConfig.brand.logoSrc || "/svg/favicon_light.svg", alt: siteConfig.brand.name, width: 34, height: 34, className: "h-8 w-8 shrink-0 object-contain", priority: true }), _jsx("span", { className: "font-extrabold text-lg sm:text-xl tracking-tight text-[#012867] inline-flex items-center", children: _jsx("span", { children: siteConfig.brand.name }) })] }));
 }
-export const EchoPayLogo = BrandLogo;
 export const NxLogo = BrandLogo;
 export function LogoContextMenu() {
     const siteConfig = useSiteConfig();

package/dist/components/navigation/MarkdownMenu.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { GuideMeta } from "../../types";
+export interface MarkdownMenuProps {
+    guides: GuideMeta[];
+    currentGuide?: GuideMeta;
+    title?: string;
+    basePath?: string;
+}
+export declare function MarkdownMenu({ guides, currentGuide, title, basePath, }: MarkdownMenuProps): React.JSX.Element;

package/dist/components/navigation/MarkdownMenu.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppRouterLink as Link } from "@goldlabelapps/uberedux";
+import { BookOpen } from "lucide-react";
+export function MarkdownMenu({ guides, currentGuide, title = "How To Guides", basePath = "/how-to", }) {
+    return (_jsxs("div", { className: "p-4 rounded-2xl bg-slate-50 border border-red-500", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4 text-[#012867] font-bold text-sm", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: title })] }), _jsx("ul", { className: "space-y-1", children: guides.map((g) => {
+                    const isActive = currentGuide?.slug === g.slug;
+                    return (_jsx("li", { children: _jsx(Link, { href: `${basePath}${g.slug === "/" ? "" : g.slug}`, className: `block px-3 py-2 rounded-xl text-xs font-semibold transition-colors ${isActive
+                                ? "bg-slate-200 text-[#012867]"
+                                : "text-slate-700 hover:bg-slate-200/70"}`, children: g.title }) }, g.slug));
+                }) })] }));
+}

package/dist/components/navigation/MobileMenu.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
-import Link from "next/link";
+import { AppRouterLink as Link } from "@goldlabelapps/uberedux";
 import { Menu, X, ChevronDown, ExternalLink } from "lucide-react";
 import { useSiteConfig } from "../../context/ConfigContext";
 import { Button } from "../ui/Button";
@@ -31,13 +31,22 @@ export function MobileMenu({ isOpen: controlledIsOpen, onToggle, onClose, } = {}
         }
     };
     useEffect(() => {
-        if (isOpen) {
-            const originalOverflow = document.body.style.overflow;
-            document.body.style.overflow = "hidden";
-            return () => {
-                document.body.style.overflow = originalOverflow;
-            };
+        if (!isOpen) {
+            setExpandedSections({});
+            return;
         }
+        const originalOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape") {
+                handleClose();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.body.style.overflow = originalOverflow;
+            window.removeEventListener("keydown", handleKeyDown);
+        };
     }, [isOpen]);
     const toggleSection = (label) => {
         setExpandedSections((prev) => ({

package/dist/components/navigation/ShareMenu.d.ts

@@ -4,4 +4,4 @@ export interface ShareMenuProps {
     title?: string;
     description?: string;
 }
-export declare function ShareMenu({ url, title, description }: ShareMenuProps): React.JSX.Element;
+export declare function ShareMenu({ url, title, description: _description }: ShareMenuProps): React.JSX.Element;

package/dist/components/navigation/ShareMenu.js

@@ -11,7 +11,7 @@ const emptySubscribe = (callback) => {
     window.addEventListener("popstate", callback);
     return () => window.removeEventListener("popstate", callback);
 };
-export function ShareMenu({ url, title, description }) {
+export function ShareMenu({ url, title, description: _description }) {
     const siteConfig = useSiteConfig();
     const [isOpen, setIsOpen] = useState(false);
     const [copied, setCopied] = useState(false);
@@ -68,7 +68,6 @@ export function ShareMenu({ url, title, description }) {
         }
     };
     const shareTitle = title || siteConfig.metadata.title;
-    const shareDescription = description || siteConfig.metadata.description;
     return (_jsxs("div", { className: "relative inline-flex items-center", ref: menuRef, children: [_jsxs("button", { type: "button", onClick: () => setIsOpen((prev) => !prev), "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": `Share ${siteConfig.brand.name}`, className: cn("inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold transition-all duration-200 cursor-pointer border", isOpen
                     ? "bg-[#012867] text-white border-[#012867] shadow-sm"
                     : "text-slate-700 bg-slate-100/80 hover:bg-[#012867]/[0.08] hover:text-[#012867] border-slate-200/80"), children: [_jsx(Share2, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Share" })] }), isOpen && (_jsxs("div", { role: "dialog", "aria-label": "Share options", className: "absolute right-0 top-full mt-2 z-50 w-64 rounded-2xl bg-white border border-slate-200 p-2 shadow-2xl backdrop-blur-2xl animate-in fade-in zoom-in-95 duration-150", children: [_jsx("div", { className: "px-2.5 py-1.5 border-b border-slate-100 mb-1", children: _jsx("p", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-wider", children: "Share this page" }) }), _jsxs("div", { className: "space-y-1", children: [_jsx(FacebookShareButton, { url: currentUrl, title: shareTitle, className: "w-full text-left !flex", onClick: () => setIsOpen(false), children: _jsx("div", { className: "flex items-center gap-3 p-2 rounded-xl hover:bg-slate-100/80 transition-colors w-full cursor-pointer group", children: _jsx("span", { className: "text-xs font-medium text-slate-700 group-hover:text-slate-900", children: "Facebook" }) }) }), _jsx(TwitterShareButton, { url: currentUrl, title: shareTitle, className: "w-full text-left !flex", onClick: () => setIsOpen(false), children: _jsx("div", { className: "flex items-center gap-3 p-2 rounded-xl hover:bg-slate-100/80 transition-colors w-full cursor-pointer group", children: _jsx("span", { className: "text-xs font-medium text-slate-700 group-hover:text-slate-900", children: "Twitter / X" }) }) }), _jsx(WhatsappShareButton, { url: currentUrl, title: shareTitle, className: "w-full text-left !flex", onClick: () => setIsOpen(false), children: _jsx("div", { className: "flex items-center gap-3 p-2 rounded-xl hover:bg-slate-100/80 transition-colors w-full cursor-pointer group", children: _jsx("span", { className: "text-xs font-medium text-slate-700 group-hover:text-slate-900", children: "WhatsApp" }) }) }), _jsx("div", { className: "pt-1 border-t border-slate-100", children: _jsxs("button", { type: "button", onClick: handleCopy, className: "flex items-center justify-between w-full p-2 rounded-xl hover:bg-[#012867]/[0.06] hover:text-[#012867] transition-colors cursor-pointer text-left group", children: [_jsx("div", { className: "flex items-center gap-3", children: _jsx("span", { className: "text-xs font-medium text-slate-700 group-hover:text-[#012867]", children: copied ? "Link Copied!" : "Copy Link" }) }), copied ? (_jsx(Check, { className: "h-4 w-4 text-emerald-600" })) : (_jsx(Copy, { className: "h-4 w-4 text-slate-400 group-hover:text-[#012867]" }))] }) })] })] }))] }));

package/dist/components/navigation/Waiting.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface WaitingProps {
+    /** Optional container class name override */
+    className?: string;
+    /** Safety timeout in ms before auto-dismissing (default 4000ms). Pass 0 to disable. */
+    timeout?: number;
+}
+export declare function WaitingContent({ className, timeout }: WaitingProps): React.JSX.Element | null;
+export declare function Waiting(props: WaitingProps): React.JSX.Element;
+export default Waiting;

package/dist/components/navigation/Waiting.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Flash } from "@goldlabelapps/flash";
+import { useSlice } from "@goldlabelapps/uberedux";
+export function WaitingContent({ className, timeout = 4000 }) {
+    const [mounted, setMounted] = useState(false);
+    const [timedOut, setTimedOut] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    let isWaiting = false;
+    try {
+        const slice = useSlice();
+        isWaiting = Boolean(slice?.waiting || slice?.loadingOverlay || slice?.navigation?.isNavigating);
+    }
+    catch {
+        isWaiting = false;
+    }
+    useEffect(() => {
+        if (!isWaiting) {
+            setTimedOut(false);
+            return;
+        }
+        if (timeout > 0) {
+            const timer = setTimeout(() => {
+                setTimedOut(true);
+            }, timeout);
+            return () => clearTimeout(timer);
+        }
+    }, [isWaiting, timeout]);
+    if (!isWaiting || timedOut)
+        return null;
+    const content = (_jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": "Loading page", onClick: () => setTimedOut(true), style: { zIndex: 999999 }, className: className ||
+            "fixed inset-0 z-[999999] flex items-center justify-center bg-white/80 dark:bg-slate-950/80 backdrop-blur-sm transition-opacity duration-200 pointer-events-auto", children: _jsx(Flash, { movie: "NXLoading", width: 320, height: 320, color: "transparent", loop: true, autoPlay: true }) }));
+    if (mounted && typeof document !== "undefined") {
+        return createPortal(content, document.body);
+    }
+    return content;
+}
+export function Waiting(props) {
+    return (_jsx(Suspense, { fallback: null, children: _jsx(WaitingContent, { ...props }) }));
+}
+export default Waiting;

package/dist/components/search/HeroSearchBar.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { UseSearchOptions } from "./useSearch";
+export interface HeroSearchBarProps {
+    guides?: any[];
+    searchOptions?: UseSearchOptions;
+    founderName?: string;
+    founderTitle?: string;
+    founderTagline?: string;
+    tags?: Array<{
+        name: string;
+        slug: string;
+    }>;
+    antigravityGuide?: any;
+    className?: string;
+}
+export declare function HeroSearchBar({ guides, searchOptions, founderName: _founderName, founderTitle, founderTagline: _founderTagline, tags, antigravityGuide, className, }: HeroSearchBarProps): React.JSX.Element;

package/dist/components/search/HeroSearchBar.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Search, X } from "lucide-react";
+import { CleverText } from "@goldlabelapps/flash";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { ParticleCanvas } from "../hero/ParticleCanvas";
+import { useSearch } from "./useSearch";
+import { SearchResultsList } from "./SearchResultsList";
+import { FeaturedCard } from "../showcase/FeaturedCard";
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export function HeroSearchBar({ guides = [], searchOptions, founderName: _founderName = "Wei Zang", founderTitle = "Creator & Author", founderTagline: _founderTagline = "Building next-generation digital products & multi-platform architectures.", tags = [], antigravityGuide, className, }) {
+    const mergedSearchOptions = {
+        initialGuides: guides,
+        ...searchOptions,
+    };
+    const { query, setQuery, searchResults, hasResults } = useSearch(mergedSearchOptions);
+    const searchContainerRef = React.useRef(null);
+    const handleTagClick = (label) => {
+        setQuery(label);
+        if (searchContainerRef.current?.scrollIntoView) {
+            searchContainerRef.current.scrollIntoView({
+                behavior: "smooth",
+                block: "start",
+            });
+        }
+    };
+    return (_jsxs("section", { className: cn("relative z-30 flex flex-col items-center justify-center pt-0 pb-6 w-full", className), children: [_jsx("div", { className: "pointer-events-none absolute inset-0 overflow-hidden z-0", children: _jsx(ParticleCanvas, {}) }), _jsxs("div", { className: "relative z-20 w-full max-w-4xl mx-auto px-4 flex flex-col items-center text-center", children: [_jsx("h1", { className: "text-3xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-slate-900 dark:text-white max-w-3xl leading-tight mb-1", children: _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-[#85580C] via-[#9E6E17] to-[#784E07] dark:from-[#F1D57A] dark:via-[#C09F52] dark:to-[#E6CA65] font-bold", children: _jsx(CleverText, { text: founderTitle, speed: 40, style: { fontFamily: "inherit", display: "inline" } }) }) }), antigravityGuide && (_jsx(FeaturedCard, { categoryTag: "Career / AI / Antigravity Overview", badge: "Featured", title: antigravityGuide.title || "Building Next.js Apps with Agentic AI & Google Antigravity", description: antigravityGuide.description || "Software development has transformed from manually typing boilerplate code into steering high-autonomy agentic systems. Discover our workflow for shipping Next.js apps with automated monorepos and static site pipelines.", href: antigravityGuide.slug || "/career/ai/antigravity", readMoreLabel: "Read more" })), _jsxs("div", { ref: searchContainerRef, className: "w-full max-w-[340px] mt-1 mb-2 sm:mb-3 relative z-20 scroll-mt-24 sm:scroll-mt-28", children: [_jsxs("div", { className: "relative flex items-center shadow-xl rounded-2xl overflow-hidden bg-white/90 dark:bg-slate-900/90 backdrop-blur-md border-2 border-indigo-500/30 focus-within:border-indigo-600 focus-within:ring-4 focus-within:ring-indigo-500/20 transition-all", children: [_jsx("div", { className: "pl-4 text-indigo-500 dark:text-indigo-400", children: _jsx(Search, { className: "w-5 h-5" }) }), _jsx("input", { type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search experience...", className: "w-full py-3 px-3 text-sm sm:text-base bg-transparent text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none" }), query && (_jsx("button", { onClick: () => setQuery(""), className: "pr-4 text-slate-400 hover:text-slate-600 dark:hover:text-white transition-colors", "aria-label": "Clear search query", children: _jsx(X, { className: "w-4 h-4" }) }))] }), !query && tags.length > 0 && (_jsxs("div", { className: "mt-3 flex flex-wrap justify-center gap-2", children: [_jsx("span", { className: "text-xs text-slate-400 dark:text-slate-500 self-center mr-1 font-medium", children: "Try:" }), tags
+                                        .filter((t) => t.name !== "FastAPI" && t.name !== "Supabase" && t.name !== "Firebase")
+                                        .slice(0, 6)
+                                        .map((tag) => {
+                                        const label = tag.slug === "flash" ? "Flash" : tag.name;
+                                        return (_jsx("button", { onClick: () => handleTagClick(label), className: "px-3 py-1 text-xs font-medium rounded-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 hover:border-slate-300 dark:hover:border-slate-600 transition-all shadow-sm cursor-pointer", children: label }, tag.slug));
+                                    })] })), query.trim() && (_jsx("div", { className: "absolute top-full left-0 right-0 mt-4 p-4 bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-800 text-left max-h-[70vh] overflow-y-auto z-50", children: _jsx(SearchResultsList, { query: query, searchResults: searchResults, hasResults: hasResults, onSelectResult: () => setQuery(""), allTags: tags }) }))] })] })] }));
+}

package/dist/components/search/SearchDialog.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { UseSearchOptions } from "./useSearch";
+export interface SearchDialogProps {
+    isOpen?: boolean;
+    onClose?: () => void;
+    searchOptions?: UseSearchOptions;
+    title?: string;
+    placeholder?: string;
+    renderTrigger?: boolean;
+}
+export declare function SearchDialog({ isOpen: externalIsOpen, onClose: externalOnClose, searchOptions, title, placeholder, renderTrigger, }: SearchDialogProps): React.JSX.Element;

package/dist/components/search/SearchDialog.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useSyncExternalStore } from "react";
+import { Search, X } from "lucide-react";
+import { Dialog, DialogContent, IconButton } from "@mui/material";
+import { useTheme } from "../../context/ThemeContext";
+import { useSearch } from "./useSearch";
+import { SearchResultsList } from "./SearchResultsList";
+import { cn } from "../../lib/utils";
+const emptySubscribe = () => () => { };
+const getClientSnapshot = () => true;
+const getServerSnapshot = () => false;
+export function SearchDialog({ isOpen: externalIsOpen, onClose: externalOnClose, searchOptions, title = "Search Experience & Documentation", placeholder = "Search site (e.g. Next.js, Flash, Agentic AI, React)...", renderTrigger, }) {
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const isControlled = externalIsOpen !== undefined;
+    const isOpen = isControlled ? externalIsOpen : internalIsOpen;
+    const mounted = useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot);
+    const { theme } = useTheme();
+    const isDark = mounted && theme === "dark";
+    const inputRef = useRef(null);
+    const { query, setQuery, searchResults, hasResults } = useSearch(searchOptions);
+    // Keyboard shortcut (Cmd+K / Ctrl+K) to open search dialog
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+                e.preventDefault();
+                if (isControlled) {
+                    if (isOpen && externalOnClose) {
+                        externalOnClose();
+                    }
+                    else if (!isOpen && externalOnClose) {
+                        // allow opening via keydown if parent supports it
+                        externalOnClose();
+                    }
+                }
+                else {
+                    setInternalIsOpen((prev) => !prev);
+                }
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [isControlled, isOpen, externalOnClose]);
+    const handleClose = () => {
+        if (isControlled) {
+            externalOnClose?.();
+        }
+        else {
+            setInternalIsOpen(false);
+        }
+        setQuery("");
+    };
+    const handleSelectResult = () => {
+        handleClose();
+    };
+    const shouldRenderTrigger = renderTrigger !== undefined ? renderTrigger : !isControlled;
+    return (_jsxs(_Fragment, { children: [shouldRenderTrigger && (_jsx("button", { type: "button", onClick: () => (isControlled ? externalOnClose?.() : setInternalIsOpen(true)), "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Search", title: "Search (Cmd+K)", className: cn("inline-flex items-center justify-center h-9 w-9 rounded-full text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer", isOpen && "bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white"), children: _jsx(Search, { className: "h-4 w-4", "aria-hidden": "true" }) })), _jsxs(Dialog, { open: isOpen, onClose: handleClose, "aria-labelledby": "search-dialog-title", maxWidth: "md", fullWidth: true, PaperProps: {
+                    sx: {
+                        borderRadius: "20px",
+                        p: 1.5,
+                        maxWidth: "680px",
+                        maxHeight: "85vh",
+                        backgroundColor: isDark ? "#0f172a" : "#ffffff",
+                        color: isDark ? "#f8fafc" : "#0f172a",
+                        backgroundImage: "none",
+                        border: isDark ? "1px solid #334155" : "1px solid #e2e8f0",
+                    },
+                }, children: [_jsxs("div", { className: "flex items-center justify-between px-2 pt-1 pb-3 border-b border-slate-200 dark:border-slate-800", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-bold text-slate-700 dark:text-slate-200", id: "search-dialog-title", children: [_jsx(Search, { className: "w-4 h-4 text-indigo-500" }), _jsx("span", { children: title })] }), _jsx(IconButton, { onClick: handleClose, size: "small", "aria-label": "Close search", sx: { color: isDark ? "#94a3b8" : "#64748b" }, children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsxs(DialogContent, { sx: { p: 2 }, children: [_jsxs("div", { className: "relative flex items-center shadow-sm rounded-xl overflow-hidden bg-slate-50 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-700 focus-within:border-indigo-500 transition-all", children: [_jsx("div", { className: "pl-3.5 text-slate-400", children: _jsx(Search, { className: "w-5 h-5" }) }), _jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: placeholder, autoFocus: true, className: "w-full py-3 px-3 text-base bg-transparent text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none" }), query && (_jsx("button", { onClick: () => setQuery(""), className: "pr-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-white", "aria-label": "Clear search query", children: _jsx(X, { className: "w-4 h-4" }) }))] }), query.trim() && (_jsx("div", { className: "mt-4 max-h-[55vh] overflow-y-auto pr-1", children: _jsx(SearchResultsList, { query: query, searchResults: searchResults, hasResults: hasResults, onSelectResult: handleSelectResult }) }))] })] })] }));
+}

package/dist/components/search/SearchIconButton.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { SearchDialogProps } from "./SearchDialog";
+export interface SearchIconButtonProps extends Omit<SearchDialogProps, "isOpen" | "onClose"> {
+    className?: string;
+    iconClassName?: string;
+    ariaLabel?: string;
+    title?: string;
+    buttonClassName?: string;
+}
+export declare function SearchIconButton({ className, iconClassName, ariaLabel, title, buttonClassName, ...dialogProps }: SearchIconButtonProps): React.JSX.Element;

package/dist/components/search/SearchIconButton.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Search } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { SearchDialog } from "./SearchDialog";
+export function SearchIconButton({ className, iconClassName = "h-4 w-4", ariaLabel = "Search", title = "Search (Cmd+K)", buttonClassName, ...dialogProps }) {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setIsOpen(true), "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": ariaLabel, title: title, className: cn("inline-flex items-center justify-center h-9 w-9 rounded-full text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer", isOpen && "bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white", className, buttonClassName), children: _jsx(Search, { className: iconClassName, "aria-hidden": "true" }) }), _jsx(SearchDialog, { ...dialogProps, isOpen: isOpen, onClose: () => setIsOpen(false), renderTrigger: false })] }));
+}

package/dist/components/search/SearchResultsList.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { SearchResultsData } from "./useSearch";
+export interface SearchResultsListProps {
+    query: string;
+    searchResults: SearchResultsData;
+    hasResults: boolean;
+    onSelectResult?: () => void;
+    allTags?: Array<{
+        name: string;
+        slug: string;
+    }>;
+}
+export declare function SearchResultsList({ query, searchResults, hasResults, onSelectResult, allTags, }: SearchResultsListProps): React.JSX.Element | null;

package/dist/components/search/SearchResultsList.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppRouterLink as Link } from "@goldlabelapps/uberedux";
+import { ArrowRight, Tag, Briefcase, BookOpen, Video, Layers } from "lucide-react";
+import { HighlightText, getContentSnippet } from "./useSearch";
+export function SearchResultsList({ query, searchResults, hasResults, onSelectResult, allTags = [], }) {
+    if (!query.trim())
+        return null;
+    if (!hasResults) {
+        return (_jsxs("div", { className: "p-6 text-center text-slate-500 dark:text-slate-400", children: ["No exact matches for \"", query, "\". Try searching for ", _jsx("i", { children: "Next.js" }), ", ", _jsx("i", { children: "React" }), ", ", _jsx("i", { children: "Flash" }), ", or ", _jsx("i", { children: "Agentic AI" }), "."] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [searchResults.guides.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400 mb-2 flex items-center gap-1.5", children: [_jsx(BookOpen, { className: "w-3.5 h-3.5" }), "(", searchResults.guides.length, ") Results"] }), _jsx("div", { className: "space-y-2", children: searchResults.guides.map((guide) => (_jsxs(Link, { href: guide.cleanSlug === "index" ? "/" : `/${guide.cleanSlug}`, onClick: onSelectResult, className: "p-3 rounded-xl bg-slate-50 dark:bg-slate-800/60 hover:bg-indigo-50 dark:hover:bg-indigo-950/40 border border-slate-100 dark:border-slate-800 transition-all flex items-center justify-between group cursor-pointer", children: [_jsxs("div", { children: [_jsxs("div", { className: "font-semibold text-slate-900 dark:text-white text-sm group-hover:text-indigo-600 dark:group-hover:text-indigo-400 flex items-center gap-2", children: [_jsx("span", { children: _jsx(HighlightText, { text: guide.title, query: query }) }), guide.category && (_jsx("span", { className: "text-[10px] px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/60 text-indigo-700 dark:text-indigo-300 font-medium", children: guide.category }))] }), _jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-1 line-clamp-2", children: _jsx(HighlightText, { text: getContentSnippet(guide.description || "", query), query: query }) })] }), _jsx(ArrowRight, { className: "w-4 h-4 text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 group-hover:translate-x-0.5 transition-all flex-shrink-0 ml-3" })] }, guide.cleanSlug))) })] })), searchResults.features.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400 mb-2 flex items-center gap-1.5", children: [_jsx(Layers, { className: "w-3.5 h-3.5" }), "Features (", searchResults.features.length, ")"] }), _jsx("div", { className: "space-y-2", children: searchResults.features.map((feature, idx) => (_jsxs(Link, { href: "/features", onClick: onSelectResult, className: "p-3 rounded-xl bg-slate-50 dark:bg-slate-800/60 hover:bg-indigo-50 dark:hover:bg-indigo-950/40 border border-slate-100 dark:border-slate-800 transition-all flex items-center justify-between group cursor-pointer", children: [_jsxs("div", { children: [_jsxs("div", { className: "font-semibold text-slate-900 dark:text-white text-sm group-hover:text-indigo-600 dark:group-hover:text-indigo-400 flex items-center gap-2", children: [_jsx("span", { children: _jsx(HighlightText, { text: feature.title, query: query }) }), feature.tag && (_jsx("span", { className: "text-[10px] px-2 py-0.5 rounded-full bg-purple-100 dark:bg-purple-900/60 text-purple-700 dark:text-purple-300 font-medium", children: feature.tag }))] }), _jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-1 line-clamp-2", children: _jsx(HighlightText, { text: getContentSnippet(feature.description || "", query), query: query }) })] }), _jsx(ArrowRight, { className: "w-4 h-4 text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 group-hover:translate-x-0.5 transition-all flex-shrink-0 ml-3" })] }, feature.title || idx))) })] })), searchResults.videos.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400 mb-2 flex items-center gap-1.5", children: [_jsx(Video, { className: "w-3.5 h-3.5" }), "Videos (", searchResults.videos.length, ")"] }), _jsx("div", { className: "space-y-2", children: searchResults.videos.map((video, idx) => (_jsxs(Link, { href: "/demos", onClick: onSelectResult, className: "p-3 rounded-xl bg-slate-50 dark:bg-slate-800/60 hover:bg-indigo-50 dark:hover:bg-indigo-950/40 border border-slate-100 dark:border-slate-800 transition-all flex items-center justify-between group cursor-pointer", children: [_jsxs("div", { children: [_jsx("div", { className: "font-semibold text-slate-900 dark:text-white text-sm group-hover:text-indigo-600 dark:group-hover:text-indigo-400 flex items-center gap-2", children: _jsx("span", { children: _jsx(HighlightText, { text: video.title, query: query }) }) }), _jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-1 line-clamp-2", children: _jsx(HighlightText, { text: getContentSnippet(video.tagline || video.description || "", query), query: query }) })] }), _jsx(ArrowRight, { className: "w-4 h-4 text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 group-hover:translate-x-0.5 transition-all flex-shrink-0 ml-3" })] }, video.title || idx))) })] })), searchResults.tags.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400 mb-2 flex items-center gap-1.5", children: [_jsx(Tag, { className: "w-3.5 h-3.5" }), "Skills & Topics (", searchResults.tags.length, ")"] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: searchResults.tags.map((tag) => (_jsxs(Link, { href: `/tag/${tag.slug}`, onClick: onSelectResult, className: "p-3 rounded-xl bg-slate-50 dark:bg-slate-800/60 hover:bg-indigo-50 dark:hover:bg-indigo-950/40 border border-slate-100 dark:border-slate-800 transition-all flex items-center justify-between group cursor-pointer", children: [_jsxs("div", { children: [_jsx("div", { className: "font-semibold text-slate-900 dark:text-white text-sm group-hover:text-indigo-600 dark:group-hover:text-indigo-400", children: _jsx(HighlightText, { text: tag.name, query: query }) }), _jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-1", children: _jsx(HighlightText, { text: tag.description, query: query }) })] }), _jsx(ArrowRight, { className: "w-4 h-4 text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 group-hover:translate-x-0.5 transition-all flex-shrink-0 ml-2" })] }, tag.slug))) })] })), searchResults.roles.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400 mb-2 flex items-center gap-1.5", children: [_jsx(Briefcase, { className: "w-3.5 h-3.5" }), "Experience (", searchResults.roles.length, ")"] }), _jsx("div", { className: "space-y-2", children: searchResults.roles.map((role) => {
+                            const availableTags = allTags.length > 0 ? allTags : searchResults.tags;
+                            const matchingTag = availableTags.find((t) => role.skills?.some((s) => s.toLowerCase() === t.name.toLowerCase()));
+                            const targetUrl = matchingTag ? `/tag/${matchingTag.slug}` : `/tag/${role.eraId || "experience"}`;
+                            return (_jsxs(Link, { href: targetUrl, onClick: onSelectResult, className: "block p-3.5 rounded-xl bg-slate-50 dark:bg-slate-800/60 hover:bg-indigo-50 dark:hover:bg-indigo-950/40 border border-slate-100 dark:border-slate-800 transition-all group cursor-pointer", children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("span", { className: "font-bold text-slate-900 dark:text-white text-sm group-hover:text-indigo-600 dark:group-hover:text-indigo-400 flex items-center gap-1.5", children: [_jsx("span", { children: _jsx(HighlightText, { text: role.title, query: query }) }), _jsx("span", { className: "text-slate-400 font-normal", children: "@" }), _jsx("span", { className: "text-slate-700 dark:text-slate-300", children: _jsx(HighlightText, { text: role.company, query: query }) })] }), role.period && (_jsx("span", { className: "text-[11px] text-slate-400 font-mono", children: role.period }))] }), role.summary && (_jsx("p", { className: "text-xs text-slate-600 dark:text-slate-300 mt-1.5 line-clamp-2", children: _jsx(HighlightText, { text: getContentSnippet(role.summary, query, 140), query: query }) }))] }, role.id));
+                        }) })] }))] }));
+}

package/dist/components/search/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./useSearch";
+export * from "./SearchResultsList";
+export * from "./SearchDialog";
+export * from "./SearchIconButton";
+export * from "./HeroSearchBar";

package/dist/components/search/index.js

@@ -0,0 +1,5 @@
+export * from "./useSearch";
+export * from "./SearchResultsList";
+export * from "./SearchDialog";
+export * from "./SearchIconButton";
+export * from "./HeroSearchBar";

package/dist/components/search/useSearch.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+export interface SearchResultsData {
+    guides: any[];
+    videos: any[];
+    features: any[];
+    tags: any[];
+    roles: any[];
+}
+export interface UseSearchOptions {
+    initialGuides?: any[];
+    profileData?: {
+        tags?: Array<{
+            name: string;
+            slug: string;
+            description: string;
+        }>;
+        roles?: Array<{
+            id: string;
+            title: string;
+            company: string;
+            period?: string;
+            eraId?: string;
+            summary?: string;
+            skills: string[];
+        }>;
+    };
+    videosConfig?: {
+        items?: Array<{
+            title: string;
+            tagline: string;
+            description: string;
+            keyFeatures?: string[];
+        }>;
+    };
+    featuresConfig?: {
+        items?: Array<{
+            title: string;
+            tabLabel?: string;
+            tag?: string;
+            description: string;
+        }>;
+    };
+}
+export declare function useSearch(initialGuidesOrOptions?: any[] | UseSearchOptions, optionsParam?: UseSearchOptions): {
+    query: string;
+    setQuery: React.Dispatch<React.SetStateAction<string>>;
+    searchResults: SearchResultsData;
+    hasResults: boolean;
+};
+export declare function HighlightText({ text, query }: {
+    text: string;
+    query: string;
+}): React.JSX.Element;
+export declare function getContentSnippet(content: string, query: string, maxLength?: number): string;