@cntrl-site/sdk 1.2.2 → 1.3.0

package/lib/types/article/ItemState.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ArticleItemType_1 = require("./ArticleItemType");

package/lib/types/article/RichText.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextDecoration = exports.VerticalAlign = exports.TextTransform = exports.TextAlign = void 0;
+var TextAlign;
+(function (TextAlign) {
+    TextAlign["Left"] = "left";
+    TextAlign["Right"] = "right";
+    TextAlign["Center"] = "center";
+    TextAlign["Justify"] = "justify";
+})(TextAlign = exports.TextAlign || (exports.TextAlign = {}));
+var TextTransform;
+(function (TextTransform) {
+    TextTransform["None"] = "none";
+    TextTransform["Uppercase"] = "uppercase";
+    TextTransform["Lowercase"] = "lowercase";
+})(TextTransform = exports.TextTransform || (exports.TextTransform = {}));
+var VerticalAlign;
+(function (VerticalAlign) {
+    VerticalAlign["Super"] = "super";
+    VerticalAlign["Sub"] = "sub";
+    VerticalAlign["Unset"] = "unset";
+})(VerticalAlign = exports.VerticalAlign || (exports.VerticalAlign = {}));
+var TextDecoration;
+(function (TextDecoration) {
+    TextDecoration["Underline"] = "underline";
+    TextDecoration["None"] = "none";
+})(TextDecoration = exports.TextDecoration || (exports.TextDecoration = {}));

package/lib/types/article/Section.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionHeightMode = void 0;
+var SectionHeightMode;
+(function (SectionHeightMode) {
+    SectionHeightMode["ControlUnits"] = "control-units";
+    SectionHeightMode["ViewportHeightUnits"] = "viewport-height-units";
+})(SectionHeightMode = exports.SectionHeightMode || (exports.SectionHeightMode = {}));

package/lib/types/keyframe/Keyframe.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyframeType = void 0;
+var KeyframeType;
+(function (KeyframeType) {
+    KeyframeType["Dimensions"] = "dimensions";
+    KeyframeType["Position"] = "position";
+    KeyframeType["Rotation"] = "rotation";
+    KeyframeType["BorderRadius"] = "border-radius";
+    KeyframeType["BorderWidth"] = "border-width";
+    KeyframeType["Color"] = "color";
+    KeyframeType["BorderColor"] = "border-color";
+    KeyframeType["Opacity"] = "opacity";
+    KeyframeType["Scale"] = "scale";
+    KeyframeType["TextColor"] = "text-color";
+    KeyframeType["LetterSpacing"] = "letter-spacing";
+    KeyframeType["WordSpacing"] = "word-spacing";
+    KeyframeType["Blur"] = "blur";
+    KeyframeType["BackdropBlur"] = "backdrop-blur";
+})(KeyframeType = exports.KeyframeType || (exports.KeyframeType = {}));

package/lib/types/project/Fonts.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FontFileTypes = void 0;
+var FontFileTypes;
+(function (FontFileTypes) {
+    FontFileTypes["OTF"] = "otf";
+    FontFileTypes["TTF"] = "ttf";
+    FontFileTypes["WOFF"] = "woff";
+    FontFileTypes["WOFF2"] = "woff2";
+    FontFileTypes["EOT"] = "eot";
+})(FontFileTypes = exports.FontFileTypes || (exports.FontFileTypes = {}));

package/lib/types/project/Layout.js

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

package/lib/types/project/Meta.js

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

package/lib/types/project/Page.js

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

package/lib/types/project/Project.js

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

