@cntrl-site/sdk-nextjs 1.9.78 → 1.9.80

package/lib/components/items/RichTextItem/RichTextItem.js

@@ -60,28 +60,28 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     }, [isInteractive, onVisibilityChange]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                         const color = color_1.CntrlColor.parse(layoutParams.color);
-                        return (`
-            .rich-text-wrapper-${item.id} {
-              font-size: ${layoutParams.fontSize * 100}vw;
-              line-height: ${layoutParams.lineHeight * 100}vw;
-              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
-              word-spacing: ${layoutParams.wordSpacing * 100}vw;
-              font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
-              font-weight: ${layoutParams.fontWeight};
-              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
-              vertical-align: ${layoutParams.verticalAlign};
-              font-variant: ${layoutParams.fontVariant};
-              color: ${color.fmt('rgba')};
-              transform: rotate(${area.angle}deg);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              text-transform: ${layoutParams.textTransform};
-              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-            }
-            @supports not (color: oklch(42% 0.3 90 / 1)) {
-              .rich-text-wrapper-${item.id} {
-                color: ${color.fmt('rgba')};
-              }
-            }
+                        return (`
+            .rich-text-wrapper-${item.id} {
+              font-size: ${layoutParams.fontSize * 100}vw;
+              line-height: ${layoutParams.lineHeight * 100}vw;
+              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
+              word-spacing: ${layoutParams.wordSpacing * 100}vw;
+              font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
+              font-weight: ${layoutParams.fontWeight};
+              font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
+              vertical-align: ${layoutParams.verticalAlign};
+              font-variant: ${layoutParams.fontVariant};
+              color: ${color.fmt('rgba')};
+              transform: rotate(${area.angle}deg);
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
+              text-transform: ${layoutParams.textTransform};
+              ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+            }
+            @supports not (color: oklch(42% 0.3 90 / 1)) {
+              .rich-text-wrapper-${item.id} {
+                color: ${color.fmt('rgba')};
+              }
+            }
           `);
                     })}`] })] }));
 };

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -61,13 +61,13 @@ class RichTextConverter {
                 const kids = [];
                 layouts.forEach(l => {
                     const ta = richText.layoutParams[l.id].textAlign;
-                    styleRules[l.id].push(`
-            .${blockClass} {
-              display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
-              text-align: ${ta};
-              white-space: pre-wrap;
-              overflow-wrap: break-word;
-            }
+                    styleRules[l.id].push(`
+            .${blockClass} {
+              display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
+              text-align: ${ta};
+              white-space: pre-wrap;
+              overflow-wrap: break-word;
+            }
           `);
                 });
                 const item = group[0];
@@ -111,18 +111,18 @@ class RichTextConverter {
                             if (lineHeight === null || lineHeight === void 0 ? void 0 : lineHeight.value) {
                                 currentLineHeight[item.layout] = lineHeight.value;
                             }
-                            styleRules[item.layout].push(`
-                .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
-                }
+                            styleRules[item.layout].push(`
+                .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                  ${styleGroup.styles.map(s => RichTextConverter.fromRangeStylesToInline(s, exemplary)).join('\n')}
+                }
               `);
                             if (color) {
-                                styleRules[item.layout].push(`
-                @supports not (color: oklch(42% 0.3 90 / 1)) {
-                  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
-                    color: ${color_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
-                  }
-                }
+                                styleRules[item.layout].push(`
+                @supports not (color: oklch(42% 0.3 90 / 1)) {
+                  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                    color: ${color_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
+                  }
+                }
               `);
                             }
                         }
@@ -131,10 +131,10 @@ class RichTextConverter {
                 root.push((0, jsx_runtime_1.jsx)("div", { className: blockClass, children: kids }, blockClass));
             }
         }
-        const styles = layouts.map(l => `
-      ${(0, sdk_1.getLayoutMediaQuery)(l.id, layouts)} {
-        ${styleRules[l.id].join('\n')}
-      }
+        const styles = layouts.map(l => `
+      ${(0, sdk_1.getLayoutMediaQuery)(l.id, layouts)} {
+        ${styleRules[l.id].join('\n')}
+      }
     `).join('\n');
         return [
             root,

package/package.json

@@ -1,62 +1,62 @@
-{
-  "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.78",
-  "description": "SDK for Next.js",
-  "author": "arsen@momdesign.nyc",
-  "license": "MIT",
-  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cntrl-site/sdk-nextjs.git"
-  },
-  "bugs": {
-    "url": "https://github.com/cntrl-site/sdk-nextjs/issues"
-  },
-  "main": "lib/index.js",
-  "types": "src/index.ts",
-  "scripts": {
-    "test": "jest",
-    "prebuild": "rimraf ./lib",
-    "build": "tsc --project tsconfig.build.json",
-    "build:watch": "tsc --watch --project tsconfig.build.json",
-    "prepublishOnly": "cross-env NODE_ENV=production npm run build"
-  },
-  "peerDependencies": {
-    "@types/lodash.isequal": "^4.5.6",
-    "lodash.isequal": "^4.5.0",
-    "next": "^14.2.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "dependencies": {
-    "@antfu/eslint-config": "^3.8.0",
-    "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^1.0.20",
-    "@cntrl-site/effects": "^1.4.2",
-    "@cntrl-site/sdk": "^1.28.0",
-    "@types/vimeo__player": "^2.18.0",
-    "@vimeo/player": "^2.25.0",
-    "html-react-parser": "^3.0.1",
-    "resize-observer-polyfill": "^1.5.1",
-    "styled-jsx": "^5.0.2"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
-    "@tsconfig/node16": "^1.0.3",
-    "@tsconfig/recommended": "^1.0.1",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^18.11.7",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.3.7",
-    "cross-env": "^10.1.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "rimraf": "^6.0.1",
-    "ts-jest": "^29.0.3",
-    "typescript": "^5.2.2"
-  },
-  "directories": {
-    "lib": "lib"
-  }
-}
+{
+  "name": "@cntrl-site/sdk-nextjs",
+  "version": "1.9.80",
+  "description": "SDK for Next.js",
+  "author": "arsen@momdesign.nyc",
+  "license": "MIT",
+  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cntrl-site/sdk-nextjs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cntrl-site/sdk-nextjs/issues"
+  },
+  "main": "lib/index.js",
+  "types": "src/index.ts",
+  "scripts": {
+    "test": "jest",
+    "prebuild": "rimraf ./lib",
+    "build": "tsc --project tsconfig.build.json",
+    "build:watch": "tsc --watch --project tsconfig.build.json",
+    "prepublishOnly": "cross-env NODE_ENV=production npm run build"
+  },
+  "peerDependencies": {
+    "@types/lodash.isequal": "^4.5.6",
+    "lodash.isequal": "^4.5.0",
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@antfu/eslint-config": "^3.8.0",
+    "@cntrl-site/color": "^1.0.0",
+    "@cntrl-site/components": "^1.0.23",
+    "@cntrl-site/effects": "^1.4.2",
+    "@cntrl-site/sdk": "^1.28.0",
+    "@types/vimeo__player": "^2.18.0",
+    "@vimeo/player": "^2.25.0",
+    "html-react-parser": "^3.0.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "styled-jsx": "^5.0.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@tsconfig/node16": "^1.0.3",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.3.7",
+    "cross-env": "^10.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "rimraf": "^6.0.1",
+    "ts-jest": "^29.0.3",
+    "typescript": "^5.2.2"
+  },
+  "directories": {
+    "lib": "lib"
+  }
+}

package/src/ItemGeometry/CSSPropertyNameMap.ts

@@ -1,37 +1,37 @@
-import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
-
-export const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
-  width: 'width',
-  height: 'height',
-  top: 'top',
-  left: 'left',
-  scale: 'transform',
-  angle: 'transform',
-  opacity: 'opacity',
-  radius: 'border-radius',
-  strokeWidth: 'border-width',
-  strokeFill: 'border-color',
-  fill: 'background',
-  blur: 'filter',
-  backdropBlur: 'backdrop-filter',
-  letterSpacing: 'letter-spacing',
-  wordSpacing: 'word-spacing',
-  color: 'color'
-};
-
-const PropertyNameCSSMap: Record<string, string[]> = {
-  'transform': ['angle', 'scale'],
-  'border-radius': ['radius'],
-  'border-width': ['strokeWidth'],
-  'border-color': ['strokeFill'],
-  'background': ['fill'],
-  'filter': ['blur'],
-  'backdrop-filter': ['backdrop-blur'],
-  'letter-spacing': ['letterSpacing'],
-  'word-spacing': ['wordSpacing'],
-};
-
-export function getStyleKeysFromCSSProperty(cssProp: string): string[] {
-  const key = PropertyNameCSSMap[cssProp] ?? [cssProp];
-  return key;
-}
+import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
+
+export const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
+  width: 'width',
+  height: 'height',
+  top: 'top',
+  left: 'left',
+  scale: 'transform',
+  angle: 'transform',
+  opacity: 'opacity',
+  radius: 'border-radius',
+  strokeWidth: 'border-width',
+  strokeFill: 'border-color',
+  fill: 'background',
+  blur: 'filter',
+  backdropBlur: 'backdrop-filter',
+  letterSpacing: 'letter-spacing',
+  wordSpacing: 'word-spacing',
+  color: 'color'
+};
+
+const PropertyNameCSSMap: Record<string, string[]> = {
+  'transform': ['angle', 'scale'],
+  'border-radius': ['radius'],
+  'border-width': ['strokeWidth'],
+  'border-color': ['strokeFill'],
+  'background': ['fill'],
+  'filter': ['blur'],
+  'backdrop-filter': ['backdrop-blur'],
+  'letter-spacing': ['letterSpacing'],
+  'word-spacing': ['wordSpacing'],
+};
+
+export function getStyleKeysFromCSSProperty(cssProp: string): string[] {
+  const key = PropertyNameCSSMap[cssProp] ?? [cssProp];
+  return key;
+}

package/src/ItemGeometry/GenericGeometryController.ts

@@ -1,59 +1,59 @@
-import { Rect } from '@cntrl-site/sdk';
-import { ItemGeometryController } from './ItemGeometryController';
-
-type GeomtryRegistry = {
-  getControllerById: (itemId: string) => ItemGeometryController;
-};
-
-export class GenericGeometryController implements ItemGeometryController {
-  private scale: number = 1;
-  private parentId?: string;
-  private offsetParent: HTMLElement | null = null;
-  private angle: number = 0;
-  private registry: GeomtryRegistry | undefined;
-
-  constructor(
-    private container: HTMLElement
-  ) { }
-
-  setRegistry(registry: GeomtryRegistry) {
-    this.registry = registry;
-  }
-
-  setParentId(parentId?: string) {
-    this.parentId = parentId;
-  }
-
-  getParentId(): string | undefined {
-    return this.parentId;
-  }
-
-  getBoundary(): Rect {
-    const rect = this.container.getBoundingClientRect();
-    return Rect.fromObject(rect);
-  }
-
-  getContentBoundary(): Rect {
-    return this.getBoundary();
-  }
-
-  setScale(scale: number): void {
-    this.scale = scale;
-  }
-
-  setAngle(angle: number) {
-    this.angle = angle;
-  }
-
-  setOptions(options?: unknown) {
-
-  }
-
-  getAngle(): number {
-    return 0;
-  }
-
-  getScale() {
-    return 1;
-  }
-}
+import { Rect } from '@cntrl-site/sdk';
+import { ItemGeometryController } from './ItemGeometryController';
+
+type GeomtryRegistry = {
+  getControllerById: (itemId: string) => ItemGeometryController;
+};
+
+export class GenericGeometryController implements ItemGeometryController {
+  private scale: number = 1;
+  private parentId?: string;
+  private offsetParent: HTMLElement | null = null;
+  private angle: number = 0;
+  private registry: GeomtryRegistry | undefined;
+
+  constructor(
+    private container: HTMLElement
+  ) { }
+
+  setRegistry(registry: GeomtryRegistry) {
+    this.registry = registry;
+  }
+
+  setParentId(parentId?: string) {
+    this.parentId = parentId;
+  }
+
+  getParentId(): string | undefined {
+    return this.parentId;
+  }
+
+  getBoundary(): Rect {
+    const rect = this.container.getBoundingClientRect();
+    return Rect.fromObject(rect);
+  }
+
+  getContentBoundary(): Rect {
+    return this.getBoundary();
+  }
+
+  setScale(scale: number): void {
+    this.scale = scale;
+  }
+
+  setAngle(angle: number) {
+    this.angle = angle;
+  }
+
+  setOptions(options?: unknown) {
+
+  }
+
+  getAngle(): number {
+    return 0;
+  }
+
+  getScale() {
+    return 1;
+  }
+}

package/src/ItemGeometry/ItemGeometryContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from "react";
-import { ItemGeometryService } from "./ItemGeometryService";
-
-export const ItemGeometryContext = createContext(new ItemGeometryService());
+import { createContext } from "react";
+import { ItemGeometryService } from "./ItemGeometryService";
+
+export const ItemGeometryContext = createContext(new ItemGeometryService());

package/src/ItemGeometry/ItemGeometryController.ts

@@ -1,22 +1,22 @@
-import { Rect } from '@cntrl-site/sdk';
-
-export interface GeometryControllerCtor {
-  new (element: HTMLElement): ItemGeometryController;
-}
-
-interface Registry {
-  getControllerById(itemId: string): ItemGeometryController;
-}
-
-export interface ItemGeometryController {
-  getBoundary(isRotatedBoundary?: boolean): Rect;
-  getContentBoundary(isRotatedBoundary?: boolean): Rect;
-  getScale(): number;
-  setScale(scale: number): void;
-  setAngle(angle: number): void;
-  setRegistry(regisrty: Registry): void;
-  setOptions(options?: unknown): void;
-  setParentId(parentId?: string): void;
-  getParentId(): string | undefined;
-  getAngle(): number;
-}
+import { Rect } from '@cntrl-site/sdk';
+
+export interface GeometryControllerCtor {
+  new (element: HTMLElement): ItemGeometryController;
+}
+
+interface Registry {
+  getControllerById(itemId: string): ItemGeometryController;
+}
+
+export interface ItemGeometryController {
+  getBoundary(isRotatedBoundary?: boolean): Rect;
+  getContentBoundary(isRotatedBoundary?: boolean): Rect;
+  getScale(): number;
+  setScale(scale: number): void;
+  setAngle(angle: number): void;
+  setRegistry(regisrty: Registry): void;
+  setOptions(options?: unknown): void;
+  setParentId(parentId?: string): void;
+  getParentId(): string | undefined;
+  getAngle(): number;
+}

package/src/ItemGeometry/ItemGeometryService.ts

@@ -1,34 +1,34 @@
-import { Rect } from '@cntrl-site/sdk';
-import { ItemGeometryController } from './ItemGeometryController';
-
-export class ItemGeometryService {
-  private registry: Map<string, ItemGeometryController> = new Map();
-
-  register(itemId: string, controller: ItemGeometryController): () => void {
-    this.registry.set(itemId, controller);
-    controller.setRegistry(this);
-    return () => {
-      this.registry.delete(itemId);
-    };
-  }
-
-  getItemBoundary(itemId: string) {
-    const controller = this.registry.get(itemId);
-    if (!controller) {
-      return new Rect(0, 0, 0, 0);
-    }
-    return controller.getContentBoundary();
-  }
-
-  getControllerById(itemId: string): ItemGeometryController {
-    const controller = this.registry.get(itemId);
-    if (!controller) {
-      throw new ReferenceError(`There is no registred contoller for item w/ id ${itemId}`);
-    }
-    return controller;
-  }
-
-  hasItem(itemId: string): boolean {
-    return this.registry.has(itemId);
-  }
-}
+import { Rect } from '@cntrl-site/sdk';
+import { ItemGeometryController } from './ItemGeometryController';
+
+export class ItemGeometryService {
+  private registry: Map<string, ItemGeometryController> = new Map();
+
+  register(itemId: string, controller: ItemGeometryController): () => void {
+    this.registry.set(itemId, controller);
+    controller.setRegistry(this);
+    return () => {
+      this.registry.delete(itemId);
+    };
+  }
+
+  getItemBoundary(itemId: string) {
+    const controller = this.registry.get(itemId);
+    if (!controller) {
+      return new Rect(0, 0, 0, 0);
+    }
+    return controller.getContentBoundary();
+  }
+
+  getControllerById(itemId: string): ItemGeometryController {
+    const controller = this.registry.get(itemId);
+    if (!controller) {
+      throw new ReferenceError(`There is no registred contoller for item w/ id ${itemId}`);
+    }
+    return controller;
+  }
+
+  hasItem(itemId: string): boolean {
+    return this.registry.has(itemId);
+  }
+}