@fayz-ai/plugin-linkinbio 0.9.0

package/src/public/components/Reveal.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+/**
+ * Scroll-reveal wrapper: fades + lifts its children into view the first time
+ * they intersect the viewport. Respects prefers-reduced-motion (renders shown).
+ * Works inside the page's `fixed inset-0` scroll container because the default
+ * IntersectionObserver root is the viewport.
+ */
+export function Reveal({
+  children,
+  delay = 0,
+  className,
+}: {
+  children: ReactNode;
+  delay?: number;
+  className?: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [shown, setShown] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const reduce =
+      typeof window !== 'undefined' &&
+      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    if (reduce || typeof IntersectionObserver === 'undefined') {
+      setShown(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setShown(true);
+          io.disconnect();
+        }
+      },
+      { threshold: 0.1, rootMargin: '0px 0px -6% 0px' },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+      style={{
+        opacity: shown ? 1 : 0,
+        transform: shown ? 'none' : 'translateY(22px)',
+        transition: `opacity 0.6s ease ${delay}ms, transform 0.6s cubic-bezier(0.2,0.7,0.2,1) ${delay}ms`,
+        willChange: 'opacity, transform',
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/public/context.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import type { BioPageDataProvider } from './data';
+
+export interface LinkInBioContextValue {
+  provider: BioPageDataProvider;
+  /** Optional "made with" footer link rendered by BioPageRenderer. */
+  poweredBy?: { label: string; url: string };
+  /** Fallback document.title suffix when a page omits seo.title. Default 'Bio'. */
+  titleSuffix: string;
+}
+
+const LinkInBioContext = createContext<LinkInBioContextValue | null>(null);
+
+export function LinkInBioProvider({
+  value,
+  children,
+}: {
+  value: LinkInBioContextValue;
+  children: ReactNode;
+}) {
+  return <LinkInBioContext.Provider value={value}>{children}</LinkInBioContext.Provider>;
+}
+
+export function useLinkInBio(): LinkInBioContextValue {
+  const ctx = useContext(LinkInBioContext);
+  if (!ctx) {
+    throw new Error('useLinkInBio must be used within a LinkInBioProvider (mount the plugin Provider).');
+  }
+  return ctx;
+}

package/src/public/createPublicLinkInBioPlugin.ts

@@ -0,0 +1,81 @@
+import { createElement, type FC, type ReactNode } from 'react';
+import { createSafeDataProvider, type PluginManifest, type PluginScope, type VerticalId } from '@fayz-ai/core';
+import type { BioPage } from '../types';
+import { createMockBioPageProvider, type BioPageDataProvider } from './data';
+import { createSupabaseBioPageProvider } from './data.supabase';
+import { LinkInBioProvider, type LinkInBioContextValue } from './context';
+import BioPageRoute from './BioPage';
+
+export interface PublicLinkInBioOptions {
+  /** Mount prefix for the public bio route. The route is `${basePath}/:slug`. Default '/p'. */
+  basePath?: string;
+  /**
+   * When a Supabase client is configured (setGlobalSupabaseClient) this selects
+   * the Supabase-backed provider. Omit to force the seeded mock provider.
+   */
+  useSupabase?: boolean;
+  /** Table holding bio pages (Supabase mode). Default 'press_kits'. */
+  table?: string;
+  /** Inject a custom provider (overrides the mock/Supabase safe resolver). */
+  dataProvider?: BioPageDataProvider;
+  /** Seed catalog for the mock provider: slug → BioPage (host config / demo content). */
+  seed?: Record<string, BioPage>;
+  /** Optional "made with" footer link rendered on every page. */
+  poweredBy?: { label: string; url: string };
+  /** Fallback `<title>` suffix when a page omits seo.title. Default 'Bio'. */
+  titleSuffix?: string;
+  scope?: PluginScope;
+  verticalId?: VerticalId;
+  defaultEnabled?: boolean;
+}
+
+export interface PublicLinkInBioPlugin {
+  manifest: PluginManifest;
+  Provider: FC<{ children: ReactNode }>;
+  dataProvider: BioPageDataProvider;
+}
+
+export function createPublicLinkInBioPlugin(options: PublicLinkInBioOptions = {}): PublicLinkInBioPlugin {
+  const basePath = options.basePath ?? '/p';
+  const table = options.table ?? 'press_kits';
+  const seed = options.seed ?? {};
+
+  // Resolution: explicit dataProvider → Supabase (when a global client is
+  // configured AND useSupabase !== false) → seeded mock. Deferred + memoized so
+  // importing the plugin never forces a Supabase connection.
+  const provider: BioPageDataProvider =
+    options.dataProvider ??
+    (options.useSupabase === false
+      ? createMockBioPageProvider({ seed })
+      : createSafeDataProvider<BioPageDataProvider>(
+          () => createSupabaseBioPageProvider({ table }),
+          () => createMockBioPageProvider({ seed }),
+        ));
+
+  const contextValue: LinkInBioContextValue = {
+    provider,
+    poweredBy: options.poweredBy,
+    titleSuffix: options.titleSuffix ?? 'Bio',
+  };
+
+  const Provider: FC<{ children: ReactNode }> = ({ children }) =>
+    createElement(LinkInBioProvider, { value: contextValue, children });
+  Provider.displayName = 'LinkInBioProvider';
+
+  const manifest: PluginManifest = {
+    id: 'linkinbio',
+    name: 'Link in Bio',
+    icon: 'Link',
+    version: '0.1.0',
+    scope: options.scope ?? 'universal',
+    verticalId: options.verticalId,
+    scaffolds: ['website', 'landing_page'],
+    defaultEnabled: options.defaultEnabled ?? true,
+    dependencies: [],
+    navigation: [],
+    routes: [{ path: `${basePath}/:slug`, component: BioPageRoute, guard: 'public', fullBleed: true }],
+    widgets: [],
+  };
+
+  return { manifest, Provider, dataProvider: provider };
+}

package/src/public/data.supabase.ts

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { getSupabaseClientOptional } from '@fayz-ai/core';
+import type { BioPage } from '../types';
+import type { BioPageDataProvider } from './data';
+
+export interface SupabaseBioPageOptions {
+  /**
+   * Table holding bio pages. Defaults to `press_kits` — a jsonb `data` column
+   * with the full BioPage payload, plus `slug` and `is_published` columns and
+   * an RLS policy allowing anon SELECT when `is_published` is true.
+   */
+  table?: string;
+}
+
+export function createSupabaseBioPageProvider(options: SupabaseBioPageOptions = {}): BioPageDataProvider {
+  const table = options.table ?? 'press_kits';
+  return {
+    async getBySlug(slug: string): Promise<BioPage | null> {
+      const client = getSupabaseClientOptional() as any;
+      if (!client) return null;
+      const { data, error } = await client
+        .from(table)
+        .select('data, is_published')
+        .eq('slug', slug)
+        .maybeSingle();
+      if (error || !data) return null;
+      if (!data.is_published) return null;
+      return data.data as BioPage;
+    },
+  };
+}

package/src/public/data.ts

@@ -0,0 +1,29 @@
+import type { BioPage } from '../types';
+
+// ---------------------------------------------------------------------------
+// BioPageDataProvider — the read seam for the public bio page.
+//
+// Two implementations ship: a mock provider seeded from an in-memory map (host
+// config / demo content) and a Supabase provider (data.supabase.ts). The
+// factory picks between them via createSafeDataProvider — Supabase when a global
+// client is configured, mock otherwise.
+// ---------------------------------------------------------------------------
+
+export interface BioPageDataProvider {
+  /** Resolve a published bio page by its public slug, or null when missing/unpublished. */
+  getBySlug(slug: string): Promise<BioPage | null>;
+}
+
+export interface MockBioPageOptions {
+  /** slug → BioPage map used as the mock catalog. */
+  seed?: Record<string, BioPage>;
+}
+
+export function createMockBioPageProvider(options: MockBioPageOptions = {}): BioPageDataProvider {
+  const seed = options.seed ?? {};
+  return {
+    async getBySlug(slug: string): Promise<BioPage | null> {
+      return seed[slug] ?? null;
+    },
+  };
+}

package/src/public/index.ts

@@ -0,0 +1,75 @@
+// ---------------------------------------------------------------------------
+// @fayz-ai/plugin-linkinbio/public — customer-facing link-in-bio surface.
+//
+// A komi/linktree-style public bio page for any creator: identity + branding +
+// an ordered list of content blocks. Separate entry from the admin plugin so a
+// website host imports only the renderer + data seam (no editor graph).
+//
+// Data: BioPageDataProvider — a seeded mock by default, Supabase (`press_kits`
+// jsonb) when a global client is configured. Extend the block set with
+// registerBlock(type, component).
+// ---------------------------------------------------------------------------
+
+export { createPublicLinkInBioPlugin } from './createPublicLinkInBioPlugin';
+export type { PublicLinkInBioOptions, PublicLinkInBioPlugin } from './createPublicLinkInBioPlugin';
+
+export { default as BioPageRenderer } from './BioPageRenderer';
+export type { BioPageRendererProps } from './BioPageRenderer';
+export { default as BioPage } from './BioPage';
+export { LinkInBioProvider, useLinkInBio } from './context';
+export type { LinkInBioContextValue } from './context';
+
+// Block registry — the extensibility seam
+export { registerBlock, getBlock, hasBlock } from './registry';
+export type { BlockRenderProps, BlockComponent } from './registry';
+
+// Data seam
+export { createMockBioPageProvider } from './data';
+export type { BioPageDataProvider, MockBioPageOptions } from './data';
+export { createSupabaseBioPageProvider } from './data.supabase';
+export type { SupabaseBioPageOptions } from './data.supabase';
+
+// Rendering helpers (useful inside custom blocks)
+export {
+  renderMarkdown,
+  platformColors,
+  platformLabels,
+  platformIconMap,
+  borderRadiusMap,
+  getBrandingVars,
+} from './utils';
+
+// Domain types
+export type {
+  BioPage as BioPageData,
+  BioBlock,
+  BioBranding,
+  BioIdentity,
+  BioSEO,
+  BioSocialLink,
+  BioMediaItem,
+  BioFloatingCTA,
+  HeroSection,
+  BioSection,
+  GallerySection,
+  VideoGridSection,
+  SocialLinksSection,
+  EmbedSection,
+  ProjectSection,
+  StatsSection,
+  VenueListSection,
+  CTASection,
+  TextSection,
+  ProfileHeaderSection,
+  LinksSection,
+  LinkCardItem,
+  MusicReleasesSection,
+  MusicReleaseItem,
+  TourDatesSection,
+  TourDateItem,
+  FeaturedSection,
+} from '../types';
+
+// Shared UI (useful when composing custom blocks)
+export { Reveal } from './components/Reveal';
+export { Carousel } from './components/Carousel';

package/src/public/registry.ts

@@ -0,0 +1,40 @@
+import type { ComponentType } from 'react';
+import type { BioBlock, BioPage } from '../types';
+
+// ---------------------------------------------------------------------------
+// Block registry — the extensibility seam.
+//
+// The 11 built-in blocks are rendered by BioPageRenderer's switch. Hosts that
+// need a niche block type (e.g. a DJ tour map, a course catalog) register it
+// here; BioPageRenderer consults the registry BEFORE its built-in switch, so a
+// registered type wins and unknown types render nothing. This keeps the plugin
+// komi-generic while letting each app extend it without forking.
+//
+//   import { registerBlock } from '@fayz-ai/plugin-linkinbio/public'
+//   registerBlock('tour-map', ({ block }) => <TourMap stops={block.stops} />)
+// ---------------------------------------------------------------------------
+
+/** Uniform props every registered block component receives. */
+export interface BlockRenderProps<B = BioBlock> {
+  block: B;
+  page: BioPage;
+}
+
+export type BlockComponent<B = BioBlock> = ComponentType<BlockRenderProps<B>>;
+
+const registry = new Map<string, BlockComponent<never>>();
+
+/** Register a custom block renderer for a `type` string not covered by the built-ins. */
+export function registerBlock<B extends { type: string }>(type: B['type'], component: BlockComponent<B>): void {
+  registry.set(type, component as unknown as BlockComponent<never>);
+}
+
+/** Look up a host-registered block renderer, or undefined for built-in/unknown types. */
+export function getBlock(type: string): BlockComponent<never> | undefined {
+  return registry.get(type);
+}
+
+/** Whether a host has registered a renderer for this type (built-ins are not in the registry). */
+export function hasBlock(type: string): boolean {
+  return registry.has(type);
+}

package/src/public/utils.ts

@@ -0,0 +1,102 @@
+import { Instagram, Music, Youtube, Globe, Mail, Phone, Facebook, Twitter } from 'lucide-react';
+import type { BioBranding } from '../types';
+
+// Lightweight markdown → HTML renderer (bold, italic, links, paragraphs)
+export function renderMarkdown(md: string): string {
+  return md
+    .split(/\n\n+/)
+    .map((block) => {
+      const html = block
+        .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
+        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*(.+?)\*/g, '<em>$1</em>')
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
+        .replace(/\n/g, '<br />');
+      return `<p>${html}</p>`;
+    })
+    .join('');
+}
+
+export const platformColors: Record<string, string> = {
+  instagram: '#E4405F',
+  spotify: '#1DB954',
+  soundcloud: '#FF5500',
+  youtube: '#FF0000',
+  tiktok: '#000000',
+  whatsapp: '#25D366',
+  email: '#EA4335',
+  twitter: '#1DA1F2',
+  facebook: '#1877F2',
+  bandcamp: '#629AA9',
+  mixcloud: '#5000FF',
+  beatport: '#94D500',
+  'apple-music': '#FC3C44',
+  deezer: '#FEAA2D',
+  telegram: '#0088CC',
+  website: '#888888',
+  custom: '#888888',
+};
+
+export const platformLabels: Record<string, string> = {
+  instagram: 'Instagram',
+  spotify: 'Spotify',
+  soundcloud: 'SoundCloud',
+  youtube: 'YouTube',
+  tiktok: 'TikTok',
+  whatsapp: 'WhatsApp',
+  email: 'Email',
+  twitter: 'Twitter / X',
+  facebook: 'Facebook',
+  bandcamp: 'Bandcamp',
+  mixcloud: 'Mixcloud',
+  beatport: 'Beatport',
+  'apple-music': 'Apple Music',
+  deezer: 'Deezer',
+  telegram: 'Telegram',
+  website: 'Website',
+  custom: 'Link',
+};
+
+export const platformIconMap: Record<string, typeof Instagram> = {
+  instagram: Instagram,
+  spotify: Music,
+  soundcloud: Music,
+  youtube: Youtube,
+  tiktok: Music,
+  whatsapp: Phone,
+  email: Mail,
+  twitter: Twitter,
+  facebook: Facebook,
+  bandcamp: Music,
+  mixcloud: Music,
+  beatport: Music,
+  'apple-music': Music,
+  deezer: Music,
+  telegram: Globe,
+  website: Globe,
+  custom: Globe,
+};
+
+export const borderRadiusMap: Record<string, string> = {
+  none: '0px',
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+  full: '9999px',
+};
+
+export function getBrandingVars(branding: BioBranding): Record<string, string> {
+  return {
+    '--pk-primary': branding.primaryColor,
+    '--pk-secondary': branding.secondaryColor,
+    '--pk-accent': branding.accentColor,
+    '--pk-bg': branding.backgroundColor,
+    '--pk-text': branding.textColor,
+    '--pk-muted': branding.mutedTextColor,
+    '--pk-radius': borderRadiusMap[branding.borderRadius ?? 'md'],
+    '--pk-font-heading': branding.fontHeading ?? "'Space Grotesk', sans-serif",
+    '--pk-font-body': branding.fontBody ?? "'DM Sans', sans-serif",
+    '--pk-alt-bg': branding.sectionAltBg ?? branding.backgroundColor,
+    '--pk-alt-bg2': branding.sectionAltBg2 ?? branding.backgroundColor,
+  };
+}