@roottale/cms-renderer-next 0.41.2 → 0.42.1

package/dist/chunk-U5AKACPN.js

@@ -0,0 +1,113 @@
+"use client";
+
+// src/templates/before-after-client.tsx
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MIN_VALUE = 0;
+var MAX_VALUE = 100;
+var INITIAL_VALUE = 50;
+var KEY_STEP = 5;
+function clampValue(value) {
+  return Math.min(MAX_VALUE, Math.max(MIN_VALUE, value));
+}
+function BeforeAfterSlider({
+  beforeImage,
+  afterImage,
+  beforeLabel,
+  afterLabel
+}) {
+  const [value, setValue] = useState(INITIAL_VALUE);
+  const [dragging, setDragging] = useState(false);
+  const frameRef = useRef(null);
+  const updateFromClientX = useCallback((clientX) => {
+    const frame = frameRef.current;
+    if (!frame) return;
+    const rect = frame.getBoundingClientRect();
+    if (rect.width === 0) return;
+    setValue(clampValue((clientX - rect.left) / rect.width * MAX_VALUE));
+  }, []);
+  const onKeyDown = useCallback((event) => {
+    if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+      event.preventDefault();
+      setValue((current) => clampValue(current - KEY_STEP));
+      return;
+    }
+    if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setValue((current) => clampValue(current + KEY_STEP));
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      setValue(MIN_VALUE);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      setValue(MAX_VALUE);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rt-tpl-before-after-slider",
+      onPointerCancel: () => setDragging(false),
+      onPointerDown: (event) => {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        setDragging(true);
+        updateFromClientX(event.clientX);
+      },
+      onPointerMove: (event) => {
+        if (dragging) updateFromClientX(event.clientX);
+      },
+      onPointerUp: () => setDragging(false),
+      children: /* @__PURE__ */ jsxs("div", { className: "rt-tpl-before-after-frame", ref: frameRef, children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "rt-tpl-before-after-img",
+            src: afterImage.src,
+            alt: afterImage.alt,
+            draggable: false,
+            loading: "lazy"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "rt-tpl-before-after-img rt-tpl-before-after-img--before",
+            src: beforeImage.src,
+            alt: beforeImage.alt,
+            draggable: false,
+            loading: "lazy",
+            style: { clipPath: `inset(0 ${MAX_VALUE - value}% 0 0)` }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rt-tpl-before-after-handle",
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": "\uC2DC\uACF5 \uC804\uD6C4 \uBE44\uAD50 \uC2AC\uB77C\uC774\uB354",
+            "aria-valuemin": MIN_VALUE,
+            "aria-valuemax": MAX_VALUE,
+            "aria-valuenow": Math.round(value),
+            onKeyDown,
+            style: { left: `${value}%` },
+            children: /* @__PURE__ */ jsx("span", { className: "rt-tpl-before-after-thumb", "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "rt-tpl-before-after-labels", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { className: "rt-tpl-before-after-label", children: beforeLabel }),
+          /* @__PURE__ */ jsx("span", { className: "rt-tpl-before-after-label", children: afterLabel })
+        ] })
+      ] })
+    }
+  );
+}
+
+export {
+  BeforeAfterSlider
+};
+//# sourceMappingURL=chunk-U5AKACPN.js.map

