@cueframe/kernel 0.1.0 → 0.1.1

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

@@ -1,459 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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":[]}