@editframe/create 0.15.0-beta.7 → 0.15.0-beta.9

package/dist/templates/card-poetry/package.json

@@ -11,9 +11,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@editframe/cli": "0.15.0-beta.7",
-    "@editframe/elements": "0.15.0-beta.7",
-    "@editframe/vite-plugin": "0.15.0-beta.7",
+    "@editframe/cli": "0.15.0-beta.9",
+    "@editframe/elements": "0.15.0-beta.9",
+    "@editframe/vite-plugin": "0.15.0-beta.9",
     "tailwindcss": "^3.4.3",
     "vite": "^5.2.11",
     "vite-plugin-singlefile": "^2.0.1"

package/dist/templates/react-demo/package.json

@@ -11,9 +11,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@editframe/cli": "0.15.0-beta.7",
-    "@editframe/react": "0.15.0-beta.7",
-    "@editframe/vite-plugin": "0.15.0-beta.7",
+    "@editframe/cli": "0.15.0-beta.9",
+    "@editframe/react": "0.15.0-beta.9",
+    "@editframe/vite-plugin": "0.15.0-beta.9",
     "@vitejs/plugin-react": "^4.3.1",
     "tailwindcss": "^3.4.3",
     "vite": "^5.2.11",

package/dist/templates/simple-demo/package.json

@@ -11,9 +11,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@editframe/cli": "0.15.0-beta.7",
-    "@editframe/elements": "0.15.0-beta.7",
-    "@editframe/vite-plugin": "0.15.0-beta.7",
+    "@editframe/cli": "0.15.0-beta.9",
+    "@editframe/elements": "0.15.0-beta.9",
+    "@editframe/vite-plugin": "0.15.0-beta.9",
     "tailwindcss": "^3.4.3",
     "vite": "^5.2.11",
     "vite-plugin-singlefile": "^2.0.1"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/create",
-  "version": "0.15.0-beta.7",
+  "version": "0.15.0-beta.9",
   "description": "",
   "bin": {
     "create-editframe": "dist/index.js"

package/dist/templates/card-poetry/src/index.js

@@ -1,2 +0,0 @@
-import "@editframe/elements";
-import "@editframe/elements/styles.css";

package/dist/templates/card-poetry/src/keyframes.css

@@ -1,163 +0,0 @@
-@keyframes fadein {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes fadeout {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes disco {
-  from {
-    filter: hue-rotate(0deg);
-  }
-  to {
-    filter: hue-rotate(360deg);
-  }
-}
-@keyframes slide-in-left {
-  from {
-    left: -100%;
-  }
-  to {
-    left: 0%;
-  }
-}
-@keyframes slide-in-right {
-  from {
-    transform: translateX(150%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes slide-out-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(150%);
-  }
-}
-@keyframes flip {
-  from {
-    transform: rotateY(0deg);
-  }
-  to {
-    transform: rotateY(180deg);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes bounce-in {
-  0% {
-    transform: scale(0.8);
-  }
-  80% {
-    transform: scale(1.3);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes zoom-in {
-  from {
-    transform: scale(0);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-@keyframes slide-in-left {
-  from {
-    transform: translateX(-150%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-
-@keyframes slide-up {
-  from {
-    transform: translateY(0%);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-}
-
-@keyframes jiggle {
-  0% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(5deg);
-  }
-  50% {
-    transform: rotate(-5deg);
-  }
-  75% {
-    transform: rotate(5deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
-@keyframes barrel {
-  0% {
-    transform: translate3d(0px, 0px, 0px) rotate3d(1, 0, 0, 0deg);
-  }
-  10% {
-    transform: translate3d(30px, 10px, -30px) rotate3d(1, 0, 0, 36deg);
-  }
-  20% {
-    transform: translate3d(60px, 20px, -60px) rotate3d(1, 0, 0, 72deg);
-  }
-  30% {
-    transform: translate3d(90px, 40px, -90px) rotate3d(1, 1, 0, 108deg);
-  }
-  40% {
-    transform: translate3d(120px, 60px, -120px) rotate3d(1, 1, 0, 144deg);
-  }
-  50% {
-    transform: translate3d(150px, 80px, -150px) rotate3d(1, 1, 1, 180deg);
-  }
-  60% {
-    transform: translate3d(120px, 100px, -120px) rotate3d(1, 1, 1, 216deg);
-  }
-  70% {
-    transform: translate3d(90px, 120px, -90px) rotate3d(1, 1, 1, 252deg);
-  }
-  80% {
-    transform: translate3d(60px, 140px, -60px) rotate3d(1, 1, 0, 288deg);
-  }
-  90% {
-    transform: translate3d(30px, 160px, -30px) rotate3d(1, 0, 0, 324deg);
-  }
-  100% {
-    transform: translate3d(0px, 180px, 0px) rotate3d(1, 0, 0, 360deg);
-  }
-}

package/dist/templates/card-poetry/src/styles.css

@@ -1,30 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@keyframes slide-up {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/dist/templates/react-demo/src/Video.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import { Timegroup, Audio, Image, useTimingInfo } from "@editframe/react";
-
-interface CardInfo {
-  title: string;
-  id: string;
-}
-
-const cards: CardInfo[] = [
-  {
-    title: "9 Of Spades",
-    id: "card-9-spades",
-  },
-  {
-    title: "King of Clubs",
-    id: "card-king-clubs",
-  },
-  {
-    title: "Queen of Spades",
-    id: "card-queen-spades",
-  },
-  {
-    title: "The Joker",
-    id: "card-joker",
-  },
-];
-
-const CardSegment = ({ title, id }: CardInfo) => {
-  const { ownCurrentTimeMs, durationMs, percentComplete, ref } =
-    useTimingInfo();
-
-  return (
-    <Timegroup mode="contain" ref={ref}>
-      <div className="absolute flex flex-col items-center justify-center z-10">
-        <h1 className="text-4xl p-4">{title}</h1>
-        <Audio id={id} src={`/assets/cards/${id}.mp3`} />
-        <Image src={`/assets/cards/${id}.png`} className="w-1/4" />
-        <code>
-          {(ownCurrentTimeMs / 1000).toFixed(2)}s /{" "}
-          {(durationMs / 1000).toFixed(2)}s
-        </code>
-        <progress max="1" value={percentComplete} className="h-[10px]" />
-      </div>
-      <Image
-        src={`/assets/cards/${id}.png`}
-        className="absolute z-0 blur-lg opacity-20 "
-      />
-    </Timegroup>
-  );
-};
-
-export const Video = () => {
-  return (
-    <Timegroup
-      className="w-[500px] h-[500px] bg-slate-200 flex items-center justify-center relative overflow-hidden"
-      mode="sequence"
-    >
-      {cards.map((card) => (
-        <CardSegment key={card.id} {...card} />
-      ))}
-    </Timegroup>
-  );
-};

package/dist/templates/react-demo/src/main.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { Video } from "./Video";
-import "@editframe/elements/styles.css";
-
-const root = document.getElementById("root");
-if (!root) {
-  throw new Error("Root element not found");
-}
-
-ReactDOM.createRoot(root).render(<Video />);

package/dist/templates/react-demo/src/styles.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/dist/templates/simple-demo/src/index.js

@@ -1,2 +0,0 @@
-import "@editframe/elements";
-import "@editframe/elements/styles.css";

package/dist/templates/simple-demo/src/styles.css

@@ -1,30 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@keyframes slide-up {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}