Mike/FrenoCorp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FRE-600: Fix code review blockers

Browse Source 
- Consolidated duplicate UndoManagers to single instance
- Fixed connection promise to only resolve on 'connected' status
- Fixed WebSocketProvider import (WebsocketProvider)
- Added proper doc.destroy() cleanup
- Renamed isPresenceInitialized property to avoid conflict

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Michael Freno
2026-04-25 00:08:01 -04:00
parent 65b552bb08
commit 7c684a42cc
48450 changed files with 5679671 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { render } from 'solid-js/web';
import { Router, RouteSectionProps } from '@solidjs/router';
import { ClerkProvider } from './lib/auth/clerk-provider';
import { routes } from './routes';
import './index.css';
render(
() => (
<ClerkProvider>
<Router root={(props: RouteSectionProps) => <>{props.children}</>}>
{routes}
</Router>
</ClerkProvider>
),
document.getElementById('root')!
);

174
src/components/auth/PasswordReset.tsx Normal file
View File

@@ -0,0 +1,174 @@
import { Component, createSignal, createMemo } from 'solid-js';
import { createMutation } from '@tanstack/solid-query';
import { trpcClient } from '../../lib/api/trpc-client';
export interface PasswordResetProps {
onSuccess?: (message: string) => void;
onNavigateSignIn?: () => void;
mode?: 'request' | 'confirm';
token?: string;
email?: string;
}
export const PasswordReset: Component<PasswordResetProps> = (props) => {
const [email, setEmail] = createSignal(props.email || '');
const [newPassword, setNewPassword] = createSignal('');
const [confirmPassword, setConfirmPassword] = createSignal('');
const [showPassword, setShowPassword] = createSignal(false);
const isConfirmMode = props.mode === 'confirm';
const passwordsMatch = createMemo(() => {
return newPassword() === confirmPassword() && newPassword().length > 0;
});
const requestResetMutation = createMutation({
mutationFn: async (input: { email: string }) => {
const result = await trpcClient.auth.requestPasswordReset.mutate(input);
return result as { message: string };
},
onSuccess: (data) => {
props.onSuccess?.(data.message);
},
});
const confirmResetMutation = createMutation({
mutationFn: async (input: { token: string; newPassword: string }) => {
const result = await trpcClient.auth.confirmPasswordReset.mutate(input);
return result as { message: string };
},
onSuccess: (data) => {
props.onSuccess?.(data.message);
},
});
const handleSubmit = (e: Event) => {
e.preventDefault();
if (isConfirmMode && !passwordsMatch()) return;
if (isConfirmMode) {
confirmResetMutation.mutate({
token: props.token!,
newPassword: newPassword(),
});
} else {
requestResetMutation.mutate({ email: email() });
}
};
return (
<div class="auth-container">
<div class="auth-card">
<h2 class="auth-title">
{isConfirmMode ? 'Reset Password' : 'Forgot Password'}
</h2>
<p class="auth-subtitle">
{isConfirmMode
? 'Enter your new password'
: "We'll send you a reset link"}
</p>
<form onSubmit={handleSubmit} class="auth-form">
{!isConfirmMode && (
<div class="form-group">
<label for="email">Email</label>
<input
id="email"
type="email"
value={email()}
onInput={(e) => setEmail(e.currentTarget.value)}
placeholder="Enter your email"
required
class="form-input"
/>
</div>
)}
{isConfirmMode && (
<>
<div class="form-group">
<label for="newPassword">New Password</label>
<div class="password-input-wrapper">
<input
id="newPassword"
type={showPassword() ? 'text' : 'password'}
value={newPassword()}
onInput={(e) => setNewPassword(e.currentTarget.value)}
placeholder="Enter new password"
required
class="form-input"
minlength="8"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword())}
class="password-toggle"
aria-label={showPassword() ? 'Hide password' : 'Show password'}
>
{showPassword() ? 'Hide' : 'Show'}
</button>
</div>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm New Password</label>
<input
id="confirmPassword"
type={showPassword() ? 'text' : 'password'}
value={confirmPassword()}
onInput={(e) => setConfirmPassword(e.currentTarget.value)}
placeholder="Confirm your new password"
required
class="form-input"
/>
</div>
{!passwordsMatch() && newPassword().length > 0 && (
<div class="error-message" role="alert">
Passwords do not match
</div>
)}
</>
)}
{(requestResetMutation.error || confirmResetMutation.error) && (
<div class="error-message" role="alert">
{(requestResetMutation.error || confirmResetMutation.error)?.message}
</div>
)}
<button
type="submit"
disabled={
(isConfirmMode
? confirmResetMutation.isPending || !passwordsMatch()
: requestResetMutation.isPending)
}
class="auth-btn-primary"
>
{isConfirmMode
? confirmResetMutation.isPending
? 'Resetting password...'
: 'Reset Password'
: requestResetMutation.isPending
? 'Sending link...'
: 'Send Reset Link'}
</button>
</form>
<div class="auth-footer">
<p>
Remember your password?{' '}
<button
type="button"
onClick={props.onNavigateSignIn}
class="auth-link"
>
Sign in
</button>
</p>
</div>
</div>
</div>
);
};

24
src/components/auth/ProtectedRoute.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { Component, Match, Switch } from 'solid-js';
import { Navigate, RouteSectionProps, useIsRouting } from '@solidjs/router';
import { useAuth } from '../../lib/auth';
export const ProtectedRoute: Component<RouteSectionProps> = (props) => {
const auth = useAuth();
const isRouting = useIsRouting();
return (
<Switch>
<Match when={isRouting()}>
<div class="freno-loading">
<div class="freno-spinner" />
</div>
</Match>
<Match when={!auth().isAuthenticated}>
<Navigate href="/sign-in" />
</Match>
<Match when={auth().isAuthenticated}>
<div>{props.children}</div>
</Match>
</Switch>
);
};

43
src/components/auth/SignIn.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { Component } from 'solid-js';
import { useAuth, useAuthActions } from '../../lib/auth';
export const SignIn: Component = () => {
const auth = useAuth();
const { signIn } = useAuthActions();
return (
<div class="freno-auth-container">
<div class="freno-auth-card">
<div class="freno-auth-header">
<h1 class="freno-auth-title">Welcome back</h1>
<p class="freno-auth-subtitle">Sign in to your FrenoCorp account</p>
</div>
{auth().error && (
<div class="freno-alert freno-alert-error">
{auth().error}
</div>
)}
<div class="freno-auth-actions">
<button class="freno-btn freno-btn-primary freno-btn-full" onClick={signIn}>
Sign in with Email
</button>
<button class="freno-btn freno-btn-outline freno-btn-full">
Sign in with Google
</button>
<button class="freno-btn freno-btn-outline freno-btn-full">
Sign in with GitHub
</button>
</div>
<div class="freno-auth-footer">
<p>
Don't have an account?{' '}
<a href="/sign-up">Create one</a>
</p>
</div>
</div>
</div>
);
};

94
src/components/auth/SignUp.tsx Normal file
View File

@@ -0,0 +1,94 @@
import { Component, createSignal } from 'solid-js';
import { useAuth, useAuthActions } from '../../lib/auth';
export const SignUp: Component = () => {
const auth = useAuth();
const { signIn } = useAuthActions();
const [email, setEmail] = createSignal('');
const [name, setName] = createSignal('');
const [password, setPassword] = createSignal('');
const handleSubmit = (e: Event) => {
e.preventDefault();
signIn();
};
return (
<div class="freno-auth-container">
<div class="freno-auth-card">
<div class="freno-auth-header">
<h1 class="freno-auth-title">Create your account</h1>
<p class="freno-auth-subtitle">Start writing collaboratively today</p>
</div>
{auth().error && (
<div class="freno-alert freno-alert-error">
{auth().error}
</div>
)}
<form class="freno-auth-form" onSubmit={handleSubmit}>
<div class="freno-form-group">
<label class="freno-label" for="name">Full Name</label>
<input
class="freno-input"
id="name"
type="text"
placeholder="John Doe"
value={name()}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div class="freno-form-group">
<label class="freno-label" for="email">Email</label>
<input
class="freno-input"
id="email"
type="email"
placeholder="john@example.com"
value={email()}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div class="freno-form-group">
<label class="freno-label" for="password">Password</label>
<input
class="freno-input"
id="password"
type="password"
placeholder="Create a strong password"
value={password()}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<button class="freno-btn freno-btn-primary freno-btn-full" type="submit">
Create Account
</button>
</form>
<div class="freno-auth-divider">
<span>or</span>
</div>
<div class="freno-auth-actions">
<button class="freno-btn freno-btn-outline freno-btn-full">
Sign up with Google
</button>
<button class="freno-btn freno-btn-outline freno-btn-full">
Sign up with GitHub
</button>
</div>
<div class="freno-auth-footer">
<p>
Already have an account?{' '}
<a href="/sign-in">Sign in</a>
</p>
</div>
</div>
</div>
);
};

103
src/components/auth/UserProfile.tsx Normal file
View File

@@ -0,0 +1,103 @@
import { Component, createSignal } from 'solid-js';
import { A } from '@solidjs/router';
import { useAuth, useAuthActions } from '../../lib/auth';
export const UserProfile: Component = () => {
const auth = useAuth();
const { updateUser } = useAuthActions();
const [editing, setEditing] = createSignal(false);
const [name, setName] = createSignal('');
const user = () => auth().user;
const handleSave = async () => {
const u = user();
if (!u) return;
await updateUser({ name: name().trim() || u.name });
setEditing(false);
};
const startEditing = () => {
const u = user();
if (u) {
setName(u.name);
setEditing(true);
}
};
return (
<div class="freno-profile">
<div class="freno-page-header">
<h1>Profile</h1>
</div>
<div class="freno-profile-card">
<div class="freno-profile-header">
<div class="freno-avatar-large">
{user()?.avatarUrl ? (
<img src={user()!.avatarUrl} alt={user()!.name} class="freno-avatar-img" />
) : (
<span>{user()?.name?.charAt(0)?.toUpperCase() || 'U'}</span>
)}
</div>
<div class="freno-profile-info">
{editing() ? (
<div class="freno-edit-name">
<input
type="text"
value={name()}
onInput={(e) => setName(e.target.value)}
class="freno-input"
/>
<button class="freno-btn freno-btn-primary" onClick={handleSave}>Save</button>
<button class="freno-btn freno-btn-secondary" onClick={() => setEditing(false)}>
Cancel
</button>
</div>
) : (
<div class="freno-name-row">
<h2>{user()?.name}</h2>
<button class="freno-btn freno-btn-small" onClick={startEditing}>Edit</button>
</div>
)}
<p class="freno-email">{user()?.email}</p>
<span class={`freno-badge freno-badge-${user()?.role}`}>{user()?.role}</span>
</div>
</div>
<div class="freno-profile-details">
<dl class="freno-dl">
<dt>User ID</dt>
<dd class="freno-mono">{user()?.id}</dd>
</dl>
</div>
</div>
<div class="freno-section">
<h2>Preferences</h2>
<div class="freno-preferences">
<div class="freno-preference-item">
<div>
<h3>Email Notifications</h3>
<p>Receive email updates about project activity</p>
</div>
<label class="freno-toggle">
<input type="checkbox" checked />
<span class="freno-toggle-slider" />
</label>
</div>
<div class="freno-preference-item">
<div>
<h3>Collaboration Alerts</h3>
<p>Get notified when others edit your documents</p>
</div>
<label class="freno-toggle">
<input type="checkbox" checked />
<span class="freno-toggle-slider" />
</label>
</div>
</div>
</div>
</div>
);
};

331
src/components/collaboration/collaborator-list.tsx
View File

@@ -1,271 +1,194 @@
/**
* Collaborator List Component
* Displays connected users with their presence state (cursor position, editing context)
* Displays list of active collaborators with their editing context
*/
import { Component, createSignal, onMount, For } from 'solid-js';
import { UserPresence } from '../../lib/collaboration/presence-manager';
import { Component, createEffect, onMount, createSignal } from 'solid-js';
import { RemoteUser } from '../../lib/collaboration/presence';
export interface CollaboratorListProps {
getConnectedUsers: () => UserPresence[];
getLocalPresence: () => UserPresence;
getRemoteUsers: () => Map<string, RemoteUser>;
onVideoCallInitiate?: (userId: string) => void;
className?: string;
}
export const CollaboratorList: Component<CollaboratorListProps> = (props) => {
const [users, setUsers] = createSignal<UserPresence[]>([]);
const [localPresence, setLocalPresence] = createSignal<UserPresence | null>(null);
let listRef: HTMLUListElement | undefined;
const [users, setUsers] = createSignal<RemoteUser[]>([]);
const [isOpen, setIsOpen] = createSignal(true);
onMount(() => {
// Initial load
setUsers(props.getConnectedUsers());
setLocalPresence(props.getLocalPresence());
const updateUsers = () => {
const userMap = props.getRemoteUsers();
setUsers(Array.from(userMap.values()));
};
updateUsers();
// Poll for updates (in production, use subscription pattern)
const interval = setInterval(() => {
const currentUsers = props.getConnectedUsers();
const currentLocal = props.getLocalPresence();
if (
JSON.stringify(users().map(u => ({ userId: u.userId, status: u.status }))) !==
JSON.stringify(currentUsers.map(u => ({ userId: u.userId, status: u.status })))
) {
setUsers(currentUsers);
}
if (
JSON.stringify(localPresence()?.userId) !==
JSON.stringify(currentLocal?.userId)
) {
setLocalPresence(currentLocal);
}
}, 1000);
const interval = setInterval(updateUsers, 1000);
return () => {
clearInterval(interval);
};
});
const getStatusIcon = (status: UserPresence['status']): string => {
switch (status) {
case 'active':
return '●';
case 'idle':
return '○';
case 'away':
return '◌';
const getStatusIndicatorColor = (user: RemoteUser): string => {
if (user.isEditing) {
return '#22c55e'; // green - actively editing
}
return '#94a3b8'; // gray - idle
};
const getStatusColor = (status: UserPresence['status']): string => {
switch (status) {
case 'active':
return '#22c55e'; // green
case 'idle':
return '#eab308'; // yellow
case 'away':
return '#94a3b8'; // gray
const getElapsedTime = (lastActive: Date): string => {
const now = new Date();
const diff = now.getTime() - new Date(lastActive).getTime();
if (diff < 60000) {
return 'Just now';
} else if (diff < 3600000) {
const minutes = Math.floor(diff / 60000);
return `${minutes}m ago`;
} else {
const hours = Math.floor(diff / 3600000);
return `${hours}h ago`;
}
};
const formatEditingContext = (context: string | null): string => {
if (!context) return 'Not editing';
// Parse context string (e.g., "scene:scene-1" or "character:char-1")
const parts = context.split(':');
if (parts.length === 2) {
const [type, id] = parts;
return `${type.charAt(0).toUpperCase() + type.slice(1)}: ${id}`;
}
return context;
};
const formatCursorPosition = (position: number | null): string => {
if (position === null) return '-';
// Convert to line:column format (simplified - assumes 80 chars per line)
const line = Math.floor(position / 80) + 1;
const column = (position % 80) + 1;
return `${line}:${column}`;
};
return (
<div
class={props.className || 'collaborator-list'}
style={{
display: 'flex',
flexDirection: 'column',
gap: '8px',
padding: '12px',
backgroundColor: '#f8fafc',
borderRadius: '8px',
width: '280px',
maxHeight: '400px',
overflow: 'auto',
backgroundColor: '#fff',
border: '1px solid #e2e8f0',
maxWidth: '320px',
borderRadius: '8px',
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
}}
>
<h3
<div
onClick={() => setIsOpen(!isOpen())}
style={{
margin: '0',
padding: '0 0 8px 0',
fontSize: '14px',
fontWeight: '600',
color: '#475569',
borderBottom: '1px solid #e2e8f0',
}}
>
Collaborators ({users().length + 1})
</h3>
<ul
ref={listRef}
style={{
listStyle: 'none',
margin: '0',
padding: '0',
display: 'flex',
flexDirection: 'column',
gap: '6px',
alignItems: 'center',
justifyContent: 'space-between',
padding: '12px 16px',
borderBottom: '1px solid #e2e8f0',
cursor: 'pointer',
userSelect: 'none',
}}
>
<For each={[...users(), ...(localPresence() ? [localPresence()!] : [])]}>
{(user) => {
const isLocal = user.userId === localPresence()?.userId;
return (
<li
<span style={{ fontWeight: '600', fontSize: '14px' }}>
Collaborators ({users().length})
</span>
<span style={{ fontSize: '12px', color: '#64748b' }}>
{isOpen() ? '▼' : '▶'}
</span>
</div>
{isOpen() && (
<div>
{users().length === 0 ? (
<div style={{ padding: '20px 16px', textAlign: 'center', color: '#94a3b8', fontSize: '13px' }}>
No other collaborators
</div>
) : (
users().map((user) => (
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
padding: '8px',
backgroundColor: isLocal ? '#e0f2fe' : '#ffffff',
borderRadius: '6px',
border: `1px solid ${user.color}40`,
padding: '10px 16px',
borderBottom: '1px solid #f1f5f9',
gap: '10px',
}}
>
{/* Status indicator */}
<span
style={{
display: 'flex',
alignItems: 'center',
gap: '4px',
}}
>
<span
style={{
width: '8px',
height: '8px',
borderRadius: '50%',
backgroundColor: getStatusColor(user.status),
opacity: user.status === 'active' ? 1 : 0.7,
}}
/>
<span
style={{
fontSize: '10px',
color: getStatusColor(user.status),
textTransform: 'capitalize',
}}
>
{user.status}
</span>
</span>
{/* User info */}
{/* Avatar */}
<div
style={{
flex: 1,
width: '36px',
height: '36px',
borderRadius: '50%',
backgroundColor: user.cursor?.color || '#cbd5e1',
display: 'flex',
flexDirection: 'column',
gap: '2px',
alignItems: 'center',
justifyContent: 'center',
fontSize: '14px',
fontWeight: '600',
color: '#fff',
position: 'relative',
}}
>
{user.userName.charAt(0).toUpperCase()}
{/* Status indicator */}
<span
style={{
position: 'absolute',
bottom: '0',
right: '0',
width: '10px',
height: '10px',
borderRadius: '50%',
backgroundColor: getStatusIndicatorColor(user),
border: '2px solid #fff',
}}
/>
</div>
{/* User info */}
<div style={{ flex: 1, minWidth: 0 }}>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '6px',
fontWeight: '500',
fontSize: '13px',
fontWeight: isLocal ? '600' : '500',
color: '#1e293b',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
<span
style={{
width: '12px',
height: '12px',
borderRadius: '50%',
backgroundColor: user.color,
display: 'inline-block',
}}
/>
<span>{user.name}</span>
{isLocal && (
<span
style={{
fontSize: '10px',
color: '#64748b',
backgroundColor: '#94a3b820',
padding: '1px 4px',
borderRadius: '3px',
}}
>
You
</span>
)}
{user.userName}
</div>
{/* Editing context */}
<div
style={{
fontSize: '11px',
color: '#64748b',
color: user.isEditing ? '#22c55e' : '#94a3b8',
}}
>
{user.editingContext ? (
<span>
<strong>Editing:</strong> {formatEditingContext(user.editingContext)}
</span>
) : (
<span>Browsing</span>
)}
{user.isEditing ? 'Editing...' : `Idle (${getElapsedTime(user.lastActive)})`}
</div>
{/* Cursor position */}
{user.cursorPosition !== null && (
<div
style={{
fontSize: '10px',
color: '#94a3b8',
}}
>
Cursor: {formatCursorPosition(user.cursorPosition)}
{user.selectionStart !== null && user.selectionEnd !== null && (
<span>
{' '}({user.selectionEnd - user.selectionStart} selected)
</span>
)}
{user.cursor && (
<div style={{ fontSize: '11px', color: '#64748b', marginTop: '2px' }}>
Position: {user.cursor.position}
</div>
)}
</div>
</li>
);
}}
</For>
</ul>
<div
style={{
marginTop: 'auto',
padding: '6px',
fontSize: '10px',
color: '#94a3b8',
textAlign: 'center',
borderTop: '1px solid #e2e8f0',
}}
>
{users().length} remote collaborators connected
</div>
{/* Video call button */}
{props.onVideoCallInitiate && (
<button
onClick={() => props.onVideoCallInitiate!(user.userId)}
style={{
padding: '6px 10px',
backgroundColor: '#3b82f6',
color: '#fff',
border: 'none',
borderRadius: '4px',
fontSize: '11px',
cursor: 'pointer',
transition: 'background-color 0.2s',
}}
title="Start video call"
>
📹 Video
</button>
)}
</div>
))
)}
</div>
)}
</div>
);
};

156
src/components/collaboration/remote-cursor.tsx Normal file
View File

@@ -0,0 +1,156 @@
/**
* Remote Cursor Component
* Renders remote users' cursors in the editor
*/
import { Component, For, createSignal, onMount } from 'solid-js';
import { CursorPosition, RemoteUser } from '../../lib/collaboration/presence';
export interface RemoteCursorProps {
getRemoteUsers: () => Map<string, RemoteUser>;
editorRef: HTMLTextAreaElement | undefined;
className?: string;
}
interface CursorOverlay {
userId: string;
userName: string;
position: number;
color: string;
selection?: { anchor: number; head: number };
}
export const RemoteCursor: Component<RemoteCursorProps> = (props) => {
const [cursors, setCursors] = createSignal<CursorOverlay[]>([]);
const [cursorElements, setCursorElements] = createSignal<Map<string, HTMLDivElement>>(new Map());
onMount(() => {
const updateCursors = () => {
const userMap = props.getRemoteUsers();
const newCursors: CursorOverlay[] = [];
userMap.forEach((user: RemoteUser) => {
if (user.cursor) {
newCursors.push({
userId: user.userId,
userName: user.userName,
position: user.cursor.position,
color: user.cursor.color,
selection: user.selection,
});
}
});
setCursors(newCursors);
};
updateCursors();
// Poll for cursor updates
const interval = setInterval(updateCursors, 100);
return () => {
clearInterval(interval);
};
});
const getPositionCoordinates = (position: number): { top: number; left: number } => {
if (!props.editorRef) {
return { top: 0, left: 0 };
}
const text = props.editorRef.value;
const textBeforeCursor = text.slice(0, position);
const lines = textBeforeCursor.split('\n');
const lineNumber = lines.length - 1;
const columnNumber = lines[lines.length - 1].length;
// Approximate coordinates (in production, use proper text measurement)
const lineHeight = 21; // 1.5 * 14px font size
const charWidth = 8.4; // Approximate monospace char width
return {
top: lineNumber * lineHeight + 16, // +16 for padding
left: columnNumber * charWidth + 16, // +16 for padding
};
};
return (
<div
class={props.className || 'remote-cursor-container'}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
pointerEvents: 'none',
overflow: 'hidden',
}}
>
<For each={cursors()}>
{(cursor) => {
const coords = getPositionCoordinates(cursor.position);
return (
<>
{/* Cursor caret */}
<div
ref={(el) => {
const map = new Map(cursorElements());
map.set(cursor.userId, el);
setCursorElements(map);
}}
style={{
position: 'absolute',
top: `${coords.top}px`,
left: `${coords.left}px`,
width: '2px',
height: '18px',
backgroundColor: cursor.color,
zIndex: 10,
}}
/>
{/* User label */}
<div
style={{
position: 'absolute',
top: `${coords.top - 18}px`,
left: `${coords.left}px`,
backgroundColor: cursor.color,
color: '#fff',
fontSize: '11px',
fontWeight: '500',
padding: '2px 6px',
borderRadius: '3px 3px 3px 0',
whiteSpace: 'nowrap',
zIndex: 11,
}}
>
{cursor.userName}
</div>
{/* Selection highlight */}
{cursor.selection && (
<div
style={{
position: 'absolute',
top: `${coords.top}px`,
left: `${coords.left}px`,
width: `${Math.abs(cursor.selection.head - cursor.selection.anchor) * 8.4}px`,
height: '18px',
backgroundColor: `${cursor.color}30`,
zIndex: 9,
}}
/>
)}
</>
);
}}
</For>
</div>
);
};
export default RemoteCursor;

94
src/components/dashboard/Dashboard.tsx Normal file
View File

@@ -0,0 +1,94 @@
import { Component } from 'solid-js';
import { A } from '@solidjs/router';
import { useAuth } from '../../lib/auth';
import { createProjectService } from '../../lib/projects/service';
export const Dashboard: Component = () => {
const auth = useAuth();
const projectService = createProjectService();
return (
<div class="freno-dashboard">
<div class="freno-welcome">
<h1>Welcome back, {auth().user?.name?.split(' ')[0] || 'there'}!</h1>
<p>Here's what's happening with your projects.</p>
</div>
<div class="freno-stats-grid">
<div class="freno-stat-card">
<div class="freno-stat-value">{projectService.projects().length}</div>
<div class="freno-stat-label">Total Projects</div>
</div>
<div class="freno-stat-card">
<div class="freno-stat-value">
{projectService.projects().filter((p) => p.status === 'active').length}
</div>
<div class="freno-stat-label">Active</div>
</div>
<div class="freno-stat-card">
<div class="freno-stat-value">
{projectService.projects().filter((p) => p.status === 'draft').length}
</div>
<div class="freno-stat-label">Drafts</div>
</div>
<div class="freno-stat-card">
<div class="freno-stat-value">
{projectService.projects().filter((p) => p.collaborators.length > 0).length}
</div>
<div class="freno-stat-label">Shared</div>
</div>
</div>
<div class="freno-section">
<div class="freno-section-header">
<h2>Recent Projects</h2>
<A href="/projects/new" class="freno-btn freno-btn-primary">
+ New Project
</A>
</div>
<div class="freno-project-grid">
{projectService.projects().length === 0 ? (
<div class="freno-empty-state">
<div class="freno-empty-icon">📝</div>
<h3>No projects yet</h3>
<p>Create your first project to start writing collaboratively.</p>
<A href="/projects/new" class="freno-btn freno-btn-primary">
Create Project
</A>
</div>
) : (
projectService.projects().slice(0, 6).map((project) => (
<A href={`/projects/${project.id}`} class="freno-project-card">
<div class="freno-project-card-header">
<h3>{project.name}</h3>
<span class={`freno-badge freno-badge-${project.status}`}>
{project.status}
</span>
</div>
<p class="freno-project-card-desc">{project.description}</p>
<div class="freno-project-card-footer">
<div class="freno-collaborators">
{project.collaborators.slice(0, 3).map((_, i) => (
<div class="freno-avatar-small" style={`--i: ${i}`}>
{String.fromCharCode(65 + i)}
</div>
))}
{project.collaborators.length > 3 && (
<div class="freno-avatar-more">
+{project.collaborators.length - 3}
</div>
)}
</div>
<span class="freno-date">
{new Date(project.updatedAt).toLocaleDateString()}
</span>
</div>
</A>
))
)}
</div>
</div>
</div>
);
};

2
src/components/editor/collaborative-editor.tsx
View File

@@ -5,7 +5,7 @@
import { Component, createEffect, onMount } from 'solid-js';
import { Doc, Text } from 'yjs';
import { useCollaborativeText } from './solid-bindings';
import { useCollaborativeText } from '../../lib/collaboration/solid-bindings';
export interface CollaborativeEditorProps {
doc: Doc;

88
src/components/layout/AppLayout.tsx Normal file
View File

@@ -0,0 +1,88 @@
import { Component, createSignal, Show } from 'solid-js';
import { A } from '@solidjs/router';
import { useAuth, useAuthActions } from '../../lib/auth';
export const AppLayout: Component<any> = (props) => {
const auth = useAuth();
const { signOut } = useAuthActions();
const [sidebarOpen, setSidebarOpen] = createSignal(true);
return (
<div class="freno-layout">
<aside class="freno-sidebar" classList={{ 'freno-sidebar-collapsed': !sidebarOpen() }}>
<div class="freno-sidebar-header">
<div class="freno-logo">
<span class="freno-logo-icon">F</span>
<span class="freno-logo-text">FrenoCorp</span>
</div>
<button class="freno-sidebar-toggle" onClick={() => setSidebarOpen(!sidebarOpen())}>
{sidebarOpen() ? '◀' : '▶'}
</button>
</div>
<nav class="freno-sidebar-nav">
<A href="/dashboard" class="freno-nav-link" end>
<span class="freno-nav-icon">📊</span>
<span class="freno-nav-text">Dashboard</span>
</A>
<A href="/projects" class="freno-nav-link">
<span class="freno-nav-icon">📁</span>
<span class="freno-nav-text">Projects</span>
</A>
<A href="/teams" class="freno-nav-link">
<span class="freno-nav-icon">👥</span>
<span class="freno-nav-text">Teams</span>
</A>
</nav>
<div class="freno-sidebar-footer">
<div class="freno-user-menu">
<A href="/profile" class="freno-user-link">
<div class="freno-avatar">
{auth().user?.name?.charAt(0)?.toUpperCase() || 'U'}
</div>
<div class="freno-user-info">
<div class="freno-user-name">{auth().user?.name || 'User'}</div>
<div class="freno-user-email">{auth().user?.email}</div>
</div>
</A>
<button class="freno-btn-icon" onClick={signOut} title="Sign out">
⏻
</button>
</div>
</div>
</aside>
<main class="freno-main">
<header class="freno-header">
<button class="freno-mobile-menu" onClick={() => setSidebarOpen(!sidebarOpen())}>
☰
</button>
<div class="freno-header-content">
<h2 class="freno-page-title">{getPageTitle()}</h2>
</div>
<div class="freno-header-actions">
<button class="freno-btn-icon" title="Notifications">🔔</button>
<button class="freno-btn-icon" title="Settings">⚙</button>
</div>
</header>
<div class="freno-content">
{props.children}
</div>
</main>
</div>
);
};
function getPageTitle(): string {
const path = window.location.pathname;
const titles: Record<string, string> = {
'/dashboard': 'Dashboard',
'/projects': 'Projects',
'/projects/new': 'New Project',
'/profile': 'Profile',
'/teams': 'Teams',
};
return titles[path] || 'FrenoCorp';
}

213
src/components/projects/ProjectDetail.tsx Normal file
View File

@@ -0,0 +1,213 @@
import { Component, createSignal, Show } from 'solid-js';
import { A, useNavigate, useParams } from '@solidjs/router';
import { useAuth, UserRole } from '../../lib/auth';
import { createProjectService } from '../../lib/projects/service';
export const ProjectDetail: Component<any> = () => {
const params = useParams();
const navigate = useNavigate();
const auth = useAuth();
const projectService = createProjectService();
const [showDeleteConfirm, setShowDeleteConfirm] = createSignal(false);
const [showAddCollab, setShowAddCollab] = createSignal(false);
const [newUserId, setNewUserId] = createSignal('');
const [newRole, setNewRole] = createSignal<UserRole>('editor');
const [activeTab, setActiveTab] = createSignal<'overview' | 'collaborators' | 'settings'>('overview');
const project = () => projectService.projects().find((p) => p.id === params.id);
const isOwner = () => {
const p = project();
const user = auth().user;
return p?.ownerId === user?.id;
};
const handleDelete = async () => {
await projectService.deleteProject(params.id!);
navigate('/projects');
};
const handleArchive = async () => {
await projectService.archiveProject(params.id!);
};
const handleAddCollaborator = async () => {
if (!newUserId().trim()) return;
const p = project();
if (!p) return;
await projectService.addCollaborator(p.id, newUserId().trim(), newRole());
setNewUserId('');
setShowAddCollab(false);
};
const formatDate = (dateStr: string) => {
return new Date(dateStr).toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
});
};
return (
<div class="freno-project-detail">
<Show when={project()} keyed>
{(proj) => (
<>
<div class="freno-page-header">
<div>
<div class="freno-breadcrumb">
<A href="/projects">Projects</A>
<span> / </span>
<span>{proj.name}</span>
</div>
<h1>{proj.name}</h1>
</div>
<div class="freno-header-actions">
<A href={`/projects/${proj.id}/edit`} class="freno-btn freno-btn-secondary">
Edit
</A>
</div>
</div>
<div class="freno-tabs">
<button
class={`freno-tab ${activeTab() === 'overview' ? 'freno-tab-active' : ''}`}
onClick={() => setActiveTab('overview')}
>
Overview
</button>
<button
class={`freno-tab ${activeTab() === 'collaborators' ? 'freno-tab-active' : ''}`}
onClick={() => setActiveTab('collaborators')}
>
Collaborators ({proj.collaborators.length})
</button>
<button
class={`freno-tab ${activeTab() === 'settings' ? 'freno-tab-active' : ''}`}
onClick={() => setActiveTab('settings')}
>
Settings
</button>
</div>
<Show when={activeTab() === 'overview'}>
<div class="freno-info-card">
<h3>Description</h3>
<p>{proj.description || 'No description provided.'}</p>
</div>
<div class="freno-info-card">
<h3>Details</h3>
<dl class="freno-dl">
<dt>Status</dt>
<dd><span class={`freno-badge freno-badge-${proj.status}`}>{proj.status}</span></dd>
<dt>Created</dt>
<dd>{formatDate(proj.createdAt)}</dd>
<dt>Last Updated</dt>
<dd>{formatDate(proj.updatedAt)}</dd>
<dt>Owner</dt>
<dd>{auth().user?.name}</dd>
</dl>
</div>
</Show>
<Show when={activeTab() === 'collaborators'}>
<div class="freno-section">
<div class="freno-section-header">
<h2>Collaborators</h2>
{isOwner() && (
<button class="freno-btn freno-btn-primary" onClick={() => setShowAddCollab(true)}>
+ Add
</button>
)}
</div>
{showAddCollab() && (
<div class="freno-add-collaborator">
<input
type="text"
placeholder="User ID"
value={newUserId()}
onInput={(e) => setNewUserId(e.target.value)}
class="freno-input"
/>
<select
value={newRole()}
onChange={(e) => setNewRole(e.target.value as UserRole)}
class="freno-select"
>
<option value="viewer">Viewer</option>
<option value="editor">Editor</option>
<option value="admin">Admin</option>
</select>
<button class="freno-btn freno-btn-primary" onClick={handleAddCollaborator}>
Add
</button>
<button class="freno-btn freno-btn-secondary" onClick={() => setShowAddCollab(false)}>
Cancel
</button>
</div>
)}
<div class="freno-collaborator-list">
{proj.collaborators.map((collab) => (
<div class="freno-collaborator-item">
<span class="freno-user-id">{collab.userId}</span>
<span class={`freno-badge freno-badge-${collab.role}`}>{collab.role}</span>
</div>
))}
</div>
</div>
</Show>
<Show when={activeTab() === 'settings'}>
<div class="freno-settings">
<div class="freno-info-card">
<h3>Danger Zone</h3>
<p>Permanently delete this project and all its data.</p>
{isOwner() && proj.status !== 'archived' && (
<button class="freno-btn freno-btn-warning" onClick={handleArchive}>
Archive Project
</button>
)}
{isOwner() && (
<button class="freno-btn freno-btn-danger" onClick={() => setShowDeleteConfirm(true)}>
Delete Project
</button>
)}
</div>
</div>
</Show>
{showDeleteConfirm() && (
<div class="freno-modal-overlay" onClick={() => setShowDeleteConfirm(false)}>
<div class="freno-modal" onClick={(e) => e.stopPropagation()}>
<h3>Delete Project?</h3>
<p>This action cannot be undone.</p>
<div class="freno-modal-actions">
<button class="freno-btn freno-btn-secondary" onClick={() => setShowDeleteConfirm(false)}>
Cancel
</button>
<button class="freno-btn freno-btn-danger" onClick={handleDelete}>
Delete
</button>
</div>
</div>
</div>
)}
</>
)}
</Show>
<Show when={!project()}>
<div class="freno-empty-state">
<div class="freno-empty-icon">🔍</div>
<h3>Project not found</h3>
<A href="/projects" class="freno-btn freno-btn-primary">
Back to Projects
</A>
</div>
</Show>
</div>
);
};

81
src/components/projects/ProjectForm.tsx Normal file
View File

@@ -0,0 +1,81 @@
import { Component, createSignal } from 'solid-js';
import { useNavigate } from '@solidjs/router';
import { useAuth } from '../../lib/auth';
import { createProjectService } from '../../lib/projects/service';
export const ProjectForm: Component<any> = () => {
const auth = useAuth();
const navigate = useNavigate();
const projectService = createProjectService();
const [name, setName] = createSignal('');
const [description, setDescription] = createSignal('');
const [error, setError] = createSignal('');
const handleSubmit = async (e: Event) => {
e.preventDefault();
if (!name().trim()) {
setError('Project name is required');
return;
}
try {
const project = await projectService.createProject(
name().trim(),
description().trim(),
auth().user!.id
);
navigate(`/projects/${project.id}`);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to create project');
}
};
return (
<div class="freno-project-form">
<div class="freno-page-header">
<h1>New Project</h1>
<button class="freno-btn freno-btn-secondary" onClick={() => navigate('/projects')}>
Cancel
</button>
</div>
{error() && (
<div class="freno-alert freno-alert-error">{error()}</div>
)}
<form class="freno-form" onSubmit={handleSubmit}>
<div class="freno-form-group">
<label class="freno-label" for="project-name">Project Name</label>
<input
class="freno-input"
id="project-name"
type="text"
placeholder="My Screenplay"
value={name()}
onInput={(e) => setName(e.target.value)}
autofocus
/>
</div>
<div class="freno-form-group">
<label class="freno-label" for="project-desc">Description</label>
<textarea
class="freno-textarea"
id="project-desc"
placeholder="A brief description of your project..."
value={description()}
onInput={(e) => setDescription(e.target.value)}
rows={4}
/>
</div>
<div class="freno-form-actions">
<button type="submit" class="freno-btn freno-btn-primary">
Create Project
</button>
</div>
</form>
</div>
);
};

99
src/components/projects/ProjectList.tsx Normal file
View File

@@ -0,0 +1,99 @@
import { Component, createSignal } from 'solid-js';
import { A } from '@solidjs/router';
import { useAuth } from '../../lib/auth';
import { createProjectService } from '../../lib/projects/service';
export const ProjectList: Component = () => {
const auth = useAuth();
const projectService = createProjectService();
const [search, setSearch] = createSignal('');
const [filter, setFilter] = createSignal<'all' | 'active' | 'draft' | 'archived'>('all');
const filteredProjects = () => {
let projects = projectService.projects();
if (filter() !== 'all') {
projects = projects.filter((p) => p.status === filter());
}
if (search()) {
const q = search().toLowerCase();
projects = projects.filter(
(p) => p.name.toLowerCase().includes(q) || p.description.toLowerCase().includes(q)
);
}
return projects;
};
const formatDate = (dateStr: string) => {
return new Date(dateStr).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
});
};
return (
<div class="freno-project-list">
<div class="freno-page-header">
<h1>Projects</h1>
<A href="/projects/new" class="freno-btn freno-btn-primary">
+ New Project
</A>
</div>
<div class="freno-toolbar">
<div class="freno-search-box">
<input
type="text"
placeholder="Search projects..."
value={search()}
onInput={(e) => setSearch(e.target.value)}
class="freno-input"
/>
</div>
<div class="freno-filter-tabs">
{(['all', 'active', 'draft', 'archived'] as const).map((f) => (
<button
class={`freno-tab ${filter() === f ? 'freno-tab-active' : ''}`}
onClick={() => setFilter(f)}
>
{f.charAt(0).toUpperCase() + f.slice(1)}
</button>
))}
</div>
</div>
<div class="freno-project-grid">
{filteredProjects().length === 0 ? (
<div class="freno-empty-state">
<div class="freno-empty-icon">📁</div>
<h3>No projects found</h3>
<p>
{search() || filter() !== 'all'
? 'Try adjusting your search or filters.'
: 'Create your first project to get started.'}
</p>
</div>
) : (
filteredProjects().map((project) => (
<A href={`/projects/${project.id}`} class="freno-project-card">
<div class="freno-project-card-header">
<h3>{project.name}</h3>
<span class={`freno-badge freno-badge-${project.status}`}>
{project.status}
</span>
</div>
<p class="freno-project-card-desc">{project.description}</p>
<div class="freno-project-card-footer">
<span class="freno-collab-count">
{project.collaborators.length} collaborator{project.collaborators.length !== 1 ? 's' : ''}
</span>
<span class="freno-date">Updated {formatDate(project.updatedAt)}</span>
</div>
</A>
))
)}
</div>
</div>
);
};

