@cntrl-site/sdk 1.12.2 → 1.12.4-alpha.0

package/lib/schemas/article/Article.schema.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArticleSchema = void 0;
 const zod_1 = require("zod");
 const Section_schema_1 = require("./Section.schema");
+const Interaction_schema_1 = require("./Interaction.schema");
 exports.ArticleSchema = zod_1.z.object({
     id: zod_1.z.string().min(1),
-    sections: zod_1.z.array(Section_schema_1.SectionSchema)
+    sections: zod_1.z.array(Section_schema_1.SectionSchema),
+    interactions: zod_1.z.array(Interaction_schema_1.InteractionSchema)
 });

package/lib/schemas/article/Interaction.schema.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractionSchema = void 0;
+const zod_1 = require("zod");
+const TriggerSchema = zod_1.z.object({
+    itemId: zod_1.z.string(),
+    type: zod_1.z.enum(['hover-on', 'hover-on-off', 'click']),
+    to: zod_1.z.string()
+});
+const StateSchema = zod_1.z.object({
+    id: zod_1.z.string()
+});
+exports.InteractionSchema = zod_1.z.object({
+    id: zod_1.z.string(),
+    triggers: zod_1.z.array(TriggerSchema),
+    states: zod_1.z.array(StateSchema)
+});

package/lib/schemas/article/Item.schema.js

@@ -49,13 +49,14 @@ const ImageItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         blur: zod_1.z.number()
     })),
     state: zod_1.z.object({
-        hover: zod_1.z.record(ItemState_schema_1.MediaHoverStateParamsSchema)
+        hover: zod_1.z.record(ItemState_schema_1.MediaStateParamsSchema)
     })
 });
 const VideoItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
     type: zod_1.z.literal(ArticleItemType_1.ArticleItemType.Video),
     commonParams: zod_1.z.object({
-        url: zod_1.z.string().min(1)
+        url: zod_1.z.string().min(1),
+        coverUrl: zod_1.z.string().nullable()
     }),
     sticky: zod_1.z.record(zod_1.z.object({
         from: zod_1.z.number(),
@@ -74,7 +75,7 @@ const VideoItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         blur: zod_1.z.number()
     })),
     state: zod_1.z.object({
-        hover: zod_1.z.record(ItemState_schema_1.MediaHoverStateParamsSchema)
+        hover: zod_1.z.record(ItemState_schema_1.MediaStateParamsSchema)
     })
 });
 const RectangleItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
@@ -96,7 +97,7 @@ const RectangleItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         blurMode: zod_1.z.enum(['default', 'backdrop'])
     })),
     state: zod_1.z.object({
-        hover: zod_1.z.record(ItemState_schema_1.RectangleHoverStateParamsSchema)
+        hover: zod_1.z.record(ItemState_schema_1.RectangleStateParamsSchema)
     })
 });
 const CustomItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
@@ -110,7 +111,7 @@ const CustomItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
     }).nullable()),
     layoutParams: zod_1.z.record(zod_1.z.object({})),
     state: zod_1.z.object({
-        hover: zod_1.z.record(ItemState_schema_1.CustomItemHoverStateParamsSchema)
+        hover: zod_1.z.record(ItemState_schema_1.CustomItemStateParamsSchema)
     })
 });
 const VimeoEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
@@ -122,6 +123,7 @@ const VimeoEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         muted: zod_1.z.boolean(),
         pictureInPicture: zod_1.z.boolean(),
         url: zod_1.z.string().min(1),
+        coverUrl: zod_1.z.string().nullable(),
         ratioLock: zod_1.z.boolean()
     }),
     sticky: zod_1.z.record(zod_1.z.object({
@@ -134,7 +136,7 @@ const VimeoEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         opacity: zod_1.z.number().nonnegative()
     })),
     state: zod_1.z.object({
-        hover: zod_1.z.record(ItemState_schema_1.EmbedHoverStateParamsSchema)
+        hover: zod_1.z.record(ItemState_schema_1.EmbedStateParamsSchema)
     })
 });
 const YoutubeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
@@ -143,7 +145,8 @@ const YoutubeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         play: zod_1.z.enum(['on-hover', 'on-click', 'auto']),
         controls: zod_1.z.boolean(),
         loop: zod_1.z.boolean(),
