@m13v/seo-components 0.8.1 → 0.8.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 m13v
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,146 @@
+# @m13v/seo-components
+
+42 animated React components for programmatic SEO pages. Ships as TypeScript source (no build step); Next.js transpiles it directly.
+
+## Install
+
+```bash
+npm install @seo/components@npm:@m13v/seo-components
+```
+
+This aliases the package so you import from `@seo/components` everywhere.
+
+## Usage
+
+```tsx
+// Client components
+import { Breadcrumbs, ArticleMeta, FaqSection, ComparisonTable } from "@seo/components";
+import { SitemapSidebar, GuideChatPanel, HeadingAnchors } from "@seo/components";
+import { AnimatedBeam, MorphingText, NumberTicker, Particles } from "@seo/components";
+
+// Server utilities (API routes, server components)
+import { walkPages, createGuideChatHandler, discoverGuides } from "@seo/components/server";
+```
+
+## Components
+
+### Trust & Content
+
+| Component | What it does |
+|-----------|-------------|
+| `Breadcrumbs` | SEO breadcrumb trail with JSON-LD |
+| `ArticleMeta` | Author, date, read time |
+| `FaqSection` | Expandable FAQ with `FAQPage` schema |
+| `ComparisonTable` | Feature comparison grid |
+| `ProofBand` | Logo/stat proof strip |
+| `ProofBanner` | Quote + metric banner |
+| `InlineTestimonial` | Inline quote block |
+
+### Animation (Magic UI style)
+
+| Component | What it does |
+|-----------|-------------|
+| `AnimatedBeam` | SVG beam connecting elements |
+| `MorphingText` | Text that morphs between strings |
+| `NumberTicker` | Counting number animation |
+| `OrbitingCircles` | Orbiting icon circles |
+| `Particles` | Interactive particle field |
+| `Marquee` | Infinite scroll marquee |
+| `ShimmerButton` | Button with shimmer effect |
+| `GradientText` | Animated gradient text |
+| `TextShimmer` | Shimmering text highlight |
+| `TypingAnimation` | Typewriter effect |
+| `ShineBorder` | Animated border glow |
+| `BackgroundGrid` | Dot/line grid background |
+
+### Layout & Display
+
+| Component | What it does |
+|-----------|-------------|
+| `BentoGrid` | Responsive bento card grid |
+| `BeforeAfter` | Side-by-side before/after |
+| `AnimatedDemo` | Animated product demo frame |
+| `GlowCard` | Card with glow on hover |
+| `ParallaxSection` | Parallax scroll section |
+| `StepTimeline` | Numbered step timeline |
+| `MotionSequence` | Sequenced entrance animations |
+| `AnimatedSection` | Fade-in section wrapper |
+| `AnimatedMetric` | Single animated stat |
+| `MetricsRow` | Row of animated stats |
+
+### Code & Technical
+
+| Component | What it does |
+|-----------|-------------|
+| `AnimatedCodeBlock` | Syntax-highlighted code with line animations |
+| `CodeComparison` | Side-by-side code diff |
+| `TerminalOutput` | Terminal-style output |
+| `FlowDiagram` | Animated flow chart |
+| `SequenceDiagram` | Step sequence diagram |
+| `AnimatedChecklist` | Animated checkbox list |
+
+### CTA
+
+| Component | What it does |
+|-----------|-------------|
+| `InlineCta` | Inline call-to-action block |
+| `StickyBottomCta` | Fixed bottom CTA bar |
+
+### Interactive
+
+| Component | What it does |
+|-----------|-------------|
+| `SitemapSidebar` | Universal sidebar with search, page discovery, subsection tracking |
+| `HeadingAnchors` | Auto-injects `id` on H2s for sidebar linking |
+| `GuideChatPanel` | AI page assistant with Gemini streaming (NDJSON) |
+
+### Video
+
+| Component | What it does |
+|-----------|-------------|
+| `RemotionClip` | Remotion video player embed |
+| `LottiePlayer` | Lottie animation player |
+
+## Server Utilities
+
+```tsx
+import { walkPages, createGuideChatHandler, logAiUsage } from "@seo/components/server";
+```
+
+| Export | What it does |
+|--------|-------------|
+| `walkPages()` | Discovers all pages in `src/app/`, extracts titles, descriptions, H2 sections |
+| `createGuideChatHandler()` | Gemini streaming chat route handler |
+| `discoverGuides()` | Legacy guide discovery (delegates to `walkPages`) |
+| `getGuideContext()` | Builds page context for AI chat |
+| `logAiUsage()` | Token usage tracking |
+| `getSupabaseAdmin()` | Supabase admin client |
+| `slugify()` | URL-safe slug utility |
+
+## JSON-LD Helpers
+
+```tsx
+import { breadcrumbListSchema, faqPageSchema, articleSchema, howToSchema } from "@seo/components";
+```
+
+## Theming
+
+Components use CSS variables for brand colors. Override in your `globals.css`:
+
+```css
+:root {
+  --seo-accent: #0d9488;       /* teal-600 default */
+  --seo-accent-light: #ccfbf1; /* teal-100 */
+  --seo-accent-dark: #134e4a;  /* teal-900 */
+}
+```
+
+## Peer Dependencies
+
+Required: `next >= 14`, `react >= 18`, `framer-motion >= 11`
+
+Optional: `remotion`, `@remotion/player`, `lottie-react`, `@google/generative-ai`, `posthog-js`
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "39 animated React components for programmatic SEO pages. Remotion video, Magic UI style animations, trust signals, JSON-LD helpers. Teal/cyan brand, light-theme only.",
   "type": "module",
   "main": "./src/index.ts",