package/dist/chunk-U5AKACPN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/templates/before-after-client.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useRef, useState, type KeyboardEvent } from \"react\";\n\nexport interface BeforeAfterClientImage {\n  readonly src: string;\n  readonly alt: string;\n}\n\nexport interface BeforeAfterSliderProps {\n  readonly beforeImage: BeforeAfterClientImage;\n  readonly afterImage: BeforeAfterClientImage;\n  readonly beforeLabel: string;\n  readonly afterLabel: string;\n}\n\nconst MIN_VALUE = 0;\nconst MAX_VALUE = 100;\nconst INITIAL_VALUE = 50;\nconst KEY_STEP = 5;\n\nfunction clampValue(value: number): number {\n  return Math.min(MAX_VALUE, Math.max(MIN_VALUE, value));\n}\n\nexport function BeforeAfterSlider({\n  beforeImage,\n  afterImage,\n  beforeLabel,\n  afterLabel,\n}: BeforeAfterSliderProps) {\n  const [value, setValue] = useState(INITIAL_VALUE);\n  const [dragging, setDragging] = useState(false);\n  const frameRef = useRef<HTMLDivElement | null>(null);\n\n  const updateFromClientX = useCallback((clientX: number): void => {\n    const frame = frameRef.current;\n    if (!frame) return;\n    const rect = frame.getBoundingClientRect();\n    if (rect.width === 0) return;\n    setValue(clampValue(((clientX - rect.left) / rect.width) * MAX_VALUE));\n  }, []);\n\n  const onKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n      event.preventDefault();\n      setValue((current) => clampValue(current - KEY_STEP));\n      return;\n    }\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      setValue((current) => clampValue(current + KEY_STEP));\n      return;\n    }\n    if (event.key === \"Home\") {\n      event.preventDefault();\n      setValue(MIN_VALUE);\n      return;\n    }\n    if (event.key === \"End\") {\n      event.preventDefault();\n      setValue(MAX_VALUE);\n    }\n  }, []);\n\n  return (\n    <div\n      className=\"rt-tpl-before-after-slider\"\n      onPointerCancel={() => setDragging(false)}\n      onPointerDown={(event) => {\n        event.currentTarget.setPointerCapture(event.pointerId);\n        setDragging(true);\n        updateFromClientX(event.clientX);\n      }}\n      onPointerMove={(event) => {\n        if (dragging) updateFromClientX(event.clientX);\n      }}\n      onPointerUp={() => setDragging(false)}\n    >\n      <div className=\"rt-tpl-before-after-frame\" ref={frameRef}>\n        <img\n          className=\"rt-tpl-before-after-img\"\n          src={afterImage.src}\n          alt={afterImage.alt}\n          draggable={false}\n          loading=\"lazy\"\n        />\n        <img\n          className=\"rt-tpl-before-after-img rt-tpl-before-after-img--before\"\n          src={beforeImage.src}\n          alt={beforeImage.alt}\n          draggable={false}\n          loading=\"lazy\"\n          style={{ clipPath: `inset(0 ${MAX_VALUE - value}% 0 0)` }}\n        />\n        <div\n          className=\"rt-tpl-before-after-handle\"\n          role=\"slider\"\n          tabIndex={0}\n          aria-label=\"시공 전후 비교 슬라이더\"\n          aria-valuemin={MIN_VALUE}\n          aria-valuemax={MAX_VALUE}\n          aria-valuenow={Math.round(value)}\n          onKeyDown={onKeyDown}\n          style={{ left: `${value}%` }}\n        >\n          <span className=\"rt-tpl-before-after-thumb\" aria-hidden=\"true\" />\n        </div>\n        <div className=\"rt-tpl-before-after-labels\" aria-hidden=\"true\">\n          <span className=\"rt-tpl-before-after-label\">{beforeLabel}</span>\n          <span className=\"rt-tpl-before-after-label\">{afterLabel}</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAS,aAAa,QAAQ,gBAAoC;AA8E1D,cA4BA,YA5BA;AAhER,IAAM,YAAY;AAClB,IAAM,YAAY;AAClB,IAAM,gBAAgB;AACtB,IAAM,WAAW;AAEjB,SAAS,WAAW,OAAuB;AACzC,SAAO,KAAK,IAAI,WAAW,KAAK,IAAI,WAAW,KAAK,CAAC;AACvD;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,aAAa;AAChD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,WAAW,OAA8B,IAAI;AAEnD,QAAM,oBAAoB,YAAY,CAAC,YAA0B;AAC/D,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AACZ,UAAM,OAAO,MAAM,sBAAsB;AACzC,QAAI,KAAK,UAAU,EAAG;AACtB,aAAS,YAAa,UAAU,KAAK,QAAQ,KAAK,QAAS,SAAS,CAAC;AAAA,EACvE,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,YAAY,CAAC,UAAyC;AACtE,QAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa;AAC1D,YAAM,eAAe;AACrB,eAAS,CAAC,YAAY,WAAW,UAAU,QAAQ,CAAC;AACpD;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,WAAW;AACzD,YAAM,eAAe;AACrB,eAAS,CAAC,YAAY,WAAW,UAAU,QAAQ,CAAC;AACpD;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,QAAQ;AACxB,YAAM,eAAe;AACrB,eAAS,SAAS;AAClB;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,OAAO;AACvB,YAAM,eAAe;AACrB,eAAS,SAAS;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,iBAAiB,MAAM,YAAY,KAAK;AAAA,MACxC,eAAe,CAAC,UAAU;AACxB,cAAM,cAAc,kBAAkB,MAAM,SAAS;AACrD,oBAAY,IAAI;AAChB,0BAAkB,MAAM,OAAO;AAAA,MACjC;AAAA,MACA,eAAe,CAAC,UAAU;AACxB,YAAI,SAAU,mBAAkB,MAAM,OAAO;AAAA,MAC/C;AAAA,MACA,aAAa,MAAM,YAAY,KAAK;AAAA,MAEpC,+BAAC,SAAI,WAAU,6BAA4B,KAAK,UAC9C;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK,WAAW;AAAA,YAChB,KAAK,WAAW;AAAA,YAChB,WAAW;AAAA,YACX,SAAQ;AAAA;AAAA,QACV;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK,YAAY;AAAA,YACjB,KAAK,YAAY;AAAA,YACjB,WAAW;AAAA,YACX,SAAQ;AAAA,YACR,OAAO,EAAE,UAAU,WAAW,YAAY,KAAK,SAAS;AAAA;AAAA,QAC1D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,UAAU;AAAA,YACV,cAAW;AAAA,YACX,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,iBAAe,KAAK,MAAM,KAAK;AAAA,YAC/B;AAAA,YACA,OAAO,EAAE,MAAM,GAAG,KAAK,IAAI;AAAA,YAE3B,8BAAC,UAAK,WAAU,6BAA4B,eAAY,QAAO;AAAA;AAAA,QACjE;AAAA,QACA,qBAAC,SAAI,WAAU,8BAA6B,eAAY,QACtD;AAAA,8BAAC,UAAK,WAAU,6BAA6B,uBAAY;AAAA,UACzD,oBAAC,UAAK,WAAU,6BAA6B,sBAAW;AAAA,WAC1D;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-WWS43XCT.js

