@kritzel/engine 0.4.31

package/dist/types/interfaces/theme.interface.d.ts

@@ -0,0 +1,553 @@
+/**
+ * Theme name type for available themes
+ */
+export type ThemeName = 'light' | 'dark' | (string & NonNullable<unknown>);
+/**
+ * Complete theme definition with all CSS variable values grouped by category
+ */
+export interface KritzelTheme {
+    /** Theme identifier */
+    name: ThemeName;
+    /** Global variables */
+    global?: {
+        cursorTrailColor?: string;
+        cursorTrailOpacity?: string;
+        dividerColor?: string;
+        focusColor?: string;
+        fontFamily?: string;
+        borderColor?: string;
+        focusRingColor?: string;
+        iconColor?: string;
+        pointerCursor?: string;
+        primaryColor?: string;
+        primaryHoverColor?: string;
+        primaryTextColor?: string;
+        scrollbarThumbColor?: string;
+        textPrimary?: string;
+        textSecondary?: string;
+        name?: string;
+    };
+    /** Active users variables */
+    activeUsers?: {
+        avatarBorderColor?: string;
+        overflowColor?: string;
+        overflowFontSize?: string;
+        tooltipBackground?: string;
+        tooltipColor?: string;
+    };
+    /** Avatar variables */
+    avatar?: {
+        border?: string;
+        defaultBackground?: string;
+        defaultColor?: string;
+        initialsColor?: string;
+        initialsFontFamily?: string;
+        initialsFontWeight?: string;
+    };
+    /** Awareness variables */
+    awareness?: {
+        cursorLabelFontSize?: string;
+        cursorLabelTextColor?: string;
+        cursorTransitionDuration?: string;
+    };
+    /** Back to content variables */
+    backToContent?: {
+        activeBackgroundColor?: string;
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        color?: string;
+        fontSize?: string;
+        fontWeight?: string;
+        gap?: string;
+        height?: string;
+        hoverBackgroundColor?: string;
+        padding?: string;
+        zIndex?: string;
+    };
+    /** Button variables */
+    button?: {
+        borderRadius?: string;
+        fontSize?: string;
+        fontWeight?: string;
+        padding?: string;
+        primaryActiveBackgroundColor?: string;
+        primaryBackgroundColor?: string;
+        primaryColor?: string;
+        primaryHoverBackgroundColor?: string;
+        secondaryActiveBackgroundColor?: string;
+        secondaryBackgroundColor?: string;
+        secondaryColor?: string;
+        secondaryHoverBackgroundColor?: string;
+        textActiveBackgroundColor?: string;
+        textColor?: string;
+        textHoverBackgroundColor?: string;
+        width?: string;
+    };
+    /** Checkerboard variables */
+    checkerboard?: {
+        colorDark?: string;
+        colorLight?: string;
+    };
+    /** Color palette variables */
+    colorPalette?: {
+        circleBorderColor?: string;
+        hoverBackgroundColor?: string;
+        selectedBackgroundColor?: string;
+    };
+    /** Context menu variables */
+    contextMenu?: {
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        dividerColor?: string;
+        dividerMargin?: string;
+        itemActiveBackgroundColor?: string;
+        itemBorderRadius?: string;
+        itemColor?: string;
+        itemDisabledColor?: string;
+        itemFontSize?: string;
+        itemGap?: string;
+        itemHoverBackgroundColor?: string;
+        itemPadding?: string;
+        itemSpacing?: string;
+        minWidth?: string;
+        padding?: string;
+    };
+    /** Current user dialog variables */
+    currentUserDialog?: {
+        emailColor?: string;
+        logoutButtonActiveBackgroundColor?: string;
+        logoutButtonBackgroundColor?: string;
+        logoutButtonColor?: string;
+        logoutButtonHoverBackgroundColor?: string;
+        nameColor?: string;
+    };
+    /** Dialog variables */
+    dialog?: {
+        backdropColor?: string;
+        backgroundColor?: string;
+        bodyPadding?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        closeButtonActiveBackground?: string;
+        closeButtonBackground?: string;
+        closeButtonBorderRadius?: string;
+        closeButtonColor?: string;
+        closeButtonHoverBackground?: string;
+        closeButtonHoverColor?: string;
+        fontFamily?: string;
+        footerBorder?: string;
+        footerGap?: string;
+        footerPadding?: string;
+        headerBorder?: string;
+        headerPadding?: string;
+        heightLarge?: string;
+        heightMedium?: string;
+        heightSmall?: string;
+        maxHeight?: string;
+        maxWidth?: string;
+        titleColor?: string;
+        titleFontSize?: string;
+        titleFontWeight?: string;
+        widthLarge?: string;
+        widthMedium?: string;
+        widthSmall?: string;
+    };
+    /** Dropdown variables */
+    dropdown?: {
+        accentColor?: string;
+        background?: string;
+        borderColor?: string;
+        borderRadius?: string;
+        hoverBackgroundColor?: string;
+        hoverBorderColor?: string;
+        menuBorderRadius?: string;
+        selectedBackgroundColor?: string;
+        textColor?: string;
+        triggerFontSize?: string;
+        triggerPadding?: string;
+    };
+    /** Editor variables */
+    editor?: {
+        loadingOverlayBackground?: string;
+        loadingOverlayColor?: string;
+        loadingOverlayDelay?: string;
+        loadingOverlaySpinnerActiveColor?: string;
+        loadingOverlaySpinnerColor?: string;
+        loadingOverlayZIndex?: string;
+        notificationAnimationDuration?: string;
+        notificationAnimationEasing?: string;
+        notificationDismissAnimationDuration?: string;
+        notificationDismissAnimationEasing?: string;
+        syncIndicatorBackground?: string;
+        syncIndicatorColor?: string;
+        syncIndicatorSpinnerColor?: string;
+        syncIndicatorSpinnerTrack?: string;
+        syncIndicatorZIndex?: string;
+        toolbarBottom?: string;
+        toolbarTransform?: string;
+        toolbarTransition?: string;
+        toolbarTransitionDuration?: string;
+        topCenterNotificationTop?: string;
+        topCenterNotificationZIndex?: string;
+        topLeftButtonsLeft?: string;
+        topLeftButtonsTop?: string;
+        topRightButtonsRight?: string;
+        topRightButtonsTop?: string;
+    };
+    /** Engine variables */
+    engine?: {
+        backgroundColor?: string;
+    };
+    /** Font size variables */
+    fontSize?: {
+        hoverBackgroundColor?: string;
+        selectedBackgroundColor?: string;
+        textColor?: string;
+    };
+    /** Line endings variables */
+    lineEndings?: {
+        hoverBackgroundColor?: string;
+        labelColor?: string;
+        optionBackground?: string;
+        selectedBackgroundColor?: string;
+    };
+    /** Login dialog variables */
+    loginDialog?: {
+        buttonActiveBackground?: string;
+        buttonBackground?: string;
+        buttonBorderColor?: string;
+        buttonHoverBackground?: string;
+        buttonHoverBorderColor?: string;
+        buttonTextColor?: string;
+        spinnerActiveColor?: string;
+        spinnerColor?: string;
+        subtitleColor?: string;
+    };
+    /** Master detail variables */
+    masterDetail?: {
+        backButtonColor?: string;
+        backgroundColor?: string;
+        detailBackgroundColor?: string;
+        detailFocusOutline?: string;
+        detailFocusOutlineOffset?: string;
+        detailPadding?: string;
+        gap?: string;
+        menuBackgroundColor?: string;
+        menuBorderRight?: string;
+        menuGap?: string;
+        menuItemActiveBackgroundColor?: string;
+        menuItemBackgroundColor?: string;
+        menuItemBorderRadius?: string;
+        menuItemChevronColor?: string;
+        menuItemColor?: string;
+        menuItemDisabledColor?: string;
+        menuItemFocusOutline?: string;
+        menuItemFocusOutlineOffset?: string;
+        menuItemFontSize?: string;
+        menuItemFontWeight?: string;
+        menuItemGap?: string;
+        menuItemHoverBackgroundColor?: string;
+        menuItemPadding?: string;
+        menuItemSelectedBackgroundColor?: string;
+        menuItemSelectedColor?: string;
+        menuItemSelectedFontWeight?: string;
+        menuItemSelectedHoverBackgroundColor?: string;
+        menuMinWidth?: string;
+        menuPadding?: string;
+        menuWidth?: string;
+        minHeight?: string;
+    };
+    /** Menu variables */
+    menu?: {
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        gap?: string;
+        itemBorderRadius?: string;
+        itemButtonHoverBackgroundColor?: string;
+        itemChildOpenBackgroundColor?: string;
+        itemColor?: string;
+        itemEditingBackgroundColor?: string;
+        itemFontSize?: string;
+        itemHeight?: string;
+        itemInputBorder?: string;
+        itemInputBorderColorOnSelected?: string;
+        itemInputCaretColor?: string;
+        itemInputCaretColorOnSelected?: string;
+        itemInputHeight?: string;
+        itemInputSelectionColor?: string;
+        itemInputSelectionColorOnSelected?: string;
+        itemInputSelectionTextColor?: string;
+        itemInputSelectionTextColorOnSelected?: string;
+        itemMinHeight?: string;
+        itemOverlayBackgroundColor?: string;
+        itemPadding?: string;
+        itemSelectedBackgroundColor?: string;
+        itemSelectedColor?: string;
+        padding?: string;
+        width?: string;
+    };
+    /** More menu variables */
+    moreMenu?: {
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        buttonActiveBackgroundColor?: string;
+        buttonColor?: string;
+        buttonHeight?: string;
+        buttonHoverBackgroundColor?: string;
+        buttonWidth?: string;
+        innerBorderRadius?: string;
+        padding?: string;
+    };
+    /** Notification card variables */
+    notificationCard?: {
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        color?: string;
+        dismissButtonActiveBackgroundColor?: string;
+        dismissButtonBackgroundColor?: string;
+        dismissButtonBorderRadius?: string;
+        dismissButtonColor?: string;
+        dismissButtonHoverBackgroundColor?: string;
+        dismissButtonSize?: string;
+        errorPillBackgroundColor?: string;
+        errorPillColor?: string;
+        headerGap?: string;
+        headerMarginBottom?: string;
+        headerRightGap?: string;
+        infoPillBackgroundColor?: string;
+        infoPillColor?: string;
+        maxWidth?: string;
+        messageColor?: string;
+        messageFontSize?: string;
+        messageLineHeight?: string;
+        padding?: string;
+        pillBackgroundColor?: string;
+        pillBorderRadius?: string;
+        pillColor?: string;
+        pillFontSize?: string;
+        pillFontWeight?: string;
+        pillHeight?: string;
+        pillPadding?: string;
+        timestampColor?: string;
+        timestampFontSize?: string;
+        warningPillBackgroundColor?: string;
+        warningPillColor?: string;
+    };
+    /** Numeric input variables */
+    numericInput?: {
+        borderColor?: string;
+        borderRadius?: string;
+        focusBorderColor?: string;
+        hoverBorderColor?: string;
+        inputBackground?: string;
+        labelColor?: string;
+        selectionBackground?: string;
+        selectionColor?: string;
+        spinnerActiveBackground?: string;
+        spinnerBackground?: string;
+        spinnerBorderRadius?: string;
+        spinnerColor?: string;
+        spinnerHoverBackground?: string;
+        textColor?: string;
+    };
+    /** Opacity slider variables */
+    opacitySlider?: {
+        activeColor?: string;
+        thumbBorderColor?: string;
+        thumbColor?: string;
+        trackColor?: string;
+    };
+    /** Pill tabs variables */
+    pillTabs?: {
+        background?: string;
+        borderRadius?: string;
+        tabBackground?: string;
+        tabBackgroundHover?: string;
+        tabBackgroundSelected?: string;
+        tabBorderRadius?: string;
+        tabLabelMaxWidth?: string;
+        tabShadowSelected?: string;
+        tabTextColor?: string;
+        tabTextColorSelected?: string;
+    };
+    /** Portal variables */
+    portal?: {
+        maxHeight?: string;
+    };
+    /** Selection variables */
+    selection?: {
+        borderColor?: string;
+        borderWidth?: string;
+        boxBackgroundColor?: string;
+        boxBorderColor?: string;
+        handleColor?: string;
+        handleSize?: string;
+        handleStrokeColor?: string;
+    };
+    /** Settings variables */
+    settings?: {
+        contentHeadingColor?: string;
+        contentTextColor?: string;
+        descriptionColor?: string;
+        labelColor?: string;
+        shortcutItemBg?: string;
+        shortcutKeyBg?: string;
+        shortcutKeyBorder?: string;
+        shortcutKeyColor?: string;
+    };
+    /** Shape fill variables */
+    shapeFill?: {
+        hoverBackgroundColor?: string;
+        optionBackground?: string;
+        selectedBackgroundColor?: string;
+    };
+    /** Share dialog variables */
+    shareDialog?: {
+        borderColor?: string;
+        copyButtonBackground?: string;
+        copyButtonColor?: string;
+        copyButtonHoverBackground?: string;
+        copyButtonHoverColor?: string;
+        copySuccessBackground?: string;
+        copySuccessColor?: string;
+        descriptionColor?: string;
+        inputBackground?: string;
+        inputBorderColor?: string;
+        inputTextColor?: string;
+        labelColor?: string;
+        qrBackground?: string;
+        qrBorderColor?: string;
+        revokeButtonBorderColor?: string;
+        revokeButtonColor?: string;
+        revokeButtonHoverBackground?: string;
+        revokeButtonHoverColor?: string;
+        selectionColor?: string;
+    };
+    /** Slide toggle variables */
+    slideToggle?: {
+        borderRadius?: string;
+        height?: string;
+        thumbColor?: string;
+        thumbSize?: string;
+        trackCheckedColor?: string;
+        trackColor?: string;
+        transitionDuration?: string;
+        width?: string;
+    };
+    /** Snap variables */
+    snap?: {
+        indicatorFill?: string;
+        indicatorFillInactive?: string;
+        indicatorStroke?: string;
+        indicatorStrokeInactive?: string;
+        lineStroke?: string;
+    };
+    /** Split button variables */
+    splitButton?: {
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        color?: string;
+        dividerBackgroundColor?: string;
+        dividerWidth?: string;
+        fontSize?: string;
+        gap?: string;
+        hoverBackgroundColor?: string;
+        padding?: string;
+    };
+    /** Stroke size variables */
+    strokeSize?: {
+        hoverBackgroundColor?: string;
+        selectedBackgroundColor?: string;
+    };
+    /** Submenu variables */
+    submenu?: {
+        gap?: string;
+    };
+    /** Text input variables */
+    textInput?: {
+        background?: string;
+        borderColor?: string;
+        borderRadius?: string;
+        focusBorderColor?: string;
+        hoverBorderColor?: string;
+        labelColor?: string;
+        placeholderColor?: string;
+        selectionBackground?: string;
+        selectionColor?: string;
+        suffixBackground?: string;
+        suffixColor?: string;
+        textColor?: string;
+    };
+    /** Toolbar variables */
+    toolbar?: {
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        controlActiveBackgroundColor?: string;
+        controlBorderRadius?: string;
+        controlColor?: string;
+        controlHoverBackgroundColor?: string;
+        controlPadding?: string;
+        controlSelectedBackgroundColor?: string;
+        controlSelectedColor?: string;
+        gap?: string;
+        padding?: string;
+        separatorColor?: string;
+    };
+    /** Tooltip variables */
+    tooltip?: {
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        color?: string;
+        padding?: string;
+    };
+    /** Utility panel variables */
+    utilityPanel?: {
+        backgroundColor?: string;
+        buttonBorderRadius?: string;
+        buttonColor?: string;
+        buttonHoverBackgroundColor?: string;
+        separatorColor?: string;
+    };
+    /** Watermark variables */
+    watermark?: {
+        background?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        color?: string;
+        fontSize?: string;
+        offsetBottom?: string;
+        offsetRight?: string;
+        opacity?: string;
+    };
+    /** Zoom panel variables */
+    zoomPanel?: {
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        buttonActiveBackgroundColor?: string;
+        buttonBorderRadius?: string;
+        buttonHoverBackgroundColor?: string;
+        buttonSize?: string;
+        gap?: string;
+        iconColor?: string;
+        padding?: string;
+    };
+}

