@cueframe/kernel 0.0.1

package/dist/chunk-ZSZABOE5.js

@@ -0,0 +1,425 @@
+import {
+  BG,
+  SUCCESS,
+  SURFACE,
+  TEXT_HI
+} from "./chunk-CX2IIQ4R.js";
+
+// ../execution/primitives/src/ui-blocks/dashboard-populate/index.tsx
+import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+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__ */ React.createElement(
+    "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
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 12,
+          fontWeight: 500,
+          textTransform: "uppercase",
+          letterSpacing: "0.08em",
+          color: "rgba(255,255,255,0.5)"
+        }
+      },
+      title
+    ),
+    /* @__PURE__ */ React.createElement("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__ */ React.createElement(
+    "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"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "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__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          opacity: structureOpacity
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: 28,
+            fontWeight: 600,
+            letterSpacing: "-0.02em"
+          }
+        },
+        "Overview"
+      ), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: 14,
+            opacity: 0.5,
+            marginTop: 4
+          }
+        },
+        "Last 30 days"
+      )),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: 8,
+            fontSize: 12,
+            fontFamily: MONO_FAMILY
+          }
+        },
+        ["1D", "7D", "30D", "ALL"].map((l, i) => /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: l,
+            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)"
+            }
+          },
+          l
+        ))
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "relative",
+          flex: 1,
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gridTemplateRows: "1fr 1fr",
+          gap: 24
+        }
+      },
+      /* @__PURE__ */ React.createElement(Tile, { title: "Revenue", structureOpacity }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 12,
+            height: "100%",
+            justifyContent: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              fontSize: 64,
+              fontWeight: 700,
+              letterSpacing: "-0.04em",
+              fontVariantNumeric: "tabular-nums",
+              fontFamily: MONO_FAMILY
+            }
+          },
+          "$",
+          formatNumber(kpiValue)
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              fontSize: 14,
+              color: accentColor
+            }
+          },
+          /* @__PURE__ */ React.createElement("span", { style: { fontWeight: 600 } }, "+", kpiDelta.toFixed(1), "%"),
+          /* @__PURE__ */ React.createElement("span", { style: { opacity: 0.5, color: TEXT_HI } }, "vs last month")
+        )
+      )),
+      /* @__PURE__ */ React.createElement(Tile, { title: "Sessions", structureOpacity }, /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          viewBox: "0 0 200 100",
+          preserveAspectRatio: "none",
+          style: { width: "100%", height: "100%" }
+        },
+        /* @__PURE__ */ React.createElement(
+          "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__ */ React.createElement(
+          "line",
+          {
+            key: y,
+            x1: "0",
+            y1: y,
+            x2: "200",
+            y2: y,
+            stroke: "rgba(255,255,255,0.06)",
+            strokeWidth: "0.5",
+            strokeDasharray: "2 2"
+          }
+        )),
+        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__ */ React.createElement(
+            "rect",
+            {
+              key: i,
+              x,
+              y,
+              width: barW,
+              height: barH,
+              rx: 3,
+              fill: accentColor,
+              opacity: 0.85
+            }
+          );
+        })
+      )),
+      /* @__PURE__ */ React.createElement(Tile, { title: "Active users", structureOpacity }, /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          viewBox: "0 0 100 100",
+          preserveAspectRatio: "none",
+          style: { width: "100%", height: "100%" }
+        },
+        /* @__PURE__ */ React.createElement(
+          "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__ */ React.createElement(
+          "line",
+          {
+            key: y,
+            x1: "0",
+            y1: y,
+            x2: "100",
+            y2: y,
+            stroke: "rgba(255,255,255,0.06)",
+            strokeWidth: "0.4",
+            strokeDasharray: "1.5 1.5"
+          }
+        )),
+        /* @__PURE__ */ React.createElement(
+          "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__ */ React.createElement(
+            "circle",
+            {
+              key: i,
+              cx: px,
+              cy: py,
+              r: 1.2,
+              fill: accentColor,
+              opacity: dotProgress
+            }
+          );
+        })
+      )),
+      /* @__PURE__ */ React.createElement(Tile, { title: "Conversion", structureOpacity }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            position: "relative"
+          }
+        },
+        /* @__PURE__ */ React.createElement("svg", { width: "180", height: "180", viewBox: "0 0 180 180" }, /* @__PURE__ */ React.createElement(
+          "circle",
+          {
+            cx: "90",
+            cy: "90",
+            r: donutR,
+            fill: "none",
+            stroke: "rgba(255,255,255,0.08)",
+            strokeWidth: "14"
+          }
+        ), /* @__PURE__ */ React.createElement(
+          "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__ */ React.createElement(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              fontSize: 36,
+              fontWeight: 700,
+              letterSpacing: "-0.02em",
+              fontFamily: MONO_FAMILY,
+              fontVariantNumeric: "tabular-nums"
+            }
+          },
+          (donutValue * 100).toFixed(1),
+          "%"
+        )
+      ))
+    )
+  );
+}
+
+export {
+  DashboardPopulate
+};

