@sonordev/agency-site-kit 0.1.0 → 0.1.1

package/dist/{BeforeAfterSection-6QUJOBO2.js → BeforeAfterSection-6BHFLY4Y.js}

@@ -10,8 +10,8 @@ function BeforeAfterSection({ data }) {
   const sliderRef = useRef(null);
   const [position, setPosition] = useState(data.defaultPosition ?? 50);
   const isDragging = useRef(false);
-  const beforeUrl = data.before?.asset?._ref || "";
-  const afterUrl = data.after?.asset?._ref || "";
+  const beforeUrl = data.beforeUrl || data.before?.asset?._ref || "";
+  const afterUrl = data.afterUrl || data.after?.asset?._ref || "";
   useEffect(() => {
     const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     if (prefersReducedMotion || !sliderRef.current) return;
@@ -148,7 +148,7 @@ function BeforeAfterSection({ data }) {
                     color: "#ffffff",
                     backdropFilter: "blur(4px)"
                   },
-                  children: "Before"
+                  children: data.beforeLabel || "Before"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -160,7 +160,7 @@ function BeforeAfterSection({ data }) {
                     color: "#ffffff",
                     backdropFilter: "blur(4px)"
                   },
-                  children: "After"
+                  children: data.afterLabel || "After"
                 }
               )
             ]
@@ -172,5 +172,5 @@ function BeforeAfterSection({ data }) {
 }
 
 export { BeforeAfterSection as default };
-//# sourceMappingURL=BeforeAfterSection-6QUJOBO2.js.map
-//# sourceMappingURL=BeforeAfterSection-6QUJOBO2.js.map
+//# sourceMappingURL=BeforeAfterSection-6BHFLY4Y.js.map
+//# sourceMappingURL=BeforeAfterSection-6BHFLY4Y.js.map

