@cueframe/kernel 0.0.1

package/dist/_members/primitives/chunk-KYRDVZST.js

@@ -0,0 +1,459 @@
+import {
+  BG,
+  SUCCESS,
+  SURFACE,
+  TEXT_HI
+} from "./chunk-3OMURV6Q.js";
+
+// src/ui-blocks/dashboard-populate/index.tsx
+import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FONT_FAMILY = "inherit";
+var MONO_FAMILY = "monospace";
+var STRUCTURE_END = 15;
+function formatNumber(n) {
+  return n.toLocaleString("en-US");
+}
+var BAR_VALUES = [0.55, 0.78, 0.42, 0.92, 0.66];
+var LINE_POINTS = [
+  [0, 70],
+  [16, 55],
+  [32, 62],
+  [48, 38],
+  [64, 45],
+  [80, 22],
+  [100, 12]
+];
+function buildLinePath() {
+  return LINE_POINTS.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x},${y}`).join(
+    " "
+  );
+}
+function Tile({
+  title,
+  children,
+  structureOpacity
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        background: `linear-gradient(180deg, ${SURFACE} 0%, ${BG} 100%)`,
+        border: "1px solid rgba(255,255,255,0.08)",
+        borderRadius: 16,
+        padding: 24,
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        opacity: structureOpacity
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: 12,
+              fontWeight: 500,
+              textTransform: "uppercase",
+              letterSpacing: "0.08em",
+              color: "rgba(255,255,255,0.5)"
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, position: "relative" }, children })
+      ]
+    }
+  );
+}
+function DashboardPopulate({
+  accentColor = SUCCESS,
+  kpiTarget = 128400,
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame() * speed;
+  const { fps } = useVideoConfig();
+  const structureOpacity = interpolate(frame, [0, STRUCTURE_END], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const kpiSpring = spring({
+    frame: frame - STRUCTURE_END,
+    fps,
+    config: { damping: 20, stiffness: 80, mass: 1 },
+    durationInFrames: 60
+  });
+  const kpiValue = Math.floor(kpiSpring * kpiTarget);
+  const kpiDelta = interpolate(kpiSpring, [0, 1], [0, 12.4]);
+  const barProgress = BAR_VALUES.map(
+    (_, i) => spring({
+      frame: frame - STRUCTURE_END - i * 4,
+      fps,
+      config: { damping: 11, stiffness: 140, mass: 1 },
+      durationInFrames: 40
+    })
+  );
+  const linePath = buildLinePath();
+  const lineProgress = interpolate(
+    frame,
+    [STRUCTURE_END + 4, STRUCTURE_END + 50],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const donutTarget = 0.72;
+  const donutSpring = spring({
+    frame: frame - STRUCTURE_END - 6,
+    fps,
+    config: { damping: 13, stiffness: 110, mass: 1 },
+    durationInFrames: 50
+  });
+  const donutValue = donutSpring * donutTarget;
+  const donutR = 70;
+  const donutCircum = 2 * Math.PI * donutR;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: BG,
+        fontFamily: FONT_FAMILY,
+        color: TEXT_HI,
+        padding: 64,
+        display: "flex",
+        flexDirection: "column",
+        gap: 24,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundImage: "linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px)",
+              backgroundSize: "48px 48px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              opacity: structureOpacity
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 28,
+                      fontWeight: 600,
+                      letterSpacing: "-0.02em"
+                    },
+                    children: "Overview"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 14,
+                      opacity: 0.5,
+                      marginTop: 4
+                    },
+                    children: "Last 30 days"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: 8,
+                    fontSize: 12,
+                    fontFamily: MONO_FAMILY
+                  },
+                  children: ["1D", "7D", "30D", "ALL"].map((l, i) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "6px 12px",
+                        borderRadius: 8,
+                        background: i === 2 ? "rgba(255,255,255,0.1)" : "rgba(255,255,255,0.03)",
+                        border: "1px solid rgba(255,255,255,0.06)"
+                      },
+                      children: l
+                    },
+                    l
+                  ))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              flex: 1,
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gridTemplateRows: "1fr 1fr",
+              gap: 24
+            },
+            children: [
+              /* @__PURE__ */ jsx(Tile, { title: "Revenue", structureOpacity, children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 12,
+                    height: "100%",
+                    justifyContent: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 64,
+                          fontWeight: 700,
+                          letterSpacing: "-0.04em",
+                          fontVariantNumeric: "tabular-nums",
+                          fontFamily: MONO_FAMILY
+                        },
+                        children: [
+                          "$",
+                          formatNumber(kpiValue)
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 8,
+                          fontSize: 14,
+                          color: accentColor
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
+                            "+",
+                            kpiDelta.toFixed(1),
+                            "%"
+                          ] }),
+                          /* @__PURE__ */ jsx("span", { style: { opacity: 0.5, color: TEXT_HI }, children: "vs last month" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Tile, { title: "Sessions", structureOpacity, children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  viewBox: "0 0 200 100",
+                  preserveAspectRatio: "none",
+                  style: { width: "100%", height: "100%" },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: "0",
+                        y1: "100",
+                        x2: "200",
+                        y2: "100",
+                        stroke: "rgba(255,255,255,0.15)",
+                        strokeWidth: "0.5"
+                      }
+                    ),
+                    [25, 50, 75].map((y) => /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: "0",
+                        y1: y,
+                        x2: "200",
+                        y2: y,
+                        stroke: "rgba(255,255,255,0.06)",
+                        strokeWidth: "0.5",
+                        strokeDasharray: "2 2"
+                      },
+                      y
+                    )),
+                    BAR_VALUES.map((v, i) => {
+                      const barH = v * 90 * barProgress[i];
+                      const barW = 24;
+                      const x = 16 + i * 36;
+                      const y = 100 - barH;
+                      return /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          x,
+                          y,
+                          width: barW,
+                          height: barH,
+                          rx: 3,
+                          fill: accentColor,
+                          opacity: 0.85
+                        },
+                        i
+                      );
+                    })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Tile, { title: "Active users", structureOpacity, children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  viewBox: "0 0 100 100",
+                  preserveAspectRatio: "none",
+                  style: { width: "100%", height: "100%" },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: "0",
+                        y1: "100",
+                        x2: "100",
+                        y2: "100",
+                        stroke: "rgba(255,255,255,0.15)",
+                        strokeWidth: "0.4"
+                      }
+                    ),
+                    [20, 40, 60, 80].map((y) => /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: "0",
+                        y1: y,
+                        x2: "100",
+                        y2: y,
+                        stroke: "rgba(255,255,255,0.06)",
+                        strokeWidth: "0.4",
+                        strokeDasharray: "1.5 1.5"
+                      },
+                      y
+                    )),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: linePath,
+                        fill: "none",
+                        stroke: accentColor,
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        pathLength: 1,
+                        strokeDasharray: 1,
+                        strokeDashoffset: 1 - lineProgress
+                      }
+                    ),
+                    LINE_POINTS.map(([px, py], i) => {
+                      const dotProgress = interpolate(
+                        lineProgress,
+                        [
+                          i / (LINE_POINTS.length - 1),
+                          i / (LINE_POINTS.length - 1) + 0.05
+                        ],
+                        [0, 1],
+                        { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+                      );
+                      return /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: px,
+                          cy: py,
+                          r: 1.2,
+                          fill: accentColor,
+                          opacity: dotProgress
+                        },
+                        i
+                      );
+                    })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Tile, { title: "Conversion", structureOpacity, children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "100%",
+                    position: "relative"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("svg", { width: "180", height: "180", viewBox: "0 0 180 180", children: [
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "90",
+                          cy: "90",
+                          r: donutR,
+                          fill: "none",
+                          stroke: "rgba(255,255,255,0.08)",
+                          strokeWidth: "14"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "90",
+                          cy: "90",
+                          r: donutR,
+                          fill: "none",
+                          stroke: accentColor,
+                          strokeWidth: "14",
+                          strokeLinecap: "round",
+                          strokeDasharray: `${donutCircum * donutValue} ${donutCircum}`,
+                          transform: "rotate(-90 90 90)"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          fontSize: 36,
+                          fontWeight: 700,
+                          letterSpacing: "-0.02em",
+                          fontFamily: MONO_FAMILY,
+                          fontVariantNumeric: "tabular-nums"
+                        },
+                        children: [
+                          (donutValue * 100).toFixed(1),
+                          "%"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  DashboardPopulate
+};
+//# sourceMappingURL=chunk-KYRDVZST.js.map

package/dist/_members/primitives/chunk-KYRDVZST.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui-blocks/dashboard-populate/index.tsx"],"sourcesContent":["/**\n * Adapted from remocn (https://github.com/kapishdima/remocn) — MIT\n * Copyright (c) 2026 KapishDima\n *\n * Modifications:\n *   - hermetic-ize fontFamily (use inherit / monospace, not Geist CSS vars)\n *   - strip \"use client\" directive (re-added at shadcn-registry export time)\n */\n\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport * as palette from \"../../lib/palette\";\n\nexport interface DashboardPopulateProps {\n  accentColor?: string;\n  kpiTarget?: number;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"inherit\";\nconst MONO_FAMILY =\n  \"monospace\";\n\nconst STRUCTURE_END = 15;\n\nfunction formatNumber(n: number) {\n  return n.toLocaleString(\"en-US\");\n}\n\nconst BAR_VALUES = [0.55, 0.78, 0.42, 0.92, 0.66];\n\n// Hand-coded line chart points (in 0..100 viewBox space)\nconst LINE_POINTS: Array<[number, number]> = [\n  [0, 70],\n  [16, 55],\n  [32, 62],\n  [48, 38],\n  [64, 45],\n  [80, 22],\n  [100, 12],\n];\n\nfunction buildLinePath() {\n  return LINE_POINTS.map(([x, y], i) => `${i === 0 ? \"M\" : \"L\"}${x},${y}`).join(\n    \" \",\n  );\n}\n\nfunction Tile({\n  title,\n  children,\n  structureOpacity,\n}: {\n  title: string;\n  children: React.ReactNode;\n  structureOpacity: number;\n}) {\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        background: `linear-gradient(180deg, ${palette.SURFACE} 0%, ${palette.BG} 100%)`,\n        border: \"1px solid rgba(255,255,255,0.08)\",\n        borderRadius: 16,\n        padding: 24,\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 16,\n        opacity: structureOpacity,\n      }}\n    >\n      <div\n        style={{\n          fontSize: 12,\n          fontWeight: 500,\n          textTransform: \"uppercase\",\n          letterSpacing: \"0.08em\",\n          color: \"rgba(255,255,255,0.5)\",\n        }}\n      >\n        {title}\n      </div>\n      <div style={{ flex: 1, position: \"relative\" }}>{children}</div>\n    </div>\n  );\n}\n\nexport function DashboardPopulate({\n  accentColor = palette.SUCCESS,\n  kpiTarget = 128400,\n  speed = 1,\n  className,\n}: DashboardPopulateProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  // Phase 1: structure fade in 0..15\n  const structureOpacity = interpolate(frame, [0, STRUCTURE_END], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  // KPI count up\n  const kpiSpring = spring({\n    frame: frame - STRUCTURE_END,\n    fps,\n    config: { damping: 20, stiffness: 80, mass: 1 },\n    durationInFrames: 60,\n  });\n  const kpiValue = Math.floor(kpiSpring * kpiTarget);\n  const kpiDelta = interpolate(kpiSpring, [0, 1], [0, 12.4]);\n\n  // Bar chart springs (staggered)\n  const barProgress = BAR_VALUES.map((_, i) =>\n    spring({\n      frame: frame - STRUCTURE_END - i * 4,\n      fps,\n      config: { damping: 11, stiffness: 140, mass: 1 },\n      durationInFrames: 40,\n    }),\n  );\n\n  // Line chart stroke-dashoffset\n  const linePath = buildLinePath();\n  // approx length for viewBox 100x100 — use a generous constant; we set\n  // pathLength on the path so dashoffset works in normalized units\n  const lineProgress = interpolate(\n    frame,\n    [STRUCTURE_END + 4, STRUCTURE_END + 50],\n    [0, 1],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n\n  // Donut\n  const donutTarget = 0.72;\n  const donutSpring = spring({\n    frame: frame - STRUCTURE_END - 6,\n    fps,\n    config: { damping: 13, stiffness: 110, mass: 1 },\n    durationInFrames: 50,\n  });\n  const donutValue = donutSpring * donutTarget;\n  const donutR = 70;\n  const donutCircum = 2 * Math.PI * donutR;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background: palette.BG,\n        fontFamily: FONT_FAMILY,\n        color: palette.TEXT_HI,\n        padding: 64,\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 24,\n        overflow: \"hidden\",\n      }}\n    >\n      {/* Subtle grid bg */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          backgroundImage:\n            \"linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px)\",\n          backgroundSize: \"48px 48px\",\n        }}\n      />\n      <div\n        style={{\n          position: \"relative\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          opacity: structureOpacity,\n        }}\n      >\n        <div>\n          <div\n            style={{\n              fontSize: 28,\n              fontWeight: 600,\n              letterSpacing: \"-0.02em\",\n            }}\n          >\n            Overview\n          </div>\n          <div\n            style={{\n              fontSize: 14,\n              opacity: 0.5,\n              marginTop: 4,\n            }}\n          >\n            Last 30 days\n          </div>\n        </div>\n        <div\n          style={{\n            display: \"flex\",\n            gap: 8,\n            fontSize: 12,\n            fontFamily: MONO_FAMILY,\n          }}\n        >\n          {[\"1D\", \"7D\", \"30D\", \"ALL\"].map((l, i) => (\n            <div\n              key={l}\n              style={{\n                padding: \"6px 12px\",\n                borderRadius: 8,\n                background:\n                  i === 2 ? \"rgba(255,255,255,0.1)\" : \"rgba(255,255,255,0.03)\",\n                border: \"1px solid rgba(255,255,255,0.06)\",\n              }}\n            >\n              {l}\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div\n        style={{\n          position: \"relative\",\n          flex: 1,\n          display: \"grid\",\n          gridTemplateColumns: \"1fr 1fr\",\n          gridTemplateRows: \"1fr 1fr\",\n          gap: 24,\n        }}\n      >\n        {/* KPI */}\n        <Tile title=\"Revenue\" structureOpacity={structureOpacity}>\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              gap: 12,\n              height: \"100%\",\n              justifyContent: \"center\",\n            }}\n          >\n            <div\n              style={{\n                fontSize: 64,\n                fontWeight: 700,\n                letterSpacing: \"-0.04em\",\n                fontVariantNumeric: \"tabular-nums\",\n                fontFamily: MONO_FAMILY,\n              }}\n            >\n              ${formatNumber(kpiValue)}\n            </div>\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 8,\n                fontSize: 14,\n                color: accentColor,\n              }}\n            >\n              <span style={{ fontWeight: 600 }}>+{kpiDelta.toFixed(1)}%</span>\n              <span style={{ opacity: 0.5, color: palette.TEXT_HI }}>\n                vs last month\n              </span>\n            </div>\n          </div>\n        </Tile>\n\n        {/* Bar chart */}\n        <Tile title=\"Sessions\" structureOpacity={structureOpacity}>\n          <svg\n            viewBox=\"0 0 200 100\"\n            preserveAspectRatio=\"none\"\n            style={{ width: \"100%\", height: \"100%\" }}\n          >\n            {/* axes */}\n            <line\n              x1=\"0\"\n              y1=\"100\"\n              x2=\"200\"\n              y2=\"100\"\n              stroke=\"rgba(255,255,255,0.15)\"\n              strokeWidth=\"0.5\"\n            />\n            {[25, 50, 75].map((y) => (\n              <line\n                key={y}\n                x1=\"0\"\n                y1={y}\n                x2=\"200\"\n                y2={y}\n                stroke=\"rgba(255,255,255,0.06)\"\n                strokeWidth=\"0.5\"\n                strokeDasharray=\"2 2\"\n              />\n            ))}\n            {BAR_VALUES.map((v, i) => {\n              const barH = v * 90 * barProgress[i];\n              const barW = 24;\n              const x = 16 + i * 36;\n              const y = 100 - barH;\n              return (\n                <rect\n                  key={i}\n                  x={x}\n                  y={y}\n                  width={barW}\n                  height={barH}\n                  rx={3}\n                  fill={accentColor}\n                  opacity={0.85}\n                />\n              );\n            })}\n          </svg>\n        </Tile>\n\n        {/* Line chart */}\n        <Tile title=\"Active users\" structureOpacity={structureOpacity}>\n          <svg\n            viewBox=\"0 0 100 100\"\n            preserveAspectRatio=\"none\"\n            style={{ width: \"100%\", height: \"100%\" }}\n          >\n            <line\n              x1=\"0\"\n              y1=\"100\"\n              x2=\"100\"\n              y2=\"100\"\n              stroke=\"rgba(255,255,255,0.15)\"\n              strokeWidth=\"0.4\"\n            />\n            {[20, 40, 60, 80].map((y) => (\n              <line\n                key={y}\n                x1=\"0\"\n                y1={y}\n                x2=\"100\"\n                y2={y}\n                stroke=\"rgba(255,255,255,0.06)\"\n                strokeWidth=\"0.4\"\n                strokeDasharray=\"1.5 1.5\"\n              />\n            ))}\n            <path\n              d={linePath}\n              fill=\"none\"\n              stroke={accentColor}\n              strokeWidth=\"1.6\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              pathLength={1}\n              strokeDasharray={1}\n              strokeDashoffset={1 - lineProgress}\n            />\n            {/* dots */}\n            {LINE_POINTS.map(([px, py], i) => {\n              const dotProgress = interpolate(\n                lineProgress,\n                [\n                  i / (LINE_POINTS.length - 1),\n                  i / (LINE_POINTS.length - 1) + 0.05,\n                ],\n                [0, 1],\n                { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n              );\n              return (\n                <circle\n                  key={i}\n                  cx={px}\n                  cy={py}\n                  r={1.2}\n                  fill={accentColor}\n                  opacity={dotProgress}\n                />\n              );\n            })}\n          </svg>\n        </Tile>\n\n        {/* Donut */}\n        <Tile title=\"Conversion\" structureOpacity={structureOpacity}>\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              height: \"100%\",\n              position: \"relative\",\n            }}\n          >\n            <svg width=\"180\" height=\"180\" viewBox=\"0 0 180 180\">\n              <circle\n                cx=\"90\"\n                cy=\"90\"\n                r={donutR}\n                fill=\"none\"\n                stroke=\"rgba(255,255,255,0.08)\"\n                strokeWidth=\"14\"\n              />\n              <circle\n                cx=\"90\"\n                cy=\"90\"\n                r={donutR}\n                fill=\"none\"\n                stroke={accentColor}\n                strokeWidth=\"14\"\n                strokeLinecap=\"round\"\n                strokeDasharray={`${donutCircum * donutValue} ${donutCircum}`}\n                transform=\"rotate(-90 90 90)\"\n              />\n            </svg>\n            <div\n              style={{\n                position: \"absolute\",\n                fontSize: 36,\n                fontWeight: 700,\n                letterSpacing: \"-0.02em\",\n                fontFamily: MONO_FAMILY,\n                fontVariantNumeric: \"tabular-nums\",\n              }}\n            >\n              {(donutValue * 100).toFixed(1)}%\n            </div>\n          </div>\n        </Tile>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}