@cntrl-site/sdk 1.11.0 → 1.12.0

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyframeType = exports.PositionType = exports.AnchorSide = exports.ScaleAnchor = exports.ArticleItemType = exports.VerticalAlign = exports.TextTransform = exports.TextDecoration = exports.TextAlign = exports.SectionHeightMode = exports.ScrollPlaybackVideoManager = exports.getLayoutMediaQuery = exports.getLayoutStyles = exports.FontFaceGenerator = exports.CntrlClient = void 0;
+exports.KeyframeType = exports.PositionType = exports.AnchorSide = exports.AreaAnchor = exports.ArticleItemType = exports.VerticalAlign = exports.TextTransform = exports.TextDecoration = exports.TextAlign = exports.SectionHeightMode = exports.ScrollPlaybackVideoManager = exports.getLayoutMediaQuery = exports.getLayoutStyles = exports.FontFaceGenerator = exports.CntrlClient = void 0;
 // logic
 var Client_1 = require("./Client/Client");
 Object.defineProperty(exports, "CntrlClient", { enumerable: true, get: function () { return Client_1.Client; } });
@@ -22,7 +22,7 @@ Object.defineProperty(exports, "VerticalAlign", { enumerable: true, get: functio
 var ArticleItemType_1 = require("./types/article/ArticleItemType");
 Object.defineProperty(exports, "ArticleItemType", { enumerable: true, get: function () { return ArticleItemType_1.ArticleItemType; } });
 var ItemArea_1 = require("./types/article/ItemArea");
-Object.defineProperty(exports, "ScaleAnchor", { enumerable: true, get: function () { return ItemArea_1.ScaleAnchor; } });
+Object.defineProperty(exports, "AreaAnchor", { enumerable: true, get: function () { return ItemArea_1.AreaAnchor; } });
 Object.defineProperty(exports, "AnchorSide", { enumerable: true, get: function () { return ItemArea_1.AnchorSide; } });
 Object.defineProperty(exports, "PositionType", { enumerable: true, get: function () { return ItemArea_1.PositionType; } });
 var Keyframe_1 = require("./types/keyframe/Keyframe");

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

@@ -6,6 +6,7 @@ const ItemState_schema_1 = require("./ItemState.schema");
 const RichTextItem_schema_1 = require("./RichTextItem.schema");
 const ItemBase_schema_1 = require("./ItemBase.schema");
 const ArticleItemType_1 = require("../../types/article/ArticleItemType");
+const ItemArea_1 = require("../../types/article/ItemArea");
 exports.FXControlSchema = zod_1.z.discriminatedUnion('type', [
     zod_1.z.object({
         type: zod_1.z.literal('float'),
@@ -157,6 +158,24 @@ const YoutubeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         hover: zod_1.z.record(ItemState_schema_1.EmbedHoverStateParamsSchema)
     })
 });
+const CodeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
+    type: zod_1.z.literal(ArticleItemType_1.ArticleItemType.CodeEmbed),
+    commonParams: zod_1.z.object({
+        html: zod_1.z.string()
+    }),
+    sticky: zod_1.z.record(zod_1.z.object({
+        from: zod_1.z.number(),
+        to: zod_1.z.number().optional()
+    }).nullable()),
+    layoutParams: zod_1.z.record(zod_1.z.object({
+        areaAnchor: zod_1.z.nativeEnum(ItemArea_1.AreaAnchor),
+        opacity: zod_1.z.number().nonnegative(),
+        blur: zod_1.z.number()
+    })),
+    state: zod_1.z.object({
+        hover: zod_1.z.record(ItemState_schema_1.CodeEmbedHoverStateParamsSchema)
+    })
+});
 exports.ItemSchema = zod_1.z.lazy(() => zod_1.z.discriminatedUnion('type', [
     ImageItemSchema,
     VideoItemSchema,
@@ -165,6 +184,7 @@ exports.ItemSchema = zod_1.z.lazy(() => zod_1.z.discriminatedUnion('type', [
     RichTextItem_schema_1.RichTextItemSchema,
     VimeoEmbedItemSchema,
     YoutubeEmbedItemSchema,
+    CodeEmbedItemSchema,
     ItemBase_schema_1.ItemBaseSchema.extend({
         type: zod_1.z.literal(ArticleItemType_1.ArticleItemType.Group),
         commonParams: zod_1.z.object({}),

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

@@ -13,5 +13,5 @@ exports.ItemAreaSchema = zod_1.z.object({
     anchorSide: zod_1.z.nativeEnum(ItemArea_1.AnchorSide).optional(),
     scale: zod_1.z.number().nonnegative(),
     positionType: zod_1.z.nativeEnum(ItemArea_1.PositionType),
-    scaleAnchor: zod_1.z.nativeEnum(ItemArea_1.ScaleAnchor)
+    scaleAnchor: zod_1.z.nativeEnum(ItemArea_1.AreaAnchor)
 });

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ItemHoverStateParamsSchema = exports.GroupHoverStateParamsSchema = exports.RichTextHoverStateParamsSchema = exports.EmbedHoverStateParamsSchema = exports.CustomItemHoverStateParamsSchema = exports.RectangleHoverStateParamsSchema = exports.MediaHoverStateParamsSchema = exports.ItemHoverStateBaseSchema = exports.getHoverParamsSchema = void 0;
+exports.ItemHoverStateParamsSchema = exports.CodeEmbedHoverStateParamsSchema = exports.GroupHoverStateParamsSchema = exports.RichTextHoverStateParamsSchema = exports.EmbedHoverStateParamsSchema = exports.CustomItemHoverStateParamsSchema = exports.RectangleHoverStateParamsSchema = exports.MediaHoverStateParamsSchema = exports.ItemHoverStateBaseSchema = exports.getHoverParamsSchema = void 0;
 const zod_1 = require("zod");
 const getHoverParamsSchema = (schema) => {
     return zod_1.z.object({
@@ -36,7 +36,8 @@ exports.RectangleHoverStateParamsSchema = zod_1.z.object({
 }).merge(exports.ItemHoverStateBaseSchema);
 exports.CustomItemHoverStateParamsSchema = exports.ItemHoverStateBaseSchema;
 exports.EmbedHoverStateParamsSchema = zod_1.z.object({
-    radius: (0, exports.getHoverParamsSchema)(zod_1.z.number())
+    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()),
@@ -46,11 +47,15 @@ exports.RichTextHoverStateParamsSchema = zod_1.z.object({
 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.GroupHoverStateParamsSchema,
+    exports.CodeEmbedHoverStateParamsSchema
 ]);

package/lib/types/article/ArticleItemType.js

@@ -11,4 +11,5 @@ var ArticleItemType;
     ArticleItemType["YoutubeEmbed"] = "youtube-embed";
     ArticleItemType["Custom"] = "custom";
     ArticleItemType["Group"] = "group";
+    ArticleItemType["CodeEmbed"] = "code-embed";
 })(ArticleItemType || (exports.ArticleItemType = ArticleItemType = {}));

package/lib/types/article/ItemArea.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScaleAnchor = exports.PositionType = exports.AnchorSide = void 0;
+exports.AreaAnchor = exports.PositionType = exports.AnchorSide = void 0;
 var AnchorSide;
 (function (AnchorSide) {
     AnchorSide["Top"] = "top";
@@ -12,15 +12,15 @@ var PositionType;
     PositionType["SectionBased"] = "section-based";
     PositionType["ScreenBased"] = "screen-based";
 })(PositionType || (exports.PositionType = PositionType = {}));
-var ScaleAnchor;
-(function (ScaleAnchor) {
-    ScaleAnchor["TopLeft"] = "top-left";
-    ScaleAnchor["TopCenter"] = "top-center";
-    ScaleAnchor["TopRight"] = "top-right";
-    ScaleAnchor["MiddleLeft"] = "middle-left";
-    ScaleAnchor["MiddleCenter"] = "middle-center";
-    ScaleAnchor["MiddleRight"] = "middle-right";
-    ScaleAnchor["BottomLeft"] = "bottom-left";
-    ScaleAnchor["BottomCenter"] = "bottom-center";
-    ScaleAnchor["BottomRight"] = "bottom-right";
-})(ScaleAnchor || (exports.ScaleAnchor = ScaleAnchor = {}));
+var AreaAnchor;
+(function (AreaAnchor) {
+    AreaAnchor["TopLeft"] = "top-left";
+    AreaAnchor["TopCenter"] = "top-center";
+    AreaAnchor["TopRight"] = "top-right";
+    AreaAnchor["MiddleLeft"] = "middle-left";
+    AreaAnchor["MiddleCenter"] = "middle-center";
+    AreaAnchor["MiddleRight"] = "middle-right";
+    AreaAnchor["BottomLeft"] = "bottom-left";
+    AreaAnchor["BottomCenter"] = "bottom-center";
+    AreaAnchor["BottomRight"] = "bottom-right";
+})(AreaAnchor || (exports.AreaAnchor = AreaAnchor = {}));

package/package.json

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

package/src/index.ts

@@ -8,7 +8,7 @@ export {ScrollPlaybackVideoManager} from './ScrollPlaybackVideoManager/ScrollPla
 export { SectionHeightMode } from './types/article/Section';
 export { TextAlign, TextDecoration, TextTransform, VerticalAlign } from './types/article/RichText';
 export { ArticleItemType } from './types/article/ArticleItemType';
-export { ScaleAnchor, AnchorSide, PositionType } from './types/article/ItemArea';
+export { AreaAnchor, AnchorSide, PositionType } from './types/article/ItemArea';
 export { KeyframeType } from './types/keyframe/Keyframe';
 
 // types
@@ -17,7 +17,7 @@ export type { Section, SectionHeight } from './types/article/Section';
 export type {
   Item, ImageItem, ItemAny, CustomItem, ItemCommonParamsMap,
   ItemLayoutParamsMap, RectangleItem, StickyParams, VideoItem, RichTextItem,
-  Link, VimeoEmbedItem, YoutubeEmbedItem, GroupItem
+  Link, VimeoEmbedItem, YoutubeEmbedItem, GroupItem, CodeEmbedItem
 } from './types/article/Item';
 export type { RichTextBlock, RichTextEntity, RichTextStyle } from './types/article/RichText';
 export type { ItemArea } from './types/article/ItemArea';

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

@@ -1,5 +1,6 @@
 import { z, ZodType } from 'zod';
 import {
+  CodeEmbedItem,
   CustomItem,
   ImageItem,
   ItemAny,
@@ -9,6 +10,7 @@ import {
   YoutubeEmbedItem
 } from '../../types/article/Item';
 import {
+  CodeEmbedHoverStateParamsSchema,
   CustomItemHoverStateParamsSchema,
   EmbedHoverStateParamsSchema, GroupHoverStateParamsSchema, MediaHoverStateParamsSchema,
   RectangleHoverStateParamsSchema
@@ -17,6 +19,7 @@ import { RichTextItemSchema } from './RichTextItem.schema';
 import { ItemBaseSchema } from './ItemBase.schema';
 import { ArticleItemType } from '../../types/article/ArticleItemType';
 import { FXControlAny } from '../../types/article/FX';
+import { AreaAnchor } from '../../types/article/ItemArea';
 
 export const FXControlSchema = z.discriminatedUnion('type',[
   z.object({
@@ -198,6 +201,29 @@ const YoutubeEmbedItemSchema = ItemBaseSchema.extend({
   })
 }) satisfies ZodType<YoutubeEmbedItem>;
 
+const CodeEmbedItemSchema =  ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.CodeEmbed),
+  commonParams: z.object({
+    html: z.string()
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable(),
+  ),
+  layoutParams: z.record(
+    z.object({
+      areaAnchor:  z.nativeEnum(AreaAnchor),
+      opacity: z.number().nonnegative(),
+      blur: z.number()
+    })
+  ),
+  state: z.object({
+    hover: z.record(CodeEmbedHoverStateParamsSchema)
+  })
+}) satisfies ZodType<CodeEmbedItem>;
+
 export const ItemSchema: ZodType<ItemAny> = z.lazy(() => z.discriminatedUnion('type', [
   ImageItemSchema,
   VideoItemSchema,
@@ -206,6 +232,7 @@ export const ItemSchema: ZodType<ItemAny> = z.lazy(() => z.discriminatedUnion('t
   RichTextItemSchema,
   VimeoEmbedItemSchema,
   YoutubeEmbedItemSchema,
+  CodeEmbedItemSchema,
   ItemBaseSchema.extend({
     type: z.literal(ArticleItemType.Group),
     commonParams: z.object({}),

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

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { AnchorSide, PositionType, ScaleAnchor } from '../../types/article/ItemArea';
+import { AnchorSide, PositionType, AreaAnchor } from '../../types/article/ItemArea';
 
 export const ItemAreaSchema = z.object({
   top: z.number(),
@@ -11,5 +11,5 @@ export const ItemAreaSchema = z.object({
   anchorSide: z.nativeEnum(AnchorSide).optional(),
   scale: z.number().nonnegative(),
   positionType: z.nativeEnum(PositionType),
-  scaleAnchor: z.nativeEnum(ScaleAnchor)
+  scaleAnchor: z.nativeEnum(AreaAnchor)
 });

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

@@ -1,5 +1,6 @@
 import { z, ZodType } from 'zod';
 import {
+  CodeEmbedHoverStateParams,
   CustomHoverStateParams, EmbedHoverStateParams, GroupHoverStateParams,
   MediaHoverStateParams,
   RectangleHoverStateParams, RichTextHoverStateParams
@@ -44,7 +45,8 @@ export const RectangleHoverStateParamsSchema = z.object({
 export const CustomItemHoverStateParamsSchema = ItemHoverStateBaseSchema satisfies ZodType<CustomHoverStateParams>;
 
 export const EmbedHoverStateParamsSchema = z.object({
-  radius: getHoverParamsSchema(z.number())
+  radius: getHoverParamsSchema(z.number()),
+  opacity: getHoverParamsSchema(z.number().nonnegative())
 }).merge(ItemHoverStateBaseSchema) satisfies ZodType<EmbedHoverStateParams>;
 
 export const RichTextHoverStateParamsSchema = z.object({
@@ -57,11 +59,16 @@ export const GroupHoverStateParamsSchema = z.object({
   opacity: getHoverParamsSchema(z.number().nonnegative())
 }).merge(ItemHoverStateBaseSchema) satisfies ZodType<GroupHoverStateParams>;
 
+export const CodeEmbedHoverStateParamsSchema = z.object({
+  opacity: getHoverParamsSchema(z.number().nonnegative())
+}).merge(ItemHoverStateBaseSchema) satisfies ZodType<CodeEmbedHoverStateParams>;
+
 export const ItemHoverStateParamsSchema = z.union([
   EmbedHoverStateParamsSchema,
   MediaHoverStateParamsSchema,
   RectangleHoverStateParamsSchema,
   RichTextHoverStateParamsSchema,
   CustomItemHoverStateParamsSchema,
-  GroupHoverStateParamsSchema
+  GroupHoverStateParamsSchema,
+  CodeEmbedHoverStateParamsSchema
 ]);

package/src/types/article/ArticleItemType.ts

@@ -6,5 +6,6 @@ export enum ArticleItemType {
   VimeoEmbed = 'vimeo-embed',
   YoutubeEmbed = 'youtube-embed',
   Custom = 'custom',
-  Group = 'group'
+  Group = 'group',
+  CodeEmbed = 'code-embed'
 }

package/src/types/article/Item.ts

@@ -1,6 +1,6 @@
 import { RichTextBlock, RichTextStyle, TextAlign, TextTransform, VerticalAlign } from './RichText';
 import { ArticleItemType } from './ArticleItemType';
-import { ItemArea } from './ItemArea';
+import { AreaAnchor, ItemArea } from './ItemArea';
 import { ItemState } from './ItemState';
 import { FXControlAny, FXCursor } from './FX';
 
@@ -28,6 +28,7 @@ export interface ItemCommonParamsMap {
   [ArticleItemType.YoutubeEmbed]: YoutubeEmbedCommonParams;
   [ArticleItemType.Custom]: CustomCommonParams;
   [ArticleItemType.Group]: GroupCommonParams;
+  [ArticleItemType.CodeEmbed]: CodeEmbedCommonParams
 }
 
 export interface ItemLayoutParamsMap {
@@ -39,6 +40,7 @@ export interface ItemLayoutParamsMap {
   [ArticleItemType.YoutubeEmbed]: YoutubeEmbedLayoutParams;
   [ArticleItemType.Custom]: CustomLayoutParams;
   [ArticleItemType.Group]: GroupLayoutParams;
+  [ArticleItemType.CodeEmbed]: CodeEmbedLayoutParams;
 }
 
 interface MediaCommonParams {
@@ -69,6 +71,10 @@ interface CustomCommonParams {
 
 interface GroupCommonParams {}
 
+interface CodeEmbedCommonParams {
+  html: string;
+}
+
 interface VimeoEmbedCommonParams {
   play: 'on-hover' | 'on-click' | 'auto';
   controls: boolean;
@@ -99,6 +105,12 @@ interface GroupLayoutParams {
   opacity: number;
 }
 
+interface CodeEmbedLayoutParams {
+  areaAnchor: AreaAnchor;
+  opacity: number;
+  blur: number;
+}
+
 interface VimeoEmbedLayoutParams {
   radius: number;
   blur: number;
@@ -171,3 +183,4 @@ export type VimeoEmbedItem = Item<ArticleItemType.VimeoEmbed>;
 export type YoutubeEmbedItem = Item<ArticleItemType.YoutubeEmbed>;
 export type CustomItem = Item<ArticleItemType.Custom>;
 export type GroupItem = Item<ArticleItemType.Group>;
+export type CodeEmbedItem = Item<ArticleItemType.CodeEmbed>;

package/src/types/article/ItemArea.ts

@@ -9,7 +9,7 @@ export enum PositionType {
   ScreenBased = 'screen-based'
 }
 
-export enum ScaleAnchor {
+export enum AreaAnchor {
   TopLeft = 'top-left',
   TopCenter = 'top-center',
   TopRight = 'top-right',
@@ -31,5 +31,5 @@ export interface ItemArea {
   angle: number;
   anchorSide?: AnchorSide;
   scale: number;
-  scaleAnchor: ScaleAnchor;
+  scaleAnchor: AreaAnchor;
 }

package/src/types/article/ItemState.ts

@@ -17,6 +17,7 @@ export interface ItemHoverStatesMap {
   [ArticleItemType.YoutubeEmbed]: EmbedHoverStateParams;
   [ArticleItemType.Custom]: CustomHoverStateParams;
   [ArticleItemType.Group]: GroupHoverStateParams;
+  [ArticleItemType.CodeEmbed]: CodeEmbedHoverStateParams;
 }
 
 export interface HoverParams<T> {
@@ -60,6 +61,7 @@ export interface RectangleHoverStateParams extends ItemHoversBaseMap {
 
 export interface EmbedHoverStateParams extends ItemHoversBaseMap {
   radius?: HoverParams<number>;
+  opacity?: HoverParams<number>;
 }
 
 export interface CustomHoverStateParams extends ItemHoversBaseMap {}
@@ -67,3 +69,7 @@ export interface CustomHoverStateParams extends ItemHoversBaseMap {}
 export interface GroupHoverStateParams extends ItemHoversBaseMap {
   opacity?: HoverParams<number>;
 }
+
+export interface CodeEmbedHoverStateParams extends ItemHoversBaseMap {
+  opacity?: HoverParams<number>;
+}