package/dist/BeforeAfterSection-6BHFLY4Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/BeforeAfterSection.tsx"],"names":[],"mappings":"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","file":"BeforeAfterSection-6BHFLY4Y.js","sourcesContent":["'use client';\n\nimport React, { useRef, useState, useCallback, useEffect } from 'react';\nimport gsap from 'gsap';\nimport type { PortfolioBeforeAfterData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface BeforeAfterSectionProps {\n  data: PortfolioBeforeAfterData;\n}\n\nexport default function BeforeAfterSection({ data }: BeforeAfterSectionProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState(data.defaultPosition ?? 50);\n  const isDragging = useRef(false);\n\n  // Support both Sanity image refs and direct URL strings\n  const beforeUrl = (data as any).beforeUrl || data.before?.asset?._ref || '';\n  const afterUrl = (data as any).afterUrl || data.after?.asset?._ref || '';\n\n  // Animate slider handle entrance\n  useEffect(() => {\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion || !sliderRef.current) return;\n\n    gsap.fromTo(\n      sliderRef.current,\n      { opacity: 0, scale: 0.8 },\n      { opacity: 1, scale: 1, duration: 0.6, delay: 0.5, ease: 'back.out(2)' },\n    );\n  }, []);\n\n  const updatePosition = useCallback((clientX: number) => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const rect = container.getBoundingClientRect();\n    const x = clientX - rect.left;\n    const percent = Math.max(0, Math.min(100, (x / rect.width) * 100));\n    setPosition(percent);\n  }, []);\n\n  const handlePointerDown = useCallback(\n    (e: React.PointerEvent) => {\n      isDragging.current = true;\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n      updatePosition(e.clientX);\n    },\n    [updatePosition],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: React.PointerEvent) => {\n      if (!isDragging.current) return;\n      updatePosition(e.clientX);\n    },\n    [updatePosition],\n  );\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n  }, []);\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-5xl mx-auto px-6\">\n        {(data.title || data.description) && (\n          <ScrollReveal y={30}>\n            {data.title && (\n              <h2\n                className=\"text-3xl md:text-4xl font-bold mb-4\"\n                style={{\n                  color: 'var(--sk-text-primary, #ffffff)',\n                  fontFamily: 'var(--sk-font-heading, inherit)',\n                }}\n              >\n                {data.title}\n              </h2>\n            )}\n            {data.description && (\n              <p\n                className=\"text-lg mb-12 max-w-2xl\"\n                style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n              >\n                {data.description}\n              </p>\n            )}\n          </ScrollReveal>\n        )}\n\n        <ScrollReveal y={40}>\n          <GlassCard padding=\"sm\" hover={false}>\n            <div\n              ref={containerRef}\n              className=\"relative w-full overflow-hidden rounded-xl cursor-col-resize select-none\"\n              style={{ aspectRatio: '16/10' }}\n              onPointerDown={handlePointerDown}\n              onPointerMove={handlePointerMove}\n              onPointerUp={handlePointerUp}\n              onPointerCancel={handlePointerUp}\n            >\n              {/* After image (full background) */}\n              <img\n                src={afterUrl}\n                alt=\"After\"\n                className=\"absolute inset-0 w-full h-full object-cover\"\n                draggable={false}\n              />\n\n              {/* Before image (clipped) */}\n              <div\n                className=\"absolute inset-0 overflow-hidden\"\n                style={{ width: `${position}%` }}\n              >\n                <img\n                  src={beforeUrl}\n                  alt=\"Before\"\n                  className=\"absolute inset-0 w-full h-full object-cover\"\n                  style={{ minWidth: containerRef.current?.offsetWidth || '100%' }}\n                  draggable={false}\n                />\n              </div>\n\n              {/* Slider line */}\n              <div\n                className=\"absolute top-0 bottom-0 w-0.5\"\n                style={{\n                  left: `${position}%`,\n                  transform: 'translateX(-50%)',\n                  background: '#ffffff',\n                  boxShadow: '0 0 8px rgba(0,0,0,0.5)',\n                }}\n              />\n\n              {/* Slider handle */}\n              <div\n                ref={sliderRef}\n                className=\"absolute top-1/2 flex items-center justify-center w-10 h-10 rounded-full\"\n                style={{\n                  left: `${position}%`,\n                  transform: 'translate(-50%, -50%)',\n                  background: 'var(--sk-primary, #6366f1)',\n                  boxShadow: '0 4px 16px rgba(0,0,0,0.3)',\n                  border: '3px solid #ffffff',\n                  zIndex: 5,\n                }}\n              >\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                  <path d=\"M5 3l-4 5 4 5M11 3l4 5-4 5\" stroke=\"#ffffff\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n              </div>\n\n              {/* Before / After labels */}\n              <span\n                className=\"absolute top-4 left-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider\"\n                style={{\n                  background: 'rgba(0,0,0,0.6)',\n                  color: '#ffffff',\n                  backdropFilter: 'blur(4px)',\n                }}\n              >\n                {(data as any).beforeLabel || 'Before'}\n              </span>\n              <span\n                className=\"absolute top-4 right-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider\"\n                style={{\n                  background: 'rgba(0,0,0,0.6)',\n                  color: '#ffffff',\n                  backdropFilter: 'blur(4px)',\n                }}\n              >\n                {(data as any).afterLabel || 'After'}\n              </span>\n            </div>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/{BeforeAfterSection-DVAWWE4K.cjs → BeforeAfterSection-JTORBR3A.cjs}

@@ -15,8 +15,8 @@ function BeforeAfterSection({ data }) {
   const sliderRef = react.useRef(null);
   const [position, setPosition] = react.useState(data.defaultPosition ?? 50);
   const isDragging = react.useRef(false);
-  const beforeUrl = data.before?.asset?._ref || "";
-  const afterUrl = data.after?.asset?._ref || "";
+  const beforeUrl = data.beforeUrl || data.before?.asset?._ref || "";
+  const afterUrl = data.afterUrl || data.after?.asset?._ref || "";
   react.useEffect(() => {
     const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     if (prefersReducedMotion || !sliderRef.current) return;
@@ -153,7 +153,7 @@ function BeforeAfterSection({ data }) {
                     color: "#ffffff",
                     backdropFilter: "blur(4px)"
                   },
-                  children: "Before"
+                  children: data.beforeLabel || "Before"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -165,7 +165,7 @@ function BeforeAfterSection({ data }) {
                     color: "#ffffff",
                     backdropFilter: "blur(4px)"
                   },
-                  children: "After"
+                  children: data.afterLabel || "After"
                 }
               )
             ]
@@ -177,5 +177,5 @@ function BeforeAfterSection({ data }) {
 }
 
 module.exports = BeforeAfterSection;
-//# sourceMappingURL=BeforeAfterSection-DVAWWE4K.cjs.map
-//# sourceMappingURL=BeforeAfterSection-DVAWWE4K.cjs.map
+//# sourceMappingURL=BeforeAfterSection-JTORBR3A.cjs.map
+//# sourceMappingURL=BeforeAfterSection-JTORBR3A.cjs.map

package/dist/BeforeAfterSection-JTORBR3A.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/BeforeAfterSection.tsx"],"names":["useRef","useState","useEffect","gsap","useCallback","jsx","jsxs","ScrollReveal","GlassCard"],"mappings":";;;;;;;;;;;;AAYe,SAAR,kBAAA,CAAoC,EAAE,IAAA,EAAK,EAA4B;AAC5E,EAAA,MAAM,YAAA,GAAeA,aAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,SAAA,GAAYA,aAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,IAAIC,cAAA,CAAS,IAAA,CAAK,mBAAmB,EAAE,CAAA;AACnE,EAAA,MAAM,UAAA,GAAaD,aAAO,KAAK,CAAA;AAG/B,EAAA,MAAM,YAAa,IAAA,CAAa,SAAA,IAAa,IAAA,CAAK,MAAA,EAAQ,OAAO,IAAA,IAAQ,EAAA;AACzE,EAAA,MAAM,WAAY,IAAA,CAAa,QAAA,IAAY,IAAA,CAAK,KAAA,EAAO,OAAO,IAAA,IAAQ,EAAA;AAGtE,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,oBAAA,GAAuB,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AACnF,IAAA,IAAI,oBAAA,IAAwB,CAAC,SAAA,CAAU,OAAA,EAAS;AAEhD,IAAAC,qBAAA,CAAK,MAAA;AAAA,MACH,SAAA,CAAU,OAAA;AAAA,MACV,EAAE,OAAA,EAAS,CAAA,EAAG,KAAA,EAAO,GAAA,EAAI;AAAA,MACzB,EAAE,OAAA,EAAS,CAAA,EAAG,KAAA,EAAO,CAAA,EAAG,UAAU,GAAA,EAAK,KAAA,EAAO,GAAA,EAAK,IAAA,EAAM,aAAA;AAAc,KACzE;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,cAAA,GAAiBC,iBAAA,CAAY,CAAC,OAAA,KAAoB;AACtD,IAAA,MAAM,YAAY,YAAA,CAAa,OAAA;AAC/B,IAAA,IAAI,CAAC,SAAA,EAAW;AAEhB,IAAA,MAAM,IAAA,GAAO,UAAU,qBAAA,EAAsB;AAC7C,IAAA,MAAM,CAAA,GAAI,UAAU,IAAA,CAAK,IAAA;AACzB,IAAA,MAAM,OAAA,GAAU,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,GAAA,EAAM,CAAA,GAAI,IAAA,CAAK,KAAA,GAAS,GAAG,CAAC,CAAA;AACjE,IAAA,WAAA,CAAY,OAAO,CAAA;AAAA,EACrB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,iBAAA,GAAoBA,iBAAA;AAAA,IACxB,CAAC,CAAA,KAA0B;AACzB,MAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AACrB,MAAC,CAAA,CAAE,MAAA,CAAuB,iBAAA,CAAkB,CAAA,CAAE,SAAS,CAAA;AACvD,MAAA,cAAA,CAAe,EAAE,OAAO,CAAA;AAAA,IAC1B,CAAA;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,iBAAA,GAAoBA,iBAAA;AAAA,IACxB,CAAC,CAAA,KAA0B;AACzB,MAAA,IAAI,CAAC,WAAW,OAAA,EAAS;AACzB,MAAA,cAAA,CAAe,EAAE,OAAO,CAAA;AAAA,IAC1B,CAAA;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,eAAA,GAAkBA,kBAAY,MAAM;AACxC,IAAA,UAAA,CAAW,OAAA,GAAU,KAAA;AAAA,EACvB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACEC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,uBAAA;AAAA,MACV,KAAA,EAAO,EAAE,UAAA,EAAY,uBAAA,EAAwB;AAAA,MAE7C,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACX,QAAA,EAAA;AAAA,QAAA,CAAA,IAAA,CAAK,SAAS,IAAA,CAAK,WAAA,qBACnBA,eAAA,CAACC,8BAAA,EAAA,EAAa,GAAG,EAAA,EACd,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,KAAA,oBACJF,cAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,qCAAA;AAAA,cACV,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,iCAAA;AAAA,gBACP,UAAA,EAAY;AAAA,eACd;AAAA,cAEC,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,WACR;AAAA,UAED,KAAK,WAAA,oBACJA,cAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,yBAAA;AAAA,cACV,KAAA,EAAO,EAAE,KAAA,EAAO,mCAAA,EAAoC;AAAA,cAEnD,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EAEJ,CAAA;AAAA,wBAGFA,cAAA,CAACE,kCAAa,CAAA,EAAG,EAAA,EACf,yCAACC,2BAAA,EAAA,EAAU,OAAA,EAAQ,IAAA,EAAK,KAAA,EAAO,KAAA,EAC7B,QAAA,kBAAAF,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,YAAA;AAAA,YACL,SAAA,EAAU,0EAAA;AAAA,YACV,KAAA,EAAO,EAAE,WAAA,EAAa,OAAA,EAAQ;AAAA,YAC9B,aAAA,EAAe,iBAAA;AAAA,YACf,aAAA,EAAe,iBAAA;AAAA,YACf,WAAA,EAAa,eAAA;AAAA,YACb,eAAA,EAAiB,eAAA;AAAA,YAGjB,QAAA,EAAA;AAAA,8BAAAD,cAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,GAAA,EAAK,QAAA;AAAA,kBACL,GAAA,EAAI,OAAA;AAAA,kBACJ,SAAA,EAAU,6CAAA;AAAA,kBACV,SAAA,EAAW;AAAA;AAAA,eACb;AAAA,8BAGAA,cAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,kCAAA;AAAA,kBACV,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAA,EAAI;AAAA,kBAE/B,QAAA,kBAAAA,cAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBACC,GAAA,EAAK,SAAA;AAAA,sBACL,GAAA,EAAI,QAAA;AAAA,sBACJ,SAAA,EAAU,6CAAA;AAAA,sBACV,OAAO,EAAE,QAAA,EAAU,YAAA,CAAa,OAAA,EAAS,eAAe,MAAA,EAAO;AAAA,sBAC/D,SAAA,EAAW;AAAA;AAAA;AACb;AAAA,eACF;AAAA,8BAGAA,cAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,+BAAA;AAAA,kBACV,KAAA,EAAO;AAAA,oBACL,IAAA,EAAM,GAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,oBACjB,SAAA,EAAW,kBAAA;AAAA,oBACX,UAAA,EAAY,SAAA;AAAA,oBACZ,SAAA,EAAW;AAAA;AACb;AAAA,eACF;AAAA,8BAGAA,cAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,GAAA,EAAK,SAAA;AAAA,kBACL,SAAA,EAAU,0EAAA;AAAA,kBACV,KAAA,EAAO;AAAA,oBACL,IAAA,EAAM,GAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,oBACjB,SAAA,EAAW,uBAAA;AAAA,oBACX,UAAA,EAAY,4BAAA;AAAA,oBACZ,SAAA,EAAW,4BAAA;AAAA,oBACX,MAAA,EAAQ,mBAAA;AAAA,oBACR,MAAA,EAAQ;AAAA,mBACV;AAAA,kBAEA,QAAA,kBAAAA,cAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EACnD,QAAA,kBAAAA,cAAA,CAAC,UAAK,CAAA,EAAE,4BAAA,EAA6B,QAAO,SAAA,EAAU,WAAA,EAAY,KAAI,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,OAAA,EAAQ,CAAA,EACrH;AAAA;AAAA,eACF;AAAA,8BAGAA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,2FAAA;AAAA,kBACV,KAAA,EAAO;AAAA,oBACL,UAAA,EAAY,iBAAA;AAAA,oBACZ,KAAA,EAAO,SAAA;AAAA,oBACP,cAAA,EAAgB;AAAA,mBAClB;AAAA,kBAEE,eAAa,WAAA,IAAe;AAAA;AAAA,eAChC;AAAA,8BACAA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,4FAAA;AAAA,kBACV,KAAA,EAAO;AAAA,oBACL,UAAA,EAAY,iBAAA;AAAA,oBACZ,KAAA,EAAO,SAAA;AAAA,oBACP,cAAA,EAAgB;AAAA,mBAClB;AAAA,kBAEE,eAAa,UAAA,IAAc;AAAA;AAAA;AAC/B;AAAA;AAAA,WAEJ,CAAA,EACF;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ","file":"BeforeAfterSection-JTORBR3A.cjs","sourcesContent":["'use client';\n\nimport React, { useRef, useState, useCallback, useEffect } from 'react';\nimport gsap from 'gsap';\nimport type { PortfolioBeforeAfterData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface BeforeAfterSectionProps {\n  data: PortfolioBeforeAfterData;\n}\n\nexport default function BeforeAfterSection({ data }: BeforeAfterSectionProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState(data.defaultPosition ?? 50);\n  const isDragging = useRef(false);\n\n  // Support both Sanity image refs and direct URL strings\n  const beforeUrl = (data as any).beforeUrl || data.before?.asset?._ref || '';\n  const afterUrl = (data as any).afterUrl || data.after?.asset?._ref || '';\n\n  // Animate slider handle entrance\n  useEffect(() => {\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    if (prefersReducedMotion || !sliderRef.current) return;\n\n    gsap.fromTo(\n      sliderRef.current,\n      { opacity: 0, scale: 0.8 },\n      { opacity: 1, scale: 1, duration: 0.6, delay: 0.5, ease: 'back.out(2)' },\n    );\n  }, []);\n\n  const updatePosition = useCallback((clientX: number) => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const rect = container.getBoundingClientRect();\n    const x = clientX - rect.left;\n    const percent = Math.max(0, Math.min(100, (x / rect.width) * 100));\n    setPosition(percent);\n  }, []);\n\n  const handlePointerDown = useCallback(\n    (e: React.PointerEvent) => {\n      isDragging.current = true;\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n      updatePosition(e.clientX);\n    },\n    [updatePosition],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: React.PointerEvent) => {\n      if (!isDragging.current) return;\n      updatePosition(e.clientX);\n    },\n    [updatePosition],\n  );\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n  }, []);\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-5xl mx-auto px-6\">\n        {(data.title || data.description) && (\n          <ScrollReveal y={30}>\n            {data.title && (\n              <h2\n                className=\"text-3xl md:text-4xl font-bold mb-4\"\n                style={{\n                  color: 'var(--sk-text-primary, #ffffff)',\n                  fontFamily: 'var(--sk-font-heading, inherit)',\n                }}\n              >\n                {data.title}\n              </h2>\n            )}\n            {data.description && (\n              <p\n                className=\"text-lg mb-12 max-w-2xl\"\n                style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n              >\n                {data.description}\n              </p>\n            )}\n          </ScrollReveal>\n        )}\n\n        <ScrollReveal y={40}>\n          <GlassCard padding=\"sm\" hover={false}>\n            <div\n              ref={containerRef}\n              className=\"relative w-full overflow-hidden rounded-xl cursor-col-resize select-none\"\n              style={{ aspectRatio: '16/10' }}\n              onPointerDown={handlePointerDown}\n              onPointerMove={handlePointerMove}\n              onPointerUp={handlePointerUp}\n              onPointerCancel={handlePointerUp}\n            >\n              {/* After image (full background) */}\n              <img\n                src={afterUrl}\n                alt=\"After\"\n                className=\"absolute inset-0 w-full h-full object-cover\"\n                draggable={false}\n              />\n\n              {/* Before image (clipped) */}\n              <div\n                className=\"absolute inset-0 overflow-hidden\"\n                style={{ width: `${position}%` }}\n              >\n                <img\n                  src={beforeUrl}\n                  alt=\"Before\"\n                  className=\"absolute inset-0 w-full h-full object-cover\"\n                  style={{ minWidth: containerRef.current?.offsetWidth || '100%' }}\n                  draggable={false}\n                />\n              </div>\n\n              {/* Slider line */}\n              <div\n                className=\"absolute top-0 bottom-0 w-0.5\"\n                style={{\n                  left: `${position}%`,\n                  transform: 'translateX(-50%)',\n                  background: '#ffffff',\n                  boxShadow: '0 0 8px rgba(0,0,0,0.5)',\n                }}\n              />\n\n              {/* Slider handle */}\n              <div\n                ref={sliderRef}\n                className=\"absolute top-1/2 flex items-center justify-center w-10 h-10 rounded-full\"\n                style={{\n                  left: `${position}%`,\n                  transform: 'translate(-50%, -50%)',\n                  background: 'var(--sk-primary, #6366f1)',\n                  boxShadow: '0 4px 16px rgba(0,0,0,0.3)',\n                  border: '3px solid #ffffff',\n                  zIndex: 5,\n                }}\n              >\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                  <path d=\"M5 3l-4 5 4 5M11 3l4 5-4 5\" stroke=\"#ffffff\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n              </div>\n\n              {/* Before / After labels */}\n              <span\n                className=\"absolute top-4 left-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider\"\n                style={{\n                  background: 'rgba(0,0,0,0.6)',\n                  color: '#ffffff',\n                  backdropFilter: 'blur(4px)',\n                }}\n              >\n                {(data as any).beforeLabel || 'Before'}\n              </span>\n              <span\n                className=\"absolute top-4 right-4 px-3 py-1 rounded-lg text-xs font-semibold uppercase tracking-wider\"\n                style={{\n                  background: 'rgba(0,0,0,0.6)',\n                  color: '#ffffff',\n                  backdropFilter: 'blur(4px)',\n                }}\n              >\n                {(data as any).afterLabel || 'After'}\n              </span>\n            </div>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/DesignSystemSection-2R5BRBGO.js

@@ -0,0 +1,172 @@
+import { GlassCard } from './chunk-YB4B3OMC.js';
+import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function isLightColor(hex) {
+  const c = hex.replace("#", "");
+  const r = parseInt(c.substring(0, 2), 16);
+  const g = parseInt(c.substring(2, 4), 16);
+  const b = parseInt(c.substring(4, 6), 16);
+  return (r * 299 + g * 587 + b * 114) / 1e3 > 140;
+}
+function DesignSystemSection({ data }) {
+  const { colors, fonts } = data;
+  const headingFont = fonts.find((f) => f.usage === "heading") || fonts[0];
+  const bodyFont = fonts.find((f) => f.usage === "body") || fonts[1] || fonts[0];
+  if (!colors.length && !fonts.length) return null;
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-5xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxs(ScrollReveal, { y: 30, children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-4",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: "Design System"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: "The visual language we crafted for this project."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
+          colors.length > 0 && /* @__PURE__ */ jsx(ScrollReveal, { y: 20, children: /* @__PURE__ */ jsxs(GlassCard, { padding: "lg", hover: false, children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: "text-base font-semibold mb-4",
+                style: { color: "var(--sk-text-primary, #ffffff)" },
+                children: "Color Palette"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-3", children: colors.map((color, ci) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "w-full aspect-square rounded-lg border flex items-end justify-center pb-2",
+                  style: {
+                    background: color.hex,
+                    borderColor: "color-mix(in srgb, var(--sk-text-tertiary, #71717a) 20%, transparent)"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-[10px] font-mono font-medium px-1.5 py-0.5 rounded",
+                      style: {
+                        color: isLightColor(color.hex) ? "#000" : "#fff",
+                        background: isLightColor(color.hex) ? "rgba(0,0,0,0.15)" : "rgba(255,255,255,0.15)"
+                      },
+                      children: color.hex
+                    }
+                  )
+                }
+              ),
+              color.context && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-[10px] capitalize",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: color.context
+                }
+              )
+            ] }, ci)) })
+          ] }) }),
+          fonts.length > 0 && /* @__PURE__ */ jsx(ScrollReveal, { y: 20, delay: 0.1, children: /* @__PURE__ */ jsxs(GlassCard, { padding: "lg", hover: false, children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: "text-base font-semibold mb-4",
+                style: { color: "var(--sk-text-primary, #ffffff)" },
+                children: "Typography"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+              headingFont && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-[10px] font-medium uppercase tracking-wider block mb-2",
+                    style: { color: "var(--sk-text-tertiary, #71717a)" },
+                    children: "Headings"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "text-2xl font-bold",
+                    style: {
+                      color: "var(--sk-text-primary, #ffffff)",
+                      fontFamily: headingFont.family
+                    },
+                    children: headingFont.family
+                  }
+                ),
+                headingFont.weights && headingFont.weights.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-2 mt-2", children: headingFont.weights.map((w) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-xs px-2 py-0.5 rounded",
+                    style: {
+                      background: "color-mix(in srgb, var(--sk-text-tertiary, #71717a) 15%, transparent)",
+                      color: "var(--sk-text-tertiary, #71717a)",
+                      fontWeight: w
+                    },
+                    children: w
+                  },
+                  w
+                )) })
+              ] }),
+              bodyFont && bodyFont.family !== headingFont?.family && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "text-[10px] font-medium uppercase tracking-wider block mb-2",
+                    style: { color: "var(--sk-text-tertiary, #71717a)" },
+                    children: "Body"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "text-lg",
+                    style: {
+                      color: "var(--sk-text-primary, #ffffff)",
+                      fontFamily: bodyFont.family
+                    },
+                    children: bodyFont.family
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "text-sm mt-2 leading-relaxed",
+                    style: {
+                      color: "var(--sk-text-tertiary, #71717a)",
+                      fontFamily: bodyFont.family
+                    },
+                    children: "The quick brown fox jumps over the lazy dog. Clean, readable type that puts content first."
+                  }
+                )
+              ] })
+            ] })
+          ] }) })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { DesignSystemSection as default };
+//# sourceMappingURL=DesignSystemSection-2R5BRBGO.js.map
+//# sourceMappingURL=DesignSystemSection-2R5BRBGO.js.map

