keystone-design-bootstrap 1.0.55 → 1.0.57

package/dist/lib/hooks/index.js

@@ -102,9 +102,81 @@ function useResizeObserver(options) {
     }
   }, [onResize, ref, box]);
 }
+
+// src/lib/hooks/use-image-cycle.ts
+import { useState as useState2, useEffect as useEffect2, useMemo } from "react";
+var CYCLE_INTERVAL_MIN_MS = 6e3;
+var CYCLE_INTERVAL_MAX_MS = 8e3;
+var CROSSFADE_DURATION_MS = 600;
+function seedToUnit(seed) {
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0 >>> 0;
+  }
+  return (h >>> 0) / 4294967296;
+}
+function shuffleWithSeed(array, seed) {
+  if (array.length <= 1) return array;
+  const arr = [...array];
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0 >>> 0;
+  }
+  const next = (step) => {
+    h = Math.imul(1664525, h + step >>> 0) + 1013904223 >>> 0;
+    return (h >>> 0) / 4294967296;
+  };
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(next(i) * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+  return arr;
+}
+function photoUrlFromAttachment(pa) {
+  var _a, _b, _c;
+  return ((_a = pa.photo) == null ? void 0 : _a.large_url) || ((_b = pa.photo) == null ? void 0 : _b.medium_url) || ((_c = pa.photo) == null ? void 0 : _c.thumbnail_url);
+}
+function photoAltFromAttachment(pa) {
+  var _a, _b;
+  return ((_a = pa.photo) == null ? void 0 : _a.alt_text) || ((_b = pa.photo) == null ? void 0 : _b.title) || "";
+}
+function useImageCycle(photoAttachments, seed) {
+  const list = useMemo(() => {
+    const arr = Array.isArray(photoAttachments) && photoAttachments.length > 0 ? photoAttachments : [];
+    if (arr.length === 0) return [];
+    return shuffleWithSeed(arr, seed).map((pa) => {
+      var _a;
+      return { url: (_a = photoUrlFromAttachment(pa)) != null ? _a : "", alt: photoAltFromAttachment(pa) };
+    }).filter((x) => x.url);
+  }, [photoAttachments, seed]);
+  const [currentIndex, setCurrentIndex] = useState2(0);
+  const [transitioning, setTransitioning] = useState2(false);
+  const intervalMs = useMemo(
+    () => CYCLE_INTERVAL_MIN_MS + Math.floor(seedToUnit(seed) * (CYCLE_INTERVAL_MAX_MS - CYCLE_INTERVAL_MIN_MS + 1)),
+    [seed]
+  );
+  useEffect2(() => {
+    if (list.length <= 1) return;
+    const id = setInterval(() => setTransitioning(true), intervalMs);
+    return () => clearInterval(id);
+  }, [list.length, intervalMs]);
+  useEffect2(() => {
+    if (!transitioning || list.length <= 1) return;
+    const t = setTimeout(() => {
+      setCurrentIndex((i) => (i + 1) % list.length);
+      setTransitioning(false);
+    }, CROSSFADE_DURATION_MS);
+    return () => clearTimeout(t);
+  }, [transitioning, list.length]);
+  const nextIndex = list.length > 1 ? (currentIndex + 1) % list.length : 0;
+  return { list, currentIndex, nextIndex, transitioning };
+}
 export {
   useBreakpoint,
   useClipboard,
+  useImageCycle,
   useResizeObserver
 };
 //# sourceMappingURL=index.js.map

