@muskanmeet/invoicing-design-system 0.1.0

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

@@ -0,0 +1,239 @@
+// Animation presets for consistent motion language
+
+import type { Transition, Variants } from 'framer-motion';
+
+// Spring presets
+export const springs = {
+  snappy: { type: 'spring', stiffness: 400, damping: 30 } as Transition,
+  bouncy: { type: 'spring', stiffness: 300, damping: 15 } as Transition,
+  gentle: { type: 'spring', stiffness: 100, damping: 20 } as Transition,
+  stiff: { type: 'spring', stiffness: 600, damping: 40 } as Transition,
+  wobbly: { type: 'spring', stiffness: 200, damping: 10 } as Transition,
+  smooth: { type: 'spring', stiffness: 120, damping: 25 } as Transition,
+  poppy: { type: 'spring', stiffness: 500, damping: 22 } as Transition,
+} as const;
+
+// Easing presets
+export const easings = {
+  easeOut: { ease: [0.16, 1, 0.3, 1] } as Transition,
+  circOut: { ease: 'circOut' } as Transition,
+  easeInOut: { ease: [0.4, 0, 0.2, 1] } as Transition,
+  backOut: { ease: 'backOut' } as Transition,
+  expoOut: { ease: [0.16, 1, 0.3, 1] } as Transition,
+} as const;
+
+// Scene transitions for AnimatePresence
+export const sceneTransitions = {
+  fadeBlur: {
+    initial: { opacity: 0, filter: 'blur(20px)' },
+    animate: { opacity: 1, filter: 'blur(0px)' },
+    exit: { opacity: 0, filter: 'blur(20px)' },
+    transition: { duration: 0.8, ease: 'circOut' },
+  },
+  scaleFade: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 1.05, filter: 'blur(10px)' },
+    transition: { duration: 0.8, ease: 'circOut' },
+  },
+  slideLeft: {
+    initial: { opacity: 0, x: 100 },
+    animate: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: -100 },
+    transition: { duration: 0.6, ease: 'circOut' },
+  },
+  slideRight: {
+    initial: { opacity: 0, x: -100 },
+    animate: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: 100 },
+    transition: { duration: 0.6, ease: 'circOut' },
+  },
+  slideUp: {
+    initial: { opacity: 0, y: 50 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -50 },
+    transition: { duration: 0.6, ease: 'circOut' },
+  },
+  wipe: {
+    initial: { clipPath: 'inset(0 100% 0 0)' },
+    animate: { clipPath: 'inset(0 0% 0 0)' },
+    exit: { clipPath: 'inset(0 0 0 100%)' },
+    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] },
+  },
+  zoomThrough: {
+    initial: { opacity: 0, scale: 0.5 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 1.5 },
+    transition: { duration: 1, ease: 'circOut' },
+  },
+  crossDissolve: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] },
+  },
+  clipCircle: {
+    initial: { clipPath: 'circle(0% at 50% 50%)' },
+    animate: { clipPath: 'circle(100% at 50% 50%)' },
+    exit: { clipPath: 'circle(0% at 50% 50%)' },
+    transition: { duration: 1, ease: [0.4, 0, 0.2, 1] },
+  },
+  clipPolygon: {
+    initial: { clipPath: 'polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%)' },
+    animate: { clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)' },
+    exit: { clipPath: 'polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%)' },
+    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] },
+  },
+  perspectiveFlip: {
+    initial: { opacity: 0, rotateY: -90, transformPerspective: 1200 },
+    animate: { opacity: 1, rotateY: 0, transformPerspective: 1200 },
+    exit: { opacity: 0, rotateY: 90, transformPerspective: 1200 },
+    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] },
+  },
+  morphExpand: {
+    initial: { opacity: 0, scale: 0.3, borderRadius: '50%' },
+    animate: { opacity: 1, scale: 1, borderRadius: '0%' },
+    exit: { opacity: 0, scale: 2.5, filter: 'blur(30px)' },
+    transition: { duration: 1, ease: [0.16, 1, 0.3, 1] },
+  },
+  splitHorizontal: {
+    initial: { clipPath: 'inset(50% 0 50% 0)' },
+    animate: { clipPath: 'inset(0% 0 0% 0)' },
+    exit: { clipPath: 'inset(50% 0 50% 0)' },
+    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] },
+  },
+  splitVertical: {
+    initial: { clipPath: 'inset(0 50% 0 50%)' },
+    animate: { clipPath: 'inset(0 0% 0 0%)' },
+    exit: { clipPath: 'inset(0 50% 0 50%)' },
+    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] },
+  },
+  pushLeft: {
+    initial: { x: '100%' },
+    animate: { x: 0 },
+    exit: { x: '-100%' },
+    transition: { duration: 0.7, ease: [0.4, 0, 0.2, 1] },
+  },
+  pushRight: {
+    initial: { x: '-100%' },
+    animate: { x: 0 },
+    exit: { x: '100%' },
+    transition: { duration: 0.7, ease: [0.4, 0, 0.2, 1] },
+  },
+} as const;
+
+// Element animations
+export const elementAnimations = {
+  popIn: {
+    initial: { opacity: 0, scale: 0 },
+    animate: { opacity: 1, scale: 1 },
+    transition: { type: 'spring', stiffness: 300, damping: 20 },
+  },
+  fadeUp: {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.5, ease: 'circOut' },
+  },
+  fadeDown: {
+    initial: { opacity: 0, y: -20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.5, ease: 'circOut' },
+  },
+  slideInLeft: {
+    initial: { opacity: 0, x: -30 },
+    animate: { opacity: 1, x: 0 },
+    transition: { duration: 0.5, ease: 'circOut' },
+  },
+  slideInRight: {
+    initial: { opacity: 0, x: 30 },
+    animate: { opacity: 1, x: 0 },
+    transition: { duration: 0.5, ease: 'circOut' },
+  },
+  blurIn: {
+    initial: { opacity: 0, filter: 'blur(20px)' },
+    animate: { opacity: 1, filter: 'blur(0px)' },
+    transition: { duration: 0.6, ease: 'circOut' },
+  },
+  elasticScale: {
+    initial: { opacity: 0, scale: 0 },
+    animate: { opacity: 1, scale: 1 },
+    transition: { type: 'spring', stiffness: 500, damping: 15 },
+  },
+  perspectiveRotateIn: {
+    initial: { opacity: 0, rotateX: -60, transformPerspective: 1000 },
+    animate: { opacity: 1, rotateX: 0, transformPerspective: 1000 },
+    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
+  },
+  pulse: {
+    animate: {
+      scale: [1, 1.05, 1],
+      transition: { repeat: Infinity, duration: 2 },
+    },
+  },
+  float: {
+    animate: {
+      y: [0, -10, 0],
+      transition: { repeat: Infinity, duration: 3, ease: 'easeInOut' },
+    },
+  },
+} as const;
+
+// Character-level animation variants for kinetic typography
+export const charVariants: Variants = {
+  hidden: { opacity: 0, y: 40, rotateX: -40, transformPerspective: 800 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    rotateX: 0,
+    transformPerspective: 800,
+    transition: { type: 'spring', stiffness: 400, damping: 25 },
+  },
+};
+
+export const charContainerVariants: Variants = {
+  hidden: {},
+  visible: {
+    transition: { staggerChildren: 0.03, delayChildren: 0.1 },
+  },
+};
+
+// Stagger configs
+export const staggerConfigs = {
+  fast: { staggerChildren: 0.05, delayChildren: 0 },
+  medium: { staggerChildren: 0.1, delayChildren: 0.1 },
+  slow: { staggerChildren: 0.2, delayChildren: 0.2 },
+  reverse: { staggerChildren: 0.1, staggerDirection: -1 },
+  charFast: { staggerChildren: 0.02, delayChildren: 0 },
+  charMedium: { staggerChildren: 0.04, delayChildren: 0.1 },
+} as const;
+
+// Common variants
+export const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: staggerConfigs.medium,
+  },
+};
+
+export const itemVariants: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: 'circOut' },
+  },
+};
+
+// Utilities
+export function staggerDelay(index: number, baseDelay: number = 0.1): number {
+  return index * baseDelay;
+}
+
+export function customSpring(stiffness: number, damping: number): Transition {
+  return { type: 'spring', stiffness, damping };
+}
+
+export function withDelay(transition: Transition, delay: number): Transition {
+  return { ...transition, delay };
+}

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