package/dist/DesignSystemSection-2R5BRBGO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/DesignSystemSection.tsx"],"names":[],"mappings":"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","file":"DesignSystemSection-2R5BRBGO.js","sourcesContent":["'use client';\n\nimport React from 'react';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface ColorEntry {\n  hex: string;\n  usageCount?: number;\n  context?: string;\n}\n\ninterface FontEntry {\n  family: string;\n  weights?: number[];\n  usage?: string; // 'heading' | 'body' | 'accent'\n}\n\nexport interface DesignSystemData {\n  colors: ColorEntry[];\n  fonts: FontEntry[];\n  headingStyles?: { font?: string; size?: string; weight?: string | number };\n  bodyStyles?: { font?: string; size?: string; lineHeight?: string };\n}\n\ninterface DesignSystemSectionProps {\n  data: DesignSystemData;\n}\n\n/** Determine if a hex color is light (needs dark text label) */\nfunction isLightColor(hex: string): boolean {\n  const c = hex.replace('#', '');\n  const r = parseInt(c.substring(0, 2), 16);\n  const g = parseInt(c.substring(2, 4), 16);\n  const b = parseInt(c.substring(4, 6), 16);\n  return (r * 299 + g * 587 + b * 114) / 1000 > 140;\n}\n\nexport default function DesignSystemSection({ data }: DesignSystemSectionProps) {\n  const { colors, fonts } = data;\n  const headingFont = fonts.find((f) => f.usage === 'heading') || fonts[0];\n  const bodyFont = fonts.find((f) => f.usage === 'body') || fonts[1] || fonts[0];\n\n  if (!colors.length && !fonts.length) return null;\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-5xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-4\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Design System\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            The visual language we crafted for this project.\n          </p>\n        </ScrollReveal>\n\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n          {/* Color Palette */}\n          {colors.length > 0 && (\n            <ScrollReveal y={20}>\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-base font-semibold mb-4\"\n                  style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                >\n                  Color Palette\n                </h3>\n                <div className=\"grid grid-cols-3 gap-3\">\n                  {colors.map((color, ci) => (\n                    <div key={ci} className=\"flex flex-col items-center gap-2\">\n                      <div\n                        className=\"w-full aspect-square rounded-lg border flex items-end justify-center pb-2\"\n                        style={{\n                          background: color.hex,\n                          borderColor: 'color-mix(in srgb, var(--sk-text-tertiary, #71717a) 20%, transparent)',\n                        }}\n                      >\n                        <span\n                          className=\"text-[10px] font-mono font-medium px-1.5 py-0.5 rounded\"\n                          style={{\n                            color: isLightColor(color.hex) ? '#000' : '#fff',\n                            background: isLightColor(color.hex) ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.15)',\n                          }}\n                        >\n                          {color.hex}\n                        </span>\n                      </div>\n                      {color.context && (\n                        <span\n                          className=\"text-[10px] capitalize\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {color.context}\n                        </span>\n                      )}\n                    </div>\n                  ))}\n                </div>\n              </GlassCard>\n            </ScrollReveal>\n          )}\n\n          {/* Typography */}\n          {fonts.length > 0 && (\n            <ScrollReveal y={20} delay={0.1}>\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-base font-semibold mb-4\"\n                  style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                >\n                  Typography\n                </h3>\n                <div className=\"flex flex-col gap-6\">\n                  {headingFont && (\n                    <div>\n                      <span\n                        className=\"text-[10px] font-medium uppercase tracking-wider block mb-2\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        Headings\n                      </span>\n                      <p\n                        className=\"text-2xl font-bold\"\n                        style={{\n                          color: 'var(--sk-text-primary, #ffffff)',\n                          fontFamily: headingFont.family,\n                        }}\n                      >\n                        {headingFont.family}\n                      </p>\n                      {headingFont.weights && headingFont.weights.length > 0 && (\n                        <div className=\"flex gap-2 mt-2\">\n                          {headingFont.weights.map((w) => (\n                            <span\n                              key={w}\n                              className=\"text-xs px-2 py-0.5 rounded\"\n                              style={{\n                                background: 'color-mix(in srgb, var(--sk-text-tertiary, #71717a) 15%, transparent)',\n                                color: 'var(--sk-text-tertiary, #71717a)',\n                                fontWeight: w,\n                              }}\n                            >\n                              {w}\n                            </span>\n                          ))}\n                        </div>\n                      )}\n                    </div>\n                  )}\n                  {bodyFont && bodyFont.family !== headingFont?.family && (\n                    <div>\n                      <span\n                        className=\"text-[10px] font-medium uppercase tracking-wider block mb-2\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        Body\n                      </span>\n                      <p\n                        className=\"text-lg\"\n                        style={{\n                          color: 'var(--sk-text-primary, #ffffff)',\n                          fontFamily: bodyFont.family,\n                        }}\n                      >\n                        {bodyFont.family}\n                      </p>\n                      <p\n                        className=\"text-sm mt-2 leading-relaxed\"\n                        style={{\n                          color: 'var(--sk-text-tertiary, #71717a)',\n                          fontFamily: bodyFont.family,\n                        }}\n                      >\n                        The quick brown fox jumps over the lazy dog. Clean, readable type that puts content first.\n                      </p>\n                    </div>\n                  )}\n                </div>\n              </GlassCard>\n            </ScrollReveal>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/DesignSystemSection-KXIQXITF.cjs

@@ -0,0 +1,174 @@
+'use strict';
+
+var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
+var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+function isLightColor(hex) {
+  const c = hex.replace("#", "");
+  const r = parseInt(c.substring(0, 2), 16);
+  const g = parseInt(c.substring(2, 4), 16);
+  const b = parseInt(c.substring(4, 6), 16);
+  return (r * 299 + g * 587 + b * 114) / 1e3 > 140;
+}
+function DesignSystemSection({ data }) {
+  const { colors, fonts } = data;
+  const headingFont = fonts.find((f) => f.usage === "heading") || fonts[0];
+  const bodyFont = fonts.find((f) => f.usage === "body") || fonts[1] || fonts[0];
+  if (!colors.length && !fonts.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-4",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: "Design System"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: "The visual language we crafted for this project."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
+          colors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: "text-base font-semibold mb-4",
+                style: { color: "var(--sk-text-primary, #ffffff)" },
+                children: "Color Palette"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-3", children: colors.map((color, ci) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "w-full aspect-square rounded-lg border flex items-end justify-center pb-2",
+                  style: {
+                    background: color.hex,
+                    borderColor: "color-mix(in srgb, var(--sk-text-tertiary, #71717a) 20%, transparent)"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "text-[10px] font-mono font-medium px-1.5 py-0.5 rounded",
+                      style: {
+                        color: isLightColor(color.hex) ? "#000" : "#fff",
+                        background: isLightColor(color.hex) ? "rgba(0,0,0,0.15)" : "rgba(255,255,255,0.15)"
+                      },
+                      children: color.hex
+                    }
+                  )
+                }
+              ),
+              color.context && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "text-[10px] capitalize",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: color.context
+                }
+              )
+            ] }, ci)) })
+          ] }) }),
+          fonts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: 0.1, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: "text-base font-semibold mb-4",
+                style: { color: "var(--sk-text-primary, #ffffff)" },
+                children: "Typography"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+              headingFont && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "text-[10px] font-medium uppercase tracking-wider block mb-2",
+                    style: { color: "var(--sk-text-tertiary, #71717a)" },
+                    children: "Headings"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: "text-2xl font-bold",
+                    style: {
+                      color: "var(--sk-text-primary, #ffffff)",
+                      fontFamily: headingFont.family
+                    },
+                    children: headingFont.family
+                  }
+                ),
+                headingFont.weights && headingFont.weights.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 mt-2", children: headingFont.weights.map((w) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "text-xs px-2 py-0.5 rounded",
+                    style: {
+                      background: "color-mix(in srgb, var(--sk-text-tertiary, #71717a) 15%, transparent)",
+                      color: "var(--sk-text-tertiary, #71717a)",
+                      fontWeight: w
+                    },
+                    children: w
+                  },
+                  w
+                )) })
+              ] }),
+              bodyFont && bodyFont.family !== headingFont?.family && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "text-[10px] font-medium uppercase tracking-wider block mb-2",
+                    style: { color: "var(--sk-text-tertiary, #71717a)" },
+                    children: "Body"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: "text-lg",
+                    style: {
+                      color: "var(--sk-text-primary, #ffffff)",
+                      fontFamily: bodyFont.family
+                    },
+                    children: bodyFont.family
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: "text-sm mt-2 leading-relaxed",
+                    style: {
+                      color: "var(--sk-text-tertiary, #71717a)",
+                      fontFamily: bodyFont.family
+                    },
+                    children: "The quick brown fox jumps over the lazy dog. Clean, readable type that puts content first."
+                  }
+                )
+              ] })
+            ] })
+          ] }) })
+        ] })
+      ] })
+    }
+  );
+}
+
+module.exports = DesignSystemSection;
+//# sourceMappingURL=DesignSystemSection-KXIQXITF.cjs.map
+//# sourceMappingURL=DesignSystemSection-KXIQXITF.cjs.map

