@cogentic-co/ds 0.5.3 → 0.6.0

package/dist/animations/animation-realtime-updates.js

@@ -1,8 +1,144 @@
 "use client";
-export { AnimationRealtimeUpdates as default } from '../chunk-FKPK3CB7.js';
-import '../chunk-TAPJEVUA.js';
-import '../chunk-6RWCZUAD.js';
+import { EASE_OUT } from '../chunk-TAPJEVUA.js';
+import { useCycleIndex } from '../chunk-6RWCZUAD.js';
 import '../chunk-RXV2XUDZ.js';
-import '../chunk-GZNLQE3I.js';
+import { __spreadValues, cn } from '../chunk-GZNLQE3I.js';
+import { Activity, ShieldCheck, AlertTriangle } from 'lucide-react';
+import { LazyMotion, domAnimation, m } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SCENARIOS = [
+  {
+    transfers: { value: "1,247", change: "12.3%", up: true },
+    compliant: { value: "1,238", change: "14.1%", up: true },
+    flagged: { value: "9", change: "8.2%", up: false },
+    bars: [30, 55, 70, 100, 45, 25, 60],
+    activeBar: 3
+  },
+  {
+    transfers: { value: "892", change: "6.7%", up: true },
+    compliant: { value: "874", change: "5.2%", up: true },
+    flagged: { value: "18", change: "22.4%", up: true },
+    bars: [45, 35, 60, 50, 80, 100, 40],
+    activeBar: 5
+  },
+  {
+    transfers: { value: "2,103", change: "18.9%", up: true },
+    compliant: { value: "2,091", change: "19.3%", up: true },
+    flagged: { value: "12", change: "4.1%", up: false },
+    bars: [60, 75, 50, 85, 65, 90, 100],
+    activeBar: 6
+  }
+];
+var DAYS = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
+var CYCLE_MS = 4e3;
+function AnimatedValue({ value }) {
+  return /* @__PURE__ */ jsx(
+    m.span,
+    {
+      initial: { opacity: 0, y: 6 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.35, ease: EASE_OUT },
+      children: value
+    },
+    value
+  );
+}
+function AnimationRealtimeUpdates({ className }) {
+  const [containerRef, index] = useCycleIndex(SCENARIOS.length, CYCLE_MS);
+  const scenario = SCENARIOS[index];
+  const metrics = [
+    __spreadValues({
+      icon: Activity,
+      label: "Transfers screened",
+      sub: "All protocols"
+    }, scenario.transfers),
+    __spreadValues({
+      icon: ShieldCheck,
+      label: "Compliant",
+      sub: "Auto-approved"
+    }, scenario.compliant),
+    __spreadValues({
+      icon: AlertTriangle,
+      label: "Flagged",
+      sub: "Manual review"
+    }, scenario.flagged)
+  ];
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("flex flex-col p-5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold text-[15px] text-foreground", children: "Compliance Overview" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[12px] text-gray-400", children: "Weekly screening summary" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "size-1 rounded-full bg-gray-300" }),
+        /* @__PURE__ */ jsx("span", { className: "size-1 rounded-full bg-gray-300" }),
+        /* @__PURE__ */ jsx("span", { className: "size-1 rounded-full bg-gray-300" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col gap-3", children: metrics.map((metric) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex size-9 items-center justify-center rounded-lg bg-gray-100", children: /* @__PURE__ */ jsx(metric.icon, { className: "size-4 text-foreground", strokeWidth: 1.5 }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium text-[13px] text-foreground", children: metric.label }),
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400", children: metric.sub })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx("p", { className: "font-mono font-semibold text-[14px] text-foreground", children: /* @__PURE__ */ jsx(AnimatedValue, { value: metric.value }) }) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-0.5 font-medium text-[11px]",
+            metric.up ? "text-foreground" : "text-emerald-600"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "10",
+                height: "10",
+                viewBox: "0 0 10 10",
+                className: cn(!metric.up && "rotate-180"),
+                children: /* @__PURE__ */ jsx("path", { d: "M5 2L8.5 7H1.5L5 2Z", fill: "currentColor" })
+              }
+            ),
+            /* @__PURE__ */ jsx(AnimatedValue, { value: metric.change })
+          ]
+        }
+      )
+    ] }, metric.label)) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-1 items-end gap-2", children: scenario.bars.map((height, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative w-full", style: { height: 80 }, children: /* @__PURE__ */ jsx(
+        m.div,
+        {
+          className: cn(
+            "absolute inset-x-0 bottom-0 rounded-t-md",
+            i === scenario.activeBar ? "bg-tagline" : "bg-foreground"
+          ),
+          style: { transformOrigin: "bottom", height: "100%" },
+          initial: { scaleY: 0 },
+          animate: { scaleY: height / 100 },
+          transition: {
+            duration: 0.6,
+            delay: i * 0.05,
+            ease: EASE_OUT
+          }
+        },
+        `${index}-${i}`
+      ) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "font-medium text-[10px]",
+            i === scenario.activeBar ? "text-gray-900" : "text-gray-400"
+          ),
+          children: DAYS[i]
+        }
+      )
+    ] }, i)) })
+  ] }) });
+}
+
+export { AnimationRealtimeUpdates as default };
 //# sourceMappingURL=animation-realtime-updates.js.map
 //# sourceMappingURL=animation-realtime-updates.js.map

