kritzel-react 0.1.30 → 0.1.32

package/dist/types/kritzel-stencil/src/interfaces/theme.interface.d.ts

@@ -0,0 +1,330 @@
+/**
+ * Theme name type for available themes
+ */
+export type ThemeName = 'light' | 'dark';
+/**
+ * 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;
+        borderColor?: string;
+        focusRingColor?: string;
+        hoverBackground?: string;
+        pointerCursor?: string;
+        scrollbarThumbColor?: string;
+        textPrimary?: string;
+        textSecondary?: string;
+        iconColor?: string;
+        snapIndicatorFill?: string;
+        snapIndicatorStroke?: string;
+        snapLineStroke?: 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;
+    };
+    /** 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;
+        itemActiveBackgroundColor?: string;
+        itemBorderRadius?: string;
+        itemColor?: string;
+        itemDisabledColor?: string;
+        itemFontSize?: string;
+        itemGap?: string;
+        itemHoverBackgroundColor?: string;
+        itemPadding?: string;
+        padding?: string;
+    };
+    /** Controls variables */
+    controls?: {
+        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;
+    };
+    /** 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;
+        hoverBackgroundColor?: string;
+        selectedBackgroundColor?: string;
+        textColor?: string;
+    };
+    /** Editor variables */
+    editor?: {
+        controlsBottom?: string;
+        controlsTransform?: string;
+        controlsTransition?: string;
+        controlsTransitionDuration?: 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;
+    };
+    /** 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;
+    };
+    /** Numeric input variables */
+    numericInput?: {
+        borderColor?: string;
+        focusBorderColor?: string;
+        hoverBorderColor?: string;
+        inputBackground?: string;
+        labelColor?: string;
+        spinnerActiveBackground?: string;
+        spinnerBackground?: string;
+        spinnerColor?: string;
+        spinnerHoverBackground?: string;
+        textColor?: string;
+    };
+    /** Opacity slider variables */
+    opacitySlider?: {
+        activeColor?: string;
+        thumbBorderColor?: string;
+        thumbColor?: string;
+        trackColor?: string;
+    };
+    /** Portal variables */
+    portal?: {
+        maxHeight?: string;
+    };
+    /** Selection variables */
+    selection?: {
+        borderColor?: string;
+        borderWidth?: string;
+        handleColor?: string;
+        handleSize?: string;
+        handleStrokeColor?: string;
+    };
+    /** Settings variables */
+    settings?: {
+        contentHeadingColor?: string;
+        contentTextColor?: string;
+        descriptionColor?: string;
+        labelColor?: string;
+    };
+    /** Shape fill variables */
+    shapeFill?: {
+        hoverBackgroundColor?: string;
+        optionBackground?: string;
+        selectedBackgroundColor?: string;
+    };
+    /** Slide toggle variables */
+    slideToggle?: {
+        borderRadius?: string;
+        height?: string;
+        thumbColor?: string;
+        thumbSize?: string;
+        trackCheckedColor?: string;
+        trackColor?: string;
+        transitionDuration?: string;
+        width?: 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;
+    };
+    /** 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;
+    };
+}

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

@@ -0,0 +1,26 @@
+import { KritzelBrushTool } from '../classes/tools/brush-tool.class';
+import { KritzelLineTool } from '../classes/tools/line-tool.class';
+import { KritzelShapeTool } from '../classes/tools/shape-tool.class';
+import { KritzelTextTool } from '../classes/tools/text-tool.class';
+import { KritzelSelectionTool } from '../classes/tools/selection-tool.class';
+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';
+    controls: ToolConfigControl[];
+}
+export type ConfigurableTool = KritzelBrushTool | KritzelLineTool | KritzelShapeTool | KritzelTextTool | KritzelSelectionTool;
+export interface ToolDisplayValues {
+    color: string;
+    size: number;
+    fontFamily?: string;
+}

package/dist/types/kritzel-stencil/src/interfaces/tool.interface.d.ts

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

package/dist/types/kritzel-stencil/src/interfaces/toolbar-control.interface.d.ts

@@ -0,0 +1,58 @@
+import { KritzelBaseTool } from '../classes/tools/base-tool.class';
+import { ShapeType } from '../enums/shape-type.enum';
+import { ThemeAwareColor } from '../constants/color-palette.constants';
+export interface KritzelToolbarSubOption {
+    id: string;
+    icon: string;
+    label: string;
+    value: any;
+    toolProperty: string;
+}
+export interface KritzelToolbarControl {
+    type: 'tool' | 'config';
+    tool?: (new (...args: any[]) => KritzelBaseTool) | KritzelBaseTool;
+    icon?: string;
+    isDefault?: boolean;
+    name: string;
+    config?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig | KritzelShapeToolConfig;
+    subOptions?: KritzelToolbarSubOption[];
+}
+export interface KritzelTextToolConfig {
+    color: ThemeAwareColor;
+    size: number;
+    fontFamily: string;
+    palette: ThemeAwareColor[];
+}
+export interface KritzelBrushToolConfig {
+    type: 'pen' | 'highlighter';
+    color: ThemeAwareColor;
+    size: number;
+    palettes: {
+        [brushType: string]: ThemeAwareColor[];
+    };
+}
+export interface KritzelLineToolConfig {
+    color: ThemeAwareColor;
+    size: number;
+    palette: ThemeAwareColor[];
+    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;
+    fontColor: ThemeAwareColor;
+    fontSize: number;
+    fontFamily: string;
+    palette: ThemeAwareColor[];
+}

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

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

package/dist/types/kritzel-stencil/src/themes/dark-theme.d.ts

@@ -0,0 +1,5 @@
+import { KritzelTheme } from '../interfaces/theme.interface';
+/**
+ * Dark theme preset
+ */
+export declare const darkTheme: KritzelTheme;

package/dist/types/kritzel-stencil/src/themes/light-theme.d.ts

@@ -0,0 +1,5 @@
+import { KritzelTheme } from '../interfaces/theme.interface';
+/**
+ * Light theme preset - the default theme
+ */
+export declare const lightTheme: KritzelTheme;

package/dist/types/kritzel-stencil/src/types/shortcut.type.d.ts

@@ -0,0 +1 @@
+export type ShortcutCategory = 'General' | 'Undo/Redo' | 'Tool Selection' | 'Clipboard' | 'Object Layering' | 'Grouping';

package/dist/types/kritzel-stencil/src/types/state.types.d.ts

@@ -0,0 +1,3 @@
+import { KritzelEngineState } from "../interfaces/engine-state.interface";
+export type StatePropertyKey = keyof KritzelEngineState;
+export type StateChangeListener<T = any> = (newValue: T, oldValue: T, propertyName: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kritzel-react",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "homepage": "https://gitlab.com/kasual1/kritzel#readme",
   "license": "ISC",
   "main": "dist/index.js",
@@ -20,7 +20,7 @@
     "@stencil/react-output-target": "^1.2.0"
   },
   "peerDependencies": {
-    "kritzel-stencil": "^0.1.30"
+    "kritzel-stencil": "^0.1.32"
   },
   "repository": {
     "type": "git",