@vanillaskyai/video 0.8.7 → 0.9.0

package/dist/chart-progress-ring-JMXQLMLC.js

@@ -1,302 +0,0 @@
-import {
-  getResponsiveFontSize,
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  TemplateText
-} from "./chunk-YJJC4N4D.js";
-import "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import {
-  TOP_TEXT_AREA_RATIO,
-  withOpacity
-} from "./chunk-W3VDIBGR.js";
-import {
-  interpolate
-} from "./chunk-XTOXFMLM.js";
-import {
-  hasSceneMedia
-} from "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  TOKEN_DEFAULTS,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/charts/ProgressRing.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var ProgressRing = ({
-  progress,
-  motionProgress = progress,
-  targetValue,
-  decimalPlaces,
-  unit = "%",
-  chartColor = "#ffffff",
-  textColor = "#ffffff",
-  label: rawLabel = "",
-  font = TOKEN_DEFAULTS.font,
-  width,
-  height,
-  beatIntensity = 0
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const label = stripPipe(String(rawLabel || ""));
-  const radius = Math.min(width, height) * 0.2;
-  const circumference = 2 * Math.PI * radius;
-  const cx = width / 2;
-  const cy = height / 2;
-  const strokeW = 34 * s;
-  const fillPercent = interpolate(progress, [0.05, 0.75], [0, targetValue], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const dashOffset = circumference * (1 - fillPercent / 100);
-  const targetDecimals = Number.isFinite(decimalPlaces) ? Math.max(0, Math.min(2, Math.trunc(decimalPlaces ?? 0))) : Number.isInteger(targetValue) ? 0 : Math.min(2, (String(targetValue).split(".")[1] || "1").length);
-  const displayNumber = targetDecimals === 0 ? String(Math.round(fillPercent)) : fillPercent.toFixed(targetDecimals);
-  const targetDisplayNumber = targetDecimals === 0 ? String(Math.round(targetValue)) : targetValue.toFixed(targetDecimals);
-  const semanticValueIsTransient = displayNumber !== targetDisplayNumber;
-  const beatStroke = strokeW + beatIntensity * 4 * s;
-  const labelFontSize = getResponsiveFontSize(label, width, "subtitle", height) * 1.3;
-  const labelOpacity = interpolate(motionProgress, [0.35, 0.55], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const labelRise = interpolate(motionProgress, [0.35, 0.55], [16 * s, 0], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: cy - radius * 1.2,
-          left: cx - radius * 1.2,
-          width: radius * 2.4,
-          height: radius * 2.4,
-          borderRadius: "50%",
-          background: `radial-gradient(circle at 50% 50%, ${withOpacity(chartColor, 0.08)} 0%, transparent 70%)`,
-          pointerEvents: "none"
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        viewBox: `0 0 ${width} ${height}`,
-        style: {
-          position: "absolute",
-          inset: 0,
-          width,
-          height
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx,
-              cy,
-              r: radius,
-              fill: "none",
-              stroke: withOpacity(chartColor, 0.1),
-              strokeWidth: strokeW
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx,
-              cy,
-              r: radius,
-              fill: "none",
-              stroke: chartColor,
-              strokeWidth: beatStroke,
-              strokeLinecap: "round",
-              strokeDasharray: circumference,
-              strokeDashoffset: dashOffset,
-              transform: `rotate(-90, ${cx}, ${cy})`,
-              style: { transition: "none" }
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-transition-semantic": semanticValueIsTransient ? "transient" : void 0,
-        style: {
-          position: "absolute",
-          left: cx - radius,
-          top: cy - radius,
-          width: radius * 2,
-          height: radius * 2,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          pointerEvents: "none",
-          ...semanticValueIsTransient ? { visibility: "var(--vanillasky-transition-semantic-visibility,visible)" } : {}
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                fontSize: 120 * s,
-                fontWeight: 800,
-                color: textColor,
-                lineHeight: 1
-              },
-              children: displayNumber
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                fontSize: 56 * s,
-                fontWeight: 700,
-                color: chartColor,
-                marginLeft: 4 * s
-              },
-              children: unit
-            }
-          )
-        ]
-      }
-    ),
-    label && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: cy + radius + 48 * s,
-          left: 0,
-          right: 0,
-          display: "flex",
-          justifyContent: "center",
-          pointerEvents: "none"
-        },
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: labelFontSize,
-              color: withOpacity(textColor, 0.6),
-              textTransform: "uppercase",
-              letterSpacing: 2 * s,
-              textAlign: "center",
-              maxWidth: "80%",
-              opacity: labelOpacity,
-              transform: `translateY(${labelRise}px)`,
-              fontFamily: font
-            },
-            children: label
-          }
-        )
-      }
-    )
-  ] });
-};
-
-// src/visual-system/scene-templates/chart-progress-ring.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ChartProgressRingTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  safeZone,
-  sceneDuration,
-  backgroundEffect,
-  isPlaying = true
-}) => {
-  const { primary, foreground, font } = resolveTokens(style);
-  const chartColor = primary;
-  const textColor = foreground;
-  const textsRaw = String(variables.texts || "");
-  const parsedValue = Number(variables.value);
-  const targetValue = Math.max(0, Math.min(100, Number.isFinite(parsedValue) ? parsedValue : 75));
-  const parsedDecimalPlaces = Number(variables.decimalPlaces);
-  const decimalPlaces = Number.isFinite(parsedDecimalPlaces) ? Math.max(0, Math.min(2, Math.trunc(parsedDecimalPlaces))) : void 0;
-  const unit = String(variables.unit ?? "%");
-  const label = String(variables.label ?? "");
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: font
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            backgroundEffect,
-            seed: textsRaw,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: height * TOP_TEXT_AREA_RATIO, overflow: "visible" }, children: /* @__PURE__ */ jsx2(
-          TemplateText,
-          {
-            overMedia: hasSceneMedia(variables),
-            motionProgress,
-            typeTreatment: resolveTokens(style).preset.type,
-            archetype: "subtle",
-            text: String(variables.texts ?? ""),
-            progress,
-            sceneDuration: sceneDuration ?? 3,
-            width,
-            height,
-            position: "top",
-            sizeRole: "headline",
-            safeZone,
-            font,
-            color: textColor,
-            beatIntensity
-          }
-        ) }),
-        /* @__PURE__ */ jsx2(
-          ProgressRing,
-          {
-            progress,
-            motionProgress,
-            targetValue,
-            decimalPlaces,
-            unit,
-            chartColor,
-            textColor,
-            label,
-            font,
-            width,
-            height,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  ChartProgressRingTemplate
-};