package/dist/animations/animation-realtime-updates.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"animation-realtime-updates.js"}
+{"version":3,"sources":["../../src/animations/animation-realtime-updates.tsx"],"names":[],"mappings":"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","file":"animation-realtime-updates.js","sourcesContent":["\"use client\"\n\nimport { Activity, AlertTriangle, ShieldCheck } from \"lucide-react\"\nimport { domAnimation, LazyMotion, m } from \"motion/react\"\n\nimport { useCycleIndex } from \"../hooks/use-cycle-index\"\n\nimport { EASE_OUT } from \"../lib/animation\"\nimport { cn } from \"../lib/utils\"\n\ntype Scenario = {\n  transfers: { value: string; change: string; up: boolean }\n  compliant: { value: string; change: string; up: boolean }\n  flagged: { value: string; change: string; up: boolean }\n  bars: number[]\n  activeBar: number\n}\n\nconst SCENARIOS: Scenario[] = [\n  {\n    transfers: { value: \"1,247\", change: \"12.3%\", up: true },\n    compliant: { value: \"1,238\", change: \"14.1%\", up: true },\n    flagged: { value: \"9\", change: \"8.2%\", up: false },\n    bars: [30, 55, 70, 100, 45, 25, 60],\n    activeBar: 3,\n  },\n  {\n    transfers: { value: \"892\", change: \"6.7%\", up: true },\n    compliant: { value: \"874\", change: \"5.2%\", up: true },\n    flagged: { value: \"18\", change: \"22.4%\", up: true },\n    bars: [45, 35, 60, 50, 80, 100, 40],\n    activeBar: 5,\n  },\n  {\n    transfers: { value: \"2,103\", change: \"18.9%\", up: true },\n    compliant: { value: \"2,091\", change: \"19.3%\", up: true },\n    flagged: { value: \"12\", change: \"4.1%\", up: false },\n    bars: [60, 75, 50, 85, 65, 90, 100],\n    activeBar: 6,\n  },\n]\n\nconst DAYS = [\"MO\", \"TU\", \"WE\", \"TH\", \"FR\", \"SA\", \"SU\"]\n\nconst CYCLE_MS = 4000\n\nfunction AnimatedValue({ value }: { value: string }) {\n  return (\n    <m.span\n      key={value}\n      initial={{ opacity: 0, y: 6 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.35, ease: EASE_OUT }}\n    >\n      {value}\n    </m.span>\n  )\n}\n\nexport default function AnimationRealtimeUpdates({ className }: { className?: string }) {\n  const [containerRef, index] = useCycleIndex(SCENARIOS.length, CYCLE_MS)\n  const scenario = SCENARIOS[index]\n\n  const metrics = [\n    {\n      icon: Activity,\n      label: \"Transfers screened\",\n      sub: \"All protocols\",\n      ...scenario.transfers,\n    },\n    {\n      icon: ShieldCheck,\n      label: \"Compliant\",\n      sub: \"Auto-approved\",\n      ...scenario.compliant,\n    },\n    {\n      icon: AlertTriangle,\n      label: \"Flagged\",\n      sub: \"Manual review\",\n      ...scenario.flagged,\n    },\n  ]\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <div ref={containerRef} className={cn(\"flex flex-col p-5\", className)}>\n        {/* Dashboard header */}\n        <div className=\"flex items-start justify-between\">\n          <div>\n            <p className=\"font-semibold text-[15px] text-foreground\">Compliance Overview</p>\n            <p className=\"text-[12px] text-gray-400\">Weekly screening summary</p>\n          </div>\n          <div className=\"flex gap-0.5\">\n            <span className=\"size-1 rounded-full bg-gray-300\" />\n            <span className=\"size-1 rounded-full bg-gray-300\" />\n            <span className=\"size-1 rounded-full bg-gray-300\" />\n          </div>\n        </div>\n\n        {/* Metric rows */}\n        <div className=\"mt-4 flex flex-col gap-3\">\n          {metrics.map((metric) => (\n            <div key={metric.label} className=\"flex items-center gap-3\">\n              <div className=\"flex size-9 items-center justify-center rounded-lg bg-gray-100\">\n                <metric.icon className=\"size-4 text-foreground\" strokeWidth={1.5} />\n              </div>\n              <div className=\"flex-1\">\n                <p className=\"font-medium text-[13px] text-foreground\">{metric.label}</p>\n                <p className=\"text-[10px] text-gray-400\">{metric.sub}</p>\n              </div>\n              <div className=\"text-right\">\n                <p className=\"font-mono font-semibold text-[14px] text-foreground\">\n                  <AnimatedValue value={metric.value} />\n                </p>\n              </div>\n              <div\n                className={cn(\n                  \"flex items-center gap-0.5 font-medium text-[11px]\",\n                  metric.up ? \"text-foreground\" : \"text-emerald-600\",\n                )}\n              >\n                <svg\n                  width=\"10\"\n                  height=\"10\"\n                  viewBox=\"0 0 10 10\"\n                  className={cn(!metric.up && \"rotate-180\")}\n                >\n                  <path d=\"M5 2L8.5 7H1.5L5 2Z\" fill=\"currentColor\" />\n                </svg>\n                <AnimatedValue value={metric.change} />\n              </div>\n            </div>\n          ))}\n        </div>\n\n        {/* Bar chart */}\n        <div className=\"mt-4 flex flex-1 items-end gap-2\">\n          {scenario.bars.map((height, i) => (\n            <div key={i} className=\"flex flex-1 flex-col items-center gap-1.5\">\n              <div className=\"relative w-full\" style={{ height: 80 }}>\n                <m.div\n                  className={cn(\n                    \"absolute inset-x-0 bottom-0 rounded-t-md\",\n                    i === scenario.activeBar ? \"bg-tagline\" : \"bg-foreground\",\n                  )}\n                  style={{ transformOrigin: \"bottom\", height: \"100%\" }}\n                  initial={{ scaleY: 0 }}\n                  animate={{ scaleY: height / 100 }}\n                  transition={{\n                    duration: 0.6,\n                    delay: i * 0.05,\n                    ease: EASE_OUT,\n                  }}\n                  key={`${index}-${i}`}\n                />\n              </div>\n              <span\n                className={cn(\n                  \"font-medium text-[10px]\",\n                  i === scenario.activeBar ? \"text-gray-900\" : \"text-gray-400\",\n                )}\n              >\n                {DAYS[i]}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </LazyMotion>\n  )\n}\n"]}

package/dist/animations/animation-rest-api.js

@@ -1,5 +1,124 @@
 "use client";
