@shotstack/shotstack-studio 1.7.0 → 1.8.0

package/dist/schema/index.mjs

@@ -0,0 +1,301 @@
+import * as e from "zod";
+const y = e.enum(["linear", "bezier", "constant"]), A = e.enum([
+  "ease",
+  "easeIn",
+  "easeOut",
+  "easeInOut",
+  "easeInQuad",
+  "easeInCubic",
+  "easeInQuart",
+  "easeInQuint",
+  "easeInSine",
+  "easeInExpo",
+  "easeInCirc",
+  "easeInBack",
+  "easeOutQuad",
+  "easeOutCubic",
+  "easeOutQuart",
+  "easeOutQuint",
+  "easeOutSine",
+  "easeOutExpo",
+  "easeOutCirc",
+  "easeOutBack",
+  "easeInOutQuad",
+  "easeInOutCubic",
+  "easeInOutQuart",
+  "easeInOutQuint",
+  "easeInOutSine",
+  "easeInOutExpo",
+  "easeInOutCirc",
+  "easeInOutBack"
+]), o = e.object({
+  from: e.number(),
+  to: e.number(),
+  start: e.number().min(0),
+  length: e.number().positive(),
+  interpolation: y.optional(),
+  easing: A.optional()
+}), j = e.string().url("Invalid audio url format."), v = o.extend({
+  from: e.number().min(0).max(1),
+  to: e.number().min(0).max(1)
+}).array().or(e.number().min(0).max(1)), r = e.object({
+  type: e.literal("audio"),
+  src: j,
+  trim: e.number().optional(),
+  volume: v.optional()
+}), I = e.enum(["top", "topRight", "right", "bottomRight", "bottom", "bottomLeft", "left", "topLeft", "center"]), m = e.object({
+  type: e.literal("html"),
+  html: e.string(),
+  css: e.string(),
+  width: e.number().positive().optional(),
+  height: e.number().positive().optional(),
+  position: I.optional()
+}), C = e.string().url("Invalid image url format."), O = e.object({
+  top: e.number().min(0).optional(),
+  right: e.number().min(0).optional(),
+  bottom: e.number().min(0).optional(),
+  left: e.number().min(0).optional()
+}), s = e.object({
+  type: e.literal("image"),
+  src: C,
+  crop: O.optional()
+}), T = e.string().url("Invalid luma url format."), l = e.object({
+  type: e.literal("luma"),
+  src: T
+}), a = e.string().regex(/^#[A-Fa-f0-9]{6}$/, "Invalid hex color format"), w = e.object({
+  offset: e.number().min(0).max(1),
+  color: a
+}).strict(), R = e.object({
+  type: e.enum(["linear", "radial"]).default("linear"),
+  angle: e.number().min(0).max(360).default(0),
+  stops: e.array(w).min(2)
+}).strict(), k = e.object({
+  family: e.string().default("Roboto"),
+  size: e.number().min(8).max(500).default(48),
+  weight: e.union([e.string(), e.number()]).default("400"),
+  style: e.enum(["normal", "italic", "oblique"]).default("normal"),
+  color: a.default("#000000"),
+  opacity: e.number().min(0).max(1).default(1)
+}).strict(), F = e.object({
+  letterSpacing: e.number().default(0),
+  lineHeight: e.number().min(0.1).max(10).default(1.2),
+  textTransform: e.enum(["none", "uppercase", "lowercase", "capitalize"]).default("none"),
+  textDecoration: e.enum(["none", "underline", "line-through"]).default("none"),
+  gradient: R.optional()
+}).strict(), P = e.object({
+  width: e.number().min(0).default(0),
+  color: a.default("#000000"),
+  opacity: e.number().min(0).max(1).default(1)
+}).strict(), L = e.object({
+  offsetX: e.number().default(0),
+  offsetY: e.number().default(0),
+  blur: e.number().min(0).default(0),
+  color: a.default("#000000"),
+  opacity: e.number().min(0).max(1).default(0.5)
+}).strict(), Q = e.object({
+  color: a.optional(),
+  opacity: e.number().min(0).max(1).default(1),
+  borderRadius: e.number().min(0).default(0)
+}).strict(), z = e.object({
+  horizontal: e.enum(["left", "center", "right"]).default("left"),
+  vertical: e.enum(["top", "middle", "bottom"]).default("middle")
+}).strict(), V = e.object({
+  preset: e.enum(["fadeIn", "slideIn", "typewriter", "shift", "ascend", "movingLetters", "bounce", "elastic", "pulse"]),
+  speed: e.number().min(0.1).max(10).default(1),
+  duration: e.number().min(0.1).max(60).optional(),
+  style: e.enum(["character", "word"]).optional(),
+  direction: e.enum(["left", "right", "up", "down"]).optional()
+}).strict(), E = e.object({
+  src: e.string().url("Invalid font URL"),
+  family: e.string(),
+  weight: e.union([e.string(), e.number()]).default("400"),
+  style: e.enum(["normal", "italic", "oblique"]).default("normal")
+}).strict(), c = e.object({
+  type: e.literal("rich-text"),
+  text: e.string().max(1e4).default(""),
+  width: e.number().min(1).max(8192).optional(),
+  height: e.number().min(1).max(8192).optional(),
+  font: k.optional(),
+  style: F.optional(),
+  stroke: P.optional(),
+  shadow: L.optional(),
+  background: Q.optional(),
+  align: z.optional(),
+  animation: V.optional(),
+  cacheEnabled: e.boolean().default(!0),
+  pixelRatio: e.number().min(1).max(4).default(2),
+  customFonts: e.array(E).optional()
+}).strict(), g = e.string().regex(/^#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})|transparent$/, "Invalid color format."), u = e.object({
+  width: e.number().positive(),
+  height: e.number().positive()
+}), p = e.object({
+  radius: e.number().positive()
+}), f = e.object({
+  length: e.number().positive(),
+  thickness: e.number().positive()
+}), U = e.object({
+  color: g,
+  opacity: e.number().min(0).max(1)
+}), B = e.object({
+  color: g,
+  width: e.number().positive()
+}), b = e.object({
+  type: e.literal("shape"),
+  width: e.number().positive().optional(),
+  height: e.number().positive().optional(),
+  shape: e.enum(["rectangle", "circle", "line"]),
+  fill: U.optional(),
+  stroke: B.optional(),
+  rectangle: u.optional(),
+  circle: p.optional(),
+  line: f.optional()
+}).refine((t) => t.shape === "rectangle" ? u.safeParse(t.rectangle) : t.shape === "circle" ? p.safeParse(t.circle) : t.shape === "line" ? f.safeParse(t.line) : !1), i = e.string().regex(/^#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})|transparent$/, "Invalid color format."), H = e.object({
+  color: i.optional(),
+  family: e.string().optional(),
+  size: e.number().positive().optional(),
+  weight: e.number().optional(),
+  lineHeight: e.number().optional()
+}), K = e.object({
+  horizontal: e.enum(["left", "center", "right"]).optional(),
+  vertical: e.enum(["top", "center", "bottom"]).optional()
+}), $ = e.object({
+  color: i,
+  opacity: e.number().min(0).max(1)
+}), q = e.object({
+  width: e.number().positive(),
+  color: i
+}), h = e.object({
+  type: e.literal("text"),
+  text: e.string(),
+  width: e.number().positive().optional(),
+  height: e.number().positive().optional(),
+  font: H.optional(),
+  alignment: K.optional(),
+  background: $.optional(),
+  stroke: q.optional()
+}), G = e.string().url("Invalid video url format."), X = e.object({
+  top: e.number().min(0).optional(),
+  right: e.number().min(0).optional(),
+  bottom: e.number().min(0).optional(),
+  left: e.number().min(0).optional()
+}), Y = o.extend({
+  from: e.number().min(0).max(1),
+  to: e.number().min(0).max(1)
+}).array().or(e.number().min(0).max(1)), d = e.object({
+  type: e.literal("video"),
+  src: G,
+  trim: e.number().optional(),
+  crop: X.optional(),
+  volume: Y.optional()
+}), D = e.union([
+  h,
+  c,
+  b,
+  m,
+  s,
+  d,
+  l,
+  r
+]).refine((t) => t.type === "text" ? h.safeParse(t) : t.type === "rich-text" ? c.safeParse(t) : t.type === "shape" ? b.safeParse(t) : t.type === "html" ? m.safeParse(t) : t.type === "image" ? s.safeParse(t) : t.type === "video" ? d.safeParse(t) : t.type === "luma" ? l.safeParse(t) : t.type === "audio" ? r.safeParse(t) : !1), J = e.enum(["topLeft", "top", "topRight", "left", "center", "right", "bottomLeft", "bottom", "bottomRight"]), M = e.enum(["crop", "cover", "contain", "none"]), n = e.number().min(-10).max(10).default(0), N = o.extend({
+  from: n,
+  to: n
+}).array().or(n), W = o.extend({
+  from: n,
+  to: n
+}).array().or(n), Z = e.object({
+  x: N.default(0),
+  y: W.default(0)
+}), _ = o.extend({
+  from: e.number().min(0).max(1),
+  to: e.number().min(0).max(1)
+}).array().or(e.number().min(0).max(1)), ee = o.extend({
+  from: e.number().min(0),
+  to: e.number().min(0)
+}).array().or(e.number().min(0)), te = e.object({
+  angle: o.extend({
+    from: e.number(),
+    to: e.number()
+  }).array().or(e.number())
+}), oe = e.string(), S = e.string(), ne = e.object({
+  in: S.optional(),
+  out: S.optional()
+}), ae = e.object({
+  rotate: te.default({ angle: 0 })
+}), ie = e.object({
+  asset: D,
+  start: e.number().min(0),
+  length: e.number().positive(),
+  position: J.default("center").optional(),
+  fit: M.optional(),
+  offset: Z.default({ x: 0, y: 0 }).optional(),
+  opacity: _.default(1).optional(),
+  scale: ee.default(1).optional(),
+  transform: ae.default({ rotate: { angle: 0 } }).optional(),
+  effect: oe.optional(),
+  transition: ne.optional(),
+  width: e.number().min(1).max(3840).optional(),
+  height: e.number().min(1).max(2160).optional()
+}).transform((t) => {
+  if (t.fit !== void 0)
+    return t;
+  const x = t.asset.type === "rich-text" ? "none" : "crop";
+  return { ...t, fit: x };
+}), re = e.object({
+  clips: ie.array()
+}), me = e.string().url("Invalid image url format."), se = e.object({
+  src: me
+}), le = e.object({
+  background: e.string().optional(),
+  fonts: se.array().optional(),
+  tracks: re.array()
+}), ce = e.object({
+  size: e.object({
+    width: e.number().positive(),
+    height: e.number().positive()
+  }),
+  fps: e.number().positive().optional(),
+  format: e.string()
+}), ue = e.object({
+  timeline: le,
+  output: ce
+});
+export {
+  D as AssetSchema,
+  r as AudioAssetSchema,
+  j as AudioAssetUrlSchema,
+  v as AudioAssetVolumeSchema,
+  ie as ClipSchema,
+  ue as EditSchema,
+  se as FontSourceSchema,
+  me as FontSourceUrlSchema,
+  m as HtmlAssetSchema,
+  O as ImageAssetCropSchema,
+  s as ImageAssetSchema,
+  C as ImageAssetUrlSchema,
+  A as KeyframeEasingSchema,
+  y as KeyframeInterpolationSchema,
+  o as KeyframeSchema,
+  l as LumaAssetSchema,
+  T as LumaAssetUrlSchema,
+  ce as OutputSchema,
+  c as RichTextAssetSchema,
+  p as ShapeAssetCircleSchema,
+  g as ShapeAssetColorSchema,
+  U as ShapeAssetFillSchema,
+  f as ShapeAssetLineSchema,
+  u as ShapeAssetRectangleSchema,
+  b as ShapeAssetSchema,
+  B as ShapeAssetStrokeSchema,
+  K as TextAssetAlignmentSchema,
+  $ as TextAssetBackgroundSchema,
+  i as TextAssetColorSchema,
+  H as TextAssetFontSchema,
+  h as TextAssetSchema,
+  q as TextAssetStrokeSchema,
+  le as TimelineSchema,
+  re as TrackSchema,
+  X as VideoAssetCropSchema,
+  d as VideoAssetSchema,
+  G as VideoAssetUrlSchema,
+  Y as VideoAssetVolumeSchema
+};

