@effing/create 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effing/create",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Create a new Effing project",
   "type": "module",
   "bin": "./dist/index.js",
@@ -10,7 +10,8 @@
   ],
   "devDependencies": {
     "tsup": "^8.0.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
   },
   "engines": {
     "node": ">=22"
@@ -28,6 +29,8 @@
   "scripts": {
     "prebuild": "node scripts/copy-template.js",
     "build": "tsup",
+    "test": "vitest run --exclude '**/*.integration.test.ts' --passWithNoTests",
+    "test:integration": "vitest run integration",
     "typecheck": "tsc --noEmit"
   }
 }

package/template/app/routes/pan.$annieId.tsx

@@ -55,7 +55,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 export default function AnniePreviewPage() {
   const { annieId, annieUrl, width, height } = useLoaderData<typeof loader>();
 
-  const scaledResolution = { width: Math.round((540 * width) / height), height: 540 };
+  const scaledResolution = {
+    width: Math.round((540 * width) / height),
+    height: 540,
+  };
 
   return (
     <div style={styles.pageContainer}>
@@ -64,7 +67,7 @@ export default function AnniePreviewPage() {
       <AnniePlayer
         src={annieUrl}
         height={scaledResolution.height}
-        // defaultWidth={scaledResolution.width}
+        defaultWidth={scaledResolution.width}
         autoLoad={true}
         autoPlay={true}
         fps={30}

package/template/app/routes/pff.$effieId.tsx

@@ -26,9 +26,9 @@ import type { Route } from "./+types/pff.$effieId";
 // ============ Constants ============
 
 const RESOLUTIONS = [
-  { w: 1080, h: 1080 },
-  { w: 1080, h: 1350 },
-  { w: 1080, h: 1920 },
+  { width: 1080, height: 1080, label: "1:1" },
+  { width: 1080, height: 1350, label: "4:5" },
+  { width: 1080, height: 1920, label: "9:16" },
 ] as const;
 
 const RENDER_SCALES = [
@@ -289,9 +289,15 @@ export default function EffiePreviewPage() {
   const resolveSource = createEffieSourceResolver(effie.sources);
 
   // Compute scaled resolution for preview (540px height for cover)
-  const coverResolution = { width: Math.round((540 * width) / height), height: 540 };
+  const coverResolution = {
+    width: Math.round((540 * width) / height),
+    height: 540,
+  };
   // Scaled resolution for background/segment previews (270px width)
-  const previewResolution = { width: 270, height: Math.round((270 * height) / width) };
+  const previewResolution = {
+    width: 270,
+    height: Math.round((270 * height) / width),
+  };
 
   const isLoading = navigation.state === "loading";
   const isRendering =
@@ -353,6 +359,9 @@ export default function EffiePreviewPage() {
           height: 6,
           backgroundColor: "#E5E7EB",
           opacity: showProgressBar ? 1 : 0,
+          position: "sticky",
+          top: 0,
+          zIndex: 100,
         }}
       >
         <div
@@ -377,13 +386,24 @@ export default function EffiePreviewPage() {
         <div>
           <h1 style={{ margin: 0 }}>Effie Preview: {effieId}</h1>
           <p style={{ color: "#666" }}>
-            Resolution: {width}x{height} |{" "}
-            {RESOLUTIONS.filter((r) => r.w !== width || r.h !== height).map((r, i) => (
-              <span key={`${r.w}x${r.h}`}>
-                {i > 0 && " | "}
-                <a href={`/pff/${effieId}?w=${r.w}&h=${r.h}`}>{r.w}x{r.h}</a>
-              </span>
-            ))}
+            Resolution:{" "}
+            {RESOLUTIONS.map((r, i) => {
+              const isCurrent = r.width === width && r.height === height;
+              return (
+                <span key={`${r.width}x${r.height}`}>
+                  {i > 0 && " | "}
+                  {isCurrent ? (
+                    <strong>
+                      {r.width}x{r.height} ({r.label})
+                    </strong>
+                  ) : (
+                    <a href={`/pff/${effieId}?w=${r.width}&h=${r.height}`}>
+                      {r.width}x{r.height} ({r.label})
+                    </a>
+                  )}
+                </span>
+              );
+            })}
           </p>
         </div>
 

package/template/package.json

@@ -11,14 +11,14 @@
     "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
-    "@effing/annie": "^0.1.0",
-    "@effing/annie-player": "^0.1.0",
-    "@effing/effie": "^0.1.0",
-    "@effing/effie-preview": "^0.1.0",
-    "@effing/ffs": "^0.1.0",
-    "@effing/satori": "^0.1.0",
-    "@effing/serde": "^0.1.0",
-    "@effing/tween": "^0.1.0",
+    "@effing/annie": "^0.1.1",
+    "@effing/annie-player": "^0.1.1",
+    "@effing/effie": "^0.1.1",
+    "@effing/effie-preview": "^0.1.1",
+    "@effing/ffs": "^0.1.1",
+    "@effing/satori": "^0.1.1",
+    "@effing/serde": "^0.1.1",
+    "@effing/tween": "^0.1.1",
     "@react-router/node": "^7.0.0",
     "@react-router/serve": "^7.0.0",
     "cross-env": "^7.0.3",
@@ -28,7 +28,7 @@
     "react-router": "^7.0.0",
     "sharp": "^0.33.0",
     "tiny-invariant": "^1.3.1",
-    "zod": "catalog:"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@react-router/dev": "^7.0.0",
@@ -36,12 +36,11 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "npm-run-all": "^4.1.5",
-    "typescript": "^5.7.0",
+    "typescript": "^5.9.3",
     "vite": "^6.0.0",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "engines": {
     "node": ">=22"
-  },
-  "license": "O'Saasy"
+  }
 }