-export { AnimationRestApi as default } from '../chunk-I26ZXVSY.js';
-import '../chunk-GZNLQE3I.js';
+import { cn } from '../chunk-GZNLQE3I.js';
+import { LazyMotion, domAnimation, m } from 'motion/react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var REQUEST = [
+  { text: "POST /v1/transfers/screen", colour: "text-emerald-400" },
+  { text: "Authorization: Bearer sk_live_\u2022\u2022\u2022", colour: "text-gray-500" },
+  { text: "Content-Type: application/json", colour: "text-gray-500" },
+  { text: "" },
+  { text: "{", colour: "text-gray-300" },
+  { text: '"transfer_id": "TXN-0847",', colour: "text-[#00D4FF]", indent: 1 },
+  { text: '"originator": {', colour: "text-gray-300", indent: 1 },
+  { text: '"vasp_id": "vasp_au_001",', colour: "text-amber-400", indent: 2 },
+  { text: '"jurisdiction": "AU"', colour: "text-amber-400", indent: 2 },
+  { text: "},", colour: "text-gray-300", indent: 1 },
+  { text: '"beneficiary": {', colour: "text-gray-300", indent: 1 },
+  { text: '"vasp_id": "vasp_sg_042",', colour: "text-amber-400", indent: 2 },
+  { text: '"jurisdiction": "SG"', colour: "text-amber-400", indent: 2 },
+  { text: "},", colour: "text-gray-300", indent: 1 },
+  { text: '"amount": "45000.00",', colour: "text-violet-400", indent: 1 },
+  { text: '"currency": "USD"', colour: "text-violet-400", indent: 1 },
+  { text: "}", colour: "text-gray-300" }
+];
+var RESPONSE = [
+  { text: "200 OK", colour: "text-emerald-400" },
+  { text: "" },
+  { text: "{", colour: "text-gray-300" },
+  { text: '"status": "compliant",', colour: "text-emerald-400", indent: 1 },
+  { text: '"risk_score": 18,', colour: "text-[#00D4FF]", indent: 1 },
+  { text: '"travel_rule": "verified",', colour: "text-emerald-400", indent: 1 },
+  { text: '"jurisdiction_pair": "AU\u2192SG",', colour: "text-amber-400", indent: 1 },
+  { text: '"report_ref": "CR-2024-0847"', colour: "text-violet-400", indent: 1 },
+  { text: "}", colour: "text-gray-300" }
+];
+function AnimationRestApi({ className }) {
+  const [phase, setPhase] = useState("request");
+  const [visibleLines, setVisibleLines] = useState(0);
+  const scrollRef = useRef(null);
+  const lines = phase === "request" ? REQUEST : RESPONSE;
+  const reset = useCallback(() => {
+    setPhase("request");
+    setVisibleLines(0);
+  }, []);
+  useEffect(() => {
+    if (visibleLines < lines.length) {
+      const id = setTimeout(() => setVisibleLines((v) => v + 1), 80);
+      return () => clearTimeout(id);
+    } else if (phase === "request") {
+      const id = setTimeout(() => {
+        setPhase("response");
+        setVisibleLines(0);
+      }, 1200);
+      return () => clearTimeout(id);
+    } else {
+      const id = setTimeout(reset, 3e3);
+      return () => clearTimeout(id);
+    }
+  }, [visibleLines, lines.length, phase, reset]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    requestAnimationFrame(() => {
+      el.scrollTop = el.scrollHeight;
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-[#1a1a2e]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-white/10 border-b px-4 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-red-400/80" }),
+        /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-amber-400/80" }),
+        /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-emerald-400/80" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "ml-2 font-mono text-[10px] text-white/40", children: "cogentic-api" }),
+      /* @__PURE__ */ jsx(
+        m.span,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          className: cn(
+            "ml-auto rounded-full px-2 py-0.5 font-bold text-[9px]",
+            phase === "request" ? "bg-amber-500/20 text-amber-300" : "bg-emerald-500/20 text-emerald-300"
+          ),
+          children: phase === "request" ? "REQUEST" : "RESPONSE"
+        },
+        phase
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "scrollbar-none flex-1 overflow-y-auto px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+      lines.slice(0, visibleLines).map((line, i) => {
+        var _a, _b;
+        return /* @__PURE__ */ jsxs(
+          m.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            className: "flex",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0 text-right font-mono text-[10px] text-white/20", children: i + 1 }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn("ml-3 font-mono text-[11px]", (_a = line.colour) != null ? _a : "text-white/60"),
+                  style: { paddingLeft: ((_b = line.indent) != null ? _b : 0) * 16 },
+                  children: line.text || "\xA0"
+                }
+              )
+            ]
+          },
+          `${phase}-${i}`
+        );
+      }),
+      visibleLines < lines.length && /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsx("span", { className: "w-5" }),
+        /* @__PURE__ */ jsx("span", { className: "ml-3 animate-pulse font-mono text-[11px] text-white/30", children: "\u2588" })
+      ] })
+    ] }) })
+  ] }) });
+}
+
+export { AnimationRestApi as default };
 //# sourceMappingURL=animation-rest-api.js.map
 //# sourceMappingURL=animation-rest-api.js.map

