keystone-design-bootstrap 1.0.48 → 1.0.49

package/dist/lib/server-api.d.ts

@@ -1,6 +1,5 @@
-import { S as Service, F as FormDefinition } from '../form-CWXC-IHT.js';
-import { C as CompanyInformation } from '../company-information-C_k_sLSB.js';
-import { W as WebsitePhotos } from '../website-photos-_n2g24IM.js';
+import { C as CompanyInformation, S as Service, F as FormDefinition } from '../form-BLZuTGkr.js';
+import { P as PhotoAttachment, W as WebsitePhotos } from '../photos-8jMeetqV.js';
 
 interface FetchOptions {
     cache?: RequestCache;
@@ -34,8 +33,54 @@ declare function getWebsitePhotos(): Promise<WebsitePhotos | null>;
 declare function getJobPostings(): Promise<unknown>;
 declare function getJobPosting(slug: string): Promise<unknown>;
 declare function getSocialPosts(): Promise<unknown>;
+/** Packages (bundles of service items). */
+declare function getPackages(): Promise<unknown>;
+declare function getPackage(slug: string): Promise<unknown>;
 declare function getTestimonials(): Promise<unknown>;
 /** Form definition for dynamic form rendering (fields may include optional placeholder). */
 declare function getForm(formType: string): Promise<FormDefinition | null>;
+/** Minimal service for offer detail (from GET /public/offers/:id). */
+interface OfferServiceSummary {
+    id: number;
+    name: string;
+    slug: string;
+    summary?: string | null;
+}
+/** Package summary (nested on each offer in list and single-offer responses). */
+interface OfferPackageSummary {
+    id: number;
+    name: string;
+    slug: string;
+    summary?: string | null;
+    description_markdown?: string | null;
+}
+/** Offer from public API. */
+interface OfferPublic {
+    id: number;
+    name: string;
+    description: string | null;
+    value_terms: string | null;
+    /** Optional; when absent or null, offer has no expiration. */
+    expires_at?: string | null;
+    expired?: boolean;
+    /** Service IDs (used for category_names fallback when not provided by API). */
+    service_ids?: number[];
+    /** Package IDs (included in list response; nested services/packages are the source of truth). */
+    package_ids?: number[];
+    /** Category names from API (services + service_items + packages). */
+    category_names?: string[];
+    /** Photo attachments from related services (same shape as Service.photo_attachments). */
+    photo_attachments?: PhotoAttachment[];
+    /** Present when fetching single offer (GET /public/offers/:id). */
+    services?: OfferServiceSummary[];
+    /** Specific menu items this offer applies to (single offer only). */
+    service_items?: OfferServiceSummary[];
+    /** Packages this offer applies to (single offer only). */
+    packages?: OfferPackageSummary[];
+}
+/** List offers for the current account (API key scoped). */
+declare function getOffers(): Promise<OfferPublic[] | null>;
+/** Single offer with services for detail page. */
+declare function getOffer(id: number | string): Promise<OfferPublic | null>;
 
-export { getAdsConfig, getBlogPost, getBlogPosts, getCompanyInformation, getFAQs, getForm, getJobPosting, getJobPostings, getLocation, getLocations, getMetaPixelId, getReviews, getService, getServices, getSocialPosts, getTeamMembers, getTestimonials, getWebsitePhotos, serverApi };
+export { type OfferPackageSummary, type OfferPublic, type OfferServiceSummary, getAdsConfig, getBlogPost, getBlogPosts, getCompanyInformation, getFAQs, getForm, getJobPosting, getJobPostings, getLocation, getLocations, getMetaPixelId, getOffer, getOffers, getPackage, getPackages, getReviews, getService, getServices, getSocialPosts, getTeamMembers, getTestimonials, getWebsitePhotos, serverApi };

package/dist/lib/server-api.js

@@ -84,12 +84,25 @@ async function getJobPosting(slug) {
 async function getSocialPosts() {
   return serverFetch("/public/social_posts", defaultOptions);
 }
+async function getPackages() {
+  return serverFetch("/public/packages", defaultOptions);
+}
+async function getPackage(slug) {
+  return serverFetch(`/public/packages/by_slug/${encodeURIComponent(slug)}`, defaultOptions);
+}
 async function getTestimonials() {
   return getReviews();
 }
 async function getForm(formType) {
   return serverFetch(`/public/forms/${encodeURIComponent(formType)}`, defaultOptions);
 }
+async function getOffers() {
+  const data = await serverFetch("/public/offers", defaultOptions);
+  return Array.isArray(data) ? data : null;
+}
+async function getOffer(id) {
+  return serverFetch(`/public/offers/${id}`, defaultOptions);
+}
 export {
   getAdsConfig,
   getBlogPost,
@@ -102,6 +115,10 @@ export {
   getLocation,
   getLocations,
   getMetaPixelId,
+  getOffer,
+  getOffers,
+  getPackage,
+  getPackages,
   getReviews,
   getService,
   getServices,

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// 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":";AASA,IAAM,UAAU,QAAQ,IAAI,WAAW;AACvC,IAAM,UAAU,QAAQ,IAAI,WAAW;AAOvC,eAAe,YAAe,UAAkB,UAAwB,CAAC,GAAsB;AAjB/F;AAkBE,QAAM,MAAM,GAAG,OAAO,GAAG,QAAQ;AAEjC,MAAI;AACF,UAAM,eAAiE;AAAA,MACrE,SAAS;AAAA,QACP,aAAa;AAAA,QACb,gBAAgB;AAAA,MAClB;AAAA,MACA,OAAO,QAAQ;AAAA,IACjB;AAEA,QAAI,QAAQ,YAAY;AACtB,mBAAa,OAAO,EAAE,YAAY,QAAQ,WAAW;AAAA,IACvD;AAEA,UAAM,WAAW,MAAM,MAAM,KAAK,YAAY;AAE9C,QAAI,CAAC,SAAS,IAAI;AAChB,cAAQ,MAAM,sBAAsB,SAAS,MAAM,QAAQ,QAAQ,EAAE;AACrE,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,MAAM,SAAS,KAAK;AAGjC,YAAO,UAAK,SAAL,YAAa;AAAA,EACtB,SAAS,OAAO;AACd,YAAQ,MAAM,gCAAgC,QAAQ,KAAK,KAAK;AAChE,WAAO;AAAA,EACT;AACF;AAKO,IAAM,YAAY;AAAA,EACvB,KAAK,CAAc,UAAkB,YAA8C;AACjF,WAAO,YAAe,UAAU,WAAW,EAAE,YAAY,GAAG,CAAC;AAAA,EAC/D;AACF;AAGA,IAAM,iBAA+B,EAAE,YAAY,GAAG;AAEtD,eAAsB,wBAA4D;AAChF,SAAO,YAAgC,+BAA+B,cAAc;AACtF;AAGA,eAAsB,eAA2D;AAC/E,QAAM,OAAO,MAAM,YAAwC,sBAAsB,cAAc;AAC/F,SAAO,sBAAQ;AACjB;AAGO,SAAS,eAAe,WAAyE;AACtG,QAAM,KAAK,aAAa,OAAO,cAAc,YAAY,mBAAmB,aAAa,UAAU;AACnG,QAAM,MAAM,MAAM,QAAQ,OAAO,KAAK,OAAO,EAAE,EAAE,KAAK,IAAI;AAC1D,SAAO,QAAQ,MAAM,QAAQ,UAAU,QAAQ,KAAK,GAAG,IAAI,MAAM;AACnE;AAEA,eAAsB,cAAc;AAClC,SAAO,YAAY,oBAAoB,cAAc;AACvD;AAEA,eAAsB,WAAW,MAAuC;AACtE,SAAO,YAAqB,4BAA4B,IAAI,IAAI,cAAc;AAChF;AAEA,eAAsB,eAAe;AACnC,SAAO,YAAY,qBAAqB,cAAc;AACxD;AAEA,eAAsB,YAAY,MAAc;AAC9C,SAAO,YAAY,6BAA6B,IAAI,IAAI,cAAc;AACxE;AAEA,eAAsB,aAAa;AACjC,SAAO,YAAY,mBAAmB,cAAc;AACtD;AAEA,eAAsB,UAAU;AAC9B,SAAO,YAAY,yBAAyB,cAAc;AAC5D;AAEA,eAAsB,eAAe;AACnC,SAAO,YAAY,sBAAsB,cAAc;AACzD;AAEA,eAAsB,YAAY,MAAc;AAC9C,SAAO,YAAY,8BAA8B,IAAI,IAAI,cAAc;AACzE;AAEA,eAAsB,iBAAiB;AACrC,SAAO,YAAY,wBAAwB,cAAc;AAC3D;AAEA,eAAsB,mBAAkD;AACtE,SAAO,YAA2B,0BAA0B,cAAc;AAC5E;AAEA,eAAsB,iBAAiB;AACrC,SAAO,YAAY,wBAAwB,cAAc;AAC3D;AAEA,eAAsB,cAAc,MAAc;AAChD,SAAO,YAAY,gCAAgC,IAAI,IAAI,cAAc;AAC3E;AAEA,eAAsB,iBAAiB;AACrC,SAAO,YAAY,wBAAwB,cAAc;AAC3D;AAGA,eAAsB,kBAAkB;AACtC,SAAO,WAAW;AACpB;AAGA,eAAsB,QAAQ,UAAkB;AAE9C,SAAO,YAA4B,iBAAiB,mBAAmB,QAAQ,CAAC,IAAI,cAAc;AACpG;","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 { PhotoAttachment } from '../types/api/photos';\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/** Minimal service for offer detail (from GET /public/offers/:id). */\nexport interface OfferServiceSummary {\n  id: number;\n  name: string;\n  slug: string;\n  summary?: string | null;\n}\n\n/** Package summary (nested on each offer in list and single-offer responses). */\nexport interface OfferPackageSummary {\n  id: number;\n  name: string;\n  slug: string;\n  summary?: string | null;\n  description_markdown?: string | null;\n}\n\n/** Offer from public API. */\nexport interface OfferPublic {\n  id: number;\n  name: string;\n  description: string | null;\n  value_terms: string | null;\n  /** Optional; when absent or null, offer has no expiration. */\n  expires_at?: string | null;\n  expired?: boolean;\n  /** Service IDs (used for category_names fallback when not provided by API). */\n  service_ids?: number[];\n  /** Package IDs (included in list response; nested services/packages are the source of truth). */\n  package_ids?: number[];\n  /** Category names from API (services + service_items + packages). */\n  category_names?: string[];\n  /** Photo attachments from related services (same shape as Service.photo_attachments). */\n  photo_attachments?: PhotoAttachment[];\n  /** Present when fetching single offer (GET /public/offers/:id). */\n  services?: OfferServiceSummary[];\n  /** Specific menu items this offer applies to (single offer only). */\n  service_items?: OfferServiceSummary[];\n  /** Packages this offer applies to (single offer only). */\n  packages?: OfferPackageSummary[];\n}\n\n/** List offers for the current account (API key scoped). */\nexport async function getOffers(): Promise<OfferPublic[] | null> {\n  const data = await serverFetch<OfferPublic[]>('/public/offers', defaultOptions);\n  return Array.isArray(data) ? data : null;\n}\n\n/** Single offer with services for detail page. */\nexport async function getOffer(id: number | string): Promise<OfferPublic | null> {\n  return serverFetch<OfferPublic>(`/public/offers/${id}`, defaultOptions);\n}\n\n"],"mappings":"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","names":[]}

package/dist/photos-8jMeetqV.d.ts

@@ -0,0 +1,47 @@
+interface WebsitePhoto {
+    id: number;
+    url: string;
+    thumbnail_url?: string;
+    medium_url?: string;
+    alt: string;
+    source: 'account' | 'industry';
+}
+interface WebsitePhotos {
+    logo?: WebsitePhoto | null;
+    favicon?: WebsitePhoto | null;
+    hero?: WebsitePhoto | null;
+    contact?: WebsitePhoto | null;
+    about?: WebsitePhoto | null;
+    careers?: WebsitePhoto | null;
+    preview_image?: WebsitePhoto | null;
+    stock_photos?: WebsitePhoto[];
+}
+type WebsitePhotosResponse = WebsitePhotos;
+
+/**
+ * Photo and PhotoAttachment type definitions
+ */
+interface Photo {
+    id?: number;
+    title?: string;
+    description?: string;
+    alt_text?: string;
+    thumbnail_url?: string;
+    medium_url?: string;
+    large_url?: string;
+    original_url?: string;
+    generated?: boolean;
+    created_at?: string;
+    updated_at?: string;
+}
+interface PhotoAttachment {
+    id: number;
+    /** May be omitted in some API responses. */
+    photo?: Photo;
+    featured?: boolean;
+    sort_order?: number;
+    created_at?: string;
+    updated_at?: string;
+}
+
+export type { PhotoAttachment as P, WebsitePhotos as W, Photo as a, WebsitePhoto as b, WebsitePhotosResponse as c };

package/dist/types/index.d.ts

@@ -1,9 +1,8 @@
 import { Theme } from '../themes/index.js';
-export { B as BlogPost, a as BlogPostAuthor, c as BlogPostParams, d as BlogPostResponse, b as BlogPostTag } from '../blog-post-CvRhU9ss.js';
-export { C as CompanyInformation, a as CompanyInformationResponse } from '../company-information-C_k_sLSB.js';
-import { a as PhotoAttachment } from '../form-CWXC-IHT.js';
-export { F as FormDefinition, b as FormFieldDefinition, c as FormFieldItem, d as FormType, P as Photo, S as Service, e as ServiceParams, f as ServiceResponse } from '../form-CWXC-IHT.js';
-export { a as WebsitePhoto, W as WebsitePhotos, b as WebsitePhotosResponse } from '../website-photos-_n2g24IM.js';
+export { B as BlogPost, c as BlogPostAuthor, a as BlogPostParams, b as BlogPostResponse, d as BlogPostTag } from '../blog-post-D7HFCDp1.js';
+export { C as CompanyInformation, a as CompanyInformationResponse, F as FormDefinition, b as FormFieldDefinition, c as FormFieldItem, d as FormType, S as Service, e as ServiceItem, f as ServiceParams, g as ServiceResponse } from '../form-BLZuTGkr.js';
+import { P as PhotoAttachment } from '../photos-8jMeetqV.js';
+export { a as Photo, b as WebsitePhoto, W as WebsitePhotos, c as WebsitePhotosResponse } from '../photos-8jMeetqV.js';
 
 interface NavItem {
     label: string;
@@ -115,6 +114,8 @@ interface SocialPost {
     updated_at: string;
     /** Image URLs from photo_attachments (preferred for display) */
     image_urls?: string[];
+    /** Video URLs from photo_attachments (exclude these when choosing img src) */
+    video_urls?: string[];
     /** Photo attachments (same pattern as blog post, team member, etc.) */
     photo_attachments?: PhotoAttachment[];
     /** Legacy; prefer image_urls / photo_attachments */

package/dist/utils/photo-helpers.d.ts

@@ -1,22 +1,13 @@
-import { W as WebsitePhotos } from '../website-photos-_n2g24IM.js';
+import { P as PhotoAttachment, W as WebsitePhotos } from '../photos-8jMeetqV.js';
 
 /**
  * Helper functions for extracting photo URLs from photo associations
  */
 
-interface PhotoAttachment {
-    id: number;
-    photo: {
-        id: number;
-        title: string;
-        thumbnail_url?: string;
-        medium_url?: string;
-        large_url?: string;
-        original_url?: string;
-    };
-    featured: boolean;
-    sort_order: number;
-}
+/**
+ * True if the URL looks like a video by path extension. Used to avoid using video URLs in img src.
+ */
+declare function isVideoUrl(url: string | null | undefined): boolean;
 /**
  * Get the best available photo URL from a photos array
  * Priority: featured photo > first photo > fallback
@@ -43,4 +34,4 @@ declare function getFeaturedImageUrl(photos?: PhotoAttachment[]): string | null;
  */
 declare function getLogoUrl(websitePhotos?: WebsitePhotos | null): string | undefined;
 
-export { type PhotoAttachment, getAvatarUrl, getFeaturedImageUrl, getLogoUrl, getPhotoUrl };
+export { PhotoAttachment, getAvatarUrl, getFeaturedImageUrl, getLogoUrl, getPhotoUrl, isVideoUrl };

package/dist/utils/photo-helpers.js

@@ -1,4 +1,12 @@
 // src/utils/photo-helpers.ts
+var VIDEO_EXTENSIONS = [".mp4", ".mov", ".webm", ".m4v", ".avi", ".mkv", ".flv", ".wmv"];
+function isVideoUrl(url) {
+  var _a;
+  if (!url || typeof url !== "string") return false;
+  const path = (_a = url.split("?")[0]) != null ? _a : "";
+  const ext = path.slice(path.lastIndexOf(".")).toLowerCase();
+  return VIDEO_EXTENSIONS.includes(ext);
+}
 function getPhotoUrl(photos) {
   if (photos && photos.length > 0) {
     const featuredPhoto = photos.find((pa) => pa.featured);
@@ -27,6 +35,7 @@ export {
   getAvatarUrl,
   getFeaturedImageUrl,
   getLogoUrl,
-  getPhotoUrl
+  getPhotoUrl,
+  isVideoUrl
 };
 //# sourceMappingURL=photo-helpers.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/photo-helpers.ts"],"sourcesContent":["/**\n * Helper functions for extracting photo URLs from photo associations\n */\n\nimport type { WebsitePhotos } from '../types/api/website-photos';\n\nexport interface PhotoAttachment {\n  id: number;\n  photo: {\n    id: number;\n    title: string;\n    thumbnail_url?: string;\n    medium_url?: string;\n    large_url?: string;\n    original_url?: string;\n  };\n  featured: boolean;\n  sort_order: number;\n}\n\n/**\n * Get the best available photo URL from a photos array\n * Priority: featured photo > first photo > fallback\n */\nexport function getPhotoUrl(\n  photos?: PhotoAttachment[]\n): string | null {\n  // Priority 1: Featured photo from photos array\n  if (photos && photos.length > 0) {\n    const featuredPhoto = photos.find(pa => pa.featured);\n    const photoToUse = featuredPhoto || photos[0];\n    const photo = photoToUse.photo;\n    \n    if (photo) {\n      return photo.large_url || photo.medium_url || photo.thumbnail_url || photo.original_url || null;\n    }\n  }\n  \n  // Fallback (gradient or null)\n  return null;\n}\n\n/**\n * Get avatar URL for team members or authors.\n * Returns a URL only when there is a real photo in attachments; otherwise null.\n * Callers should use PhotoWithFallback (gradient fallback) or Avatar with initials when null.\n */\n/** Optional fallbackId/name reserved for future use (e.g. deterministic fallback). */\n/* eslint-disable @typescript-eslint/no-unused-vars -- _fallbackId, _name reserved for API */\nexport function getAvatarUrl(\n  photos?: PhotoAttachment[],\n  _fallbackId?: number | string,\n  _name?: string\n): string | null {\n  return getPhotoUrl(photos);\n}\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\n/**\n * Get featured image URL for blog posts\n */\nexport function getFeaturedImageUrl(\n  photos?: PhotoAttachment[]\n): string | null {\n  return getPhotoUrl(photos);\n}\n\n/**\n * Get logo URL from website_photos API (which aggregates from account_photos)\n * \n * The website_photos API endpoint returns logos from account_photos with photo_type: 'logo',\n * with industry fallback. This is the primary and only source for logos.\n * \n * Returns undefined if no logo is available (for PhotoWithFallback gradient fallback)\n */\nexport function getLogoUrl(\n  websitePhotos?: WebsitePhotos | null\n): string | undefined {\n  if (websitePhotos?.logo?.url) {\n    return websitePhotos.logo.url;\n  }\n  \n  return undefined;\n}\n\n"],"mappings":";AAwBO,SAAS,YACd,QACe;AAEf,MAAI,UAAU,OAAO,SAAS,GAAG;AAC/B,UAAM,gBAAgB,OAAO,KAAK,QAAM,GAAG,QAAQ;AACnD,UAAM,aAAa,iBAAiB,OAAO,CAAC;AAC5C,UAAM,QAAQ,WAAW;AAEzB,QAAI,OAAO;AACT,aAAO,MAAM,aAAa,MAAM,cAAc,MAAM,iBAAiB,MAAM,gBAAgB;AAAA,IAC7F;AAAA,EACF;AAGA,SAAO;AACT;AASO,SAAS,aACd,QACA,aACA,OACe;AACf,SAAO,YAAY,MAAM;AAC3B;AAMO,SAAS,oBACd,QACe;AACf,SAAO,YAAY,MAAM;AAC3B;AAUO,SAAS,WACd,eACoB;AA7EtB;AA8EE,OAAI,oDAAe,SAAf,mBAAqB,KAAK;AAC5B,WAAO,cAAc,KAAK;AAAA,EAC5B;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/utils/photo-helpers.ts"],"sourcesContent":["/**\n * Helper functions for extracting photo URLs from photo associations\n */\n\nimport type { PhotoAttachment } from '../types/api/photos';\nimport type { WebsitePhotos } from '../types/api/website-photos';\n\nexport type { PhotoAttachment } from '../types/api/photos';\n\n/** Video file extensions treated as video (match backend ExternalPhotoService.video_url?) */\nconst VIDEO_EXTENSIONS = ['.mp4', '.mov', '.webm', '.m4v', '.avi', '.mkv', '.flv', '.wmv'];\n\n/**\n * True if the URL looks like a video by path extension. Used to avoid using video URLs in img src.\n */\nexport function isVideoUrl(url: string | null | undefined): boolean {\n  if (!url || typeof url !== 'string') return false;\n  const path = url.split('?')[0] ?? '';\n  const ext = path.slice(path.lastIndexOf('.')).toLowerCase();\n  return VIDEO_EXTENSIONS.includes(ext);\n}\n\n/**\n * Get the best available photo URL from a photos array\n * Priority: featured photo > first photo > fallback\n */\nexport function getPhotoUrl(\n  photos?: PhotoAttachment[]\n): string | null {\n  // Priority 1: Featured photo from photos array\n  if (photos && photos.length > 0) {\n    const featuredPhoto = photos.find(pa => pa.featured);\n    const photoToUse = featuredPhoto || photos[0];\n    const photo = photoToUse.photo;\n    \n    if (photo) {\n      return photo.large_url || photo.medium_url || photo.thumbnail_url || photo.original_url || null;\n    }\n  }\n  \n  // Fallback (gradient or null)\n  return null;\n}\n\n/**\n * Get avatar URL for team members or authors.\n * Returns a URL only when there is a real photo in attachments; otherwise null.\n * Callers should use PhotoWithFallback (gradient fallback) or Avatar with initials when null.\n */\n/** Optional fallbackId/name reserved for future use (e.g. deterministic fallback). */\n/* eslint-disable @typescript-eslint/no-unused-vars -- _fallbackId, _name reserved for API */\nexport function getAvatarUrl(\n  photos?: PhotoAttachment[],\n  _fallbackId?: number | string,\n  _name?: string\n): string | null {\n  return getPhotoUrl(photos);\n}\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\n/**\n * Get featured image URL for blog posts\n */\nexport function getFeaturedImageUrl(\n  photos?: PhotoAttachment[]\n): string | null {\n  return getPhotoUrl(photos);\n}\n\n/**\n * Get logo URL from website_photos API (which aggregates from account_photos)\n * \n * The website_photos API endpoint returns logos from account_photos with photo_type: 'logo',\n * with industry fallback. This is the primary and only source for logos.\n * \n * Returns undefined if no logo is available (for PhotoWithFallback gradient fallback)\n */\nexport function getLogoUrl(\n  websitePhotos?: WebsitePhotos | null\n): string | undefined {\n  if (websitePhotos?.logo?.url) {\n    return websitePhotos.logo.url;\n  }\n  \n  return undefined;\n}\n\n"],"mappings":";AAUA,IAAM,mBAAmB,CAAC,QAAQ,QAAQ,SAAS,QAAQ,QAAQ,QAAQ,QAAQ,MAAM;AAKlF,SAAS,WAAW,KAAyC;AAfpE;AAgBE,MAAI,CAAC,OAAO,OAAO,QAAQ,SAAU,QAAO;AAC5C,QAAM,QAAO,SAAI,MAAM,GAAG,EAAE,CAAC,MAAhB,YAAqB;AAClC,QAAM,MAAM,KAAK,MAAM,KAAK,YAAY,GAAG,CAAC,EAAE,YAAY;AAC1D,SAAO,iBAAiB,SAAS,GAAG;AACtC;AAMO,SAAS,YACd,QACe;AAEf,MAAI,UAAU,OAAO,SAAS,GAAG;AAC/B,UAAM,gBAAgB,OAAO,KAAK,QAAM,GAAG,QAAQ;AACnD,UAAM,aAAa,iBAAiB,OAAO,CAAC;AAC5C,UAAM,QAAQ,WAAW;AAEzB,QAAI,OAAO;AACT,aAAO,MAAM,aAAa,MAAM,cAAc,MAAM,iBAAiB,MAAM,gBAAgB;AAAA,IAC7F;AAAA,EACF;AAGA,SAAO;AACT;AASO,SAAS,aACd,QACA,aACA,OACe;AACf,SAAO,YAAY,MAAM;AAC3B;AAMO,SAAS,oBACd,QACe;AACf,SAAO,YAAY,MAAM;AAC3B;AAUO,SAAS,WACd,eACoB;AA/EtB;AAgFE,OAAI,oDAAe,SAAf,mBAAqB,KAAK;AAC5B,WAAO,cAAc,KAAK;AAAA,EAC5B;AAEA,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/design_system/elements/index.tsx

@@ -132,3 +132,7 @@ export { ComboBox } from './select/combobox';
 // Video components (no theming needed)
 export { VideoModal } from './video-modal';
 export { VideoPlayButton } from './video-play-button';
+
+// Shared modal for detail views, confirmations, etc.
+export { Modal } from './modal/modal';
+export type { ModalProps } from './modal/modal';

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

@@ -0,0 +1,129 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+
+export interface ModalProps {
+  /** Whether the modal is open */
+  isOpen: boolean;
+  /** Called when the user requests close (button, Escape, or overlay click) */
+  onClose: () => void;
+  /** Optional title for the dialog (used for aria-labelledby) */
+  title?: string;
+  /** Optional id for the title element (must be set if title is set for a11y) */
+  titleId?: string;
+  /** Dialog content */
+  children: React.ReactNode;
+  /** Optional className for the overlay (backdrop) */
+  overlayClassName?: string;
+  /** Optional className for the dialog panel */
+  panelClassName?: string;
+  /** Optional max width class for the panel (default: max-w-md). Use max-w-lg, max-w-2xl, etc. */
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+}
+
+const MAX_WIDTH_CLASSES: Record<NonNullable<ModalProps['maxWidth']>, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+};
+
+/**
+ * Shared modal (dialog) component. Accessible: focus trap, Escape to close, aria-modal, overlay click to close.
+ * Use for detail views, confirmations, and other overlay content. Renders in place (use a portal from the consumer if needed).
+ */
+export function Modal({
+  isOpen,
+  onClose,
+  title,
+  titleId = 'modal-title',
+  children,
+  overlayClassName,
+  panelClassName,
+  maxWidth = 'md',
+}: ModalProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    closeButtonRef.current?.focus();
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleEscape);
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = '';
+      previouslyFocused?.focus();
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const maxWidthClass = MAX_WIDTH_CLASSES[maxWidth];
+
+  return (
+    <div
+      ref={overlayRef}
+      className={
+        overlayClassName ??
+        'fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/50'
+      }
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : undefined}
+      onClick={(e) => e.target === overlayRef.current && onClose()}
+    >
+      <div
+        className={
+          panelClassName ??
+          `bg-primary border border-secondary rounded-lg shadow-xl w-full overflow-hidden ${maxWidthClass} max-h-[90vh] flex flex-col`
+        }
+        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"
+            >
+              {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>
+        <div className="overflow-y-auto flex-1 p-4 md:p-6">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/design_system/sections/index.tsx

@@ -46,7 +46,9 @@ import { HomeHeroComponent as BaseHomeHeroComponent } from './home-hero-componen
 import { JobDetailHero as BaseJobDetailHero } from './hero-job-detail';
 import { JobDetailSection as BaseJobDetailSection } from './job-detail-section';
 import { PolicyDocumentSection as BasePolicyDocumentSection } from './policy-document-section';
-
+import { OffersSection as BaseOffersSection } from './offers-section';
+import { OffersGallery as BaseOffersGallery } from './offers-gallery';
+import { OfferDetailSection as BaseOfferDetailSection } from './offer-detail';
 // Import variant files to trigger their registration
 // Aman theme variants
 import './hero-home.aman';
@@ -92,7 +94,7 @@ import './social-media-grid.barelux';
 import './contact-section.barelux';
 import './footer-home.barelux';
 
-// Balance theme variants
+// Balance theme variants (offers-section uses base for balance)
 import './hero-home.balance';
 import './header-navigation.balance';
 import './footer-home.balance';
@@ -179,5 +181,21 @@ export const HomeHeroComponent = createThemedExport('home-hero-component', BaseH
 // Re-export application form (client component, no theme variants)
 export { JobApplicationForm } from './job-application-form';
 
+// Offers section (themed; embeddable on multiple pages)
+export const OffersSection = createThemedExport('offers-section', BaseOffersSection as unknown as React.ComponentType<Record<string, unknown>>);
+
+// Full offers page gallery (themed; use on /offers page, Aman = blog-style)
+export const OffersGallery = createThemedExport('offers-gallery', BaseOffersGallery as unknown as React.ComponentType<Record<string, unknown>>);
+
+// Single offer detail (themed; use on /offers/[id] page)
+export const OfferDetailSection = createThemedExport('offer-detail', BaseOfferDetailSection as unknown as React.ComponentType<Record<string, unknown>>);
+
+// Full offers page grid (no theme variant; fallback when gallery not used)
+export { OffersGrid } from './offers-grid';
+
+// Service Menu: up to 3 carousel rows (Offers, Packages, Services) with smaller cards
+export { ServiceMenuSection } from './service-menu-section';
+export type { ServiceMenuSectionProps, PackagePublic } from './service-menu-section';
+
 // Re-export types
 export type { Theme } from '../../themes';

package/src/design_system/sections/offer-detail.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React from 'react';
+import { registerThemeVariant } from '../../lib/component-registry';
+import { Button } from '../elements';
+import type { OfferPublic } from '../../lib/server-api';
+
+interface OfferDetailSectionProps {
+  offer?: OfferPublic | null;
+  websitePhotos?: unknown;
+  companyInformation?: unknown;
+}
+
+/** Default/fallback offer detail when no theme variant overrides. */
+export const OfferDetailSection = ({ offer }: OfferDetailSectionProps) => {
+  if (!offer) {
+    return (
+      <div className="text-center py-12">
+        <div className="text-6xl mb-4">🎁</div>
+        <h3 className="text-xl font-semibold text-gray-900 mb-2">Offer Not Found</h3>
+        <p className="text-gray-600 mb-4">The offer you&apos;re looking for doesn&apos;t exist or has expired.</p>
+        <Button href="/offers">View All Offers</Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-12">
+      <h1 className="text-2xl font-semibold text-gray-900 mb-4">{offer.name}</h1>
+      {offer.value_terms && <p className="text-gray-600 mb-2">{offer.value_terms}</p>}
+      {offer.description && <p className="text-gray-600 mb-4">{offer.description}</p>}
+      {offer.expires_at && (() => {
+        const d = new Date(offer.expires_at);
+        if (Number.isNaN(d.getTime())) return null;
+        return (
+          <p className="text-sm text-gray-500 mb-6">
+            Expires {d.toLocaleDateString()}
+          </p>
+        );
+      })()}
+      <Button href="/offers">Back to Offers</Button>
+    </div>
+  );
+};
+
+registerThemeVariant('offer-detail', 'classic', OfferDetailSection);

package/src/design_system/sections/offers-gallery.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import React from 'react';
+import { registerThemeVariant } from '../../lib/component-registry';
+import { OffersGrid } from './offers-grid';
+import type { OfferPublic } from '../../lib/server-api';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+import type { CompanyInformation } from '../../types/api/company-information';
+
+interface OffersGalleryProps {
+  offers?: OfferPublic[] | null;
+  title?: string;
+  subtitle?: string;
+  offersPerPage?: number;
+  className?: string;
+  websitePhotos?: WebsitePhotos | null;
+  companyInformation?: CompanyInformation | null;
+}
+
+/** Default/fallback: use grid layout when no theme variant overrides. */
+export const OffersGallery = ({
+  offers,
+  title = 'Offers',
+  subtitle = 'See our current offers.',
+  websitePhotos,
+  companyInformation,
+  className = '',
+}: OffersGalleryProps) => (
+  <section className={className}>
+    <OffersGrid
+      offers={offers}
+      title={title}
+      subtitle={subtitle}
+      websitePhotos={websitePhotos}
+      companyInformation={companyInformation}
+    />
+  </section>
+);
+
+registerThemeVariant('offers-gallery', 'classic', OffersGallery);