package/dist/types/interfaces/tool-config.interface.d.ts

@@ -0,0 +1,24 @@
+import { KritzelBaseTool } from '../classes/tools/base-tool.class';
+export type { KritzelToolType } from './tool-type.interface';
+export type ToolConfigType = 'brush' | 'line' | 'shape' | 'text' | 'selection';
+export interface ToolConfigControl {
+    type: 'stroke-size' | 'font-size' | 'line-endings' | 'shape-fill' | 'font-family';
+    label?: string;
+    propertyName: string;
+    additionalProps?: Record<string, any>;
+}
+export interface ToolConfigDefinition {
+    type: ToolConfigType;
+    colorProperty: string;
+    sizeProperty: string;
+    opacityProperty: string;
+    paletteSource: 'palette' | 'none';
+    sizesSource: 'sizes' | 'none';
+    controls: ToolConfigControl[];
+}
+export type ConfigurableTool = KritzelBaseTool;
+export interface ToolDisplayValues {
+    color: string;
+    size: number;
+    fontFamily?: string;
+}

package/dist/types/interfaces/tool-type.interface.d.ts

@@ -0,0 +1 @@
+export type KritzelToolType = 'brush' | 'line' | 'shape' | 'text' | 'selection' | 'eraser' | 'image' | 'base';

