@it-compiles/anima 0.1.1 → 0.1.3

package/dist/react.js

@@ -1391,15 +1391,15 @@ function usePresence(present) {
     prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
   }, [state]);
   useLayoutEffect2(() => {
-    const styles = stylesRef.current;
+    const styles2 = stylesRef.current;
     const wasPresent = prevPresentRef.current;
     const hasPresentChanged = wasPresent !== present;
     if (hasPresentChanged) {
       const prevAnimationName = prevAnimationNameRef.current;
-      const currentAnimationName = getAnimationName(styles);
+      const currentAnimationName = getAnimationName(styles2);
       if (present) {
         send("MOUNT");
-      } else if (currentAnimationName === "none" || styles?.display === "none") {
+      } else if (currentAnimationName === "none" || styles2?.display === "none") {
         send("UNMOUNT");
       } else {
         const isAnimating = prevAnimationName !== currentAnimationName;
@@ -1458,8 +1458,8 @@ function usePresence(present) {
     }, [])
   };
 }
-function getAnimationName(styles) {
-  return styles?.animationName || "none";
+function getAnimationName(styles2) {
+  return styles2?.animationName || "none";
 }
 function getElementRef(element) {
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
@@ -1782,20 +1782,20 @@ var stylesheetSingleton = function() {
 };
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
-  return function(styles, isDynamic) {
+  return function(styles2, isDynamic) {
     React.useEffect(function() {
-      sheet.add(styles);
+      sheet.add(styles2);
       return function() {
         sheet.remove();
       };
-    }, [styles && isDynamic]);
+    }, [styles2 && isDynamic]);
   };
 };
 var styleSingleton = function() {
   var useStyle = styleHookSingleton();
   var Sheet = function(_a) {
-    var styles = _a.styles, dynamic = _a.dynamic;
-    useStyle(styles, dynamic);
+    var styles2 = _a.styles, dynamic = _a.dynamic;
+    useStyle(styles2, dynamic);
     return null;
   };
   return Sheet;
@@ -1894,11 +1894,11 @@ var elementCanBeScrolled = function(node, overflow) {
   if (!(node instanceof Element)) {
     return false;
   }
-  var styles = window.getComputedStyle(node);
+  var styles2 = window.getComputedStyle(node);
   return (
     // not-not-scrollable
-    styles[overflow] !== "hidden" && // contains scroll inside self
-    !(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === "visible")
+    styles2[overflow] !== "hidden" && // contains scroll inside self
+    !(styles2.overflowY === styles2.overflowX && !alwaysContainsScroll(node) && styles2[overflow] === "visible")
   );
 };
 var elementCouldBeVScrolled = function(node) {
@@ -2590,6 +2590,220 @@ const BITRATE_OPTIONS = [
   { label: "10 Mbps (Large)", value: 1e7 },
   { label: "20 Mbps (High Quality)", value: 2e7 }
 ];
+const styles = {
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    zIndex: 40
+  },
+  content: {
+    position: "fixed",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    backgroundColor: "#262626",
+    borderRadius: "8px",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+    border: "1px solid #404040",
+    width: "420px",
+    zIndex: 50,
+    outline: "none"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "16px",
+    borderBottom: "1px solid #404040"
+  },
+  title: {
+    fontSize: "18px",
+    fontWeight: 500,
+    color: "#fff",
+    margin: 0
+  },
+  closeButton: {
+    color: "#a3a3a3",
+    padding: "4px",
+    borderRadius: "4px",
+    border: "none",
+    background: "transparent",
+    cursor: "pointer"
+  },
+  body: {
+    padding: "16px"
+  },
+  label: {
+    display: "block",
+    fontSize: "14px",
+    color: "#d4d4d4",
+    marginBottom: "8px"
+  },
+  buttonGroup: {
+    display: "flex",
+    gap: "8px",
+    marginBottom: "16px"
+  },
+  optionButton: (selected) => ({
+    padding: "8px 16px",
+    borderRadius: "4px",
+    fontSize: "14px",
+    fontWeight: 500,
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color 0.15s",
+    backgroundColor: selected ? "#2563eb" : "#404040",
+    color: selected ? "#fff" : "#d4d4d4"
+  }),
+  select: {
+    width: "100%",
+    padding: "8px 12px",
+    backgroundColor: "#404040",
+    border: "1px solid #525252",
+    borderRadius: "4px",
+    color: "#e5e5e5",
+    fontSize: "14px",
+    outline: "none",
+    marginBottom: "16px"
+  },
+  info: {
+    fontSize: "14px",
+    color: "#a3a3a3",
+    marginBottom: "16px"
+  },
+  infoLine: {
+    margin: "4px 0"
+  },
+  primaryButton: (disabled) => ({
+    width: "100%",
+    padding: "10px 16px",
+    backgroundColor: disabled ? "#525252" : "#2563eb",
+    color: "#fff",
+    fontWeight: 500,
+    borderRadius: "4px",
+    border: "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    transition: "background-color 0.15s",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px"
+  }),
+  secondaryButton: {
+    width: "100%",
+    padding: "10px 16px",
+    backgroundColor: "#404040",
+    color: "#fff",
+    fontWeight: 500,
+    borderRadius: "4px",
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color 0.15s",
+    marginTop: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px"
+  },
+  warning: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "12px",
+    padding: "12px",
+    backgroundColor: "rgba(180, 83, 9, 0.2)",
+    border: "1px solid rgba(180, 83, 9, 0.5)",
+    borderRadius: "8px",
+    marginBottom: "16px"
+  },
+  warningIcon: {
+    color: "#f59e0b",
+    marginTop: "2px",
+    flexShrink: 0
+  },
+  warningText: {
+    fontSize: "14px",
+    color: "#fcd34d"
+  },
+  error: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "12px",
+    padding: "12px",
+    backgroundColor: "rgba(127, 29, 29, 0.3)",
+    border: "1px solid rgba(185, 28, 28, 0.5)",
+    borderRadius: "8px",
+    marginBottom: "16px"
+  },
+  errorIcon: {
+    color: "#ef4444",
+    marginTop: "2px",
+    flexShrink: 0
+  },
+  errorText: {
+    fontSize: "14px",
+    color: "#fecaca"
+  },
+  progressContainer: {
+    marginBottom: "16px"
+  },
+  progressHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: "8px"
+  },
+  progressLabel: {
+    fontSize: "14px",
+    color: "#d4d4d4"
+  },
+  progressPercent: {
+    fontSize: "14px",
+    color: "#a3a3a3"
+  },
+  progressBar: {
+    width: "100%",
+    height: "8px",
+    backgroundColor: "#404040",
+    borderRadius: "4px",
+    overflow: "hidden"
+  },
+  progressFill: (progress) => ({
+    height: "100%",
+    backgroundColor: "#3b82f6",
+    transition: "width 0.1s",
+    width: `${progress * 100}%`
+  }),
+  progressFrame: {
+    fontSize: "12px",
+    color: "#737373",
+    marginTop: "8px"
+  },
+  successContainer: {
+    textAlign: "center",
+    marginBottom: "16px"
+  },
+  successIcon: {
+    width: "48px",
+    height: "48px",
+    backgroundColor: "rgba(37, 99, 235, 0.2)",
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "0 auto 12px"
+  },
+  successTitle: {
+    color: "#fff",
+    fontWeight: 500,
+    margin: "0 0 4px"
+  },
+  successInfo: {
+    fontSize: "14px",
+    color: "#a3a3a3",
+    margin: "4px 0"
+  }
+};
 function RenderDialog({ open, onOpenChange, animation }) {
   const [state, setState] = useState("idle");
   const [fps, setFps] = useState(30);
@@ -2662,75 +2876,62 @@ function RenderDialog({ open, onOpenChange, animation }) {
   }, [state, handleCancel, onOpenChange]);
   const estimatedDuration = animation ? Math.ceil(animation.timeline.duration / 1e3 * fps) : 0;
   return /* @__PURE__ */ jsx(Root, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(Portal, { children: [
-    /* @__PURE__ */ jsx(Overlay, { className: "fixed inset-0 bg-black/60 z-40" }),
-    /* @__PURE__ */ jsxs(Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-neutral-800 rounded-lg shadow-xl border border-neutral-700 w-[420px] z-50 outline-none", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-neutral-700", children: [
-        /* @__PURE__ */ jsx(Title, { className: "text-lg font-medium text-white", children: "Render Video" }),
-        /* @__PURE__ */ jsx(Close, { asChild: true, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "text-neutral-400 hover:text-white p-1 rounded hover:bg-neutral-700",
-            "aria-label": "Close",
-            children: /* @__PURE__ */ jsx(X, { size: 18 })
-          }
-        ) })
+    /* @__PURE__ */ jsx(Overlay, { style: styles.overlay }),
+    /* @__PURE__ */ jsxs(Content, { style: styles.content, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+        /* @__PURE__ */ jsx(Title, { style: styles.title, children: "Render Video" }),
+        /* @__PURE__ */ jsx(Close, { asChild: true, children: /* @__PURE__ */ jsx("button", { style: styles.closeButton, "aria-label": "Close", children: /* @__PURE__ */ jsx(X, { size: 18 }) }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-        !webCodecsSupported && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-3 bg-amber-900/30 border border-amber-700/50 rounded-lg mb-4", children: [
-          /* @__PURE__ */ jsx(CircleAlert, { size: 18, className: "text-amber-500 mt-0.5 shrink-0" }),
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-amber-200", children: "WebCodecs is not supported in this browser. Please use Chrome, Edge, or Opera to render videos." })
+      /* @__PURE__ */ jsxs("div", { style: styles.body, children: [
+        !webCodecsSupported && /* @__PURE__ */ jsxs("div", { style: styles.warning, children: [
+          /* @__PURE__ */ jsx(CircleAlert, { size: 18, style: styles.warningIcon }),
+          /* @__PURE__ */ jsx("div", { style: styles.warningText, children: "WebCodecs is not supported in this browser. Please use Chrome, Edge, or Opera to render videos." })
         ] }),
         state === "idle" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-sm text-neutral-300 mb-2", children: "Resolution" }),
-            /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: SCALE_OPTIONS.map((option) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setScale(option.value),
-                className: `px-4 py-2 rounded text-sm font-medium transition-colors ${scale === option.value ? "bg-blue-600 text-white" : "bg-neutral-700 text-neutral-300 hover:bg-neutral-600"}`,
-                children: option.label
-              },
-              option.value
-            )) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-sm text-neutral-300 mb-2", children: "Frame Rate" }),
-            /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: FPS_OPTIONS.map((option) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => setFps(option),
-                className: `px-4 py-2 rounded text-sm font-medium transition-colors ${fps === option ? "bg-blue-600 text-white" : "bg-neutral-700 text-neutral-300 hover:bg-neutral-600"}`,
-                children: [
-                  option,
-                  " fps"
-                ]
-              },
-              option
-            )) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-sm text-neutral-300 mb-2", children: "Quality / Bitrate" }),
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                value: bitrate,
-                onChange: (e) => setBitrate(Number(e.target.value)),
-                className: "w-full px-3 py-2 bg-neutral-700 border border-neutral-600 rounded text-neutral-200 text-sm outline-none focus:border-blue-500",
-                children: BITRATE_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "text-sm text-neutral-400 mb-4", children: [
-            /* @__PURE__ */ jsxs("p", { children: [
+          /* @__PURE__ */ jsx("label", { style: styles.label, children: "Resolution" }),
+          /* @__PURE__ */ jsx("div", { style: styles.buttonGroup, children: SCALE_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setScale(option.value),
+              style: styles.optionButton(scale === option.value),
+              children: option.label
+            },
+            option.value
+          )) }),
+          /* @__PURE__ */ jsx("label", { style: styles.label, children: "Frame Rate" }),
+          /* @__PURE__ */ jsx("div", { style: styles.buttonGroup, children: FPS_OPTIONS.map((option) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setFps(option),
+              style: styles.optionButton(fps === option),
+              children: [
+                option,
+                " fps"
+              ]
+            },
+            option
+          )) }),
+          /* @__PURE__ */ jsx("label", { style: styles.label, children: "Quality / Bitrate" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: bitrate,
+              onChange: (e) => setBitrate(Number(e.target.value)),
+              style: styles.select,
+              children: BITRATE_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: styles.info, children: [
+            /* @__PURE__ */ jsxs("p", { style: styles.infoLine, children: [
               "Resolution: ",
               SCALE_OPTIONS.find((o) => o.value === scale)?.resolution
             ] }),
-            /* @__PURE__ */ jsxs("p", { children: [
+            /* @__PURE__ */ jsxs("p", { style: styles.infoLine, children: [
               "Duration: ",
               (animation?.timeline.duration ?? 0) / 1e3,
               "s"
             ] }),
-            /* @__PURE__ */ jsxs("p", { children: [
+            /* @__PURE__ */ jsxs("p", { style: styles.infoLine, children: [
               "Estimated frames: ",
               estimatedDuration
             ] })
@@ -2740,93 +2941,60 @@ function RenderDialog({ open, onOpenChange, animation }) {
             {
               onClick: handleStartRender,
               disabled: !animation || !webCodecsSupported,
-              className: "w-full py-2.5 bg-blue-600 hover:bg-blue-500 disabled:bg-neutral-600 disabled:cursor-not-allowed text-white font-medium rounded transition-colors",
+              style: styles.primaryButton(!animation || !webCodecsSupported),
               children: "Start Render"
             }
           )
         ] }),
         state === "rendering" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm text-neutral-300", children: "Rendering..." }),
-              /* @__PURE__ */ jsxs("span", { className: "text-sm text-neutral-400", children: [
+          /* @__PURE__ */ jsxs("div", { style: styles.progressContainer, children: [
+            /* @__PURE__ */ jsxs("div", { style: styles.progressHeader, children: [
+              /* @__PURE__ */ jsx("span", { style: styles.progressLabel, children: "Rendering..." }),
+              /* @__PURE__ */ jsxs("span", { style: styles.progressPercent, children: [
                 Math.round(progress * 100),
                 "%"
               ] })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "w-full h-2 bg-neutral-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "h-full bg-blue-500 transition-[width] duration-100",
-                style: { width: `${progress * 100}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("p", { className: "text-xs text-neutral-500 mt-2", children: [
+            /* @__PURE__ */ jsx("div", { style: styles.progressBar, children: /* @__PURE__ */ jsx("div", { style: styles.progressFill(progress) }) }),
+            /* @__PURE__ */ jsxs("p", { style: styles.progressFrame, children: [
               "Frame ",
               currentFrame,
               " of ",
               totalFrames
             ] })
           ] }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: handleCancel,
-              className: "w-full py-2.5 bg-neutral-700 hover:bg-neutral-600 text-white font-medium rounded transition-colors flex items-center justify-center gap-2",
-              children: [
-                /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin" }),
-                "Cancel"
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs("button", { onClick: handleCancel, style: styles.secondaryButton, children: [
+            /* @__PURE__ */ jsx(LoaderCircle, { size: 16, style: { animation: "spin 1s linear infinite" } }),
+            "Cancel"
+          ] }),
+          /* @__PURE__ */ jsx("style", { children: `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` })
         ] }),
         state === "complete" && result && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-12 h-12 bg-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-3", children: /* @__PURE__ */ jsx(Download, { size: 24, className: "text-blue-500" }) }),
-            /* @__PURE__ */ jsx("p", { className: "text-white font-medium", children: "Render Complete!" }),
-            /* @__PURE__ */ jsxs("p", { className: "text-sm text-neutral-400 mt-1", children: [
+          /* @__PURE__ */ jsxs("div", { style: styles.successContainer, children: [
+            /* @__PURE__ */ jsx("div", { style: styles.successIcon, children: /* @__PURE__ */ jsx(Download, { size: 24, style: { color: "#3b82f6" } }) }),
+            /* @__PURE__ */ jsx("p", { style: styles.successTitle, children: "Render Complete!" }),
+            /* @__PURE__ */ jsxs("p", { style: styles.successInfo, children: [
               result.frames,
               " frames rendered"
             ] }),
-            /* @__PURE__ */ jsxs("p", { className: "text-sm text-neutral-400", children: [
+            /* @__PURE__ */ jsxs("p", { style: styles.successInfo, children: [
               "File size: ",
               (result.blob.size / 1024 / 1024).toFixed(2),
               " MB"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: handleDownload,
-              className: "w-full py-2.5 bg-blue-600 hover:bg-blue-500 text-white font-medium rounded transition-colors flex items-center justify-center gap-2",
-              children: [
-                /* @__PURE__ */ jsx(Download, { size: 16 }),
-                "Download MP4"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setState("idle"),
-              className: "w-full py-2.5 mt-2 bg-neutral-700 hover:bg-neutral-600 text-white font-medium rounded transition-colors",
-              children: "Render Another"
-            }
-          )
+          /* @__PURE__ */ jsxs("button", { onClick: handleDownload, style: styles.primaryButton(false), children: [
+            /* @__PURE__ */ jsx(Download, { size: 16 }),
+            "Download MP4"
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: () => setState("idle"), style: styles.secondaryButton, children: "Render Another" })
         ] }),
         state === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-3 bg-red-900/30 border border-red-700/50 rounded-lg mb-4", children: [
-            /* @__PURE__ */ jsx(CircleAlert, { size: 18, className: "text-red-500 mt-0.5 shrink-0" }),
-            /* @__PURE__ */ jsx("div", { className: "text-sm text-red-200", children: errorMessage })
+          /* @__PURE__ */ jsxs("div", { style: styles.error, children: [
+            /* @__PURE__ */ jsx(CircleAlert, { size: 18, style: styles.errorIcon }),
+            /* @__PURE__ */ jsx("div", { style: styles.errorText, children: errorMessage })
           ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setState("idle"),
-              className: "w-full py-2.5 bg-neutral-700 hover:bg-neutral-600 text-white font-medium rounded transition-colors",
-              children: "Try Again"
-            }
-          )
+          /* @__PURE__ */ jsx("button", { onClick: () => setState("idle"), style: styles.secondaryButton, children: "Try Again" })
         ] })
       ] })
     ] })