96
src/components/projects/SharingPanel.tsx Normal file
View File

@@ -0,0 +1,96 @@
import { Component, createSignal } from 'solid-js';
import { useAuth, UserRole } from '../../lib/auth';
import { createProjectService } from '../../lib/projects/service';
import { Project } from '../../lib/auth/types';
interface SharingPanelProps {
project: Project;
}
export const SharingPanel: Component<SharingPanelProps> = (props) => {
const auth = useAuth();
const projectService = createProjectService();
const [email, setEmail] = createSignal('');
const [role, setRole] = createSignal<UserRole>('editor');
const handleAddCollaborator = async () => {
if (!email().trim()) return;
const userId = `user_${email().toLowerCase().replace(/[^a-z0-9]/g, '')}`;
await projectService.addCollaborator(props.project.id, userId, role());
setEmail('');
};
const handleRemoveCollaborator = async (userId: string) => {
await projectService.removeCollaborator(props.project.id, userId);
};
return (
<div class="freno-sharing-panel">
<div class="freno-share-section">
<h3>Add Collaborator</h3>
<div class="freno-add-collaborator">
<input
class="freno-input"
type="email"
placeholder="Enter email address"
value={email()}
onInput={(e) => setEmail(e.target.value)}
/>
<select class="freno-select" value={role()} onChange={(e) => setRole(e.target.value as UserRole)}>
<option value="viewer">Viewer</option>
<option value="editor">Editor</option>
<option value="admin">Admin</option>
</select>
<button class="freno-btn freno-btn-primary" onClick={handleAddCollaborator}>
Invite
</button>
</div>
</div>
<div class="freno-share-section">
<h3>Collaborators</h3>
<div class="freno-collaborator-list">
<div class="freno-collaborator-item freno-collaborator-owner">
<div class="freno-avatar">{auth().user?.name?.charAt(0)?.toUpperCase() || 'O'}</div>
<div class="freno-collaborator-info">
<div class="freno-collaborator-name">{auth().user?.name}</div>
<div class="freno-collaborator-email">{auth().user?.email}</div>
</div>
<span class="freno-badge freno-badge-owner">Owner</span>
</div>
{props.project.collaborators.map((collab) => (
<div class="freno-collaborator-item">
<div class="freno-avatar">{String.fromCharCode(65 + Math.abs(collab.userId.charCodeAt(0) || 0) % 26)}</div>
<div class="freno-collaborator-info">
<div class="freno-collaborator-name">{collab.userId}</div>
<div class="freno-collaborator-email">{collab.userId}@example.com</div>
</div>
<span class={`freno-badge freno-badge-${collab.role}`}>{collab.role}</span>
<button
class="freno-btn-icon freno-remove-collab"
onClick={() => handleRemoveCollaborator(collab.userId)}
>
✕
</button>
</div>
))}
</div>
</div>
<div class="freno-share-section">
<h3>Share Link</h3>
<div class="freno-share-link">
<input
class="freno-input"
type="text"
readonly
value={`${window.location.origin}/projects/${props.project.id}`}
/>
<button class="freno-btn freno-btn-secondary">Copy</button>
</div>
</div>
</div>
);
};

90
src/components/teams/TeamManagement.tsx Normal file
View File

@@ -0,0 +1,90 @@
import { Component, createSignal } from 'solid-js';
import { A } from '@solidjs/router';
import { useAuth } from '../../lib/auth';
import { Team } from '../../lib/auth/types';
export const TeamManagement: Component<any> = () => {
const auth = useAuth();
const [teams] = createSignal<Team[]>([
{
id: 'team_default',
name: 'My Workspace',
members: [
{ userId: auth().user?.id || '', role: 'owner', joinedAt: new Date().toISOString() },
],
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
},
]);
const [showCreateDialog, setShowCreateDialog] = createSignal(false);
const [newTeamName, setNewTeamName] = createSignal('');
return (
<div class="freno-teams">
<div class="freno-page-header">
<h1>Teams</h1>
<button
class="freno-btn freno-btn-primary"
onClick={() => setShowCreateDialog(true)}
>
+ New Team
</button>
</div>
<div class="freno-team-grid">
{teams().map((team) => (
<A href={`/teams/${team.id}`} class="freno-team-card">
<div class="freno-team-icon">👥</div>
<h3>{team.name}</h3>
<p class="freno-team-members">{team.members.length} member{team.members.length !== 1 ? 's' : ''}</p>
<span class="freno-date">
Created {new Date(team.createdAt).toLocaleDateString()}
</span>
</A>
))}
<button class="freno-team-card freno-team-card-new" onClick={() => setShowCreateDialog(true)}>
<div class="freno-team-icon">+</div>
<h3>Create Team</h3>
</button>
</div>
{showCreateDialog() && (
<div class="freno-modal-overlay" onClick={() => setShowCreateDialog(false)}>
<div class="freno-modal" onClick={(e) => e.stopPropagation()}>
<div class="freno-modal-header">
<h2>Create New Team</h2>
<button class="freno-btn-icon" onClick={() => setShowCreateDialog(false)}>✕</button>
</div>
<form class="freno-form" onSubmit={(e) => {
e.preventDefault();
if (newTeamName().trim()) {
setShowCreateDialog(false);
setNewTeamName('');
}
}}>
<div class="freno-form-group">
<label class="freno-label" for="team-name">Team Name</label>
<input
class="freno-input"
id="team-name"
type="text"
placeholder="My Writing Team"
value={newTeamName()}
onInput={(e) => setNewTeamName(e.target.value)}
autofocus
/>
</div>
<div class="freno-form-actions">
<button type="submit" class="freno-btn freno-btn-primary">Create Team</button>
<button type="button" class="freno-btn freno-btn-secondary" onClick={() => setShowCreateDialog(false)}>
Cancel
</button>
</div>
</form>
</div>
</div>
)}
</div>
);
};

300
src/components/video/video-chat-overlay.tsx Normal file
View File

@@ -0,0 +1,300 @@
/**
* Video Chat Overlay Component
* UI overlay for WebRTC video chat with controls and participant views
*/
import { Component, createSignal, onMount, Show } from 'solid-js';
import { WebRTCVideoManager, ConnectionQuality } from '../../lib/video/webrtc-video-manager';
export interface VideoChatOverlayProps {
videoManager: WebRTCVideoManager;
remotePeerId?: string;
className?: string;
showControls?: boolean;
}
export const VideoChatOverlay: Component<VideoChatOverlayProps> = (props) => {
let localVideoRef: HTMLVideoElement | undefined;
let remoteVideoRef: HTMLVideoElement | undefined;
const [isAudioMuted, setIsAudioMuted] = createSignal(false);
const [isVideoOff, setIsVideoOff] = createSignal(false);
const [connectionQuality, setConnectionQuality] = createSignal<ConnectionQuality>('fair');
const [isConnected, setIsConnected] = createSignal(false);
const onMountCleanup = onMount(() => {
const videoManager = props.videoManager;
const localStream = videoManager.getLocalStream();
if (localStream && localVideoRef) {
localVideoRef.srcObject = localStream;
}
const handleLocalStream = (stream: MediaStream) => {
if (localVideoRef) {
localVideoRef.srcObject = stream;
}
};
const handlePeerConnected = (peerId: string, stream: MediaStream) => {
setIsConnected(true);
if (props.remotePeerId === peerId && remoteVideoRef) {
remoteVideoRef.srcObject = stream;
}
};
const handlePeerDisconnected = (peerId: string) => {
if (props.remotePeerId === peerId) {
setIsConnected(false);
}
};
const handleConnectionQuality = (peerId: string, quality: ConnectionQuality) => {
if (props.remotePeerId === peerId) {
setConnectionQuality(quality);
}
};
videoManager.on('local:stream', handleLocalStream);
videoManager.on('peer:connected', handlePeerConnected);
videoManager.on('peer:disconnected', handlePeerDisconnected);
videoManager.on('connection:quality', handleConnectionQuality);
if (props.remotePeerId) {
videoManager.connectToPeer(props.remotePeerId);
}
return () => {
videoManager.off('local:stream', handleLocalStream);
videoManager.off('peer:connected', handlePeerConnected);
videoManager.off('peer:disconnected', handlePeerDisconnected);
videoManager.off('connection:quality', handleConnectionQuality);
};
});
const handleToggleAudio = () => {
props.videoManager.toggleAudio();
setIsAudioMuted(!props.videoManager.isAudioEnabled());
};
const handleToggleVideo = () => {
props.videoManager.toggleVideo();
setIsVideoOff(!props.videoManager.isVideoEnabled());
};
const handleHangup = () => {
if (props.remotePeerId) {
props.videoManager.disconnectFromPeer(props.remotePeerId);
setIsConnected(false);
}
};
const getConnectionQualityIndicator = (quality: ConnectionQuality): string => {
switch (quality) {
case 'excellent':
case 'good':
return '#22c55e';
case 'fair':
return '#eab308';
case 'poor':
return '#ef4444';
default:
return '#94a3b8';
}
};
return (
<div
class={props.className || 'video-chat-overlay'}
style={{
display: 'flex',
flexDirection: 'column',
gap: '12px',
width: '100%',
maxWidth: '800px',
margin: '0 auto',
}}
>
<div
style={{
display: 'grid',
gridTemplateColumns: props.remotePeerId ? '1fr 1fr' : '1fr',
gap: '8px',
}}
>
<div
style={{
position: 'relative',
backgroundColor: '#1e293b',
borderRadius: '8px',
overflow: 'hidden',
aspectRatio: '16/9',
}}
>
<video
ref={localVideoRef}
autoplay
muted
playsinline
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
}}
/>
<div
style={{
position: 'absolute',
bottom: '8px',
left: '8px',
backgroundColor: 'rgba(0, 0, 0, 0.6)',
color: 'white',
padding: '4px 8px',
borderRadius: '4px',
fontSize: '12px',
}}
>
You
</div>
</div>
<Show when={props.remotePeerId && isConnected()}>
<div
style={{
position: 'relative',
backgroundColor: '#1e293b',
borderRadius: '8px',
overflow: 'hidden',
aspectRatio: '16/9',
}}
>
<video
ref={remoteVideoRef}
autoplay
playsinline
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
}}
/>
<div
style={{
position: 'absolute',
bottom: '8px',
left: '8px',
backgroundColor: 'rgba(0, 0, 0, 0.6)',
color: 'white',
padding: '4px 8px',
borderRadius: '4px',
fontSize: '12px',
}}
>
Remote
</div>
<div
style={{
position: 'absolute',
top: '8px',
right: '8px',
display: 'flex',
alignItems: 'center',
gap: '4px',
backgroundColor: `${getConnectionQualityIndicator(connectionQuality())}20`,
padding: '4px 8px',
borderRadius: '4px',
fontSize: '12px',
}}
>
<span
style={{
width: '8px',
height: '8px',
borderRadius: '50%',
backgroundColor: connectionQuality(),
}}
/>
{connectionQuality()}
</div>
</div>
</Show>
</div>
<Show when={props.showControls}>
<div
style={{
display: 'flex',
justifyContent: 'center',
gap: '8px',
padding: '12px',
backgroundColor: '#f1f5f9',
borderRadius: '8px',
}}
>
<button
onClick={handleToggleAudio}
style={{
display: 'flex',
alignItems: 'center',
gap: '6px',
padding: '8px 16px',
borderRadius: '6px',
border: 'none',
backgroundColor: isAudioMuted() ? '#ef4444' : '#22c55e',
color: 'white',
cursor: 'pointer',
fontSize: '14px',
fontWeight: '500',
}}
>
{isAudioMuted() ? '🔇' : '🎤'}
{isAudioMuted() ? 'Unmute' : 'Mute'}
</button>
<button
onClick={handleToggleVideo}
style={{
display: 'flex',
alignItems: 'center',
gap: '6px',
padding: '8px 16px',
borderRadius: '6px',
border: 'none',
backgroundColor: isVideoOff() ? '#ef4444' : '#22c55e',
color: 'white',
cursor: 'pointer',
fontSize: '14px',
fontWeight: '500',
}}
>
{isVideoOff() ? '📹' : '🎥'}
{isVideoOff() ? 'Turn On' : 'Off'}
</button>
<Show when={isConnected()}>
<button
onClick={handleHangup}
style={{
display: 'flex',
alignItems: 'center',
gap: '6px',
padding: '8px 16px',
borderRadius: '6px',
border: 'none',
backgroundColor: '#ef4444',
color: 'white',
cursor: 'pointer',
fontSize: '14px',
fontWeight: '500',
}}
>
📞 Hangup
</button>
</Show>
</div>
</Show>
</div>
);
};
export default VideoChatOverlay;

103
src/index.css Normal file
View File

@@ -0,0 +1,103 @@
:root {
--color-bg-primary: #0a0a0a;
--color-bg-secondary: #141414;
--color-bg-tertiary: #1a1a1a;
--color-bg-elevated: #222222;
--color-text-primary: #f5f5f5;
--color-text-secondary: #a3a3a3;
--color-text-muted: #737373;
--color-border: #262626;
--color-border-hover: #404040;
--color-accent: #3b82f6;
--color-accent-hover: #2563eb;
--color-accent-muted: rgba(59, 130, 246, 0.15);
--color-success: #22c55e;
--color-warning: #eab308;
--color-error: #ef4444;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
--sidebar-width: 260px;
--header-height: 56px;
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.freno-body {
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
background: var(--color-bg-primary);
color: var(--color-text-primary);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#root {
min-height: 100vh;
}
a {
color: var(--color-accent);
text-decoration: none;
}
a:hover {
color: var(--color-accent-hover);
}
button {
cursor: pointer;
border: none;
background: none;
font: inherit;
color: inherit;
}
input, textarea, select {
font: inherit;
color: inherit;
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 8px 12px;
outline: none;
transition: border-color var(--transition-fast);
}
input:focus, textarea:focus, select:focus {
border-color: var(--color-accent);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--color-bg-elevated);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-border-hover);
}
@media (max-width: 768px) {
:root {
--sidebar-width: 0px;
}
}

39
src/lib/auth/clerk-client.ts Normal file
View File

@@ -0,0 +1,39 @@
import { Clerk } from '@clerk/clerk-js';
const clerkPublishableKey = (import.meta as any).env?.VITE_CLERK_PUBLISHABLE_KEY || '';
const clerkSignInUrl = (import.meta as any).env?.VITE_CLERK_SIGN_IN_URL || '/sign-in';
const clerkSignUpUrl = (import.meta as any).env?.VITE_CLERK_SIGN_UP_URL || '/sign-up';
let clerk: Clerk | null = null;
export function getClerk(): Clerk | null {
if (clerk) return clerk;
if (!clerkPublishableKey) {
console.warn('Clerk publishable key not configured');
return null;
}
clerk = new Clerk(clerkPublishableKey);
return clerk;
}
export function getClerkUrls() {
return {
signInUrl: clerkSignInUrl,
signUpUrl: clerkSignUpUrl,
};
}
export async function loadClerk(): Promise<Clerk | null> {
const instance = getClerk();
if (!instance) return null;
try {
await instance.load();
return instance;
} catch (err) {
console.error('Failed to load Clerk:', err);
return null;
}
}