package/dist/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/hooks/use-breakpoint.ts","../../../src/lib/hooks/use-clipboard.ts","../../../src/lib/hooks/use-resize-observer.ts"],"sourcesContent":["\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\nconst screens = {\n    sm: \"640px\",\n    md: \"768px\",\n    lg: \"1024px\",\n    xl: \"1280px\",\n    \"2xl\": \"1536px\",\n};\n\n/**\n * Checks whether a particular Tailwind CSS viewport size applies.\n *\n * @param size The size to check, which must either be included in Tailwind CSS's\n * list of default screen sizes, or added to the Tailwind CSS config file.\n *\n * @returns A boolean indicating whether the viewport size applies.\n */\nexport const useBreakpoint = (size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\") => {\n    return useSyncExternalStore(\n        (onStoreChange) => {\n            if (typeof window === \"undefined\") {\n                return () => {};\n            }\n            const breakpoint = window.matchMedia(`(min-width: ${screens[size]})`);\n            breakpoint.addEventListener(\"change\", onStoreChange);\n            return () => breakpoint.removeEventListener(\"change\", onStoreChange);\n        },\n        () => {\n            if (typeof window === \"undefined\") {\n                return true;\n            }\n            return window.matchMedia(`(min-width: ${screens[size]})`).matches;\n        },\n        () => true\n    );\n};\n\n","\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\nconst DEFAULT_TIMEOUT = 2000;\n\ntype UseClipboardReturnType = {\n    /**\n     * The state indicating whether the text has been copied.\n     * If a string is provided, it will be used as the identifier for the copied state.\n     */\n    copied: string | boolean;\n    /**\n     * Function to copy text to the clipboard using the modern clipboard API.\n     * Falls back to the fallback function if the modern API fails.\n     *\n     * @param {string} text - The text to be copied.\n     * @param {string} [id] - Optional identifier to set the copied state.\n     * @returns {Promise<Object>} - A promise that resolves to an object containing:\n     *  - `success` (boolean): Whether the copy operation was successful.\n     *  - `error` (Error | undefined): The error object if the copy operation failed.\n     */\n    copy: (text: string, id?: string) => Promise<{ success: boolean; error?: Error }>;\n};\n\n/**\n * Custom hook to copy text to the clipboard.\n *\n * @returns {UseClipboardReturnType} - An object containing the copied state and the copy function.\n */\nexport const useClipboard = (): UseClipboardReturnType => {\n    const [copied, setCopied] = useState<string | boolean>(false);\n\n    // Fallback function for older browsers\n    const fallback = (text: string, id?: string) => {\n        try {\n            // Textarea to copy the text to the clipboard\n            const textArea = document.createElement(\"textarea\");\n            textArea.value = text;\n            textArea.style.position = \"absolute\";\n            textArea.style.left = \"-99999px\";\n\n            document.body.appendChild(textArea);\n            textArea.select();\n\n            const success = document.execCommand(\"copy\");\n            textArea.remove();\n\n            setCopied(id || true);\n            setTimeout(() => setCopied(false), DEFAULT_TIMEOUT);\n\n            return success ? { success: true } : { success: false, error: new Error(\"execCommand returned false\") };\n        } catch (err) {\n            return {\n                success: false,\n                error: err instanceof Error ? err : new Error(\"Fallback copy failed\"),\n            };\n        }\n    };\n\n    const copy = useCallback(async (text: string, id?: string) => {\n        if (navigator.clipboard && window.isSecureContext) {\n            try {\n                await navigator.clipboard.writeText(text);\n\n                setCopied(id || true);\n                setTimeout(() => setCopied(false), DEFAULT_TIMEOUT);\n\n                return { success: true };\n            } catch {\n                // If modern method fails, try fallback\n                return fallback(text, id);\n            }\n        }\n        return fallback(text);\n    }, []);\n\n    return { copied, copy };\n};\n","import { useEffect } from \"react\";\nimport type { RefObject } from \"@react-types/shared\";\n\n/**\n * Checks if the ResizeObserver API is supported.\n * @returns True if the ResizeObserver API is supported, false otherwise.\n */\nfunction hasResizeObserver() {\n    return typeof window.ResizeObserver !== \"undefined\";\n}\n\n/**\n * The options for the useResizeObserver hook.\n */\ntype useResizeObserverOptionsType<T> = {\n    /**\n     * The ref to the element to observe.\n     */\n    ref: RefObject<T | undefined | null> | undefined;\n    /**\n     * The box to observe.\n     */\n    box?: ResizeObserverBoxOptions;\n    /**\n     * The callback function to call when the size changes.\n     */\n    onResize: () => void;\n};\n\n/**\n * A hook that observes the size of an element and calls a callback function when the size changes.\n * @param options - The options for the hook.\n */\nexport function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>) {\n    const { ref, box, onResize } = options;\n\n    useEffect(() => {\n        const element = ref?.current;\n        if (!element) {\n            return;\n        }\n\n        if (!hasResizeObserver()) {\n            window.addEventListener(\"resize\", onResize, false);\n\n            return () => {\n                window.removeEventListener(\"resize\", onResize, false);\n            };\n        } else {\n            const resizeObserverInstance = new window.ResizeObserver((entries) => {\n                if (!entries.length) {\n                    return;\n                }\n\n                onResize();\n            });\n\n            resizeObserverInstance.observe(element, { box });\n\n            return () => {\n                if (element) {\n                    resizeObserverInstance.unobserve(element);\n                }\n            };\n        }\n    }, [onResize, ref, box]);\n}\n\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/hooks/use-breakpoint.ts","../../../src/lib/hooks/use-clipboard.ts","../../../src/lib/hooks/use-resize-observer.ts","../../../src/lib/hooks/use-image-cycle.ts"],"sourcesContent":["\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\nconst screens = {\n    sm: \"640px\",\n    md: \"768px\",\n    lg: \"1024px\",\n    xl: \"1280px\",\n    \"2xl\": \"1536px\",\n};\n\n/**\n * Checks whether a particular Tailwind CSS viewport size applies.\n *\n * @param size The size to check, which must either be included in Tailwind CSS's\n * list of default screen sizes, or added to the Tailwind CSS config file.\n *\n * @returns A boolean indicating whether the viewport size applies.\n */\nexport const useBreakpoint = (size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\") => {\n    return useSyncExternalStore(\n        (onStoreChange) => {\n            if (typeof window === \"undefined\") {\n                return () => {};\n            }\n            const breakpoint = window.matchMedia(`(min-width: ${screens[size]})`);\n            breakpoint.addEventListener(\"change\", onStoreChange);\n            return () => breakpoint.removeEventListener(\"change\", onStoreChange);\n        },\n        () => {\n            if (typeof window === \"undefined\") {\n                return true;\n            }\n            return window.matchMedia(`(min-width: ${screens[size]})`).matches;\n        },\n        () => true\n    );\n};\n\n","\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\nconst DEFAULT_TIMEOUT = 2000;\n\ntype UseClipboardReturnType = {\n    /**\n     * The state indicating whether the text has been copied.\n     * If a string is provided, it will be used as the identifier for the copied state.\n     */\n    copied: string | boolean;\n    /**\n     * Function to copy text to the clipboard using the modern clipboard API.\n     * Falls back to the fallback function if the modern API fails.\n     *\n     * @param {string} text - The text to be copied.\n     * @param {string} [id] - Optional identifier to set the copied state.\n     * @returns {Promise<Object>} - A promise that resolves to an object containing:\n     *  - `success` (boolean): Whether the copy operation was successful.\n     *  - `error` (Error | undefined): The error object if the copy operation failed.\n     */\n    copy: (text: string, id?: string) => Promise<{ success: boolean; error?: Error }>;\n};\n\n/**\n * Custom hook to copy text to the clipboard.\n *\n * @returns {UseClipboardReturnType} - An object containing the copied state and the copy function.\n */\nexport const useClipboard = (): UseClipboardReturnType => {\n    const [copied, setCopied] = useState<string | boolean>(false);\n\n    // Fallback function for older browsers\n    const fallback = (text: string, id?: string) => {\n        try {\n            // Textarea to copy the text to the clipboard\n            const textArea = document.createElement(\"textarea\");\n            textArea.value = text;\n            textArea.style.position = \"absolute\";\n            textArea.style.left = \"-99999px\";\n\n            document.body.appendChild(textArea);\n            textArea.select();\n\n            const success = document.execCommand(\"copy\");\n            textArea.remove();\n\n            setCopied(id || true);\n            setTimeout(() => setCopied(false), DEFAULT_TIMEOUT);\n\n            return success ? { success: true } : { success: false, error: new Error(\"execCommand returned false\") };\n        } catch (err) {\n            return {\n                success: false,\n                error: err instanceof Error ? err : new Error(\"Fallback copy failed\"),\n            };\n        }\n    };\n\n    const copy = useCallback(async (text: string, id?: string) => {\n        if (navigator.clipboard && window.isSecureContext) {\n            try {\n                await navigator.clipboard.writeText(text);\n\n                setCopied(id || true);\n                setTimeout(() => setCopied(false), DEFAULT_TIMEOUT);\n\n                return { success: true };\n            } catch {\n                // If modern method fails, try fallback\n                return fallback(text, id);\n            }\n        }\n        return fallback(text);\n    }, []);\n\n    return { copied, copy };\n};\n","import { useEffect } from \"react\";\nimport type { RefObject } from \"@react-types/shared\";\n\n/**\n * Checks if the ResizeObserver API is supported.\n * @returns True if the ResizeObserver API is supported, false otherwise.\n */\nfunction hasResizeObserver() {\n    return typeof window.ResizeObserver !== \"undefined\";\n}\n\n/**\n * The options for the useResizeObserver hook.\n */\ntype useResizeObserverOptionsType<T> = {\n    /**\n     * The ref to the element to observe.\n     */\n    ref: RefObject<T | undefined | null> | undefined;\n    /**\n     * The box to observe.\n     */\n    box?: ResizeObserverBoxOptions;\n    /**\n     * The callback function to call when the size changes.\n     */\n    onResize: () => void;\n};\n\n/**\n * A hook that observes the size of an element and calls a callback function when the size changes.\n * @param options - The options for the hook.\n */\nexport function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>) {\n    const { ref, box, onResize } = options;\n\n    useEffect(() => {\n        const element = ref?.current;\n        if (!element) {\n            return;\n        }\n\n        if (!hasResizeObserver()) {\n            window.addEventListener(\"resize\", onResize, false);\n\n            return () => {\n                window.removeEventListener(\"resize\", onResize, false);\n            };\n        } else {\n            const resizeObserverInstance = new window.ResizeObserver((entries) => {\n                if (!entries.length) {\n                    return;\n                }\n\n                onResize();\n            });\n\n            resizeObserverInstance.observe(element, { box });\n\n            return () => {\n                if (element) {\n                    resizeObserverInstance.unobserve(element);\n                }\n            };\n        }\n    }, [onResize, ref, box]);\n}\n\n","'use client';\n\nimport { useState, useEffect, useMemo } from 'react';\nimport type { PhotoAttachment } from '../../types/api/photos';\n\nconst CYCLE_INTERVAL_MIN_MS = 6000;\nconst CYCLE_INTERVAL_MAX_MS = 8000;\nexport const CROSSFADE_DURATION_MS = 600;\n\nexport interface CycledImage {\n  url: string;\n  alt: string;\n}\n\nexport interface UseImageCycleResult {\n  list: CycledImage[];\n  currentIndex: number;\n  nextIndex: number;\n  transitioning: boolean;\n}\n\n/** Stable value in [0, 1) derived from seed string (FNV-1a hash). Same seed always produces same value. */\nfunction seedToUnit(seed: string): number {\n  let h = 2166136261 >>> 0;\n  for (let i = 0; i < seed.length; i++) {\n    h ^= seed.charCodeAt(i);\n    h = (Math.imul(h, 16777619) >>> 0) >>> 0;\n  }\n  return (h >>> 0) / 4294967296;\n}\n\n/** Seeded Fisher-Yates shuffle. Same seed produces same order (SSR-safe). */\nfunction shuffleWithSeed<T>(array: T[], seed: string): T[] {\n  if (array.length <= 1) return array;\n  const arr = [...array];\n  let h = 2166136261 >>> 0;\n  for (let i = 0; i < seed.length; i++) {\n    h ^= seed.charCodeAt(i);\n    h = (Math.imul(h, 16777619) >>> 0) >>> 0;\n  }\n  const next = (step: number) => {\n    h = (Math.imul(1664525, (h + step) >>> 0) + 1013904223) >>> 0;\n    return (h >>> 0) / 4294967296;\n  };\n  for (let i = arr.length - 1; i > 0; i--) {\n    const j = Math.floor(next(i) * (i + 1));\n    [arr[i], arr[j]] = [arr[j], arr[i]];\n  }\n  return arr;\n}\n\nfunction photoUrlFromAttachment(pa: PhotoAttachment): string | undefined {\n  return pa.photo?.large_url || pa.photo?.medium_url || pa.photo?.thumbnail_url;\n}\n\nfunction photoAltFromAttachment(pa: PhotoAttachment): string {\n  return pa.photo?.alt_text || pa.photo?.title || '';\n}\n\n/**\n * Cycles through a list of photo attachments with a seeded shuffle and crossfade transitions.\n *\n * Each card uses a unique seed so intervals are staggered — cards don't all transition in sync.\n * The shuffle is deterministic (SSR-safe) and the timer only activates when there are 2+ images.\n */\nexport function useImageCycle(\n  photoAttachments: PhotoAttachment[] | undefined,\n  seed: string\n): UseImageCycleResult {\n  const list = useMemo<CycledImage[]>(() => {\n    const arr = Array.isArray(photoAttachments) && photoAttachments.length > 0 ? photoAttachments : [];\n    if (arr.length === 0) return [];\n    return shuffleWithSeed(arr, seed)\n      .map((pa) => ({ url: photoUrlFromAttachment(pa) ?? '', alt: photoAltFromAttachment(pa) }))\n      .filter((x) => x.url);\n  }, [photoAttachments, seed]);\n\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [transitioning, setTransitioning] = useState(false);\n\n  // Per-card random interval (6–8 s) so cards don't all transition in sync\n  const intervalMs = useMemo(\n    () => CYCLE_INTERVAL_MIN_MS + Math.floor(seedToUnit(seed) * (CYCLE_INTERVAL_MAX_MS - CYCLE_INTERVAL_MIN_MS + 1)),\n    [seed]\n  );\n\n  useEffect(() => {\n    if (list.length <= 1) return;\n    const id = setInterval(() => setTransitioning(true), intervalMs);\n    return () => clearInterval(id);\n  }, [list.length, intervalMs]);\n\n  useEffect(() => {\n    if (!transitioning || list.length <= 1) return;\n    const t = setTimeout(() => {\n      setCurrentIndex((i) => (i + 1) % list.length);\n      setTransitioning(false);\n    }, CROSSFADE_DURATION_MS);\n    return () => clearTimeout(t);\n  }, [transitioning, list.length]);\n\n  const nextIndex = list.length > 1 ? (currentIndex + 1) % list.length : 0;\n\n  return { list, currentIndex, nextIndex, transitioning };\n}\n"],"mappings":"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","names":["useState","useEffect"]}