package/dist/animations/animation-rest-api.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"animation-rest-api.js"}
+{"version":3,"sources":["../../src/animations/animation-rest-api.tsx"],"names":[],"mappings":";;;;;AAaA,IAAM,OAAA,GAAsB;AAAA,EAC1B,EAAE,IAAA,EAAM,2BAAA,EAA6B,MAAA,EAAQ,kBAAA,EAAmB;AAAA,EAChE,EAAE,IAAA,EAAM,kDAAA,EAAoD,MAAA,EAAQ,eAAA,EAAgB;AAAA,EACpF,EAAE,IAAA,EAAM,gCAAA,EAAkC,MAAA,EAAQ,eAAA,EAAgB;AAAA,EAClE,EAAE,MAAM,EAAA,EAAG;AAAA,EACX,EAAE,IAAA,EAAM,GAAA,EAAK,MAAA,EAAQ,eAAA,EAAgB;AAAA,EACrC,EAAE,IAAA,EAAM,4BAAA,EAA8B,MAAA,EAAQ,gBAAA,EAAkB,QAAQ,CAAA,EAAE;AAAA,EAC1E,EAAE,IAAA,EAAM,iBAAA,EAAmB,MAAA,EAAQ,eAAA,EAAiB,QAAQ,CAAA,EAAE;AAAA,EAC9D,EAAE,IAAA,EAAM,2BAAA,EAA6B,MAAA,EAAQ,gBAAA,EAAkB,QAAQ,CAAA,EAAE;AAAA,EACzE,EAAE,IAAA,EAAM,sBAAA,EAAwB,MAAA,EAAQ,gBAAA,EAAkB,QAAQ,CAAA,EAAE;AAAA,EACpE,EAAE,IAAA,EAAM,IAAA,EAAM,MAAA,EAAQ,eAAA,EAAiB,QAAQ,CAAA,EAAE;AAAA,EACjD,EAAE,IAAA,EAAM,kBAAA,EAAoB,MAAA,EAAQ,eAAA,EAAiB,QAAQ,CAAA,EAAE;AAAA,EAC/D,EAAE,IAAA,EAAM,2BAAA,EAA6B,MAAA,EAAQ,gBAAA,EAAkB,QAAQ,CAAA,EAAE;AAAA,EACzE,EAAE,IAAA,EAAM,sBAAA,EAAwB,MAAA,EAAQ,gBAAA,EAAkB,QAAQ,CAAA,EAAE;AAAA,EACpE,EAAE,IAAA,EAAM,IAAA,EAAM,MAAA,EAAQ,eAAA,EAAiB,QAAQ,CAAA,EAAE;AAAA,EACjD,EAAE,IAAA,EAAM,uBAAA,EAAyB,MAAA,EAAQ,iBAAA,EAAmB,QAAQ,CAAA,EAAE;AAAA,EACtE,EAAE,IAAA,EAAM,mBAAA,EAAqB,MAAA,EAAQ,iBAAA,EAAmB,QAAQ,CAAA,EAAE;AAAA,EAClE,EAAE,IAAA,EAAM,GAAA,EAAK,MAAA,EAAQ,eAAA;AACvB,CAAA;AAEA,IAAM,QAAA,GAAuB;AAAA,EAC3B,EAAE,IAAA,EAAM,QAAA,EAAU,MAAA,EAAQ,kBAAA,EAAmB;AAAA,EAC7C,EAAE,MAAM,EAAA,EAAG;AAAA,EACX,EAAE,IAAA,EAAM,GAAA,EAAK,MAAA,EAAQ,eAAA,EAAgB;AAAA,EACrC,EAAE,IAAA,EAAM,wBAAA,EAA0B,MAAA,EAAQ,kBAAA,EAAoB,QAAQ,CAAA,EAAE;AAAA,EACxE,EAAE,IAAA,EAAM,mBAAA,EAAqB,MAAA,EAAQ,gBAAA,EAAkB,QAAQ,CAAA,EAAE;AAAA,EACjE,EAAE,IAAA,EAAM,4BAAA,EAA8B,MAAA,EAAQ,kBAAA,EAAoB,QAAQ,CAAA,EAAE;AAAA,EAC5E,EAAE,IAAA,EAAM,oCAAA,EAAiC,MAAA,EAAQ,gBAAA,EAAkB,QAAQ,CAAA,EAAE;AAAA,EAC7E,EAAE,IAAA,EAAM,8BAAA,EAAgC,MAAA,EAAQ,iBAAA,EAAmB,QAAQ,CAAA,EAAE;AAAA,EAC7E,EAAE,IAAA,EAAM,GAAA,EAAK,MAAA,EAAQ,eAAA;AACvB,CAAA;AAEe,SAAR,gBAAA,CAAkC,EAAE,SAAA,EAAU,EAA2B;AAC9E,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAiC,SAAS,CAAA;AACpE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,CAAC,CAAA;AAClD,EAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,KAAA,GAAQ,KAAA,KAAU,SAAA,GAAY,OAAA,GAAU,QAAA;AAE9C,EAAA,MAAM,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,QAAA,CAAS,SAAS,CAAA;AAClB,IAAA,eAAA,CAAgB,CAAC,CAAA;AAAA,EACnB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,GAAe,MAAM,MAAA,EAAQ;AAC/B,MAAA,MAAM,EAAA,GAAK,WAAW,MAAM,eAAA,CAAgB,CAAC,CAAA,KAAM,CAAA,GAAI,CAAC,CAAA,EAAG,EAAE,CAAA;AAC7D,MAAA,OAAO,MAAM,aAAa,EAAE,CAAA;AAAA,IAC9B,CAAA,MAAA,IAAW,UAAU,SAAA,EAAW;AAC9B,MAAA,MAAM,EAAA,GAAK,WAAW,MAAM;AAC1B,QAAA,QAAA,CAAS,UAAU,CAAA;AACnB,QAAA,eAAA,CAAgB,CAAC,CAAA;AAAA,MACnB,GAAG,IAAI,CAAA;AACP,MAAA,OAAO,MAAM,aAAa,EAAE,CAAA;AAAA,IAC9B,CAAA,MAAO;AACL,MAAA,MAAM,EAAA,GAAK,UAAA,CAAW,KAAA,EAAO,GAAI,CAAA;AACjC,MAAA,OAAO,MAAM,aAAa,EAAE,CAAA;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,YAAA,EAAc,MAAM,MAAA,EAAQ,KAAA,EAAO,KAAK,CAAC,CAAA;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,KAAK,SAAA,CAAU,OAAA;AACrB,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAA,EAAA,CAAG,YAAY,EAAA,CAAG,YAAA;AAAA,IACpB,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,GAAA,CAAC,UAAA,EAAA,EAAW,QAAA,EAAU,YAAA,EACpB,QAAA,kBAAA,IAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,4BAAA,EAA8B,SAAS,CAAA,EAExD,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4DAAA,EACb,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,cAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,qCAAA,EAAsC,CAAA;AAAA,wBACtD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uCAAA,EAAwC,CAAA;AAAA,wBACxD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yCAAA,EAA0C;AAAA,OAAA,EAC5D,CAAA;AAAA,sBACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0CAAA,EAA2C,QAAA,EAAA,cAAA,EAAY,CAAA;AAAA,sBACvE,GAAA;AAAA,QAAC,CAAA,CAAE,IAAA;AAAA,QAAF;AAAA,UAEC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,UACtB,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,UACtB,SAAA,EAAW,EAAA;AAAA,YACT,uDAAA;AAAA,YACA,KAAA,KAAU,YACN,gCAAA,GACA;AAAA,WACN;AAAA,UAEC,QAAA,EAAA,KAAA,KAAU,YAAY,SAAA,GAAY;AAAA,SAAA;AAAA,QAV9B;AAAA;AAWP,KAAA,EACF,CAAA;AAAA,oBAGA,GAAA,CAAC,SAAI,GAAA,EAAK,SAAA,EAAW,WAAU,iDAAA,EAC7B,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,CAAM,MAAM,CAAA,EAAG,YAAY,EAAE,GAAA,CAAI,CAAC,MAAM,CAAA,KAAG;AA7GxD,QAAA,IAAA,EAAA,EAAA,EAAA;AA8Gc,QAAA,uBAAA,IAAA;AAAA,UAAC,CAAA,CAAE,GAAA;AAAA,UAAF;AAAA,YAEC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,YACtB,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,YACtB,SAAA,EAAU,MAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6DAAA,EACb,QAAA,EAAA,CAAA,GAAI,CAAA,EACP,CAAA;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,WAAW,EAAA,CAAG,4BAAA,EAAA,CAA8B,EAAA,GAAA,IAAA,CAAK,MAAA,KAAL,YAAe,eAAe,CAAA;AAAA,kBAC1E,OAAO,EAAE,WAAA,EAAA,CAAA,CAAc,UAAK,MAAA,KAAL,IAAA,GAAA,EAAA,GAAe,KAAK,EAAA,EAAG;AAAA,kBAE7C,eAAK,IAAA,IAAQ;AAAA;AAAA;AAChB;AAAA,WAAA;AAAA,UAbK,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,CAAC,CAAA;AAAA,SAcpB;AAAA,MAAA,CACD,CAAA;AAAA,MACA,eAAe,KAAA,CAAM,MAAA,oBACpB,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,MAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,KAAA,EAAM,CAAA;AAAA,wBACtB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wDAAA,EACb,QAAA,EAAA,QAAA,EACH;AAAA,OAAA,EACF;AAAA,KAAA,EAEJ,CAAA,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ","file":"animation-rest-api.js","sourcesContent":["\"use client\"\n\nimport { domAnimation, LazyMotion, m } from \"motion/react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\ntype CodeLine = {\n  text: string\n  colour?: string\n  indent?: number\n}\n\nconst REQUEST: CodeLine[] = [\n  { text: \"POST /v1/transfers/screen\", colour: \"text-emerald-400\" },\n  { text: \"Authorization: Bearer sk_live_\\u2022\\u2022\\u2022\", colour: \"text-gray-500\" },\n  { text: \"Content-Type: application/json\", colour: \"text-gray-500\" },\n  { text: \"\" },\n  { text: \"{\", colour: \"text-gray-300\" },\n  { text: '\"transfer_id\": \"TXN-0847\",', colour: \"text-[#00D4FF]\", indent: 1 },\n  { text: '\"originator\": {', colour: \"text-gray-300\", indent: 1 },\n  { text: '\"vasp_id\": \"vasp_au_001\",', colour: \"text-amber-400\", indent: 2 },\n  { text: '\"jurisdiction\": \"AU\"', colour: \"text-amber-400\", indent: 2 },\n  { text: \"},\", colour: \"text-gray-300\", indent: 1 },\n  { text: '\"beneficiary\": {', colour: \"text-gray-300\", indent: 1 },\n  { text: '\"vasp_id\": \"vasp_sg_042\",', colour: \"text-amber-400\", indent: 2 },\n  { text: '\"jurisdiction\": \"SG\"', colour: \"text-amber-400\", indent: 2 },\n  { text: \"},\", colour: \"text-gray-300\", indent: 1 },\n  { text: '\"amount\": \"45000.00\",', colour: \"text-violet-400\", indent: 1 },\n  { text: '\"currency\": \"USD\"', colour: \"text-violet-400\", indent: 1 },\n  { text: \"}\", colour: \"text-gray-300\" },\n]\n\nconst RESPONSE: CodeLine[] = [\n  { text: \"200 OK\", colour: \"text-emerald-400\" },\n  { text: \"\" },\n  { text: \"{\", colour: \"text-gray-300\" },\n  { text: '\"status\": \"compliant\",', colour: \"text-emerald-400\", indent: 1 },\n  { text: '\"risk_score\": 18,', colour: \"text-[#00D4FF]\", indent: 1 },\n  { text: '\"travel_rule\": \"verified\",', colour: \"text-emerald-400\", indent: 1 },\n  { text: '\"jurisdiction_pair\": \"AU→SG\",', colour: \"text-amber-400\", indent: 1 },\n  { text: '\"report_ref\": \"CR-2024-0847\"', colour: \"text-violet-400\", indent: 1 },\n  { text: \"}\", colour: \"text-gray-300\" },\n]\n\nexport default function AnimationRestApi({ className }: { className?: string }) {\n  const [phase, setPhase] = useState<\"request\" | \"response\">(\"request\")\n  const [visibleLines, setVisibleLines] = useState(0)\n  const scrollRef = useRef<HTMLDivElement>(null)\n  const lines = phase === \"request\" ? REQUEST : RESPONSE\n\n  const reset = useCallback(() => {\n    setPhase(\"request\")\n    setVisibleLines(0)\n  }, [])\n\n  useEffect(() => {\n    if (visibleLines < lines.length) {\n      const id = setTimeout(() => setVisibleLines((v) => v + 1), 80)\n      return () => clearTimeout(id)\n    } else if (phase === \"request\") {\n      const id = setTimeout(() => {\n        setPhase(\"response\")\n        setVisibleLines(0)\n      }, 1200)\n      return () => clearTimeout(id)\n    } else {\n      const id = setTimeout(reset, 3000)\n      return () => clearTimeout(id)\n    }\n  }, [visibleLines, lines.length, phase, reset])\n\n  useEffect(() => {\n    const el = scrollRef.current\n    if (!el) return\n    requestAnimationFrame(() => {\n      el.scrollTop = el.scrollHeight\n    })\n  }, [])\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <div className={cn(\"flex flex-col bg-[#1a1a2e]\", className)}>\n        {/* Tab bar */}\n        <div className=\"flex items-center gap-3 border-white/10 border-b px-4 py-2\">\n          <div className=\"flex gap-1.5\">\n            <span className=\"size-2.5 rounded-full bg-red-400/80\" />\n            <span className=\"size-2.5 rounded-full bg-amber-400/80\" />\n            <span className=\"size-2.5 rounded-full bg-emerald-400/80\" />\n          </div>\n          <span className=\"ml-2 font-mono text-[10px] text-white/40\">cogentic-api</span>\n          <m.span\n            key={phase}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            className={cn(\n              \"ml-auto rounded-full px-2 py-0.5 font-bold text-[9px]\",\n              phase === \"request\"\n                ? \"bg-amber-500/20 text-amber-300\"\n                : \"bg-emerald-500/20 text-emerald-300\",\n            )}\n          >\n            {phase === \"request\" ? \"REQUEST\" : \"RESPONSE\"}\n          </m.span>\n        </div>\n\n        {/* Code */}\n        <div ref={scrollRef} className=\"scrollbar-none flex-1 overflow-y-auto px-4 py-3\">\n          <div className=\"space-y-0.5\">\n            {lines.slice(0, visibleLines).map((line, i) => (\n              <m.div\n                key={`${phase}-${i}`}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                className=\"flex\"\n              >\n                <span className=\"w-5 shrink-0 text-right font-mono text-[10px] text-white/20\">\n                  {i + 1}\n                </span>\n                <span\n                  className={cn(\"ml-3 font-mono text-[11px]\", line.colour ?? \"text-white/60\")}\n                  style={{ paddingLeft: (line.indent ?? 0) * 16 }}\n                >\n                  {line.text || \"\\u00A0\"}\n                </span>\n              </m.div>\n            ))}\n            {visibleLines < lines.length && (\n              <div className=\"flex\">\n                <span className=\"w-5\" />\n                <span className=\"ml-3 animate-pulse font-mono text-[11px] text-white/30\">\n                  {\"\\u2588\"}\n                </span>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </LazyMotion>\n  )\n}\n"]}