package/package.json

@@ -5,15 +5,30 @@
 		"cpuccino",
 		"dazzatron"
 	],
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "A video editing library for creating and editing videos with Shotstack",
 	"type": "module",
 	"main": "dist/shotstack-studio.umd.js",
 	"module": "dist/shotstack-studio.es.js",
 	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/shotstack-studio.es.js",
+			"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"
+		}
+	},
 	"files": [
 		"dist/shotstack-studio.umd.js",
 		"dist/shotstack-studio.es.js",
+		"dist/schema/**",
 		"dist/**/*.d.ts"
 	],
 	"keywords": [
@@ -28,11 +43,22 @@
 		"url": "https://github.com/shotstack/shotstack-studio-sdk"
 	},
 	"scripts": {
-		"build": "vite build",
-		"prepublishOnly": "npm run build"
+		"dev": "vite",
+		"start": "npm run build && vite preview",
+		"build": "npm run build:main && npm run build:schema",
+		"build:main": "vite build",
+		"build:schema": "vite build --config vite.config.schema.ts",
+		"test": "npm run build && jest",
+		"test:watch": "jest --watch",
+		"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"
 	},
 	"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",
@@ -42,12 +68,14 @@
 		"eslint-config-airbnb-typescript": "^18.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-import": "^2.31.0",
