Release: v2.0.0

.env.example

@@ -0,0 +1,3 @@
+# Google Fonts API Key
+# Get your key from: https://developers.google.com/fonts/docs/developer_api
+GOOGLE_FONTS_API_KEY=

.eslintrc

@@ -6,7 +6,7 @@
 		"project": ["./tsconfig.json", "./tsconfig.test.json"]
 	},
 	"plugins": ["@typescript-eslint"],
-	"ignorePatterns": ["**/*.d.ts", "*.js", "**/*.js"],
+	"ignorePatterns": ["**/*.d.ts", "*.js", "**/*.js", "scripts/**"],
 	"overrides": [
 		{
 			"files": ["src/**/*.ts"],

.gitignore

@@ -23,4 +23,8 @@ dist-ssr
 # AI
 .taskmaster/
 .claude/
-.cursor/
+.cursor/
+
+# Internal Shotstack files
+shotstack.html
+src/shotstack-main.ts

.nvmrc

@@ -1 +1 @@
-v20
+22

CHANGELOG.md

@@ -2,6 +2,139 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.0.0] - 2026-02-17
+
+### Added
+
+**Timeline**
+
+- **HTML/CSS timeline rebuild** - Replaced the 1.x timeline with a fully rewritten HTML/CSS implementation
+  - Asset type icons with variable track heights based on content type
+  - Playhead ghost hover preview
+  - Home/End key navigation (replaces meta+arrow keys)
+- **Copy-paste** - Duplicate clips on the timeline using standard keyboard shortcuts
+- **Collision detection** - Automatic clip pushing during drag operations to prevent overlapping
+- **Thumbnail rendering** - Video and image thumbnails displayed directly on timeline clips
+- **Soundtrack support** - Integrated audio player for soundtrack assets on the timeline
+- **Graceful error handling** - Visual error indicators on clips that fail to load
+- **Seconds-based timing** - Unified all time values to a branded `Seconds` type throughout the timeline
+
+**UI Toolbars**
+
+- **Rich text toolbar** - Full formatting toolbar with font picker, text shadow, padding, background color, animation presets, and strikethrough
+- **Media toolbar** - Editing controls for video and image clips including audio, fade effects, zoom/slide transitions, and effects
+- **SVG toolbar** - Fill color, corner radius, and clip-level controls (opacity, scale, transition, effect)
+- **Canvas toolbar** - Resolution, FPS, and background color controls in a vertical layout on the right edge
+- **Asset toolbar** - Quick text and media insertion controls on the canvas
+- **Text-to-Speech toolbar** - Voice selection and audio generation controls
+- **Text-to-image toolbar** - Prompt editing and AI image generation controls
+- **Draggable toolbars** - All toolbars support drag repositioning with reset capability
+- **Extensible toolbar buttons** - Registry system for adding custom toolbar buttons
+
+**AI-Powered Assets**
+
+- **AI asset players** - Aurora loading animations for text-to-image and text-to-speech assets during generation
+- **AI asset overlays** - Asset number badges and prompt preview overlays on AI-generated content
+
+**Merge Fields**
+
+- **Merge field system** - Template variable substitution across Edit properties
+  - Redesigned merge field popup with scroll architecture
+
+**Font System**
+
+- **Font Picker** - Virtual scrolling font selector with recent fonts tracking
+- **Font color picker** - Color and highlight controls with gradient presets
+- **Font weight selector** - Dropdown with full weight range, replacing the simple bold toggle
+- **OpenType integration** - Font family name extraction using `opentype.js` for accurate metadata
+- **CDN font hosting** - Migrated default font assets to CDN with expanded weight and style variants
+
+**Rotation, Resize & Alignment**
+
+- **Rotation** - Full rotation support for canvas objects with snapping to fixed angles
+- **8-point resize handles** - Corner and edge resize with proper dimension handling for SVG and rich text assets
+- **Alignment guides** - Drag snapping to alignment guides integrated into the canvas
+- **Dimension labels** - Live dimension display during resize operations
+- **Drag time tooltips** - Time position display during clip drag and resize on the timeline
+
+**Luma Mask**
+
+- **Luma mask system** - Attach luma masks to clips using Alt+drag with automatic asset type transformation
+
+**Output & Resolution**
+
+- **Output configuration commands** - Commands for setting format, resolution, aspect ratio, and destinations
+- **Resolution presets** - Predefined resolution options with rollback handling
+- **Multi-provider destinations** - Output schema supports multiple render destinations
+
+**Canvas & Rendering**
+
+- **Responsive canvas zoom** - Automatic zoom scaling to fit the container
+- **Alpha channel support** - Correct rendering for WebM VP9 transparent videos
+
+**Clip Management**
+
+- **Clip reconciliation** - Unidirectional data flow with unified resolution for predictable clip tracking across undo/redo
+- **Clip timing controls** - Asset/clip mode toggle for timing configuration
+- **Smart loadEdit** - Structural diffing with unified event dispatch when reloading an edit
+- **Drag-to-create track** - Drop zone indicators for creating new tracks during clip drag
+- **Alias resolution** - Clip reference system using aliases
+- **Caption rendering** - Subtitle player with VTT/SRT parser for caption assets
+
+**Keyframes & Animations**
+
+- **Layered animation composition** - Effects and transitions composed as independent animation layers
+- **Skew transform** - New skew property for clip transforms with animation builder support
+- **Smooth easing** - New easing curve for improved carousel and slide transitions
+
+**SDK Architecture**
+
+- **EditDocument** - Pure data layer for edit configuration management, separating data from rendering
+- **Composite UI components** - Reusable panels for effects, transitions, spacing, and style controls
+- **SVG asset support** - Full SVG asset rendering, editing, and shared SVG utilities
+- **Keyboard arrow positioning** - Arrow keys move selected clips on the canvas
+
+### Changed
+
+- Migrated to `@shotstack/schemas` as canonical type source
+- Upgraded `@shotstack/shotstack-canvas` from ^1.6.5 to ^1.9.6
+- Upgraded `pixi.js` from ^8.5.2 to ^8.15.0
+- Upgraded `zod` from ^3.23.8 to ^4.0.0
+- Requires Node.js 22 (previously unconstrained)
+- Timeline API simplified — feature toggles and constructor options removed
+- Default preview framerate updated to 25fps
+- Switched to light theme as default
+
+### Fixed
+
+- Corrected playback time unit conversions across all player types
+- Fixed memory leaks from event listener accumulation and recursive handlers
+- Resolved race conditions in render updates during clip selection changes
+- Fixed audio stuttering caused by excessive video sync checks (now rate-limited)
+- Added cache invalidation for clip and track mutations
+- Corrected track layer calculation and z-index sorting for multi-track compositions
+- Performance and rendering improvements
+- Fixed crop scaling logic to use max ratio consistently
+- Deferred audio volume keyframe initialization until timing is resolved
+- Fixed left-edge clip resize to correctly adjust start position and duration
+- Added track existence validation before clip reorder on same-track moves
+- Corrected carousel offset calculation logic
+- Normalized z-index hierarchy across UI layers
+- Improved `.mov` video error messaging
+- Included opacity in clip keyframe detection
+- Prevented toolbar container duplication on remount
+- Fixed SVG icons intercepting pointer events on toolbar buttons
+- Fixed clip mask offset to account for centered border strokes
+
+### Removed
+
+- `./schema` package export — schemas now provided by the `@shotstack/schemas` package
+- `TimelineOptions` — Timeline constructor options removed in favour of simplified API
+- `fast-deep-equal` dependency — replaced by internal structural diffing
+- Schema build configuration (`vite.config.schema.ts`)
+- Internal UI component exports from the public API surface
+- `.webm` browser support check
+
 ## [1.10.1] - 2025-11-27
 
 ### Changed

index.html

@@ -3,8 +3,9 @@
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/assets/images/typescript.svg" />
+		<link rel="stylesheet" href="/src/styles/main.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Shotstack Canvas</title>
+		<title>Shotstack Studio</title>
 	</head>
 	<body>
 		<div data-shotstack-studio class="c-shotstack-studio"></div>

jest.config.js

@@ -4,7 +4,23 @@ export default {
 	extensionsToTreatAsEsm: [".ts"],
 	moduleNameMapper: {
 		"^(\\.{1,2}/.*)\\.js$": "$1",
-		"^@shotstack/shotstack-studio/schema$": "<rootDir>/dist/schema/index.cjs"
+		"\\.css\\?inline$": "<rootDir>/tests/__mocks__/css-inline.js",
+		"^@shotstack/shotstack-studio/schema$": "<rootDir>/dist/schema/index.cjs",
+		"^@core/(.*)$": "<rootDir>/src/core/$1",
+		"^@canvas/(.*)$": "<rootDir>/src/components/canvas/$1",
+		"^@timeline/(.*)$": "<rootDir>/src/components/timeline/$1",
+		"^@shared/(.*)$": "<rootDir>/src/core/shared/$1",
+		"^@schemas$": "<rootDir>/src/core/schemas/index.ts",
+		"^@schemas/(.*)$": "<rootDir>/src/core/schemas/$1",
+		"^@timing/(.*)$": "<rootDir>/src/core/timing/$1",
+		"^@layouts/(.*)$": "<rootDir>/src/core/layouts/$1",
+		"^@animations/(.*)$": "<rootDir>/src/core/animations/$1",
+		"^@events/(.*)$": "<rootDir>/src/core/events/$1",
+		"^@inputs/(.*)$": "<rootDir>/src/core/inputs/$1",
+		"^@loaders/(.*)$": "<rootDir>/src/core/loaders/$1",
+		"^@export/(.*)$": "<rootDir>/src/core/export/$1",
+		"^@styles/(.*)$": "<rootDir>/src/styles/$1",
+		"^@templates/(.*)$": "<rootDir>/src/templates/$1"
 	},
 	testPathIgnorePatterns: ["/node_modules/", "/dist/"],
 	transform: {

package.json

@@ -3,9 +3,10 @@
 	"author": "Shotstack <support@shotstack.io>",
 	"contributors": [
 		"cpuccino",
-		"dazzatron"
+		"dazzatron",
+		"kratos2k7"
 	],
-	"version": "1.10.1",
+	"version": "2.0.0-rc.5",
 	"description": "A video editing library for creating and editing videos with Shotstack",
 	"type": "module",
 	"main": "dist/shotstack-studio.umd.js",
@@ -18,17 +19,18 @@
 			"require": "./dist/shotstack-studio.umd.js",
 			"default": "./dist/shotstack-studio.es.js"
 		},
-		"./schema": {
-			"types": "./dist/schema/index.d.ts",
-			"import": "./dist/schema/index.mjs",
-			"require": "./dist/schema/index.cjs",
-			"default": "./dist/schema/index.mjs"
+		"./internal": {
+			"types": "./dist/internal.d.ts",
+			"import": "./dist/internal.es.js",
+			"require": "./dist/internal.umd.js",
+			"default": "./dist/internal.es.js"
 		}
 	},
 	"files": [
 		"dist/shotstack-studio.umd.js",
 		"dist/shotstack-studio.es.js",
-		"dist/schema/**",
+		"dist/internal.umd.js",
+		"dist/internal.es.js",
 		"dist/**/*.d.ts"
 	],
 	"keywords": [
@@ -38,30 +40,37 @@
 		"ffmpeg"
 	],
 	"license": "PolyForm Shield License 1.0.0",
+	"engines": {
+		"node": ">=22 <23"
+	},
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/shotstack/shotstack-studio-sdk"
 	},
 	"scripts": {
 		"dev": "vite",
+		"dev:shotstack": "vite --open /shotstack.html",
 		"start": "npm run build && vite preview",
-		"build": "npm run build:main && npm run build:schema",
+		"build": "npm run build:main && npm run build:internal",
 		"build:main": "vite build",
-		"build:schema": "vite build --config vite.config.schema.ts",
-		"test": "npm run build && jest",
+		"build:internal": "node scripts/build-internal.mjs",
+		"test": "jest",
 		"test:watch": "jest --watch",
 		"test:package": "node test-package.js",
 		"typecheck": "tsc --noEmit && tsc --project tsconfig.test.json --noEmit",
 		"lint": "eslint --ignore-path .gitignore .",
 		"lint:fix": "eslint --ignore-path .gitignore --fix .",
 		"format": "prettier --ignore-path .gitignore --write .",
-		"prepublishOnly": "npm run build && npm run test && npm run test:package"
+		"verify:ci": "npm run lint && npm run typecheck && npm run test && npm run build && npm run test:package",
+		"release:check": "npm run verify:ci && npm pack --dry-run --json",
+		"prepublishOnly": "npm run release:check",
+		"generate:fonts": "npx tsx scripts/fetch-google-fonts.ts"
 	},
 	"devDependencies": {
-		"@jest/globals": "^30.2.0",
 		"@types/howler": "^2.2.12",
 		"@types/jest": "^30.0.0",
 		"@types/node": "^22.9.0",
+		"@types/opentype.js": "^1.3.8",
 		"@typescript-eslint/eslint-plugin": "^7.18.0",
 		"@typescript-eslint/parser": "^7.18.0",
 		"eslint": "^8.57.1",
@@ -70,19 +79,21 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-import": "^2.31.0",
 		"jest": "^30.2.0",
+		"jest-environment-jsdom": "^30.2.0",
 		"prettier": "^3.6.2",
 		"ts-jest": "^29.4.5",
 		"typescript": "^5.6.2",
 		"vite": "^5.4.10",
 		"vite-plugin-dts": "^4.5.4"
 	},
 	"dependencies": {
-		"@shotstack/shotstack-canvas": "^1.6.5",
-		"fast-deep-equal": "^3.1.3",
+		"@shotstack/schemas": "1.7.0",
+		"@shotstack/shotstack-canvas": "^1.9.6",
 		"howler": "^2.2.4",
 		"mediabunny": "^1.11.2",
+		"opentype.js": "^1.3.4",
 		"pixi-filters": "^6.0.5",
-		"pixi.js": "^8.5.2",
-		"zod": "^3.23.8"
+		"pixi.js": "^8.15.0",
+		"zod": "^4.0.0"
 	}
 }