-        url: zod_1.z.string().min(1)
+        url: zod_1.z.string().min(1),
+        coverUrl: zod_1.z.string().nullable()
     }),
     sticky: zod_1.z.record(zod_1.z.object({
         from: zod_1.z.number(),
@@ -155,7 +158,7 @@ const YoutubeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         opacity: zod_1.z.number().nonnegative()
     })),
     state: zod_1.z.object({
-        hover: zod_1.z.record(ItemState_schema_1.EmbedHoverStateParamsSchema)
+        hover: zod_1.z.record(ItemState_schema_1.EmbedStateParamsSchema)
     })
 });
 const CodeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
@@ -175,7 +178,7 @@ const CodeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         blur: zod_1.z.number()
     })),
     state: zod_1.z.object({
-        hover: zod_1.z.record(ItemState_schema_1.CodeEmbedHoverStateParamsSchema)
+        hover: zod_1.z.record(ItemState_schema_1.CodeEmbedStateParamsSchema)
     })
 });
 exports.ItemSchema = zod_1.z.lazy(() => zod_1.z.discriminatedUnion('type', [
@@ -199,7 +202,7 @@ exports.ItemSchema = zod_1.z.lazy(() => zod_1.z.discriminatedUnion('type', [
             opacity: zod_1.z.number().nonnegative()
         })),
         state: zod_1.z.object({
-            hover: zod_1.z.record(ItemState_schema_1.GroupHoverStateParamsSchema)
+            hover: zod_1.z.record(ItemState_schema_1.GroupStateParamsSchema)
         })
     })
 ]));

package/lib/schemas/article/ItemState.schema.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ItemHoverStateParamsSchema = exports.CodeEmbedHoverStateParamsSchema = exports.GroupHoverStateParamsSchema = exports.RichTextHoverStateParamsSchema = exports.EmbedHoverStateParamsSchema = exports.CustomItemHoverStateParamsSchema = exports.RectangleHoverStateParamsSchema = exports.MediaHoverStateParamsSchema = exports.ItemHoverStateBaseSchema = exports.getHoverParamsSchema = void 0;
+exports.ItemStateParamsSchema = exports.CodeEmbedStateParamsSchema = exports.GroupStateParamsSchema = exports.RichTextStateParamsSchema = exports.EmbedStateParamsSchema = exports.CustomItemStateParamsSchema = exports.RectangleStateParamsSchema = exports.MediaStateParamsSchema = exports.ItemStateBaseSchema = exports.getStateParamsSchema = void 0;
 const zod_1 = require("zod");