package/dist/types/interfaces/tool.interface.d.ts

@@ -0,0 +1,8 @@
+export interface KritzelTool {
+    name: string;
+    toolType: string;
+    handlePointerDown(event: PointerEvent): void;
+    handlePointerMove(event: PointerEvent): void;
+    handlePointerUp(event: PointerEvent): void;
+    handleWheel(event: WheelEvent): void;
+}

package/dist/types/interfaces/toolbar-item.interface.d.ts

@@ -0,0 +1,66 @@
+import { KritzelBaseTool } from '../classes/tools/base-tool.class';
+import { ShapeType } from '../enums/shape-type.enum';
+import { ThemeAwareColor } from '../constants/color-palette.constants';
+import { KritzelFontRegistration } from './font.interface';
+export interface KritzelToolbarSubOption {
+    id: string;
+    icon: string;
+    label: string;
+    value: any;
+    toolProperty: string;
+}
+export interface KritzelToolbarItem {
+    type: 'tool' | 'config' | 'separator';
+    tool?: (new (...args: any[]) => KritzelBaseTool) | KritzelBaseTool;
+    icon?: string;
+    isDefault?: boolean;
+    isDisabled?: boolean | (() => boolean | Promise<boolean>);
+    name: string;
+    config?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig | KritzelShapeToolConfig;
+    subOptions?: KritzelToolbarSubOption[];
+}
+export interface KritzelTextToolConfig {
+    color: ThemeAwareColor;
+    size: number;
+    opacity?: number;
+    fontFamily: string;
+    availableFonts?: KritzelFontRegistration[];
+    palette: ThemeAwareColor[];
+    sizes?: number[];
+}
+export interface KritzelBrushToolConfig {
+    color: ThemeAwareColor;
+    size: number;
+    opacity?: number;
+    palette: ThemeAwareColor[];
+    sizes?: number[];
+}
+export interface KritzelLineToolConfig {
+    color: ThemeAwareColor;
+    size: number;
+    opacity?: number;
+    palette: ThemeAwareColor[];
+    sizes?: number[];
+    arrows?: {
+        start?: {
+            enabled: boolean;
+            style?: 'triangle' | 'open' | 'diamond' | 'circle';
+        };
+        end?: {
+            enabled: boolean;
+            style?: 'triangle' | 'open' | 'diamond' | 'circle';
+        };
+    };
+}
+export interface KritzelShapeToolConfig {
+    shapeType: ShapeType;
+    fillColor: ThemeAwareColor;
+    strokeColor: ThemeAwareColor;
+    strokeWidth: number;
+    opacity?: number;
+    fontColor: ThemeAwareColor;
+    fontSize: number;
+    fontFamily: string;
+    palette: ThemeAwareColor[];
+    sizes?: number[];
+}

