@muskanmeet/invoicing-design-system 0.1.0

package/.local/skills/artifacts/artifacts/slides/files/src/index.css

@@ -0,0 +1,48 @@
+@import "tailwindcss";
+
+@theme inline {
+  --color-primary: var(--slide-primary);
+  --color-accent: var(--slide-accent);
+  --color-bg: var(--slide-bg);
+  --color-text: var(--slide-text);
+  --color-muted: var(--slide-muted);
+  --font-display: var(--font-display-family);
+  --font-body: var(--font-body-family);
+}
+
+:root {
+  /* Replace these with brand colors */
+  --slide-primary: #4f46e5;
+  --slide-accent: #06b6d4;
+  --slide-bg: #f8fafc;
+  --slide-text: #0f172a;
+  --slide-muted: #64748b;
+  --font-display-family: "Inter", system-ui, sans-serif;
+  --font-body-family: "Inter", system-ui, sans-serif;
+  color-scheme: light;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background: var(--slide-bg);
+  color: var(--slide-text);
+}
+
+.slide {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.slide-viewer {
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}

package/.local/skills/artifacts/artifacts/slides/files/src/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Router } from "wouter";
+
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <Router base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
+      <App />
+    </Router>
+  </StrictMode>,
+);

package/.local/skills/artifacts/artifacts/slides/files/src/slideLoader.ts

@@ -0,0 +1,51 @@
+import type { ComponentType } from "react";
+
+import manifestJson from "@/data/slides-manifest.json";
+import { parseSlidesManifest, type SlideEntry } from "@/data/slidesManifestSchema";
+
+export interface LoadedSlide extends SlideEntry {
+  Component: ComponentType;
+}
+
+const slideModules: Record<string, { default: ComponentType }> = import.meta.glob(
+  "./pages/slides/*.tsx",
+  { eager: true },
+);
+
+function loadManifestSlides(): SlideEntry[] {
+  try {
+    return parseSlidesManifest(manifestJson);
+  } catch (error) {
+    const reason = error instanceof Error ? error.message : "unknown error";
+    throw new Error(
+      `Invalid slide manifest. Run "pnpm run validate-slides" for details. ${reason}`,
+    );
+  }
+}
+
+const manifestSlides = loadManifestSlides();
+
+export const slides: LoadedSlide[] = [...manifestSlides]
+  .sort((a, b) => a.position - b.position)
+  .map((entry) => {
+    const filename = entry.filepath.split("/").pop();
+    if (!filename) {
+      throw new Error(`Slide "${entry.title}" has an invalid filepath.`);
+    }
+
+    const key = `./pages/slides/${filename}`;
+    const mod = slideModules[key];
+
+    if (!mod) {
+      const available = Object.keys(slideModules).join(", ");
+      throw new Error(
+        `Slide "${entry.title}" references missing file: ${entry.filepath}. ` +
+          `Available modules: ${available}`,
+      );
+    }
+
+    return {
+      ...entry,
+      Component: mod.default,
+    };
+  });