-const getHoverParamsSchema = (schema) => {
+const getStateParamsSchema = (schema) => {
     return zod_1.z.object({
         timing: zod_1.z.string(),
         duration: zod_1.z.number(),
@@ -10,52 +10,52 @@ const getHoverParamsSchema = (schema) => {
         value: schema
     }).optional();
 };
-exports.getHoverParamsSchema = getHoverParamsSchema;
-exports.ItemHoverStateBaseSchema = zod_1.z.object({
-    width: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    height: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    angle: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    top: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    left: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    scale: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    blur: (0, exports.getHoverParamsSchema)(zod_1.z.number())
+exports.getStateParamsSchema = getStateParamsSchema;
+exports.ItemStateBaseSchema = zod_1.z.object({
+    width: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    height: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    angle: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    top: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    left: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    scale: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    blur: (0, exports.getStateParamsSchema)(zod_1.z.number())
 });
-exports.MediaHoverStateParamsSchema = zod_1.z.object({
-    opacity: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    radius: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    strokeWidth: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    strokeColor: (0, exports.getHoverParamsSchema)(zod_1.z.string())
+exports.MediaStateParamsSchema = zod_1.z.object({
+    opacity: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    radius: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    strokeWidth: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    strokeColor: (0, exports.getStateParamsSchema)(zod_1.z.string())
 })
-    .merge(exports.ItemHoverStateBaseSchema);
-exports.RectangleHoverStateParamsSchema = zod_1.z.object({
-    strokeWidth: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    radius: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    fillColor: (0, exports.getHoverParamsSchema)(zod_1.z.string()),
-    strokeColor: (0, exports.getHoverParamsSchema)(zod_1.z.string()),
-    backdropBlur: (0, exports.getHoverParamsSchema)(zod_1.z.number())
-}).merge(exports.ItemHoverStateBaseSchema);
-exports.CustomItemHoverStateParamsSchema = exports.ItemHoverStateBaseSchema;
-exports.EmbedHoverStateParamsSchema = zod_1.z.object({
-    radius: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    opacity: (0, exports.getHoverParamsSchema)(zod_1.z.number().nonnegative())
-}).merge(exports.ItemHoverStateBaseSchema);
-exports.RichTextHoverStateParamsSchema = zod_1.z.object({
-    color: (0, exports.getHoverParamsSchema)(zod_1.z.string()),
-    letterSpacing: (0, exports.getHoverParamsSchema)(zod_1.z.number()),
-    wordSpacing: (0, exports.getHoverParamsSchema)(zod_1.z.number())
-}).merge(exports.ItemHoverStateBaseSchema);
-exports.GroupHoverStateParamsSchema = zod_1.z.object({
-    opacity: (0, exports.getHoverParamsSchema)(zod_1.z.number().nonnegative())
-}).merge(exports.ItemHoverStateBaseSchema);
-exports.CodeEmbedHoverStateParamsSchema = zod_1.z.object({
-    opacity: (0, exports.getHoverParamsSchema)(zod_1.z.number().nonnegative())
-}).merge(exports.ItemHoverStateBaseSchema);
-exports.ItemHoverStateParamsSchema = zod_1.z.union([
-    exports.EmbedHoverStateParamsSchema,
-    exports.MediaHoverStateParamsSchema,
-    exports.RectangleHoverStateParamsSchema,
-    exports.RichTextHoverStateParamsSchema,
-    exports.CustomItemHoverStateParamsSchema,
-    exports.GroupHoverStateParamsSchema,
-    exports.CodeEmbedHoverStateParamsSchema
+    .merge(exports.ItemStateBaseSchema);
+exports.RectangleStateParamsSchema = zod_1.z.object({
+    strokeWidth: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    radius: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    fillColor: (0, exports.getStateParamsSchema)(zod_1.z.string()),
+    strokeColor: (0, exports.getStateParamsSchema)(zod_1.z.string()),
+    backdropBlur: (0, exports.getStateParamsSchema)(zod_1.z.number())
+}).merge(exports.ItemStateBaseSchema);
+exports.CustomItemStateParamsSchema = exports.ItemStateBaseSchema;
+exports.EmbedStateParamsSchema = zod_1.z.object({
+    radius: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    opacity: (0, exports.getStateParamsSchema)(zod_1.z.number().nonnegative())
+}).merge(exports.ItemStateBaseSchema);
+exports.RichTextStateParamsSchema = zod_1.z.object({
+    color: (0, exports.getStateParamsSchema)(zod_1.z.string()),
+    letterSpacing: (0, exports.getStateParamsSchema)(zod_1.z.number()),
+    wordSpacing: (0, exports.getStateParamsSchema)(zod_1.z.number())
+}).merge(exports.ItemStateBaseSchema);
+exports.GroupStateParamsSchema = zod_1.z.object({
+    opacity: (0, exports.getStateParamsSchema)(zod_1.z.number().nonnegative())
+}).merge(exports.ItemStateBaseSchema);
+exports.CodeEmbedStateParamsSchema = zod_1.z.object({
+    opacity: (0, exports.getStateParamsSchema)(zod_1.z.number().nonnegative())
+}).merge(exports.ItemStateBaseSchema);
+exports.ItemStateParamsSchema = zod_1.z.union([
+    exports.EmbedStateParamsSchema,
+    exports.MediaStateParamsSchema,
+    exports.RectangleStateParamsSchema,
+    exports.RichTextStateParamsSchema,
+    exports.CustomItemStateParamsSchema,
+    exports.GroupStateParamsSchema,
+    exports.CodeEmbedStateParamsSchema
 ]);

package/lib/schemas/article/RichTextItem.schema.js

@@ -54,6 +54,6 @@ exports.RichTextItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         fontVariant: zod_1.z.string()
     })),
     state: zod_1.z.object({
-        hover: zod_1.z.record(ItemState_schema_1.RichTextHoverStateParamsSchema)
+        hover: zod_1.z.record(ItemState_schema_1.RichTextStateParamsSchema)
     })
 });

package/lib/types/article/Interaction.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk",
-  "version": "1.12.2",
+  "version": "1.12.4-alpha.0",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/index.ts

@@ -2,7 +2,7 @@
 export { Client as CntrlClient } from './Client/Client';
 export { FontFaceGenerator } from './FontFaceGenerator/FontFaceGenerator';
 export { getLayoutStyles, getLayoutMediaQuery } from './utils';
-export {ScrollPlaybackVideoManager} from './ScrollPlaybackVideoManager/ScrollPlaybackVideoManager';
+export { ScrollPlaybackVideoManager } from './ScrollPlaybackVideoManager/ScrollPlaybackVideoManager';
 
 // enums
 export { SectionHeightMode } from './types/article/Section';
@@ -21,7 +21,7 @@ export type {
 } from './types/article/Item';
 export type { RichTextBlock, RichTextEntity, RichTextStyle } from './types/article/RichText';
 export type { ItemArea } from './types/article/ItemArea';
-export type { ItemState, ItemHoverState, HoverParams } from './types/article/ItemState';
+export type { ItemState, ItemStateParams, StateParams, ItemStatesMap } from './types/article/ItemState';
 export type { Layout } from './types/project/Layout';
 export type { Project } from './types/project/Project';
 export type { Meta } from './types/project/Meta';

package/src/schemas/article/Article.schema.ts

@@ -1,7 +1,9 @@
 import { z } from 'zod';
 import { SectionSchema } from './Section.schema';
+import { InteractionSchema } from './Interaction.schema';
 
 export const ArticleSchema = z.object({
   id: z.string().min(1),
-  sections: z.array(SectionSchema)
+  sections: z.array(SectionSchema),
+  interactions: z.array(InteractionSchema)
 });

package/src/schemas/article/Interaction.schema.ts

@@ -0,0 +1,18 @@
+import { z, ZodType } from 'zod';
+import { Interaction, InteractionTrigger } from '../../types/article/Interaction';
+
+const TriggerSchema = z.object({
+  itemId: z.string(),
+  type: z.enum(['hover-on', 'hover-on-off', 'click']),
+  to: z.string()
+}) satisfies ZodType<InteractionTrigger>;
+
+const StateSchema = z.object({
+  id: z.string()
+});
+
+export const InteractionSchema = z.object({
+  id: z.string(),
+  triggers: z.array(TriggerSchema),
+  states: z.array(StateSchema)
+}) satisfies ZodType<Interaction>;

package/src/schemas/article/Item.schema.ts

@@ -10,10 +10,11 @@ import {
   YoutubeEmbedItem
 } from '../../types/article/Item';
 import {
-  CodeEmbedHoverStateParamsSchema,
-  CustomItemHoverStateParamsSchema,
-  EmbedHoverStateParamsSchema, GroupHoverStateParamsSchema, MediaHoverStateParamsSchema,
-  RectangleHoverStateParamsSchema
+  CodeEmbedStateParamsSchema,
+  CustomItemStateParamsSchema,
+  EmbedStateParamsSchema, GroupStateParamsSchema,
+  MediaStateParamsSchema,
+  RectangleStateParamsSchema
 } from './ItemState.schema';
 import { RichTextItemSchema } from './RichTextItem.schema';
 import { ItemBaseSchema } from './ItemBase.schema';
@@ -68,14 +69,15 @@ const ImageItemSchema = ItemBaseSchema.extend({
     })
   ),
   state: z.object({
-    hover: z.record(MediaHoverStateParamsSchema)
+    hover: z.record(MediaStateParamsSchema)
   })
 }) satisfies ZodType<ImageItem>;
 
 const VideoItemSchema = ItemBaseSchema.extend({
   type: z.literal(ArticleItemType.Video),
   commonParams: z.object({
-    url: z.string().min(1)
+    url: z.string().min(1),
+    coverUrl: z.string().nullable()
   }),
   sticky: z.record(
     z.object({
@@ -98,7 +100,7 @@ const VideoItemSchema = ItemBaseSchema.extend({
     })
   ),
   state: z.object({
-    hover: z.record(MediaHoverStateParamsSchema)
+    hover: z.record(MediaStateParamsSchema)
   })
 }) satisfies ZodType<VideoItem>;
 
@@ -125,7 +127,7 @@ const RectangleItemSchema = ItemBaseSchema.extend({
     })
   ),
   state: z.object({
-    hover: z.record(RectangleHoverStateParamsSchema)
+    hover: z.record(RectangleStateParamsSchema)
   })
 }) satisfies ZodType<RectangleItem>;
 