package/dist/compose/renderer.d.ts

@@ -0,0 +1 @@
+export * from "../_members/compose/CompositionRenderer.js";

package/dist/compose/renderer.js

@@ -0,0 +1,173 @@
+import {
+  resolvePrimitive
+} from "../chunk-MC5DLSEV.js";
+import "../chunk-H5LMJKZU.js";
+import "../chunk-FUWJOVVK.js";
+import "../chunk-UEI3NLNK.js";
+import "../chunk-GULDS3VE.js";
+import "../chunk-7DHP4ESU.js";
+import "../chunk-MFHXCHRI.js";
+import "../chunk-NDKERSXY.js";
+import "../chunk-P43IE4WB.js";
+import "../chunk-6QJ3V3VS.js";
+import "../chunk-JD77Y2WM.js";
+import "../chunk-EAUSEGB7.js";
+import "../chunk-WZTTZHNR.js";
+import "../chunk-DLF4WVSE.js";
+import "../chunk-U4V4FZGE.js";
+import "../chunk-AWT3P5ZN.js";
+import "../chunk-QGAWDLYX.js";
+import "../chunk-MVEE6HEC.js";
+import "../chunk-ZSZABOE5.js";
+import "../chunk-BDMTUEEZ.js";
+import "../chunk-EMGFZ3PR.js";
+import "../chunk-S3P5BFFL.js";
+import "../chunk-ZFEXATWN.js";
+import {
+  Grain,
+  Vignette
+} from "../chunk-N67PDTKQ.js";
+import "../chunk-DSNG6WLU.js";
+import "../chunk-YA3OR2KK.js";
+import "../chunk-CX2IIQ4R.js";
+import "../chunk-5I7VDCAC.js";
+import "../chunk-JF4JJAFP.js";
+import "../chunk-7PA7FGLD.js";
+import {
+  CueframeError,
+  encodeError
+} from "../chunk-37NJ27UU.js";
+import "../chunk-2ESYSVXG.js";
+
+// ../execution/compose/src/CompositionRenderer.tsx
+import React from "react";
+import { AbsoluteFill, Sequence, Img, OffthreadVideo, Audio } from "remotion";
+function throwUnknownPrimitive(primitiveId, layer) {
+  throw new Error(
+    encodeError(
+      new CueframeError(
+        "render_unknown_primitive",
+        `unknown ${layer} primitive '${primitiveId}' at the render boundary (not in the render registry)`,
+        { primitiveId, layer }
+      )
+    )
+  );
+}
+var ContentLayer = ({ scene, fps }) => {
+  const { content } = scene;
+  switch (content.type) {
+    case "image":
+      return /* @__PURE__ */ React.createElement(
+        Img,
+        {
+          src: content.src,
+          style: { width: "100%", height: "100%", objectFit: "cover" }
+        }
+      );
+    case "video":
+      return /* @__PURE__ */ React.createElement(
+        OffthreadVideo,
+        {
+          src: content.src,
+          startFrom: content.startFrom ? Math.round(content.startFrom * fps) : void 0,
+          style: { width: "100%", height: "100%", objectFit: "cover" }
+        }
+      );
+    case "color":
+      return /* @__PURE__ */ React.createElement(AbsoluteFill, { style: { backgroundColor: content.value } });
+    default:
+      return null;
+  }
+};
+var EffectsLayer = ({ scene }) => {
+  if (!scene.effects?.length) return null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, scene.effects.map((effect, i) => {
+    const meta = resolvePrimitive(effect.type);
+    if (!meta) throwUnknownPrimitive(effect.type, "effect");
+    const { type: _type, ...props } = effect;
+    const Component = meta.component;
+    return /* @__PURE__ */ React.createElement(Component, { key: `${effect.type}-${i}`, ...props });
+  }));
+};
+var TextLayer = ({ scene, fps, sceneDurationInFrames, tokens }) => {
+  if (!scene.text?.length) return null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, scene.text.map((textConfig, i) => {
+    const meta = resolvePrimitive(textConfig.type);
+    if (!meta) throwUnknownPrimitive(textConfig.type, "text");
+    const Component = meta.component;
+    const enterFrame = textConfig.enterAt != null ? Math.round(textConfig.enterAt * fps) : 0;
+    const exitFrame = textConfig.exitAt != null ? Math.round(textConfig.exitAt * fps) : sceneDurationInFrames;
+    const textDuration = exitFrame - enterFrame;
+    if (textDuration <= 0) return null;
+    const { type: _type, enterAt: _enterAt, exitAt: _exitAt, effect: _effect, ...textProps } = textConfig;
+    return /* @__PURE__ */ React.createElement(Sequence, { key: `text-${i}`, from: enterFrame, durationInFrames: textDuration }, /* @__PURE__ */ React.createElement(AbsoluteFill, null, /* @__PURE__ */ React.createElement(
+      Component,
+      {
+        ...textProps,
+        tokens: {
+          color: tokens.text,
+          fontFamily: tokens.headingFont,
+          fontSize: tokens.fontSize
+        }
+      }
+    )));
+  }));
+};
+var LayoutLayer = ({ scene, children }) => {
+  if (!scene.layout) return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  const meta = resolvePrimitive(scene.layout.type);
+  if (!meta) throwUnknownPrimitive(scene.layout.type, "layout");
+  const { type: _type, ...layoutProps } = scene.layout;
+  const Component = meta.component;
+  return /* @__PURE__ */ React.createElement(Component, { ...layoutProps }, children);
+};
+var SceneRenderer = ({ sceneData, fps, tokens }) => {
+  const { scene, durationInFrames } = sceneData;
+  return /* @__PURE__ */ React.createElement(AbsoluteFill, null, /* @__PURE__ */ React.createElement(LayoutLayer, { scene }, /* @__PURE__ */ React.createElement(ContentLayer, { scene, fps })), /* @__PURE__ */ React.createElement(EffectsLayer, { scene }), /* @__PURE__ */ React.createElement(
+    TextLayer,
+    {
+      scene,
+      fps,
+      sceneDurationInFrames: durationInFrames,
+      tokens
+    }
+  ));
+};
+var GlobalEffectsLayer = ({ input }) => {
+  if (!input.global) return null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, input.global.grain != null && input.global.grain > 0 && /* @__PURE__ */ React.createElement(Grain, { intensity: input.global.grain }), input.global.vignette != null && input.global.vignette > 0 && /* @__PURE__ */ React.createElement(Vignette, { intensity: input.global.vignette }));
+};
+var AudioLayer = ({ input }) => {
+  if (!input.audio?.length) return null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, input.audio.map((track, i) => {
+    const startFrame = track.startAt ? Math.round(track.startAt * input.fps) : 0;
+    return /* @__PURE__ */ React.createElement(Sequence, { key: `audio-${i}`, from: startFrame }, /* @__PURE__ */ React.createElement(
+      Audio,
+      {
+        src: track.src,
+        volume: track.volume ?? 1
+      }
+    ));
+  }));
+};
+var CompositionRenderer = ({ input }) => {
+  return /* @__PURE__ */ React.createElement(AbsoluteFill, { style: { backgroundColor: input.tokens.background } }, input.scenes.map((sceneData) => /* @__PURE__ */ React.createElement(
+    Sequence,
+    {
+      key: sceneData.scene.id,
+      from: sceneData.startFrame,
+      durationInFrames: sceneData.durationInFrames
+    },
+    /* @__PURE__ */ React.createElement(
+      SceneRenderer,
+      {
+        sceneData,
+        fps: input.fps,
+        tokens: input.tokens
+      }
+    )
+  )), /* @__PURE__ */ React.createElement(GlobalEffectsLayer, { input }), /* @__PURE__ */ React.createElement(AudioLayer, { input }));
+};
+export {
+  CompositionRenderer
+};