package/dist/DesignSystemSection-KXIQXITF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/DesignSystemSection.tsx"],"names":["jsx","jsxs","ScrollReveal","GlassCard"],"mappings":"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","file":"DesignSystemSection-KXIQXITF.cjs","sourcesContent":["'use client';\n\nimport React from 'react';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface ColorEntry {\n  hex: string;\n  usageCount?: number;\n  context?: string;\n}\n\ninterface FontEntry {\n  family: string;\n  weights?: number[];\n  usage?: string; // 'heading' | 'body' | 'accent'\n}\n\nexport interface DesignSystemData {\n  colors: ColorEntry[];\n  fonts: FontEntry[];\n  headingStyles?: { font?: string; size?: string; weight?: string | number };\n  bodyStyles?: { font?: string; size?: string; lineHeight?: string };\n}\n\ninterface DesignSystemSectionProps {\n  data: DesignSystemData;\n}\n\n/** Determine if a hex color is light (needs dark text label) */\nfunction isLightColor(hex: string): boolean {\n  const c = hex.replace('#', '');\n  const r = parseInt(c.substring(0, 2), 16);\n  const g = parseInt(c.substring(2, 4), 16);\n  const b = parseInt(c.substring(4, 6), 16);\n  return (r * 299 + g * 587 + b * 114) / 1000 > 140;\n}\n\nexport default function DesignSystemSection({ data }: DesignSystemSectionProps) {\n  const { colors, fonts } = data;\n  const headingFont = fonts.find((f) => f.usage === 'heading') || fonts[0];\n  const bodyFont = fonts.find((f) => f.usage === 'body') || fonts[1] || fonts[0];\n\n  if (!colors.length && !fonts.length) return null;\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-5xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-4\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Design System\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            The visual language we crafted for this project.\n          </p>\n        </ScrollReveal>\n\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n          {/* Color Palette */}\n          {colors.length > 0 && (\n            <ScrollReveal y={20}>\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-base font-semibold mb-4\"\n                  style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                >\n                  Color Palette\n                </h3>\n                <div className=\"grid grid-cols-3 gap-3\">\n                  {colors.map((color, ci) => (\n                    <div key={ci} className=\"flex flex-col items-center gap-2\">\n                      <div\n                        className=\"w-full aspect-square rounded-lg border flex items-end justify-center pb-2\"\n                        style={{\n                          background: color.hex,\n                          borderColor: 'color-mix(in srgb, var(--sk-text-tertiary, #71717a) 20%, transparent)',\n                        }}\n                      >\n                        <span\n                          className=\"text-[10px] font-mono font-medium px-1.5 py-0.5 rounded\"\n                          style={{\n                            color: isLightColor(color.hex) ? '#000' : '#fff',\n                            background: isLightColor(color.hex) ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.15)',\n                          }}\n                        >\n                          {color.hex}\n                        </span>\n                      </div>\n                      {color.context && (\n                        <span\n                          className=\"text-[10px] capitalize\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {color.context}\n                        </span>\n                      )}\n                    </div>\n                  ))}\n                </div>\n              </GlassCard>\n            </ScrollReveal>\n          )}\n\n          {/* Typography */}\n          {fonts.length > 0 && (\n            <ScrollReveal y={20} delay={0.1}>\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-base font-semibold mb-4\"\n                  style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                >\n                  Typography\n                </h3>\n                <div className=\"flex flex-col gap-6\">\n                  {headingFont && (\n                    <div>\n                      <span\n                        className=\"text-[10px] font-medium uppercase tracking-wider block mb-2\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        Headings\n                      </span>\n                      <p\n                        className=\"text-2xl font-bold\"\n                        style={{\n                          color: 'var(--sk-text-primary, #ffffff)',\n                          fontFamily: headingFont.family,\n                        }}\n                      >\n                        {headingFont.family}\n                      </p>\n                      {headingFont.weights && headingFont.weights.length > 0 && (\n                        <div className=\"flex gap-2 mt-2\">\n                          {headingFont.weights.map((w) => (\n                            <span\n                              key={w}\n                              className=\"text-xs px-2 py-0.5 rounded\"\n                              style={{\n                                background: 'color-mix(in srgb, var(--sk-text-tertiary, #71717a) 15%, transparent)',\n                                color: 'var(--sk-text-tertiary, #71717a)',\n                                fontWeight: w,\n                              }}\n                            >\n                              {w}\n                            </span>\n                          ))}\n                        </div>\n                      )}\n                    </div>\n                  )}\n                  {bodyFont && bodyFont.family !== headingFont?.family && (\n                    <div>\n                      <span\n                        className=\"text-[10px] font-medium uppercase tracking-wider block mb-2\"\n                        style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                      >\n                        Body\n                      </span>\n                      <p\n                        className=\"text-lg\"\n                        style={{\n                          color: 'var(--sk-text-primary, #ffffff)',\n                          fontFamily: bodyFont.family,\n                        }}\n                      >\n                        {bodyFont.family}\n                      </p>\n                      <p\n                        className=\"text-sm mt-2 leading-relaxed\"\n                        style={{\n                          color: 'var(--sk-text-tertiary, #71717a)',\n                          fontFamily: bodyFont.family,\n                        }}\n                      >\n                        The quick brown fox jumps over the lazy dog. Clean, readable type that puts content first.\n                      </p>\n                    </div>\n                  )}\n                </div>\n              </GlassCard>\n            </ScrollReveal>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/{DetailsSection-FB763FS7.js → DetailsSection-A6PZQUQL.js}

@@ -22,9 +22,10 @@ function DetailsSection({ data }) {
     });
   }
   if (data.website) {
+    const cleanUrl = data.website.replace(/^https?:\/\/https?:\/\//, "https://");
     rows.push({
       label: "Website",
-      value: data.website,
+      value: cleanUrl,
       icon: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
         /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
         /* @__PURE__ */ jsx("path", { d: "M1.5 9h15M9 1.5a11.25 11.25 0 013 7.5 11.25 11.25 0 01-3 7.5 11.25 11.25 0 01-3-7.5 11.25 11.25 0 013-7.5z", stroke: "currentColor", strokeWidth: "1.5" })
@@ -33,7 +34,7 @@ function DetailsSection({ data }) {
   }
   if (data.timeline) {
     rows.push({
-      label: "Timeline",
+      label: "Delivered In",
       value: data.timeline,
       icon: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
         /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -42,9 +43,17 @@ function DetailsSection({ data }) {
     });
   }
   if (data.launchDate) {
+    let formattedDate = data.launchDate;
+    try {
+      const d = new Date(data.launchDate);
+      if (!isNaN(d.getTime())) {
+        formattedDate = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
+      }
+    } catch {
+    }
     rows.push({
       label: "Launch Date",
-      value: data.launchDate,
+      value: formattedDate,
       icon: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
         /* @__PURE__ */ jsx("rect", { x: "2.25", y: "3", width: "13.5", height: "12.75", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
         /* @__PURE__ */ jsx("path", { d: "M12 1.5v3M6 1.5v3M2.25 7.5h13.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
@@ -131,5 +140,5 @@ function DetailsSection({ data }) {
 }
 
 export { DetailsSection as default };
-//# sourceMappingURL=DetailsSection-FB763FS7.js.map
-//# sourceMappingURL=DetailsSection-FB763FS7.js.map
+//# sourceMappingURL=DetailsSection-A6PZQUQL.js.map
+//# sourceMappingURL=DetailsSection-A6PZQUQL.js.map

package/dist/DetailsSection-A6PZQUQL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/DetailsSection.tsx"],"names":[],"mappings":"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","file":"DetailsSection-A6PZQUQL.js","sourcesContent":["'use client';\n\nimport React from 'react';\nimport type { PortfolioDetailsData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface DetailsSectionProps {\n  data: PortfolioDetailsData;\n}\n\ninterface DetailRow {\n  icon: React.ReactNode;\n  label: string;\n  value: string;\n}\n\nexport default function DetailsSection({ data }: DetailsSectionProps) {\n  const rows: DetailRow[] = [];\n\n  if (data.industry) {\n    rows.push({\n      label: 'Industry',\n      value: data.industry,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <path d=\"M3 16.5h12M4.5 1.5h9l1.5 6H3l1.5-6zM6 7.5v9M12 7.5v9M9 7.5v9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.location) {\n    rows.push({\n      label: 'Location',\n      value: data.location,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <path d=\"M15 7.5c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 1112 0z\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <circle cx=\"9\" cy=\"7.5\" r=\"2\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.website) {\n    // Normalize — strip any double protocol prefix\n    const cleanUrl = data.website.replace(/^https?:\\/\\/https?:\\/\\//, 'https://');\n    rows.push({\n      label: 'Website',\n      value: cleanUrl,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <path d=\"M1.5 9h15M9 1.5a11.25 11.25 0 013 7.5 11.25 11.25 0 01-3 7.5 11.25 11.25 0 01-3-7.5 11.25 11.25 0 013-7.5z\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.timeline) {\n    rows.push({\n      label: 'Delivered In',\n      value: data.timeline,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <path d=\"M9 4.5V9l3 1.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.launchDate) {\n    // Format ISO date to readable string (e.g. \"January 16, 2026\")\n    let formattedDate = data.launchDate;\n    try {\n      const d = new Date(data.launchDate);\n      if (!isNaN(d.getTime())) {\n        formattedDate = d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });\n      }\n    } catch { /* keep raw value */ }\n    rows.push({\n      label: 'Launch Date',\n      value: formattedDate,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <rect x=\"2.25\" y=\"3\" width=\"13.5\" height=\"12.75\" rx=\"2\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n          <path d=\"M12 1.5v3M6 1.5v3M2.25 7.5h13.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (data.budgetRange) {\n    rows.push({\n      label: 'Budget Range',\n      value: data.budgetRange,\n      icon: (\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n          <path d=\"M9 1.5v15M13.5 4.5H6.75a2.625 2.625 0 000 5.25h4.5a2.625 2.625 0 010 5.25H4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      ),\n    });\n  }\n\n  if (rows.length === 0) return null;\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-4xl mx-auto px-6\">\n        <ScrollReveal y={30}>\n          <h2\n            className=\"text-3xl md:text-4xl font-bold mb-8\"\n            style={{\n              color: 'var(--sk-text-primary, #ffffff)',\n              fontFamily: 'var(--sk-font-heading, inherit)',\n            }}\n          >\n            Project Details\n          </h2>\n        </ScrollReveal>\n\n        <ScrollReveal y={40} delay={0.1}>\n          <GlassCard padding=\"lg\" hover={false}>\n            <div className=\"flex flex-col divide-y\" style={{ borderColor: 'var(--sk-border, rgba(255,255,255,0.1))' }}>\n              {rows.map((row, index) => (\n                <div\n                  key={index}\n                  className=\"flex items-center gap-4 py-4 first:pt-0 last:pb-0\"\n                  style={{\n                    borderColor: 'var(--sk-border, rgba(255,255,255,0.1))',\n                  }}\n                >\n                  <span\n                    className=\"flex items-center justify-center w-9 h-9 rounded-lg shrink-0\"\n                    style={{\n                      background: 'color-mix(in srgb, var(--sk-primary, #6366f1) 12%, transparent)',\n                      color: 'var(--sk-primary, #6366f1)',\n                    }}\n                  >\n                    {row.icon}\n                  </span>\n                  <span\n                    className=\"text-sm font-medium w-32 shrink-0\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    {row.label}\n                  </span>\n                  {row.label === 'Website' ? (\n                    <a\n                      href={row.value.startsWith('http') ? row.value : `https://${row.value}`}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"text-sm font-medium hover:underline\"\n                      style={{ color: 'var(--sk-primary, #6366f1)' }}\n                    >\n                      {row.value}\n                    </a>\n                  ) : (\n                    <span\n                      className=\"text-sm font-medium\"\n                      style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                    >\n                      {row.value}\n                    </span>\n                  )}\n                </div>\n              ))}\n            </div>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}