package/dist/lib/server-api.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/server-api.ts"],"sourcesContent":["/**\n * Server-side API client for SSR\n * API key is stored securely on the server - never exposed to browser\n */\n\nimport type { CompanyInformation } from '../types/api/company-information';\nimport type { Service } from '../types/api/service';\nimport type { WebsitePhotos } from '../types/api/website-photos';\n\nconst API_URL = process.env.API_URL || 'http://localhost:3000/api/v1';\nconst API_KEY = process.env.API_KEY || '';\n\ninterface FetchOptions {\n  cache?: RequestCache;\n  revalidate?: number;\n}\n\nasync function serverFetch<T>(endpoint: string, options: FetchOptions = {}): Promise<T | null> {\n  const url = `${API_URL}${endpoint}`;\n  \n  try {\n    const fetchOptions: RequestInit & { next?: { revalidate?: number } } = {\n      headers: {\n        'X-API-Key': API_KEY,\n        'Content-Type': 'application/json',\n      },\n      cache: options.cache,\n    };\n    \n    if (options.revalidate) {\n      fetchOptions.next = { revalidate: options.revalidate };\n    }\n    \n    const response = await fetch(url, fetchOptions);\n\n    if (!response.ok) {\n      console.error(`[Server API] Error ${response.status} for ${endpoint}`);\n      return null;\n    }\n\n    const json = await response.json();\n    \n    // Rails API returns { data: [...], meta: {...} }\n    return json.data ?? json;\n  } catch (error) {\n    console.error(`[Server API] Failed to fetch ${endpoint}:`, error);\n    return null;\n  }\n}\n\n/**\n * Generic serverApi object for flexible endpoint access\n */\nexport const serverApi = {\n  get: <T = unknown>(endpoint: string, options?: FetchOptions): Promise<T | null> => {\n    return serverFetch<T>(endpoint, options || { revalidate: 60 });\n  }\n};\n\n// Revalidate data every 60 seconds (ISR)\nconst defaultOptions: FetchOptions = { revalidate: 60 };\n\nexport async function getCompanyInformation(): Promise<CompanyInformation | null> {\n  return serverFetch<CompanyInformation>('/public/company_information', defaultOptions);\n}\n\n/** Ads config (e.g. Meta Pixel). Returns { meta_pixel_id?: string } or {}. Only present when account has connected Meta Ads. */\nexport async function getAdsConfig(): Promise<{ meta_pixel_id?: string } | null> {\n  const data = await serverFetch<{ meta_pixel_id?: string }>('/public/ads_config', defaultOptions);\n  return data ?? null;\n}\n\n/** Extract Meta Pixel ID from ads config for use with <MetaPixel pixelId={...} />. Only returns a value when present and valid (numeric). */\nexport function getMetaPixelId(adsConfig: { meta_pixel_id?: string } | null | undefined): string | null {\n  const id = adsConfig && typeof adsConfig === 'object' && 'meta_pixel_id' in adsConfig && adsConfig.meta_pixel_id;\n  const str = id != null && id !== '' ? String(id).trim() : '';\n  return str !== '' && str !== 'null' && /^\\d+$/.test(str) ? str : null;\n}\n\nexport async function getServices() {\n  return serverFetch('/public/services', defaultOptions);\n}\n\nexport async function getService(slug: string): Promise<Service | null> {\n  return serverFetch<Service>(`/public/services/by_slug/${slug}`, defaultOptions);\n}\n\nexport async function getLocations() {\n  return serverFetch('/public/locations', defaultOptions);\n}\n\nexport async function getLocation(slug: string) {\n  return serverFetch(`/public/locations/by_slug/${slug}`, defaultOptions);\n}\n\nexport async function getReviews() {\n  return serverFetch('/public/reviews', defaultOptions);\n}\n\nexport async function getFAQs() {\n  return serverFetch('/public/faq_questions', defaultOptions);\n}\n\nexport async function getBlogPosts() {\n  return serverFetch('/public/blog_posts', defaultOptions);\n}\n\nexport async function getBlogPost(slug: string) {\n  return serverFetch(`/public/blog_posts/by_slug/${slug}`, defaultOptions);\n}\n\nexport async function getTeamMembers() {\n  return serverFetch('/public/team_members', defaultOptions);\n}\n\nexport async function getWebsitePhotos(): Promise<WebsitePhotos | null> {\n  return serverFetch<WebsitePhotos>('/public/website_photos', defaultOptions);\n}\n\nexport async function getJobPostings() {\n  return serverFetch('/public/job_postings', defaultOptions);\n}\n\nexport async function getJobPosting(slug: string) {\n  return serverFetch(`/public/job_postings/by_slug/${slug}`, defaultOptions);\n}\n\nexport async function getSocialPosts() {\n  return serverFetch('/public/social_posts', defaultOptions);\n}\n\n/** Packages (bundles of service items). */\nexport async function getPackages() {\n  return serverFetch('/public/packages', defaultOptions);\n}\n\nexport async function getPackage(slug: string) {\n  return serverFetch(`/public/packages/by_slug/${encodeURIComponent(slug)}`, defaultOptions);\n}\n\n// Alias for testimonials (API uses \"reviews\")\nexport async function getTestimonials() {\n  return getReviews();\n}\n\n/** Form definition for dynamic form rendering (fields may include optional placeholder). */\nexport async function getForm(formType: string) {\n  type FormDefinition = import('../types/api/form').FormDefinition;\n  return serverFetch<FormDefinition>(`/public/forms/${encodeURIComponent(formType)}`, defaultOptions);\n}\n\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/lib/server-api.ts"],"sourcesContent":["/**\n * Server-side API client for SSR\n * API key is stored securely on the server - never exposed to browser\n */\n\nimport type { CompanyInformation } from '../types/api/company-information';\nimport type { Service } from '../types/api/service';\nimport type { Package } from '../types/api/package';\nimport type { WebsitePhotos } from '../types/api/website-photos';\n\nconst API_URL = process.env.API_URL || 'http://localhost:3000/api/v1';\nconst API_KEY = process.env.API_KEY || '';\n\ninterface FetchOptions {\n  cache?: RequestCache;\n  revalidate?: number;\n}\n\nasync function serverFetch<T>(endpoint: string, options: FetchOptions = {}): Promise<T | null> {\n  const url = `${API_URL}${endpoint}`;\n  \n  try {\n    const fetchOptions: RequestInit & { next?: { revalidate?: number } } = {\n      headers: {\n        'X-API-Key': API_KEY,\n        'Content-Type': 'application/json',\n      },\n      cache: options.cache,\n    };\n    \n    if (options.revalidate) {\n      fetchOptions.next = { revalidate: options.revalidate };\n    }\n    \n    const response = await fetch(url, fetchOptions);\n\n    if (!response.ok) {\n      console.error(`[Server API] Error ${response.status} for ${endpoint}`);\n      return null;\n    }\n\n    const json = await response.json();\n    \n    // Rails API returns { data: [...], meta: {...} }\n    return json.data ?? json;\n  } catch (error) {\n    console.error(`[Server API] Failed to fetch ${endpoint}:`, error);\n    return null;\n  }\n}\n\n/**\n * Generic serverApi object for flexible endpoint access\n */\nexport const serverApi = {\n  get: <T = unknown>(endpoint: string, options?: FetchOptions): Promise<T | null> => {\n    return serverFetch<T>(endpoint, options || { revalidate: 60 });\n  }\n};\n\n// Revalidate data every 60 seconds (ISR)\nconst defaultOptions: FetchOptions = { revalidate: 60 };\n\nexport async function getCompanyInformation(): Promise<CompanyInformation | null> {\n  return serverFetch<CompanyInformation>('/public/company_information', defaultOptions);\n}\n\n/** Ads config (e.g. Meta Pixel). Returns { meta_pixel_id?: string } or {}. Only present when account has connected Meta Ads. */\nexport async function getAdsConfig(): Promise<{ meta_pixel_id?: string } | null> {\n  const data = await serverFetch<{ meta_pixel_id?: string }>('/public/ads_config', defaultOptions);\n  return data ?? null;\n}\n\n/** Extract Meta Pixel ID from ads config for use with <MetaPixel pixelId={...} />. Only returns a value when present and valid (numeric). */\nexport function getMetaPixelId(adsConfig: { meta_pixel_id?: string } | null | undefined): string | null {\n  const id = adsConfig && typeof adsConfig === 'object' && 'meta_pixel_id' in adsConfig && adsConfig.meta_pixel_id;\n  const str = id != null && id !== '' ? String(id).trim() : '';\n  return str !== '' && str !== 'null' && /^\\d+$/.test(str) ? str : null;\n}\n\nexport async function getServices(): Promise<Service[] | null> {\n  return serverFetch<Service[]>('/public/services', defaultOptions);\n}\n\nexport async function getService(slug: string): Promise<Service | null> {\n  return serverFetch<Service>(`/public/services/by_slug/${slug}`, defaultOptions);\n}\n\nexport async function getLocations() {\n  return serverFetch('/public/locations', defaultOptions);\n}\n\nexport async function getLocation(slug: string) {\n  return serverFetch(`/public/locations/by_slug/${slug}`, defaultOptions);\n}\n\nexport async function getReviews() {\n  return serverFetch('/public/reviews', defaultOptions);\n}\n\nexport async function getFAQs() {\n  return serverFetch('/public/faq_questions', defaultOptions);\n}\n\nexport async function getBlogPosts() {\n  return serverFetch('/public/blog_posts', defaultOptions);\n}\n\nexport async function getBlogPost(slug: string) {\n  return serverFetch(`/public/blog_posts/by_slug/${slug}`, defaultOptions);\n}\n\nexport async function getTeamMembers() {\n  return serverFetch('/public/team_members', defaultOptions);\n}\n\nexport async function getWebsitePhotos(): Promise<WebsitePhotos | null> {\n  return serverFetch<WebsitePhotos>('/public/website_photos', defaultOptions);\n}\n\nexport async function getJobPostings() {\n  return serverFetch('/public/job_postings', defaultOptions);\n}\n\nexport async function getJobPosting(slug: string) {\n  return serverFetch(`/public/job_postings/by_slug/${slug}`, defaultOptions);\n}\n\nexport async function getSocialPosts() {\n  return serverFetch('/public/social_posts', defaultOptions);\n}\n\n/** Packages (bundles of service items). */\nexport async function getPackages(): Promise<Package[] | null> {\n  return serverFetch<Package[]>('/public/packages', defaultOptions);\n}\n\nexport async function getPackage(slug: string): Promise<Package | null> {\n  return serverFetch<Package>(`/public/packages/by_slug/${encodeURIComponent(slug)}`, defaultOptions);\n}\n\n// Alias for testimonials (API uses \"reviews\")\nexport async function getTestimonials() {\n  return getReviews();\n}\n\n/** Form definition for dynamic form rendering (fields may include optional placeholder). */\nexport async function getForm(formType: string) {\n  type FormDefinition = import('../types/api/form').FormDefinition;\n  return serverFetch<FormDefinition>(`/public/forms/${encodeURIComponent(formType)}`, defaultOptions);\n}\n\n"],"mappings":"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","names":[]}

package/dist/utils/phone-helpers.js

@@ -0,0 +1,26 @@
+// src/utils/phone-helpers.ts
+function getNationalMask(country) {
+  if (!(country == null ? void 0 : country.phoneMask)) return "";
+  const code = country.phoneCode.startsWith("+") ? country.phoneCode : `+${country.phoneCode}`;
+  const escaped = code.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return country.phoneMask.replace(new RegExp(`^\\s*${escaped}[\\s-]*`), "").trim();
+}
+function formatDigitsToMask(digits, mask) {
+  if (digits.length === 0) return "";
+  let i = 0;
+  let out = "";
+  for (const c of mask) {
+    if (c === "#") {
+      if (i < digits.length) out += digits[i++];
+      else break;
+    } else if (i < digits.length) {
+      out += c;
+    }
+  }
+  return out;
+}
+export {
+  formatDigitsToMask,
+  getNationalMask
+};
+//# sourceMappingURL=phone-helpers.js.map

package/dist/utils/phone-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/phone-helpers.ts"],"sourcesContent":["import type countries from './countries';\n\ntype Country = (typeof countries)[0];\n\n/** Get national-format mask from country by stripping the country code prefix (e.g. \"+1 (###) ###-####\" → \"(###) ###-####\"). */\nexport function getNationalMask(country: Country | undefined): string {\n  if (!country?.phoneMask) return '';\n  const code = country.phoneCode.startsWith('+') ? country.phoneCode : `+${country.phoneCode}`;\n  const escaped = code.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n  return country.phoneMask.replace(new RegExp(`^\\\\s*${escaped}[\\\\s-]*`), '').trim();\n}\n\n/** Format a raw digit string into a mask pattern where '#' represents one digit. No trailing literals so backspace works naturally. */\nexport function formatDigitsToMask(digits: string, mask: string): string {\n  if (digits.length === 0) return '';\n  let i = 0;\n  let out = '';\n  for (const c of mask) {\n    if (c === '#') {\n      if (i < digits.length) out += digits[i++];\n      else break;\n    } else if (i < digits.length) {\n      out += c;\n    }\n  }\n  return out;\n}\n"],"mappings":";AAKO,SAAS,gBAAgB,SAAsC;AACpE,MAAI,EAAC,mCAAS,WAAW,QAAO;AAChC,QAAM,OAAO,QAAQ,UAAU,WAAW,GAAG,IAAI,QAAQ,YAAY,IAAI,QAAQ,SAAS;AAC1F,QAAM,UAAU,KAAK,QAAQ,uBAAuB,MAAM;AAC1D,SAAO,QAAQ,UAAU,QAAQ,IAAI,OAAO,QAAQ,OAAO,SAAS,GAAG,EAAE,EAAE,KAAK;AAClF;AAGO,SAAS,mBAAmB,QAAgB,MAAsB;AACvE,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,MAAI,IAAI;AACR,MAAI,MAAM;AACV,aAAW,KAAK,MAAM;AACpB,QAAI,MAAM,KAAK;AACb,UAAI,IAAI,OAAO,OAAQ,QAAO,OAAO,GAAG;AAAA,UACnC;AAAA,IACP,WAAW,IAAI,OAAO,QAAQ;AAC5B,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",
@@ -27,7 +27,10 @@
     "./styles/*": "./src/styles/*",
     "./types": "./src/types/index.ts",
     "./themes": "./src/themes/index.ts",
-    "./utils/*": "./src/utils/*"
+    "./utils/*": "./src/utils/*",
+    "./portal": "./src/design_system/portal/index.ts",
+    "./lib/consumer-session": "./src/lib/consumer-session.ts",
+    "./next/routes/consumer-auth": "./src/next/routes/consumer-auth.ts"
   },
   "repository": {
     "type": "git",

package/src/design_system/components/ChatWidget.tsx

@@ -23,7 +23,17 @@ interface TeamMember {
 interface ChatWidgetProps {
   position?: 'bottom-right' | 'bottom-left';
   primaryColor?: string;
+  /**
+   * Anonymous session identifier. Used when the visitor is not authenticated.
+   * Mutually exclusive with `contactId` — if both are provided, `contactId` wins.
+   */
   sessionId?: string;
+  /**
+   * Authenticated contact ID. When provided, messages are loaded and sent using
+   * the contact-driven flow instead of the anonymous session flow.
+   * The `/api/chat` route must support `contact_id` (see `createChatRouteHandlers`).
+   */
+  contactId?: number;
   displayName?: string;
   teamMembers?: TeamMember[];
 }
@@ -54,6 +64,7 @@ export function ChatWidget({
   position = 'bottom-right',
   primaryColor,
   sessionId: providedSessionId,
+  contactId,
   displayName: providedDisplayName,
   teamMembers = []
 }: ChatWidgetProps) {
@@ -65,8 +76,9 @@ export function ChatWidget({
   const [waitingForReply, setWaitingForReply] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
-  // Generate or retrieve session ID
+  // When authenticated (contactId), skip session management. Otherwise, generate/retrieve session ID.
   useEffect(() => {
+    if (contactId) return;
     if (providedSessionId) {
       setSessionId(providedSessionId);
     } else {
@@ -74,17 +86,21 @@ export function ChatWidget({
       if (stored) {
         setSessionId(stored);
       } else {
-        const newId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        const newId = `session_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`;
         localStorage.setItem('keystone_chat_session_id', newId);
         setSessionId(newId);
       }
     }
-  }, [providedSessionId]);
+  }, [contactId, providedSessionId]);
 
   const loadMessages = useCallback(async () => {
+    // Need either a contactId or an active session before fetching.
+    if (!contactId && !sessionId) return [];
     try {
-      const response = await fetch(`/api/chat/?identifier=${encodeURIComponent(sessionId)}`);
-      
+      const query = contactId
+        ? `contact_id=${encodeURIComponent(contactId)}`
+        : `identifier=${encodeURIComponent(sessionId)}`;
+      const response = await fetch(`/api/chat/?${query}`);
       if (response.ok) {
         const result = await response.json();
         const newMessages = result.data || [];
@@ -95,14 +111,14 @@ export function ChatWidget({
       console.error('Failed to load messages:', error);
     }
     return [];
-  }, [sessionId]);
+  }, [contactId, sessionId]);
 
-  // Load message history when opened
+  // Load message history when opened (either authenticated or session is ready)
   useEffect(() => {
-    if (isOpen && sessionId) {
+    if (isOpen && (contactId || sessionId)) {
       loadMessages();
     }
-  }, [isOpen, sessionId, loadMessages]);
+  }, [isOpen, contactId, sessionId, loadMessages]);
 
   // Auto-scroll to bottom
   useEffect(() => {
@@ -110,45 +126,49 @@ export function ChatWidget({
   }, [messages]);
 
   // Poll for agent reply (simpler than WebSockets for public widget)
+  const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Clear any in-flight poll on unmount
+  useEffect(() => {
+    return () => {
+      if (pollIntervalRef.current !== null) {
+        clearInterval(pollIntervalRef.current);
+      }
+    };
+  }, []);
+
   const pollForAgentReply = () => {
     setWaitingForReply(true);
 
     let attempts = 0;
-    const maxAttempts = 30; // 30 seconds max
+    const maxAttempts = 30;
 
-    const pollInterval = setInterval(async () => {
+    pollIntervalRef.current = setInterval(async () => {
       attempts++;
 
       try {
         const newMessages = await loadMessages();
 
-        // Clear as soon as the latest message is an agent reply with content (don't rely on count increase — can fail at list cap or with optimistic updates)
         const latest = newMessages[newMessages.length - 1];
         const hasAgentReplyWithBody =
           latest?.sender_type === 'agent' &&
           latest?.body != null &&
           String(latest.body).trim() !== '';
 
-        if (hasAgentReplyWithBody) {
-          clearInterval(pollInterval);
-          setWaitingForReply(false);
-          setIsLoading(false);
-          return;
-        }
-        // Stop polling after max attempts
-        if (attempts >= maxAttempts) {
-          clearInterval(pollInterval);
+        if (hasAgentReplyWithBody || attempts >= maxAttempts) {
+          clearInterval(pollIntervalRef.current!);
+          pollIntervalRef.current = null;
           setWaitingForReply(false);
           setIsLoading(false);
         }
       } catch (error) {
         console.error('[ChatWidget] Error polling for messages:', error);
       }
-    }, 1000); // Poll every second
+    }, 1000);
   };
 
   const sendMessage = async () => {
-    if (!inputValue.trim() || !sessionId) return;
+    if (!inputValue.trim() || (!contactId && !sessionId)) return;
 
     const messageText = inputValue.trim();
     setInputValue('');
@@ -167,15 +187,12 @@ export function ChatWidget({
     try {
       const response = await fetch('/api/chat/', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          identifier: sessionId,
-          body: messageText,
-          display_name: providedDisplayName,
-          page_url: window.location.href
-        })
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(
+          contactId
+            ? { contact_id: contactId, body: messageText, display_name: providedDisplayName, page_url: window.location.href }
+            : { identifier: sessionId, body: messageText, display_name: providedDisplayName, page_url: window.location.href }
+        ),
       });
 
       if (response.ok) {
@@ -206,7 +223,7 @@ export function ChatWidget({
     }
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       sendMessage();
@@ -394,7 +411,7 @@ export function ChatWidget({
               type="text"
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
-              onKeyPress={handleKeyPress}
+              onKeyDown={handleKeyDown}
               placeholder="Type a message..."
               disabled={isLoading}
               className="flex-1 rounded-lg border border-secondary bg-primary px-3 py-2.5 text-sm text-primary outline-none ring-brand transition-colors placeholder:text-placeholder focus:border-brand focus:ring-1 disabled:cursor-not-allowed disabled:bg-disabled"

package/src/design_system/components/DynamicFormFields.tsx

@@ -6,6 +6,7 @@ import remarkGfm from 'remark-gfm';
 import { Input, InputBase, InputGroup, NativeSelect, Textarea, PrivacyCheckbox } from '../elements';
 import type { FormDefinition, FormFieldDefinition } from '../../types/api/form';
 import countries from '../../utils/countries';
+import { getNationalMask, formatDigitsToMask } from '../../utils/phone-helpers';
 
 export interface DynamicFormFieldsProps {
   /** Form definition from API (fields array + optional settings). */
@@ -19,30 +20,6 @@ export interface DynamicFormFieldsProps {
 
 const INPUT_TYPES = ['text', 'email', 'tel'] as const;
 
-/** Get national-format mask from country (e.g. "(###) ###-####") by stripping country code from phoneMask. */
-function getNationalMask(country: (typeof countries)[0] | undefined): string {
-  if (!country?.phoneMask) return '';
-  const code = country.phoneCode.startsWith('+') ? country.phoneCode : `+${country.phoneCode}`;
-  const escaped = code.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  return country.phoneMask.replace(new RegExp(`^\\s*${escaped}[\\s-]*`), '').trim();
-}
-
-/** Format digit string into mask; # = one digit. No trailing literals so backspace works. */
-function formatDigitsToMask(digits: string, mask: string): string {
-  if (digits.length === 0) return '';
-  let i = 0;
-  let out = '';
-  for (const c of mask) {
-    if (c === '#') {
-      if (i < digits.length) out += digits[i++];
-      else break;
-    } else if (i < digits.length) {
-      out += c;
-    }
-  }
-  return out;
-}
-
 function allFieldsFlat(fields: FormDefinition['fields']): FormFieldDefinition[] {
   const out: FormFieldDefinition[] = [];
   for (const item of fields) {

package/src/design_system/elements/modal/modal.tsx

@@ -13,6 +13,16 @@ export interface ModalProps {
   titleId?: string;
   /** Dialog content */
   children: React.ReactNode;
+  /** Optional footer rendered below scrollable content (e.g. branding or action bars). */
+  footer?: React.ReactNode;
+  /**
+   * Hide the built-in header bar and close button. Use when the content provides its own
+   * title and close affordance (e.g. a form with its own header). Escape and overlay click
+   * still close the dialog.
+   */
+  hideHeader?: boolean;
+  /** Accessible name for the dialog when no visible title is rendered (i.e. when hideHeader is true). */
+  ariaLabel?: string;
   /** Optional className for the overlay (backdrop) */
   overlayClassName?: string;
   /** Optional className for the dialog panel */
@@ -33,8 +43,9 @@ const MAX_WIDTH_CLASSES: Record<NonNullable<ModalProps['maxWidth']>, string> = {
 };
 
 /**
- * Shared modal (dialog) component. Accessible: focus trap, Escape to close, aria-modal, overlay click to close.
+ * Shared modal (dialog) component. Escape to close, aria-modal, overlay click to close, scroll lock, focus return on close.
  * Use for detail views, confirmations, and other overlay content. Renders in place (use a portal from the consumer if needed).
+ * When `hideHeader` is true, provide an `aria-label` via `panelClassName` or ensure children supply a visible heading.
  */
 export function Modal({
   isOpen,
@@ -42,6 +53,9 @@ export function Modal({
   title,
   titleId = 'modal-title',
   children,
+  footer,
+  hideHeader = false,
+  ariaLabel,
   overlayClassName,
   panelClassName,
   maxWidth = 'md',
@@ -52,6 +66,7 @@ export function Modal({
   useEffect(() => {
     if (!isOpen) return;
     const previouslyFocused = document.activeElement as HTMLElement | null;
+    // When hideHeader is true there is no close button ref; autoFocus on content handles focus.
     closeButtonRef.current?.focus();
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onClose();
@@ -78,7 +93,8 @@ export function Modal({
       }
       role="dialog"
       aria-modal="true"
-      aria-labelledby={title ? titleId : undefined}
+      aria-label={ariaLabel}
+      aria-labelledby={!ariaLabel && title && !hideHeader ? titleId : undefined}
       onClick={(e) => e.target === overlayRef.current && onClose()}
     >
       <div
@@ -88,41 +104,44 @@ export function Modal({
         }
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex items-start justify-between gap-4 p-4 md:p-6 border-b border-secondary flex-shrink-0">
-          {title ? (
-            <h2
-              id={titleId}
-              className="font-display text-lg font-normal text-fg-primary md:text-xl flex-1 min-w-0"
+        {!hideHeader && (
+          <div className="flex items-start justify-between gap-4 p-4 md:p-6 border-b border-secondary flex-shrink-0">
+            {title ? (
+              <h2
+                id={titleId}
+                className="font-display text-lg font-normal text-fg-primary md:text-xl flex-1 min-w-0"
+              >
+                {title}
+              </h2>
+            ) : (
+              <span className="flex-1" aria-hidden />
+            )}
+            <button
+              ref={closeButtonRef}
+              type="button"
+              onClick={onClose}
+              className="shrink-0 p-1 text-fg-primary hover:text-brand-accent rounded focus:outline-none focus:ring-2 focus:ring-brand-accent"
+              aria-label="Close"
             >
-              {title}
-            </h2>
-          ) : (
-            <span className="flex-1" aria-hidden />
-          )}
-          <button
-            ref={closeButtonRef}
-            type="button"
-            onClick={onClose}
-            className="shrink-0 p-1 text-fg-primary hover:text-brand-accent rounded focus:outline-none focus:ring-2 focus:ring-brand-accent"
-            aria-label="Close"
-          >
-            <svg
-              className="w-5 h-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              aria-hidden
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
+              <svg
+                className="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                aria-hidden
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+        )}
         <div className="overflow-y-auto flex-1 p-4 md:p-6">{children}</div>
+        {footer && <div className="flex-shrink-0 border-t border-secondary">{footer}</div>}
       </div>
     </div>
   );