@@ -0,0 +1,104 @@
+// Video player hook - handles recording lifecycle, scene advancement, and looping
+
+import { useState, useEffect, useRef } from 'react';
+
+declare global {
+  interface Window {
+    startRecording?: () => Promise<void>;
+    stopRecording?: () => void;
+  }
+}
+
+export interface SceneDurations {
+  [key: string]: number;
+}
+
+export interface UseVideoPlayerOptions {
+  durations: SceneDurations;
+  onVideoEnd?: () => void;
+  loop?: boolean;
+}
+
+export interface UseVideoPlayerReturn {
+  currentScene: number;
+  totalScenes: number;
+  currentSceneKey: string;
+  hasEnded: boolean;
+}
+
+export function useVideoPlayer(options: UseVideoPlayerOptions): UseVideoPlayerReturn {
+  const { durations, onVideoEnd, loop = true } = options;
+
+  // Captured once on mount -- durations must be a static object
+  const sceneKeys = useRef(Object.keys(durations)).current;
+  const totalScenes = sceneKeys.length;
+  const durationsArray = useRef(Object.values(durations)).current;
+
+  const [currentScene, setCurrentScene] = useState(0);
+  const [hasEnded, setHasEnded] = useState(false);
+
+  // Start recording on mount
+  useEffect(() => {
+    window.startRecording?.();
+  }, []);
+
+  // Scene advancement -- loops independently of recording
+  useEffect(() => {
+    if (hasEnded && !loop) return;
+
+    const currentDuration = durationsArray[currentScene];
+
+    const timer = setTimeout(() => {
+      // Last scene just finished playing
+      if (currentScene >= totalScenes - 1) {
+        if (!hasEnded) {
+          window.stopRecording?.();
+          setHasEnded(true);
+          onVideoEnd?.();
+        }
+        if (loop) {
+          setCurrentScene(0);
+        }
+      } else {
+        setCurrentScene(prev => prev + 1);
+      }
+    }, currentDuration);
+
+    return () => clearTimeout(timer);
+  }, [currentScene, totalScenes, durationsArray, hasEnded, loop, onVideoEnd]);
+
+  return {
+    currentScene,
+    totalScenes,
+    currentSceneKey: sceneKeys[currentScene],
+    hasEnded,
+  };
+}
+
+export function useSceneTimer(events: Array<{ time: number; callback: () => void }>) {
+  const firedRef = useRef<Set<number>>(new Set());
+  const callbacksRef = useRef<Array<() => void>>([]);
+
+  useEffect(() => {
+    callbacksRef.current = events.map(e => e.callback);
+  }, [events]);
+
+  const scheduleKey = events.map((event, i) => `${i}:${event.time}`).join('|');
+
+  useEffect(() => {
+    firedRef.current = new Set();
+
+    const timers = events.map(({ time }, index) => {
+      return setTimeout(() => {
+        if (!firedRef.current.has(index)) {
+          firedRef.current.add(index);
+          callbacksRef.current[index]?.();
+        }
+      }, time);
+    });
+
+    return () => {
+      timers.forEach(timer => clearTimeout(timer));
+    };
+  }, [scheduleKey]);
+}

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