package/.local/skills/artifacts/artifacts/slides/files/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "build", "dist", "**/*.test.ts"],
+  "compilerOptions": {
+    "noEmit": true,
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "moduleResolution": "bundler",
+    "types": ["node", "vite/client"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/.local/skills/artifacts/artifacts/slides/files/vite.config.ts

@@ -0,0 +1,74 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import path from "path";
+import runtimeErrorOverlay from "@replit/vite-plugin-runtime-error-modal";
+
+const rawPort = process.env.PORT;
+
+if (!rawPort) {
+  throw new Error(
+    "PORT environment variable is required but was not provided.",
+  );
+}
+
+const port = Number(rawPort);
+
+if (Number.isNaN(port) || port <= 0) {
+  throw new Error(`Invalid PORT value: "${rawPort}"`);
+}
+
+const basePath = process.env.BASE_PATH;
+
+if (!basePath) {
+  throw new Error(
+    "BASE_PATH environment variable is required but was not provided.",
+  );
+}
+
+export default defineConfig({
+  base: basePath,
+  plugins: [
+    react(),
+    runtimeErrorOverlay(),
+    tailwindcss(),
+    ...(process.env.NODE_ENV !== "production" &&
+    process.env.REPL_ID !== undefined
+      ? [
+          await import("@replit/vite-plugin-cartographer").then((m) =>
+            m.cartographer({
+              root: path.resolve(import.meta.dirname, ".."),
+            }),
+          ),
+          await import("@replit/vite-plugin-dev-banner").then((m) =>
+            m.devBanner(),
+          ),
+        ]
+      : []),
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(import.meta.dirname, "src"),
+      "@assets": path.resolve(import.meta.dirname, "..", "..", "attached_assets"),
+    },
+  },
+  root: path.resolve(import.meta.dirname),
+  build: {
+    outDir: path.resolve(import.meta.dirname, "dist/public"),
+    emptyOutDir: true,
+  },
+  server: {
+    port,
+    strictPort: true,
+    host: "0.0.0.0",
+    allowedHosts: true,
+    fs: {
+      strict: true,
+    },
+  },
+  preview: {
+    port,
+    host: "0.0.0.0",
+    allowedHosts: true,
+  },
+});

package/.local/skills/artifacts/artifacts/video-js/artifact.yaml

@@ -0,0 +1,38 @@
+name: video-js
+description: "Replit Animation app"
+kind: video
+
+access:
+  type: stack
+  name: PNPM_WORKSPACE
+
+service_configs:
+  - name: web
+    development:
+      run: pnpm --filter @workspace/__SLUG__ run dev
+    production:
+      serve: static
+      build:
+        - pnpm
+        - --filter
+        - '@workspace/__SLUG__'
+        - run
+        - build
+      publicDir: artifacts/__SLUG__/dist/public
+      rewrites:
+        - from: "/*"
+          to: /index.html
+
+initial_open_files:
+  - index.html
+  - src/main.tsx
+  - src/components/video/VideoTemplate.tsx
+  - src/lib/video/hooks.ts
+  - src/lib/video/index.ts
+  - src/lib/video/animations.ts
+  - src/index.css
+
+additional_skills:
+  - media-generation
+  - references/first_build.md
+  - references/scene_selectors.md

package/.local/skills/artifacts/artifacts/video-js/files/index.html.template

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+    <title>__REPLIT_ARTIFACT_TITLE__</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <meta property="og:title" content="__REPLIT_ARTIFACT_TITLE__" />
+    <meta property="og:description" content="An animated video built with Replit." />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="https://replit.com/public/images/opengraph.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@replit" />
+    <meta name="twitter:title" content="__REPLIT_ARTIFACT_TITLE__" />
+    <meta name="twitter:description" content="An animated video built with Replit." />
+    <meta name="twitter:image" content="https://replit.com/public/images/opengraph.png" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/.local/skills/artifacts/artifacts/video-js/files/package.json.template

@@ -0,0 +1,36 @@
+{
+  "name": "__REPLIT_ARTIFACT_PACKAGE_NAME__",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --config vite.config.ts --host 0.0.0.0",
+    "build": "vite build --config vite.config.ts",
+    "serve": "vite preview --config vite.config.ts --host 0.0.0.0",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "devDependencies": {
+    "@react-spring/web": "^10.0.3",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
+    "@replit/vite-plugin-cartographer": "catalog:",
+    "@replit/vite-plugin-dev-banner": "catalog:",
+    "@replit/vite-plugin-runtime-error-modal": "catalog:",
+    "@tailwindcss/vite": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "clsx": "catalog:",
+    "framer-motion": "catalog:",
+    "gsap": "^3.14.2",
+    "lottie-react": "^2.4.1",
+    "lucide-react": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tailwind-merge": "catalog:",
+    "tailwindcss": "catalog:",
+    "three": "^0.182.0",
+    "vite": "catalog:"
+  }
+}

package/.local/skills/artifacts/artifacts/video-js/files/public/favicon.svg

@@ -0,0 +1,3 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="180" height="180" rx="36" fill="#FF3C00"/>
+</svg>

package/.local/skills/artifacts/artifacts/video-js/files/scripts/validate-recording.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+# Validates that the video recording lifecycle hooks are properly wired up.
+# Exit 0 = valid, Exit 1 = missing hooks.
+
+ARTIFACT_DIR="$(dirname "$0")/.."
+SRC_DIR="$ARTIFACT_DIR/src"
+
+errors=0
+
+# Check that useVideoPlayer is imported somewhere in components/
+if ! grep -rq "useVideoPlayer" "$SRC_DIR/components/"; then
+  echo "ERROR: No component imports useVideoPlayer from @/lib/video."
+  echo "  VideoTemplate must use: const { currentScene } = useVideoPlayer({ durations: SCENE_DURATIONS });"
+  echo "  Without this, video export will not work correctly."
+  errors=$((errors + 1))
+fi
+
+# Check that hooks.ts still has the actual startRecording/stopRecording calls (not just the type declaration)
+if ! grep -Fq 'window.startRecording?.()' "$SRC_DIR/lib/video/hooks.ts" 2>/dev/null; then
+  echo "ERROR: src/lib/video/hooks.ts is missing the window.startRecording?.() call."
+  echo "  This file should not be modified. Restore it from the template."
+  errors=$((errors + 1))
+fi
+
+if ! grep -Fq 'window.stopRecording?.()' "$SRC_DIR/lib/video/hooks.ts" 2>/dev/null; then
+  echo "ERROR: src/lib/video/hooks.ts is missing the window.stopRecording?.() call."
+  echo "  This file should not be modified. Restore it from the template."
+  errors=$((errors + 1))
+fi
+
+if [ $errors -gt 0 ]; then
+  echo ""
+  echo "Found $errors recording lifecycle error(s). Video export will fail without these fixes."
+  exit 1
+fi
+
+echo "Recording lifecycle validation passed."
+exit 0

package/.local/skills/artifacts/artifacts/video-js/files/src/App.tsx

@@ -0,0 +1,5 @@
+import VideoTemplate from "@/components/video/VideoTemplate";
+
+export default function App() {
+  return <VideoTemplate />;
+}

package/.local/skills/artifacts/artifacts/video-js/files/src/components/video/ReplitLoadingScene.tsx

@@ -0,0 +1,105 @@
+// Placeholder loading scene - replace with your video content
+
+import { motion } from 'framer-motion';
+
+export function ReplitLoadingScene() {
+  return (
+    <motion.div
+      className="absolute inset-0 flex flex-col items-center justify-center bg-[#0D101E]"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      <motion.div
+        className="flex flex-col items-center gap-8"
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ delay: 0.2, duration: 0.6, ease: "easeOut" }}
+      >
+        <motion.div
+          animate={{
+            scale: [1, 1.05, 1],
+            opacity: [1, 0.8, 1]
+          }}
+          transition={{
+            duration: 2,
+            repeat: Infinity,
+            ease: "easeInOut"
+          }}
+        >
+          <ReplitLogo size={120} />
+        </motion.div>
+
+        <motion.div
+          className="flex items-center gap-2"
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.5, duration: 0.5 }}
+        >
+          <LoadingDots />
+        </motion.div>
+
+        <motion.p
+          className="text-white/40 text-sm font-medium tracking-wide"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.8, duration: 0.5 }}
+        >
+          Building your video...
+        </motion.p>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+function ReplitLogo({ size = 64, className = '' }: { size?: number; className?: string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M7 5.5C7 4.67157 7.67157 4 8.5 4H15.5C16.3284 4 17 4.67157 17 5.5V12H8.5C7.67157 12 7 11.3284 7 10.5V5.5Z"
+        fill="#F26207"
+      />
+      <path
+        d="M17 12H25.5C26.3284 12 27 12.6716 27 13.5V18.5C27 19.3284 26.3284 20 25.5 20H17V12Z"
+        fill="#F26207"
+      />
+      <path
+        d="M7 21.5C7 20.6716 7.67157 20 8.5 20H17V28H8.5C7.67157 28 7 27.3284 7 26.5V21.5Z"
+        fill="#F26207"
+      />
+    </svg>
+  );
+}
+
+function LoadingDots() {
+  return (
+    <div className="flex items-center gap-1.5">
+      {[0, 1, 2].map((i) => (
+        <motion.div
+          key={i}
+          className="w-2 h-2 rounded-full bg-[#F26207]"
+          animate={{
+            scale: [1, 1.3, 1],
+            opacity: [0.5, 1, 0.5],
+          }}
+          transition={{
+            duration: 1,
+            repeat: Infinity,
+            delay: i * 0.2,
+            ease: "easeInOut",
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default ReplitLoadingScene;

package/.local/skills/artifacts/artifacts/video-js/files/src/components/video/VideoTemplate.tsx

@@ -0,0 +1,30 @@
+// Video Template - Replace ReplitLoadingScene with your scenes
+
+import { AnimatePresence } from 'framer-motion';
+import { useVideoPlayer } from '@/lib/video';
+import { ReplitLoadingScene } from './ReplitLoadingScene';
+
+const SCENE_DURATIONS = {
+  loading: 99999999,
+};
+
+export default function VideoTemplate() {
+  const { currentScene } = useVideoPlayer({
+    durations: SCENE_DURATIONS,
+  });
+
+  return (
+    <div
+      className="w-full h-screen overflow-hidden relative"
+      style={{ backgroundColor: 'var(--color-bg-light)' }}
+    >
+      {/* mode="wait" = sequential, "sync" = simultaneous, "popLayout" = new snaps in while old animates out */}
+      <AnimatePresence>
+        {/* Replace this with your scenes */}
+        {currentScene === 0 && (
+          <ReplitLoadingScene key="loading" />
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/.local/skills/artifacts/artifacts/video-js/files/src/components/video/index.ts

@@ -0,0 +1 @@
+export { ReplitLoadingScene } from './ReplitLoadingScene';

package/.local/skills/artifacts/artifacts/video-js/files/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/.local/skills/artifacts/artifacts/video-js/files/src/index.css

@@ -0,0 +1,50 @@
+@import "tailwindcss";
+
+/* REPLACE THESE -- define your own palette and fonts for each video */
+:root {
+  --color-primary: #000000;
+  --color-secondary: #6B7280;
+  --color-accent: #3B82F6;
+
+  --color-bg-light: #FFFFFF;
+  --color-bg-dark: #0F172A;
+  --color-bg-muted: #F8FAFC;
+
+  --color-text-primary: #111827;
+  --color-text-secondary: #6B7280;
+  --color-text-muted: #9CA3AF;
+  --color-text-inverse: #FFFFFF;
+
+  --color-success: #10B981;
+  --color-warning: #F59E0B;
+  --color-error: #EF4444;
+
+  --font-display: 'Space Grotesk', sans-serif;
+  --font-body: 'DM Sans', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+@theme inline {
+  --color-primary: var(--color-primary);
+  --color-secondary: var(--color-secondary);
+  --color-accent: var(--color-accent);
+  --color-bg-light: var(--color-bg-light);
+  --color-bg-dark: var(--color-bg-dark);
+  --color-bg-muted: var(--color-bg-muted);
+  --color-text-primary: var(--color-text-primary);
+  --color-text-secondary: var(--color-text-secondary);
+  --color-text-muted: var(--color-text-muted);
+  --color-text-inverse: var(--color-text-inverse);
+  --color-success: var(--color-success);
+  --color-warning: var(--color-warning);
+  --color-error: var(--color-error);
+  --font-display: var(--font-display);
+  --font-body: var(--font-body);
+  --font-mono: var(--font-mono);
+}
+
+body {
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/.local/skills/artifacts/artifacts/video-js/files/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}