@cntrl-site/components 0.0.1

package/dist/sdk/types/article/Item.d.ts

@@ -0,0 +1,250 @@
+import { RichTextBlock, RichTextStyle, TextAlign, TextTransform, VerticalAlign } from './RichText';
+import { ArticleItemType } from './ArticleItemType';
+import { AreaAnchor, ItemArea } from './ItemArea';
+import { ItemState } from './ItemState';
+import { FXControlAny } from './FX';
+import { CompoundSettings } from './CompoundSettings';
+export type ItemAny = Item<ArticleItemType>;
+export interface Item<T extends ArticleItemType> {
+    id: string;
+    type: T;
+    area: Record<LayoutIdentifier, ItemArea>;
+    hidden: Record<LayoutIdentifier, boolean>;
+    link?: Link;
+    items?: T extends (ArticleItemType.Group | ArticleItemType.Compound) ? ItemAny[] : never;
+    sticky: Record<LayoutIdentifier, StickyParams | null>;
+    compoundSettings?: Record<LayoutIdentifier, CompoundSettings>;
+    commonParams: ItemCommonParamsMap[T];
+    state: ItemState<T>;
+    layoutParams: Record<LayoutIdentifier, ItemLayoutParamsMap[T]>;
+}
+export interface ItemCommonParamsMap {
+    [ArticleItemType.Image]: ImageCommonParams;
+    [ArticleItemType.Video]: VideoCommonParams;
+    [ArticleItemType.RichText]: RichTextCommonParams;
+    [ArticleItemType.Rectangle]: RectangleCommonParams;
+    [ArticleItemType.VimeoEmbed]: VimeoEmbedCommonParams;
+    [ArticleItemType.YoutubeEmbed]: YoutubeEmbedCommonParams;
+    [ArticleItemType.Custom]: CustomCommonParams;
+    [ArticleItemType.Group]: GroupCommonParams;
+    [ArticleItemType.Compound]: CompoundCommonParams;
+    [ArticleItemType.CodeEmbed]: CodeEmbedCommonParams;
+    [ArticleItemType.Component]: ComponentCommonParams;
+}
+export interface ItemLayoutParamsMap {
+    [ArticleItemType.Image]: ImageLayoutParams;
+    [ArticleItemType.Video]: VideoLayoutParams;
+    [ArticleItemType.RichText]: RichTextLayoutParams;
+    [ArticleItemType.Rectangle]: RectangleLayoutParams;
+    [ArticleItemType.VimeoEmbed]: VimeoEmbedLayoutParams;
+    [ArticleItemType.YoutubeEmbed]: YoutubeEmbedLayoutParams;
+    [ArticleItemType.Custom]: CustomLayoutParams;
+    [ArticleItemType.Group]: GroupLayoutParams;
+    [ArticleItemType.Compound]: CompoundLayoutParams;
+    [ArticleItemType.CodeEmbed]: CodeEmbedLayoutParams;
+    [ArticleItemType.Component]: ComponentLayoutParams;
+}
+interface CommonParamsBase {
+    pointerEvents?: 'never' | 'when_visible' | 'always';
+}
+interface MediaCommonParams extends CommonParamsBase {
+    url: string;
+    hasGLEffect?: boolean;
+    fragmentShader: string | null;
+    FXControls?: FXControlAny[];
+}
+interface VideoCommonParams extends MediaCommonParams {
+    coverUrl: string | null;
+}
+interface ImageCommonParams extends MediaCommonParams {
+}
+interface RichTextCommonParams extends CommonParamsBase {
+    text: string;
+    blocks?: RichTextBlock[];
+}
+interface RectangleCommonParams extends CommonParamsBase {
+    ratioLock: boolean;
+}
+interface CustomCommonParams extends CommonParamsBase {
+    name: string;
+}
+interface GroupCommonParams extends CommonParamsBase {
+}
+interface CompoundCommonParams extends CommonParamsBase {
+    overflow: 'hidden' | 'visible';
+}
+interface CodeEmbedCommonParams extends CommonParamsBase {
+    html: string;
+    scale: boolean;
+    iframe: boolean;
+}
+interface VimeoEmbedCommonParams extends CommonParamsBase {
+    url: string;
+    coverUrl: string | null;
+}
+interface YoutubeEmbedCommonParams extends CommonParamsBase {
+    url: string;
+    coverUrl: string | null;
+}
+interface ComponentCommonParams extends CommonParamsBase {
+    componentId: string;
+    content?: any;
+}
+interface MediaLayoutParams {
+    opacity: number;
+    radius: number;
+    strokeWidth: number;
+    strokeFill: FillLayer[];
+    blur: number;
+    isDraggable?: boolean;
+}
+interface CustomLayoutParams {
+    isDraggable?: boolean;
+}
+interface GroupLayoutParams {
+    opacity: number;
+    blur: number;
+    isDraggable?: boolean;
+}
+interface CompoundLayoutParams {
+    opacity: number;
+    isDraggable?: boolean;
+}
+interface CodeEmbedLayoutParams {
+    areaAnchor: AreaAnchor;
+    opacity: number;
+    blur: number;
+    isDraggable?: boolean;
+}
+interface VimeoEmbedLayoutParams {
+    play: 'on-hover' | 'on-click' | 'auto';
+    controls: boolean;
+    loop: boolean;
+    muted: boolean;
+    pictureInPicture: boolean;
+    radius: number;
+    blur: number;
+    opacity: number;
+}
+interface YoutubeEmbedLayoutParams {
+    play: 'on-hover' | 'on-click' | 'auto';
+    controls: boolean;
+    loop: boolean;
+    radius: number;
+    blur: number;
+    opacity: number;
+}
+interface ImageLayoutParams extends MediaLayoutParams {
+}
+interface VideoLayoutParams extends MediaLayoutParams {
+    play: 'on-hover' | 'on-click' | 'auto';
+    muted: boolean;
+    controls: boolean;
+    scrollPlayback: ScrollPlaybackParams | null;
+}
+interface RichTextLayoutParams {
+    rangeStyles?: RichTextStyle[];
+    textAlign: TextAlign;
+    sizing: string;
+    blur: number;
+    fontSize: number;
+    lineHeight: number;
+    letterSpacing: number;
+    wordSpacing: number;
+    textTransform: TextTransform;
+    verticalAlign: VerticalAlign;
+    color: string;
+    typeFace: string;
+    fontStyle: string;
+    fontWeight: number;
+    fontVariant: string;
+    isDraggable?: boolean;
+}
+interface RectangleLayoutParams {
+    radius: number;
+    strokeWidth: number;
+    fill: FillLayer[];
+    strokeFill: FillLayer[];
+    blur: number;
+    backdropBlur: number;
+    blurMode: 'default' | 'backdrop';
+    isDraggable?: boolean;
+}
+export type FillLayer = SolidFillLayer | LinearGradientFillLayer | RadialGradientFillLayer | ConicGradientFillLayer | ImageLayer;
+type ColorPoint = {
+    id: string;
+    value: string;
+    position: number;
+};
+export type SolidFillLayer = {
+    id: string;
+    type: 'solid';
+    value: string;
+    blendMode: string;
+};
+export type LinearGradientFillLayer = {
+    id: string;
+    type: 'linear-gradient';
+    colors: ColorPoint[];
+    start: [number, number];
+    end: [number, number];
+    angle: number;
+    blendMode: string;
+};
+export type RadialGradientFillLayer = {
+    id: string;
+    type: 'radial-gradient';
+    colors: ColorPoint[];
+    diameter: number;
+    center: [number, number];
+    angle: number;
+    blendMode: string;
+};
+export type ConicGradientFillLayer = {
+    id: string;
+    type: 'conic-gradient';
+    colors: ColorPoint[];
+    center: [number, number];
+    angle: number;
+    blendMode: string;
+};
+export type ImageLayer = {
+    id: string;
+    type: 'image';
+    src: string;
+    behavior: string;
+    backgroundSize: number;
+    opacity: number;
+    blendMode: string;
+    rotation?: number;
+};
+export interface ScrollPlaybackParams {
+    from: number;
+    to: number;
+}
+export interface StickyParams {
+    from: number;
+    to?: number;
+}
+export interface Link {
+    url: string;
+    target: string;
+}
+type LayoutIdentifier = string;
+interface ComponentLayoutParams {
+    parameters?: any;
+    opacity: number;
+    blur: number;
+}
+export type VideoItem = Item<ArticleItemType.Video>;
+export type RectangleItem = Item<ArticleItemType.Rectangle>;
+export type ImageItem = Item<ArticleItemType.Image>;
+export type RichTextItem = Item<ArticleItemType.RichText>;
+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>;
+export type CompoundItem = Item<ArticleItemType.Compound>;
+export type ComponentItem = Item<ArticleItemType.Component>;
+export {};