+		"jest": "^30.2.0",
+		"ts-jest": "^29.4.5",
 		"typescript": "^5.6.2",
 		"vite": "^5.4.10",
 		"vite-plugin-dts": "^4.5.4"
 	},
 	"dependencies": {
-		"@shotstack/shotstack-canvas": "^1.1.2",
+		"@shotstack/shotstack-canvas": "^1.1.7",
 		"fast-deep-equal": "^3.1.3",
 		"howler": "^2.2.4",
 		"mediabunny": "^1.11.2",

package/readme.md

@@ -78,6 +78,10 @@ Your HTML should include containers for both the canvas and timeline:
 The Edit class represents a video project with its timeline, clips, and properties.
 
 ```typescript
+import { Edit } from "@shotstack/shotstack-studio";
+
+// For schema validation only (e.g., in tests):
+import { EditSchema, ClipSchema } from "@shotstack/shotstack-studio/schema";
 // Create an edit with dimensions and background
 const edit = new Edit({ width: 1280, height: 720 }, "#000000");
 await edit.load();
@@ -293,6 +297,7 @@ const timeline = new Timeline(edit, { width: 1280, height: 300 }, { theme: custo
 Themes are organized by component, making it intuitive to customize specific parts of the interface:
 
 - **Timeline**: Controls the appearance of the timeline interface
+
   - `toolbar`: Playback controls and buttons
   - `ruler`: Time markers and labels
   - `tracks`: Track backgrounds and borders