package/dist/animations/animation-risk-scoring.js

@@ -1,8 +1,162 @@
 "use client";
-export { AnimationRiskScoring as default } from '../chunk-HTYR73ON.js';
-import '../chunk-TAPJEVUA.js';
-import '../chunk-6RWCZUAD.js';
+import { EASE_OUT } from '../chunk-TAPJEVUA.js';
+import { useCycleIndex } from '../chunk-6RWCZUAD.js';
 import '../chunk-RXV2XUDZ.js';
-import '../chunk-GZNLQE3I.js';
+import { cn } from '../chunk-GZNLQE3I.js';
+import { ShieldCheck, ShieldAlert, AlertTriangle } from 'lucide-react';
+import { LazyMotion, domAnimation, m } from 'motion/react';
+import { useState, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var SCENARIOS = [
+  {
+    txn: "TXN-0847",
+    corridor: "AU \u2192 SG",
+    score: 18,
+    level: "Low",
+    colour: "text-emerald-600",
+    barColour: "bg-emerald-400",
+    icon: ShieldCheck,
+    checks: [
+      { label: "Sanctions", result: "Clear", ok: true },
+      { label: "PEP screening", result: "Clear", ok: true },
+      { label: "Travel Rule", result: "Verified", ok: true },
+      { label: "Threshold", result: "Below limit", ok: true }
+    ]
+  },
+  {
+    txn: "TXN-0846",
+    corridor: "HK \u2192 GB",
+    score: 72,
+    level: "High",
+    colour: "text-red-500",
+    barColour: "bg-red-400",
+    icon: ShieldAlert,
+    checks: [
+      { label: "Sanctions", result: "Clear", ok: true },
+      { label: "PEP screening", result: "1 match", ok: false },
+      { label: "Travel Rule", result: "Verified", ok: true },
+      { label: "Threshold", result: "Exceeded", ok: false }
+    ]
+  },
+  {
+    txn: "TXN-0845",
+    corridor: "AE \u2192 NL",
+    score: 41,
+    level: "Medium",
+    colour: "text-amber-500",
+    barColour: "bg-amber-400",
+    icon: AlertTriangle,
+    checks: [
+      { label: "Sanctions", result: "Clear", ok: true },
+      { label: "PEP screening", result: "Clear", ok: true },
+      { label: "Travel Rule", result: "Pending", ok: false },
+      { label: "Threshold", result: "Below limit", ok: true }
+    ]
+  }
+];
+var CYCLE_MS = 3800;
+function AnimatedNumber({ value, duration = 1e3 }) {
+  const [display, setDisplay] = useState(0);
+  useEffect(() => {
+    let start = null;
+    let raf;
+    function tick(ts) {
+      if (start === null) start = ts;
+      const progress = Math.min((ts - start) / duration, 1);
+      const eased = 1 - (1 - progress) ** 3;
+      setDisplay(Math.round(value * eased));
+      if (progress < 1) raf = requestAnimationFrame(tick);
+    }
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [value, duration]);
+  return /* @__PURE__ */ jsx(Fragment, { children: display });
+}
+function AnimationRiskScoring({ className }) {
+  const [containerRef, index] = useCycleIndex(SCENARIOS.length, CYCLE_MS);
+  const s = SCENARIOS[index];
+  const Icon = s.icon;
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("flex flex-col p-5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold text-[15px] text-forground", children: "Risk Analysis" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[12px] text-gray-400", children: "Real-time transfer scoring" })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        m.div,
+        {
+          initial: { opacity: 0, scale: 0.9 },
+          animate: { opacity: 1, scale: 1 },
+          className: cn(
+            "flex items-center gap-1.5 rounded-full px-2.5 py-1",
+            s.level === "Low" ? "bg-emerald-50" : s.level === "Medium" ? "bg-amber-50" : "bg-red-50"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: cn("size-3.5", s.colour), strokeWidth: 2 }),
+            /* @__PURE__ */ jsx("span", { className: cn("font-semibold text-[11px]", s.colour), children: s.level })
+          ]
+        },
+        index
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        initial: { opacity: 0, y: 6 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.3 },
+        className: "mt-4 flex items-center gap-3 rounded-lg border border-gray-100 bg-gray-50 px-3 py-2.5",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-bold font-mono text-[11px] text-gray-400", children: s.txn }),
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-[12px] text-gray-700", children: s.corridor })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-bold font-mono text-2xl text-gray-900", children: /* @__PURE__ */ jsx(AnimatedNumber, { value: s.score }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400", children: "/100" })
+          ] })
+        ]
+      },
+      `info-${index}`
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mt-3 h-2 overflow-hidden rounded-full bg-gray-100", children: /* @__PURE__ */ jsx(
+      m.div,
+      {
+        className: cn("h-full rounded-full", s.barColour),
+        style: { transformOrigin: "left", width: "100%" },
+        initial: { scaleX: 0 },
+        animate: { scaleX: s.score / 100 },
+        transition: { duration: 1, ease: EASE_OUT }
+      },
+      `bar-${index}`
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 grid grid-cols-2 gap-2", children: s.checks.map((check, i) => /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        initial: { opacity: 0, y: 4 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.25, delay: 0.1 + i * 0.08 },
+        className: "flex items-center justify-between rounded-lg border border-gray-100 bg-white px-3 py-2",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-[11px] text-gray-600", children: check.label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "font-semibold text-[10px]",
+                check.ok ? "text-emerald-600" : "text-red-500"
+              ),
+              children: check.result
+            }
+          )
+        ]
+      },
+      `${check.label}-${index}`
+    )) })
+  ] }) });
+}
+
+export { AnimationRiskScoring as default };
 //# sourceMappingURL=animation-risk-scoring.js.map
 //# sourceMappingURL=animation-risk-scoring.js.map