@@ -142,7 +144,7 @@ const CustomItemSchema = ItemBaseSchema.extend({
   ),
   layoutParams: z.record(z.object({})),
   state: z.object({
-    hover: z.record(CustomItemHoverStateParamsSchema)
+    hover: z.record(CustomItemStateParamsSchema)
   })
 }) satisfies ZodType<CustomItem>;
 
@@ -155,6 +157,7 @@ const VimeoEmbedItemSchema = ItemBaseSchema.extend({
     muted: z.boolean(),
     pictureInPicture: z.boolean(),
     url: z.string().min(1),
+    coverUrl: z.string().nullable(),
     ratioLock: z.boolean()
   }),
   sticky: z.record(
@@ -171,7 +174,7 @@ const VimeoEmbedItemSchema = ItemBaseSchema.extend({
     })
   ),
   state: z.object({
-    hover: z.record(EmbedHoverStateParamsSchema)
+    hover: z.record(EmbedStateParamsSchema)
   })
 }) satisfies ZodType<VimeoEmbedItem>;
 
@@ -181,7 +184,8 @@ const YoutubeEmbedItemSchema = ItemBaseSchema.extend({
     play: z.enum(['on-hover', 'on-click', 'auto']),
     controls: z.boolean(),
     loop: z.boolean(),
-    url: z.string().min(1)
+    url: z.string().min(1),
+    coverUrl: z.string().nullable()
   }),
   sticky: z.record(
     z.object({
@@ -197,7 +201,7 @@ const YoutubeEmbedItemSchema = ItemBaseSchema.extend({
     })
   ),
   state: z.object({
-    hover: z.record(EmbedHoverStateParamsSchema)
+    hover: z.record(EmbedStateParamsSchema)
   })
 }) satisfies ZodType<YoutubeEmbedItem>;
 