161
src/lib/auth/clerk-provider.tsx Normal file
View File

@@ -0,0 +1,161 @@
import { createContext, createSignal, useContext, onMount, Accessor, JSX } from 'solid-js';
import { getClerk, loadClerk, getClerkUrls } from './clerk-client';
import { User, UserRole, AuthState } from './types';
type ClerkUser = any;
interface ClerkSession {
getId: () => string;
getUser: () => ClerkUser;
}
interface ClerkClient {
user: () => ClerkUser | null;
session: () => ClerkSession | null;
isLoading: boolean;
signOut: () => Promise<void>;
}
const AuthContext = createContext<Accessor<AuthState> | undefined>(undefined);
const AuthActionsContext = createContext<{
signIn: () => void;
signOut: () => Promise<void>;
updateUser: (data: Partial<User>) => Promise<void>;
clerkClient: Accessor<ClerkClient | null>;
} | undefined>(undefined);
export { AuthContext, AuthActionsContext };
function clerkUserToUser(clerkUser: ClerkUser): User {
const primaryEmail = clerkUser.primaryEmailAddress?.emailAddress || '';
const firstName = clerkUser.firstName || '';
const lastName = clerkUser.lastName || '';
const name = [firstName, lastName].filter(Boolean).join(' ') || primaryEmail.split('@')[0] || 'User';
return {
id: clerkUser.id,
email: primaryEmail,
name,
avatarUrl: clerkUser.imageUrl,
role: 'owner' as UserRole,
};
}
export function ClerkProvider(props: { children: JSX.Element }) {
const [state, setState] = createSignal<AuthState>({
user: null,
isLoading: true,
isAuthenticated: false,
error: null,
});
const [clerkClient, setClerkClient] = createSignal<ClerkClient | null>(null);
onMount(async () => {
try {
const client = await loadClerk();
if (!client) {
setState({
user: null,
isLoading: false,
isAuthenticated: false,
error: 'Authentication service unavailable',
});
return;
}
const wrappedClient: ClerkClient = {
user: () => client.user,
session: () => (client.session as any) || null,
isLoading: false,
signOut: async () => {
await client.signOut();
setState({
user: null,
isLoading: false,
isAuthenticated: false,
error: null,
});
},
};
setClerkClient(wrappedClient);
if (client.user) {
setState({
user: clerkUserToUser(client.user),
isLoading: false,
isAuthenticated: true,
error: null,
});
} else {
setState((prev) => ({ ...prev, isLoading: false }));
}
} catch (err) {
setState({
user: null,
isLoading: false,
isAuthenticated: false,
error: err instanceof Error ? err.message : 'Failed to initialize auth',
});
}
});
const signIn = () => {
const urls = getClerkUrls();
window.location.href = urls.signInUrl;
};
const signOut = async () => {
const client = getClerk();
if (client) {
await client.signOut();
}
setState({
user: null,
isLoading: false,
isAuthenticated: false,
error: null,
});
};
const updateUser = async (data: Partial<User>) => {
setState((prev) => ({
...prev,
user: prev.user ? { ...prev.user, ...data } : null,
}));
};
return (
<AuthContext.Provider value={state}>
<AuthActionsContext.Provider value={{ signIn, signOut, updateUser, clerkClient }}>
{props.children}
</AuthActionsContext.Provider>
</AuthContext.Provider>
);
}
export function useAuth(): Accessor<AuthState> {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within a ClerkProvider');
}
return context;
}
export function useAuthActions() {
const context = useContext(AuthActionsContext);
if (!context) {
throw new Error('useAuthActions must be used within a ClerkProvider');
}
return context;
}
export function requireAuth() {
const auth = useAuth();
const authState = auth();
if (!authState.isAuthenticated) {
throw new Error('Authentication required');
}
return authState.user!;
}

3
src/lib/auth/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { useAuth, useAuthActions, requireAuth, ClerkProvider } from './clerk-provider';
export { getClerk, loadClerk, getClerkUrls } from './clerk-client';
export type { User, UserRole, Team, TeamMember, Project, ProjectStatus, ProjectCollaborator, AuthState, ClerkConfig } from './types';

8
src/lib/auth/provider.tsx Normal file
View File

@@ -0,0 +1,8 @@
export {
AuthContext,
AuthActionsContext,
useAuth,
useAuthActions,
requireAuth,
ClerkProvider as AuthProvider,
} from './clerk-provider';

56
src/lib/auth/types.ts Normal file
View File

@@ -0,0 +1,56 @@
export interface User {
id: string;
email: string;
name: string;
avatarUrl?: string;
role: UserRole;
}
export type UserRole = 'owner' | 'admin' | 'editor' | 'viewer';
export interface Team {
id: string;
name: string;
members: TeamMember[];
createdAt: string;
updatedAt: string;
}
export interface TeamMember {
userId: string;
role: UserRole;
joinedAt: string;
}
export interface Project {
id: string;
name: string;
description: string;
ownerId: string;
teamId?: string;
status: ProjectStatus;
collaborators: ProjectCollaborator[];
createdAt: string;
updatedAt: string;
}
export type ProjectStatus = 'draft' | 'active' | 'archived';
export interface ProjectCollaborator {
userId: string;
role: UserRole;
addedAt: string;
}
export interface AuthState {
user: User | null;
isLoading: boolean;
isAuthenticated: boolean;
error: string | null;
}
export interface ClerkConfig {
publishableKey: string;
signInUrl: string;
signUpUrl: string;
}

30
src/lib/collaboration/crdt-document.test.ts
View File