package/dist/compose.d.ts

@@ -0,0 +1 @@
+export * from "./_members/compose/index.js";

package/dist/compose.js

@@ -0,0 +1,76 @@
+import {
+  resolveTokens,
+  sceneToRenderInput
+} from "./chunk-G3PBH53P.js";
+import {
+  allCatalogs,
+  getPrimitiveSubtext,
+  getPrimitiveText,
+  inflatePrimitiveProps,
+  isRegisteredTransition,
+  listPrimitives,
+  registerPrimitiveOverride,
+  resetPrimitiveOverrides,
+  resolvePrimitive,
+  resolveTransitionPresentation
+} from "./chunk-MC5DLSEV.js";
+import "./chunk-H5LMJKZU.js";
+import "./chunk-FUWJOVVK.js";
+import "./chunk-UEI3NLNK.js";
+import "./chunk-GULDS3VE.js";
+import "./chunk-7DHP4ESU.js";
+import "./chunk-MFHXCHRI.js";
+import "./chunk-NDKERSXY.js";
+import "./chunk-P43IE4WB.js";
+import "./chunk-6QJ3V3VS.js";
+import "./chunk-JD77Y2WM.js";
+import "./chunk-EAUSEGB7.js";
+import "./chunk-WZTTZHNR.js";
+import "./chunk-DLF4WVSE.js";
+import "./chunk-U4V4FZGE.js";
+import "./chunk-AWT3P5ZN.js";
+import "./chunk-QGAWDLYX.js";
+import "./chunk-MVEE6HEC.js";
+import "./chunk-ZSZABOE5.js";
+import "./chunk-BDMTUEEZ.js";
+import "./chunk-EMGFZ3PR.js";
+import "./chunk-S3P5BFFL.js";
+import "./chunk-ZFEXATWN.js";
+import "./chunk-N67PDTKQ.js";
+import "./chunk-DSNG6WLU.js";
+import "./chunk-YA3OR2KK.js";
+import "./chunk-CX2IIQ4R.js";
+import {
+  getPrimitiveSubtextParam,
+  getPrimitiveTextParam,
+  listPrimitivesByCategory
+} from "./chunk-5I7VDCAC.js";
+import "./chunk-JF4JJAFP.js";
+import "./chunk-6CMVBTTP.js";
+import "./chunk-QH3YI3ND.js";
+import "./chunk-TWQOKKAF.js";
+import "./chunk-JRQVPFLF.js";
+import "./chunk-JMURQODM.js";
+import "./chunk-7PA7FGLD.js";
+import "./chunk-KYRDKK2D.js";
+import "./chunk-DENF4TPI.js";
+import "./chunk-WREYUH2E.js";
+import "./chunk-37NJ27UU.js";
+import "./chunk-2ESYSVXG.js";
+export {
+  allCatalogs,
+  getPrimitiveSubtext,
+  getPrimitiveSubtextParam,
+  getPrimitiveText,
+  getPrimitiveTextParam,
+  inflatePrimitiveProps,
+  isRegisteredTransition,
+  listPrimitives,
+  listPrimitivesByCategory,
+  registerPrimitiveOverride,
+  resetPrimitiveOverrides,
+  resolvePrimitive,
+  resolveTokens,
+  resolveTransitionPresentation,
+  sceneToRenderInput
+};

package/dist/composition/audio.d.ts

@@ -0,0 +1 @@
+export * from "../_members/composition/audio/index.js";