@@ -0,0 +1,19 @@
+// Video template library - hook and animation presets
+
+export { useVideoPlayer, useSceneTimer } from './hooks';
+export type { SceneDurations, UseVideoPlayerOptions, UseVideoPlayerReturn } from './hooks';
+
+export {
+  springs,
+  easings,
+  sceneTransitions,
+  elementAnimations,
+  charVariants,
+  charContainerVariants,
+  staggerConfigs,
+  containerVariants,
+  itemVariants,
+  staggerDelay,
+  customSpring,
+  withDelay,
+} from './animations';

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

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(<App />);

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

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

package/.local/skills/artifacts/artifacts/video-js/files/vite.config.ts

@@ -0,0 +1,79 @@
+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"),
+    },
+  },
+  css: {
+    postcss: {
+      plugins: [],
+    },
+  },
+  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/bootstrap-legacy.js

@@ -0,0 +1,115 @@
+import fs from 'fs';
+import path from 'path';
+import { parseArgs as parseNodeArgs } from 'node:util';
+
+const TEMPLATE_SUFFIX = '.template';
+const HTML_FILE_EXTENSIONS = new Set(['.html', '.htm']);
+const TOKEN_VALUES = {
+  __REPLIT_ARTIFACT_SLUG__: (slug) => slug,
+  __REPLIT_ARTIFACT_TITLE__: (_, title) => title,
+  __REPLIT_ARTIFACT_PACKAGE_NAME__: (slug) => slug,
+};
+
+function escapeHtml(value) {
+  return value
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+function parseArgs(argv) {
+  const { values, positionals } = parseNodeArgs({
+    args: argv.slice(2),
+    allowPositionals: true,
+    options: {
+      slug: { type: 'string' },
+      title: { type: 'string' },
+    },
+  });
+  const [artifactType] = positionals;
+  const slug = values.slug;
+  const title = values.title;
+
+  if (!artifactType || !slug || !title) {
+    console.error(
+      'Usage: node bootstrap-legacy.js <artifactType> --slug=<slug> --title=<title>',
+    );
+    process.exit(1);
+  }
+
+  return { artifactType, slug, title };
+}
+
+function interpolate(content, slug, title, { isHtml }) {
+  let rendered = content;
+  for (const [token, resolver] of Object.entries(TOKEN_VALUES)) {
+    const value = resolver(slug, title);
+    const replacement = isHtml ? escapeHtml(value) : value;
+    rendered = rendered.replaceAll(token, replacement);
+  }
+  return rendered;
+}
+
+function copyDir(src, dest, slug, title) {
+  fs.mkdirSync(dest, { recursive: true });
+
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    let destName = entry.name;
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, path.join(dest, destName), slug, title);
+      continue;
+    }
+
+    const isTemplate = destName.endsWith(TEMPLATE_SUFFIX);
+    if (isTemplate) {
+      destName = destName.slice(0, -TEMPLATE_SUFFIX.length);
+    }
+
+    const destPath = path.join(dest, destName);
+
+    if (isTemplate) {
+      const raw = fs.readFileSync(srcPath, 'utf8');
+      const isHtml = HTML_FILE_EXTENSIONS.has(path.extname(destName).toLowerCase());
+      fs.writeFileSync(destPath, interpolate(raw, slug, title, { isHtml }));
+      continue;
+    }
+
+    fs.copyFileSync(srcPath, destPath);
+  }
+}
+
+function main() {
+  const { artifactType, slug, title } = parseArgs(process.argv);
+  const workspaceRoot = process.cwd();
+
+  let artifactFilesDir = artifactType;
+  if (artifactType === 'data-visualization') {
+    artifactFilesDir = 'react-vite';
+  }
+
+  const filesDir = path.join(import.meta.dirname, 'artifacts', artifactFilesDir, 'files');
+  const destDir = path.join(workspaceRoot, 'artifacts', slug);
+
+  if (!fs.existsSync(filesDir)) {
+    console.error(`Error: missing template directory for ${artifactFilesDir}`);
+    process.exit(1);
+  }
+
+  if (fs.existsSync(destDir)) {
+    console.error(`Error: artifacts/${slug}/ already exists`);
+    process.exit(1);
+  }
+
+  console.log(`Bootstrapping ${artifactType} artifact: ${slug}`);
+
+  copyDir(filesDir, destDir, slug, title);
+  console.log(`  Copied files to artifacts/${slug}/`);
+
+  console.log('Done.');
+}
+
+main();