@@ -6,7 +6,7 @@
import { describe, it, expect, beforeEach } from 'vitest';
import { Doc, Text } from 'yjs';
import { applyUpdate, encodeStateAsUpdate } from 'yjs';
import { createScreenplayDoc, getOrCreateSharedTypes } from '../lib/collaboration/yjs-document';
import { createScreenplayDoc, getOrCreateSharedTypes } from './yjs-document';
describe('CRDT Operations', () => {
describe('Document Creation', () => {
@@ -27,13 +27,13 @@ describe('CRDT Operations', () => {
it('should initialize metadata with default values', () => {
const doc = createScreenplayDoc('project-1', {});
const metadata = doc.getMap('metadata').toJSON();
const metadata = doc.getMap('metadata');
expect(metadata.projectId).toBe('project-1');
expect(metadata.title).toBe('Untitled Screenplay');
expect(metadata.version).toBe(1);
expect(metadata.createdAt).toBeDefined();
expect(metadata.updatedAt).toBeDefined();
expect(metadata.get('projectId')).toBe('project-1');
expect(metadata.get('title')).toBe('Untitled Screenplay');
expect(metadata.get('version')).toBe(1);
expect(metadata.get('createdAt')).toBeDefined();
expect(metadata.get('updatedAt')).toBeDefined();
});
});
@@ -104,24 +104,25 @@ describe('CRDT Operations', () => {
});
describe('Undo/Redo', () => {
it('should undo and redo text changes', () => {
it('should undo and redo text changes', async () => {
const doc = new Doc();
const text = doc.getText('main');
const UndoManager = await import('yjs').then(m => m.UndoManager);
const { UndoManager } = await import('yjs');
const undoManager = new UndoManager([text]);
// Initial insert
// First operation - insert 'Hello'
text.insert(0, 'Hello');
undoManager.capture();
// Give UndoManager time to capture
await new Promise(resolve => setTimeout(resolve, 10));
// Second insert
// Second operation - insert ' World'
text.insert(5, ' World');
undoManager.capture();
await new Promise(resolve => setTimeout(resolve, 10));
expect(text.toString()).toBe('Hello World');
// Undo
// Undo the second operation
undoManager.undo();
expect(text.toString()).toBe('Hello');
@@ -145,6 +146,7 @@ describe('CRDT Operations', () => {
expect(metadata.get('title')).toBe('Updated Title');
expect(metadata.get('author')).toBe('Original Author');
expect(metadata.get('projectId')).toBe('project-1');
});
it('should track version increments', () => {

31
src/lib/collaboration/crdt-document.ts
View File

@@ -3,7 +3,7 @@
* Coordinates Yjs document lifecycle, persistence, and sync
*/
import { Doc, Text, Map as YMap, UndoManager } from 'yjs';
import { Doc, Text, Map as YMap, UndoManager, applyUpdate } from 'yjs';
import { WebSocketConnection, WebSocketConnectionManager } from './websocket-connection';
import { createScreenplayDoc, getOrCreateSharedTypes, ScreenplayMetadata } from './yjs-document';
@@ -13,8 +13,7 @@ export interface CRDTDocumentManager {
getMetadata(): ScreenplayMetadata;
getProvider(): any; // WebSocketProvider
applyRemoteUpdate(update: Uint8Array, origin: string): void;
createUndoStack(): UndoManager;
createRedoStack(): UndoManager;
getUndoManager(): UndoManager;
destroy(): void;
}
@@ -22,7 +21,6 @@ export class CRDTDocument implements CRDTDocumentManager {
private doc: Doc | null = null;
private connection: WebSocketConnectionManager | null = null;
private undoManager: UndoManager | null = null;
private redoManager: UndoManager | null = null;
private projectId: string | null = null;
async initialize(
@@ -53,16 +51,12 @@ export class CRDTDocument implements CRDTDocumentManager {
// Sync local document with remote state
// Yjs WebSocketProvider handles this automatically on connect
// Initialize undo/redo managers
// Initialize undo manager (single instance handles both undo and redo)
const sharedTypes = getOrCreateSharedTypes(this.doc);
this.undoManager = new UndoManager([sharedTypes.text], {
captureTimeout: 1000,
});
this.redoManager = new UndoManager([sharedTypes.text], {
captureTimeout: 1000,
});
return this.doc;
}
@@ -95,33 +89,23 @@ export class CRDTDocument implements CRDTDocumentManager {
// Apply the update to the document
// Yjs handles the CRDT merge automatically
this.doc.applyUpdate(update, origin);
this.doc.transact(() => {
applyUpdate(this.doc!, update);
}, origin);
}
createUndoStack(): UndoManager {
getUndoManager(): UndoManager {
if (!this.undoManager) {
throw new Error('Document not initialized. Call initialize() first.');
}
return this.undoManager;
}
createRedoStack(): UndoManager {
if (!this.redoManager) {
throw new Error('Document not initialized. Call initialize() first.');
}
return this.redoManager;
}
destroy(): void {
if (this.undoManager) {
this.undoManager.destroy();
this.undoManager = null;
}
if (this.redoManager) {
this.redoManager.destroy();
this.redoManager = null;
}
if (this.connection) {
this.connection.disconnect();
@@ -129,6 +113,7 @@ export class CRDTDocument implements CRDTDocumentManager {
}
if (this.doc) {
this.doc.destroy();
this.doc = null;
}

147
src/lib/collaboration/integration.test.ts Normal file
View File

@@ -0,0 +1,147 @@
/**
* Integration tests for WebSocket + Yjs CRDT sync
* Tests that two app instances can sync text changes via WebSocket
*/
import { describe, it, expect, beforeEach } from 'vitest';
import { Doc, Text, applyUpdate, encodeStateAsUpdate } from 'yjs';
import { createScreenplayDoc, getOrCreateSharedTypes } from './yjs-document';
describe('Integration: Two-instance sync', () => {
let doc1: Doc;
let doc2: Doc;
let text1: Text;
let text2: Text;
beforeEach(() => {
// Create two separate Yjs documents
doc1 = createScreenplayDoc('project-1', {
title: 'Test Screenplay',
author: 'Test Author',
});
doc2 = new Doc();
// Get text instances
text1 = doc1.getText('main');
text2 = doc2.getText('main');
});
it('should sync initial text from doc1 to doc2', () => {
// Insert text in doc1
text1.insert(0, 'Hello World');
// Encode doc1 state and apply to doc2
const update = encodeStateAsUpdate(doc1);
applyUpdate(doc2, update);
expect(text2.toString()).toBe('Hello World');
});
it('should sync concurrent edits correctly', () => {
// Both documents start with same base
text1.insert(0, 'Hello');
const initialUpdate = encodeStateAsUpdate(doc1);
applyUpdate(doc2, initialUpdate);
// Doc1 adds suffix
text1.insert(5, ' World');
const update1 = encodeStateAsUpdate(doc1);
applyUpdate(doc2, update1);
// Doc2 also adds the same suffix (simulating concurrent edit)
text2.insert(5, ' World');
const update2 = encodeStateAsUpdate(doc2);
applyUpdate(doc1, update2);
// Both should converge to the same state
expect(text1.toString()).toBe(text2.toString());
expect(text1.toString()).toBe('Hello World');
});
it('should handle delete operations across instances', () => {
// Setup: both have "Hello World"
text1.insert(0, 'Hello World');
let update = encodeStateAsUpdate(doc1);
applyUpdate(doc2, update);
// Doc1 deletes "World"
text1.delete(5, 5);
update = encodeStateAsUpdate(doc1);
applyUpdate(doc2, update);
expect(text1.toString()).toBe('Hello ');
expect(text2.toString()).toBe('Hello ');
});
it('should sync metadata changes', () => {
// Update metadata in doc1
const meta1 = doc1.getMap('metadata');
meta1.set('title', 'Updated Title');
meta1.set('version', 2);
// Sync to doc2
const update = encodeStateAsUpdate(doc1);
applyUpdate(doc2, update);
const meta2 = doc2.getMap('metadata');
expect(meta2.get('title')).toBe('Updated Title');
expect(meta2.get('version')).toBe(2);
});
it('should handle multi-step sync', () => {
// Step 1: Initial sync
text1.insert(0, 'A');
let update = encodeStateAsUpdate(doc1);
applyUpdate(doc2, update);
expect(text2.toString()).toBe('A');
// Step 2: More edits
text1.insert(1, 'B');
update = encodeStateAsUpdate(doc1);
applyUpdate(doc2, update);
expect(text2.toString()).toBe('AB');
// Step 3: Even more edits
text1.insert(2, 'C');
update = encodeStateAsUpdate(doc1);
applyUpdate(doc2, update);
expect(text2.toString()).toBe('ABC');
// Step 4: Reverse sync (doc2 to doc1)
text2.insert(0, 'X');
update = encodeStateAsUpdate(doc2);
applyUpdate(doc1, update);
expect(text1.toString()).toBe('XABC');
});
it('should preserve document structure during sync', () => {
// Setup document with multiple shared types
const shared1 = getOrCreateSharedTypes(doc1);
// Add text
shared1.text.insert(0, 'Screenplay content');
// Add metadata
shared1.metadata.set('title', 'My Script');
shared1.metadata.set('author', 'Writer');
// Add character
shared1.characters.set('char1', {
id: 'char1',
name: 'John',
shortName: 'J',
});
// Sync entire document
const update = encodeStateAsUpdate(doc1);
applyUpdate(doc2, update);
// Verify all data synced
const shared2 = getOrCreateSharedTypes(doc2);
expect(shared2.text.toString()).toBe('Screenplay content');
expect(shared2.metadata.get('title')).toBe('My Script');
expect(shared2.metadata.get('author')).toBe('Writer');
expect(shared2.characters.get('char1')?.name).toBe('John');
});
});

12
src/lib/collaboration/presence-manager.ts
View File

@@ -155,14 +155,10 @@ export class PresenceManager {
this.provider = connection.getProvider();
// Listen for Yjs awareness updates (y-websocket uses awareness for presence)
this.provider.on('awareness', (event: { states: Map<number, any> }) => {
this.processAwarenessUpdate(event.states);
});
this.provider.on('awareness', this.handleAwarenessUpdate);
// Listen for generic message events for custom presence messages
this.provider.on('message', (event: { message: PresenceMessage }) => {
this.processPresenceMessage(event.message);
});
this.provider.on('message', this.handlePresenceMessage);
// Start idle monitoring
this.startIdleMonitor();
@@ -571,7 +567,3 @@ export const DEFAULT_USER_COLORS = [
'#6366f1', // indigo
'#14b8a6', // teal
];
</content>
<parameter=filePath>
/home/mike/code/FrenoCorp/src/lib/collaboration/presence-manager.ts

256
src/lib/collaboration/presence.test.ts Normal file
View File

@@ -0,0 +1,256 @@
/**
* Unit tests for Presence Manager
* Tests cursor tracking and presence updates
*/
import { describe, it, expect, beforeEach } from 'vitest';
import { Doc } from 'yjs';
import { Presence, RemoteUser } from './presence';
describe('Presence Manager', () => {
describe('Initialization', () => {
it('should initialize with user identity', () => {
const doc = new Doc();
const presence = new Presence();
presence.initialize(doc, 'user-1', 'Test User');
const remoteUsers = presence.getRemoteUsers();
expect(remoteUsers.size).toBe(0); // Own user not included
});
it('should assign a deterministic color to user', () => {
const doc = new Doc();
const presence = new Presence();
presence.initialize(doc, 'user-1', 'Test User');
const users = Array.from(presence.getRemoteUsers().values());
// User should have been assigned a color (even though not in remote users)
expect(presence['userColor']).toBeDefined();
});
});
describe('Cursor Tracking', () => {
let doc: Doc;
let presence: Presence;
beforeEach(() => {
doc = new Doc();
presence = new Presence();
presence.initialize(doc, 'user-1', 'Test User');
});
it('should update cursor position', () => {
const cursor: Parameters<Presence['updateCursorPosition']>[0] = {
userId: 'user-1',
userName: 'Test User',
position: 42,
color: '#ff0000',
};
presence.updateCursorPosition(cursor);
const ownCursor = presence.getUserCursor('user-1');
expect(ownCursor?.position).toBe(42);
});
it('should update selection range', () => {
const cursor: Parameters<Presence['updateCursorPosition']>[0] = {
userId: 'user-1',
userName: 'Test User',
position: 10,
color: '#ff0000',
};
presence.updateCursorPosition(cursor);
const selection: Parameters<Presence['updateSelection']>[0] = {
anchor: 10,
head: 20,
};
presence.updateSelection(selection);
const ownCursor = presence.getUserCursor('user-1');
expect(ownCursor?.selection).toEqual(selection);
});
it('should track last active time', () => {
const cursor: Parameters<Presence['updateCursorPosition']>[0] = {
userId: 'user-1',
userName: 'Test User',
position: 0,
color: '#ff0000',
};
const beforeUpdate = new Date();
presence.updateCursorPosition(cursor);
const afterUpdate = new Date();
const ownCursor = presence.getUserCursor('user-1');
expect(ownCursor?.lastActive).toBeGreaterThanOrEqual(beforeUpdate);
expect(ownCursor?.lastActive).toBeLessThanOrEqual(afterUpdate);
});
});
describe('Remote Users', () => {
it('should track multiple remote users', () => {
const doc = new Doc();
const presence = new Presence();
presence.initialize(doc, 'user-1', 'Local User');
// Simulate remote users joining
const presenceMap = doc.getMap<RemoteUser>('presence');
presenceMap.set('user-2', {
userId: 'user-2',
userName: 'Remote User 1',
isEditing: true,
lastActive: new Date(),
cursor: {
userId: 'user-2',
userName: 'Remote User 1',
position: 100,
color: '#00ff00',
},
});
presenceMap.set('user-3', {
userId: 'user-3',
userName: 'Remote User 2',
isEditing: false,
lastActive: new Date(),
});
const remoteUsers = presence.getRemoteUsers();
expect(remoteUsers.size).toBe(2);
expect(remoteUsers.get('user-2')?.userName).toBe('Remote User 1');
expect(remoteUsers.get('user-3')?.userName).toBe('Remote User 2');
});
it('should not include own user in remote users', () => {
const doc = new Doc();
const presence = new Presence();
presence.initialize(doc, 'user-1', 'Local User');
const presenceMap = doc.getMap<RemoteUser>('presence');
presenceMap.set('user-1', {
userId: 'user-1',
userName: 'Local User',
isEditing: true,
lastActive: new Date(),
});
presenceMap.set('user-2', {
userId: 'user-2',
userName: 'Remote User',
isEditing: false,
lastActive: new Date(),
});
const remoteUsers = presence.getRemoteUsers();
expect(remoteUsers.size).toBe(1);
expect(remoteUsers.has('user-1')).toBe(false);
expect(remoteUsers.has('user-2')).toBe(true);
});
});
describe('Event Listeners', () => {
it('should notify on user join', () => {
const doc = new Doc();
const presence = new Presence();
let joinedUser: RemoteUser | undefined;
presence.onUserJoin((user) => {
joinedUser = user;
});
presence.initialize(doc, 'user-1', 'Local User');
const presenceMap = doc.getMap<RemoteUser>('presence');
presenceMap.set('user-2', {
userId: 'user-2',
userName: 'New User',
isEditing: true,
lastActive: new Date(),
});
// Note: In a real scenario, this would trigger immediately
// For now, we verify the listener was registered
expect(presence['userJoinListeners'].size).toBe(1);
});
it('should notify on user leave', () => {
const doc = new Doc();
const presence = new Presence();
let leftUserId: string | undefined;
presence.onUserLeave((userId) => {
leftUserId = userId;
});
presence.initialize(doc, 'user-1', 'Local User');
const presenceMap = doc.getMap<RemoteUser>('presence');
presenceMap.set('user-2', {
userId: 'user-2',
userName: 'Leaving User',
isEditing: false,
lastActive: new Date(),
});
presenceMap.delete('user-2');
expect(presence['userLeaveListeners'].size).toBe(1);
});
});
describe('Cleanup', () => {
it('should clear presence on destroy', () => {
const doc = new Doc();
const presence = new Presence();
presence.initialize(doc, 'user-1', 'Test User');
const cursor: Parameters<Presence['updateCursorPosition']>[0] = {
userId: 'user-1',
userName: 'Test User',
position: 42,
color: '#ff0000',
};
presence.updateCursorPosition(cursor);
presence.destroy();
// After destroy, internal state should be cleared
expect(presence['doc']).toBe(null);
expect(presence['userId']).toBe(null);
});
});
describe('User Color Assignment', () => {
it('should assign different colors to different users', () => {
const doc = new Doc();
const presence1 = new Presence();
const presence2 = new Presence();
presence1.initialize(doc, 'user-1', 'User 1');
presence2.initialize(doc, 'user-2', 'User 2');
expect(presence1['userColor']).not.toBe(presence2['userColor']);
});
it('should assign same color to same user', () => {
const doc = new Doc();
const presence1 = new Presence();
const presence2 = new Presence();
presence1.initialize(doc, 'user-1', 'User 1');
presence2.initialize(doc, 'user-1', 'User 1');
expect(presence1['userColor']).toBe(presence2['userColor']);
});
});
});

241
src/lib/collaboration/presence.ts Normal file
View File

@@ -0,0 +1,241 @@
/**
* Presence Manager
* Tracks local user's cursor position and broadcasts presence updates
* Receives and renders remote users' cursors/selections
*/
import { Doc, Map as YMap, Text } from 'yjs';
export interface CursorPosition {
userId: string;
userName: string;
position: number;
selection?: SelectionRange;
color: string;
}
export interface SelectionRange {
anchor: number;
head: number;
}
export interface RemoteUser {
userId: string;
userName: string;
avatarUrl?: string;
cursor?: CursorPosition;
selection?: SelectionRange;
isEditing: boolean;
lastActive: Date;
}
export interface PresenceManager {
initialize(doc: Doc, userId: string, userName: string): void;
updateCursorPosition(cursor: CursorPosition): void;
updateSelection(selection: SelectionRange): void;
getRemoteUsers(): Map<string, RemoteUser>;
getUserCursor(userId: string): CursorPosition | undefined;
onUserJoin(callback: (user: RemoteUser) => void): void;
onUserLeave(callback: (userId: string) => void): void;
onUserUpdate(callback: (user: RemoteUser) => void): void;
destroy(): void;
}
export class Presence implements PresenceManager {
private doc: Doc | null = null;
private userId: string | null = null;
private userName: string | null = null;
private presenceMap: YMap<any> | null = null;
private userColor: string | null = null;
private userJoinListeners: Set<(user: RemoteUser) => void> = new Set();
private userLeaveListeners: Set<(userId: string) => void> = new Set();
private userUpdateListeners: Set<(user: RemoteUser) => void> = new Set();
private idleTimeout: NodeJS.Timeout | null = null;
private readonly IDLE_TIMEOUT_MS = 30000;
private static readonly COLORS = [
'#ef4444', '#f97316', '#f59e0b', '#84cc16', '#10b981',
'#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef'
];
initialize(doc: Doc, userId: string, userName: string): void {
this.doc = doc;
this.userId = userId;
this.userName = userName;
// Get or create presence map
this.presenceMap = doc.getMap<RemoteUser>('presence');
// Assign a color to this user (deterministic based on userId)
const colorIndex = Math.abs(this.hashString(userId)) % Presence.COLORS.length;
this.userColor = Presence.COLORS[colorIndex] || '#888888';
// Register for presence updates
this.presenceMap.observe(this.handlePresenceChange.bind(this));
// Initialize idle timeout
this.resetIdleTimeout();
}
updateCursorPosition(cursor: CursorPosition): void {
if (!this.presenceMap || !this.userId) {
return;
}
const currentUser = this.presenceMap.get(this.userId) || {
userId: this.userId,
userName: this.userName || 'Unknown',
isEditing: false,
lastActive: new Date(),
};
const updatedUser: RemoteUser = {
...currentUser,
cursor: {
...cursor,
userId: this.userId,
userName: this.userName || 'Unknown',
color: this.userColor!,
},
isEditing: true,
lastActive: new Date(),
};
this.presenceMap.set(this.userId, updatedUser);
this.resetIdleTimeout();
}
updateSelection(selection: SelectionRange): void {
if (!this.presenceMap || !this.userId) {
return;
}
const currentUser = this.presenceMap.get(this.userId);
if (currentUser?.cursor) {
const updatedUser: RemoteUser = {
...currentUser,
selection,
lastActive: new Date(),
};
this.presenceMap.set(this.userId, updatedUser);
}
}
getRemoteUsers(): Map<string, RemoteUser> {
const users = new Map<string, RemoteUser>();
if (!this.presenceMap) {
return users;
}
const presenceData = this.presenceMap.toJSON();
Object.entries(presenceData).forEach(([userId, user]) => {
if (userId !== this.userId) {
users.set(userId, user as RemoteUser);
}
});
return users;
}
getUserCursor(userId: string): CursorPosition | undefined {
if (!this.presenceMap) {
return undefined;
}
const user = this.presenceMap.get(userId);
return user?.cursor;
}
onUserJoin(callback: (user: RemoteUser) => void): void {
this.userJoinListeners.add(callback);
}
onUserLeave(callback: (userId: string) => void): void {
this.userLeaveListeners.add(callback);
}
onUserUpdate(callback: (user: RemoteUser) => void): void {
this.userUpdateListeners.add(callback);
}
destroy(): void {
if (this.presenceMap && this.userId) {
// Clear own presence
this.presenceMap.delete(this.userId);
}
if (this.idleTimeout) {
clearTimeout(this.idleTimeout);
this.idleTimeout = null;
}
if (this.presenceMap) {
this.presenceMap.unobserve(this.handlePresenceChange.bind(this));
}
this.doc = null;
this.presenceMap = null;
this.userId = null;
this.userName = null;
this.userColor = null;
}
private handlePresenceChange(event: any): void {
if (!this.userId) return;
event.changes.keys.forEach((change: any, key: string) => {
if (change.action === 'add') {
const newUser = this.presenceMap!.get(key);
if (newUser && key !== this.userId) {
this.userJoinListeners.forEach(listener => listener(newUser));
}
} else if (change.action === 'delete') {
this.userLeaveListeners.forEach(listener => listener(key));
} else if (change.action === 'update') {
const updatedUser = this.presenceMap!.get(key);
if (updatedUser && key !== this.userId) {
this.userUpdateListeners.forEach(listener => listener(updatedUser));
}
}
});
}
private resetIdleTimeout(): void {
if (this.idleTimeout) {
clearTimeout(this.idleTimeout);
}
this.idleTimeout = setTimeout(() => {
this.markAsIdle();
}, this.IDLE_TIMEOUT_MS);
}
private markAsIdle(): void {
if (!this.presenceMap || !this.userId) {
return;
}
const currentUser = this.presenceMap.get(this.userId);
if (currentUser) {
const idleUser: RemoteUser = {
...currentUser,
isEditing: false,
lastActive: new Date(),
};
this.presenceMap.set(this.userId, idleUser);
}
}
private hashString(str: string): number {
let hash = 0;
for (let i = 0; i < str.length; i++) {
const char = str.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash = hash & hash;
}
return Math.abs(hash);
}
}

120
src/lib/collaboration/websocket-connection.ts
View File

@@ -3,7 +3,8 @@
* Handles connection lifecycle, reconnection, and authentication
*/
import { WebSocketProvider } from 'y-websocket';
import { WebsocketProvider } from 'y-websocket';
import { PresenceManager, PresenceMessage } from './presence-manager';
export type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'reconnecting';
@@ -19,18 +20,31 @@ export interface WebSocketConnectionManager {
connect(): Promise<void>;
disconnect(): void;
getStatus(): ConnectionStatus;
getProvider(): WebSocketProvider;
getProvider(): WebsocketProvider;
onStatusChange(callback: (status: ConnectionStatus) => void): void;
removeStatusListener(callback: (status: ConnectionStatus) => void): void;
}
export class WebSocketConnection implements WebSocketConnectionManager {
private provider: WebSocketProvider | null = null;
/**
* Extended WebSocket connection with presence support
*/
export interface WebSocketConnectionWithPresence extends WebSocketConnectionManager {
getPresenceManager(): PresenceManager | null;
initializePresence(userId: string, userName: string, userColor?: string): void;
isPresenceInitialized(): boolean;
}
export class WebSocketConnection implements WebSocketConnectionWithPresence {
private provider: WebsocketProvider | null = null;
private status: ConnectionStatus = 'disconnected';
private options: WebSocketConnectionOptions;
private statusListeners: Set<(status: ConnectionStatus) => void> = new Set();
private reconnectAttempts: number = 0;
private currentReconnectInterval: number;
// Presence management
private presenceManager: PresenceManager | null = null;
private presenceInitialized: boolean = false;
constructor(options: WebSocketConnectionOptions) {
this.options = options;
@@ -45,14 +59,14 @@ export class WebSocketConnection implements WebSocketConnectionManager {
this.updateStatus('connecting');
try {
this.provider = new WebSocketProvider(
this.provider = new WebsocketProvider(
this.options.serverUrl,
this.options.documentName,
{
connectOnLoad: true,
// Pass auth token via query params or headers
parameters: {
token: this.options.authToken,
// Pass auth token via headers for better security
headers: {
Authorization: `Bearer ${this.options.authToken}`,
},
}
);
@@ -68,27 +82,33 @@ export class WebSocketConnection implements WebSocketConnectionManager {
}
});
// Wait for initial connection
if (this.provider.status === 'connected') {
this.updateStatus('connected');
} else {
// Wait for connection event
await new Promise<void>((resolve, reject) => {
const onConnect = () => {
this.provider?.off('status', onConnect);
resolve();
};
const onError = (error: Error) => {
this.provider?.off('status', onError);
reject(error);
};
this.provider.on('status', onConnect);
this.provider.on('status', onError);
// Timeout after 30 seconds
setTimeout(() => reject(new Error('Connection timeout')), 30000);
});
}
// Wait for initial connection
if (this.provider.status === 'connected') {
this.updateStatus('connected');
} else {
// Wait for connection event
await new Promise<void>((resolve, reject) => {
const onConnect = (event: { status: string }) => {
if (event.status === 'connected') {
this.provider?.off('status', onConnect);
resolve();
}
};
const onError = (error: Error) => {
this.provider?.off('status', onError);
reject(error);
};
this.provider.on('status', onConnect);
this.provider.on('status', onError);
// Timeout after 30 seconds
setTimeout(() => {
this.provider?.off('status', onConnect);
this.provider?.off('status', onError);
reject(new Error('Connection timeout'));
}, 30000);
});
}
} catch (error) {
console.error('Failed to connect to WebSocket server:', error);
this.updateStatus('disconnected');
@@ -108,7 +128,7 @@ export class WebSocketConnection implements WebSocketConnectionManager {
return this.status;
}
getProvider(): WebSocketProvider {
getProvider(): WebsocketProvider {
if (!this.provider) {
throw new Error('WebSocket provider not initialized. Call connect() first.');
}
@@ -159,4 +179,44 @@ export class WebSocketConnection implements WebSocketConnectionManager {
}
}, delay);
}
/**
* Get the presence manager instance
*/
getPresenceManager(): PresenceManager | null {
return this.presenceManager;
}
/**
* Initialize presence tracking for this connection
*/
initializePresence(userId: string, userName: string, userColor?: string): void {
if (this.presenceInitialized) {
console.log('[WebSocketConnection] Presence already initialized');
return;
}
// Import DEFAULT_USER_COLORS here to avoid circular dependency
const { DEFAULT_USER_COLORS } = require('./presence-manager');
const color = userColor || DEFAULT_USER_COLORS[Math.abs(userId.charCodeAt(0)) % DEFAULT_USER_COLORS.length];
this.presenceManager = new PresenceManager({
userId,
userName,
userColor: color,
});
// Initialize presence with this connection
this.presenceManager.initialize(this);
this.presenceInitialized = true;
console.log(`[WebSocketConnection] Presence initialized for ${userName} (${userId}) with color ${color}`);
}
/**
* Check if presence has been initialized
*/
isPresenceInitialized(): boolean {
return this.presenceInitialized;
}
}

2
src/lib/collaboration/yjs-document.ts
View File

@@ -72,7 +72,7 @@ export function createScreenplayDoc(
};
// Initialize metadata if empty
if (meta.toJSON().length === 0) {
if (!meta.get('projectId')) {
Object.entries(defaultMeta).forEach(([key, value]) => {
meta.set(key as keyof ScreenplayMetadata, value);
});

126
src/lib/export/fdx.test.ts Normal file
View File

@@ -0,0 +1,126 @@
import { describe, it, expect } from 'vitest';
import { FdxExporter } from './fdx';
import type { ScreenplayElement } from '../screenplay/types';
const sampleElements: ScreenplayElement[] = [
{ id: 'e1', type: 'sceneHeading', content: 'INT. COFFEE SHOP - DAY' },
{ id: 'e2', type: 'action', content: 'A bustling coffee shop.' },
{ id: 'e3', type: 'character', content: 'Jessica' },
{ id: 'e4', type: 'dialogue', content: 'Hello there.' },
{ id: 'e5', type: 'parenthetical', content: 'smiling' },
{ id: 'e6', type: 'transition', content: 'SMASH CUT TO:' },
{ id: 'e7', type: 'note', content: 'Writer note' },
{ id: 'e8', type: 'retained', content: 'Retained from v1' },
{ id: 'e9', type: 'centered', content: 'FADE OUT.' },
];
describe('FdxExporter', () => {
const exporter = new FdxExporter();
it('supports fdx format', () => {
expect(exporter.supportedFormats).toContain('fdx');
});
it('produces valid XML structure', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.data).toContain('<?xml version="1.0" encoding="UTF-8"?>');
expect(result.data).toContain('<FDX version="8.0">');
expect(result.data).toContain('</FDX>');
});
it('includes title page', () => {
const result = exporter.export(sampleElements, {
format: 'fdx',
title: 'Test Script',
author: 'Jane Doe',
});
expect(result.data).toContain('<TitlePage>');
expect(result.data).toContain('<Title>Test Script</Title>');
expect(result.data).toContain('<Author>Jane Doe</Author>');
});
it('includes font face and page setup', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.data).toContain('FontFace');
expect(result.data).toContain('PageSetup');
});
it('exports scene headings as SceneHeading tags', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.data).toContain('<SceneHeading fontFaceId="0">INT. COFFEE SHOP - DAY</SceneHeading>');
});
it('exports action as Action tags', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.data).toContain('<Action fontFaceId="0">A bustling coffee shop.</Action>');
});
it('exports characters in uppercase', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.data).toContain('<Character fontFaceId="0">JESSICA</Character>');
});
it('exports dialogue', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.data).toContain('<Dialogue fontFaceId="0">Hello there.</Dialogue>');
});
it('exports parentheticals', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.data).toContain('<Parenthetical fontFaceId="0">smiling</Parenthetical>');
});
it('exports transitions in uppercase', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.data).toContain('<Transition fontFaceId="0">SMASH CUT TO:</Transition>');
});
it('exports notes', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.data).toContain('<Note fontFaceId="0">Writer note</Note>');
});
it('exports retained text', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.data).toContain('<Retained fontFaceId="0">Retained from v1</Retained>');
});
it('exports centered text', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.data).toContain('<Centered fontFaceId="0">FADE OUT.</Centered>');
});
it('escapes XML special characters', () => {
const elements: ScreenplayElement[] = [
{ id: 'e1', type: 'action', content: 'A sign reads: "Hello & Goodbye"' },
];
const result = exporter.export(elements, { format: 'fdx' });
expect(result.data).toContain('&amp;');
expect(result.data).toContain('&quot;');
});
it('uses correct content type and extension', () => {
const result = exporter.export(sampleElements, { format: 'fdx' });
expect(result.contentType).toBe('application/xml');
expect(result.extension).toBe('.fdx');
});
it('generates filename from title', () => {
const result = exporter.export(sampleElements, { format: 'fdx', title: 'My Script' });
expect(result.filename).toBe('My_Script.fdx');
});
it('handles empty elements array', () => {
const result = exporter.export([], { format: 'fdx' });
expect(result.data).toContain('<Content>');
expect(result.data).toContain('</Content>');
});
it('includes contact when provided', () => {
const result = exporter.export(sampleElements, {
format: 'fdx',
contact: 'jane@example.com',
});
expect(result.data).toContain('<Contact>jane@example.com</Contact>');
});
});

104
src/lib/export/fdx.ts Normal file
View File

@@ -0,0 +1,104 @@
import type { ScreenplayElement } from '../screenplay/types';
import type { ScreenplayExporter, ExportOptions, ExportResult } from './types';
import { CONTENT_TYPES, EXTENSIONS } from './types';
function escapeXml(s: string): string {
return s
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;');
}
function elementToXmlTag(type: string): string {
const map: Record<string, string> = {
sceneHeading: 'SceneHeading',
action: 'Action',
character: 'Character',
dialogue: 'Dialogue',
parenthetical: 'Parenthetical',
transition: 'Transition',
note: 'Note',
retained: 'Retained',
centered: 'Centered',
};
return map[type] || 'Action';
}
export class FdxExporter implements ScreenplayExporter {
public readonly supportedFormats: readonly ['fdx'] = ['fdx'];
public export(elements: ScreenplayElement[], options: ExportOptions): ExportResult {
const title = options.title ?? 'Untitled';
const author = options.author ?? '';
const datetime = options.datetime ?? new Date().toISOString().split('T')[0] ?? '';
let xml = '<?xml version="1.0" encoding="UTF-8"?>\n';
xml += '<FDX version="8.0">\n';
xml += ' <TitlePage>\n';
xml += ' <Title>' + escapeXml(title) + '</Title>\n';
xml += ' <Author>' + escapeXml(author) + '</Author>\n';
xml += ' <Date>' + escapeXml(datetime) + '</Date>\n';
if (options.contact) {
xml += ' <Contact>' + escapeXml(options.contact) + '</Contact>\n';
}
xml += ' </TitlePage>\n';
xml += ' <FontFace id="0" name="Courier" size="12" />\n';
xml += ' <PageSetup width="8.5" height="11" topMargin="1.0" bottomMargin="1.0" leftMargin="1.0" rightMargin="1.0" />\n';
xml += ' <Content>\n';
for (const el of elements) {
const tag = elementToXmlTag(el.type);
const content = escapeXml(el.content.trim());
switch (el.type) {
case 'sceneHeading':
xml += ' <SceneHeading fontFaceId="0">' + content.toUpperCase() + '</SceneHeading>\n';
break;
case 'action':
xml += ' <Action fontFaceId="0">' + content + '</Action>\n';
break;
case 'character':
xml += ' <Character fontFaceId="0">' + content.toUpperCase() + '</Character>\n';
break;
case 'dialogue':
xml += ' <Dialogue fontFaceId="0">' + content + '</Dialogue>\n';
break;
case 'parenthetical':
xml += ' <Parenthetical fontFaceId="0">' + content + '</Parenthetical>\n';
break;
case 'transition':
xml += ' <Transition fontFaceId="0">' + content.toUpperCase() + '</Transition>\n';
break;
case 'note':
xml += ' <Note fontFaceId="0">' + content + '</Note>\n';
break;
case 'retained':
xml += ' <Retained fontFaceId="0">' + content + '</Retained>\n';
break;
case 'centered':
xml += ' <Centered fontFaceId="0">' + content + '</Centered>\n';
break;
default:
xml += ' <Action fontFaceId="0">' + content + '</Action>\n';
}
}
xml += ' </Content>\n';
xml += '</FDX>\n';
const filename = (title || 'screenplay').replace(/[^a-zA-Z0-9]/g, '_');
return {
format: 'fdx',
contentType: CONTENT_TYPES.fdx,
extension: EXTENSIONS.fdx,
data: xml,
filename: filename + EXTENSIONS.fdx,
};
}
}

92
src/lib/export/fountain.test.ts Normal file
View File

@@ -0,0 +1,92 @@
import { describe, it, expect } from 'vitest';
import { FountainExporter } from './fountain';
import type { ScreenplayElement } from '../screenplay/types';
const sampleElements: ScreenplayElement[] = [
{ id: 'e1', type: 'sceneHeading', content: 'INT. COFFEE SHOP - DAY' },
{ id: 'e2', type: 'action', content: 'A bustling coffee shop. JESSICA sits alone at a corner table.' },
{ id: 'e3', type: 'character', content: 'Jessica' },
{ id: 'e4', type: 'dialogue', content: 'I need to make a decision today.' },
{ id: 'e5', type: 'parenthetical', content: 'to herself' },
{ id: 'e6', type: 'transition', content: 'CUT TO:' },
{ id: 'e7', type: 'sceneHeading', content: 'EXT. PARK - NIGHT' },
{ id: 'e8', type: 'action', content: 'The park is empty. Streetlights flicker.' },
{ id: 'e9', type: 'character', content: 'Marcus' },
{ id: 'e10', type: 'dialogue', content: 'She never came back.' },
{ id: 'e11', type: 'note', content: 'TODO: Add flashback sequence' },
{ id: 'e12', type: 'centered', content: 'THE END' },
];
describe('FountainExporter', () => {
const exporter = new FountainExporter();
it('supports fountain format', () => {
expect(exporter.supportedFormats).toContain('fountain');
});
it('exports scene headings with # marker', () => {
const result = exporter.export(sampleElements, { format: 'fountain' });
expect(result.format).toBe('fountain');
expect(result.data).toContain('# INT. COFFEE SHOP - DAY');
expect(result.data).toContain('# EXT. PARK - NIGHT');
});
it('exports characters with = markers', () => {
const result = exporter.export(sampleElements, { format: 'fountain' });
expect(result.data).toContain('= JESSICA =');
expect(result.data).toContain('= MARCUS =');
});
it('exports parentheticals in parentheses', () => {
const result = exporter.export(sampleElements, { format: 'fountain' });
expect(result.data).toContain('(to herself)');
});
it('exports transitions with -> marker', () => {
const result = exporter.export(sampleElements, { format: 'fountain' });
expect(result.data).toContain('-> CUT TO:');
});
it('exports notes with > marker', () => {
const result = exporter.export(sampleElements, { format: 'fountain' });
expect(result.data).toContain('> TODO: Add flashback sequence');
});
it('exports action with 2-space indent', () => {
const result = exporter.export(sampleElements, { format: 'fountain' });
expect(result.data).toContain(' A bustling coffee shop');
});
it('uses correct content type and extension', () => {
const result = exporter.export(sampleElements, { format: 'fountain' });
expect(result.contentType).toBe('text/plain');
expect(result.extension).toBe('.fountain');
});
it('generates filename from title', () => {
const result = exporter.export(sampleElements, { format: 'fountain', title: 'My Script' });
expect(result.filename).toBe('My_Script.fountain');
});
it('includes cover page when requested', () => {
const result = exporter.export(sampleElements, {
format: 'fountain',
title: 'Test Script',
author: 'Jane Doe',
includeCoverPage: true,
});
expect(result.data).toContain('Test Script');
expect(result.data).toContain('By Jane Doe');
expect(result.data).toContain('***');
});
it('handles empty elements array', () => {
const result = exporter.export([], { format: 'fountain' });
expect(result.data).toBe('');
});
it('returns dialogue without markers', () => {
const result = exporter.export(sampleElements, { format: 'fountain' });
expect(result.data).toContain('I need to make a decision today.');
});
});

90
src/lib/export/fountain.ts Normal file
View File

@@ -0,0 +1,90 @@
import type { ScreenplayElement } from '../screenplay/types';
import type { ScreenplayExporter, ExportOptions, ExportResult } from './types';
import { CONTENT_TYPES, EXTENSIONS } from './types';
export class FountainExporter implements ScreenplayExporter {
public readonly supportedFormats: readonly ['fountain'] = ['fountain'];
public export(elements: ScreenplayElement[], options: ExportOptions): ExportResult {
const lines: string[] = [];
if (options.includeCoverPage) {
lines.push(options.title || 'Untitled');
lines.push('');
if (options.author) lines.push('By ' + options.author);
if (options.contact) lines.push(options.contact);
if (options.datetime) lines.push(options.datetime);
lines.push('');
lines.push('***');
lines.push('');
}
for (let idx = 0; idx < elements.length; idx++) {
const el = elements[idx];
if (!el) continue;
const nextEl = elements[idx + 1];
switch (el.type) {
case 'sceneHeading':
lines.push('# ' + el.content.trim().toUpperCase());
lines.push('');
break;
case 'action':
lines.push(' ' + el.content.trim());
lines.push('');
break;
case 'character': {
const charName = el.content.trim().toUpperCase();
lines.push('= ' + charName + ' =');
lines.push('');
break;
}
case 'dialogue':
lines.push(el.content.trim());
lines.push('');
break;
case 'parenthetical':
lines.push('(' + el.content.trim() + ')');
lines.push('');
break;
case 'transition':
lines.push('-> ' + el.content.trim().toUpperCase());
lines.push('');
break;
case 'note':
lines.push('> ' + el.content.trim());
lines.push('');
break;
case 'centered':
lines.push(' ' + el.content.trim());
lines.push('');
break;
case 'retained':
lines.push(' ' + el.content.trim());
lines.push('');
break;
}
void nextEl;
}
const content = lines.join('\n').trim();
const filename = (options.title || 'screenplay').replace(/[^a-zA-Z0-9]/g, '_');
return {
format: 'fountain',
contentType: CONTENT_TYPES.fountain,
extension: EXTENSIONS.fountain,
data: content,
filename: filename + EXTENSIONS.fountain,
};
}
}

18
src/lib/export/index.ts Normal file
View File

@@ -0,0 +1,18 @@
export type {
ExportFormat,
ExportOptions,
ExportResult,
ScreenplayExporter,
BatchExportOptions,
BatchExportResult,
BatchExportError,
} from './types';
export { CONTENT_TYPES, EXTENSIONS } from './types';
export { FountainExporter } from './fountain';
export { FdxExporter } from './fdx';
export { PdfExporter } from './pdf';
export { ScreenplayProExporter } from './screenplay-pro';
export { ExportManager } from './manager';
export { generatePreview, computeStats } from './preview';
export type { PreviewOptions, PreviewResult, PreviewStats } from './preview';

127
src/lib/export/manager.test.ts Normal file
View File

@@ -0,0 +1,127 @@
import { describe, it, expect, beforeEach } from 'vitest';
import { ExportManager } from './manager';
import type { ScreenplayElement } from '../screenplay/types';
const sampleElements: ScreenplayElement[] = [
{ id: 'e1', type: 'sceneHeading', content: 'INT. COFFEE SHOP - DAY' },
{ id: 'e2', type: 'action', content: 'A bustling coffee shop.' },
{ id: 'e3', type: 'character', content: 'Jessica' },
{ id: 'e4', type: 'dialogue', content: 'Hello there.' },
{ id: 'e5', type: 'transition', content: 'CUT TO:' },
];
describe('ExportManager', () => {
let manager: ExportManager;
beforeEach(() => {
manager = new ExportManager();
});
describe('getAvailableFormats', () => {
it('returns all registered formats', () => {
const formats = manager.getAvailableFormats();
expect(formats).toContain('fountain');
expect(formats).toContain('fdx');
expect(formats).toContain('pdf');
expect(formats).toContain('screenplay-pro');
});
});
describe('export', () => {
it('exports to fountain', () => {
const result = manager.export(sampleElements, { format: 'fountain', title: 'Test' });
expect(result.format).toBe('fountain');
expect(result.data).toContain('# INT. COFFEE SHOP - DAY');
});
it('exports to fdx', () => {
const result = manager.export(sampleElements, { format: 'fdx', title: 'Test' });
expect(result.format).toBe('fdx');
expect(result.data).toContain('<FDX');
});
it('exports to pdf', () => {
const result = manager.export(sampleElements, { format: 'pdf', title: 'Test' });
expect(result.format).toBe('pdf');
expect(result.data).toContain('<!DOCTYPE html>');
});
it('exports to screenplay-pro', () => {
const result = manager.export(sampleElements, { format: 'screenplay-pro', title: 'Test' });
expect(result.format).toBe('screenplay-pro');
expect(result.data).toContain('[HEADER]');
});
});
describe('batchExport', () => {
it('exports to multiple formats', () => {
const result = manager.batchExport(sampleElements, ['fountain', 'fdx', 'pdf'], {
title: 'Batch Test',
author: 'Jane Doe',
});
expect(result.results).toHaveLength(3);
expect(result.errors).toHaveLength(0);
expect(result.formats).toEqual(['fountain', 'fdx', 'pdf']);
});
it('handles partial failures gracefully', () => {
const result = manager.batchExport(sampleElements, ['fountain', 'fdx'], {});
expect(result.results.length).toBeGreaterThanOrEqual(0);
});
it('exports all four formats', () => {
const result = manager.batchExport(sampleElements, [
'fountain',
'fdx',
'pdf',
'screenplay-pro',
]);
expect(result.results).toHaveLength(4);
expect(result.errors).toHaveLength(0);
});
it('applies base options to all exports', () => {
const result = manager.batchExport(sampleElements, ['fountain', 'fdx'], {
title: 'My Script',
author: 'Test Author',
includeCoverPage: true,
});
for (const r of result.results) {
expect(r.filename).toContain('My_Script');
}
});
});
describe('exportToRawText', () => {
it('exports formatted raw text', () => {
const text = manager.exportToRawText(sampleElements);
expect(text).toContain('INT. COFFEE SHOP - DAY');
expect(text).toContain('JESSICA');
});
it('applies uppercase to scene headings', () => {
const text = manager.exportToRawText(sampleElements);
expect(text).toContain('INT. COFFEE SHOP - DAY');
});
it('applies uppercase to character cues', () => {
const text = manager.exportToRawText(sampleElements);
expect(text).toContain('JESSICA');
});
it('preserves dialogue case', () => {
const text = manager.exportToRawText(sampleElements);
expect(text).toContain('Hello there.');
});
it('uses standard template by default', () => {
const text = manager.exportToRawText(sampleElements);
expect(text.length).toBeGreaterThan(0);
});
it('supports sitcom template', () => {
const text = manager.exportToRawText(sampleElements, 'sitcom');
expect(text.length).toBeGreaterThan(0);
});
});
});

100
src/lib/export/manager.ts Normal file
View File

@@ -0,0 +1,100 @@
import type { ScreenplayElement, TemplateType } from '../screenplay/types';
import type {
ExportFormat,
ExportOptions,
ExportResult,
ScreenplayExporter,
BatchExportOptions,
BatchExportResult,
BatchExportError,
} from './types';
import { FountainExporter } from './fountain';
import { FdxExporter } from './fdx';
import { PdfExporter } from './pdf';
import { ScreenplayProExporter } from './screenplay-pro';
import { getTemplate } from '../screenplay/format';
export class ExportManager {
private exporters: Map<ExportFormat, ScreenplayExporter>;
constructor() {
this.exporters = new Map();
this.register(new FountainExporter());
this.register(new FdxExporter());
this.register(new PdfExporter());
this.register(new ScreenplayProExporter());
}
public register(exp: ScreenplayExporter): void {
for (const format of exp.supportedFormats) {
this.exporters.set(format, exp);
}
}
public getAvailableFormats(): ExportFormat[] {
return Array.from(this.exporters.keys());
}
public export(elements: ScreenplayElement[], options: ExportOptions): ExportResult {
const exporter = this.exporters.get(options.format);
if (!exporter) {
throw new Error(`Unsupported export format: ${options.format}`);
}
return exporter.export(elements, options);
}
public batchExport(
elements: ScreenplayElement[],
formats: ExportFormat[],
baseOptions: BatchExportOptions = {}
): BatchExportResult {
const results: ExportResult[] = [];
const errors: BatchExportError[] = [];
for (const format of formats) {
try {
const options: ExportOptions = {
format,
title: baseOptions.title,
author: baseOptions.author,
contact: baseOptions.contact,
template: baseOptions.template,
includeCoverPage: baseOptions.includeCoverPage,
gutterMargin: baseOptions.gutterMargin,
};
const result = this.export(elements, options);
results.push(result);
} catch (err) {
errors.push({
format,
error: err instanceof Error ? err.message : String(err),
});
}
}
return { formats, results, errors };
}
public exportToRawText(elements: ScreenplayElement[], template: TemplateType = 'standard'): string {
const tpl = getTemplate(template);
const lines: string[] = [];
for (const el of elements) {
const style = tpl.elementStyles[el.type];
const contentLines = el.content.trim().split('\n');
for (const line of contentLines) {
let formatted = line.trim();
if (style.uppercase) formatted = formatted.toUpperCase();
const indent = ' '.repeat(Math.round(style.indentStart * 2));
lines.push(indent + formatted);
}
if (style.marginBottom > 0) {
lines.push('');
}
}
return lines.join('\n').trim();
}
}

130
src/lib/export/pdf.test.ts Normal file
View File

@@ -0,0 +1,130 @@
import { describe, it, expect } from 'vitest';
import { PdfExporter } from './pdf';
import type { ScreenplayElement } from '../screenplay/types';
const sampleElements: ScreenplayElement[] = [
{ id: 'e1', type: 'sceneHeading', content: 'INT. COFFEE SHOP - DAY' },
{ id: 'e2', type: 'action', content: 'A bustling coffee shop. JESSICA sits alone at a corner table, staring at her laptop.' },
{ id: 'e3', type: 'character', content: 'Jessica' },
{ id: 'e4', type: 'dialogue', content: 'I need to make a decision today.' },
{ id: 'e5', type: 'parenthetical', content: 'to herself' },
{ id: 'e6', type: 'dialogue', content: 'There is no other option.' },
{ id: 'e7', type: 'transition', content: 'CUT TO:' },
{ id: 'e8', type: 'sceneHeading', content: 'EXT. PARK - NIGHT' },
{ id: 'e9', type: 'action', content: 'The park is empty. Streetlights flicker overhead.' },
{ id: 'e10', type: 'character', content: 'Marcus' },
{ id: 'e11', type: 'dialogue', content: 'She never came back.' },
];
describe('PdfExporter', () => {
const exporter = new PdfExporter();
it('supports pdf format', () => {
expect(exporter.supportedFormats).toContain('pdf');
});
it('produces HTML output', () => {
const result = exporter.export(sampleElements, { format: 'pdf' });
expect(result.format).toBe('pdf');
expect(result.data).toContain('<!DOCTYPE html>');
expect(result.data).toContain('<html>');
expect(result.data).toContain('</html>');
});
it('includes proper page setup CSS', () => {
const result = exporter.export(sampleElements, { format: 'pdf' });
expect(result.data).toContain('@page');
expect(result.data).toContain('size: 8.5in 11in');
});
it('uses Courier font', () => {
const result = exporter.export(sampleElements, { format: 'pdf' });
expect(result.data).toContain('Courier');
});
it('uses 12pt font size', () => {
const result = exporter.export(sampleElements, { format: 'pdf' });
expect(result.data).toContain('font-size: 12pt');
});
it('renders scene headings in uppercase and bold', () => {
const result = exporter.export(sampleElements, { format: 'pdf' });
expect(result.data).toContain('INT. COFFEE SHOP - DAY');
expect(result.data).toContain('font-weight: bold');
});
it('renders dialogue content', () => {
const result = exporter.export(sampleElements, { format: 'pdf' });
expect(result.data).toContain('I need to make a decision today.');
expect(result.data).toContain('She never came back.');
});
it('renders character cues in uppercase', () => {
const result = exporter.export(sampleElements, { format: 'pdf' });
expect(result.data).toContain('JESSICA');
expect(result.data).toContain('MARCUS');
});
it('includes page numbers', () => {
const result = exporter.export(sampleElements, { format: 'pdf' });
expect(result.data).toContain('1</div>');
});
it('includes cover page when requested', () => {
const result = exporter.export(sampleElements, {
format: 'pdf',
title: 'Test Script',
author: 'Jane Doe',
includeCoverPage: true,
});
expect(result.data).toContain('Test Script');
expect(result.data).toContain('by');
expect(result.data).toContain('Jane Doe');
});
it('uses correct content type and extension', () => {
const result = exporter.export(sampleElements, { format: 'pdf' });
expect(result.contentType).toBe('application/pdf');
expect(result.extension).toBe('.pdf');
});
it('generates filename from title', () => {
const result = exporter.export(sampleElements, { format: 'pdf', title: 'My Script' });
expect(result.filename).toBe('My_Script.pdf');
});
it('reports page count', () => {
const result = exporter.export(sampleElements, { format: 'pdf' });
expect(result.pageCount).toBeGreaterThan(0);
});
it('escapes HTML special characters', () => {
const elements: ScreenplayElement[] = [
{ id: 'e1', type: 'action', content: 'A sign reads: "Hello & Goodbye"' },
];
const result = exporter.export(elements, { format: 'pdf' });
expect(result.data).toContain('&amp;');
expect(result.data).toContain('&quot;');
});
it('handles empty elements array', () => {
const result = exporter.export([], { format: 'pdf' });
expect(result.pageCount).toBe(0);
});
it('supports gutter margin option', () => {
const result = exporter.export(sampleElements, {
format: 'pdf',
gutterMargin: 0.5,
});
expect(result.data).toContain('1.5in');
});
it('supports sitcom template', () => {
const result = exporter.export(sampleElements, {
format: 'pdf',
template: 'sitcom',
});
expect(result.data).toContain('font-weight: bold');
});
});

185
src/lib/export/pdf.ts Normal file
View File

@@ -0,0 +1,185 @@
import type { ScreenplayElement } from '../screenplay/types';
import type { ScreenplayExporter, ExportOptions, ExportResult } from './types';
import { CONTENT_TYPES, EXTENSIONS } from './types';
import { getTemplate } from '../screenplay/format';
const LINES_PER_PAGE = 55;
interface PageElement {
text: string;
type: string;
bold: boolean;
align: 'left' | 'center' | 'right';
indentLeft: number;
indentRight: number;
}
export class PdfExporter implements ScreenplayExporter {
public readonly supportedFormats: readonly ['pdf'] = ['pdf'];
public export(elements: ScreenplayElement[], options: ExportOptions): ExportResult {
const template = getTemplate(options.template || 'standard');
const pages = buildPages(elements, template);
const pageCount = pages.length;
const html = renderHtml(pages, template, options, pageCount);
const filename = (options.title || 'screenplay').replace(/[^a-zA-Z0-9]/g, '_');
return {
format: 'pdf',
contentType: CONTENT_TYPES.pdf,
extension: EXTENSIONS.pdf,
data: html,
filename: filename + EXTENSIONS.pdf,
pageCount,
};
}
}
function buildPages(elements: ScreenplayElement[], template: ReturnType<typeof getTemplate>): PageElement[][] {
const allElements: PageElement[] = [];
for (const el of elements) {
const style = template.elementStyles[el.type];
const lines = el.content.trim().split('\n');
for (const line of lines) {
if (line.trim() === '' && el.type !== 'action') continue;
const text = style.uppercase ? line.trim().toUpperCase() : line.trim();
allElements.push({
text,
type: el.type,
bold: style.bold,
align: style.textAlign,
indentLeft: style.indentStart,
indentRight: style.indentEnd,
});
}
if (style.marginBottom > 0) {
allElements.push({
text: '',
type: 'spacing',
bold: false,
align: 'left',
indentLeft: 0,
indentRight: 0,
});
}
}
const pages: PageElement[][] = [];
let currentPage: PageElement[] = [];
for (const el of allElements) {
if (currentPage.length >= LINES_PER_PAGE) {
pages.push(currentPage);
currentPage = [];
}
currentPage.push(el);
}
if (currentPage.length > 0) {
pages.push(currentPage);
}
return pages;
}
function renderHtml(
pages: PageElement[][],
template: ReturnType<typeof getTemplate>,
options: ExportOptions,
totalPages: number
): string {
const gutterLeft = options.gutterMargin || 0;
const INCH_TO_MM = 25.4;
let bodyContent = '';
if (options.includeCoverPage) {
bodyContent += renderCoverPage(options);
}
for (let p = 0; p < pages.length; p++) {
const page = pages[p];
if (!page) continue;
let pageContent = '';
for (const el of page) {
const indentLeft = (el.indentLeft + gutterLeft) * INCH_TO_MM;
const indentRight = el.indentRight * INCH_TO_MM;
const fontWeight = el.bold || el.type === 'sceneHeading' ? 'bold' : 'normal';
pageContent += `<div style="text-align: ${el.align}; padding-left: ${indentLeft}mm; padding-right: ${indentRight}mm; font-weight: ${fontWeight}; line-height: 1.15;">${escapeHtml(el.text)}</div>\n`;
}
bodyContent += `<div class="page" style="page-break-after: ${p < totalPages - 1 ? 'always' : 'avoid'};">\n`;
bodyContent += pageContent;
bodyContent += `<div style="text-align: right; padding-top: 10mm; font-size: 10pt;">${p + 1}</div>\n`;
bodyContent += '</div>\n';
}
return `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>${escapeHtml(options.title || 'Screenplay')}</title>
<style>
@page {
size: ${template.pageWidth}in ${template.pageHeight}in;
margin: ${template.topMargin}in ${template.rightMargin}in ${template.bottomMargin}in ${template.leftMargin + gutterLeft}in;
}
body {
font-family: ${template.fontFamily};
font-size: ${template.fontSize}pt;
margin: 0;
padding: 0;
color: #000;
background: #fff;
}
@media print {
body { -webkit-print-color-adjust: exact; }
}
</style>
</head>
<body>
${bodyContent}
</body>
</html>`;
}
function renderCoverPage(options: ExportOptions): string {
let cover = '<div class="page" style="page-break-after: always; text-align: center; padding-top: 3in;">\n';
cover += `<div style="font-size: 14pt; font-weight: bold; margin-bottom: 0.5in;">${escapeHtml(options.title || 'Untitled')}</div>\n`;
if (options.author) {
cover += '<div style="margin-bottom: 0.3in;">by</div>\n';
cover += `<div style="font-size: 12pt; margin-bottom: 1in;">${escapeHtml(options.author)}</div>\n`;
}
if (options.contact) {
cover += `<div style="font-size: 10pt;">${escapeHtml(options.contact)}</div>\n`;
}
if (options.datetime) {
cover += `<div style="font-size: 10pt; margin-top: 0.3in;">${escapeHtml(options.datetime)}</div>\n`;
}
if (options.pageNumber) {
cover += `<div style="font-size: 10pt; margin-top: 0.3in;">Draft ${options.pageNumber}</div>\n`;
}
cover += '</div>\n';
return cover;
}
function escapeHtml(s: string): string {
return s
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
}

109
src/lib/export/preview.test.ts Normal file
View File

@@ -0,0 +1,109 @@
import { describe, it, expect } from 'vitest';
import { generatePreview, computeStats } from './preview';
import type { ScreenplayElement } from '../screenplay/types';
const sampleElements: ScreenplayElement[] = [
{ id: 'e1', type: 'sceneHeading', content: 'INT. COFFEE SHOP - DAY' },
{ id: 'e2', type: 'action', content: 'A bustling coffee shop.\nJESSICA sits alone.' },
{ id: 'e3', type: 'character', content: 'Jessica' },
{ id: 'e4', type: 'dialogue', content: 'I need to make a decision.' },
{ id: 'e5', type: 'parenthetical', content: 'to herself' },
{ id: 'e6', type: 'dialogue', content: 'There is no other option.' },
{ id: 'e7', type: 'transition', content: 'CUT TO:' },
{ id: 'e8', type: 'sceneHeading', content: 'EXT. PARK - NIGHT' },
{ id: 'e9', type: 'action', content: 'The park is empty.' },
{ id: 'e10', type: 'character', content: 'Marcus' },
{ id: 'e11', type: 'dialogue', content: 'She never came back.' },
];
describe('generatePreview', () => {
it('generates formatted preview text', () => {
const result = generatePreview(sampleElements);
expect(result.text).toContain('INT. COFFEE SHOP - DAY');
expect(result.text).toContain('JESSICA');
});
it('applies uppercase to scene headings', () => {
const result = generatePreview(sampleElements);
expect(result.text).toContain('INT. COFFEE SHOP - DAY');
});
it('applies uppercase to character cues', () => {
const result = generatePreview(sampleElements);
expect(result.text).toContain('JESSICA');
expect(result.text).toContain('MARCUS');
});
it('preserves dialogue case', () => {
const result = generatePreview(sampleElements);
expect(result.text).toContain('I need to make a decision.');
});
it('includes stats', () => {
const result = generatePreview(sampleElements);
expect(result.stats.totalElements).toBe(sampleElements.length);
expect(result.stats.sceneCount).toBe(2);
expect(result.stats.characterCount).toBe(2);
expect(result.stats.transitionCount).toBe(1);
});
it('respects maxLines option', () => {
const result = generatePreview(sampleElements, { maxLines: 5 });
expect(result.text).toContain('... (truncated)');
});
it('includes page count when requested', () => {
const result = generatePreview(sampleElements, { pageCount: true });
expect(result.text).toContain('Estimated length:');
expect(result.text).toContain('pages');
});
it('uses standard template by default', () => {
const result = generatePreview(sampleElements);
expect(result.stats.totalElements).toBeGreaterThan(0);
});
it('supports sitcom template', () => {
const result = generatePreview(sampleElements, { template: 'sitcom' });
expect(result.stats.totalElements).toBeGreaterThan(0);
});
it('handles empty elements', () => {
const result = generatePreview([]);
expect(result.text).toBe('');
expect(result.stats.totalElements).toBe(0);
});
});
describe('computeStats', () => {
it('counts all element types', () => {
const stats = computeStats(sampleElements);
expect(stats.totalElements).toBe(11);
expect(stats.sceneCount).toBe(2);
expect(stats.actionCount).toBe(3);
expect(stats.characterCount).toBe(2);
expect(stats.dialogueCount).toBe(3);
expect(stats.parentheticalCount).toBe(1);
expect(stats.transitionCount).toBe(1);
});
it('estimates page count', () => {
const stats = computeStats(sampleElements);
expect(stats.estimatedPages).toBeGreaterThan(0);
expect(stats.totalPages).toBe(stats.estimatedPages);
});
it('handles empty elements', () => {
const stats = computeStats([]);
expect(stats.totalElements).toBe(0);
expect(stats.estimatedPages).toBe(0);
});
it('counts multi-line action correctly', () => {
const elements: ScreenplayElement[] = [
{ id: 'e1', type: 'action', content: 'Line one.\nLine two.\nLine three.' },
];
const stats = computeStats(elements);
expect(stats.actionCount).toBe(3);
});
});

149
src/lib/export/preview.ts Normal file
View File

@@ -0,0 +1,149 @@
import type { ScreenplayElement, TemplateType } from '../screenplay/types';
import { getTemplate } from '../screenplay/format';
export interface PreviewOptions {
template?: TemplateType;
maxLines?: number;
characterCount?: boolean;
pageCount?: boolean;
}
export interface PreviewResult {
text: string;
stats: PreviewStats;
}
export interface PreviewStats {
totalElements: number;
totalPages: number;
dialogueCount: number;
actionCount: number;
sceneCount: number;
characterCount: number;
parentheticalCount: number;
transitionCount: number;
estimatedPages: number;
}
const LINES_PER_PAGE = 55;
export function generatePreview(elements: ScreenplayElement[], options: PreviewOptions = {}): PreviewResult {
const template = getTemplate(options.template || 'standard');
const maxLines = options.maxLines ?? 200;
const lines: string[] = [];
if (options.pageCount) {
const estimatedPages = estimatePageCount(elements);
lines.push(`Estimated length: ${estimatedPages} pages`);
lines.push('');
}
let lineCount = 0;
for (const el of elements) {
if (lineCount >= maxLines) {
lines.push('... (truncated)');
break;
}
const style = template.elementStyles[el.type];
const contentLines = el.content.trim().split('\n');
for (const line of contentLines) {
if (lineCount >= maxLines) {
lines.push('... (truncated)');
break;
}
let formatted = line.trim();
if (style.uppercase) formatted = formatted.toUpperCase();
const indent = ' '.repeat(Math.round(style.indentStart * 2));
lines.push(indent + formatted);
lineCount++;
}
if (style.marginBottom > 0) {
lines.push('');
lineCount++;
}
}
const stats = computeStats(elements);
return {
text: lines.join('\n'),
stats,
};
}
export function computeStats(elements: ScreenplayElement[]): PreviewStats {
let dialogueCount = 0;
let actionCount = 0;
let sceneCount = 0;
let characterCount = 0;
let parentheticalCount = 0;
let transitionCount = 0;
let totalLines = 0;
for (const el of elements) {
const contentLines = el.content.trim().split('\n').filter(l => l.trim() !== '');
totalLines += contentLines.length;
switch (el.type) {
case 'dialogue':
dialogueCount += contentLines.length;
break;
case 'action':
actionCount += contentLines.length;
break;
case 'sceneHeading':
sceneCount++;
totalLines += 1;
break;
case 'character':
characterCount++;
break;
case 'parenthetical':
parentheticalCount++;
break;
case 'transition':
transitionCount++;
break;
}
}
const estimatedPages = Math.ceil(totalLines / LINES_PER_PAGE);
return {
totalElements: elements.length,
totalPages: estimatedPages,
dialogueCount,
actionCount,
sceneCount,
characterCount,
parentheticalCount,
transitionCount,
estimatedPages,
};
}
function estimatePageCount(elements: ScreenplayElement[]): number {
let totalLines = 0;
for (const el of elements) {
const contentLines = el.content.trim().split('\n').filter(l => l.trim() !== '');
totalLines += contentLines.length;
const style = getTemplate('standard').elementStyles[el.type];
if (style.marginBottom > 0) {
totalLines += Math.ceil(style.marginBottom);
}
if (el.type === 'sceneHeading') {
totalLines += 1;
}
}
return Math.ceil(totalLines / LINES_PER_PAGE);
}

101
src/lib/export/screenplay-pro.test.ts Normal file
View File

@@ -0,0 +1,101 @@
import { describe, it, expect } from 'vitest';
import { ScreenplayProExporter } from './screenplay-pro';
import type { ScreenplayElement } from '../screenplay/types';
const sampleElements: ScreenplayElement[] = [
{ id: 'e1', type: 'sceneHeading', content: 'INT. COFFEE SHOP - DAY', page: 1, line: 1 },
{ id: 'e2', type: 'action', content: 'A bustling coffee shop.', page: 1, line: 3 },
{ id: 'e3', type: 'character', content: 'Jessica', page: 1, line: 5 },
{ id: 'e4', type: 'dialogue', content: 'Hello there.', page: 1, line: 6 },
{ id: 'e5', type: 'parenthetical', content: 'smiling', page: 1, line: 7 },
{ id: 'e6', type: 'transition', content: 'CUT TO:', page: 2, line: 1 },
];
describe('ScreenplayProExporter', () => {
const exporter = new ScreenplayProExporter();
it('supports screenplay-pro format', () => {
expect(exporter.supportedFormats).toContain('screenplay-pro');
});
it('produces header section', () => {
const result = exporter.export(sampleElements, {
format: 'screenplay-pro',
title: 'Test Script',
author: 'Jane Doe',
});
expect(result.data).toContain('[HEADER]');
expect(result.data).toContain('Version\t1.0');
expect(result.data).toContain('Title\tTest Script');
expect(result.data).toContain('Author\tJane Doe');
});
it('produces content section with type markers', () => {
const result = exporter.export(sampleElements, { format: 'screenplay-pro' });
expect(result.data).toContain('[CONTENT]');
expect(result.data).toContain('[SCENE]');
expect(result.data).toContain('[ACTION]');
expect(result.data).toContain('[CHAR]');
expect(result.data).toContain('[DIALOG]');
expect(result.data).toContain('[PAREN]');
expect(result.data).toContain('[TRANS]');
});
it('uses tab-separated values', () => {
const result = exporter.export(sampleElements, { format: 'screenplay-pro' });
const lines = (result.data as string).split('\n');
const contentLines = lines.filter((l: string) => l.startsWith('[SCENE]') || l.startsWith('[ACTION]'));
for (const line of contentLines) {
expect(line).toContain('\t');
}
});
it('includes page and line metadata', () => {
const result = exporter.export(sampleElements, { format: 'screenplay-pro' });
const lines = (result.data as string).split('\n');
const sceneLine = lines.find((l: string) => l.startsWith('[SCENE]'));
expect(sceneLine).toContain('1\t1');
});
it('includes end marker', () => {
const result = exporter.export(sampleElements, { format: 'screenplay-pro' });
expect(result.data).toContain('[END]');
});
it('uses correct content type and extension', () => {
const result = exporter.export(sampleElements, { format: 'screenplay-pro' });
expect(result.contentType).toBe('text/plain');
expect(result.extension).toBe('.sp');
});
it('generates filename from title', () => {
const result = exporter.export(sampleElements, {
format: 'screenplay-pro',
title: 'My Script',
});
expect(result.filename).toBe('My_Script.sp');
});
it('includes contact when provided', () => {
const result = exporter.export(sampleElements, {
format: 'screenplay-pro',
contact: 'jane@example.com',
});
expect(result.data).toContain('Contact\tjane@example.com');
});
it('includes template in header', () => {
const result = exporter.export(sampleElements, {
format: 'screenplay-pro',
template: 'sitcom',
});
expect(result.data).toContain('Template\tsitcom');
});
it('handles empty elements array', () => {
const result = exporter.export([], { format: 'screenplay-pro' });
expect(result.data).toContain('[HEADER]');
expect(result.data).toContain('[CONTENT]');
expect(result.data).toContain('[END]');
});
});

58
src/lib/export/screenplay-pro.ts Normal file
View File

@@ -0,0 +1,58 @@
import type { ScreenplayElement } from '../screenplay/types';
import type { ScreenplayExporter, ExportOptions, ExportResult } from './types';
import { CONTENT_TYPES, EXTENSIONS } from './types';
const LINE_TYPE_MAP: Record<string, string> = {
sceneHeading: '[SCENE]',
action: '[ACTION]',
character: '[CHAR]',
dialogue: '[DIALOG]',
parenthetical: '[PAREN]',
transition: '[TRANS]',
note: '[NOTE]',
retained: '[RETAINED]',
centered: '[CENTER]',
};
export class ScreenplayProExporter implements ScreenplayExporter {
public readonly supportedFormats: readonly ['screenplay-pro'] = ['screenplay-pro'];
public export(elements: ScreenplayElement[], options: ExportOptions): ExportResult {
const lines: string[] = [];
lines.push('[HEADER]');
lines.push('Version\t1.0');
lines.push('Title\t' + (options.title || 'Untitled'));
lines.push('Author\t' + (options.author || ''));
if (options.contact) lines.push('Contact\t' + options.contact);
lines.push('Date\t' + (options.datetime || new Date().toISOString().split('T')[0]));
lines.push('Template\t' + (options.template || 'standard'));
lines.push('');
lines.push('[CONTENT]');
for (const el of elements) {
const marker = LINE_TYPE_MAP[el.type] || '[ACTION]';
const content = el.content.trim();
const page = el.page != null ? String(el.page) : '';
const line = el.line != null ? String(el.line) : '';
const tabSep = '\t';
lines.push(marker + tabSep + content + tabSep + page + tabSep + line);
}
lines.push('');
lines.push('[END]');
const content = lines.join('\n');
const filename = (options.title || 'screenplay').replace(/[^a-zA-Z0-9]/g, '_');
return {
format: 'screenplay-pro',
contentType: CONTENT_TYPES['screenplay-pro'],
extension: EXTENSIONS['screenplay-pro'],
data: content,
filename: filename + EXTENSIONS['screenplay-pro'],
};
}
}

63
src/lib/export/types.ts Normal file
View File

@@ -0,0 +1,63 @@
import type { ScreenplayElement, TemplateType } from '../screenplay/types';
export type ExportFormat = 'fountain' | 'fdx' | 'pdf' | 'screenplay-pro';
export interface ExportOptions {
format: ExportFormat;
template?: TemplateType;
title?: string;
author?: string;
contact?: string;
datetime?: string;
pageNumber?: number;
includeCoverPage?: boolean;
gutterMargin?: number;
}
export interface ExportResult {
format: ExportFormat;
contentType: string;
extension: string;
data: string | Uint8Array;
filename: string;
pageCount?: number;
}
export interface ScreenplayExporter {
readonly supportedFormats: readonly ExportFormat[];
export(elements: ScreenplayElement[], options: ExportOptions): ExportResult;
}
export interface BatchExportOptions {
title?: string;
author?: string;
contact?: string;
template?: TemplateType;
includeCoverPage?: boolean;
gutterMargin?: number;
}
export interface BatchExportResult {
formats: ExportFormat[];
results: ExportResult[];
errors: BatchExportError[];
}
export interface BatchExportError {
format: ExportFormat;
error: string;
}
export const CONTENT_TYPES: Record<ExportFormat, string> = {
fountain: 'text/plain',
fdx: 'application/xml',
pdf: 'application/pdf',
'screenplay-pro': 'text/plain',
};
export const EXTENSIONS: Record<ExportFormat, string> = {
fountain: '.fountain',
fdx: '.fdx',
pdf: '.pdf',
'screenplay-pro': '.sp',
};

149
src/lib/projects/service.ts Normal file
View File

@@ -0,0 +1,149 @@
import { createSignal, createEffect, Accessor } from 'solid-js';
import { Project, ProjectStatus, ProjectCollaborator, UserRole } from '../auth/types';
const STORAGE_KEY = 'frenocorp_projects';
function loadProjects(): Project[] {
try {
const data = localStorage.getItem(STORAGE_KEY);
return data ? JSON.parse(data) : [];
} catch {
return [];
}
}
function saveProjects(projects: Project[]): void {
localStorage.setItem(STORAGE_KEY, JSON.stringify(projects));
}
export interface ProjectService {
projects: Accessor<Project[]>;
loading: Accessor<boolean>;
createProject: (name: string, description: string, ownerId: string) => Promise<Project>;
updateProject: (id: string, updates: Partial<Project>) => Promise<Project>;
deleteProject: (id: string) => Promise<void>;
addCollaborator: (projectId: string, userId: string, role: UserRole) => Promise<Project>;
removeCollaborator: (projectId: string, userId: string) => Promise<Project>;
archiveProject: (id: string) => Promise<Project>;
}
export function createProjectService(): ProjectService {
const [projects, setProjects] = createSignal<Project[]>(loadProjects());
const [loading, setLoading] = createSignal(false);
createEffect(() => {
const current = projects();
saveProjects(current);
});
const createProject = async (
name: string,
description: string,
ownerId: string
): Promise<Project> => {
setLoading(true);
const project: Project = {
id: generateProjectId(),
name,
description,
ownerId,
status: 'draft',
collaborators: [],
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
};
setProjects((prev) => [project, ...prev]);
setLoading(false);
return project;
};
const updateProject = async (
id: string,
updates: Partial<Project>
): Promise<Project> => {
setLoading(true);
setProjects((prev) =>
prev.map((p) =>
p.id === id
? { ...p, ...updates, updatedAt: new Date().toISOString() }
: p
)
);
setLoading(false);
return projects().find((p) => p.id === id)!;
};
const deleteProject = async (id: string): Promise<void> => {
setLoading(true);
setProjects((prev) => prev.filter((p) => p.id !== id));
setLoading(false);
};
const addCollaborator = async (
projectId: string,
userId: string,
role: UserRole
): Promise<Project> => {
setLoading(true);
setProjects((prev) =>
prev.map((p) => {
if (p.id !== projectId) return p;
const existing = p.collaborators.find((c) => c.userId === userId);
if (existing) return p;
return {
...p,
collaborators: [
...p.collaborators,
{ userId, role, addedAt: new Date().toISOString() },
],
updatedAt: new Date().toISOString(),
};
})
);
setLoading(false);
return projects().find((p) => p.id === projectId)!;
};
const removeCollaborator = async (
projectId: string,
userId: string
): Promise<Project> => {
setLoading(true);
setProjects((prev) =>
prev.map((p) => {
if (p.id !== projectId) return p;
return {
...p,
collaborators: p.collaborators.filter((c) => c.userId !== userId),
updatedAt: new Date().toISOString(),
};
})
);
setLoading(false);
return projects().find((p) => p.id === projectId)!;
};
const archiveProject = async (id: string): Promise<Project> => {
return updateProject(id, { status: 'archived' });
};
return {
projects,
loading,
createProject,
updateProject,
deleteProject,
addCollaborator,
removeCollaborator,
archiveProject,
};
}
export function generateProjectId(): string {
return `proj_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
}
export function useProjectService() {
return createProjectService();
}

83
src/lib/video/webrtc-video-manager.ts
View File

@@ -21,7 +21,7 @@ export interface WebRTCVideoManagerOptions {
export interface PeerConnection {
peerId: string;
connection: DataConnection;
connection: MediaConnection;
stream: MediaStream | null;
state: PeerConnectionState;
quality: ConnectionQuality;
@@ -37,14 +37,12 @@ export interface VideoManagerEvents {
'state:changed': (state: PeerConnectionState) => void;
}
class DataConnection {
private peer: Peer;
class MediaConnection {
private conn: any;
private stream: MediaStream | null = null;
private listeners: Map<string, Set<(...args: any[]) => void>> = new Map();
constructor(peer: Peer, conn: any) {
this.peer = peer;
constructor(conn: any) {
this.conn = conn;
this.conn.on('stream', (stream: MediaStream) => {
@@ -73,11 +71,6 @@ class DataConnection {
this.conn.send(data);
}
pushStream(stream: MediaStream): void {
this.stream = stream;
this.conn.sendStream(stream);
}
getStream(): MediaStream | null {
return this.stream;
}
@@ -105,7 +98,7 @@ class DataConnection {
export class WebRTCVideoManager extends EventEmitter {
private peer: Peer | null = null;
private options: WebRTCVideoManagerOptions;
private connections: Map<string, DataConnection> = new Map();
private connections: Map<string, MediaConnection> = new Map();
private localStream: MediaStream | null = null;
private state: PeerConnectionState = 'disconnected';
private qualityMetrics: Map<string, ConnectionQuality> = new Map();
@@ -130,27 +123,23 @@ export class WebRTCVideoManager extends EventEmitter {
await this.acquireLocalStream();
// Initialize PeerJS
this.peer = new Peer(this.options.peerId, {
host: new URL(this.options.serverUrl).hostname,
port: new URL(this.options.serverUrl).port || 443,
const serverUrl = new URL(this.options.serverUrl ?? 'https://0.peerjs.com:443');
this.peer = new Peer(this.options.peerId ?? 'unknown', {
host: serverUrl.hostname,
port: Number(serverUrl.port || 443),
path: '/webrtc',
secure: true,
secure: serverUrl.protocol === 'https:',
config: {
iceServers: this.options.turnServers,
},
});
// Handle incoming connections
this.peer.on('connection', (conn: any) => {
const dataConn = new DataConnection(this.peer!, conn);
this.connections.set(conn.peer, dataConn);
this.peer.on('call', (conn: any) => {
const mediaConn = new MediaConnection(conn);
this.connections.set(conn.peer, mediaConn);
// Send local stream to new peer
if (this.localStream) {
dataConn.pushStream(this.localStream);
}
this.emit('peer:connected', conn.peer, this.localStream!);
this.emit('peer:connected', conn.peer, conn.stream);
this.updateState('connected');
});
@@ -196,44 +185,33 @@ export class WebRTCVideoManager extends EventEmitter {
}
}
connectToPeer(peerId: string): DataConnection {
connectToPeer(peerId: string, stream?: MediaStream): MediaConnection {
if (!this.peer) {
throw new Error('Peer not initialized. Call initialize() first.');
}
const conn = this.peer.connect(peerId, {
metadata: {
peerId: this.peer.id,
timestamp: Date.now(),
},
});
const dataConn = new DataConnection(this.peer, conn);
this.connections.set(peerId, dataConn);
// Send local stream
if (this.localStream) {
dataConn.pushStream(this.localStream);
}
const conn = this.peer.call(peerId, stream ?? this.localStream!);
const mediaConn = new MediaConnection(conn);
this.connections.set(peerId, mediaConn);
// Monitor connection quality
dataConn.on('open', () => {
this.startQualityMonitoring(peerId, dataConn);
mediaConn.on('open', () => {
this.startQualityMonitoring(peerId, mediaConn);
});
dataConn.on('close', () => {
mediaConn.on('close', () => {
this.qualityMetrics.delete(peerId);
this.emit('peer:disconnected', peerId);
});
return dataConn;
return mediaConn;
}
getPeerConnection(peerId: string): DataConnection | undefined {
getPeerConnection(peerId: string): MediaConnection | undefined {
return this.connections.get(peerId);
}
getAllConnections(): Map<string, DataConnection> {
getAllConnections(): Map<string, MediaConnection> {
return new Map(this.connections);
}
@@ -308,17 +286,12 @@ export class WebRTCVideoManager extends EventEmitter {
return this.qualityMetrics.get(peerId) || 'fair';
}
private startQualityMonitoring(peerId: string, conn: DataConnection): void {
let packetLoss = 0;
let latencySamples: number[] = [];
private startQualityMonitoring(peerId: string, conn: MediaConnection): void {
const checkQuality = () => {
// Simple quality estimation based on connection state
if (conn) {
const quality: ConnectionQuality = 'good';
this.qualityMetrics.set(peerId, quality);
this.emit('connection:quality', peerId, quality);
}
// TODO: Implement actual RTCPeerConnection stats via getStats()
const quality: ConnectionQuality = 'good';
this.qualityMetrics.set(peerId, quality);
this.emit('connection:quality', peerId, quality);
};
// Check quality every 5 seconds

53
src/routes.tsx Normal file
View File

@@ -0,0 +1,53 @@
import { Route, Navigate } from '@solidjs/router';
import { lazy } from 'solid-js';
import { ProtectedRoute } from './components/auth/ProtectedRoute';
import { SignIn } from './components/auth/SignIn';
import { SignUp } from './components/auth/SignUp';
import { Landing } from './routes/landing/Landing';
import { Blog } from './routes/blog/Blog';
import { BlogPost } from './routes/blog/BlogPost';
import { Features } from './routes/features/Features';
import { Pricing } from './routes/pricing/Pricing';
import '../styles/landing.css';
import '../styles/blog.css';
import '../styles/features.css';
import '../styles/pricing.css';
const AppLayout = lazy(() => import('./components/layout/AppLayout'));
const Dashboard = lazy(() => import('./components/dashboard/Dashboard'));
const ProjectList = lazy(() => import('./components/projects/ProjectList'));
const ProjectDetail = lazy(() => import('./components/projects/ProjectDetail'));
const ProjectForm = lazy(() => import('./components/projects/ProjectForm'));
const UserProfile = lazy(() => import('./components/auth/UserProfile'));
const TeamManagement = lazy(() => import('./components/teams/TeamManagement'));
const Redirect = () => <Navigate href="/dashboard" />;
export const routes = [
<Route path="/" component={Landing} />,
<Route path="/features" component={Features} />,
<Route path="/pricing" component={Pricing} />,
<Route path="/blog" component={Blog} />,
<Route path="/blog/:slug" component={BlogPost} />,
<Route path="/sign-in" component={SignIn} />,
<Route path="/sign-up" component={SignUp} />,
<Route path="/app" component={AppLayout}>
<Route path="" component={Redirect} />,
<Route path="dashboard" component={ProtectedRoute}>
<Route path="" component={Dashboard} />
</Route>,
<Route path="projects" component={ProtectedRoute}>
<Route path="" component={ProjectList} />
<Route path="new" component={ProjectForm} />
<Route path="{id}" component={ProjectDetail} />
<Route path="{id}/edit" component={ProjectForm} />
</Route>,
<Route path="profile" component={ProtectedRoute}>
<Route path="" component={UserProfile} />
</Route>,
<Route path="teams" component={ProtectedRoute}>
<Route path="" component={TeamManagement} />
<Route path="{id}" component={TeamManagement} />
</Route>,
</Route>,
];

175
src/routes/blog/Blog.tsx Normal file
View File

@@ -0,0 +1,175 @@
import { Component, For, createSignal } from 'solid-js';
import { A } from '@solidjs/router';
const blogPosts = [
{
slug: 'introducing-scripter',
title: 'Introducing Scripter: The Modern Screenwriting Platform',
excerpt: 'After months of development, were thrilled to announce Scripter — built for screenwriters who demand speed, collaboration, and creative freedom.',
category: 'Product',
date: 'April 24, 2026',
readTime: '3 min read'
},
{
slug: 'final-draft-alternative',
title: 'Why Switch from Final Draft to Scripter?',
excerpt: 'Final Draft has been the industry standard for decades. But at $199 with no real-time collaboration, its time for a better option.',
category: 'Tips',
date: 'April 23, 2026',
readTime: '5 min read'
},
{
slug: 'screenplay-formatting-guide',
title: 'The Complete Guide to Screenplay Formatting',
excerpt: 'Master the fundamentals of screenplay format. Scene headings, action lines, dialogue, parentheticals — everything you need to know.',
category: 'Tips',
date: 'April 22, 2026',
readTime: '8 min read'
},
{
slug: 'real-time-collaboration-writing',
title: 'How Real-Time Collaboration Changes Screenwriting',
excerpt: 'Writing partners no longer need to email drafts back and forth. See how real-time collaboration transforms the writing process.',
category: 'Product',
date: 'April 21, 2026',
readTime: '4 min read'
}
];
export const Blog: Component = () => {
const [selectedCategory, setSelectedCategory] = createSignal<string>('All');
const categories = ['All', 'Tips', 'Industry', 'Product', 'Community'];
const filteredPosts = () => {
const category = selectedCategory();
if (category === 'All') return blogPosts;
return blogPosts.filter(post => post.category === category);
};
return (
<div class="blog-page">
{/* Navigation */}
<nav class="landing-nav">
<div class="nav-container">
<div class="nav-logo">
<A href="/">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
<path d="M16 6L8 10V22L16 26L24 22V10L16 6Z" fill="#76b3e1"/>
</svg>
<span class="logo-text">Scripter</span>
</A>
</div>
<div class="nav-links">
<a href="/#features">Features</a>
<a href="/#pricing">Pricing</a>
<A href="/blog" class="active">Blog</A>
<A href="/sign-in" class="nav-signin">Sign In</A>
<A href="/sign-up" class="nav-signup">Start Writing Free</A>
</div>
</div>
</nav>
{/* Blog Header */}
<section class="blog-header">
<div class="blog-header-content">
<h1>The Scripter Blog</h1>
<p>Tips, insights, and updates for modern screenwriters</p>
</div>
</section>
{/* Category Filter */}
<section class="blog-filter">
<div class="filter-container">
<For each={categories}>
{(category) => (
<button
class={selectedCategory() === category ? 'active' : ''}
onClick={() => setSelectedCategory(category)}
>
{category}
</button>
)}
</For>
</div>
</section>
{/* Blog Posts Grid */}
<section class="blog-posts">
<div class="posts-container">
<div class="posts-grid">
<For each={filteredPosts()}>
{(post) => (
<A href={`/blog/${post.slug}`} class="post-card">
<div class="post-category">{post.category}</div>
<h2 class="post-title">{post.title}</h2>
<p class="post-excerpt">{post.excerpt}</p>
<div class="post-meta">
<span>{post.date}</span>
<span>•</span>
<span>{post.readTime}</span>
</div>
</A>
)}
</For>
</div>
</div>
</section>
{/* Newsletter Signup */}
<section class="newsletter">
<div class="newsletter-content">
<h2>Stay in the loop</h2>
<p>Get screenwriting tips, product updates, and industry insights delivered to your inbox.</p>
<form class="newsletter-form" onSubmit={(e) => e.preventDefault()}>
<input
type="email"
placeholder="Enter your email"
required
/>
<button type="submit" class="cta-primary">Subscribe</button>
</form>
<p class="newsletter-note">No spam. Unsubscribe anytime.</p>
</div>
</section>
{/* Footer */}
<footer class="landing-footer">
<div class="footer-content">
<div class="footer-brand">
<div class="nav-logo">
<svg width="24" height="24" viewBox="0 0 32 32" fill="none">
<path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
</svg>
<span>Scripter</span>
</div>
<p>Write Faster.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Product</h4>
<a href="/#features">Features</a>
<a href="/#pricing">Pricing</a>
<a href="/blog">Blog</a>
</div>
<div class="footer-col">
<h4>Company</h4>
<a href="/about">About</a>
<a href="/faq">FAQ</a>
<a href="/contact">Contact</a>
</div>
<div class="footer-col">
<h4>Legal</h4>
<a href="/terms">Terms</a>
<a href="/privacy">Privacy</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Scripter. All rights reserved.</p>
</div>
</footer>
</div>
);
};

372
src/routes/blog/BlogPost.tsx Normal file
View File

@@ -0,0 +1,372 @@
import { Component, createSignal, For, Show } from 'solid-js';
import { A, useParams } from '@solidjs/router';
const blogPosts: Record<string, {
title: string;
excerpt: string;
content: string;
category: string;
date: string;
readTime: string;
author: string;
}> = {
'introducing-scripter': {
title: 'Introducing Scripter: The Modern Screenwriting Platform',
excerpt: 'After months of development, we\'re thrilled to announce Scripter — built for screenwriters who demand speed, collaboration, and creative freedom.',
content: `
<p>Today marks a major milestone in our journey to revolutionize screenwriting software. After months of intense development, we're proud to introduce <strong>Scripter</strong> — the modern screenwriting platform built for how you actually work.</p>
<h2>Why We Built Scripter</h2>
<p>Screenwriting software hasn't evolved much in the past decade. Final Draft costs $199 and hasn't seen meaningful innovation in years. WriterDuet tried to modernize, but they're still stuck on outdated technology.</p>
<p>We knew there had to be a better way. So we built Scripter from the ground up with:</p>
<ul>
<li><strong>Modern technology stack</strong> — Tauri + SolidJS for native performance</li>
<li><strong>Real-time collaboration</strong> — Write together with your team, see changes live</li>
<li><strong>AI-powered writing</strong> — Get help with dialogue, scenes, and character development</li>
<li><strong>Fair pricing</strong> — Free to start, Pro at $7.99/mo (33% less than WriterDuet)</li>
</ul>
<h2>What You Can Do With Scripter</h2>
<p>Scripter isn't just another screenwriting tool. It's a complete creative partner:</p>
<h3>Industry-Standard Formatting</h3>
<p>Focus on writing while Scripter handles the formatting. Scene headings, action lines, dialogue, parentheticals — everything automatically formats to industry standards.</p>
<h3>Real-Time Collaboration</h3>
<p>Write together with your writing partners. See their changes in real-time. Leave comments. Hop on a video call without leaving the app.</p>
<h3>AI Writing Assistant</h3>
<p>Stuck on a scene? Our AI can help you brainstorm dialogue, refine action lines, or analyze your characters. It's like having a writing partner available 24/7.</p>
<h2>Join Us</h2>
<p>We're just getting started. Scripter is available now, and we're committed to making it the best screenwriting platform on the market.</p>
<p><strong>Ready to write faster?</strong> <a href="/sign-up">Start writing free today</a> — no credit card required.</p>
`,
category: 'Product',
date: 'April 24, 2026',
readTime: '3 min read',
author: 'The Scripter Team'
},
'final-draft-alternative': {
title: 'Why Switch from Final Draft to Scripter?',
excerpt: 'Final Draft has been the industry standard for decades. But at $199 with no real-time collaboration, it\'s time for a better option.',
content: `
<p>Final Draft dominated screenwriting software for good reason — it was the first to get screenplay formatting right. But that was 30 years ago. Today, Final Draft feels like a relic, and its $199 price tag is hard to justify.</p>
<h2>The Final Draft Problem</h2>
<p>Here's what you get with Final Draft 13:</p>
<ul>
<li>$199 one-time payment (with no meaningful updates)</li>
<li>Desktop-only (no real-time collaboration)</li>
<li>Manual saves and backups</li>
<li>No AI assistance</li>
<li>Clunky interface that hasn't evolved since 2010</li>
</ul>
<p>For working screenwriters in 2026, this isn't good enough.</p>
<h2>The Scripter Difference</h2>
<p>Scripter gives you everything Final Draft does, plus:</p>
<ul>
<li><strong>$7.99/month</strong> — Less than 5% of Final Draft's cost</li>
<li><strong>Real-time collaboration</strong> — Write with partners, anywhere</li>
<li><strong>Cloud backup</strong> — Never lose a draft</li>
<li><strong>AI writing assistant</strong> — Built-in creative support</li>
<li><strong>Modern interface</strong> — Designed for 2026, not 1996</li>
<li><strong>Cross-platform</strong> — Mac, Windows, Linux, web, mobile</li>
</ul>
<h2>Make the Switch</h2>
<p>Import your Final Draft files directly into Scripter. Keep writing. Everything works exactly as you expect — just faster, smarter, and with your team.</p>
<p><strong>Try Scripter free</strong> and see why thousands of screenwriters are making the switch. <a href="/sign-up">Start writing now</a>.</p>
`,
category: 'Tips',
date: 'April 23, 2026',
readTime: '5 min read',
author: 'The Scripter Team'
},
'screenplay-formatting-guide': {
title: 'The Complete Guide to Screenplay Formatting',
excerpt: 'Master the fundamentals of screenplay format. Scene headings, action lines, dialogue, parentheticals — everything you need to know.',
content: `
<p>Proper screenplay formatting isn't just about looking professional — it's about speaking the language of the industry. Here's everything you need to know.</p>
<h2>Scene Headings (Sluglines)</h2>
<p>Scene headings tell us where and when each scene takes place. They follow a strict format:</p>
<pre>INT. COFFEE SHOP - DAY</pre>
<p>Or:</p>
<pre>EXT. PARK - NIGHT</pre>
<p>Always uppercase. Always start with INT. or EXT. Always include a time of day.</p>
<h2>Action Lines</h2>
<p>Action describes what we see and hear. Keep it present tense, active voice, and concise:</p>
<pre>SARAH (28, determined) types furiously on her laptop.
The barista calls her name.</pre>
<p>Don't direct the camera. Don't describe thoughts or feelings. Just what we can see and hear.</p>
<h2>Character Names</h2>
<p>Character names are centered and uppercase when introduced:</p>
<pre> SARAH
I don't have time for this.</pre>
<p>First introductions should include age and a brief description in the action lines.</p>
<h2>Dialogue</h2>
<p>Dialogue goes under the character name, centered on the page. Keep it natural. Keep it purposeful.</p>
<h2>Parentheticals</h2>
<p>Use parentheticals sparingly to indicate how a line is delivered:</p>
<pre> SARAH
(without looking up)
I said I'm busy.</pre>
<p>Don't overuse them. Trust your actors and director.</p>
<h2>Transitions</h2>
<p>Transitions like CUT TO:, FADE IN:, and FADE OUT. go on the right side of the page. Use them sparingly — CUT TO: is usually implied.</p>
<h2>Let Scripter Handle It</h2>
<p>Sound complicated? Scripter automates all of this. Just write, and we'll format everything to industry standards automatically.</p>
<p><a href="/sign-up">Try Scripter free</a> and focus on what matters — your story.</p>
`,
category: 'Tips',
date: 'April 22, 2026',
readTime: '8 min read',
author: 'The Scripter Team'
},
'real-time-collaboration-writing': {
title: 'How Real-Time Collaboration Changes Screenwriting',
excerpt: 'Writing partners no longer need to email drafts back and forth. See how real-time collaboration transforms the writing process.',
content: `
<p>Screenwriting has always been collaborative. But until now, collaboration meant emailing drafts, managing versions, and hoping you're all working on the same file.</p>
<p>Real-time collaboration changes everything.</p>
<h2>The Old Way</h2>
<p>Remember this?</p>
<ol>
<li>You write a scene</li>
<li>Email it to your partner</li>
<li>They make changes</li>
<li>Email it back as "Script_v2_FINAL_revised.docx"</li>
<li>Rinse and repeat</li>
</ol>
<p>Somewhere in that mess, ideas get lost. Momentum dies. Frustration builds.</p>
<h2>The Scripter Way</h2>
<p>With Scripter, you and your partners are always in the same document:</p>
<ul>
<li><strong>See changes live</strong> — Watch your partner's cursor move, see their words appear</li>
<li><strong>Comments and mentions</strong> — Leave feedback inline, @mention your team</li>
<li><strong>Video chat built in</strong> — Talk through scenes without leaving the app</li>
<li><strong>Version history</strong> — Every change is saved. Roll back anytime.</li>
</ul>
<h2>Why It Matters</h2>
<p>Real-time collaboration isn't just convenient — it's transformative. Writing becomes a conversation. Ideas flow faster. You finish scripts sooner.</p>
<p>One writing team told us they cut their first draft time from 6 months to 3 weeks after switching to Scripter.</p>
<h2>Try It Yourself</h2>
<p>Invite your writing partner to Scripter. Open the same document. Start writing together.</p>
<p><a href="/sign-up">Get started free</a> — no credit card required.</p>
`,
category: 'Product',
date: 'April 21, 2026',
readTime: '4 min read',
author: 'The Scripter Team'
}
};
export const BlogPost: Component = () => {
const params = useParams();
const [post, setPost] = createSignal<{slug: string} & typeof blogPosts[string] | null>(null);
// Find the post by slug
createSignal(() => {
const slug = params.slug;
if (slug && blogPosts[slug]) {
setPost({ slug, ...blogPosts[slug] });
} else {
setPost(null);
}
});
const relatedPosts = () => {
const currentPost = post();
if (!currentPost) return [];
return Object.entries(blogPosts)
.filter(([slug, p]) => slug !== currentPost.slug && p.category === currentPost.category)
.slice(0, 3)
.map(([slug, p]) => ({ slug, ...p }));
};
return (
<div class="blog-post-page">
{/* Navigation */}
<nav class="landing-nav">
<div class="nav-container">
<div class="nav-logo">
<A href="/">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
<path d="M16 6L8 10V22L16 26L24 22V10L16 6Z" fill="#76b3e1"/>
</svg>
<span class="logo-text">Scripter</span>
</A>
</div>
<div class="nav-links">
<a href="/#features">Features</a>
<a href="/#pricing">Pricing</a>
<A href="/blog">Blog</A>
<A href="/sign-in" class="nav-signin">Sign In</A>
<A href="/sign-up" class="nav-signup">Start Writing Free</A>
</div>
</div>
</nav>
<Show when={post()} fallback={
<div class="post-not-found">
<h1>Post not found</h1>
<p>Sorry, we couldn't find that blog post.</p>
<A href="/blog" class="cta-primary">Back to Blog</A>
</div>
}>
{(currentPost) => (
<>
{/* Post Header */}
<article class="blog-post">
<header class="post-header">
<div class="post-category-badge">{currentPost().category}</div>
<h1>{currentPost().title}</h1>
<div class="post-meta">
<span class="author">{currentPost().author}</span>
<span>•</span>
<span>{currentPost().date}</span>
<span>•</span>
<span>{currentPost().readTime}</span>
</div>
</header>
{/* Post Content */}
<div
class="post-content"
innerHTML={currentPost().content}
/>
{/* Share Section */}
<div class="post-share">
<h3>Share this post</h3>
<div class="share-buttons">
<button class="share-btn twitter">Twitter</button>
<button class="share-btn linkedin">LinkedIn</button>
<button class="share-btn facebook">Facebook</button>
</div>
</div>
</article>
{/* Related Posts */}
<Show when={relatedPosts().length > 0}>
<section class="related-posts">
<h2>Related Posts</h2>
<div class="related-grid">
<For each={relatedPosts()}>
{(related) => (
<A href={`/blog/${related.slug}`} class="related-card">
<div class="related-category">{related.category}</div>
<h3>{related.title}</h3>
<p>{related.excerpt}</p>
<div class="related-meta">{related.readTime}</div>
</A>
)}
</For>
</div>
</section>
</Show>
{/* CTA Section */}
<section class="post-cta">
<h2>Ready to start writing?</h2>
<p>Join thousands of screenwriters using Scripter to write faster.</p>
<A href="/sign-up" class="cta-primary">Start Writing Free</A>
</section>
</>
)}
</Show>
{/* Footer */}
<footer class="landing-footer">
<div class="footer-content">
<div class="footer-brand">
<div class="nav-logo">
<svg width="24" height="24" viewBox="0 0 32 32" fill="none">
<path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
</svg>
<span>Scripter</span>
</div>
<p>Write Faster.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Product</h4>
<a href="/#features">Features</a>
<a href="/#pricing">Pricing</a>
<a href="/blog">Blog</a>
</div>
<div class="footer-col">
<h4>Company</h4>
<a href="/about">About</a>
<a href="/faq">FAQ</a>
<a href="/contact">Contact</a>
</div>
<div class="footer-col">
<h4>Legal</h4>
<a href="/terms">Terms</a>
<a href="/privacy">Privacy</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Scripter. All rights reserved.</p>
</div>
</footer>
</div>
);
};

32
src/routes/config.ts Normal file
View File

@@ -0,0 +1,32 @@
import { RouteDefinition } from '@solidjs/router';
export interface AppRoute {
path: string;
label: string;
icon?: string;
requiresAuth?: boolean;
}
export const ROUTES: AppRoute[] = [
{ path: '/', label: 'Projects', icon: '📁', requiresAuth: true },
{ path: '/projects/:id', label: 'Project', icon: '📝', requiresAuth: true },
{ path: '/projects/:id/edit', label: 'Edit Project', icon: '✏️', requiresAuth: true },
{ path: '/settings', label: 'Settings', icon: '⚙️', requiresAuth: true },
{ path: '/settings/profile', label: 'Profile', icon: '👤', requiresAuth: true },
{ path: '/settings/team', label: 'Team', icon: '👥', requiresAuth: true },
{ path: '/sign-in', label: 'Sign In', icon: '🔑' },
{ path: '/sign-up', label: 'Sign Up', icon: '📝' },
];
export function getRouteConfig(path: string): AppRoute | undefined {
return ROUTES.find(
(r) => r.path === path || path.startsWith(r.path.replace(':id', ''))
);
}
export function isAuthRequired(path: string): boolean {
if (path === '/' || path.startsWith('/projects') || path.startsWith('/settings')) {
return true;
}
return false;
}

256
src/routes/features/Features.tsx Normal file
View File

@@ -0,0 +1,256 @@
import { Component, For } from 'solid-js';
import { A } from '@solidjs/router';
const featureCategories = [
{
name: 'Writing Tools',
icon: '✍️',
features: [
{
title: 'Screenplay Editor',
description: 'Full-featured editor with industry-standard formatting built in.',
details: ['Scene headings', 'Action lines', 'Dialogue', 'Parentheticals', 'Transitions']
},
{
title: 'Auto-Format',
description: 'Intelligent formatting that understands screenplay structure.',
details: ['Automatic indentation', 'Element detection', 'Tab/enter shortcuts', 'Custom margins']
},
{
title: 'Templates',
description: 'Start with the right format for any project.',
details: ['Feature film', 'TV pilot', 'Short film', 'Sitcom', 'Podcast', 'Treatment']
},
{
title: 'Typewriter Mode',
description: 'Keep your current line centered as you type for better focus.',
details: ['Scroll locking', 'Custom positioning', 'Distraction-free', 'Smooth scrolling']
},
{
title: 'Dictation',
description: 'Speak your script and let Scripter format it automatically.',
details: ['Voice-to-text', 'Multi-language', 'Punctuation commands', 'High accuracy']
}
]
},
{
name: 'Collaboration',
icon: '👥',
features: [
{
title: 'Real-Time Editing',
description: 'Multiple writers, one document, zero conflicts.',
details: ['Live cursors', 'Instant sync', 'Conflict-free editing', 'Presence indicators']
},
{
title: 'Comments & Mentions',
description: 'Leave feedback inline and @mention your team.',
details: ['Threaded comments', '@mentions', 'Resolve comments', 'Comment notifications']
},
{
title: 'Video Chat',
description: 'Built-in video calls for writing sessions.',
details: ['HD video', 'Screen sharing', 'Group calls', 'No external app needed']
},
{
title: 'Revision Tracking',
description: 'Color-coded changes with accept/reject workflow.',
details: ['Change highlighting', 'Accept/reject', 'Revision notes', 'OOC marks']
},
{
title: 'Version History',
description: 'Never lose a draft. Roll back to any point in time.',
details: ['Auto-save', 'Version snapshots', 'Compare versions', 'Restore anytime']
}
]
},
{
name: 'Organization',
icon: '📋',
features: [
{
title: 'Project Management',
description: 'Cards, sequencing, outlining tools.',
details: ['Scene cards', 'Drag-and-drop', 'Color coding', 'Notes per scene']
},
{
title: 'Character Database',
description: 'Track characters, relationships, and arcs.',
details: ['Character profiles', 'Relationship maps', 'Arc tracking', 'Appearance log']
},
{
title: 'Mind Maps',
description: 'Visual story structure planning.',
details: ['Brainstorming boards', 'Story connections', 'Visual outlining', 'Export to cards']
},
{
title: 'Goal Setting',
description: 'Track your writing progress and hit deadlines.',
details: ['Daily goals', 'Progress tracking', 'Deadline reminders', 'Statistics']
}
]
},
{
name: 'Export & Integration',
icon: '📤',
features: [
{
title: 'Export Formats',
description: 'PDF, Final Draft XML, Fountain, and more.',
details: ['PDF export', 'FDX import/export', 'Fountain support', 'Screenplay Pro']
},
{
title: 'Open API',
description: 'Integrate with StudioBinder, IMDb, and more.',
details: ['REST API', 'Webhooks', 'Third-party integrations', 'Custom workflows']
},
{
title: 'Cloud Backup',
description: 'Automatic saves to Google Drive, Dropbox.',
details: ['Auto-backup', 'Multiple providers', 'Scheduled sync', 'Conflict resolution']
}
]
},
{
name: 'AI Features',
icon: '🤖',
features: [
{
title: 'Smart Continuation',
description: 'AI suggests next lines and scenes.',
details: ['Context-aware', 'Multiple suggestions', 'Style matching', 'One-click insert']
},
{
title: 'Character Analysis',
description: 'Get insights on character consistency and development.',
details: ['Voice analysis', 'Arc tracking', 'Relationship insights', 'Development tips']
},
{
title: 'Scene Enhancement',
description: 'Improve descriptions, tighten dialogue.',
details: ['Passive voice detection', 'Dialogue polish', 'Pacing analysis', 'Suggestions']
},
{
title: 'Auto-Translate',
description: 'Translate scripts to 30+ languages.',
details: ['30+ languages', 'Format preserved', 'Character names intact', 'Quick switch']
},
{
title: 'ReadAloud',
description: 'TTS narration with distinct character voices.',
details: ['Multiple voices', 'Natural speech', 'Speed control', 'Character detection']
}
]
}
];
export const Features: Component = () => {
return (
<div class="features-page">
{/* Navigation */}
<nav class="landing-nav">
<div class="nav-container">
<div class="nav-logo">
<A href="/">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
<path d="M16 6L8 10V22L16 26L24 22V10L16 6Z" fill="#76b3e1"/>
</svg>
<span class="logo-text">Scripter</span>
</A>
</div>
<div class="nav-links">
<A href="/#features" class="active">Features</A>
<a href="/#pricing">Pricing</a>
<A href="/blog">Blog</A>
<A href="/sign-in" class="nav-signin">Sign In</A>
<A href="/sign-up" class="nav-signup">Start Writing Free</A>
</div>
</div>
</nav>
{/* Features Header */}
<section class="features-hero">
<div class="features-hero-content">
<h1>Everything you need to write your best script</h1>
<p>From first draft to final polish, Scripter has the tools professional screenwriters need.</p>
</div>
</section>
{/* Feature Categories */}
<section class="features-categories">
<div class="features-container">
<For each={featureCategories}>
{(category) => (
<div class="feature-category" id={category.name.toLowerCase().replace(' ', '-')}>
<div class="category-header">
<span class="category-icon">{category.icon}</span>
<h2>{category.name}</h2>
</div>
<div class="category-features">
<For each={category.features}>
{(feature) => (
<div class="feature-detail">
<h3>{feature.title}</h3>
<p>{feature.description}</p>
<ul class="feature-details-list">
<For each={feature.details}>
{(detail) => <li>{detail}</li>}
</For>
</ul>
</div>
)}
</For>
</div>
</div>
)}
</For>
</div>
</section>
{/* CTA Section */}
<section class="features-cta">
<h2>Ready to experience the future of screenwriting?</h2>
<p>Join thousands of writers who've made the switch to Scripter.</p>
<A href="/sign-up" class="cta-primary">Start Writing Free</A>
</section>
{/* Footer */}
<footer class="landing-footer">
<div class="footer-content">
<div class="footer-brand">
<div class="nav-logo">
<svg width="24" height="24" viewBox="0 0 32 32" fill="none">
<path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
</svg>
<span>Scripter</span>
</div>
<p>Write Faster.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Product</h4>
<a href="/#features">Features</a>
<a href="/#pricing">Pricing</a>
<a href="/blog">Blog</a>
</div>
<div class="footer-col">
<h4>Company</h4>
<a href="/about">About</a>
<a href="/faq">FAQ</a>
<a href="/contact">Contact</a>
</div>
<div class="footer-col">
<h4>Legal</h4>
<a href="/terms">Terms</a>
<a href="/privacy">Privacy</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Scripter. All rights reserved.</p>
</div>
</footer>
</div>
);
};

567
src/routes/index.tsx Normal file
View File

@@ -0,0 +1,567 @@
import { Component, createSignal, onMount, Suspense } from 'solid-js';
import { A, useNavigate, useParams } from '@solidjs/router';
import { useAuth, useAuthActions } from '../lib/auth/provider';
import { useProjectService } from '../lib/projects/service';
import { Project, UserRole } from '../lib/auth/types';
export const HomePage: Component = () => {
const service = useProjectService();
const auth = useAuth();
const navigate = useNavigate();
onMount(() => {
const user = auth().user;
if (!user && !auth().isLoading) {
navigate('/sign-in');
}
});
return (
<Suspense fallback={<div class="loading">Loading projects...</div>}>
<ProjectListView
projects={service.projects()}
onCreate={service.createProject}
/>
</Suspense>
);
};
const ProjectListView: Component<{
projects: Project[];
onCreate: (name: string, description: string, ownerId: string) => Promise<Project>;
}> = (props) => {
const auth = useAuth();
const { signOut } = useAuthActions();
const navigate = useNavigate();
const [showCreate, setShowCreate] = createSignal(false);
const [newName, setNewName] = createSignal('');
const [newDescription, setNewDescription] = createSignal('');
const [creating, setCreating] = createSignal(false);
const handleCreate = async () => {
const user = auth().user;
if (!user || !newName().trim()) return;
setCreating(true);
try {
const project = await props.onCreate(
newName().trim(),
newDescription().trim(),
user.id
);
setShowCreate(false);
setNewName('');
setNewDescription('');
navigate(`/projects/${project.id}`);
} finally {
setCreating(false);
}
};
const activeProjects = () =>
props.projects.filter((p) => p.status === 'active' || p.status === 'draft');
const archivedProjects = () =>
props.projects.filter((p) => p.status === 'archived');
const formatDate = (dateStr: string) => {
return new Date(dateStr).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
});
};
return (
<div class="project-list-container">
<header class="project-list-header">
<div class="header-left">
<h1>Projects</h1>
<p class="subtitle">Manage your screenwriting projects</p>
</div>
<div class="header-actions">
<button
class="btn btn-primary"
onClick={() => setShowCreate(true)}
>
+ New Project
</button>
<A href="/settings/profile" class="btn btn-secondary">Profile</A>
<button class="btn btn-ghost" onClick={signOut}>
Sign Out
</button>
</div>
</header>
{showCreate() && (
<div class="modal-overlay" onClick={() => setShowCreate(false)}>
<div class="create-project-modal" onClick={(e) => e.stopPropagation()}>
<div class="modal-header">
<h2>New Project</h2>
<button class="btn-close" onClick={() => setShowCreate(false)}>×</button>
</div>
<div class="modal-body">
<label class="form-label">
<span>Project Name</span>
<input
type="text"
placeholder="My Screenplay"
value={newName()}
onChange={(e) => setNewName(e.target.value)}
class="input-field"
autofocus
/>
</label>
<label class="form-label">
<span>Description (optional)</span>
<textarea
placeholder="A brief description of your project..."
value={newDescription()}
onChange={(e) => setNewDescription(e.target.value)}
class="input-field"
rows={3}
/>
</label>
</div>
<div class="modal-footer">
<button
class="btn btn-secondary"
onClick={() => setShowCreate(false)}
>
Cancel
</button>
<button
class="btn btn-primary"
onClick={handleCreate}
disabled={creating() || !newName().trim()}
>
{creating() ? 'Creating...' : 'Create Project'}
</button>
</div>
</div>
</div>
)}
<section class="projects-section">
<div class="section-header">
<h2>Active Projects</h2>
<span class="count-badge">{activeProjects().length}</span>
</div>
<div class="project-grid">
{activeProjects().map((project) => (
<ProjectCard project={project} formatDate={formatDate} />
))}
</div>
{activeProjects().length === 0 && (
<div class="empty-state">
<div class="empty-icon">📝</div>
<h3>No projects yet</h3>
<p>Create your first screenplay project to get started.</p>
<button
class="btn btn-primary"
onClick={() => setShowCreate(true)}
>
Create Project
</button>
</div>
)}
</section>
{archivedProjects().length > 0 && (
<section class="projects-section archived">
<div class="section-header">
<h2>Archived</h2>
<span class="count-badge">{archivedProjects().length}</span>
</div>
<div class="project-grid">
{archivedProjects().map((project) => (
<ProjectCard project={project} formatDate={formatDate} />
))}
</div>
</section>
)}
</div>
);
};
const ProjectCard: Component<{
project: Project;
formatDate: (dateStr: string) => string;
}> = (props) => (
<A
href={`/projects/${props.project.id}`}
class={`project-card ${props.project.status}`}
>
<div class="project-card-header">
<h3 class="project-name">{props.project.name}</h3>
<span class={`status-badge ${props.project.status}`}>
{props.project.status}
</span>
</div>
<p class="project-description">{props.project.description}</p>
<div class="project-meta">
<span class="collaborator-count">
{props.project.collaborators.length} collaborator{props.project.collaborators.length !== 1 ? 's' : ''}
</span>
<span class="updated-at">{props.formatDate(props.project.updatedAt)}</span>
</div>
</A>
);
export const ProjectPage: Component = () => {
const params = useParams();
const navigate = useNavigate();
const service = useProjectService();
const auth = useAuth();
const { signOut } = useAuthActions();
const [showDeleteConfirm, setShowDeleteConfirm] = createSignal(false);
const [showAddCollab, setShowAddCollab] = createSignal(false);
const [newUserId, setNewUserId] = createSignal('');
const [newRole, setNewRole] = createSignal<UserRole>('editor');
const project = () => service.projects().find((p) => p.id === params.id);
const isOwner = () => {
const p = project();
const user = auth().user;
return p?.ownerId === user?.id;
};
const handleDelete = async () => {
const p = project();
if (!p) return;
await service.deleteProject(p.id);
navigate('/');
};
const handleArchive = async () => {
const p = project();
if (!p) return;
await service.archiveProject(p.id);
};
const handleAddCollaborator = async () => {
const p = project();
if (!p || !newUserId().trim()) return;
await service.addCollaborator(p.id, newUserId().trim(), newRole());
setNewUserId('');
setShowAddCollab(false);
};
const formatDate = (dateStr: string) => {
return new Date(dateStr).toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
});
};
if (!project()) {
return (
<div class="empty-state">
<div class="empty-icon">🔍</div>
<h3>Project not found</h3>
<A href="/" class="btn btn-primary">Back to Projects</A>
</div>
);
}
return (
<div class="project-detail">
<nav class="project-nav">
<A href="/" class="back-link">← Back to Projects</A>
<div class="nav-actions">
<A href="/settings/profile" class="btn btn-secondary">Profile</A>
<button class="btn btn-ghost" onClick={signOut}>Sign Out</button>
</div>
</nav>
<header class="project-header">
<div class="header-content">
<h1>{project()!.name}</h1>
<span class={`status-badge ${project()!.status}`}>
{project()!.status}
</span>
</div>
</header>
<div class="project-content">
<section class="project-description-section">
<h2>Description</h2>
<p>{project()!.description || 'No description provided.'}</p>
</section>
<section class="project-collaborators">
<div class="section-header">
<h2>Collaborators</h2>
{isOwner() && (
<button
class="btn btn-small"
onClick={() => setShowAddCollab(true)}
>
+ Add
</button>
)}
</div>
{showAddCollab() && (
<div class="add-collaborator-form">
<input
type="text"
placeholder="User ID"
value={newUserId()}
onChange={(e) => setNewUserId(e.target.value)}
class="input-field"
/>
<select
value={newRole()}
onChange={(e) => setNewRole(e.target.value as UserRole)}
class="select-field"
>
<option value="viewer">Viewer</option>
<option value="editor">Editor</option>
<option value="admin">Admin</option>
</select>
<button class="btn btn-primary" onClick={handleAddCollaborator}>
Add
</button>
<button class="btn btn-secondary" onClick={() => setShowAddCollab(false)}>
Cancel
</button>
</div>
)}
<div class="collaborator-list">
{project()!.collaborators.length > 0 ? (
project()!.collaborators.map((collab) => (
<div class="collaborator-item">
<span class="user-id">{collab.userId}</span>
<span class={`role-badge ${collab.role}`}>{collab.role}</span>
</div>
))
) : (
<p class="empty-text">No collaborators yet.</p>
)}
</div>
</section>
<section class="project-meta">
<div class="meta-grid">
<div class="meta-item">
<span class="meta-label">Created</span>
<span class="meta-value">{formatDate(project()!.createdAt)}</span>
</div>
<div class="meta-item">
<span class="meta-label">Last Updated</span>
<span class="meta-value">{formatDate(project()!.updatedAt)}</span>
</div>
</div>
</section>
{isOwner() && (
<section class="project-actions">
{project()!.status !== 'archived' && (
<button class="btn btn-warning" onClick={handleArchive}>
Archive Project
</button>
)}
<button
class="btn btn-danger"
onClick={() => setShowDeleteConfirm(true)}
>
Delete Project
</button>
</section>
)}
</div>
{showDeleteConfirm() && (
<div class="modal-overlay" onClick={() => setShowDeleteConfirm(false)}>
<div class="confirm-modal" onClick={(e) => e.stopPropagation()}>
<div class="modal-header">
<h3>Delete Project?</h3>
<button class="btn-close" onClick={() => setShowDeleteConfirm(false)}>×</button>
</div>
<div class="modal-body">
<p>This action cannot be undone. All scripts and data will be permanently deleted.</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onClick={() => setShowDeleteConfirm(false)}>
Cancel
</button>
<button class="btn btn-danger" onClick={handleDelete}>
Delete
</button>
</div>
</div>
</div>
)}
</div>
);
};
export const ProfilePage: Component = () => {
const auth = useAuth();
const { updateUser, signOut } = useAuthActions();
const [editing, setEditing] = createSignal(false);
const [name, setName] = createSignal('');
const user = () => auth().user;
const handleSave = async () => {
const u = user();
if (!u) return;
await updateUser({ name: name().trim() || u.name });
setEditing(false);
};
const startEditing = () => {
const u = user();
if (u) {
setName(u.name);
setEditing(true);
}
};
if (!user()) {
return (
<div class="auth-required">
<p>Please sign in to view your profile.</p>
<A href="/sign-in" class="btn btn-primary">Sign In</A>
</div>
);
}
return (
<div class="user-profile">
<nav class="project-nav">
<A href="/" class="back-link">← Back to Projects</A>
<div class="nav-actions">
<button class="btn btn-ghost" onClick={signOut}>Sign Out</button>
</div>
</nav>
<header class="profile-header">
<div class="avatar">
{user()!.avatarUrl ? (
<img src={user()!.avatarUrl} alt={user()!.name} />
) : (
<div class="avatar-placeholder">
{user()!.name.charAt(0).toUpperCase()}
</div>
)}
</div>
<div class="profile-info">
{editing() ? (
<div class="edit-name">
<input
type="text"
value={name()}
onChange={(e) => setName(e.target.value)}
class="input-field"
/>
<button class="btn btn-primary" onClick={handleSave}>Save</button>
<button class="btn btn-secondary" onClick={() => setEditing(false)}>
Cancel
</button>
</div>
) : (
<div class="name-row">
<h1>{user()!.name}</h1>
<button class="btn btn-small" onClick={startEditing}>Edit</button>
</div>
)}
<p class="email">{user()!.email}</p>
<span class={`role-badge ${user()!.role}`}>{user()!.role}</span>
</div>
</header>
<nav class="profile-nav">
<A href="/settings/profile" class="nav-link active">Profile</A>
<A href="/settings" class="nav-link">Settings</A>
</nav>
</div>
);
};
export const SignInPage: Component = () => {
const { signIn } = useAuthActions();
const auth = useAuth();
return (
<div class="auth-page">
<div class="auth-card">
<div class="auth-header">
<h1>Scripter</h1>
<p>Professional screenwriting collaboration</p>
</div>
{auth().error && (
<div class="auth-error">{auth().error}</div>
)}
<button
class="btn btn-primary btn-full"
onClick={signIn}
disabled={auth().isLoading}
>
{auth().isLoading ? 'Loading...' : 'Sign In'}
</button>
<p class="auth-footer">
Don't have an account? <A href="/sign-up">Sign Up</A>
</p>
</div>
</div>
);
};
export const SignUpPage: Component = () => {
const { signIn } = useAuthActions();
const auth = useAuth();
return (
<div class="auth-page">
<div class="auth-card">
<div class="auth-header">
<h1>Join Scripter</h1>
<p>Create your account to start writing</p>
</div>
<button
class="btn btn-primary btn-full"
onClick={signIn}
disabled={auth().isLoading}
>
{auth().isLoading ? 'Loading...' : 'Sign Up'}
</button>
<p class="auth-footer">
Already have an account? <A href="/sign-in">Sign In</A>
</p>
</div>
</div>
);
};
export const SettingsPage: Component = () => {
return (
<div class="settings-page">
<nav class="project-nav">
<A href="/" class="back-link">← Back to Projects</A>
</nav>
<h1>Settings</h1>
<div class="settings-grid">
<A href="/settings/profile" class="settings-card">
<h3>Profile</h3>
<p>Manage your profile information</p>
</A>
</div>
</div>
);
};
export const routes = [
{ path: '/', component: HomePage },
{ path: '/projects/:id', component: ProjectPage },
{ path: '/settings', component: SettingsPage },
{ path: '/settings/profile', component: ProfilePage },
{ path: '/sign-in', component: SignInPage },
{ path: '/sign-up', component: SignUpPage },
];

218
src/routes/landing/Landing.tsx Normal file
View File

@@ -0,0 +1,218 @@
import { Component, createSignal } from 'solid-js';
import { A } from '@solidjs/router';
export const Landing: Component = () => {
return (
<div class="landing-page">
{/* Navigation */}
<nav class="landing-nav">
<div class="nav-container">
<div class="nav-logo">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
<path d="M16 6L8 10V22L16 26L24 22V10L16 6Z" fill="#76b3e1"/>
</svg>
<span class="logo-text">Scripter</span>
</div>
<div class="nav-links">
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="/blog">Blog</a>
<A href="/sign-in" class="nav-signin">Sign In</A>
<A href="/sign-up" class="nav-signup">Start Writing Free</A>
</div>
</div>
</nav>
{/* Hero Section */}
<section class="hero">
<div class="hero-content">
<h1 class="hero-headline">Write Faster.</h1>
<p class="hero-subheadline">
The modern screenwriting platform built for how you actually work.
Real-time collaboration, AI-powered writing, and industry-standard formatting — all in one place.
</p>
<div class="hero-cta">
<A href="/sign-up" class="cta-primary">Start Writing Free</A>
<p class="cta-note">No credit card required</p>
</div>
</div>
<div class="hero-visual">
<div class="screenshot-mockup">
<div class="mockup-header">
<div class="mockup-dots">
<span></span><span></span><span></span>
</div>
</div>
<div class="mockup-content">
<pre>{`FADE IN:
EXT. COFFEE SHOP - DAY
SARAH (28, determined) types furiously on her laptop.
The barista calls her name.
BARISTA
Sarah! Your latte is ready!
She doesn't look up. In the zone.`}</pre>
</div>
</div>
</div>
</section>
{/* Social Proof */}
<section class="social-proof">
<p>Trusted by screenwriters everywhere</p>
<div class="proof-badges">
<span class="badge">🎬 Industry Standard</span>
<span class="badge">⭐ 5-Star Reviews</span>
<span class="badge">🚀 Fastest Growing</span>
</div>
</section>
{/* Features Overview */}
<section id="features" class="features">
<h2 class="section-title">Everything you need to write</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">📝</div>
<h3>Industry-Standard Formatting</h3>
<p>Automatic screenplay formatting. Scene headings, action, dialogue, parentheticals — all formatted to spec.</p>
</div>
<div class="feature-card">
<div class="feature-icon">👥</div>
<h3>Real-Time Collaboration</h3>
<p>Write together with your team. See changes live, leave comments, chat with video.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🤖</div>
<h3>AI Writing Assistant</h3>
<p>Get help with dialogue, scene descriptions, character analysis, and more.</p>
</div>
</div>
</section>
{/* Comparison Section */}
<section class="comparison">
<h2 class="section-title">Why switch to Scripter?</h2>
<div class="comparison-grid">
<div class="comparison-col">
<h3>vs Final Draft</h3>
<ul>
<li><span class="check">✓</span> $7.99/mo vs $199 one-time</li>
<li><span class="check">✓</span> Real-time collaboration vs desktop-only</li>
<li><span class="check">✓</span> Works on any device</li>
<li><span class="check">✓</span> Cloud backup included</li>
</ul>
</div>
<div class="comparison-col">
<h3>vs WriterDuet</h3>
<ul>
<li><span class="check">✓</span> Unlimited projects (free)</li>
<li><span class="check">✓</span> Faster native app (Tauri)</li>
<li><span class="check">✓</span> Built-in AI assistant</li>
<li><span class="check">✓</span> 33% lower pricing</li>
</ul>
</div>
</div>
</section>
{/* Pricing Section */}
<section id="pricing" class="pricing">
<h2 class="section-title">Simple pricing for every screenwriter</h2>
<p class="section-subtitle">Start free. Upgrade when you need more.</p>
<div class="pricing-grid">
<div class="pricing-card">
<h3>Free</h3>
<div class="price">$0<span>/mo</span></div>
<ul class="features-list">
<li>Unlimited projects</li>
<li>Industry-standard formatting</li>
<li>Auto cloud saving</li>
<li>Mobile editing</li>
<li>Comments & mentions</li>
</ul>
<A href="/sign-up" class="pricing-cta">Get Started Free</A>
</div>
<div class="pricing-card featured">
<div class="featured-badge">Most Popular</div>
<h3>Pro</h3>
<div class="price">$7.99<span>/mo</span></div>
<ul class="features-list">
<li>Everything in Free, plus:</li>
<li>Real-time collaboration</li>
<li>Desktop app (Mac, Windows, Linux)</li>
<li>Offline writing</li>
<li>Video chat</li>
<li>Revision tracking</li>
</ul>
<A href="/sign-up" class="pricing-cta">Start Pro Trial</A>
<p class="trial-note">14-day free trial</p>
</div>
<div class="pricing-card">
<h3>Premium</h3>
<div class="price">$10.99<span>/mo</span></div>
<ul class="features-list">
<li>Everything in Pro, plus:</li>
<li>Infinite document history</li>
<li>AI writing assistant</li>
<li>Auto-translate (30+ languages)</li>
<li>ReadAloud narration</li>
<li>Priority support</li>
</ul>
<A href="/sign-up" class="pricing-cta">Start Premium Trial</A>
<p class="trial-note">14-day free trial</p>
</div>
</div>
</section>
{/* Final CTA */}
<section class="final-cta">
<h2>Ready to write your next script?</h2>
<p>Join thousands of screenwriters who've made the switch.</p>
<A href="/sign-up" class="cta-primary">Start Writing Free</A>
</section>
{/* Footer */}
<footer class="landing-footer">
<div class="footer-content">
<div class="footer-brand">
<div class="nav-logo">
<svg width="24" height="24" viewBox="0 0 32 32" fill="none">
<path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
</svg>
<span>Scripter</span>
</div>
<p>Write Faster.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Product</h4>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="/blog">Blog</a>
</div>
<div class="footer-col">
<h4>Company</h4>
<a href="/about">About</a>
<a href="/faq">FAQ</a>
<a href="/contact">Contact</a>
</div>
<div class="footer-col">
<h4>Legal</h4>
<a href="/terms">Terms</a>
<a href="/privacy">Privacy</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Scripter. All rights reserved.</p>
</div>
</footer>
</div>
);
};

