@cntrl-site/components 0.0.1

package/dist/sdk-nextjs/utils/Animator/Animator.d.ts

@@ -0,0 +1,43 @@
+import { KeyframeType, KeyframeValueMap } from '../../../sdk/types/keyframe/Keyframe';
+import { FillLayer } from '../../../sdk/types/article/Item';
+export interface AnimationData<T extends KeyframeType> {
+    position: number;
+    value: KeyframeValueMap[T];
+    type: T;
+}
+interface PositionKeyframes<T extends KeyframeType> {
+    start: AnimationData<T>;
+    end: AnimationData<T>;
+}
+export type KeyframesMap = {
+    [T in KeyframeType]: AnimationData<T>[];
+};
+export declare class Animator {
+    private keyframes;
+    private static pushKeyframeToMap;
+    private keyframesMap;
+    constructor(keyframes: AnimationData<KeyframeType>[]);
+    getFXParams(valuesMap: Record<string, number>, pos: number): KeyframeValueMap[KeyframeType.FXParams];
+    getDimensions(values: KeyframeValueMap[KeyframeType.Dimensions], pos: number): KeyframeValueMap[KeyframeType.Dimensions];
+    getPositions(values: KeyframeValueMap[KeyframeType.Position], pos: number): KeyframeValueMap[KeyframeType.Position];
+    getBorderFill(values: KeyframeValueMap[KeyframeType.BorderFill], pos: number): FillLayer[];
+    getFill(values: KeyframeValueMap[KeyframeType.Fill], pos: number): FillLayer[];
+    getRadius(values: KeyframeValueMap[KeyframeType.BorderRadius], pos: number): KeyframeValueMap[KeyframeType.BorderRadius];
+    getBorderWidth(values: KeyframeValueMap[KeyframeType.BorderWidth], pos: number): KeyframeValueMap[KeyframeType.BorderWidth];
+    getRotation(values: KeyframeValueMap[KeyframeType.Rotation], pos: number): KeyframeValueMap[KeyframeType.Rotation];
+    getOpacity(values: KeyframeValueMap[KeyframeType.Opacity], pos: number): KeyframeValueMap[KeyframeType.Opacity];
+    getScale(values: KeyframeValueMap[KeyframeType.Scale], pos: number): KeyframeValueMap[KeyframeType.Scale];
+    getBlur(values: KeyframeValueMap[KeyframeType.Blur], pos: number): KeyframeValueMap[KeyframeType.Blur];
+    getBackdropBlur(values: KeyframeValueMap[KeyframeType.BackdropBlur], pos: number): KeyframeValueMap[KeyframeType.BackdropBlur];
+    getTextColor(values: KeyframeValueMap[KeyframeType.TextColor], pos: number): KeyframeValueMap[KeyframeType.TextColor];
+    getLetterSpacing(values: KeyframeValueMap[KeyframeType.LetterSpacing], pos: number): KeyframeValueMap[KeyframeType.LetterSpacing];
+    getWordSpacing(values: KeyframeValueMap[KeyframeType.WordSpacing], pos: number): KeyframeValueMap[KeyframeType.WordSpacing];
+    getStartEnd<T extends KeyframeType>(position: number, keyframes: AnimationData<T>[]): PositionKeyframes<T>;
+    private fillKeyframesMap;
+    private getRangeColor;
+    private getRangeGradient;
+    private interpolateFillLayerArray;
+    private interpolateFillLayer;
+    private interpolateColorStops;
+}
+export {};

package/dist/sdk-nextjs/utils/ArticleRectManager/ArticleRectObserver.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../EventEmitter';
+interface EventMap {
+    'scroll': undefined;
+    'resize': DOMRect;
+}
+export declare class ArticleRectObserver extends EventEmitter<EventMap> {
+    private resizeObserver;
+    private articleWidth;
+    private registry;
+    private scrollPos;
+    private animationFrame;
+    private parent;
+    private sectionsScrollMap;
+    constructor();
+    get scroll(): number;
+    getSectionScroll(sectionId: string): number;
+    getSectionTop(sectionId: string): number;
+    get width(): number;
+    private setScroll;
+    init(parent: HTMLElement): () => void;
+    register(el: HTMLElement, sectionId: string): () => void;
+    private handleScroll;
+    private handleResize;
+}
+export {};

package/dist/sdk-nextjs/utils/ArticleRectManager/useArticleRectObserver.d.ts

@@ -0,0 +1,2 @@
+import { ArticleRectObserver } from './ArticleRectObserver';
+export declare const useArticleRectObserver: (el?: HTMLElement | null) => ArticleRectObserver | null;

package/dist/sdk-nextjs/utils/ArticleRectManager/useSectionRegistry.d.ts

@@ -0,0 +1 @@
+export declare const useSectionRegistry: (sectionId: string, el?: HTMLElement | null) => void;