@@ -31,8 +31,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/m13v/appmaker.git",
-    "directory": "seo-components"
+    "url": "git+https://github.com/m13v/seo-components.git"
   },
   "publishConfig": {
     "access": "public"

package/src/components/GuideChatPanel.tsx

@@ -39,11 +39,10 @@ function onPosthogLoaded(fn: () => void) {
 /*  Slug extraction                                                    */
 /* ------------------------------------------------------------------ */
 
-function slugFromPath(pathname: string | null, pattern?: RegExp): string {
-  if (!pathname) return "";
-  const re = pattern ?? /^\/t\/([^/]+)/;
-  const m = pathname.match(re);
-  return m ? m[1] : "";
+/** Derive a slug from any pathname. "/" returns "" (hidden). */
+function slugFromPath(pathname: string | null): string {
+  if (!pathname || pathname === "/") return "";
+  return pathname.replace(/^\/+/, "").replace(/\/+$/g, "").replace(/\//g, "-");
 }
 
 /* ------------------------------------------------------------------ */
@@ -305,8 +304,8 @@ export interface GuideChatPanelProps {
   app?: string;
   /** API endpoint for the guide chat. Defaults to "/api/guide-chat" */
   apiEndpoint?: string;
-  /** Regex to extract slug from pathname. Must have one capture group. Defaults to /^\\/t\\/([^/]+)/ */
-  slugPattern?: RegExp;
+  /** Paths where the chat panel should be hidden. Same prop as SitemapSidebar's hideOnPaths. */
+  hideOnPaths?: string[];
   /** Panel header label. Defaults to "page assistant" */
   label?: string;
 }
@@ -314,20 +313,21 @@ export interface GuideChatPanelProps {
 export function GuideChatPanel({
   app = "default",
   apiEndpoint = "/api/guide-chat",
-  slugPattern,
+  hideOnPaths,
   label = "page assistant",
 }: GuideChatPanelProps) {
   const pathname = usePathname();
-  const slug = slugFromPath(pathname, slugPattern);
+  const slug = slugFromPath(pathname);
+  const hidden = !slug || (hideOnPaths?.includes(pathname) ?? false);
 
   useEffect(() => {
-    if (!slug) return;
+    if (hidden) return;
     onPosthogLoaded(() =>
       capture("guide_chat_panel_viewed", { app, slug }),
     );
-  }, [slug, app]);
+  }, [hidden, slug, app]);
 
-  if (!slug) return null;
+  if (hidden) return null;
 
   return (
     <aside className="hidden lg:flex flex-col sticky top-0 h-screen w-80 xl:w-96 bg-white border-l border-zinc-200">