package/.local/skills/artifacts/bootstrap.js

@@ -0,0 +1,118 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const { parseArgs: parseNodeArgs } = require('node:util');
+
+const TEMPLATE_SUFFIX = '.template';
+const HTML_FILE_EXTENSIONS = new Set(['.html', '.htm']);
+const TOKEN_VALUES = {
+  __REPLIT_ARTIFACT_SLUG__: (slug) => slug,
+  __REPLIT_ARTIFACT_TITLE__: (_, title) => title,
+  __REPLIT_ARTIFACT_PACKAGE_NAME__: (slug) => `@workspace/${slug}`,
+};
+
+function escapeHtml(value) {
+  return value
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+function parseArgs(argv) {
+  const { values, positionals } = parseNodeArgs({
+    args: argv.slice(2),
+    allowPositionals: true,
+    options: {
+      slug: { type: 'string' },
+      title: { type: 'string' },
+    },
+  });
+  const [artifactType] = positionals;
+  const slug = values.slug;
+  const title = values.title;
+
+  if (!artifactType || !slug || !title) {
+    console.error(
+      'Usage: node bootstrap.js <artifactType> --slug=<slug> --title=<title>',
+    );
+    process.exit(1);
+  }
+
+  return { artifactType, slug, title };
+}
+
+function interpolate(content, slug, title, { isHtml }) {
+  let rendered = content;
+  for (const [token, resolver] of Object.entries(TOKEN_VALUES)) {
+    const value = resolver(slug, title);
+    const replacement = isHtml ? escapeHtml(value) : value;
+    rendered = rendered.replaceAll(token, replacement);
+  }
+  return rendered;
+}
+
+function copyDir(src, dest, slug, title) {
+  fs.mkdirSync(dest, { recursive: true });
+
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    let destName = entry.name;
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, path.join(dest, destName), slug, title);
+      continue;
+    }
+
+    const isTemplate = destName.endsWith(TEMPLATE_SUFFIX);
+    if (isTemplate) {
+      destName = destName.slice(0, -TEMPLATE_SUFFIX.length);
+    }
+
+    const destPath = path.join(dest, destName);
+
+    if (isTemplate) {
+      const raw = fs.readFileSync(srcPath, 'utf8');
+      const isHtml = HTML_FILE_EXTENSIONS.has(path.extname(destName).toLowerCase());
+      fs.writeFileSync(destPath, interpolate(raw, slug, title, { isHtml }));
+      continue;
+    }
+
+    fs.copyFileSync(srcPath, destPath);
+  }
+}
+
+function main() {
+  const { artifactType, slug, title } = parseArgs(process.argv);
+  const workspaceRoot = process.cwd();
+
+
+  let artifactFilesDir = artifactType;
+  if (artifactType === 'data-visualization') {
+    artifactFilesDir = 'react-vite';
+  }
+
+  const filesDir = path.join(__dirname, 'artifacts', artifactFilesDir, 'files');
+  const destDir = path.join(workspaceRoot, 'artifacts', slug);
+
+  if (!fs.existsSync(filesDir)) {
+    console.error(`Error: missing template directory for ${artifactFilesDir}`);
+    process.exit(1);
+  }
+
+  if (fs.existsSync(destDir)) {
+    console.error(`Error: artifacts/${slug}/ already exists`);
+    process.exit(1);
+  }
+
+  console.log(`Bootstrapping ${artifactType} artifact: ${slug}`);
+
+  copyDir(filesDir, destDir, slug, title);
+  console.log(`  Copied files to artifacts/${slug}/`);
+
+  console.log('Done.');
+}
+
+main();