package/dist/sdk-nextjs/utils/EventEmitter.d.ts

@@ -0,0 +1,11 @@
+export type Listener<P> = (payload: P) => void;
+type Listeners<EventMap> = {
+    [E in keyof (EventMap)]?: Listener<EventMap[E]>[];
+};
+export declare abstract class EventEmitter<EventMap> {
+    protected listeners: Listeners<EventMap>;
+    on<E extends (keyof EventMap)>(event: E, listener: Listener<EventMap[E]>): () => void;
+    off<E extends (keyof EventMap)>(event: E, listener: Listener<EventMap[E]>): void;
+    protected emit<E extends (keyof EventMap)>(event: E, payload: EventMap[E]): void;
+}
+export {};

package/dist/sdk-nextjs/utils/RichTextConverter/RichTextConverter.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { Layout } from '../../../sdk/types/project/Layout';
+import { RichTextItem } from '../../../sdk/types/article/Item';
+export declare const FontStyles: Record<string, Record<string, string>>;
+export declare class RichTextConverter {
+    toHtml(richText: RichTextItem, layouts: Layout[]): [ReactNode[], string];
+    private serializeRanges;
+    private normalizeStyles;
+    private groupEntities;
+    private static fromRangeStylesToInline;
+}

package/dist/sdk-nextjs/utils/ScaleAnchorMap.d.ts

@@ -0,0 +1,11 @@
+export declare const ScaleAnchorMap: {
+    "top-left": string;
+    "top-center": string;
+    "top-right": string;
+    "middle-left": string;
+    "middle-center": string;
+    "middle-right": string;
+    "bottom-left": string;
+    "bottom-center": string;
+    "bottom-right": string;
+};

package/dist/sdk-nextjs/utils/StickyManager/StickyManager.d.ts

@@ -0,0 +1,10 @@
+export type TSticky = {
+    from: number;
+    to?: number;
+} | null;
+export declare class StickyManager {
+    private sticky;
+    constructor(sticky: TSticky);
+    getIsSticky(scroll: number): boolean;
+    getPosition(scroll: number, top: number): number;
+}

package/dist/sdk-nextjs/utils/Youtube/YouTubeIframeApiLoader.d.ts

@@ -0,0 +1,10 @@
+import { YT } from './YoutubeIframeApi';
+export declare class YouTubeIframeApiLoader {
+    private static instance;
+    static create(): YouTubeIframeApiLoader;
+    private loadingPromise;
+    private constructor();
+    getApi(): Promise<YT>;
+    private loadApi;
+}
+export declare function captureStackTrace(error: Error): void;

package/dist/sdk-nextjs/utils/Youtube/YoutubeIframeApi.d.ts

@@ -0,0 +1,89 @@
+export interface YT {
+    Player: YTPlayerConstructor;
+}
+export interface YTPlayerConstructor {
+    new (container: string | Element, params: YTPlayerParams): YTPlayer;
+}
+export interface YTEvent<Data> {
+    target: YTPlayer;
+    data: Data;
+}
+type YTBool = 0 | 1 | '0' | '1';
+export interface YTPlayerParams {
+    width?: string | number;
+    height?: string | number;
+    videoId?: string;
+    playerVars?: Partial<{
+        autoplay: YTBool;
+        cc_lang_pref: string;
+        cc_load_policy: YTBool;
+        color: string;
+        controls: YTBool;
+        disablekb: YTBool;
+        enablejsapi: YTBool;
+        end: number | string;
+        fs: YTBool;
+        hl: string;
+        iv_load_policy: 1 | 3 | '1' | '3';
+        list: string;
+        listType: 'playlist' | 'user_uploads';
+        loop: YTBool;
+        origin: string;
+        playlist: string;
+        playsinline: YTBool;
+        rel: YTBool;
+        start: number | string;
+        widget_referrer: string;
+    }>;
+    events?: Partial<{
+        onReady: (event: YTEvent<void>) => void;
+        onStateChange: (event: YTEvent<YTPlayerState>) => void;
+    }>;
+}
+export declare enum YTPlayerState {
+    Unstarted = -1,
+    Ended = 0,
+    Playing = 1,
+    Paused = 2,
+    Buffering = 3,
+    VideoCued = 5
+}
+export interface YTPlayer {
+    loadVideoById(videoId: string, startSeconds?: number): void;
+    loadVideoById(params: {
+        videoId: string;
+        startSeconds?: number;
+        endSeconds?: number;
+    }): void;
+    loadVideoByUrl(mediaContentUrl: string, startSeconds?: number): void;
+    loadVideoByUrl(params: {
+        mediaContentUrl: string;
+        startSeconds?: number;
+        endSeconds?: number;
+    }): void;
+    playVideo(): void;
+    pauseVideo(): void;
+    stopVideo(): void;
+    seekTo(seconds: number, allowSeekAhead: boolean): void;
+    mute(): void;
+    unMute(): void;
+    isMuted(): void;
+    setVolume(volume: number): void;
+    getVolume(): void;
+    setSize(width: number, height: number): void;
+    setLoop(loopPlaylists: boolean): void;
+    getVideoLoadedFraction(): number;
+    getPlayerState(): YTPlayerState;
+    getDuration(): number;
+    getVideoUrl(): string;
+    getVideoEmbedCode(): string;
+    getIframe(): HTMLIFrameElement | undefined;
+    destroy(): void;
+}
+declare global {
+    interface Window {
+        YT?: YT;
+        onYouTubeIframeAPIReady?: () => void;
+    }
+}
+export {};

