@codellyson/framely-cli 0.1.0

package/studio/templates/TemplatesMarketplace.tsx

@@ -0,0 +1,172 @@
+import { useState, useEffect, useCallback } from 'react';
+import { templatesApi } from '@codellyson/framely';
+import type { Template, TemplatesFilterParams } from '@codellyson/framely';
+import { TemplateCard } from './TemplateCard';
+import { TemplateFilters } from './TemplateFilters';
+import { TemplatePreviewDialog } from './TemplatePreviewDialog';
+import { UseTemplateDialog } from './UseTemplateDialog';
+import './TemplatesMarketplace.css';
+
+export interface TemplatesMarketplaceProps {
+  onUseTemplate: (template: Template, customId: string, customProps?: Record<string, unknown>) => void;
+}
+
+/**
+ * Main marketplace view for browsing templates
+ */
+export function TemplatesMarketplace({ onUseTemplate }: TemplatesMarketplaceProps) {
+  const [templates, setTemplates] = useState<Template[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filters, setFilters] = useState<TemplatesFilterParams>({
+    sortBy: 'newest',
+    page: 1,
+    pageSize: 12,
+  });
+  const [hasMore, setHasMore] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [useDialogOpen, setUseDialogOpen] = useState(false);
+
+  // Fetch templates
+  const fetchTemplates = useCallback(
+    async (reset = false) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await templatesApi.getTemplates(filters);
+        setTemplates((prev) => (reset ? response.templates : [...prev, ...response.templates]));
+        setHasMore(response.hasMore);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load templates');
+      } finally {
+        setLoading(false);
+      }
+    },
+    [filters]
+  );
+
+  // Fetch on filter change
+  useEffect(() => {
+    fetchTemplates(true);
+  }, [filters.category, filters.search, filters.sortBy]);
+
+  // Handle filter changes
+  const handleFilterChange = useCallback((newFilters: Partial<TemplatesFilterParams>) => {
+    setFilters((prev) => ({ ...prev, ...newFilters, page: 1 }));
+  }, []);
+
+  // Handle template click
+  const handleTemplateClick = useCallback((template: Template) => {
+    setSelectedTemplate(template);
+    setPreviewOpen(true);
+  }, []);
+
+  // Handle "Use Template" from preview
+  const handleUseFromPreview = useCallback(() => {
+    setPreviewOpen(false);
+    setUseDialogOpen(true);
+  }, []);
+
+  // Confirm using template
+  const handleConfirmUse = useCallback(
+    (customId: string, customProps: Record<string, unknown>) => {
+      if (selectedTemplate) {
+        onUseTemplate(selectedTemplate, customId, customProps);
+        setUseDialogOpen(false);
+        setSelectedTemplate(null);
+      }
+    },
+    [selectedTemplate, onUseTemplate]
+  );
+
+  // Load more templates
+  const handleLoadMore = useCallback(() => {
+    setFilters((prev) => ({ ...prev, page: (prev.page || 1) + 1 }));
+  }, []);
+
+  // Load more when page changes
+  useEffect(() => {
+    if (filters.page && filters.page > 1) {
+      fetchTemplates(false);
+    }
+  }, [filters.page]);
+
+  return (
+    <div className="templates-marketplace">
+      {/* Header */}
+      <div className="templates-header">
+        <h2>Templates Marketplace</h2>
+        <p className="templates-subtitle">
+          Browse and use professionally designed video templates
+        </p>
+      </div>
+
+      {/* Filters */}
+      <TemplateFilters filters={filters} onChange={handleFilterChange} />
+
+      {/* Content */}
+      {error ? (
+        <div className="templates-error">
+          <p>{error}</p>
+          <button type="button" onClick={() => fetchTemplates(true)}>
+            Retry
+          </button>
+        </div>
+      ) : (
+        <>
+          <div className="templates-grid">
+            {templates.map((template) => (
+              <TemplateCard
+                key={template.id}
+                template={template}
+                onClick={() => handleTemplateClick(template)}
+              />
+            ))}
+            {loading &&
+              Array.from({ length: 4 }).map((_, i) => (
+                <div key={`skeleton-${i}`} className="template-card-skeleton" />
+              ))}
+          </div>
+
+          {!loading && templates.length === 0 && (
+            <div className="templates-empty">
+              <p>No templates found</p>
+              {filters.search && (
+                <p className="templates-empty-hint">
+                  Try adjusting your search or filters
+                </p>
+              )}
+            </div>
+          )}
+
+          {hasMore && !loading && (
+            <div className="templates-load-more">
+              <button type="button" onClick={handleLoadMore}>
+                Load More
+              </button>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Preview Dialog */}
+      <TemplatePreviewDialog
+        open={previewOpen}
+        template={selectedTemplate}
+        onClose={() => setPreviewOpen(false)}
+        onUseTemplate={handleUseFromPreview}
+      />
+
+      {/* Use Template Dialog */}
+      <UseTemplateDialog
+        open={useDialogOpen}
+        template={selectedTemplate}
+        onClose={() => setUseDialogOpen(false)}
+        onConfirm={handleConfirmUse}
+      />
+    </div>
+  );
+}
+
+export default TemplatesMarketplace;

package/studio/templates/TextReveal.jsx

@@ -0,0 +1,134 @@
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate } from '@codellyson/framely';
+
+/**
+ * Kinetic Text Reveal Template
+ */
+export function TextReveal({
+  text = 'Your text here',
+  fontSize = 120,
+  color = '#ffffff',
+  backgroundColor = '#000000',
+}) {
+  const frame = useCurrentFrame();
+  const { width } = useVideoConfig();
+
+  const characters = text.split('');
+  const charDelay = 3; // frames between each character
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: backgroundColor,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Background animated lines */}
+      {[...Array(5)].map((_, i) => {
+        const lineY = interpolate(
+          frame,
+          [i * 10, i * 10 + 60],
+          [-50, 110],
+          { extrapolateRight: 'clamp' }
+        );
+        return (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: `${lineY}%`,
+              height: 1,
+              background: `linear-gradient(90deg, transparent, ${color}22, transparent)`,
+            }}
+          />
+        );
+      })}
+
+      {/* Text container */}
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          maxWidth: width * 0.9,
+          gap: '0 0.05em',
+        }}
+      >
+        {characters.map((char, i) => {
+          const charFrame = frame - i * charDelay;
+
+          // Character animations
+          const y = interpolate(charFrame, [0, 15], [100, 0], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          });
+
+          const opacity = interpolate(charFrame, [0, 10], [0, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          });
+
+          const scale = interpolate(charFrame, [0, 10, 15], [0.5, 1.2, 1], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          });
+
+          const rotate = interpolate(charFrame, [0, 15], [-20, 0], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          });
+
+          // Glow effect
+          const glowIntensity = interpolate(charFrame, [10, 20, 30], [0, 1, 0], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          });
+
+          if (char === ' ') {
+            return <span key={i} style={{ width: fontSize * 0.3 }} />;
+          }
+
+          return (
+            <span
+              key={i}
+              style={{
+                display: 'inline-block',
+                fontSize,
+                fontWeight: 700,
+                color,
+                transform: `translateY(${y}px) scale(${scale}) rotate(${rotate}deg)`,
+                opacity,
+                textShadow: glowIntensity > 0
+                  ? `0 0 ${20 * glowIntensity}px ${color}, 0 0 ${40 * glowIntensity}px ${color}`
+                  : 'none',
+                fontFamily: 'system-ui, -apple-system, sans-serif',
+              }}
+            >
+              {char}
+            </span>
+          );
+        })}
+      </div>
+
+      {/* Scan line effect */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          height: 4,
+          background: `linear-gradient(90deg, transparent, ${color}, transparent)`,
+          top: `${interpolate(frame, [0, 60], [-10, 110], { extrapolateRight: 'clamp' })}%`,
+          opacity: 0.5,
+          filter: 'blur(2px)',
+        }}
+      />
+    </AbsoluteFill>
+  );
+}
+
+export default TextReveal;