package/lib/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLayoutStyles = void 0;
+exports.getLayoutMediaQuery = exports.getLayoutStyles = void 0;
 function getLayoutStyles(layouts, layoutValues, mapToStyles) {
     const mediaQueries = layouts
         .sort((a, b) => a.startsWith - b.startsWith)
@@ -15,3 +15,17 @@ function getLayoutStyles(layouts, layoutValues, mapToStyles) {
     return mediaQueries;
 }
 exports.getLayoutStyles = getLayoutStyles;
+function getLayoutMediaQuery(layoutId, layouts) {
+    const sorted = layouts.slice().sort((a, b) => a.startsWith - b.startsWith);
+    const layoutIndex = sorted.findIndex(l => l.id === layoutId);
+    if (layoutIndex === -1) {
+        throw new Error(`No layout was found by the given id #${layoutId}`);
+    }
+    const current = sorted[layoutIndex];
+    const next = sorted[layoutIndex + 1];
+    if (!next) {
+        return `@media (min-width: ${current.startsWith}px)`;
+    }
+    return `@media (min-width: ${current.startsWith}px) and (max-width: ${next.startsWith - 1}px)`;
+}
+exports.getLayoutMediaQuery = getLayoutMediaQuery;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -27,7 +27,6 @@
     "lib": "lib"
   },
   "dependencies": {
-    "@cntrl-site/core": "^1.31.1",
     "@types/ejs": "^3.1.2",
     "@types/isomorphic-fetch": "^0.0.36",
     "commander": "^10.0.1",
@@ -35,7 +34,8 @@
     "ejs": "^3.1.9",
     "isomorphic-fetch": "^3.0.0",
     "ts-node": "^10.9.1",
-    "url": "^0.11.0"
+    "url": "^0.11.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@tsconfig/node16": "^1.0.3",

package/src/Client/Client.test.ts

@@ -1,7 +1,6 @@
 import { Client } from './Client';
 import { projectMock } from './__mock__/projectMock';
 import { articleMock } from './__mock__/articleMock';
-import { typePresetsMock } from './__mock__/typePresetsMock';
 import { keyframesMock } from './__mock__/keyframesMock';
 
 describe('Client', () => {
@@ -26,7 +25,6 @@ describe('Client', () => {
     const API_BASE_URL = 'api-test.cntrl.site';
     const fetchesMap = {
       [`https://${API_BASE_URL}/projects/${projectId}`]: projectMock,
-      [`https://${API_BASE_URL}/projects/${projectId}/type-presets`]: typePresetsMock,
       [`https://${API_BASE_URL}/projects/${projectId}/articles/articleId`]: {
         article: articleMock,
         keyframes: keyframesMock
@@ -45,10 +43,9 @@ describe('Client', () => {
     };
     const client = new Client(apiUrl, fetch);
     const pageData = await client.getPageData('/');
-    expect(fetchCalledTimes).toBe(3);
+    expect(fetchCalledTimes).toBe(2);
     expect(pageData.project).toEqual(projectMock);
     expect(pageData.article).toEqual(articleMock);
-    expect(pageData.typePresets).toEqual(typePresetsMock);
     expect(pageData.keyframes).toEqual(keyframesMock);
     expect(pageData.meta).toEqual({
       description: 'page description',
@@ -64,7 +61,6 @@ describe('Client', () => {
     const API_BASE_URL = 'api-test.cntrl.site';
     const fetchesMap = {
       [`https://${API_BASE_URL}/projects/${projectId}`]: projectMock,
-      [`https://${API_BASE_URL}/projects/${projectId}/type-presets`]: typePresetsMock,
       [`https://${API_BASE_URL}/projects/${projectId}/articles/articleId2`]: {
         article: articleMock,
         keyframes: keyframesMock

package/src/Client/Client.ts

@@ -1,19 +1,14 @@
-import {
-  TProject,
-  ProjectSchema,
-  TArticle,
-  ArticleSchema,
-  TMeta,
-  TPageMeta,
-  TTypePresets,
-  TypePresetsSchema,
-  TPage,
-  TKeyframeAny,
-  KeyframesSchema,
-  TLayout
-} from '@cntrl-site/core';
 import fetch from 'isomorphic-fetch';
 import { URL } from 'url';
+import { Meta } from '../types/project/Meta';
+import { Page, PageMeta } from '../types/project/Page';
+import { Project } from '../types/project/Project';
+import { Layout } from '../types/project/Layout';
+import { Article } from '../types/article/Article';
+import { KeyframeAny } from '../types/keyframe/Keyframe';
+import { ArticleSchema } from '../schemas/article/Article.schema';
+import { ProjectSchema } from '../schemas/project/Project.schema';
+import { KeyframesSchema } from '../schemas/keyframe/Keyframes.schema';
 
 export class Client {
   private url: URL;
@@ -30,7 +25,7 @@ export class Client {
     }
   }
 
-  private static getPageMeta(projectMeta: TMeta, pageMeta: TPageMeta): TMeta {
+  private static getPageMeta(projectMeta: Meta, pageMeta: PageMeta): Meta {
     return pageMeta.enabled ? {
       title: pageMeta.title ? pageMeta.title : projectMeta.title ?? '',
       description: pageMeta.description ? pageMeta.description : projectMeta.description ?? '',
@@ -44,15 +39,11 @@ export class Client {
     try {
       const project = await this.fetchProject();
       const articleId = this.findArticleIdByPageSlug(pageSlug, project.pages);
-      const [{ article, keyframes }, typePresets] = await Promise.all([
-        this.fetchArticle(articleId),
-        this.fetchTypePresets()
-      ]);
+      const { article, keyframes } = await this.fetchArticle(articleId);
       const page = project.pages.find(page => page.slug === pageSlug)!;
       const meta = Client.getPageMeta(project.meta, page?.meta!);
       return {
         project,
-        typePresets,
         article,
         keyframes,
         meta
@@ -71,7 +62,7 @@ export class Client {
     }
   }
 
-  async getLayouts(): Promise<TLayout[]> {
+  async getLayouts(): Promise<Layout[]> {
     try {
       const { layouts } = await this.fetchProject();
       return layouts;
@@ -80,12 +71,7 @@ export class Client {
     }
   }
 
-  async getTypePresets(): Promise<TTypePresets> {
-    const response = await this.fetchTypePresets();
-    return response;
-  }
-
-  private async fetchProject(): Promise<TProject> {
+  private async fetchProject(): Promise<Project> {
     const { username: projectId, password: apiKey, origin } = this.url;
     const url = new URL(`/projects/${projectId}`, origin);
     const response = await this.fetchImpl(url.href, {
@@ -118,25 +104,7 @@ export class Client {
     return { article, keyframes };
   }
 
-  private async fetchTypePresets(): Promise<TTypePresets> {
-    const { username: projectId, password: apiKey, origin } = this.url;
-    const url = new URL(`/projects/${projectId}/type-presets`, origin);
-    const response = await this.fetchImpl(url.href, {
-      headers: {
-        Authorization: `Bearer ${apiKey}`
-      }
-    });
-    if (!response.ok) {
-      throw new Error(
-        `Failed to fetch type presets for the project with id #${projectId}: ${response.statusText}`
-      );
-    }
-    const data = await response.json();
-    const typePresets = TypePresetsSchema.parse(data);
-    return typePresets;
-  }
-
-  private findArticleIdByPageSlug(slug: string, pages: TPage[]): string {
+  private findArticleIdByPageSlug(slug: string, pages: Page[]): string {
     const { username: projectId } = this.url;
     const page = pages.find((page) => page.slug === slug);
     if (!page) {
@@ -154,11 +122,10 @@ interface FetchImplResponse {
 
 type FetchImpl = (url: string, init?: RequestInit) => Promise<FetchImplResponse>;
 interface ArticleData {
-  article: TArticle;
-  keyframes: TKeyframeAny[];
+  article: Article;
+  keyframes: KeyframeAny[];
 }
 interface CntrlPageData extends ArticleData {
-  project: TProject;
-  typePresets: TTypePresets;
-  meta: TMeta;
+  project: Project;
+  meta: Meta;
 }

package/src/Client/__mock__/articleMock.ts

@@ -1,6 +1,6 @@
-import { TArticle } from '@cntrl-site/core';
+import { Article } from '../../types/article/Article';
 
-export const articleMock: TArticle = {
+export const articleMock: Article = {
   id: 'articleId',
   sections: [
     {

package/src/Client/__mock__/keyframesMock.ts

@@ -1,9 +1,8 @@
-import { KeyframeType, TKeyframeAny } from '@cntrl-site/core';
+import { KeyframeAny, KeyframeType } from '../../types/keyframe/Keyframe';
 
-export const keyframesMock: TKeyframeAny[] = [
+export const keyframesMock: KeyframeAny[] = [
   {
     id: 'keyframeId',
-    articleId: 'articleId',
     type: KeyframeType.Color,
     position: 100,
     value: {

package/src/Client/__mock__/projectMock.ts

@@ -1,6 +1,6 @@
-import { TProject } from '@cntrl-site/core';
+import { Project } from '../../types/project/Project';
 
-export const projectMock: TProject = {
+export const projectMock: Project = {
   id: 'projectId',
   layouts: [],
   fonts: {
@@ -20,15 +20,11 @@ export const projectMock: TProject = {
     keywords: 'project keywords',
     description: 'project description'
   },
-  grid: {
-    color: 'rgba(0, 0, 0, 1)'
-  },
   pages: [{
     id: 'pageId',
     title: 'Page',
     articleId: 'articleId',
     slug: '/',
-    isPublished: true,
     meta: {
       opengraphThumbnail: 'page thumbnail',
       title: 'page title',
@@ -42,7 +38,6 @@ export const projectMock: TProject = {
       title: 'Page 2',
       articleId: 'articleId2',
       slug: '/2',
-      isPublished: true,
       meta: {
         opengraphThumbnail: 'page thumbnail',
         title: 'page title',

package/src/FontFaceGenerator/FontFaceGenerator.test.ts

@@ -1,14 +1,13 @@
 import { FontFaceGenerator } from './FontFaceGenerator';
-import { FontFileTypes, TCustomFont } from '@cntrl-site/core';
+import { CustomFont, FontFileTypes } from '../types/project/Fonts';
 
 describe('FontFaceGenerator', () => {
   it('generates font face with eot', () => {
-    const fonts: TCustomFont[] = [
+    const fonts: CustomFont[] = [
       {
         name: 'Aeonik',
         weight: 400,
         style: 'normal',
-        readonly: false,
         files: [
           {
             type: FontFileTypes.EOT,
@@ -24,7 +23,6 @@ describe('FontFaceGenerator', () => {
         name: 'Anek Odia',
         weight: 700,
         style: 'italic',
-        readonly: false,
         files: [
           {
             type: FontFileTypes.WOFF,

package/src/FontFaceGenerator/FontFaceGenerator.ts

@@ -1,4 +1,4 @@
-import { TCustomFont } from '@cntrl-site/core';
+import { CustomFont } from '../types/project/Fonts';
 
 const FILE_TYPES_MAP: Record<string, string> = {
   ttf: 'truetype',
@@ -7,7 +7,7 @@ const FILE_TYPES_MAP: Record<string, string> = {
 
 export class FontFaceGenerator {
   constructor(
-    private fonts: TCustomFont[]
+    private fonts: CustomFont[]
   ) {}
 
   generate(): string {

package/src/cli.ts

@@ -5,8 +5,8 @@ import path from 'path';
 import ejs from 'ejs';
 import { config } from 'dotenv';
 import { program } from 'commander';
-import { TLayout } from '@cntrl-site/core';
 import { Client } from './Client/Client';
+import { Layout } from './types/project/Layout';
 
 program
   .command('generate-layouts')
@@ -38,7 +38,7 @@ program
     }
   });
 
-function convertLayouts(layouts: TLayout[], maxLayoutWidth: number = Number.MAX_SAFE_INTEGER): LayoutRange[] {
+function convertLayouts(layouts: Layout[], maxLayoutWidth: number = Number.MAX_SAFE_INTEGER): LayoutRange[] {
   const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
   const mapped = sorted.map<LayoutRange>((layout, i, ls) => {
     const next = ls[i + 1];

package/src/index.ts

@@ -1,4 +1,27 @@
+// logic
 export { Client as CntrlClient } from './Client/Client';
 export { FontFaceGenerator } from './FontFaceGenerator/FontFaceGenerator';
-export { getLayoutStyles } from './utils';
-export * from '@cntrl-site/core';
+export { getLayoutStyles, getLayoutMediaQuery } from './utils';
+
+// enums
+export { SectionHeightMode } from './types/article/Section';
+export { TextAlign, TextDecoration, TextTransform, VerticalAlign } from './types/article/RichText';
+export { ArticleItemType } from './types/article/ArticleItemType';
+export { ScaleAnchor, AnchorSide } from './types/article/ItemArea';
+export { KeyframeType } from './types/keyframe/Keyframe';
+
+// types
+export type { Article } from './types/article/Article';
+export type { Section, SectionHeight } from './types/article/Section';
+export type {
+  Item, ImageItem, ItemAny, CustomItem, ItemCommonParamsMap,
+  ItemLayoutParamsMap, RectangleItem, StickyParams, VideoItem, RichTextItem,
+  Link, VimeoEmbedItem, YoutubeEmbedItem
+} 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 { Layout } from './types/project/Layout';
+export type { Project } from './types/project/Project';
+export type { Meta } from './types/project/Meta';
+export type { KeyframeValueMap, KeyframeAny } from './types/keyframe/Keyframe';

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

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

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

@@ -0,0 +1,175 @@
+import { z, ZodType } from 'zod';
+import {
+  CustomItem,
+  ImageItem,
+  RectangleItem,
+  VideoItem,
+  VimeoEmbedItem,
+  YoutubeEmbedItem
+} from '../../types/article/Item';
+import {
+  CustomItemHoverStateParamsSchema,
+  EmbedHoverStateParamsSchema, MediaHoverStateParamsSchema,
+  RectangleHoverStateParamsSchema
+} from './ItemState.schema';
+import { RichTextItemSchema } from './RichTextItem.schema';
+import { ItemBaseSchema } from './ItemBase.schema';
+import { ArticleItemType } from '../../types/article/ArticleItemType';
+
+const ImageItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.Image),
+  commonParams: z.object({
+    url: z.string().min(1)
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable(),
+  ),
+  layoutParams: z.record(
+    z.object({
+      opacity: z.number().nonnegative(),
+      radius: z.number(),
+      strokeWidth: z.number(),
+      strokeColor: z.string(),
+      blur: z.number()
+    })
+  ),
+  state: z.object({
+    hover: z.record(MediaHoverStateParamsSchema)
+  })
+}) satisfies ZodType<ImageItem>;
+
+const VideoItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.Video),
+  commonParams: z.object({
+    url: z.string().min(1)
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable(),
+  ),
+  layoutParams: z.record(
+    z.object({
+      autoplay: z.boolean(),
+      opacity: z.number().nonnegative(),
+      radius: z.number(),
+      strokeWidth: z.number(),
+      strokeColor: z.string(),
+      blur: z.number()
+    })
+  ),
+  state: z.object({
+    hover: z.record(MediaHoverStateParamsSchema)
+  })
+}) satisfies ZodType<VideoItem>;
+
+const RectangleItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.Rectangle),
+  commonParams: z.object({
+    ratioLock: z.boolean()
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable(),
+  ),
+  layoutParams: z.record(
+    z.object({
+      radius: z.number(),
+      strokeWidth: z.number(),
+      fillColor: z.string().min(1),
+      strokeColor: z.string().min(1),
+      blur: z.number(),
+      backdropBlur: z.number(),
+      blurMode: z.enum(['default', 'backdrop'])
+    })
+  ),
+  state: z.object({
+    hover: z.record(RectangleHoverStateParamsSchema)
+  })
+}) satisfies ZodType<RectangleItem>;
+
+const CustomItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.Custom),
+  commonParams: z.object({
+    name: z.string()
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable(),
+  ),
+  layoutParams: z.record(z.object({})),
+  state: z.object({
+    hover: z.record(CustomItemHoverStateParamsSchema)
+  })
+}) satisfies ZodType<CustomItem>;
+
+const VimeoEmbedItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.VimeoEmbed),
+  commonParams: z.object({
+    play: z.union([z.literal('on-hover'), z.literal('on-click'), z.literal('auto')]),
+    controls: z.boolean(),
+    loop: z.boolean(),
+    muted: z.boolean(),
+    pictureInPicture: z.boolean(),
+    url: z.string().min(1),
+    ratioLock: z.boolean()
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable(),
+  ),
+  layoutParams: z.record(
+    z.object({
+      radius: z.number(),
+      blur: z.number()
+    })
+  ),
+  state: z.object({
+    hover: z.record(EmbedHoverStateParamsSchema)
+  })
+}) satisfies ZodType<VimeoEmbedItem>;
+
+const YoutubeEmbedItemSchema = ItemBaseSchema.extend({
+  type: z.literal(ArticleItemType.YoutubeEmbed),
+  commonParams: z.object({
+    play: z.enum(['on-hover', 'on-click', 'auto']),
+    controls: z.boolean(),
+    loop: z.boolean(),
+    url: z.string().min(1)
+  }),
+  sticky: z.record(
+    z.object({
+      from: z.number(),
+      to: z.number().optional()
+    }).nullable(),
+  ),
+  layoutParams: z.record(
+    z.object({
+      radius: z.number(),
+      blur: z.number()
+    })
+  ),
+  state: z.object({
+    hover: z.record(EmbedHoverStateParamsSchema)
+  })
+}) satisfies ZodType<YoutubeEmbedItem>;
+
+export const ItemSchema = z.discriminatedUnion('type', [
+  ImageItemSchema,
+  VideoItemSchema,
+  RectangleItemSchema,
+  CustomItemSchema,
+  RichTextItemSchema,
+  VimeoEmbedItemSchema,
+  YoutubeEmbedItemSchema
+]);

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

@@ -0,0 +1,14 @@
+import { z } from 'zod';
+import { AnchorSide, ScaleAnchor } from '../../types/article/ItemArea';
+
+export const ItemAreaSchema = z.object({
+  top: z.number(),
+  left: z.number(),
+  width: z.number(),
+  height: z.number(),
+  zIndex: z.number(),
+  angle: z.number(),
+  anchorSide: z.nativeEnum(AnchorSide).optional(),
+  scale: z.number().nonnegative(),
+  scaleAnchor: z.nativeEnum(ScaleAnchor)
+});

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

@@ -0,0 +1,20 @@
+import { z } from 'zod';
+import { ItemAreaSchema } from './ItemArea.schema';
+
+export const Link = z.object({
+  url: z.string().min(1),
+  target: z.string().min(1)
+});
+
+const CommonParamsBase = z.object({
+  sizing: z.string().min(1)
+});
+
+export const ItemBaseSchema = z.object({
+  id: z.string().min(1),
+  area: z.record(ItemAreaSchema),
+  hidden: z.record(z.boolean()),
+  link: Link.optional(),
+  commonParams: CommonParamsBase,
+  layoutParams: z.record(z.any()).optional()
+});