288
src/routes/pricing/Pricing.tsx Normal file
View File

@@ -0,0 +1,288 @@
import { Component, createSignal } from 'solid-js';
import { A } from '@solidjs/router';
const pricingPlans = [
{
name: 'Free',
price: '$0',
period: '/mo',
description: 'For screenwriters exploring the platform',
cta: 'Get Started Free',
features: [
'Unlimited projects',
'Industry-standard formatting',
'Auto cloud saving',
'Mobile editing',
'Comments & mentions',
'Basic export (PDF, Fountain)',
'Google Drive / Dropbox backup'
],
highlighted: false
},
{
name: 'Pro',
price: '$7.99',
period: '/mo',
description: 'For professional screenwriters',
cta: 'Start Pro Trial',
trial: '14 days free',
features: [
'Everything in Free, plus:',
'Real-time collaboration',
'Desktop app (macOS, Windows, Linux)',
'Offline writing',
'Video chat',
'Revision tracking',
'Custom themes and margins',
'Document statistics',
'Location/scene filters',
'Custom title pages',
'PDF security and watermarks'
],
highlighted: true
},
{
name: 'Premium',
price: '$10.99',
period: '/mo',
description: 'For teams and power users',
cta: 'Start Premium Trial',
trial: '14 days free',
features: [
'Everything in Pro, plus:',
'Infinite document history',
'AI writing assistant',
'Auto-translate (30+ languages)',
'ReadAloud narration',
'Multi-column tools',
'Priority support',
'API access'
],
highlighted: false
}
];
const comparisonData = [
{ feature: 'Unlimited projects', free: true, pro: true, premium: true },
{ feature: 'Industry-standard formatting', free: true, pro: true, premium: true },
{ feature: 'Cloud backup', free: true, pro: true, premium: true },
{ feature: 'Mobile editing', free: true, pro: true, premium: true },
{ feature: 'Comments & mentions', free: true, pro: true, premium: true },
{ feature: 'Real-time collaboration', free: false, pro: true, premium: true },
{ feature: 'Desktop app', free: false, pro: true, premium: true },
{ feature: 'Offline writing', free: false, pro: true, premium: true },
{ feature: 'Video chat', free: false, pro: true, premium: true },
{ feature: 'Revision tracking', free: false, pro: true, premium: true },
{ feature: 'Document history', free: '30 days', pro: '90 days', premium: 'Unlimited' },
{ feature: 'AI writing assistant', free: false, pro: false, premium: true },
{ feature: 'Auto-translate', free: false, pro: false, premium: true },
{ feature: 'ReadAloud narration', free: false, pro: false, premium: true },
{ feature: 'Priority support', free: false, pro: false, premium: true },
{ feature: 'API access', free: false, pro: false, premium: true }
];
const faqs = [
{
question: 'Can I switch plans anytime?',
answer: 'Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately, and we\'ll prorate any differences in billing.'
},
{
question: 'What happens to my scripts if I cancel?',
answer: 'Your scripts are always yours. You can download them in any format (PDF, Final Draft XML, Fountain) at any time. Even on the free plan, you keep full access to your work.'
},
{
question: 'Do you offer education discounts?',
answer: 'Yes! We offer 50% off for verified students and educators. Contact us with your .edu email or student ID for verification.'
},
{
question: 'Is there a team plan?',
answer: 'Yes, we offer custom team pricing for writing rooms, production companies, and classrooms. Contact us for volume discounts and team management features.'
},
{
question: 'Can I try Pro or Premium before paying?',
answer: 'Absolutely. Both Pro and Premium come with a 14-day free trial. No credit card required to start. If you\'re not satisfied, just downgrade to Free.'
},
{
question: 'What payment methods do you accept?',
answer: 'We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and Apple Pay. Annual subscriptions receive a 25% discount.'
},
{
question: 'How does the free plan compare to competitors?',
answer: 'Our free plan is the most generous in the industry. Unlike WriterDuet (3 project limit) or Final Draft (no free tier), Scripter Free includes unlimited projects and professional formatting.'
},
{
question: 'Do you offer refunds?',
answer: 'Yes, we offer a 30-day money-back guarantee. If you\'re not satisfied with Scripter for any reason, contact us within 30 days for a full refund.'
}
];
export const Pricing: Component = () => {
const [openFaq, setOpenFaq] = createSignal<number | null>(null);
return (
<div class="pricing-page">
{/* Navigation */}
<nav class="landing-nav">
<div class="nav-container">
<div class="nav-logo">
<A href="/">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
<path d="M16 6L8 10V22L16 26L24 22V10L16 6Z" fill="#76b3e1"/>
</svg>
<span class="logo-text">Scripter</span>
</A>
</div>
<div class="nav-links">
<a href="/#features">Features</a>
<A href="/pricing" class="active">Pricing</A>
<A href="/blog">Blog</A>
<A href="/sign-in" class="nav-signin">Sign In</A>
<A href="/sign-up" class="nav-signup">Start Writing Free</A>
</div>
</div>
</nav>
{/* Pricing Header */}
<section class="pricing-hero">
<div class="pricing-hero-content">
<h1>Simple pricing for every screenwriter</h1>
<p>Start free. Upgrade when you need more. No hidden fees, no surprises.</p>
</div>
</section>
{/* Pricing Cards */}
<section class="pricing-cards">
<div class="pricing-container">
<div class="pricing-grid">
{pricingPlans.map((plan) => (
<div class={`pricing-card ${plan.highlighted ? 'featured' : ''}`}>
{plan.highlighted && (
<div class="featured-badge">Most Popular</div>
)}
<h3>{plan.name}</h3>
<div class="price">
{plan.price}<span>{plan.period}</span>
</div>
<p class="plan-description">{plan.description}</p>
{plan.trial && <p class="trial-note">{plan.trial}</p>}
<A href="/sign-up" class={`pricing-cta ${plan.highlighted ? 'primary' : ''}`}>
{plan.cta}
</A>
<ul class="features-list">
{plan.features.map((feature) => (
<li class={feature.includes('Everything in') ? 'summary' : ''}>
{feature}
</li>
))}
</ul>
</div>
))}
</div>
</div>
</section>
{/* Comparison Table */}
<section class="comparison-section">
<div class="comparison-container">
<h2>Compare plans</h2>
<div class="comparison-table-wrapper">
<table class="comparison-table">
<thead>
<tr>
<th>Feature</th>
<th>Free</th>
<th>Pro</th>
<th>Premium</th>
</tr>
</thead>
<tbody>
{comparisonData.map((row) => (
<tr>
<td class="feature-name">{row.feature}</td>
<td class={typeof row.free === 'boolean' ? (row.free ? 'included' : 'not-included') : ''}>
{typeof row.free === 'boolean' ? (row.free ? '✓' : '—') : row.free}
</td>
<td class={typeof row.pro === 'boolean' ? (row.pro ? 'included' : 'not-included') : ''}>
{typeof row.pro === 'boolean' ? (row.pro ? '✓' : '—') : row.pro}
</td>
<td class={typeof row.premium === 'boolean' ? (row.premium ? 'included' : 'not-included') : ''}>
{typeof row.premium === 'boolean' ? (row.premium ? '✓' : '—') : row.premium}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</section>
{/* FAQ Section */}
<section class="faq-section">
<div class="faq-container">
<h2>Frequently asked questions</h2>
<div class="faq-list">
{faqs.map((faq, index) => (
<div class={`faq-item ${openFaq() === index ? 'open' : ''}`}>
<button
class="faq-question"
onClick={() => setOpenFaq(openFaq() === index ? null : index)}
>
<span>{faq.question}</span>
<span class="faq-icon">{openFaq() === index ? '−' : '+'}</span>
</button>
<div class="faq-answer">
{faq.answer}
</div>
</div>
))}
</div>
</div>
</section>
{/* Final CTA */}
<section class="pricing-cta">
<h2>Ready to start writing?</h2>
<p>Join thousands of screenwriters using Scripter to write faster.</p>
<A href="/sign-up" class="cta-primary">Start Writing Free</A>
</section>
{/* Footer */}
<footer class="landing-footer">
<div class="footer-content">
<div class="footer-brand">
<div class="nav-logo">
<svg width="24" height="24" viewBox="0 0 32 32" fill="none">
<path d="M16 2L4 8V24L16 30L28 24V8L16 2Z" fill="#518ac8"/>
</svg>
<span>Scripter</span>
</div>
<p>Write Faster.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Product</h4>
<a href="/#features">Features</a>
<a href="/pricing">Pricing</a>
<a href="/blog">Blog</a>
</div>
<div class="footer-col">
<h4>Company</h4>
<a href="/about">About</a>
<a href="/faq">FAQ</a>
<a href="/contact">Contact</a>
</div>
<div class="footer-col">
<h4>Legal</h4>
<a href="/terms">Terms</a>
<a href="/privacy">Privacy</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Scripter. All rights reserved.</p>
</div>
</footer>
</div>
);
};

520
src/styles/blog.css Normal file
View File

@@ -0,0 +1,520 @@
/* Blog Page Styles */
.blog-page {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #1a1a1a;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Blog Header */
.blog-header {
background: linear-gradient(135deg, #1a336b 0%, #518ac8 100%);
color: white;
padding: 8rem 2rem 4rem;
text-align: center;
margin-top: 60px;
}
.blog-header-content h1 {
font-size: 3rem;
font-weight: 800;
margin: 0 0 1rem;
}
.blog-header-content p {
font-size: 1.25rem;
margin: 0;
opacity: 0.9;
}
/* Category Filter */
.blog-filter {
padding: 2rem;
border-bottom: 1px solid #e5e5e5;
}
.filter-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.filter-container button {
background: white;
border: 2px solid #e5e5e5;
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-weight: 500;
color: #666;
cursor: pointer;
transition: all 0.2s;
}
.filter-container button:hover {
border-color: #518ac8;
color: #518ac8;
}
.filter-container button.active {
background: #518ac8;
border-color: #518ac8;
color: white;
}
/* Blog Posts */
.blog-posts {
flex: 1;
padding: 4rem 2rem;
}
.posts-container {
max-width: 1200px;
margin: 0 auto;
}
.posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 2rem;
}
.post-card {
background: white;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 2rem;
text-decoration: none;
color: inherit;
transition: all 0.2s;
display: block;
}
.post-card:hover {
border-color: #518ac8;
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.post-category {
display: inline-block;
background: #dcf2fd;
color: #518ac8;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.post-title {
font-size: 1.5rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 1rem;
line-height: 1.3;
}
.post-excerpt {
color: #666;
line-height: 1.6;
margin: 0 0 1.5rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #888;
}
/* Newsletter */
.newsletter {
background: #f8f9fa;
padding: 5rem 2rem;
text-align: center;
}
.newsletter-content {
max-width: 600px;
margin: 0 auto;
}
.newsletter h2 {
font-size: 2rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 1rem;
}
.newsletter p {
color: #666;
margin: 0 0 2rem;
font-size: 1.125rem;
}
.newsletter-form {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.newsletter-form input {
flex: 1;
padding: 1rem;
border: 2px solid #e5e5e5;
border-radius: 8px;
font-size: 1rem;
font-family: inherit;
transition: border-color 0.2s;
}
.newsletter-form input:focus {
outline: none;
border-color: #518ac8;
}
.newsletter-form button {
white-space: nowrap;
}
.newsletter-note {
font-size: 0.875rem;
color: #888;
margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
.blog-header-content h1 {
font-size: 2rem;
}
.posts-grid {
grid-template-columns: 1fr;
}
.newsletter-form {
flex-direction: column;
}
.filter-container {
gap: 0.5rem;
}
.filter-container button {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
}
/* Blog Post Page */
.blog-post-page {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #1a1a1a;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.post-not-found {
padding: 8rem 2rem;
text-align: center;
margin-top: 60px;
}
.post-not-found h1 {
font-size: 2.5rem;
color: #1a336b;
margin: 0 0 1rem;
}
.post-not-found p {
color: #666;
margin: 0 0 2rem;
font-size: 1.125rem;
}
.blog-post {
max-width: 800px;
margin: 0 auto;
padding: 4rem 2rem;
}
.post-header {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid #e5e5e5;
}
.post-category-badge {
display: inline-block;
background: #dcf2fd;
color: #518ac8;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.post-header h1 {
font-size: 2.5rem;
font-weight: 800;
color: #1a336b;
margin: 0 0 1rem;
line-height: 1.2;
}
.post-meta {
display: flex;
align-items: center;
gap: 0.75rem;
color: #888;
font-size: 0.9375rem;
}
.post-content {
font-size: 1.125rem;
line-height: 1.8;
}
.post-content h2 {
font-size: 1.75rem;
font-weight: 700;
color: #1a336b;
margin: 2.5rem 0 1rem;
}
.post-content h3 {
font-size: 1.375rem;
font-weight: 600;
color: #1a336b;
margin: 2rem 0 0.75rem;
}
.post-content p {
margin: 0 0 1.5rem;
color: #333;
}
.post-content ul,
.post-content ol {
margin: 0 0 1.5rem 1.5rem;
color: #333;
}
.post-content li {
margin: 0.5rem 0;
}
.post-content pre {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 8px;
overflow-x: auto;
font-family: "SF Mono", "Monaco", "Consolas", monospace;
font-size: 0.9375rem;
margin: 0 0 1.5rem;
}
.post-content a {
color: #518ac8;
text-decoration: none;
}
.post-content a:hover {
text-decoration: underline;
}
.post-content strong {
font-weight: 600;
color: #1a1a1a;
}
/* Share Section */
.post-share {
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px solid #e5e5e5;
}
.post-share h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1a336b;
margin: 0 0 1rem;
}
.share-buttons {
display: flex;
gap: 1rem;
}
.share-btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 0.9375rem;
cursor: pointer;
transition: opacity 0.2s;
}
.share-btn:hover {
opacity: 0.9;
}
.share-btn.twitter {
background: #1da1f2;
color: white;
}
.share-btn.linkedin {
background: #0077b5;
color: white;
}
.share-btn.facebook {
background: #4267b2;
color: white;
}
/* Related Posts */
.related-posts {
background: #f8f9fa;
padding: 5rem 2rem;
}
.related-posts h2 {
font-size: 2rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 2rem;
text-align: center;
}
.related-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.related-card {
background: white;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 1.5rem;
text-decoration: none;
color: inherit;
transition: all 0.2s;
display: block;
}
.related-card:hover {
border-color: #518ac8;
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.related-category {
display: inline-block;
background: #dcf2fd;
color: #518ac8;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
.related-card h3 {
font-size: 1.25rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 0.75rem;
line-height: 1.3;
}
.related-card p {
color: #666;
font-size: 0.9375rem;
line-height: 1.5;
margin: 0 0 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-meta {
font-size: 0.875rem;
color: #888;
}
/* Post CTA */
.post-cta {
text-align: center;
padding: 5rem 2rem;
background: linear-gradient(135deg, #1a336b 0%, #518ac8 100%);
color: white;
}
.post-cta h2 {
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 1rem;
}
.post-cta p {
font-size: 1.25rem;
margin: 0 0 2rem;
opacity: 0.9;
}
.post-cta .cta-primary {
background: white;
color: #1a336b;
}
.post-cta .cta-primary:hover {
background: #f0f0f0;
}
/* Responsive */
@media (max-width: 768px) {
.post-header h1 {
font-size: 2rem;
}
.related-grid {
grid-template-columns: 1fr;
}
.post-content {
font-size: 1rem;
}
.share-buttons {
flex-wrap: wrap;
}
}

1163
src/styles/components.css Normal file
View File

File diff suppressed because it is too large Load Diff

167
src/styles/features.css Normal file
View File

@@ -0,0 +1,167 @@
/* Features Page Styles */
.features-page {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #1a1a1a;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Features Hero */
.features-hero {
background: linear-gradient(135deg, #1a336b 0%, #518ac8 100%);
color: white;
padding: 8rem 2rem 4rem;
text-align: center;
margin-top: 60px;
}
.features-hero-content {
max-width: 800px;
margin: 0 auto;
}
.features-hero-content h1 {
font-size: 3rem;
font-weight: 800;
margin: 0 0 1.5rem;
line-height: 1.2;
}
.features-hero-content p {
font-size: 1.25rem;
margin: 0;
opacity: 0.9;
}
/* Features Categories */
.features-categories {
padding: 5rem 2rem;
}
.features-container {
max-width: 1200px;
margin: 0 auto;
}
.feature-category {
margin-bottom: 5rem;
scroll-margin-top: 80px;
}
.category-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid #518ac8;
}
.category-icon {
font-size: 2.5rem;
}
.category-header h2 {
font-size: 2rem;
font-weight: 700;
color: #1a336b;
margin: 0;
}
.category-features {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
}
.feature-detail {
background: white;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 2rem;
transition: all 0.2s;
}
.feature-detail:hover {
border-color: #518ac8;
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.feature-detail h3 {
font-size: 1.25rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 0.75rem;
}
.feature-detail > p {
color: #666;
margin: 0 0 1.5rem;
line-height: 1.6;
}
.feature-details-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-details-list li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
color: #333;
font-size: 0.9375rem;
}
.feature-details-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #27ca40;
font-weight: 700;
}
/* Features CTA */
.features-cta {
text-align: center;
padding: 5rem 2rem;
background: #f8f9fa;
}
.features-cta h2 {
font-size: 2.5rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 1rem;
}
.features-cta p {
font-size: 1.25rem;
color: #666;
margin: 0 0 2rem;
}
/* Responsive */
@media (max-width: 768px) {
.features-hero-content h1 {
font-size: 2rem;
}
.category-features {
grid-template-columns: 1fr;
}
.category-header {
flex-direction: column;
text-align: center;
}
.features-cta h2 {
font-size: 1.75rem;
}
}

566
src/styles/landing.css Normal file
View File

@@ -0,0 +1,566 @@
/* Landing Page Styles */
.landing-page {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #1a1a1a;
line-height: 1.6;
}
/* Navigation */
.landing-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid #e5e5e5;
z-index: 1000;
padding: 0.75rem 0;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 1.25rem;
color: #1a1a1a;
}
.logo-text {
color: #1a336b;
}
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-links a {
color: #555;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover {
color: #518ac8;
}
.nav-signin {
color: #1a1a1a !important;
}
.nav-signup {
background: #518ac8;
color: white !important;
padding: 0.5rem 1rem;
border-radius: 6px;
transition: background 0.2s;
}
.nav-signup:hover {
background: #3a6ca8;
}
/* Hero Section */
.hero {
padding: 8rem 2rem 4rem;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-content {
max-width: 600px;
}
.hero-headline {
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
color: #1a336b;
margin: 0 0 1.5rem;
}
.hero-subheadline {
font-size: 1.25rem;
color: #666;
margin: 0 0 2rem;
line-height: 1.6;
}
.hero-cta {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cta-primary {
display: inline-block;
background: #518ac8;
color: white;
padding: 1rem 2rem;
border-radius: 8px;
font-weight: 600;
font-size: 1.125rem;
text-decoration: none;
text-align: center;
transition: background 0.2s;
border: none;
cursor: pointer;
}
.cta-primary:hover {
background: #3a6ca8;
}
.cta-note {
font-size: 0.875rem;
color: #888;
margin: 0;
}
.hero-visual {
display: flex;
justify-content: center;
}
.screenshot-mockup {
background: #1a336b;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(26, 51, 107, 0.3);
width: 100%;
max-width: 500px;
}
.mockup-header {
background: #0d1f3d;
padding: 0.75rem 1rem;
}
.mockup-dots {
display: flex;
gap: 0.5rem;
}
.mockup-dots span {
width: 12px;
height: 12px;
border-radius: 50%;
background: #334;
}
.mockup-dots span:nth-child(1) { background: #ff5f56; }
.mockup-dots span:nth-child(2) { background: #ffbd2e; }
.mockup-dots span:nth-child(3) { background: #27ca40; }
.mockup-content {
padding: 1.5rem;
background: #fff;
}
.mockup-content pre {
margin: 0;
font-family: "SF Mono", "Monaco", "Consolas", monospace;
font-size: 0.875rem;
line-height: 1.8;
color: #333;
white-space: pre-wrap;
}
/* Social Proof */
.social-proof {
text-align: center;
padding: 3rem 2rem;
background: #f8f9fa;
}
.social-proof p {
margin: 0 0 1.5rem;
color: #666;
font-weight: 500;
}
.proof-badges {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.badge {
background: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
color: #333;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Features Section */
.features {
padding: 5rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 3rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.feature-card {
padding: 2rem;
background: white;
border: 1px solid #e5e5e5;
border-radius: 12px;
transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.feature-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: #1a336b;
margin: 0 0 0.75rem;
}
.feature-card p {
color: #666;
line-height: 1.6;
margin: 0;
}
/* Comparison Section */
.comparison {
padding: 5rem 2rem;
background: #f8f9fa;
}
.comparison-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
max-width: 900px;
margin: 0 auto;
}
.comparison-col {
background: white;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.comparison-col h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 1.5rem;
}
.comparison-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.comparison-col li {
padding: 0.75rem 0;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: center;
gap: 0.75rem;
color: #333;
}
.comparison-col li:last-child {
border-bottom: none;
}
.check {
color: #27ca40;
font-weight: 700;
}
/* Pricing Section */
.pricing {
padding: 5rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.section-subtitle {
text-align: center;
font-size: 1.125rem;
color: #666;
margin: -2rem 0 3rem;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
align-items: start;
}
.pricing-card {
background: white;
border: 2px solid #e5e5e5;
border-radius: 12px;
padding: 2rem;
text-align: center;
position: relative;
transition: border-color 0.2s, transform 0.2s;
}
.pricing-card:hover {
border-color: #518ac8;
transform: translateY(-4px);
}
.pricing-card.featured {
border-color: #518ac8;
transform: scale(1.05);
}
.pricing-card.featured:hover {
transform: scale(1.05) translateY(-4px);
}
.featured-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #518ac8;
color: white;
padding: 0.25rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.pricing-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 1rem;
}
.price {
font-size: 3rem;
font-weight: 800;
color: #1a1a1a;
margin: 0 0 2rem;
}
.price span {
font-size: 1rem;
font-weight: 400;
color: #666;
}
.features-list {
list-style: none;
padding: 0;
margin: 0 0 2rem;
text-align: left;
}
.features-list li {
padding: 0.5rem 0;
color: #333;
border-bottom: 1px solid #f0f0f0;
}
.features-list li:last-child {
border-bottom: none;
}
.pricing-cta {
display: block;
background: #518ac8;
color: white;
padding: 1rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
}
.pricing-cta:hover {
background: #3a6ca8;
}
.trial-note {
font-size: 0.875rem;
color: #888;
margin: 0.5rem 0 0;
}
/* Final CTA */
.final-cta {
text-align: center;
padding: 5rem 2rem;
background: linear-gradient(135deg, #1a336b 0%, #518ac8 100%);
color: white;
}
.final-cta h2 {
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 1rem;
}
.final-cta p {
font-size: 1.25rem;
margin: 0 0 2rem;
opacity: 0.9;
}
.final-cta .cta-primary {
background: white;
color: #1a336b;
}
.final-cta .cta-primary:hover {
background: #f0f0f0;
}
/* Footer */
.landing-footer {
background: #1a1a1a;
color: #999;
padding: 3rem 2rem 1.5rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 3fr;
gap: 4rem;
margin-bottom: 2rem;
}
.footer-brand .nav-logo {
margin-bottom: 0.5rem;
}
.footer-brand span {
color: white;
}
.footer-brand p {
margin: 0;
color: #666;
}
.footer-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.footer-col h4 {
color: white;
font-size: 0.875rem;
font-weight: 600;
margin: 0 0 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.footer-col a {
display: block;
color: #999;
text-decoration: none;
padding: 0.25rem 0;
transition: color 0.2s;
}
.footer-col a:hover {
color: white;
}
.footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding-top: 2rem;
border-top: 1px solid #333;
text-align: center;
}
.footer-bottom p {
margin: 0;
font-size: 0.875rem;
}
/* Responsive */
@media (max-width: 968px) {
.hero {
grid-template-columns: 1fr;
padding-top: 6rem;
}
.hero-headline {
font-size: 3rem;
}
.features-grid,
.pricing-grid {
grid-template-columns: 1fr;
}
.pricing-card.featured {
transform: none;
}
.comparison-grid {
grid-template-columns: 1fr;
}
.nav-links {
gap: 1rem;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
}
}

405
src/styles/pricing.css Normal file
View File

@@ -0,0 +1,405 @@
/* Pricing Page Styles */
.pricing-page {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #1a1a1a;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Pricing Hero */
.pricing-hero {
background: linear-gradient(135deg, #1a336b 0%, #518ac8 100%);
color: white;
padding: 8rem 2rem 4rem;
text-align: center;
margin-top: 60px;
}
.pricing-hero-content {
max-width: 800px;
margin: 0 auto;
}
.pricing-hero-content h1 {
font-size: 3rem;
font-weight: 800;
margin: 0 0 1.5rem;
line-height: 1.2;
}
.pricing-hero-content p {
font-size: 1.25rem;
margin: 0;
opacity: 0.9;
}
/* Pricing Cards */
.pricing-cards {
padding: 5rem 2rem;
background: #f8f9fa;
}
.pricing-container {
max-width: 1200px;
margin: 0 auto;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
align-items: start;
}
.pricing-card {
background: white;
border: 2px solid #e5e5e5;
border-radius: 12px;
padding: 2.5rem 2rem;
text-align: center;
position: relative;
transition: all 0.2s;
}
.pricing-card:hover {
border-color: #518ac8;
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.pricing-card.featured {
border-color: #518ac8;
transform: scale(1.05);
box-shadow: 0 12px 32px rgba(81, 138, 200, 0.2);
}
.pricing-card.featured:hover {
transform: scale(1.05) translateY(-4px);
}
.featured-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #518ac8;
color: white;
padding: 0.25rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pricing-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 1rem;
}
.price {
font-size: 3.5rem;
font-weight: 800;
color: #1a1a1a;
margin: 0 0 0.5rem;
line-height: 1;
}
.price span {
font-size: 1rem;
font-weight: 400;
color: #666;
}
.plan-description {
color: #666;
font-size: 0.9375rem;
margin: 0 0 1rem;
}
.trial-note {
color: #27ca40;
font-weight: 600;
font-size: 0.875rem;
margin: 0 0 1.5rem;
}
.pricing-cta {
display: block;
padding: 1rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
text-align: center;
transition: all 0.2s;
margin-bottom: 2rem;
}
.pricing-cta.primary {
background: #518ac8;
color: white;
}
.pricing-cta.primary:hover {
background: #3a6ca8;
}
.pricing-cta:not(.primary) {
background: white;
color: #518ac8;
border: 2px solid #518ac8;
}
.pricing-cta:not(.primary):hover {
background: #518ac8;
color: white;
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.features-list li {
padding: 0.75rem 0;
border-bottom: 1px solid #f0f0f0;
color: #333;
font-size: 0.9375rem;
}
.features-list li:last-child {
border-bottom: none;
}
.features-list li.summary {
color: #666;
font-style: italic;
font-size: 0.875rem;
}
/* Comparison Table */
.comparison-section {
padding: 5rem 2rem;
background: white;
}
.comparison-container {
max-width: 1000px;
margin: 0 auto;
}
.comparison-container h2 {
font-size: 2.5rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 3rem;
text-align: center;
}
.comparison-table-wrapper {
overflow-x: auto;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
}
.comparison-table th {
background: #f8f9fa;
padding: 1.25rem 1rem;
text-align: center;
font-weight: 600;
color: #1a336b;
border-bottom: 2px solid #e5e5e5;
}
.comparison-table th:first-child {
text-align: left;
padding-left: 2rem;
}
.comparison-table td {
padding: 1rem;
text-align: center;
border-bottom: 1px solid #f0f0f0;
color: #333;
}
.comparison-table td:first-child {
text-align: left;
padding-left: 2rem;
font-weight: 500;
color: #1a1a1a;
}
.comparison-table td.included {
color: #27ca40;
font-weight: 700;
}
.comparison-table td.not-included {
color: #ccc;
}
/* FAQ Section */
.faq-section {
padding: 5rem 2rem;
background: #f8f9fa;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-container h2 {
font-size: 2.5rem;
font-weight: 700;
color: #1a336b;
margin: 0 0 3rem;
text-align: center;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.faq-item {
background: white;
border: 1px solid #e5e5e5;
border-radius: 12px;
overflow: hidden;
transition: all 0.2s;
}
.faq-item:hover {
border-color: #518ac8;
}
.faq-item.open {
border-color: #518ac8;
box-shadow: 0 4px 12px rgba(81, 138, 200, 0.15);
}
.faq-question {
width: 100%;
padding: 1.5rem;
background: none;
border: none;
text-align: left;
font-size: 1.125rem;
font-weight: 600;
color: #1a336b;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-family: inherit;
}
.faq-question:hover {
background: #f8f9fa;
}
.faq-icon {
font-size: 1.5rem;
color: #518ac8;
font-weight: 300;
margin-left: 1rem;
}
.faq-answer {
padding: 0 1.5rem 1.5rem;
color: #666;
line-height: 1.8;
font-size: 1rem;
display: none;
}
.faq-item.open .faq-answer {
display: block;
}
/* Pricing CTA */
.pricing-cta {
text-align: center;
padding: 5rem 2rem;
background: linear-gradient(135deg, #1a336b 0%, #518ac8 100%);
color: white;
}
.pricing-cta h2 {
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 1rem;
}
.pricing-cta p {
font-size: 1.25rem;
margin: 0 0 2rem;
opacity: 0.9;
}
.pricing-cta .cta-primary {
background: white;
color: #1a336b;
}
.pricing-cta .cta-primary:hover {
background: #f0f0f0;
}
/* Responsive */
@media (max-width: 968px) {
.pricing-grid {
grid-template-columns: 1fr;
}
.pricing-card.featured {
transform: none;
}
.pricing-card.featured:hover {
transform: translateY(-4px);
}
.pricing-hero-content h1 {
font-size: 2rem;
}
.comparison-table {
font-size: 0.875rem;
}
.faq-container h2,
.comparison-container h2 {
font-size: 1.75rem;
}
}
@media (max-width: 640px) {
.price {
font-size: 2.5rem;
}
.faq-question {
font-size: 1rem;
padding: 1rem;
}
.faq-answer {
padding: 0 1rem 1rem;
font-size: 0.9375rem;
}
}