@@ -222,7 +226,7 @@ const CodeEmbedItemSchema =  ItemBaseSchema.extend({
     })
   ),
   state: z.object({
-    hover: z.record(CodeEmbedHoverStateParamsSchema)
+    hover: z.record(CodeEmbedStateParamsSchema)
   })
 }) satisfies ZodType<CodeEmbedItem>;
 
@@ -251,7 +255,7 @@ export const ItemSchema: ZodType<ItemAny> = z.lazy(() => z.discriminatedUnion('t
       })
     ),
     state: z.object({
-      hover: z.record(GroupHoverStateParamsSchema)
+      hover: z.record(GroupStateParamsSchema)
     })
   })
 ]));

package/src/schemas/article/ItemState.schema.ts

@@ -1,12 +1,15 @@
 import { z, ZodType } from 'zod';
 import {
-  CodeEmbedHoverStateParams,
-  CustomHoverStateParams, EmbedHoverStateParams, GroupHoverStateParams,
-  MediaHoverStateParams,
-  RectangleHoverStateParams, RichTextHoverStateParams
+  CodeEmbedStateParams,
+  CustomItemStateParams,
+  VideoEmbedStateParams,
+  GroupStateParams,
+  MediaStateParams,
+  RectangleStateParams,
+  RichTextStateParams
 } from '../../types/article/ItemState';
 