package/dist/animations/animation-risk-scoring.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"animation-risk-scoring.js"}
+{"version":3,"sources":["../../src/animations/animation-risk-scoring.tsx"],"names":[],"mappings":"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","file":"animation-risk-scoring.js","sourcesContent":["\"use client\"\n\nimport { AlertTriangle, ShieldAlert, ShieldCheck } from \"lucide-react\"\nimport { domAnimation, LazyMotion, m } from \"motion/react\"\nimport { useEffect, useState } from \"react\"\n\nimport { useCycleIndex } from \"../hooks/use-cycle-index\"\n\nimport { EASE_OUT } from \"../lib/animation\"\nimport { cn } from \"../lib/utils\"\n\ntype Scenario = {\n  txn: string\n  corridor: string\n  score: number\n  level: \"Low\" | \"Medium\" | \"High\"\n  colour: string\n  barColour: string\n  icon: typeof ShieldCheck\n  checks: { label: string; result: string; ok: boolean }[]\n}\n\nconst SCENARIOS: Scenario[] = [\n  {\n    txn: \"TXN-0847\",\n    corridor: \"AU \\u2192 SG\",\n    score: 18,\n    level: \"Low\",\n    colour: \"text-emerald-600\",\n    barColour: \"bg-emerald-400\",\n    icon: ShieldCheck,\n    checks: [\n      { label: \"Sanctions\", result: \"Clear\", ok: true },\n      { label: \"PEP screening\", result: \"Clear\", ok: true },\n      { label: \"Travel Rule\", result: \"Verified\", ok: true },\n      { label: \"Threshold\", result: \"Below limit\", ok: true },\n    ],\n  },\n  {\n    txn: \"TXN-0846\",\n    corridor: \"HK \\u2192 GB\",\n    score: 72,\n    level: \"High\",\n    colour: \"text-red-500\",\n    barColour: \"bg-red-400\",\n    icon: ShieldAlert,\n    checks: [\n      { label: \"Sanctions\", result: \"Clear\", ok: true },\n      { label: \"PEP screening\", result: \"1 match\", ok: false },\n      { label: \"Travel Rule\", result: \"Verified\", ok: true },\n      { label: \"Threshold\", result: \"Exceeded\", ok: false },\n    ],\n  },\n  {\n    txn: \"TXN-0845\",\n    corridor: \"AE \\u2192 NL\",\n    score: 41,\n    level: \"Medium\",\n    colour: \"text-amber-500\",\n    barColour: \"bg-amber-400\",\n    icon: AlertTriangle,\n    checks: [\n      { label: \"Sanctions\", result: \"Clear\", ok: true },\n      { label: \"PEP screening\", result: \"Clear\", ok: true },\n      { label: \"Travel Rule\", result: \"Pending\", ok: false },\n      { label: \"Threshold\", result: \"Below limit\", ok: true },\n    ],\n  },\n]\n\nconst CYCLE_MS = 3800\n\nfunction AnimatedNumber({ value, duration = 1000 }: { value: number; duration?: number }) {\n  const [display, setDisplay] = useState(0)\n\n  useEffect(() => {\n    let start: number | null = null\n    let raf: number\n\n    function tick(ts: number) {\n      if (start === null) start = ts\n      const progress = Math.min((ts - start) / duration, 1)\n      const eased = 1 - (1 - progress) ** 3\n      setDisplay(Math.round(value * eased))\n      if (progress < 1) raf = requestAnimationFrame(tick)\n    }\n\n    raf = requestAnimationFrame(tick)\n    return () => cancelAnimationFrame(raf)\n  }, [value, duration])\n\n  return <>{display}</>\n}\n\nexport default function AnimationRiskScoring({ className }: { className?: string }) {\n  const [containerRef, index] = useCycleIndex(SCENARIOS.length, CYCLE_MS)\n  const s = SCENARIOS[index]\n  const Icon = s.icon\n\n  return (\n    <LazyMotion features={domAnimation}>\n      <div ref={containerRef} className={cn(\"flex flex-col p-5\", className)}>\n        {/* Header */}\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <p className=\"font-semibold text-[15px] text-forground\">Risk Analysis</p>\n            <p className=\"text-[12px] text-gray-400\">Real-time transfer scoring</p>\n          </div>\n          <m.div\n            key={index}\n            initial={{ opacity: 0, scale: 0.9 }}\n            animate={{ opacity: 1, scale: 1 }}\n            className={cn(\n              \"flex items-center gap-1.5 rounded-full px-2.5 py-1\",\n              s.level === \"Low\"\n                ? \"bg-emerald-50\"\n                : s.level === \"Medium\"\n                  ? \"bg-amber-50\"\n                  : \"bg-red-50\",\n            )}\n          >\n            <Icon className={cn(\"size-3.5\", s.colour)} strokeWidth={2} />\n            <span className={cn(\"font-semibold text-[11px]\", s.colour)}>{s.level}</span>\n          </m.div>\n        </div>\n\n        {/* Transfer info */}\n        <m.div\n          key={`info-${index}`}\n          initial={{ opacity: 0, y: 6 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.3 }}\n          className=\"mt-4 flex items-center gap-3 rounded-lg border border-gray-100 bg-gray-50 px-3 py-2.5\"\n        >\n          <div className=\"flex-1\">\n            <p className=\"font-bold font-mono text-[11px] text-gray-400\">{s.txn}</p>\n            <p className=\"font-medium text-[12px] text-gray-700\">{s.corridor}</p>\n          </div>\n          <div className=\"text-right\">\n            <p className=\"font-bold font-mono text-2xl text-gray-900\">\n              <AnimatedNumber value={s.score} />\n            </p>\n            <p className=\"text-[10px] text-gray-400\">/100</p>\n          </div>\n        </m.div>\n\n        {/* Score bar */}\n        <div className=\"mt-3 h-2 overflow-hidden rounded-full bg-gray-100\">\n          <m.div\n            key={`bar-${index}`}\n            className={cn(\"h-full rounded-full\", s.barColour)}\n            style={{ transformOrigin: \"left\", width: \"100%\" }}\n            initial={{ scaleX: 0 }}\n            animate={{ scaleX: s.score / 100 }}\n            transition={{ duration: 1, ease: EASE_OUT }}\n          />\n        </div>\n\n        {/* Check results */}\n        <div className=\"mt-4 grid grid-cols-2 gap-2\">\n          {s.checks.map((check, i) => (\n            <m.div\n              key={`${check.label}-${index}`}\n              initial={{ opacity: 0, y: 4 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ duration: 0.25, delay: 0.1 + i * 0.08 }}\n              className=\"flex items-center justify-between rounded-lg border border-gray-100 bg-white px-3 py-2\"\n            >\n              <span className=\"font-medium text-[11px] text-gray-600\">{check.label}</span>\n              <span\n                className={cn(\n                  \"font-semibold text-[10px]\",\n                  check.ok ? \"text-emerald-600\" : \"text-red-500\",\n                )}\n              >\n                {check.result}\n              </span>\n            </m.div>\n          ))}\n        </div>\n      </div>\n    </LazyMotion>\n  )\n}\n"]}