package/studio/templates/UseTemplateDialog.tsx

@@ -0,0 +1,154 @@
+import { useState, useEffect, useRef } from 'react';
+import type { Template } from '@codellyson/framely';
+import { PropsEditor } from '../PropsEditor.tsx';
+
+export interface UseTemplateDialogProps {
+  open: boolean;
+  template: Template | null;
+  onClose: () => void;
+  onConfirm: (customId: string, customProps: Record<string, unknown>) => void;
+}
+
+/**
+ * Dialog for confirming template usage and setting custom composition ID
+ */
+export function UseTemplateDialog({
+  open,
+  template,
+  onClose,
+  onConfirm,
+}: UseTemplateDialogProps) {
+  const [customId, setCustomId] = useState('');
+  const [customProps, setCustomProps] = useState<Record<string, unknown>>({});
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Initialize customId and props when template changes
+  useEffect(() => {
+    if (template) {
+      setCustomId(`${template.id}-copy`);
+      setCustomProps({ ...template.defaultProps });
+      setError(null);
+    }
+  }, [template]);
+
+  // Focus input when dialog opens
+  useEffect(() => {
+    if (open && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [open]);
+
+  // Escape key handler
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open, onClose]);
+
+  if (!open || !template) return null;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Validate ID
+    const trimmedId = customId.trim();
+    if (!trimmedId) {
+      setError('Composition ID is required');
+      return;
+    }
+    if (!/^[a-z0-9-]+$/i.test(trimmedId)) {
+      setError('ID can only contain letters, numbers, and hyphens');
+      return;
+    }
+
+    onConfirm(trimmedId, customProps);
+  };
+
+  return (
+    <div
+      className="template-preview-overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="use-dialog-title"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="use-template-dialog">
+        {/* Header */}
+        <div className="template-preview-header">
+          <h2 id="use-dialog-title">Use Template</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close"
+            className="template-dialog-close"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <form onSubmit={handleSubmit} className="use-template-content">
+          <p className="use-template-intro">
+            Add <strong>{template.name}</strong> as a new composition in your project.
+          </p>
+
+          <div className="use-template-form-group">
+            <label htmlFor="composition-id">Composition ID</label>
+            <input
+              ref={inputRef}
+              id="composition-id"
+              type="text"
+              value={customId}
+              onChange={(e) => {
+                setCustomId(e.target.value);
+                setError(null);
+              }}
+              placeholder="my-custom-video"
+              className={error ? 'has-error' : ''}
+            />
+            {error && <span className="use-template-error">{error}</span>}
+            <span className="use-template-hint">
+              This ID will be used to reference the composition in your code
+            </span>
+          </div>
+
+          {/* Props Editor */}
+          {Object.keys(template.defaultProps).length > 0 && (
+            <div className="use-template-props">
+              <h4>Customize Properties</h4>
+              <PropsEditor
+                defaultProps={template.defaultProps}
+                onChange={setCustomProps}
+              />
+            </div>
+          )}
+
+          {/* Footer */}
+          <div className="template-preview-footer">
+            <button type="button" onClick={onClose} className="template-btn-secondary">
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="template-btn-primary"
+              disabled={!customId.trim()}
+            >
+              Add to Project
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default UseTemplateDialog;

package/studio/templates/index.ts

@@ -0,0 +1,45 @@
+/**
+ * Templates Index
+ *
+ * Export all template components and provide a registry for the marketplace.
+ */
+
+import type { ComponentType } from 'react';
+import { SocialIntro } from './SocialIntro';
+import { SubscribeAnimation } from './SubscribeAnimation';
+import { LowerThird } from './LowerThird';
+import { TextReveal } from './TextReveal';
+import { AnimatedGradient } from './AnimatedGradient';
+import { ProductShowcase } from './ProductShowcase';
+import { InstagramStory } from './InstagramStory';
+import { SlideTransition } from './SlideTransition';
+
+// Template component registry - maps template IDs to their React components
+export const templateComponents: Record<string, ComponentType<any>> = {
+  'social-intro-1': SocialIntro,
+  'youtube-subscribe': SubscribeAnimation,
+  'lower-third-1': LowerThird,
+  'text-reveal-1': TextReveal,
+  'gradient-bg-1': AnimatedGradient,
+  'promo-slide-1': ProductShowcase,
+  'instagram-story': InstagramStory,
+  'presentation-1': SlideTransition,
+};
+
+// Get a template component by ID
+export function getTemplateComponent(templateId: string): ComponentType<any> | null {
+  return templateComponents[templateId] || null;
+}
+
+// Export individual components
+export { SocialIntro } from './SocialIntro';
+export { SubscribeAnimation } from './SubscribeAnimation';
+export { LowerThird } from './LowerThird';
+export { TextReveal } from './TextReveal';
+export { AnimatedGradient } from './AnimatedGradient';
+export { ProductShowcase } from './ProductShowcase';
+export { InstagramStory } from './InstagramStory';
+export { SlideTransition } from './SlideTransition';
+
+// Marketplace UI
+export { TemplatesMarketplace } from './TemplatesMarketplace';

package/utils/browser.js

@@ -0,0 +1,188 @@
+/**
+ * Browser Utilities
+ *
+ * Manages headless browser instances for rendering.
+ */
+
+import { chromium } from 'playwright';
+
+/**
+ * Default browser launch arguments for rendering.
+ *
+ * Security-related flags:
+ * - `--no-sandbox` / `--disable-setuid-sandbox`: Required in Docker/CI environments
+ *   where Chrome's sandbox cannot be set up. The browser is only loading trusted
+ *   local content (localhost), so the sandbox provides minimal additional protection.
+ * - `--disable-web-security`: Allows the renderer to load cross-origin resources
+ *   (fonts, images, video) without CORS restrictions. Necessary because compositions
+ *   may reference assets from CDNs or local file:// paths during rendering.
+ * - `--disable-features=IsolateOrigins` / `--disable-site-isolation-trials`:
+ *   Reduces memory overhead by not isolating each origin into its own process.
+ *   Only one origin (localhost) is loaded during rendering.
+ *
+ * Performance-related flags:
+ * - `--disable-gpu`: Headless rendering doesn't benefit from GPU compositing
+ *   and GPU initialization can cause issues in server environments.
+ * - `--disable-dev-shm-usage`: Uses /tmp instead of /dev/shm which may be too
+ *   small in Docker containers, preventing crashes on large pages.
+ * - `--disable-background-timer-throttling` / `--disable-backgrounding-occluded-windows`
+ *   / `--disable-renderer-backgrounding`: Prevents Chrome from throttling timers
+ *   and rendering in background tabs, ensuring consistent frame timing.
+ * - `--disable-ipc-flooding-protection`: Allows rapid frame updates without
+ *   Chrome's IPC rate limiting interfering with the capture loop.
+ * - `--autoplay-policy=no-user-gesture-required`: Allows audio/video elements
+ *   to play automatically for compositions that include media.
+ */
+const DEFAULT_ARGS = [
+  '--disable-web-security',
+  '--disable-features=IsolateOrigins',
+  '--disable-site-isolation-trials',
+  '--no-sandbox',
+  '--disable-setuid-sandbox',
+  '--disable-gpu',
+  '--disable-dev-shm-usage',
+  '--disable-background-timer-throttling',
+  '--disable-backgrounding-occluded-windows',
+  '--disable-renderer-backgrounding',
+  '--disable-ipc-flooding-protection',
+  '--autoplay-policy=no-user-gesture-required',
+];
+
+/**
+ * Create a new browser instance configured for rendering.
+ *
+ * @param {object} options
+ * @param {number} [options.width=1920] - Viewport width
+ * @param {number} [options.height=1080] - Viewport height
+ * @param {number} [options.scale=1] - Device scale factor
+ * @param {string} [options.executablePath] - Custom browser executable
+ * @param {boolean} [options.headless=true] - Run in headless mode
+ * @returns {Promise<{ browser: Browser, page: Page }>}
+ */
+export async function createBrowser({
+  width = 1920,
+  height = 1080,
+  scale = 1,
+  executablePath,
+  headless = true,
+} = {}) {
+  const launchOptions = {
+    args: DEFAULT_ARGS,
+    headless,
+  };
+
+  if (executablePath) {
+    launchOptions.executablePath = executablePath;
+  }
+
+  const browser = await chromium.launch(launchOptions);
+
+  const context = await browser.newContext({
+    viewport: {
+      width: Math.round(width * scale),
+      height: Math.round(height * scale),
+    },
+    deviceScaleFactor: 1,
+  });
+
+  const page = await context.newPage();
+
+  return { browser, page };
+}
+
+/**
+ * Close a browser instance.
+ *
+ * @param {Browser} browser
+ */
+export async function closeBrowser(browser) {
+  if (browser) {
+    try {
+      await browser.close();
+    } catch {
+      // Ignore close errors
+    }
+  }
+}
+
+/**
+ * Create multiple browser instances for parallel rendering.
+ *
+ * @param {number} count - Number of browser instances
+ * @param {object} options - Browser options (same as createBrowser)
+ * @returns {Promise<Array<{ browser: Browser, page: Page }>>}
+ */
+export async function createBrowserPool(count, options = {}) {
+  const browsers = await Promise.all(
+    Array.from({ length: count }, () => createBrowser(options))
+  );
+  return browsers;
+}
+
+/**
+ * Close all browsers in a pool.
+ *
+ * @param {Array<{ browser: Browser }>} pool
+ */
+export async function closeBrowserPool(pool) {
+  await Promise.all(pool.map(({ browser }) => closeBrowser(browser)));
+}
+
+/**
+ * Wait for all pending delay renders to complete.
+ *
+ * @param {Page} page - Playwright page
+ * @param {number} timeout - Timeout in milliseconds
+ */
+export async function waitForDelayRenders(page, timeout = 30000) {
+  await page.waitForFunction(
+    () => {
+      const dr = window.__FRAMELY_DELAY_RENDER;
+      return !dr || dr.pendingCount === 0;
+    },
+    { timeout }
+  );
+}
+
+/** Default timeout for waiting on delayRender and page readiness (ms). */
+export const DEFAULT_TIMEOUT = 30000;
+
+/**
+ * Set the current frame and wait for render to complete.
+ *
+ * @param {Page} page - Playwright page
+ * @param {number} frame - Frame number to render
+ * @param {number} [timeout=30000] - Timeout in ms for delayRender
+ */
+export async function setFrame(page, frame, timeout = DEFAULT_TIMEOUT) {
+  // Set frame and check delayRender in a single evaluate round-trip
+  const hasDelayRender = await page.evaluate((f) => {
+    window.__setFrame(f);
+    const dr = window.__FRAMELY_DELAY_RENDER;
+    return dr && dr.pendingCount > 0;
+  }, frame);
+
+  // Only wait for delayRender if something is actually pending
+  if (hasDelayRender) {
+    try {
+      await page.waitForFunction(
+        () => {
+          const dr = window.__FRAMELY_DELAY_RENDER;
+          return !dr || dr.pendingCount === 0;
+        },
+        { timeout }
+      );
+    } catch {
+      // Continue even if delayRender check fails
+    }
+  }
+}
+
+export default {
+  createBrowser,
+  closeBrowser,
+  createBrowserPool,
+  closeBrowserPool,
+  waitForDelayRenders,
+  setFrame,
+};