package/dist/sdk-nextjs/utils/Youtube/useYouTubeIframeApi.d.ts

@@ -0,0 +1,2 @@
+import { YT } from './YoutubeIframeApi';
+export declare function useYouTubeIframeApi(): YT | undefined;

package/dist/sdk-nextjs/utils/areFillsVisible/areFillsVisible.d.ts

@@ -0,0 +1,23 @@
+export declare function areFillsVisible(fills: FillLayer[]): boolean;
+export type FillLayer = {
+    type: 'solid';
+    value: string;
+} | {
+    type: 'linear-gradient';
+    colors: {
+        value: string;
+    }[];
+} | {
+    type: 'radial-gradient';
+    colors: {
+        value: string;
+    }[];
+} | {
+    type: 'conic-gradient';
+    colors: {
+        value: string;
+    }[];
+} | {
+    type: 'image';
+    opacity: number;
+};

package/dist/sdk-nextjs/utils/areFillsVisible/areFillsVisible.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/sdk-nextjs/utils/binSearchInsertAt.d.ts

@@ -0,0 +1,5 @@
+type CompareFn<L, R> = (lhs: L, rhs: R) => number;
+type InsertStrategy<T> = (list: T[], item: T, compare: CompareFn<T, T>) => number;
+export declare function binSearchInsertAt<T, K>(list: T[], item: K, compare: CompareFn<K, T>): number;
+export declare function createInsert<T>(start: InsertStrategy<T>, compare: CompareFn<T, T>): (list: T[], item: T) => void;
+export {};

package/dist/sdk-nextjs/utils/castObject.d.ts

@@ -0,0 +1,5 @@
+type Ctor = {
+    new (...args: any): any;
+};
+export declare function castObject<O extends Ctor>(value: unknown, ctor: O): InstanceType<O>;
+export {};

package/dist/sdk-nextjs/utils/checkOverflowClipSupport.d.ts

@@ -0,0 +1 @@
+export declare function isOverflowClipSupported(): boolean;

package/dist/sdk-nextjs/utils/effects/useImageFx.d.ts

@@ -0,0 +1,7 @@
+interface FxParams {
+    imageUrl?: string;
+    fragmentShader: string | null;
+    controlsValues?: Record<string, number | [number, number]>;
+}
+export declare function useImageFx(canvas: HTMLCanvasElement | null | undefined, enabled: boolean, { imageUrl, fragmentShader, controlsValues }: FxParams, width: number, height: number): boolean;
+export {};

package/dist/sdk-nextjs/utils/effects/useVideoFx.d.ts

@@ -0,0 +1,7 @@
+interface FxParams {
+    videoUrl?: string;
+    fragmentShader: string | null;
+    controls?: Record<string, number | [number, number]>;
+}
+export declare function useVideoFx(canvas: HTMLCanvasElement | null | undefined, enabled: boolean, { videoUrl, fragmentShader, controls }: FxParams, width: number, height: number): boolean;
+export {};

package/dist/sdk-nextjs/utils/getAnchoredItemTop.d.ts

@@ -0,0 +1,2 @@
+import { AnchorSide } from '../../sdk/types/article/ItemArea';
+export declare function getAnchoredItemTop(top: number, sectionHeight: string, anchorSide?: AnchorSide): string;

package/dist/sdk-nextjs/utils/getCompoundBoundaryStyles.d.ts

@@ -0,0 +1,12 @@
+import { AreaAnchor, DimensionMode } from '../../sdk/types/article/ItemArea';
+export declare function getCompoundHeight(compoundSettings: CompoundSettings | undefined, height: number | undefined): string | undefined;
+export declare function getCompoundWidth(compoundSettings: CompoundSettings | undefined, width: number | undefined, isRichText: boolean, exemplary?: number): string | undefined;
+export declare function getCompoundTop(compoundSettings: CompoundSettings | undefined, top: number | undefined): string | undefined;
+export declare function getCompoundLeft(compoundSettings: CompoundSettings | undefined, left: number | undefined): string | undefined;
+export declare function getCompoundTransform(compoundSettings: CompoundSettings | undefined): string;
+type CompoundSettings = {
+    positionAnchor: AreaAnchor;
+    widthMode: DimensionMode;
+    heightMode: DimensionMode;
+};
+export {};

