@opensite/ui 3.0.4 → 3.0.6

package/dist/project-alternating-motion.js

@@ -421,6 +421,7 @@ var Section = React.forwardRef(
 );
 Section.displayName = "Section";
 function ProjectAlternatingMotion({
+  sectionId = "project-alternating-motion",
   heading,
   projects,
   projectsSlot,
@@ -490,6 +491,7 @@ function ProjectAlternatingMotion({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-background-reveal.cjs

@@ -417,6 +417,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ProjectBackgroundReveal({
+  sectionId = "project-background-reveal",
   heading,
   subheading,
   description,
@@ -486,6 +487,7 @@ function ProjectBackgroundReveal({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-background-reveal.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -95,6 +95,8 @@ interface ProjectBackgroundRevealProps {
      * Additional CSS classes for each project card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectBackgroundReveal - Full-width cards with background image reveal on hover.
@@ -107,6 +109,6 @@ interface ProjectBackgroundRevealProps {
  * for interior design portfolios, architecture showcases, or any project listing where
  * immersive imagery and detailed descriptions work together.
  */
-declare function ProjectBackgroundReveal({ heading, subheading, description, buttonText, buttonHref, projects, projectsSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, descriptionClassName, listClassName, cardClassName, }: ProjectBackgroundRevealProps): react_jsx_runtime.JSX.Element;
+declare function ProjectBackgroundReveal({ sectionId, heading, subheading, description, buttonText, buttonHref, projects, projectsSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, descriptionClassName, listClassName, cardClassName, }: ProjectBackgroundRevealProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectBackgroundReveal, type ProjectBackgroundRevealItem, type ProjectBackgroundRevealProps };

package/dist/project-background-reveal.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -95,6 +95,8 @@ interface ProjectBackgroundRevealProps {
      * Additional CSS classes for each project card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectBackgroundReveal - Full-width cards with background image reveal on hover.
@@ -107,6 +109,6 @@ interface ProjectBackgroundRevealProps {
  * for interior design portfolios, architecture showcases, or any project listing where
  * immersive imagery and detailed descriptions work together.
  */
-declare function ProjectBackgroundReveal({ heading, subheading, description, buttonText, buttonHref, projects, projectsSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, descriptionClassName, listClassName, cardClassName, }: ProjectBackgroundRevealProps): react_jsx_runtime.JSX.Element;
+declare function ProjectBackgroundReveal({ sectionId, heading, subheading, description, buttonText, buttonHref, projects, projectsSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, descriptionClassName, listClassName, cardClassName, }: ProjectBackgroundRevealProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectBackgroundReveal, type ProjectBackgroundRevealItem, type ProjectBackgroundRevealProps };

package/dist/project-background-reveal.js

@@ -396,6 +396,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ProjectBackgroundReveal({
+  sectionId = "project-background-reveal",
   heading,
   subheading,
   description,
@@ -465,6 +466,7 @@ function ProjectBackgroundReveal({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-card-overlay.cjs

@@ -481,6 +481,7 @@ var ProjectCard = ({
   );
 };
 function ProjectCardOverlay({
+  sectionId = "project-card-overlay",
   heading,
   subheading,
   projects,
@@ -514,6 +515,7 @@ function ProjectCardOverlay({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-card-overlay.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -79,6 +79,8 @@ interface ProjectCardOverlayProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectCardOverlay - Bold 2-column grid with gradient overlays and animated arrow indicators.
@@ -89,6 +91,6 @@ interface ProjectCardOverlayProps {
  * dot indicator. Perfect for photography portfolios, creative agencies, or any showcase
  * where bold visuals and interactive hover states create impact.
  */
-declare function ProjectCardOverlay({ heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, cardClassName, }: ProjectCardOverlayProps): react_jsx_runtime.JSX.Element;
+declare function ProjectCardOverlay({ sectionId, heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, cardClassName, }: ProjectCardOverlayProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectCardOverlay, type ProjectCardOverlayItem, type ProjectCardOverlayProps };

package/dist/project-card-overlay.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -79,6 +79,8 @@ interface ProjectCardOverlayProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectCardOverlay - Bold 2-column grid with gradient overlays and animated arrow indicators.
@@ -89,6 +91,6 @@ interface ProjectCardOverlayProps {
  * dot indicator. Perfect for photography portfolios, creative agencies, or any showcase
  * where bold visuals and interactive hover states create impact.
  */
-declare function ProjectCardOverlay({ heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, cardClassName, }: ProjectCardOverlayProps): react_jsx_runtime.JSX.Element;
+declare function ProjectCardOverlay({ sectionId, heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, cardClassName, }: ProjectCardOverlayProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectCardOverlay, type ProjectCardOverlayItem, type ProjectCardOverlayProps };

package/dist/project-card-overlay.js

@@ -460,6 +460,7 @@ var ProjectCard = ({
   );
 };
 function ProjectCardOverlay({
+  sectionId = "project-card-overlay",
   heading,
   subheading,
   projects,
@@ -493,6 +494,7 @@ function ProjectCardOverlay({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-carousel-cinematic.cjs

@@ -551,6 +551,7 @@ function CarouselItem({ className, ...props }) {
   );
 }
 function ProjectCarouselCinematic({
+  sectionId = "project-carousel-cinematic",
   heading,
   subheading,
   projects,
@@ -605,6 +606,7 @@ function ProjectCarouselCinematic({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-carousel-cinematic.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -81,6 +81,8 @@ interface ProjectCarouselCinematicProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectCarouselCinematic - Wide carousel with 16:9 cinematic aspect ratio and category badges.
@@ -91,6 +93,6 @@ interface ProjectCarouselCinematicProps {
  * (48px) for better visibility. Perfect for film portfolios, video production showcases, or
  * any project collection where widescreen presentation enhances the visual impact.
  */
-declare function ProjectCarouselCinematic({ heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectCarouselCinematicProps): react_jsx_runtime.JSX.Element;
+declare function ProjectCarouselCinematic({ sectionId, heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectCarouselCinematicProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectCarouselCinematic, type ProjectCarouselCinematicItem, type ProjectCarouselCinematicProps };

package/dist/project-carousel-cinematic.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -81,6 +81,8 @@ interface ProjectCarouselCinematicProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectCarouselCinematic - Wide carousel with 16:9 cinematic aspect ratio and category badges.
@@ -91,6 +93,6 @@ interface ProjectCarouselCinematicProps {
  * (48px) for better visibility. Perfect for film portfolios, video production showcases, or
  * any project collection where widescreen presentation enhances the visual impact.
  */
-declare function ProjectCarouselCinematic({ heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectCarouselCinematicProps): react_jsx_runtime.JSX.Element;
+declare function ProjectCarouselCinematic({ sectionId, heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectCarouselCinematicProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectCarouselCinematic, type ProjectCarouselCinematicItem, type ProjectCarouselCinematicProps };

package/dist/project-carousel-cinematic.js

@@ -527,6 +527,7 @@ function CarouselItem({ className, ...props }) {
   );
 }
 function ProjectCarouselCinematic({
+  sectionId = "project-carousel-cinematic",
   heading,
   subheading,
   projects,
@@ -581,6 +582,7 @@ function ProjectCarouselCinematic({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-carousel-detail-cards.cjs

@@ -615,6 +615,7 @@ function CarouselItem({ className, ...props }) {
   );
 }
 function ProjectCarouselDetailCards({
+  sectionId = "project-carousel-detail-cards",
   heading,
   subheading,
   projects,
@@ -698,6 +699,7 @@ function ProjectCarouselDetailCards({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-carousel-detail-cards.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -81,6 +81,8 @@ interface ProjectCarouselDetailCardsProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectCarouselDetailCards - Rich carousel with complete metadata, icons, and descriptions.
@@ -91,6 +93,6 @@ interface ProjectCarouselDetailCardsProps {
  * Cards are 600px wide with generous spacing. Perfect for case studies, detailed portfolios,
  * or any showcase where comprehensive project information is important alongside visuals.
  */
-declare function ProjectCarouselDetailCards({ heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectCarouselDetailCardsProps): react_jsx_runtime.JSX.Element;
+declare function ProjectCarouselDetailCards({ sectionId, heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectCarouselDetailCardsProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectCarouselDetailCards, type ProjectCarouselDetailCardsItem, type ProjectCarouselDetailCardsProps };

package/dist/project-carousel-detail-cards.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -81,6 +81,8 @@ interface ProjectCarouselDetailCardsProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectCarouselDetailCards - Rich carousel with complete metadata, icons, and descriptions.
@@ -91,6 +93,6 @@ interface ProjectCarouselDetailCardsProps {
  * Cards are 600px wide with generous spacing. Perfect for case studies, detailed portfolios,
  * or any showcase where comprehensive project information is important alongside visuals.
  */
-declare function ProjectCarouselDetailCards({ heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectCarouselDetailCardsProps): react_jsx_runtime.JSX.Element;
+declare function ProjectCarouselDetailCards({ sectionId, heading, subheading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectCarouselDetailCardsProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectCarouselDetailCards, type ProjectCarouselDetailCardsItem, type ProjectCarouselDetailCardsProps };

package/dist/project-carousel-detail-cards.js

@@ -591,6 +591,7 @@ function CarouselItem({ className, ...props }) {
   );
 }
 function ProjectCarouselDetailCards({
+  sectionId = "project-carousel-detail-cards",
   heading,
   subheading,
   projects,
@@ -674,6 +675,7 @@ function ProjectCarouselDetailCards({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-carousel-minimal.cjs

@@ -551,6 +551,7 @@ function CarouselItem({ className, ...props }) {
   );
 }
 function ProjectCarouselMinimal({
+  sectionId = "project-carousel-minimal",
   heading,
   projects,
   projectsSlot,
@@ -606,6 +607,7 @@ function ProjectCarouselMinimal({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-carousel-minimal.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -73,6 +73,8 @@ interface ProjectCarouselMinimalProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectCarouselMinimal - Clean horizontal carousel with location metadata and view button.
@@ -84,6 +86,6 @@ interface ProjectCarouselMinimalProps {
  * Perfect for travel photography, location-based portfolios, or any project showcase where
  * geographic context is important.
  */
-declare function ProjectCarouselMinimal({ heading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, carouselClassName, cardClassName, }: ProjectCarouselMinimalProps): react_jsx_runtime.JSX.Element;
+declare function ProjectCarouselMinimal({ sectionId, heading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, carouselClassName, cardClassName, }: ProjectCarouselMinimalProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectCarouselMinimal, type ProjectCarouselMinimalItem, type ProjectCarouselMinimalProps };

package/dist/project-carousel-minimal.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -73,6 +73,8 @@ interface ProjectCarouselMinimalProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectCarouselMinimal - Clean horizontal carousel with location metadata and view button.
@@ -84,6 +86,6 @@ interface ProjectCarouselMinimalProps {
  * Perfect for travel photography, location-based portfolios, or any project showcase where
  * geographic context is important.
  */
-declare function ProjectCarouselMinimal({ heading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, carouselClassName, cardClassName, }: ProjectCarouselMinimalProps): react_jsx_runtime.JSX.Element;
+declare function ProjectCarouselMinimal({ sectionId, heading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, carouselClassName, cardClassName, }: ProjectCarouselMinimalProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectCarouselMinimal, type ProjectCarouselMinimalItem, type ProjectCarouselMinimalProps };

package/dist/project-carousel-minimal.js

@@ -527,6 +527,7 @@ function CarouselItem({ className, ...props }) {
   );
 }
 function ProjectCarouselMinimal({
+  sectionId = "project-carousel-minimal",
   heading,
   projects,
   projectsSlot,
@@ -582,6 +583,7 @@ function ProjectCarouselMinimal({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-detail-architecture-carousel.cjs

@@ -577,6 +577,7 @@ var fadeInUp = {
 };
 function ProjectDetailArchitectureCarousel(props) {
   const {
+    sectionId: sectionIdProp,
     title,
     subtitle,
     year,
@@ -609,6 +610,7 @@ function ProjectDetailArchitectureCarousel(props) {
     showPdfTab,
     enableLightbox
   } = props;
+  const sectionId = sectionIdProp ?? "project-detail-architecture-carousel";
   const [currentSlide, setCurrentSlide] = React.useState(0);
   const [selectedTab, setSelectedTab] = React.useState(
     "slides"
@@ -680,6 +682,7 @@ function ProjectDetailArchitectureCarousel(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-detail-architecture-carousel.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -76,6 +76,8 @@ interface ProjectDetailArchitectureCarouselProps {
     showPdfTab?: boolean;
     /** Whether to enable lightbox for carousel images */
     enableLightbox?: boolean;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 declare function ProjectDetailArchitectureCarousel(props: ProjectDetailArchitectureCarouselProps): React.JSX.Element;
 

package/dist/project-detail-architecture-carousel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -76,6 +76,8 @@ interface ProjectDetailArchitectureCarouselProps {
     showPdfTab?: boolean;
     /** Whether to enable lightbox for carousel images */
     enableLightbox?: boolean;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 declare function ProjectDetailArchitectureCarousel(props: ProjectDetailArchitectureCarouselProps): React.JSX.Element;
 

package/dist/project-detail-architecture-carousel.js

@@ -556,6 +556,7 @@ var fadeInUp = {
 };
 function ProjectDetailArchitectureCarousel(props) {
   const {
+    sectionId: sectionIdProp,
     title,
     subtitle,
     year,
@@ -588,6 +589,7 @@ function ProjectDetailArchitectureCarousel(props) {
     showPdfTab,
     enableLightbox
   } = props;
+  const sectionId = sectionIdProp ?? "project-detail-architecture-carousel";
   const [currentSlide, setCurrentSlide] = useState(0);
   const [selectedTab, setSelectedTab] = useState(
     "slides"
@@ -659,6 +661,7 @@ function ProjectDetailArchitectureCarousel(props) {
   return /* @__PURE__ */ jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-detail-card-header.cjs

@@ -431,6 +431,7 @@ var fadeInUp = {
 };
 function ProjectDetailCardHeader(props) {
   const {
+    sectionId: sectionIdProp,
     title,
     subtitle,
     year,
@@ -454,6 +455,7 @@ function ProjectDetailCardHeader(props) {
     heroImageClassName,
     galleryClassName
   } = props;
+  const sectionId = sectionIdProp ?? "project-detail-card-header";
   const renderedBackAction = React.useMemo(() => {
     if (backActionSlot) return backActionSlot;
     if (!backAction) return null;
@@ -484,6 +486,7 @@ function ProjectDetailCardHeader(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-detail-card-header.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -54,6 +54,8 @@ interface ProjectDetailCardHeaderProps {
     heroImageClassName?: string;
     /** Additional CSS classes for the gallery section */
     galleryClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 declare function ProjectDetailCardHeader(props: ProjectDetailCardHeaderProps): React.JSX.Element;
 

package/dist/project-detail-card-header.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -54,6 +54,8 @@ interface ProjectDetailCardHeaderProps {
     heroImageClassName?: string;
     /** Additional CSS classes for the gallery section */
     galleryClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 declare function ProjectDetailCardHeader(props: ProjectDetailCardHeaderProps): React.JSX.Element;
 

package/dist/project-detail-card-header.js

@@ -425,6 +425,7 @@ var fadeInUp = {
 };
 function ProjectDetailCardHeader(props) {
   const {
+    sectionId: sectionIdProp,
     title,
     subtitle,
     year,
@@ -448,6 +449,7 @@ function ProjectDetailCardHeader(props) {
     heroImageClassName,
     galleryClassName
   } = props;
+  const sectionId = sectionIdProp ?? "project-detail-card-header";
   const renderedBackAction = useMemo(() => {
     if (backActionSlot) return backActionSlot;
     if (!backAction) return null;
@@ -478,6 +480,7 @@ function ProjectDetailCardHeader(props) {
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-detail-case-study-prose.cjs

@@ -408,6 +408,7 @@ var fadeInUp = {
 };
 function ProjectDetailCaseStudyProse(props) {
   const {
+    sectionId: sectionIdProp,
     title,
     subtitle,
     year,
@@ -432,6 +433,7 @@ function ProjectDetailCaseStudyProse(props) {
     overviewClassName,
     sectionsClassName
   } = props;
+  const sectionId = sectionIdProp ?? "project-detail-case-study-prose";
   const renderedBackAction = React.useMemo(() => {
     if (backActionSlot) return backActionSlot;
     if (!backAction) return null;
@@ -462,6 +464,7 @@ function ProjectDetailCaseStudyProse(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-detail-case-study-prose.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { S as SectionItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -56,6 +56,8 @@ interface ProjectDetailCaseStudyProseProps {
     overviewClassName?: string;
     /** Additional CSS classes for the sections container */
     sectionsClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 declare function ProjectDetailCaseStudyProse(props: ProjectDetailCaseStudyProseProps): React.JSX.Element;