@@ -0,0 +1,206 @@
+"use client";
+
+// ../ui-react/src/components/scroll/AnimateOnScroll.tsx
+import {
+  useEffect,
+  createElement,
+  useState
+} from "react";
+import { motion, useReducedMotion } from "motion/react";
+
+// ../ui-react/src/components/motion/variants.ts
+var ENTRANCE_EASE = [0, 0, 0.2, 1];
+var ENTRANCE_DURATION = 0.5;
+var STAGGER_STEP = 0.08;
+var DEFAULT_VIEWPORT_MARGIN = "-80px";
+var entranceTransition = {
+  duration: ENTRANCE_DURATION,
+  ease: ENTRANCE_EASE
+};
+var ENTRANCE_KEYFRAMES = {
+  "fade-up": { hidden: { opacity: 0, y: 16 }, visible: { opacity: 1, y: 0 } },
+  fade: { hidden: { opacity: 0 }, visible: { opacity: 1 } },
+  "scale-in": { hidden: { opacity: 0, scale: 0.98 }, visible: { opacity: 1, scale: 1 } }
+};
+function withEntranceTransition(keyframes) {
+  return {
+    hidden: keyframes.hidden,
+    visible: { ...keyframes.visible, transition: entranceTransition }
+  };
+}
+var fadeUp = withEntranceTransition(ENTRANCE_KEYFRAMES["fade-up"]);
+var fade = withEntranceTransition(ENTRANCE_KEYFRAMES.fade);
+var scaleIn = withEntranceTransition(ENTRANCE_KEYFRAMES["scale-in"]);
+var ENTRANCE_VARIANTS = {
+  "fade-up": fadeUp,
+  fade,
+  "scale-in": scaleIn
+};
+function staggerContainer(step = STAGGER_STEP) {
+  return {
+    hidden: {},
+    visible: { transition: { staggerChildren: step } }
+  };
+}
+var staggerItem = fadeUp;
+
+// ../ui-react/src/components/scroll/AnimateOnScroll.tsx
+import { jsx } from "react/jsx-runtime";
+function AnimateOnScroll({
+  children,
+  className,
+  style,
+  variant = "fade-up",
+  as = "div",
+  once = true,
+  margin = DEFAULT_VIEWPORT_MARGIN
+}) {
+  const reducedMotion = useReducedMotion();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const supportsInView = mounted && typeof window !== "undefined" && typeof window.IntersectionObserver !== "undefined";
+  if (reducedMotion || !mounted || !supportsInView) {
+    return createElement(as, { className, style }, children);
+  }
+  const MotionTag = motion[as];
+  return /* @__PURE__ */ jsx(
+    MotionTag,
+    {
+      className,
+      style,
+      initial: "hidden",
+      whileInView: "visible",
+      viewport: { once, margin },
+      variants: ENTRANCE_VARIANTS[variant],
+      children
+    }
+  );
+}
+
+// ../ui-react/src/components/motion/Marquee.tsx
+import {
+  useEffect as useEffect2,
+  useState as useState2
+} from "react";
+import {
+  motion as motion2,
+  useAnimationFrame,
+  useMotionValue,
+  useReducedMotion as useReducedMotion2,
+  useTransform
+} from "motion/react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Marquee({
+  children,
+  className,
+  speedSec = 24,
+  gap = "2rem",
+  pauseOnHover = true,
+  ariaLabel
+}) {
+  const reducedMotion = useReducedMotion2();
+  const [mounted, setMounted] = useState2(false);
+  const [paused, setPaused] = useState2(false);
+  useEffect2(() => setMounted(true), []);
+  const x = useMotionValue(0);
+  const transform = useTransform(x, (v) => `translateX(${v}%)`);
+  useAnimationFrame((_t, delta) => {
+    if (reducedMotion || paused) return;
+    const percentPerMs = 50 / (speedSec * 1e3);
+    let next = x.get() - percentPerMs * delta;
+    if (next <= -50) next += 50;
+    x.set(next);
+  });
+  const staticStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap
+  };
+  if (reducedMotion || !mounted) {
+    return /* @__PURE__ */ jsx2("div", { className, "aria-label": ariaLabel, style: staticStyle, children });
+  }
+  const copyStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap,
+    flexShrink: 0,
+    paddingInlineEnd: gap
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className,
+      "aria-label": ariaLabel,
+      style: { overflow: "hidden", inlineSize: "100%" },
+      onMouseEnter: pauseOnHover ? () => setPaused(true) : void 0,
+      onMouseLeave: pauseOnHover ? () => setPaused(false) : void 0,
+      children: /* @__PURE__ */ jsxs(
+        motion2.div,
+        {
+          style: { display: "flex", inlineSize: "max-content", willChange: "transform", transform },
+          children: [
+            /* @__PURE__ */ jsx2("div", { style: copyStyle, children }),
+            /* @__PURE__ */ jsx2("div", { style: copyStyle, "aria-hidden": true, children })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// ../ui-react/src/components/scroll/StaggerGroup.tsx
+import {
+  useEffect as useEffect3,
+  createElement as createElement2,
+  useState as useState3
+} from "react";
+import { motion as motion3, useReducedMotion as useReducedMotion3 } from "motion/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function StaggerGroup({
+  children,
+  className,
+  style,
+  as = "div",
+  staggerChildren = STAGGER_STEP,
+  once = true,
+  margin = DEFAULT_VIEWPORT_MARGIN
+}) {
+  const reducedMotion = useReducedMotion3();
+  const [mounted, setMounted] = useState3(false);
+  useEffect3(() => setMounted(true), []);
+  if (reducedMotion || !mounted) {
+    return createElement2(as, { className, style }, children);
+  }
+  const MotionTag = motion3[as];
+  return /* @__PURE__ */ jsx3(
+    MotionTag,
+    {
+      className,
+      style,
+      initial: "hidden",
+      whileInView: "visible",
+      viewport: { once, margin },
+      variants: staggerContainer(staggerChildren),
+      children
+    }
+  );
+}
+function StaggerItem({ children, className, style, as = "div" }) {
+  const reducedMotion = useReducedMotion3();
+  const [mounted, setMounted] = useState3(false);
+  useEffect3(() => setMounted(true), []);
+  if (reducedMotion || !mounted) {
+    return createElement2(as, { className, style }, children);
+  }
+  const MotionTag = motion3[as];
+  return /* @__PURE__ */ jsx3(MotionTag, { className, style, variants: staggerItem, children });
+}
+
+export {
+  AnimateOnScroll,
+  Marquee,
+  StaggerGroup,
+  StaggerItem
+};
+//# sourceMappingURL=chunk-WWS43XCT.js.map

package/dist/chunk-WWS43XCT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../ui-react/src/components/scroll/AnimateOnScroll.tsx","../../ui-react/src/components/motion/variants.ts","../../ui-react/src/components/motion/Marquee.tsx","../../ui-react/src/components/scroll/StaggerGroup.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * `AnimateOnScroll` — whileInView 진입 애니메이션 래퍼(ddd `scroll`).\n *\n * 모션 규율(M5, ds-rule-pack.md):\n *  - `useReducedMotion()` true → 애니메이션 없이 즉시 표시.\n *  - **마운트 전(SSR·하이드레이션 전)에는 initial=\"hidden\" 을 걸지 않는다** —\n *    서버 마크업은 항상 최종(보이는) 상태로 렌더한다. JS 미로드·모션 실패 시에도\n *    콘텐츠가 보여야 하는 계약(M6)을 지키기 위함. 진입 애니메이션은 하이드레이션\n *    이후에만 활성화되며, 이 컴포넌트를 쓰는 섹션은 통상 fold 아래라 \"보였다가\n *    숨는\" 플래시가 사용자에게 노출되지 않는다.\n *  - **`IntersectionObserver` 가 없는 환경(구형 브라우저·테스트 스텁 삭제)도\n *    동일 계약을 지킨다.** motion/react 의 `whileInView` Feature 는 마운트 시\n *    무조건 `new IntersectionObserver(...)` 를 호출하므로, 그 생성자가 없으면\n *    관찰이 아예 시작되지 않아 `initial=\"hidden\"` 상태(opacity 0)에서 영원히\n *    멈춘다 — motion 라이브러리 자체는 이 마운트 경로에 폴백이 없다. 여기서\n *    `IntersectionObserver` 존재 여부를 직접 확인해 없으면 reduced-motion과\n *    동일하게 최종 상태로 렌더한다(M6).\n *\n * variant(구조 상이 ≥2, M4-f): `fade-up` · `fade` · `scale-in` — 정의는\n * `../motion/variants`(C5, 손 복사 금지) 한 곳에서 import.\n */\nimport {\n  useEffect,\n  createElement,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport {\n  DEFAULT_VIEWPORT_MARGIN,\n  ENTRANCE_VARIANTS,\n  type EntranceVariant,\n} from \"../motion/variants\";\n\ntype AnimateTag = \"div\" | \"section\" | \"article\" | \"li\" | \"span\";\n\nexport interface AnimateOnScrollProps {\n  readonly children?: ReactNode;\n  readonly className?: string;\n  readonly style?: CSSProperties;\n  /** 진입 애니메이션 종류(구조 상이). 기본 `fade-up`. */\n  readonly variant?: EntranceVariant;\n  /** 렌더할 시맨틱 엘리먼트(래퍼 div 추가 없이 그 자리를 대체). 기본 `div`. */\n  readonly as?: AnimateTag;\n  /** 한 번만 트리거(재진입 시 재생 안 함). 기본 true. */\n  readonly once?: boolean;\n  /** whileInView viewport root margin. 기본 `-80px`. */\n  readonly margin?: string;\n}\n\nexport function AnimateOnScroll({\n  children,\n  className,\n  style,\n  variant = \"fade-up\",\n  as = \"div\",\n  once = true,\n  margin = DEFAULT_VIEWPORT_MARGIN,\n}: AnimateOnScrollProps) {\n  const reducedMotion = useReducedMotion();\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n\n  // `mounted` already gates the SSR/pre-hydration pass, so this check only\n  // ever runs client-side — safe to read `window` synchronously here.\n  const supportsInView =\n    mounted && typeof window !== \"undefined\" && typeof window.IntersectionObserver !== \"undefined\";\n\n  if (reducedMotion || !mounted || !supportsInView) {\n    return createElement(as, { className, style }, children);\n  }\n\n  const MotionTag = motion[as] as typeof motion.div;\n  return (\n    <MotionTag\n      className={className}\n      style={style}\n      initial=\"hidden\"\n      whileInView=\"visible\"\n      viewport={{ once, margin }}\n      variants={ENTRANCE_VARIANTS[variant]}\n    >\n      {children}\n    </MotionTag>\n  );\n}\n","/**\n * 공유 모션 variants — C5(생성물 손 복사 금지)의 정신을 따라 모든 `scroll`/`motion`\n * 프리미티브가 이 한 파일에서 variants 를 파생한다. 각 컴포넌트가 hidden/visible\n * keyframe 객체를 손으로 복사하지 않는다(ds-rule-pack.md C5).\n *\n * 타이밍 출처(C1 — 임의값 대신 토큰 참조):\n *  - `ENTRANCE_EASE` = DTCG `--ease-out`(packages/tokens/src/motion.dtcg.json:\n *    `cubic-bezier(0, 0, 0.2, 1)`)과 동일 곡선. 등장(entrance)에 쓰는 표준 감속.\n *  - `ENTRANCE_DURATION`(0.5s)·`STAGGER_STEP`(0.08s) = 앰비언트 등장 스케일.\n *    motion.dtcg 의 100~200ms 는 INP 예산이 걸린 마이크로 인터랙션\n *    (hover/focus/button)용 cap 이며(M5), 스크롤 진입 리빌은 입력 지연(INP)\n *    경로가 아니라 그 cap 대상이 아니다 — 별도 앰비언트 스케일로 문서화한다.\n */\nimport type { Variants } from \"motion/react\";\n\n/** = DTCG `--ease-out` (packages/tokens/src/motion.dtcg.json). */\nexport const ENTRANCE_EASE = [0, 0, 0.2, 1] as const;\n/** 앰비언트 등장 지속(초). INP cap(200ms) 대상 아님 — 상단 주석 참조. */\nexport const ENTRANCE_DURATION = 0.5;\n/** 자식 순차 지연(초). */\nexport const STAGGER_STEP = 0.08;\n/** whileInView viewport 기본 margin — 뷰포트 하단 80px 전 트리거. */\nexport const DEFAULT_VIEWPORT_MARGIN = \"-80px\";\n\nconst entranceTransition = {\n  duration: ENTRANCE_DURATION,\n  ease: ENTRANCE_EASE,\n} as const;\n\nexport type EntranceVariant = \"fade-up\" | \"fade\" | \"scale-in\";\n\n/** 모션 유무와 관계없이 공유하는 진입 시작/완료 상태의 단일 원본. */\nexport const ENTRANCE_KEYFRAMES = {\n  \"fade-up\": { hidden: { opacity: 0, y: 16 }, visible: { opacity: 1, y: 0 } },\n  fade: { hidden: { opacity: 0 }, visible: { opacity: 1 } },\n  \"scale-in\": { hidden: { opacity: 0, scale: 0.98 }, visible: { opacity: 1, scale: 1 } },\n} as const;\n\nfunction withEntranceTransition(keyframes: (typeof ENTRANCE_KEYFRAMES)[EntranceVariant]): Variants {\n  return {\n    hidden: keyframes.hidden,\n    visible: { ...keyframes.visible, transition: entranceTransition },\n  };\n}\n\n/** fade + 상승(구조: 이동 O). */\nexport const fadeUp: Variants = withEntranceTransition(ENTRANCE_KEYFRAMES[\"fade-up\"]);\n\n/** fade only(구조: 이동 X). */\nexport const fade: Variants = withEntranceTransition(ENTRANCE_KEYFRAMES.fade);\n\n/** subtle scale(구조: 축소→기본, AI-slop #10 준수 — 0.98 미만 스케일 금지). */\nexport const scaleIn: Variants = withEntranceTransition(ENTRANCE_KEYFRAMES[\"scale-in\"]);\n\n/** `AnimateOnScroll` 의 3 구조 상이 variant(M4-f) — 여기서만 정의. */\nexport const ENTRANCE_VARIANTS: Record<EntranceVariant, Variants> = {\n  \"fade-up\": fadeUp,\n  fade,\n  \"scale-in\": scaleIn,\n};\n\n/** stagger 컨테이너 — 자식 진입을 `step` 간격으로 순차 트리거. */\nexport function staggerContainer(step: number = STAGGER_STEP): Variants {\n  return {\n    hidden: {},\n    visible: { transition: { staggerChildren: step } },\n  };\n}\n\n/** stagger 자식 — 컨테이너의 hidden/visible 라벨을 상속받아 fadeUp 으로 진입. */\nexport const staggerItem: Variants = fadeUp;\n","\"use client\";\n\n/**\n * `Marquee` — 수평 무한 루프(ddd `motion`). 로고 클라우드·신뢰 배지 띠용.\n *\n * 모션 규율(M5·AI-slop):\n *  - `useReducedMotion()` true 또는 마운트 전 → **정지**. 스크롤 없이\n *    `flex-wrap` 으로 항목 전체를 한 번에 노출(콘텐츠 손실 없음, M6).\n *  - 진행 방식 = `useAnimationFrame` 로 매 프레임 균일 이동(선형). hover 시\n *    일시정지(pause-on-hover) — 정지/재개가 위치 점프 없이 이어진다.\n *  - 과한 효과 금지(AI-slop #10) — scale·회전 없음, 등속 이동만.\n *\n * 트랙은 자식을 2벌 복제해 -50% 이동 시 이음매 없이 순환한다.\n */\nimport {\n  useEffect,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport {\n  motion,\n  useAnimationFrame,\n  useMotionValue,\n  useReducedMotion,\n  useTransform,\n} from \"motion/react\";\n\nexport interface MarqueeProps {\n  readonly children?: ReactNode;\n  readonly className?: string;\n  /** 한 바퀴(자식 1벌 폭) 이동에 걸리는 시간(초). 기본 24. */\n  readonly speedSec?: number;\n  /** 항목 간격(CSS length). 기본 `2rem`(구조 간격 — 브랜드 토큰 아님). */\n  readonly gap?: string;\n  /** hover 시 일시정지. 기본 true. */\n  readonly pauseOnHover?: boolean;\n  /** 스크린리더용 그룹 레이블. */\n  readonly ariaLabel?: string;\n}\n\nexport function Marquee({\n  children,\n  className,\n  speedSec = 24,\n  gap = \"2rem\",\n  pauseOnHover = true,\n  ariaLabel,\n}: MarqueeProps) {\n  const reducedMotion = useReducedMotion();\n  const [mounted, setMounted] = useState(false);\n  const [paused, setPaused] = useState(false);\n  useEffect(() => setMounted(true), []);\n\n  const x = useMotionValue(0);\n  const transform = useTransform(x, (v) => `translateX(${v}%)`);\n\n  useAnimationFrame((_t, delta) => {\n    if (reducedMotion || paused) return;\n    const percentPerMs = 50 / (speedSec * 1000); // 자식 1벌 = 트랙의 50%\n    let next = x.get() - percentPerMs * delta;\n    if (next <= -50) next += 50; // 이음매 없는 순환\n    x.set(next);\n  });\n\n  const staticStyle: CSSProperties = {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n    gap,\n  };\n  if (reducedMotion || !mounted) {\n    return (\n      <div className={className} aria-label={ariaLabel} style={staticStyle}>\n        {children}\n      </div>\n    );\n  }\n\n  const copyStyle: CSSProperties = {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap,\n    flexShrink: 0,\n    paddingInlineEnd: gap,\n  };\n  return (\n    <div\n      className={className}\n      aria-label={ariaLabel}\n      style={{ overflow: \"hidden\", inlineSize: \"100%\" }}\n      onMouseEnter={pauseOnHover ? () => setPaused(true) : undefined}\n      onMouseLeave={pauseOnHover ? () => setPaused(false) : undefined}\n    >\n      <motion.div\n        style={{ display: \"flex\", inlineSize: \"max-content\", willChange: \"transform\", transform }}\n      >\n        <div style={copyStyle}>{children}</div>\n        <div style={copyStyle} aria-hidden>\n          {children}\n        </div>\n      </motion.div>\n    </div>\n  );\n}\n","\"use client\";\n\n/**\n * `StaggerGroup` + `StaggerItem` — 자식 순차 진입(ddd `scroll`). 카드 그리드용.\n *\n * `StaggerGroup` 이 컨테이너(초기 hidden→whileInView visible)를, 각 `StaggerItem`\n * 은 컨테이너의 애니메이션 라벨을 상속받아 `STAGGER_STEP` 간격으로 진입한다.\n * variants 정의는 `../motion/variants` 한 곳(C5). 모션 규율은 `AnimateOnScroll`\n * 와 동일 — reduce·마운트 전에는 애니메이션 없이 시맨틱 엘리먼트를 그대로 렌더\n * (래퍼 div 추가 없음 → SSR 마크업 불변, M6).\n */\nimport {\n  useEffect,\n  createElement,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport {\n  DEFAULT_VIEWPORT_MARGIN,\n  STAGGER_STEP,\n  staggerContainer,\n  staggerItem,\n} from \"../motion/variants\";\n\ntype GroupTag = \"div\" | \"ul\" | \"ol\" | \"section\";\ntype ItemTag = \"div\" | \"li\" | \"article\";\n\nexport interface StaggerGroupProps {\n  readonly children?: ReactNode;\n  readonly className?: string;\n  readonly style?: CSSProperties;\n  /** 렌더할 시맨틱 컨테이너 엘리먼트. 기본 `div`. */\n  readonly as?: GroupTag;\n  /** 자식 순차 지연(초). 기본 0.08. */\n  readonly staggerChildren?: number;\n  readonly once?: boolean;\n  readonly margin?: string;\n}\n\nexport function StaggerGroup({\n  children,\n  className,\n  style,\n  as = \"div\",\n  staggerChildren = STAGGER_STEP,\n  once = true,\n  margin = DEFAULT_VIEWPORT_MARGIN,\n}: StaggerGroupProps) {\n  const reducedMotion = useReducedMotion();\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n\n  if (reducedMotion || !mounted) {\n    return createElement(as, { className, style }, children);\n  }\n\n  const MotionTag = motion[as] as typeof motion.div;\n  return (\n    <MotionTag\n      className={className}\n      style={style}\n      initial=\"hidden\"\n      whileInView=\"visible\"\n      viewport={{ once, margin }}\n      variants={staggerContainer(staggerChildren)}\n    >\n      {children}\n    </MotionTag>\n  );\n}\n\nexport interface StaggerItemProps {\n  readonly children?: ReactNode;\n  readonly className?: string;\n  readonly style?: CSSProperties;\n  /** 렌더할 시맨틱 아이템 엘리먼트. 기본 `div`. */\n  readonly as?: ItemTag;\n}\n\nexport function StaggerItem({ children, className, style, as = \"div\" }: StaggerItemProps) {\n  const reducedMotion = useReducedMotion();\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n\n  if (reducedMotion || !mounted) {\n    return createElement(as, { className, style }, children);\n  }\n\n  // initial/whileInView 없음 — 부모 StaggerGroup 의 hidden/visible 라벨을 상속.\n  const MotionTag = motion[as] as typeof motion.div;\n  return (\n    <MotionTag className={className} style={style} variants={staggerItem}>\n      {children}\n    </MotionTag>\n  );\n}\n"],"mappings":"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","names":["useEffect","useState","motion","useReducedMotion","jsx","useEffect","createElement","useState","motion","useReducedMotion","jsx","useReducedMotion","useState","useEffect","createElement","motion"]}