@depths/waves 0.2.0 → 0.3.0

package/dist/remotion/index.mjs

@@ -1,20 +1,58 @@
 import {
+  Fill,
   WavesRenderError,
   globalRegistry,
   registerBuiltInComponents
-} from "../chunk-PKLHVWMD.mjs";
+} from "../chunk-YYS6AVTN.mjs";
 
 // src/remotion/WavesComposition.tsx
 import React from "react";
 import { Sequence } from "remotion";
-import { Fragment, jsx } from "react/jsx-runtime";
-var WavesComposition = ({ ir, registry }) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: ir.timeline.map((node) => renderComponent(node, registry)) });
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var WavesComposition = ({ ir, registry, debug }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: ir.timeline.map((node) => renderComponent(node, registry, debug, "absolute-fill")) });
 };
 var getProps = (component) => {
   return component.props ?? {};
 };
-function renderComponent(component, registry) {
+function debugColor(key) {
+  let hash = 0;
+  for (let i = 0; i < key.length; i++) hash = hash * 31 + key.charCodeAt(i) | 0;
+  const hue = Math.abs(hash) % 360;
+  return `hsl(${hue} 90% 55%)`;
+}
+function DebugWrap(props) {
+  const { enabled, showLabel, id, type, children } = props;
+  if (!enabled) return /* @__PURE__ */ jsx(Fragment, { children });
+  const color = debugColor(`${type}:${id}`);
+  const label = `${type} (${id})`;
+  return /* @__PURE__ */ jsxs(Fill, { style: { outline: `2px solid ${color}`, outlineOffset: -2 }, children: [
+    children,
+    showLabel ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          padding: "2px 6px",
+          fontSize: 12,
+          fontWeight: 800,
+          color: "#000",
+          backgroundColor: color,
+          borderBottomRightRadius: 6,
+          pointerEvents: "none",
+          maxWidth: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: label
+      }
+    ) : null
+  ] });
+}
+function renderComponent(component, registry, debug, sequenceLayout) {
   const registration = registry.get(component.type);
   if (!registration) {
     throw new WavesRenderError("Unknown component type", { type: component.type });
@@ -30,20 +68,23 @@ function renderComponent(component, registry) {
   if (!parsedProps || typeof parsedProps !== "object") {
     throw new WavesRenderError("Component props must be an object", { type: component.type });
   }
-  const children = component.children?.length ? component.children.map((c) => renderComponent(c, registry)) : null;
+  const children = component.children?.length ? component.children.map((c) => renderComponent(c, registry, debug, "none")) : null;
+  const debugEnabled = Boolean(debug?.bounds);
+  const showLabel = Boolean(debug?.labels);
   return /* @__PURE__ */ jsx(
     Sequence,
     {
       from: component.timing.from,
       durationInFrames: component.timing.durationInFrames,
-      children: React.createElement(
+      layout: sequenceLayout,
+      children: /* @__PURE__ */ jsx(DebugWrap, { enabled: debugEnabled, showLabel, id: component.id, type: component.type, children: React.createElement(
         registration.component,
         {
           ...parsedProps,
           __wavesDurationInFrames: component.timing.durationInFrames
         },
         children
-      )
+      ) })
     },
     component.id
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depths/waves",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Type-safe video generation engine for converting JSON IR to rendered videos using Remotion",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",