@codellyson/framely-cli 0.1.0

package/studio/templates/SubscribeAnimation.jsx

@@ -0,0 +1,186 @@
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring } from '@codellyson/framely';
+
+/**
+ * YouTube Subscribe Animation Template
+ */
+export function SubscribeAnimation({
+  channelName = 'Your Channel',
+  buttonColor = '#FF0000',
+  showBell = true,
+}) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Button entrance
+  const buttonSpring = spring({ frame, fps, config: { damping: 12, stiffness: 150 } });
+  const buttonScale = interpolate(buttonSpring, [0, 1], [0, 1]);
+  const buttonY = interpolate(buttonSpring, [0, 1], [50, 0]);
+
+  // Subscribe text morph
+  const textProgress = interpolate(frame, [40, 50], [0, 1], { extrapolateRight: 'clamp' });
+  const showSubscribed = textProgress > 0.5;
+
+  // Bell animation
+  const bellDelay = 60;
+  const bellSpring = spring({ frame: frame - bellDelay, fps, config: { damping: 8, stiffness: 200 } });
+  const bellScale = interpolate(bellSpring, [0, 1], [0, 1]);
+  const bellRotate = interpolate(
+    frame - bellDelay,
+    [0, 10, 20, 30, 40],
+    [0, -20, 20, -10, 0],
+    { extrapolateRight: 'clamp' }
+  );
+
+  // Cursor animation
+  const cursorX = interpolate(frame, [0, 30, 35], [400, 0, 0], { extrapolateRight: 'clamp' });
+  const cursorY = interpolate(frame, [0, 30, 35], [200, 0, 5], { extrapolateRight: 'clamp' });
+  const cursorOpacity = interpolate(frame, [0, 10, 100, 120], [0, 1, 1, 0], { extrapolateRight: 'clamp' });
+  const cursorClick = frame >= 35 && frame <= 45;
+
+  // Channel name
+  const nameOpacity = interpolate(frame, [70, 90], [0, 1], { extrapolateRight: 'clamp' });
+  const nameY = interpolate(frame, [70, 90], [20, 0], { extrapolateRight: 'clamp' });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: 'linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%)',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 30,
+      }}
+    >
+      {/* Subscribe Button */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 20,
+          transform: `scale(${buttonScale}) translateY(${buttonY}px)`,
+        }}
+      >
+        <button
+          style={{
+            padding: '16px 32px',
+            fontSize: 24,
+            fontWeight: 600,
+            color: '#fff',
+            background: showSubscribed ? '#666' : buttonColor,
+            border: 'none',
+            borderRadius: 4,
+            cursor: 'pointer',
+            transition: 'background 0.2s',
+            minWidth: 200,
+          }}
+        >
+          {showSubscribed ? 'SUBSCRIBED' : 'SUBSCRIBE'}
+        </button>
+
+        {/* Bell */}
+        {showBell && (
+          <div
+            style={{
+              width: 50,
+              height: 50,
+              background: 'rgba(255, 255, 255, 0.1)',
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transform: `scale(${bellScale}) rotate(${bellRotate}deg)`,
+            }}
+          >
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">
+              <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z" />
+            </svg>
+          </div>
+        )}
+      </div>
+
+      {/* Channel Name */}
+      <div
+        style={{
+          opacity: nameOpacity,
+          transform: `translateY(${nameY}px)`,
+          textAlign: 'center',
+        }}
+      >
+        <p
+          style={{
+            fontSize: 18,
+            color: 'rgba(255, 255, 255, 0.6)',
+            margin: 0,
+          }}
+        >
+          Thanks for subscribing to
+        </p>
+        <p
+          style={{
+            fontSize: 28,
+            fontWeight: 600,
+            color: '#fff',
+            margin: '8px 0 0',
+          }}
+        >
+          {channelName}
+        </p>
+      </div>
+
+      {/* Cursor */}
+      <div
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: `translate(${cursorX}px, ${cursorY}px)`,
+          opacity: cursorOpacity,
+          pointerEvents: 'none',
+        }}
+      >
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 24 24"
+          style={{
+            transform: cursorClick ? 'scale(0.9)' : 'scale(1)',
+            transition: 'transform 0.1s',
+          }}
+        >
+          <path
+            d="M4 4l16 12-6.5 1.5L12 24 4 4z"
+            fill="#fff"
+            stroke="#000"
+            strokeWidth="1"
+          />
+        </svg>
+      </div>
+
+      {/* Particles on subscribe */}
+      {showSubscribed && [...Array(12)].map((_, i) => {
+        const angle = (i / 12) * Math.PI * 2;
+        const distance = interpolate(frame - 45, [0, 30], [0, 150], { extrapolateRight: 'clamp' });
+        const particleOpacity = interpolate(frame - 45, [0, 20, 30], [0, 1, 0], { extrapolateRight: 'clamp' });
+        return (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: '50%',
+              top: '45%',
+              width: 8,
+              height: 8,
+              background: buttonColor,
+              borderRadius: '50%',
+              transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`,
+              opacity: particleOpacity,
+            }}
+          />
+        );
+      })}
+    </AbsoluteFill>
+  );
+}
+
+export default SubscribeAnimation;

package/studio/templates/TemplateCard.tsx

@@ -0,0 +1,58 @@
+import type { Template } from '@codellyson/framely';
+
+export interface TemplateCardProps {
+  template: Template;
+  onClick: () => void;
+}
+
+/**
+ * Template card component for the marketplace grid
+ */
+export function TemplateCard({ template, onClick }: TemplateCardProps) {
+  return (
+    <button className="template-card" onClick={onClick} type="button">
+      <div className="template-card-preview">
+        <img
+          src={template.preview.thumbnail}
+          alt={template.name}
+          loading="lazy"
+        />
+        {template.featured && (
+          <span className="template-card-badge">Featured</span>
+        )}
+      </div>
+      <div className="template-card-info">
+        <h3 className="template-card-name">{template.name}</h3>
+        <p className="template-card-meta">
+          {template.width}x{template.height} &bull; {template.fps}fps
+        </p>
+        <div className="template-card-footer">
+          <span className="template-card-author">
+            {template.author.verified && (
+              <svg
+                className="template-verified-icon"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+              </svg>
+            )}
+            {template.author.name}
+          </span>
+          {template.rating && (
+            <span className="template-card-rating">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
+              </svg>
+              {template.rating.toFixed(1)}
+            </span>
+          )}
+        </div>
+      </div>
+    </button>
+  );
+}
+
+export default TemplateCard;

package/studio/templates/TemplateFilters.tsx

@@ -0,0 +1,97 @@
+import { useState, useEffect } from 'react';
+import { templatesApi, CATEGORY_LABELS } from '@codellyson/framely';
+import type { TemplateCategory, TemplatesFilterParams, CategoryCount } from '@codellyson/framely';
+
+export interface TemplateFiltersProps {
+  filters: TemplatesFilterParams;
+  onChange: (filters: Partial<TemplatesFilterParams>) => void;
+}
+
+/**
+ * Filter controls for the templates marketplace
+ */
+export function TemplateFilters({ filters, onChange }: TemplateFiltersProps) {
+  const [categories, setCategories] = useState<CategoryCount[]>([]);
+  const [searchValue, setSearchValue] = useState(filters.search || '');
+
+  // Fetch categories on mount
+  useEffect(() => {
+    templatesApi.getCategories().then(setCategories).catch(console.error);
+  }, []);
+
+  // Debounced search
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (searchValue !== filters.search) {
+        onChange({ search: searchValue || undefined });
+      }
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [searchValue, filters.search, onChange]);
+
+  return (
+    <div className="templates-filters">
+      {/* Search */}
+      <div className="filter-search">
+        <svg
+          className="filter-search-icon"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <path d="M21 21l-4.35-4.35" />
+        </svg>
+        <input
+          type="text"
+          placeholder="Search templates..."
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+        />
+      </div>
+
+      {/* Categories */}
+      <div className="filter-categories">
+        <button
+          type="button"
+          className={`filter-category ${!filters.category ? 'active' : ''}`}
+          onClick={() => onChange({ category: undefined })}
+        >
+          All
+        </button>
+        {categories.map(({ category, count }) => (
+          <button
+            key={category}
+            type="button"
+            className={`filter-category ${filters.category === category ? 'active' : ''}`}
+            onClick={() =>
+              onChange({ category: filters.category === category ? undefined : category })
+            }
+          >
+            {CATEGORY_LABELS[category as TemplateCategory] || category}
+            <span className="filter-category-count">{count}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* Sort */}
+      <div className="filter-sort">
+        <select
+          value={filters.sortBy || 'newest'}
+          onChange={(e) =>
+            onChange({ sortBy: e.target.value as TemplatesFilterParams['sortBy'] })
+          }
+        >
+          <option value="newest">Newest</option>
+          <option value="popular">Most Popular</option>
+          <option value="rating">Highest Rated</option>
+        </select>
+      </div>
+    </div>
+  );
+}
+
+export default TemplateFilters;

package/studio/templates/TemplatePreviewDialog.tsx

@@ -0,0 +1,196 @@
+import { useEffect, useRef } from 'react';
+import type { Template } from '@codellyson/framely';
+import { CATEGORY_LABELS } from '@codellyson/framely';
+
+export interface TemplatePreviewDialogProps {
+  open: boolean;
+  template: Template | null;
+  onClose: () => void;
+  onUseTemplate: () => void;
+}
+
+/**
+ * Dialog for previewing a template before using it
+ */
+export function TemplatePreviewDialog({
+  open,
+  template,
+  onClose,
+  onUseTemplate,
+}: TemplatePreviewDialogProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  // 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]);
+
+  // Focus trap
+  useEffect(() => {
+    if (!open || !dialogRef.current) return;
+    const focusable = dialogRef.current.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    }
+  }, [open]);
+
+  if (!open || !template) return null;
+
+  const duration = template.durationInFrames / template.fps;
+
+  return (
+    <div
+      className="template-preview-overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="preview-dialog-title"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div ref={dialogRef} className="template-preview-dialog">
+        {/* Header */}
+        <div className="template-preview-header">
+          <h2 id="preview-dialog-title">{template.name}</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 */}
+        <div className="template-preview-content">
+          {/* Preview Area */}
+          <div className="template-preview-media">
+            {template.preview.video ? (
+              <video
+                src={template.preview.video}
+                autoPlay
+                loop
+                muted
+                playsInline
+              />
+            ) : template.preview.preview ? (
+              <img src={template.preview.preview} alt={template.name} />
+            ) : (
+              <img src={template.preview.thumbnail} alt={template.name} />
+            )}
+          </div>
+
+          {/* Details Panel */}
+          <div className="template-preview-details">
+            <p className="template-preview-description">{template.description}</p>
+
+            <div className="template-preview-info-grid">
+              <div className="template-preview-info-item">
+                <span className="label">Resolution</span>
+                <span className="value">
+                  {template.width} x {template.height}
+                </span>
+              </div>
+              <div className="template-preview-info-item">
+                <span className="label">FPS</span>
+                <span className="value">{template.fps}</span>
+              </div>
+              <div className="template-preview-info-item">
+                <span className="label">Duration</span>
+                <span className="value">{duration.toFixed(1)}s</span>
+              </div>
+              <div className="template-preview-info-item">
+                <span className="label">Category</span>
+                <span className="value">
+                  {CATEGORY_LABELS[template.category] || template.category}
+                </span>
+              </div>
+            </div>
+
+            <div className="template-preview-author">
+              <span className="label">Created by</span>
+              <div className="template-preview-author-info">
+                {template.author.avatar && (
+                  <img
+                    src={template.author.avatar}
+                    alt=""
+                    className="template-preview-author-avatar"
+                  />
+                )}
+                <span className="template-preview-author-name">
+                  {template.author.verified && (
+                    <svg
+                      className="template-verified-icon"
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="currentColor"
+                    >
+                      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+                    </svg>
+                  )}
+                  {template.author.name}
+                </span>
+              </div>
+            </div>
+
+            {template.tags.length > 0 && (
+              <div className="template-preview-tags">
+                {template.tags.map((tag) => (
+                  <span key={tag} className="template-preview-tag">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+
+            {template.downloads !== undefined && (
+              <div className="template-preview-stats">
+                <span className="template-preview-stat">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
+                  </svg>
+                  {template.downloads.toLocaleString()} downloads
+                </span>
+                {template.rating && (
+                  <span className="template-preview-stat">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
+                    </svg>
+                    {template.rating.toFixed(1)}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="template-preview-footer">
+          <button type="button" onClick={onClose} className="template-btn-secondary">
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onUseTemplate}
+            className="template-btn-primary"
+          >
+            Use Template
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TemplatePreviewDialog;