-export const getHoverParamsSchema = <T extends z.ZodTypeAny>(schema: T) => {
+export const getStateParamsSchema = <T extends z.ZodTypeAny>(schema: T) => {
   return z.object({
     timing: z.string(),
     duration: z.number(),
@@ -15,60 +18,60 @@ export const getHoverParamsSchema = <T extends z.ZodTypeAny>(schema: T) => {
   }).optional();
 };
 
-export const ItemHoverStateBaseSchema = z.object({
-  width: getHoverParamsSchema(z.number()),
-  height: getHoverParamsSchema(z.number()),
-  angle: getHoverParamsSchema(z.number()),
-  top: getHoverParamsSchema(z.number()),
-  left: getHoverParamsSchema(z.number()),
-  scale: getHoverParamsSchema(z.number()),
-  blur: getHoverParamsSchema(z.number())
+export const ItemStateBaseSchema = z.object({
+  width: getStateParamsSchema(z.number()),
+  height: getStateParamsSchema(z.number()),
+  angle: getStateParamsSchema(z.number()),
+  top: getStateParamsSchema(z.number()),
+  left: getStateParamsSchema(z.number()),
+  scale: getStateParamsSchema(z.number()),
+  blur: getStateParamsSchema(z.number())
 });
 
-export const MediaHoverStateParamsSchema =
+export const MediaStateParamsSchema =
   z.object({
-    opacity: getHoverParamsSchema(z.number()),
-    radius: getHoverParamsSchema(z.number()),
-    strokeWidth: getHoverParamsSchema(z.number()),
-    strokeColor: getHoverParamsSchema(z.string())
+    opacity: getStateParamsSchema(z.number()),
+    radius: getStateParamsSchema(z.number()),
+    strokeWidth: getStateParamsSchema(z.number()),
+    strokeColor: getStateParamsSchema(z.string())
   })
-    .merge(ItemHoverStateBaseSchema) satisfies ZodType<MediaHoverStateParams>;
+    .merge(ItemStateBaseSchema) satisfies ZodType<MediaStateParams>;
 
-export const RectangleHoverStateParamsSchema = z.object({
-  strokeWidth: getHoverParamsSchema(z.number()),
-  radius: getHoverParamsSchema(z.number()),
-  fillColor: getHoverParamsSchema(z.string()),
-  strokeColor: getHoverParamsSchema(z.string()),
-  backdropBlur: getHoverParamsSchema(z.number())
-}).merge(ItemHoverStateBaseSchema) satisfies ZodType<RectangleHoverStateParams>;
+export const RectangleStateParamsSchema = z.object({
+  strokeWidth: getStateParamsSchema(z.number()),
+  radius: getStateParamsSchema(z.number()),
+  fillColor: getStateParamsSchema(z.string()),
+  strokeColor: getStateParamsSchema(z.string()),
+  backdropBlur: getStateParamsSchema(z.number())
+}).merge(ItemStateBaseSchema) satisfies ZodType<RectangleStateParams>;
 
-export const CustomItemHoverStateParamsSchema = ItemHoverStateBaseSchema satisfies ZodType<CustomHoverStateParams>;
+export const CustomItemStateParamsSchema = ItemStateBaseSchema satisfies ZodType<CustomItemStateParams>;
 
-export const EmbedHoverStateParamsSchema = z.object({
-  radius: getHoverParamsSchema(z.number()),
-  opacity: getHoverParamsSchema(z.number().nonnegative())
-}).merge(ItemHoverStateBaseSchema) satisfies ZodType<EmbedHoverStateParams>;
+export const EmbedStateParamsSchema = z.object({
+  radius: getStateParamsSchema(z.number()),
+  opacity: getStateParamsSchema(z.number().nonnegative())
+}).merge(ItemStateBaseSchema) satisfies ZodType<VideoEmbedStateParams>;
 
-export const RichTextHoverStateParamsSchema = z.object({
-  color: getHoverParamsSchema(z.string()),
-  letterSpacing: getHoverParamsSchema(z.number()),
-  wordSpacing: getHoverParamsSchema(z.number())
-}).merge(ItemHoverStateBaseSchema) satisfies ZodType<RichTextHoverStateParams>;
+export const RichTextStateParamsSchema = z.object({
+  color: getStateParamsSchema(z.string()),
+  letterSpacing: getStateParamsSchema(z.number()),
+  wordSpacing: getStateParamsSchema(z.number())
+}).merge(ItemStateBaseSchema) satisfies ZodType<RichTextStateParams>;
 
-export const GroupHoverStateParamsSchema = z.object({
-  opacity: getHoverParamsSchema(z.number().nonnegative())
-}).merge(ItemHoverStateBaseSchema) satisfies ZodType<GroupHoverStateParams>;
+export const GroupStateParamsSchema = z.object({
+  opacity: getStateParamsSchema(z.number().nonnegative())
+}).merge(ItemStateBaseSchema) satisfies ZodType<GroupStateParams>;
 
-export const CodeEmbedHoverStateParamsSchema = z.object({
-  opacity: getHoverParamsSchema(z.number().nonnegative())
-}).merge(ItemHoverStateBaseSchema) satisfies ZodType<CodeEmbedHoverStateParams>;
+export const CodeEmbedStateParamsSchema = z.object({
+  opacity: getStateParamsSchema(z.number().nonnegative())
+}).merge(ItemStateBaseSchema) satisfies ZodType<CodeEmbedStateParams>;
 
-export const ItemHoverStateParamsSchema = z.union([
-  EmbedHoverStateParamsSchema,
-  MediaHoverStateParamsSchema,
-  RectangleHoverStateParamsSchema,
-  RichTextHoverStateParamsSchema,
-  CustomItemHoverStateParamsSchema,
-  GroupHoverStateParamsSchema,
-  CodeEmbedHoverStateParamsSchema
+export const ItemStateParamsSchema = z.union([
+  EmbedStateParamsSchema,
+  MediaStateParamsSchema,
+  RectangleStateParamsSchema,
+  RichTextStateParamsSchema,
+  CustomItemStateParamsSchema,
+  GroupStateParamsSchema,
+  CodeEmbedStateParamsSchema
 ]);

package/src/schemas/article/RichTextItem.schema.ts

@@ -2,7 +2,7 @@ import { z, ZodType } from 'zod';
 import { RichTextBlock, TextAlign, TextTransform, VerticalAlign } from '../../types/article/RichText';
 import { ItemBaseSchema } from './ItemBase.schema';
 import { ArticleItemType } from '../../types/article/ArticleItemType';
-import { RichTextHoverStateParamsSchema } from './ItemState.schema';
+import { RichTextStateParamsSchema } from './ItemState.schema';
 import { RichTextItem } from '../../types/article/Item';
 
 export const RichTextEntitySchema = z.object({
@@ -62,6 +62,6 @@ export const RichTextItemSchema = ItemBaseSchema.extend({
     })
   ),
   state: z.object({
-    hover: z.record(RichTextHoverStateParamsSchema)
+    hover: z.record(RichTextStateParamsSchema)
   })
 }) satisfies ZodType<RichTextItem>;

package/src/types/article/Interaction.ts

@@ -0,0 +1,17 @@
+export interface Interaction {
+  id: string;
+  triggers: InteractionTrigger[];
+  states: InteractionState[];
+}
+
+export interface InteractionTrigger {
+  itemId: string;
+  type: 'hover-on' | 'hover-on-off' | 'click';
+  to: StateId;
+}
+
+export interface InteractionState {
+  id: StateId;
+}
+
+type StateId = string;

package/src/types/article/Item.ts

@@ -3,6 +3,7 @@ import { ArticleItemType } from './ArticleItemType';
 import { AreaAnchor, ItemArea } from './ItemArea';
 import { ItemState } from './ItemState';
 import { FXControlAny, FXCursor } from './FX';
+import { z } from 'zod';
 
 export type ItemAny = Item<ArticleItemType>;
 
@@ -47,7 +48,9 @@ interface MediaCommonParams {
   url: string;
 }
 
-interface VideoCommonParams extends MediaCommonParams {}
+interface VideoCommonParams extends MediaCommonParams {
+  coverUrl: string | null;
+}
 
 interface ImageCommonParams extends MediaCommonParams {
   hasGLEffect?: boolean;
@@ -84,6 +87,7 @@ interface VimeoEmbedCommonParams {
   muted: boolean;
   pictureInPicture: boolean;
   url: string;
+  coverUrl: string | null;
 }
 
 interface YoutubeEmbedCommonParams {
@@ -91,6 +95,7 @@ interface YoutubeEmbedCommonParams {
   controls: boolean;
   loop: boolean;
   url: string;
+  coverUrl: string | null;
 }
 
 interface MediaLayoutParams {

package/src/types/article/ItemState.ts

@@ -1,75 +1,73 @@
 import { ArticleItemType } from './ArticleItemType';
 
-type LayoutIdentifier = string;
+type LayoutId = string;
+type StateId = string;
 
-export interface ItemState<T extends ArticleItemType> {
-  hover: Record<LayoutIdentifier, ItemHoverStatesMap[T]>;
-}
+export type ItemState<T extends ArticleItemType> = Record<StateId, Record<LayoutId, ItemStatesMap[T]>>;
 
-export type ItemHoverState = ItemHoverStatesMap[ArticleItemType];
+export type ItemStateParams = ItemStatesMap[ArticleItemType];
 
-export interface ItemHoverStatesMap {
-  [ArticleItemType.Image]: MediaHoverStateParams;
-  [ArticleItemType.Video]: MediaHoverStateParams;
-  [ArticleItemType.RichText]: RichTextHoverStateParams;
-  [ArticleItemType.Rectangle]: RectangleHoverStateParams;
-  [ArticleItemType.VimeoEmbed]: EmbedHoverStateParams;
-  [ArticleItemType.YoutubeEmbed]: EmbedHoverStateParams;
-  [ArticleItemType.Custom]: CustomHoverStateParams;
-  [ArticleItemType.Group]: GroupHoverStateParams;
-  [ArticleItemType.CodeEmbed]: CodeEmbedHoverStateParams;
+export interface ItemStatesMap {
+  [ArticleItemType.Image]: MediaStateParams;
+  [ArticleItemType.Video]: MediaStateParams;
+  [ArticleItemType.RichText]: RichTextStateParams;
+  [ArticleItemType.Rectangle]: RectangleStateParams;
+  [ArticleItemType.VimeoEmbed]: VideoEmbedStateParams;
+  [ArticleItemType.YoutubeEmbed]: VideoEmbedStateParams;
+  [ArticleItemType.Custom]: CustomItemStateParams;
+  [ArticleItemType.Group]: GroupStateParams;
+  [ArticleItemType.CodeEmbed]: CodeEmbedStateParams;
 }
 
-export interface HoverParams<T> {
+export interface StateParams<T> {
   timing: string;
   duration: number;
   delay: number;
   value: T;
 }
 
-interface ItemHoversBaseMap {
-  width?: HoverParams<number>;
-  height?: HoverParams<number>;
-  angle?:  HoverParams<number>;
-  top?:  HoverParams<number>;
-  left?:  HoverParams<number>;
-  scale?:  HoverParams<number>;
-  blur?: HoverParams<number>;
+interface ItemStatesBaseMap {
+  width?: StateParams<number>;
+  height?: StateParams<number>;
+  angle?: StateParams<number>;
+  top?: StateParams<number>;
+  left?: StateParams<number>;
+  scale?: StateParams<number>;
+  blur?: StateParams<number>;
 }
 
-export interface MediaHoverStateParams extends ItemHoversBaseMap {
-  opacity?: HoverParams<number>;
-  radius?: HoverParams<number>;
-  strokeWidth?: HoverParams<number>;
-  strokeColor?: HoverParams<string>;
+export interface MediaStateParams extends ItemStatesBaseMap {
+  opacity?: StateParams<number>;
+  radius?: StateParams<number>;
+  strokeWidth?: StateParams<number>;
+  strokeColor?: StateParams<string>;
 }
 
-export interface RichTextHoverStateParams extends ItemHoversBaseMap {
-  color?: HoverParams<string>;
-  letterSpacing?: HoverParams<number>;
-  wordSpacing?: HoverParams<number>;
+export interface RichTextStateParams extends ItemStatesBaseMap {
+  color?: StateParams<string>;
+  letterSpacing?: StateParams<number>;
+  wordSpacing?: StateParams<number>;
 }
 
-
-export interface RectangleHoverStateParams extends ItemHoversBaseMap {
-  radius?: HoverParams<number>;
-  strokeWidth?: HoverParams<number>;
-  fillColor?: HoverParams<string>;
-  strokeColor?: HoverParams<string>;
-  backdropBlur?: HoverParams<number>;
+export interface RectangleStateParams extends ItemStatesBaseMap {
+  radius?: StateParams<number>;
+  strokeWidth?: StateParams<number>;
+  fillColor?: StateParams<string>;
+  strokeColor?: StateParams<string>;
+  backdropBlur?: StateParams<number>;
 }
 
-export interface EmbedHoverStateParams extends ItemHoversBaseMap {
-  radius?: HoverParams<number>;
-  opacity?: HoverParams<number>;
+export interface VideoEmbedStateParams extends ItemStatesBaseMap {
+  radius?: StateParams<number>;
+  opacity?: StateParams<number>;
 }
 
-export interface CustomHoverStateParams extends ItemHoversBaseMap {}
+export interface CustomItemStateParams extends ItemStatesBaseMap {}
 
-export interface GroupHoverStateParams extends ItemHoversBaseMap {
-  opacity?: HoverParams<number>;
+export interface GroupStateParams extends ItemStatesBaseMap {
+  opacity?: StateParams<number>;
 }
 
-export interface CodeEmbedHoverStateParams extends ItemHoversBaseMap {
-  opacity?: HoverParams<number>;
+export interface CodeEmbedStateParams extends ItemStatesBaseMap {
+  opacity?: StateParams<number>;
 }