package/dist/sdk/types/article/ItemArea.d.ts

@@ -0,0 +1,36 @@
+export declare enum AnchorSide {
+    Top = "top",
+    Bottom = "bottom",
+    Center = "center"
+}
+export declare enum PositionType {
+    SectionBased = "section-based",
+    ScreenBased = "screen-based"
+}
+export declare enum AreaAnchor {
+    TopLeft = "top-left",
+    TopCenter = "top-center",
+    TopRight = "top-right",
+    MiddleLeft = "middle-left",
+    MiddleCenter = "middle-center",
+    MiddleRight = "middle-right",
+    BottomLeft = "bottom-left",
+    BottomCenter = "bottom-center",
+    BottomRight = "bottom-right"
+}
+export declare enum DimensionMode {
+    ControlUnits = "control-units",
+    Relative = "relative"
+}
+export interface ItemArea {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    positionType: PositionType;
+    zIndex: number;
+    angle: number;
+    anchorSide?: AnchorSide;
+    scale: number;
+    scaleAnchor: AreaAnchor;
+}

package/dist/sdk/types/article/ItemState.d.ts

@@ -0,0 +1,78 @@
+import { ArticleItemType } from './ArticleItemType';
+import { FillLayer } from './Item';
+type StateId = string;
+export type ItemState<T extends ArticleItemType> = Record<StateId, ItemStatesMap[T]>;
+export type ItemStateParams = ItemStatesMap[ArticleItemType];
+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;
+    [ArticleItemType.Compound]: CompoundStateParams;
+    [ArticleItemType.Component]: ComponentStateParams;
+}
+export interface StateParams<T> {
+    value: T;
+    in: {
+        timing: string;
+        duration: number;
+        delay: number;
+    };
+    out: {
+        timing: string;
+        duration: number;
+        delay: 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 MediaStateParams extends ItemStatesBaseMap {
+    opacity?: StateParams<number>;
+    radius?: StateParams<number>;
+    strokeWidth?: StateParams<number>;
+    strokeFill?: StateParams<FillLayer[]>;
+}
+export interface RichTextStateParams extends ItemStatesBaseMap {
+    color?: StateParams<string>;
+    letterSpacing?: StateParams<number>;
+    wordSpacing?: StateParams<number>;
+}
+export interface RectangleStateParams extends ItemStatesBaseMap {
+    radius?: StateParams<number>;
+    strokeWidth?: StateParams<number>;
+    fill?: StateParams<FillLayer[]>;
+    strokeFill?: StateParams<FillLayer[]>;
+    backdropBlur?: StateParams<number>;
+}
+export interface VideoEmbedStateParams extends ItemStatesBaseMap {
+    radius?: StateParams<number>;
+    opacity?: StateParams<number>;
+}
+export interface CustomItemStateParams extends ItemStatesBaseMap {
+}
+export interface GroupStateParams extends ItemStatesBaseMap {
+    opacity?: StateParams<number>;
+    blur?: StateParams<number>;
+}
+export interface CompoundStateParams extends ItemStatesBaseMap {
+    opacity?: StateParams<number>;
+}
+export interface CodeEmbedStateParams extends ItemStatesBaseMap {
+    opacity?: StateParams<number>;
+}
+export interface ComponentStateParams extends ItemStatesBaseMap {
+    opacity?: StateParams<number>;
+}
+export {};

package/dist/sdk/types/article/RichText.d.ts

@@ -0,0 +1,40 @@
+export interface RichTextEntity {
+    start: number;
+    end: number;
+    type: string;
+    data?: any;
+}
+export interface RichTextStyle {
+    start: number;
+    end: number;
+    style: string;
+    value?: string;
+}
+export interface RichTextBlock {
+    start: number;
+    end: number;
+    type: string;
+    entities?: RichTextEntity[];
+    children?: RichTextBlock[];
+    data?: any;
+}
+export declare enum TextAlign {
+    Left = "left",
+    Right = "right",
+    Center = "center",
+    Justify = "justify"
+}
+export declare enum TextTransform {
+    None = "none",
+    Uppercase = "uppercase",
+    Lowercase = "lowercase"
+}
+export declare enum VerticalAlign {
+    Super = "super",
+    Sub = "sub",
+    Unset = "unset"
+}
+export declare enum TextDecoration {
+    Underline = "underline",
+    None = "none"
+}

package/dist/sdk/types/article/Section.d.ts

@@ -0,0 +1,37 @@
+import { ItemAny } from './Item';
+export declare enum SectionHeightMode {
+    ControlUnits = "control-units",
+    ViewportHeightUnits = "viewport-height-units"
+}
+export interface SectionHeight {
+    mode: SectionHeightMode;
+    units: number;
+    vhUnits?: number;
+}
+export type SectionVideo = {
+    url: string;
+    size: string;
+    type: 'video';
+    play: 'on-click' | 'auto';
+    position: string;
+    coverUrl: string | null;
+    offsetX: number | null;
+};
+export type SectionImage = {
+    url: string;
+    type: 'image';
+    size: string;
+    position: string;
+    offsetX: number | null;
+};
+export type SectionMedia = SectionVideo | SectionImage;
+export interface Section {
+    id: string;
+    name?: string;
+    height: Record<string, SectionHeight>;
+    hidden: Record<string, boolean>;
+    items: ItemAny[];
+    position: Record<string, number>;
+    color: Record<string, string | null>;
+    media?: Record<string, SectionMedia>;
+}

package/dist/sdk/types/component/Component.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export type Component = {
+    element: (props: any) => React.ReactElement;
+    id: string;
+    name: string;
+    defaultSize: {
+        width: number;
+        height: number;
+    };
+    schema: any;
+    preview?: {
+        type: 'image' | 'video';
+        url: string;
+    };
+};

package/dist/sdk/types/keyframe/Keyframe.d.ts

@@ -0,0 +1,86 @@
+import { FillLayer } from '../article/Item';
+export type KeyframeAny = Keyframe<KeyframeType>;
+export interface Keyframe<T extends KeyframeType> {
+    id: string;
+    type: T;
+    layoutId: string;
+    itemId: string;
+    position: number;
+    value: KeyframeValueMap[T];
+}
+export declare enum KeyframeType {
+    Dimensions = "dimensions",
+    Position = "position",
+    Rotation = "rotation",
+    BorderRadius = "border-radius",
+    BorderWidth = "border-width",
+    Opacity = "opacity",
+    Scale = "scale",
+    TextColor = "text-color",
+    LetterSpacing = "letter-spacing",
+    WordSpacing = "word-spacing",
+    Blur = "blur",
+    BackdropBlur = "backdrop-blur",
+    FXParams = "fx-params",
+    BorderFill = "border-fill",
+    Fill = "fill"
+}
+export interface KeyframeValueMap {
+    [KeyframeType.Dimensions]: DimensionsValue;
+    [KeyframeType.Position]: PositionValue;
+    [KeyframeType.Rotation]: RotationValue;
+    [KeyframeType.BorderRadius]: BorderRadiusValue;
+    [KeyframeType.BorderWidth]: BorderWidthValue;
+    [KeyframeType.Opacity]: OpacityValue;
+    [KeyframeType.Scale]: ScaleValue;
+    [KeyframeType.Blur]: BlurValue;
+    [KeyframeType.BackdropBlur]: BackdropBlurValue;
+    [KeyframeType.TextColor]: TextColorValue;
+    [KeyframeType.LetterSpacing]: LetterSpacingValue;
+    [KeyframeType.WordSpacing]: WordSpacingValue;
+    [KeyframeType.FXParams]: FXParamsValue;
+    [KeyframeType.BorderFill]: BorderFillValue;
+    [KeyframeType.Fill]: FillValue;
+}
+interface DimensionsValue {
+    width: number;
+    height: number;
+}
+interface PositionValue {
+    top: number;
+    left: number;
+}
+interface RotationValue {
+    angle: number;
+}
+interface BorderRadiusValue {
+    radius: number;
+}
+interface BorderWidthValue {
+    borderWidth: number;
+}
+interface OpacityValue {
+    opacity: number;
+}
+interface ScaleValue {
+    scale: number;
+}
+interface BlurValue {
+    blur: number;
+}
+interface BackdropBlurValue {
+    backdropBlur: number;
+}
+interface TextColorValue {
+    color: string;
+}
+interface LetterSpacingValue {
+    letterSpacing: number;
+}
+interface WordSpacingValue {
+    wordSpacing: number;
+}
+type BorderFillValue = FillLayer[];
+type FXParamsValue = Record<string, number>;
+type FillValue = FillLayer[];
+export {};

package/dist/sdk/types/project/Fonts.d.ts

@@ -0,0 +1,22 @@
+export declare enum FontFileTypes {
+    OTF = "otf",
+    TTF = "ttf",
+    WOFF = "woff",
+    WOFF2 = "woff2",
+    EOT = "eot"
+}
+export interface CustomFontFile {
+    type: FontFileTypes;
+    url: string;
+}
+export interface CustomFont {
+    name: string;
+    style: string;
+    weight: number;
+    files: CustomFontFile[];
+}
+export interface Fonts {
+    google: string;
+    adobe: string;
+    custom: CustomFont[];
+}

package/dist/sdk/types/project/Layout.d.ts

@@ -0,0 +1,6 @@
+export interface Layout {
+    id: string;
+    title: string;
+    startsWith: number;
+    exemplary: number;
+}

package/dist/sdk/types/project/Meta.d.ts

@@ -0,0 +1,9 @@
+export interface Meta extends GenericMeta {
+    favicon?: string;
+}
+export interface GenericMeta {
+    title?: string;
+    description?: string;
+    opengraphThumbnail?: string;
+    keywords?: string;
+}

package/dist/sdk/types/project/Page.d.ts

@@ -0,0 +1,11 @@
+import { GenericMeta } from './Meta';
+export interface PageMeta extends GenericMeta {
+    enabled?: boolean;
+}
+export interface Page {
+    id: string;
+    title: string;
+    articleId: string;
+    slug: string;
+    meta?: PageMeta;
+}

package/dist/sdk/types/project/Project.d.ts

@@ -0,0 +1,17 @@
+import { Layout } from './Layout';
+import { Fonts } from './Fonts';
+import { Meta } from './Meta';
+import { Page } from './Page';
+export interface AdditionalHTML {
+    head: string;
+    afterBodyOpen: string;
+    beforeBodyClose: string;
+}
+export interface Project {
+    id: string;
+    html: AdditionalHTML;
+    meta: Meta;
+    layouts: Layout[];
+    pages: Page[];
+    fonts: Fonts;
+}

package/dist/sdk-nextjs/common/useCurrentLayout.d.ts

@@ -0,0 +1,6 @@
+type UseCurrentLayoutReturn = {
+    layoutId: string | undefined;
+    layoutDeviation: number;
+};
+export declare function useCurrentLayout(): UseCurrentLayoutReturn;
+export {};

package/dist/sdk-nextjs/common/useExemplary.d.ts

@@ -0,0 +1 @@
+export declare const useExemplary: () => number;

package/dist/sdk-nextjs/common/useItemFXData.d.ts

@@ -0,0 +1,8 @@
+import { ImageItem, VideoItem } from '../../sdk/types/article/Item';
+export declare function useItemFXData(item: ImageItem | VideoItem, sectionId: string): FXData;
+type FXData = {
+    fragmentShader: string;
+    controlsValues: Record<string, ControlValue>;
+};
+type ControlValue = number;
+export {};

package/dist/sdk-nextjs/common/useKeyframeValue.d.ts

@@ -0,0 +1,8 @@
+import { DependencyList } from 'react';
+import { Animator } from '../utils/Animator/Animator';
+import { ItemAny } from '../../sdk/types/article/Item';
+import { KeyframeType } from '../../sdk/types/keyframe/Keyframe';
+export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) => T;
+type ItemParamGetter<T> = (item: ItemAny, layoutId: string | undefined) => T;
+export declare function useKeyframeValue<T>(item: ItemAny, type: KeyframeType, itemParamsGetter: ItemParamGetter<T>, animatorGetter: AnimatorGetter<T>, sectionId: string, deps?: DependencyList): T;
+export {};

package/dist/sdk-nextjs/common/useRegisterResize.d.ts

@@ -0,0 +1 @@
+export declare function useRegisterResize(ref: HTMLElement | null, onResize?: (height: number) => void): void;

package/dist/sdk-nextjs/components/Article.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Article as TArticle } from '../../sdk/types/article/Article';
+interface Props {
+    article: TArticle;
+    sectionData: Record<SectionName, any>;
+}
+export declare const Article: FC<Props>;
+type SectionName = string;
+export {};

package/dist/sdk-nextjs/components/ArticleWrapper.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const ArticleWrapper: FC<PropsWithChildren<{}>>;

package/dist/sdk-nextjs/components/Head.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Meta } from '../../sdk/types/project/Meta';
+import { Project } from '../../sdk/types/project/Project';
+interface Props {
+    project: Project;
+    meta: Meta;
+}
+export declare const CNTRLHead: FC<Props>;
+export {};

package/dist/sdk-nextjs/components/LayoutStyle.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Layout } from '../../sdk/types/project/Layout';
+export interface LayoutStyleProps {
+    id: string;
+    layouts: Layout[];
+    layoutId: string;
+    children?: (layout: Layout) => string;
+}
+export declare const LayoutStyle: FC<LayoutStyleProps>;