package/dist/sdk-nextjs/utils/getFill.d.ts

@@ -0,0 +1,2 @@
+import { FillLayer } from '../../sdk/types/article/Item';
+export declare function getFill(fill: FillLayer): string;

package/dist/sdk-nextjs/utils/getFontFamilyValue.d.ts

@@ -0,0 +1 @@
+export declare function getFontFamilyValue(value: string | undefined): string;

package/dist/sdk-nextjs/utils/getInvertedRanges.d.ts

@@ -0,0 +1,10 @@
+interface Range {
+    start: number;
+    end: number;
+}
+/**
+ * @param length
+ * @param ranges - SORTED array of ranges [start, end)
+ */
+export declare function getInvertedRanges(length: number, ranges: Range[]): Range[];
+export {};

package/dist/sdk-nextjs/utils/getItemTopStyle.d.ts

@@ -0,0 +1,2 @@
+import { AnchorSide } from '../../sdk/types/article/ItemArea';
+export declare function getItemTopStyle(top: number, anchorSide?: AnchorSide): string;

package/dist/sdk-nextjs/utils/getStyleFromItemStateAndParams.d.ts

@@ -0,0 +1 @@
+export declare function getStyleFromItemStateAndParams<T>(stateValue: T | undefined, paramsValue: T | undefined): T | undefined;

package/dist/sdk-nextjs/utils/getValidYoutubeUrl.d.ts

@@ -0,0 +1 @@
+export declare function getYoutubeId({ hostname, pathname, search }: URL): string;

package/dist/sdk-nextjs/utils/isItemType.d.ts

@@ -0,0 +1,3 @@
+import { ItemAny, Item as TItem } from '../../sdk/types/article/Item';
+import { ArticleItemType } from '../../sdk/types/article/ArticleItemType';
+export declare function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T>;

package/dist/sdk-nextjs/utils/rangeMap.d.ts

@@ -0,0 +1 @@
+export declare function rangeMap(n: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds?: boolean): number;

package/dist/sdk-nextjs/utils/useElementRect.d.ts

@@ -0,0 +1 @@
+export declare function useElementRect(element: HTMLElement | null): DOMRect | undefined;

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+import { Layout } from './sdk/types/project/Layout';
+export declare function getLayoutStyles<V, M>(layouts: Layout[], layoutValues: Record<string, V>[], mapToStyles: (values: V[], exemplary: number) => M): string;
+export declare function getLayoutMediaQuery(layoutId: string, layouts: Layout[]): string;

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@cntrl-site/components",
+  "version": "0.0.1",
+  "description": "Custom components for control editor and public websites.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "style": "dist/sdk.css",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./style/sdk.css": {
+      "default": "./dist/sdk.css"
+    }
+  },
+  "scripts": {
+    "test": "jest",
+    "dev": "vite development",
+    "prebuild": "rimraf ./dist",
+    "build": "vite build",
+    "prepublishOnly": "cross-env NODE_ENV=production npm run build"
+  },
+  "files": [
+    "dist",
+    "resources"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cntrl-site/components.git"
+  },
+  "author": "arsen@momdesign.nyc",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cntrl-site/components/issues"
+  },
+  "homepage": "https://github.com/cntrl-site/components#readme",
+  "directories": {
+    "lib": "dist"
+  },
+  "dependencies": {
+    "@antfu/eslint-config": "^3.16.0",
+    "@cntrl-site/color": "^1.0.0",
+    "@cntrl-site/effects": "^1.4.0",
+    "@splidejs/react-splide": "^0.7.12",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@types/ejs": "^3.1.2",
+    "@types/isomorphic-fetch": "^0.0.36",
+    "@types/ua-parser-js": "^0.7.39",
+    "@types/vimeo__player": "^2.18.3",
+    "@vimeo/player": "^2.25.0",
+    "classnames": "^2.5.1",
+    "commander": "^10.0.1",
+    "dotenv": "^16.1.3",
+    "ejs": "^3.1.9",
+    "html-react-parser": "^3.0.1",
+    "isomorphic-fetch": "^3.0.0",
+    "mp4box": "^0.5.2",
+    "resize-observer-polyfill": "^1.5.1",
+    "styled-jsx": "^5.0.2",
+    "ts-node": "^10.9.1",
+    "ua-parser-js": "^1.0.37",
+    "url": "^0.11.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@tsconfig/node16": "^1.0.3",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cross-env": "^10.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^6.0.1",
+    "sass": "^1.86.3",
+    "ts-jest": "^29.0.3",
+    "typescript": "^5.2.2",
+    "vite": "^6.2.5",
+    "vite-plugin-dts": "^4.5.3"
+  }
+}