package/dist/animations/animation-sandbox.js

@@ -1,5 +1,110 @@
 "use client";
-export { AnimationSandbox as default } from '../chunk-N7PBUY7G.js';
-import '../chunk-GZNLQE3I.js';
+import { cn } from '../chunk-GZNLQE3I.js';
+import { RotateCcw, Play } from 'lucide-react';
+import { LazyMotion, domAnimation, m } from 'motion/react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SCRIPT = [
+  { type: "command", text: "$ cogentic-cli test transfer --corridor AU:SG --amount 45000" },
+  { type: "info", text: "\u2192 Using sandbox environment (test mode)" },
+  { type: "output", text: "Creating test transfer TXN-TEST-0001..." },
+  { type: "output", text: "Screening against sandbox ruleset..." },
+  { type: "output", text: "  Jurisdiction: AUSTRAC \u2192 MAS" },
+  { type: "output", text: "  Threshold check: AUD 10,000 exceeded" },
+  { type: "output", text: "  Travel Rule: IVMS101 required" },
+  { type: "output", text: "  Risk score: 18/100 (Low)" },
+  { type: "success", text: "\u2713 Transfer screened: COMPLIANT" },
+  { type: "info", text: "\u2192 Sandbox report: SR-TEST-0001 generated" },
+  { type: "info", text: "\u2192 No production data affected" },
+  { type: "command", text: "" },
+  { type: "command", text: "$ cogentic-cli test transfer --corridor HK:GB --amount 120000" },
+  { type: "info", text: "\u2192 Using sandbox environment (test mode)" },
+  { type: "output", text: "Creating test transfer TXN-TEST-0002..." },
+  { type: "output", text: "Screening against sandbox ruleset..." },
+  { type: "output", text: "  Jurisdiction: SFC \u2192 FCA" },
+  { type: "output", text: "  High-risk corridor detected" },
+  { type: "output", text: "  Enhanced due diligence triggered" },
+  { type: "output", text: "  Risk score: 72/100 (High)" },
+  { type: "success", text: "\u26A0 Transfer screened: FLAGGED \u2014 manual review required" }
+];
+var lineColour = {
+  command: "text-white/90",
+  output: "text-white/50",
+  success: "text-emerald-400",
+  info: "text-[#00D4FF]/80"
+};
+function AnimationSandbox({ className }) {
+  const [visibleLines, setVisibleLines] = useState(0);
+  const scrollRef = useRef(null);
+  const reset = useCallback(() => {
+    setVisibleLines(0);
+  }, []);
+  useEffect(() => {
+    if (visibleLines < SCRIPT.length) {
+      const line = SCRIPT[visibleLines];
+      const delay = line.type === "command" ? 400 : line.text === "" ? 200 : 120;
+      const id = setTimeout(() => setVisibleLines((v) => v + 1), delay);
+      return () => clearTimeout(id);
+    } else {
+      const id = setTimeout(reset, 4e3);
+      return () => clearTimeout(id);
+    }
+  }, [visibleLines, reset]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    requestAnimationFrame(() => {
+      el.scrollTop = el.scrollHeight;
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-[#1a1a2e]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-white/10 border-b px-4 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-red-400/80" }),
+        /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-amber-400/80" }),
+        /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-emerald-400/80" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "ml-2 font-mono text-[10px] text-white/40", children: "cogentic-sandbox" }),
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "rounded-full bg-amber-500/20 px-2 py-0.5 font-bold font-mono text-[9px] text-amber-300", children: "SANDBOX" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: reset,
+            className: "text-white/30 transition-colors hover:text-white/60",
+            "aria-label": "Restart",
+            children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-3" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "scrollbar-none flex-1 overflow-y-auto px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+      SCRIPT.slice(0, visibleLines).map((line, i) => /* @__PURE__ */ jsx(
+        m.p,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          className: cn("font-mono text-[11px] leading-relaxed", lineColour[line.type]),
+          children: line.text || "\xA0"
+        },
+        i
+      )),
+      visibleLines < SCRIPT.length && /* @__PURE__ */ jsx("p", { className: "animate-pulse font-mono text-[11px] text-white/30", children: "\u2588" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-white/10 border-t px-4 py-1.5", children: [
+      /* @__PURE__ */ jsx(Play, { className: "size-3 text-emerald-400" }),
+      /* @__PURE__ */ jsxs("span", { className: "font-mono text-[9px] text-white/30", children: [
+        "Sandbox ",
+        "\u2022",
+        " No production data ",
+        "\u2022",
+        " Realistic responses"
+      ] })
+    ] })
+  ] }) });
+}
+
+export { AnimationSandbox as default };
 //# sourceMappingURL=animation-sandbox.js.map
 //# sourceMappingURL=animation-sandbox.js.map