package/dist/types/interfaces/undo-state.interface.d.ts

@@ -0,0 +1,6 @@
+export interface KritzelUndoState {
+    canUndo: boolean;
+    canRedo: boolean;
+    undoStackSize: number;
+    redoStackSize: number;
+}

package/dist/types/interfaces/user.interface.d.ts

@@ -0,0 +1,22 @@
+export interface IKritzelUser {
+    /** Unique user identifier */
+    id: string;
+    /** User's first name */
+    firstName?: string;
+    /** User's last name */
+    lastName?: string;
+    /** Display name (takes precedence over firstName/lastName for display) */
+    displayName?: string;
+    /** User's email address */
+    email?: string;
+    /** URL to the user's profile image */
+    profileImageUrl?: string;
+    /** OAuth provider name (e.g., 'google', 'github', 'microsoft') */
+    oauthProvider?: string;
+    /** OAuth provider-specific user identifier */
+    oauthProviderId?: string;
+    /** User's preferred color (for avatar background when showing initials) */
+    color?: string;
+    /** Whether the user is a guest (not authenticated) */
+    isGuest?: boolean;
+}

package/dist/types/interfaces/viewport-state.interface.d.ts

@@ -0,0 +1,7 @@
+export interface KritzelViewportState {
+    translateX: number;
+    translateY: number;
+    scale: number;
+    width: number;
+    height: number;
+}

package/dist/types/locales/de-locale.d.ts

@@ -0,0 +1,5 @@
+import { KritzelLocale } from '../interfaces/localization.interface';
+/**
+ * Built-in German locale.
+ */
+export declare const DE_LOCALE: KritzelLocale;