kritzel-stencil 0.3.8 → 0.3.10

package/dist/types/components.d.ts

@@ -8,7 +8,8 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IKritzelUser } from "./interfaces/user.interface";
 import { KritzelCore } from "./classes/core/core.class";
 import { BrushStyleOption } from "./components/shared/kritzel-brush-style/kritzel-brush-style";
-import { ThemeAwareColor, ThemeMode } from "./constants/color-palette.constants";
+import { ThemeAwareColor } from "./constants/color-palette.constants";
+import { KritzelTheme, ThemeName } from "./interfaces/theme.interface";
 import { ContextMenuItem } from "./interfaces/context-menu-item.interface";
 import { KritzelBaseObject } from "./classes/objects/base-object.class";
 import { KritzelBrushToolConfig, KritzelLineToolConfig, KritzelShapeToolConfig, KritzelTextToolConfig, KritzelToolbarControl } from "./interfaces/toolbar-control.interface";
@@ -21,7 +22,6 @@ import { KritzelAssetStorageConfig } from "./interfaces/asset-storage-config.int
 import { KritzelLoginConfig, KritzelLoginProvider } from "./interfaces/login-config.interface";
 import { ActiveWorkspaceChangeEvent, EditorIsReadyEvent, KritzelUndoState as KritzelUndoState1, LoginEvent as LoginEvent1 } from ".";
 import { ObjectsAddedEvent, ObjectsRemovedEvent, ObjectsUpdatedEvent } from "./interfaces/object-change-event.interface";
-import { ThemeName } from "./interfaces/theme.interface";
 import { KritzelViewportState } from "./interfaces/viewport-state.interface";
 import { LoginEvent } from "./events/login.event";
 import { IKritzelIsPublicChangedEvent } from "./interfaces/share.interface";
@@ -46,7 +46,8 @@ import { ConfigurableTool, ToolDisplayValues } from "./interfaces/tool-config.in
 export { IKritzelUser } from "./interfaces/user.interface";
 export { KritzelCore } from "./classes/core/core.class";
 export { BrushStyleOption } from "./components/shared/kritzel-brush-style/kritzel-brush-style";
-export { ThemeAwareColor, ThemeMode } from "./constants/color-palette.constants";
+export { ThemeAwareColor } from "./constants/color-palette.constants";
+export { KritzelTheme, ThemeName } from "./interfaces/theme.interface";
 export { ContextMenuItem } from "./interfaces/context-menu-item.interface";
 export { KritzelBaseObject } from "./classes/objects/base-object.class";
 export { KritzelBrushToolConfig, KritzelLineToolConfig, KritzelShapeToolConfig, KritzelTextToolConfig, KritzelToolbarControl } from "./interfaces/toolbar-control.interface";
@@ -59,7 +60,6 @@ export { KritzelAssetStorageConfig } from "./interfaces/asset-storage-config.int
 export { KritzelLoginConfig, KritzelLoginProvider } from "./interfaces/login-config.interface";
 export { ActiveWorkspaceChangeEvent, EditorIsReadyEvent, KritzelUndoState as KritzelUndoState1, LoginEvent as LoginEvent1 } from ".";
 export { ObjectsAddedEvent, ObjectsRemovedEvent, ObjectsUpdatedEvent } from "./interfaces/object-change-event.interface";
-export { ThemeName } from "./interfaces/theme.interface";
 export { KritzelViewportState } from "./interfaces/viewport-state.interface";
 export { LoginEvent } from "./events/login.event";
 export { IKritzelIsPublicChangedEvent } from "./interfaces/share.interface";
@@ -178,7 +178,7 @@ export namespace Components {
           * @default 24
          */
         "size": number;
-        "theme": ThemeMode;
+        "theme": ThemeName;
         "value": string | ThemeAwareColor;
     }
     interface KritzelColorPalette {
@@ -202,7 +202,7 @@ export namespace Components {
           * @default null
          */
         "selectedColor": ThemeAwareColor | null;
-        "theme": ThemeMode;
+        "theme": ThemeName;
     }
     interface KritzelContextMenu {
         "items": ContextMenuItem[];
@@ -222,7 +222,10 @@ export namespace Components {
           * @default true
          */
         "isUtilityPanelVisible": boolean;
-        "theme": ThemeMode;
+        /**
+          * @default 'light'
+         */
+        "theme": ThemeName;
         /**
           * @default null
          */
@@ -365,6 +368,8 @@ export namespace Components {
          */
         "editorId"?: string;
         "enable": () => Promise<void>;
+        "exportSelectedObjectsAsPng": () => Promise<void>;
+        "exportSelectedObjectsAsSvg": () => Promise<void>;
         "exportViewportAsPng": () => Promise<void>;
         "exportViewportAsSvg": () => Promise<void>;
         "findObjects": <T extends KritzelBaseObject>(predicate: (obj: KritzelBaseObject<Element>) => boolean) => Promise<T[]>;
@@ -422,6 +427,7 @@ export namespace Components {
           * @default [     { label: 'Copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },     { label: 'Cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },     {       label: 'Paste',       icon: 'paste',       group: 'clipboard',       disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,       action: (menu, _) => this.engineRef.paste(menu.x, menu.y),     },     {       label: 'Order',       icon: 'ordering',       group: 'other',       children: [         { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },         { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },         { label: 'Move Up', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },         { label: 'Move Down', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },       ],     },     {       label: 'Align',       icon: 'align',       group: 'other',       disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,       children: [         { label: 'Align Left', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },         { label: 'Align Center Horizontally', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },         { label: 'Align Right', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },         { label: 'Align Top', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },         { label: 'Align Center Vertically', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },         { label: 'Align Bottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },       ],     },     {       label: 'Group',       icon: 'group',       group: 'other',       children: [         {           label: 'Group',           icon: 'group',           disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,           action: () => this.engineRef.group(),         },         {           label: 'Ungroup',           icon: 'ungroup',           disabled: async () => {             const selectedObjects = await this.engineRef.getSelectedObjects();             return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');           },           action: () => this.engineRef.ungroup(),         },       ],     },     {       label: 'Export',       icon: 'download',       group: 'export',       children: [         { label: 'Export as SVG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },         { label: 'Export as PNG', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },       ],     },     { label: 'Delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },   ]
          */
         "objectContextMenuItems": ContextMenuItem[];
+        "openContextMenu": (options: { x: number; y: number; objectId?: string; }) => Promise<void>;
         "openLoginDialog": () => Promise<void>;
         "panTo": (x: number, y: number) => Promise<void>;
         "paste": (x: number, y: number) => Promise<void>;
@@ -448,6 +454,11 @@ export namespace Components {
           * @default DEFAULT_SYNC_CONFIG
          */
         "syncConfig"?: KritzelSyncConfig;
+        /**
+          * @default 'light'
+         */
+        "theme": ThemeName;
+        "themes"?: KritzelTheme[];
         "triggerSelectionChange": () => Promise<void>;
         "undo": () => Promise<void>;
         "ungroup": () => Promise<void>;
@@ -736,6 +747,13 @@ export namespace Components {
           * Context menu items shown when right-clicking a selected object.
          */
         "objectContextMenuItems": ContextMenuItem[];
+        /**
+          * Programmatically opens the context menu at a specified world-coordinate position. If `objectId` is provided and found, the object context menu is shown for that object. If no `objectId` is provided but a selection group already exists, the object context menu is shown. Otherwise, the global context menu is shown.
+          * @param options.x - The X position in world (canvas) coordinates.
+          * @param options.y - The Y position in world (canvas) coordinates.
+          * @param options.objectId - Optional ID of an object to select and show the object context menu for.
+         */
+        "openContextMenu": (options: { x: number; y: number; objectId?: string; }) => Promise<void>;
         /**
           * Pans the viewport to center on the given world coordinates without changing the scale.
           * @param x - X position in world coordinates to center on.
@@ -827,6 +845,10 @@ export namespace Components {
           * @default 'light'
          */
         "theme": ThemeName;
+        /**
+          * An array of available themes for the editor.
+         */
+        "themes"?: KritzelTheme[];
         /**
           * Manually triggers the `objectsSelectionChange` event.
          */
@@ -1159,13 +1181,17 @@ export namespace Components {
         "offsetY": number;
     }
     interface KritzelSettings {
+        /**
+          * Keyboard shortcuts to display in the settings dialog
+          * @default ['light', 'dark']
+         */
+        "availableThemes": string[];
         "open": () => Promise<void>;
         /**
           * Current settings values. Used to initialize and sync the component's internal state.
          */
         "settings"?: Partial<KritzelSettingsConfig>;
         /**
-          * Keyboard shortcuts to display in the settings dialog
           * @default []
          */
         "shortcuts": Omit<KritzelShortcut, 'action' | 'condition'>[];
@@ -1258,7 +1284,7 @@ export namespace Components {
           * @default false
          */
         "isExpanded": boolean;
-        "theme": ThemeMode;
+        "theme": ThemeName;
         "tool": ConfigurableTool;
     }
     interface KritzelTooltip {
@@ -2279,7 +2305,7 @@ declare namespace LocalJSX {
           * @default 24
          */
         "size"?: number;
-        "theme"?: ThemeMode;
+        "theme"?: ThemeName;
         "value"?: string | ThemeAwareColor;
     }
     interface KritzelColorPalette {
@@ -2304,7 +2330,7 @@ declare namespace LocalJSX {
           * @default null
          */
         "selectedColor"?: ThemeAwareColor | null;
-        "theme"?: ThemeMode;
+        "theme"?: ThemeName;
     }
     interface KritzelContextMenu {
         "items"?: ContextMenuItem[];
@@ -2326,7 +2352,10 @@ declare namespace LocalJSX {
          */
         "isUtilityPanelVisible"?: boolean;
         "onIsControlsReady"?: (event: KritzelControlsCustomEvent<void>) => void;
-        "theme"?: ThemeMode;
+        /**
+          * @default 'light'
+         */
+        "theme"?: ThemeName;
         /**
           * @default null
          */
@@ -2518,6 +2547,11 @@ declare namespace LocalJSX {
           * @default DEFAULT_SYNC_CONFIG
          */
         "syncConfig"?: KritzelSyncConfig;
+        /**
+          * @default 'light'
+         */
+        "theme"?: ThemeName;
+        "themes"?: KritzelTheme[];
         "user"?: IKritzelUser;
         /**
           * @default Infinity
@@ -2654,6 +2688,10 @@ declare namespace LocalJSX {
           * @default 'light'
          */
         "theme"?: ThemeName;
+        /**
+          * An array of available themes for the editor.
+         */
+        "themes"?: KritzelTheme[];
         /**
           * The current user for awareness broadcasting (name, id, cursor position).
          */
@@ -2980,6 +3018,11 @@ declare namespace LocalJSX {
         "onClose"?: (event: KritzelPortalCustomEvent<void>) => void;
     }
     interface KritzelSettings {
+        /**
+          * Keyboard shortcuts to display in the settings dialog
+          * @default ['light', 'dark']
+         */
+        "availableThemes"?: string[];
         /**
           * Emitted when settings change
          */
@@ -2989,7 +3032,6 @@ declare namespace LocalJSX {
          */
         "settings"?: Partial<KritzelSettingsConfig>;
         /**
-          * Keyboard shortcuts to display in the settings dialog
           * @default []
          */
         "shortcuts"?: Omit<KritzelShortcut, 'action' | 'condition'>[];
@@ -3096,7 +3138,7 @@ declare namespace LocalJSX {
         "isExpanded"?: boolean;
         "onDisplayValuesChange"?: (event: KritzelToolConfigCustomEvent<ToolDisplayValues>) => void;
         "onToolChange"?: (event: KritzelToolConfigCustomEvent<ConfigurableTool>) => void;
-        "theme"?: ThemeMode;
+        "theme"?: ThemeName;
         "tool"?: ConfigurableTool;
     }
     interface KritzelTooltip {
@@ -3165,18 +3207,18 @@ declare namespace LocalJSX {
     }
     interface KritzelColorAttributes {
         "value": string | ThemeAwareColor;
-        "theme": ThemeMode;
+        "theme": ThemeName;
         "size": number;
     }
     interface KritzelColorPaletteAttributes {
         "isExpanded": boolean;
         "isOpaque": boolean;
         "opacity": number;
-        "theme": ThemeMode;
+        "theme": ThemeName;
     }
     interface KritzelControlsAttributes {
         "isUtilityPanelVisible": boolean;
-        "theme": ThemeMode;
+        "theme": ThemeName;
     }
     interface KritzelCurrentUserAttributes {
         "avatarSize": number;
@@ -3207,6 +3249,7 @@ declare namespace LocalJSX {
         "viewportBoundaryTop": number;
         "viewportBoundaryBottom": number;
         "wheelEnabled": boolean;
+        "theme": ThemeName;
         "isControlsVisible": boolean;
         "isUtilityPanelVisible": boolean;
         "isWorkspaceManagerVisible": boolean;
@@ -3316,7 +3359,7 @@ declare namespace LocalJSX {
     }
     interface KritzelToolConfigAttributes {
         "isExpanded": boolean;
-        "theme": ThemeMode;
+        "theme": ThemeName;
     }
     interface KritzelTooltipAttributes {
         "isVisible": boolean;

package/dist/types/constants/color-palette.constants.d.ts

@@ -1,7 +1,7 @@
+import { ThemeName } from '../interfaces/theme.interface';
 /**
  * Supported theme modes for color variations
  */
-export type ThemeMode = 'light' | 'dark';
 /**
  * Color definition with different values per theme
  */
@@ -10,6 +10,8 @@ export interface ThemeAwareColor {
     light: string;
     /** Color value for dark theme */
     dark: string;
+    /** Custom colors based on new themes */
+    [key: string]: string | undefined;
     /** Optional semantic label for the color */
     label?: string;
 }
@@ -20,7 +22,7 @@ export type ColorPalette = readonly ThemeAwareColor[];
 /**
  * Helper function to resolve a color value for a specific theme
  */
-export declare function resolveColor(color: ThemeAwareColor, theme: ThemeMode): string;
+export declare function resolveColor(color: ThemeAwareColor, theme: ThemeName): string;
 /**
  * Default color palette shared across all tool configurations.
  * This ensures consistency in color options throughout the application.

package/dist/types/constants/version.d.ts

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export declare const KRITZEL_VERSION = "0.3.8";
+export declare const KRITZEL_VERSION = "0.3.10";

package/dist/types/helpers/color.helper.d.ts

@@ -1,4 +1,5 @@
-import { ThemeAwareColor, ThemeMode } from '../constants/color-palette.constants';
+import { ThemeAwareColor } from '../constants/color-palette.constants';
+import { ThemeName } from '../interfaces/theme.interface';
 export declare class KritzelColorHelper {
     /**
      * Resolves a color value based on the current theme.
@@ -7,7 +8,7 @@ export declare class KritzelColorHelper {
      * @param theme - Optional theme to use. If not provided, uses current theme from ThemeManager
      * @returns The resolved hex color string, or empty string if color is undefined
      */
-    static resolveThemeColor(color: ThemeAwareColor | undefined, theme?: ThemeMode): string;
+    static resolveThemeColor(color: ThemeAwareColor | undefined, theme?: ThemeName): string;
     /**
      * Applies opacity to a theme-aware color and returns an rgba string.
      * @param color - The theme-aware color object or a hex color string
@@ -15,7 +16,7 @@ export declare class KritzelColorHelper {
      * @param theme - Optional theme to use. If not provided, uses current theme from ThemeManager
      * @returns The color as an rgba string, or the resolved hex if opacity is 1
      */
-    static applyOpacity(color: ThemeAwareColor | string | undefined, opacity: number, theme?: ThemeMode): string;
+    static applyOpacity(color: ThemeAwareColor | string | undefined, opacity: number, theme?: ThemeName): string;
     /**
      * Determines the appropriate contrast color (black or white) based on the luminance of the given hex color.
      * Uses the relative luminance formula: 0.299*R + 0.587*G + 0.114*B

package/dist/types/helpers/svg-export.helper.d.ts

@@ -1,12 +1,12 @@
 import { KritzelBaseObject } from '../classes/objects/base-object.class';
-import { ThemeMode } from '../constants/color-palette.constants';
+import { ThemeName } from '../interfaces/theme.interface';
 import { KritzelBoundingBox } from '../interfaces/bounding-box.interface';
 /**
  * Options for SVG export.
  */
 export interface SvgExportOptions {
     /** Theme to use for resolving theme-aware colors. Defaults to current theme. */
-    theme?: ThemeMode;
+    theme?: ThemeName;
     /** Padding around the exported content in world units. Defaults to 0. */
     padding?: number;
     /** Whether to include XML declaration. Defaults to true. */
@@ -58,7 +58,7 @@ export declare class KritzelSvgExportHelper {
      * @param theme - Theme for color resolution
      * @returns SVG element string, or empty string if object type is not supported
      */
-    static objectToSvgElement(object: KritzelBaseObject, theme?: ThemeMode): string;
+    static objectToSvgElement(object: KritzelBaseObject, theme?: ThemeName): string;
     /**
      * Converts a KritzelPath to SVG.
      * @param path - The path object

package/dist/types/index.d.ts

@@ -8,6 +8,7 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export type * from './components';
+export * from './classes/objects/base-object.class';
 export * from './classes/objects/text.class';
 export * from './classes/objects/path.class';
 export * from './classes/objects/image.class';
@@ -36,6 +37,7 @@ export * from './classes/managers/anchor.manager';
 export * from './classes/managers/theme.manager';
 export * from './interfaces/toolbar-control.interface';
 export * from './interfaces/menu-item.interface';
+export * from './interfaces/object-change-event.interface';
 export * from './interfaces/sync-provider.interface';
 export * from './interfaces/sync-config.interface';
 export * from './interfaces/asset.interface';

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

@@ -1,7 +1,7 @@
 /**
  * Theme name type for available themes
  */
-export type ThemeName = 'light' | 'dark';
+export type ThemeName = 'light' | 'dark' | (string & NonNullable<unknown>);
 /**
  * Complete theme definition with all CSS variable values grouped by category
  */
@@ -17,14 +17,15 @@ export interface KritzelTheme {
         fontFamily?: string;
         borderColor?: string;
         focusRingColor?: string;
-        pointerCursor?: string;
+        iconColor?: string;
         primaryColor?: string;
         primaryHoverColor?: string;
         primaryTextColor?: string;
         scrollbarThumbColor?: string;
         textPrimary?: string;
         textSecondary?: string;
-        iconColor?: string;
+        name?: string;
+        pointerCursor?: string;
     };
     /** Active users variables */
     activeUsers?: {
@@ -129,6 +130,7 @@ export interface KritzelTheme {
         controlSelectedColor?: string;
         gap?: string;
         padding?: string;
+        separatorColor?: string;
     };
     /** Current user dialog variables */
     currentUserDialog?: {
@@ -345,6 +347,8 @@ export interface KritzelTheme {
     selection?: {
         borderColor?: string;
         borderWidth?: string;
+        boxBackgroundColor?: string;
+        boxBorderColor?: string;
         handleColor?: string;
         handleSize?: string;
         handleStrokeColor?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kritzel-stencil",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/components/p-B8wX0-3H.js

@@ -1 +0,0 @@
-import{p as e,H as t,c as s,h as i,d as o,t as n}from"./p-BWj1eE2b.js";import{a,C as l}from"./p-CW-VyJgK.js";import{d as r}from"./p-BTSOqHMI.js";import{d as c}from"./p-A7Ult9iv.js";import{d as h}from"./p-Czaea0WP.js";import{d}from"./p-B5a3arJg.js";import{d as g}from"./p-CTj2UdbS.js";const p=-1/0,u=1/0,m=-1/0,f=1/0,b={showViewportInfo:!1,showObjectInfo:!1,showSyncProviderInfo:!0,showMigrationInfo:!0},v=[{id:"general",label:"General",icon:"settings"},{id:"viewport",label:"Viewport",icon:"viewport"},{id:"shortcuts",label:"Keyboard Shortcuts",icon:"command"},{id:"developer",label:"Developer Options",icon:"braces"},{id:"about",label:"About",icon:"info"}],k=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.settingsChange=s(this,"settingsChange")}get host(){return this}shortcuts=[];settings;onSettingsPropChange(e){e&&this.applySettings(e)}isDialogOpen=!1;selectedCategoryId=v[0].id;scaleMin=1e-4;scaleMax=1e3;lockDrawingScale=!0;currentTheme="light";viewportBoundaryLeft=p;viewportBoundaryRight=u;viewportBoundaryTop=m;viewportBoundaryBottom=f;debugInfo={...b};settingsChange;componentWillLoad(){this.settings&&this.applySettings(this.settings)}applySettings(e){"number"==typeof e.scaleMin&&(this.scaleMin=e.scaleMin),"number"==typeof e.scaleMax&&(this.scaleMax=e.scaleMax),"boolean"==typeof e.lockDrawingScale&&(this.lockDrawingScale=e.lockDrawingScale),"light"!==e.theme&&"dark"!==e.theme||(this.currentTheme=e.theme),"number"==typeof e.viewportBoundaryLeft&&(this.viewportBoundaryLeft=e.viewportBoundaryLeft),"number"==typeof e.viewportBoundaryRight&&(this.viewportBoundaryRight=e.viewportBoundaryRight),"number"==typeof e.viewportBoundaryTop&&(this.viewportBoundaryTop=e.viewportBoundaryTop),"number"==typeof e.viewportBoundaryBottom&&(this.viewportBoundaryBottom=e.viewportBoundaryBottom),e.debugInfo&&(this.debugInfo={...b,...e.debugInfo})}emitSettings(){this.settingsChange.emit({scaleMin:this.scaleMin,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,theme:this.currentTheme,viewportBoundaryLeft:this.viewportBoundaryLeft,viewportBoundaryRight:this.viewportBoundaryRight,viewportBoundaryTop:this.viewportBoundaryTop,viewportBoundaryBottom:this.viewportBoundaryBottom,debugInfo:this.debugInfo})}handleScaleMinChange=e=>{this.scaleMin=e.detail,this.emitSettings()};handleScaleMaxChange=e=>{this.scaleMax=e.detail,this.emitSettings()};handleLockDrawingScaleChange=e=>{this.lockDrawingScale=e.detail,this.emitSettings()};handleThemeChange=e=>{this.currentTheme=e.detail?"dark":"light",this.emitSettings()};handleViewportBoundaryLeftChange=e=>{this.viewportBoundaryLeft=e.detail??p,this.emitSettings()};handleViewportBoundaryRightChange=e=>{this.viewportBoundaryRight=e.detail??u,this.emitSettings()};handleViewportBoundaryTopChange=e=>{this.viewportBoundaryTop=e.detail??m,this.emitSettings()};handleViewportBoundaryBottomChange=e=>{this.viewportBoundaryBottom=e.detail??f,this.emitSettings()};handleDebugInfoChange=e=>t=>{this.debugInfo={...this.debugInfo,[e]:t.detail},this.emitSettings()};async open(){this.isDialogOpen=!0}closeDialog=()=>{this.isDialogOpen=!1};handleCategorySelect=e=>{this.selectedCategoryId=e.detail.item.id};formatKeyCombo(e){const t=[];return e.ctrl&&t.push("Ctrl"),e.shift&&t.push("Shift"),t.push(this.formatKey(e.key)),t.join("+")}formatKey(e){return{Escape:"Esc",Delete:"Del"," ":"Space"}[e]??e.toUpperCase()}groupShortcutsByCategory(){const e=new Map;for(const t of this.shortcuts){const s=e.get(t.category)||[];s.push(t),e.set(t.category,s)}return e}renderCategoryContent(){switch(this.selectedCategoryId){case"general":return i("div",{class:"settings-content"},i("h3",null,"General Settings"),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Dark Mode"),i("p",{class:"settings-description"},"Toggle between light and dark color themes for the editor interface."),i("kritzel-slide-toggle",{checked:"dark"===this.currentTheme,label:"Dark Mode",onCheckedChange:this.handleThemeChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Lock Drawing Scale"),i("p",{class:"settings-description"},"When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level."),i("kritzel-slide-toggle",{checked:this.lockDrawingScale,label:"Lock Drawing Scale",onCheckedChange:this.handleLockDrawingScaleChange}))));case"viewport":return i("div",{class:"settings-content"},i("h3",null,"Viewport Settings"),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Minimum Zoom Level"),i("p",{class:"settings-description"},"Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas."),i("kritzel-numeric-input",{value:this.scaleMin,min:1e-4,max:1,step:1e-4,onValueChange:this.handleScaleMinChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Maximum Zoom Level"),i("p",{class:"settings-description"},"Sets the maximum zoom level. Higher values allow zooming in closer for detailed work."),i("kritzel-numeric-input",{value:this.scaleMax,min:1,max:1e3,step:1,onValueChange:this.handleScaleMaxChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Left"),i("p",{class:"settings-description"},"Left boundary in world coordinates. Set to limit how far left the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryLeft,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryLeftChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Right"),i("p",{class:"settings-description"},"Right boundary in world coordinates. Set to limit how far right the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryRight,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryRightChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Top"),i("p",{class:"settings-description"},"Top boundary in world coordinates. Set to limit how far up the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryTop,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryTopChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Bottom"),i("p",{class:"settings-description"},"Bottom boundary in world coordinates. Set to limit how far down the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryBottom,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryBottomChange}))));case"shortcuts":return i("div",{class:"settings-content"},i("h3",null,"Keyboard Shortcuts"),i("div",{class:"shortcuts-list"},Array.from(this.groupShortcutsByCategory()).map((([e,t])=>i("div",{class:"shortcuts-category",key:e},i("h4",{class:"shortcuts-category-title"},e),i("div",{class:"shortcuts-group"},t.map((e=>i("div",{class:"shortcut-item",key:e.key+e.label},i("span",{class:"shortcut-label"},e.label),i("kbd",{class:"shortcut-key"},this.formatKeyCombo(e)))))))))));case"developer":return i("div",{class:"settings-content"},i("h3",null,"Developer Options"),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Viewport Info"),i("p",{class:"settings-description"},"Display viewport debug information such as position, zoom level, and boundaries."),i("kritzel-slide-toggle",{checked:this.debugInfo.showViewportInfo,label:"Show Viewport Info",onCheckedChange:this.handleDebugInfoChange("showViewportInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Object Info"),i("p",{class:"settings-description"},"Display debug information about objects on the canvas."),i("kritzel-slide-toggle",{checked:this.debugInfo.showObjectInfo,label:"Show Object Info",onCheckedChange:this.handleDebugInfoChange("showObjectInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Sync Provider Info"),i("p",{class:"settings-description"},"Display debug information about the sync provider connection status."),i("kritzel-slide-toggle",{checked:this.debugInfo.showSyncProviderInfo,label:"Show Sync Provider Info",onCheckedChange:this.handleDebugInfoChange("showSyncProviderInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Migration Info"),i("p",{class:"settings-description"},"Display debug information about data migrations."),i("kritzel-slide-toggle",{checked:this.debugInfo.showMigrationInfo,label:"Show Migration Info",onCheckedChange:this.handleDebugInfoChange("showMigrationInfo")}))));case"about":return i("div",{class:"settings-content"},i("h3",null,"About"),i("p",null,"Kritzel - A drawing application"),i("p",{class:"version-info"},"Version ","0.3.8"),i("p",{class:"version-info"},"App-State Schema v",l),i("p",{class:"version-info"},"Workspace Schema v",a));default:return null}}render(){return i(o,{key:"e86192a8ca49f8618d58ede4d04d321ea238d7d4"},i("kritzel-dialog",{key:"23a47a8cd9281794bfd2aec7edd6a4ef4b931550",isOpen:this.isDialogOpen,dialogTitle:"Settings",size:"large",contained:!0,onDialogClose:this.closeDialog},i("kritzel-master-detail",{key:"007c8a1c04bd0d692b55d88988b0f8874f9242a4",items:v,selectedItemId:this.selectedCategoryId,onItemSelect:this.handleCategorySelect},this.renderCategoryContent())))}static get watchers(){return{settings:[{onSettingsPropChange:0}]}}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}"}},[513,"kritzel-settings",{shortcuts:[16],settings:[16],isDialogOpen:[32],selectedCategoryId:[32],scaleMin:[32],scaleMax:[32],lockDrawingScale:[32],currentTheme:[32],viewportBoundaryLeft:[32],viewportBoundaryRight:[32],viewportBoundaryTop:[32],viewportBoundaryBottom:[32],debugInfo:[32],open:[64]},void 0,{settings:[{onSettingsPropChange:0}]}]);function w(){"undefined"!=typeof customElements&&["kritzel-settings","kritzel-dialog","kritzel-icon","kritzel-master-detail","kritzel-numeric-input","kritzel-slide-toggle"].forEach((e=>{switch(e){case"kritzel-settings":customElements.get(n(e))||customElements.define(n(e),k);break;case"kritzel-dialog":customElements.get(n(e))||r();break;case"kritzel-icon":customElements.get(n(e))||c();break;case"kritzel-master-detail":customElements.get(n(e))||h();break;case"kritzel-numeric-input":customElements.get(n(e))||d();break;case"kritzel-slide-toggle":customElements.get(n(e))||g()}}))}export{k as K,w as d}

package/dist/components/p-BvgGpgKP.js

@@ -1 +0,0 @@
-import{p as e,H as t,c as i,h as n,d as o,t as s}from"./p-BWj1eE2b.js";import{d as r}from"./p-A7Ult9iv.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.actionSelected=i(this,"actionSelected"),this.close=i(this,"close")}get host(){return this}items;onItemsChanged(){this.updateMenuItems()}objects;actionSelected;close;processedItems=[];openSubmenuIndex=null;submenuPosition="right";submenuTimer=null;submenuRefs=new Map;menuItemWrapperRefs=new Map;handleOutsideClick(e){e.composedPath().includes(this.host)||this.close.emit()}componentWillLoad(){this.updateMenuItems()}componentDidLoad(){this.adjustPositionToViewport()}componentDidUpdate(){this.adjustPositionToViewport(),this.adjustSubmenuPosition()}disconnectedCallback(){this.submenuTimer&&clearTimeout(this.submenuTimer)}adjustPositionToViewport(){const e=this.host.getBoundingClientRect(),t=window.innerWidth,i=window.innerHeight,n=parseFloat(this.host.style.left)||0,o=parseFloat(this.host.style.top)||0;let s=n,r=o;e.right>t-8&&(s=t-e.width-8),e.bottom>i-8&&(r=i-e.height-8),s<8&&(s=8),r<8&&(r=8),s===n&&r===o||(this.host.style.left=`${s}px`,this.host.style.top=`${r}px`)}adjustSubmenuPosition(){if(null===this.openSubmenuIndex)return;const e=this.submenuRefs.get(this.openSubmenuIndex);if(!e)return;const t=e.getBoundingClientRect(),i=window.innerHeight;e.style.top=t.bottom>i-8?-(t.bottom-(i-8))+"px":"0px"}handleItemClick(e,t,i){t||i||e.action&&this.actionSelected.emit(e)}handleItemMouseEnter(e,t){this.submenuTimer&&(clearTimeout(this.submenuTimer),this.submenuTimer=null),this.submenuTimer=t?setTimeout((()=>{const t=this.menuItemWrapperRefs.get(e);if(t){const e=t.getBoundingClientRect(),i=window.innerWidth;this.submenuPosition=e.right+160>i-8?"left":"right"}else this.submenuPosition="right";this.openSubmenuIndex=e}),150):setTimeout((()=>{this.openSubmenuIndex=null}),150)}handleSubmenuMouseEnter(){this.submenuTimer&&(clearTimeout(this.submenuTimer),this.submenuTimer=null)}handleSubmenuMouseLeave(){this.submenuTimer=setTimeout((()=>{this.openSubmenuIndex=null}),150)}async updateMenuItems(){this.processedItems=await this.processItems(this.items)}async processItems(e){const t=[];for(const i of e)if(await this.evaluateProperty(i.visible,!0)){const e=await this.evaluateProperty(i.disabled,!1);let n;i.children&&i.children.length>0&&(n=await this.processItems(i.children)),t.push({item:i,isDisabled:e,processedChildren:n})}return t}async evaluateProperty(e,t){return"boolean"==typeof e?e:"function"==typeof e?await Promise.resolve(e(null,this.objects)):t}renderSubmenu(e,t){return n("div",{class:{"submenu-container":!0,"position-left":"left"===this.submenuPosition},ref:e=>e&&this.submenuRefs.set(t,e),onMouseEnter:()=>this.handleSubmenuMouseEnter(),onMouseLeave:()=>this.handleSubmenuMouseLeave()},e.map((({item:t,isDisabled:i,processedChildren:o},s)=>{const r=s>0?e[s-1].item:null,a=o&&o.length>0;return[r&&r.group!==t.group&&n("div",{class:"menu-divider",key:`submenu-divider-${s}`}),n("button",{key:`submenu-${t.label}-${s}`,class:{"menu-item":!0,disabled:i,"has-children":a},onClick:()=>this.handleItemClick(t,i,a),disabled:i},t.icon&&n("kritzel-icon",{name:t.icon,size:16}),n("span",{class:"label"},t.label),a&&n("kritzel-icon",{name:"chevron-right",size:12,class:"submenu-arrow"}))]})))}render(){return n(o,{key:"100ec82feefbc285f8e50fca3f23f853c33aa215"},n("div",{key:"9305a0190bdcf7a9e4b5ae7473651a0261dbfd7c",class:"menu-container"},this.processedItems.map((({item:e,isDisabled:t,processedChildren:i},o)=>{const s=o>0?this.processedItems[o-1].item:null,r=i&&i.length>0,a=this.openSubmenuIndex===o;return[s&&s.group!==e.group&&n("div",{class:"menu-divider",key:`divider-${o}`}),n("div",{class:"menu-item-wrapper",ref:e=>e&&this.menuItemWrapperRefs.set(o,e),onMouseEnter:()=>this.handleItemMouseEnter(o,r)},n("button",{key:`${e.label}-${o}`,class:{"menu-item":!0,disabled:t,"has-children":r,"submenu-open":a},onClick:()=>this.handleItemClick(e,t,r),disabled:t&&!r},e.icon&&n("kritzel-icon",{name:e.icon,size:16}),n("span",{class:"label"},e.label),r&&n("kritzel-icon",{name:"chevron-right",size:12,class:"submenu-arrow"})),r&&a&&this.renderSubmenu(i,o))]}))))}static get watchers(){return{items:[{onItemsChanged:0}]}}static get style(){return":host{display:block}.menu-container{display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:var(--kritzel-context-menu-min-width, 140px)}.menu-item-wrapper{position:relative}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:var(--kritzel-global-pointer-cursor, pointer);font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent;width:100%}.menu-item:not(.disabled):hover,.menu-item.submenu-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa)}.menu-item.has-children.disabled{cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-context-menu-item-color, #333333)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.has-children.disabled kritzel-icon{opacity:0.8}.label{flex-grow:1}.submenu-arrow{margin-left:auto;opacity:0.5}.menu-divider{height:1px;background-color:var(--kritzel-context-menu-divider-color, rgba(0, 0, 0, 0.1));margin:var(--kritzel-context-menu-divider-margin, 4px 8px)}.submenu-container{position:absolute;top:0;left:100%;margin-left:4px;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:120px}.submenu-container.position-left{left:auto;right:100%;margin-left:0;margin-right:4px}"}},[513,"kritzel-context-menu",{items:[16],objects:[16],processedItems:[32],openSubmenuIndex:[32],submenuPosition:[32]},[[9,"pointerdown","handleOutsideClick"]],{items:[{onItemsChanged:0}]}]);function l(){"undefined"!=typeof customElements&&["kritzel-context-menu","kritzel-icon"].forEach((e=>{switch(e){case"kritzel-context-menu":customElements.get(s(e))||customElements.define(s(e),a);break;case"kritzel-icon":customElements.get(s(e))||r()}}))}export{a as K,l as d}

package/dist/components/p-C-sJ1r3g.js

@@ -1 +0,0 @@
-import{p as t,H as e,h as s,d as r,t as o}from"./p-BWj1eE2b.js";import{K as n,a}from"./p-C4bAtxyk.js";const i=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}core;showEdgeIndicators=!0;edgeIndicatorPadding=8;remoteCursors=new Map;objectVersion=0;cleanupIntervalId;objectChangeRafId=null;componentDidLoad(){this.core.store.objects?.onAwarenessChange((t=>{this.handleAwarenessChange(t)})),this.core.store.objects?.onObjectsChange((()=>{this.handleRemoteObjectChange()})),this.cleanupIntervalId=setInterval((()=>{this.cleanupStaleCursors()}),3e3)}disconnectedCallback(){this.cleanupIntervalId&&clearInterval(this.cleanupIntervalId),null!==this.objectChangeRafId&&cancelAnimationFrame(this.objectChangeRafId)}handleAwarenessChange(t){const e=this.core.store.objects?.localClientId,s=Date.now(),r=new Map(this.remoteCursors),o=new Set;t.forEach(((t,n)=>{if(n===e)return;if(!t.user)return;o.add(n);const a=t.user,i=t.cursor,l=t.activeObjectId||null,c=t.selectionBox||null,d=r.get(n);r.set(n,{clientId:n,user:a,cursor:i,activeObjectId:l,selectionBox:c,lastUpdated:s,lastCursorMove:!d||!d.cursor!=!i||i&&d.cursor&&(i.x!==d.cursor.x||i.y!==d.cursor.y)?s:d?.lastCursorMove??s})}));for(const t of r.keys())o.has(t)||r.delete(t);this.remoteCursors=r}cleanupStaleCursors(){const t=Date.now();let e=!1;const s=new Map(this.remoteCursors);for(const[r,o]of s)t-o.lastUpdated>3e4?(s.delete(r),e=!0):!e&&t-o.lastCursorMove>1e4&&(e=!0);e&&(this.remoteCursors=s)}isStale(t){return Date.now()-t.lastCursorMove>1e4}hasActiveDrawingCursors(){for(const t of this.remoteCursors.values())if(t.activeObjectId)return!0;return!1}handleRemoteObjectChange(){this.hasActiveDrawingCursors()&&null===this.objectChangeRafId&&(this.objectChangeRafId=requestAnimationFrame((()=>{this.objectChangeRafId=null,this.objectVersion++})))}getActiveObjectTip(t){const e=this.core.store.objects?.findById(t);if(!e)return null;if(e instanceof n&&!e.isCompleted){const t=e.points[e.points.length-1];return t?{x:(t[0]-e.x)/e.scale+e.translateX,y:(t[1]-e.y)/e.scale+e.translateY}:null}return e instanceof a&&!e.isCompleted?{x:(e.endX-e.x)/e.scale+e.translateX,y:(e.endY-e.y)/e.scale+e.translateY}:null}worldToScreen(t,e){const{scale:s,translateX:r,translateY:o}=this.core.store.state;return{x:t*s+r,y:e*s+o}}isInViewport(t,e){const{viewportWidth:s,viewportHeight:r}=this.core.store.state;return t>=0&&t<=s&&e>=0&&e<=r}clampToEdge(t,e){const{viewportWidth:s,viewportHeight:r}=this.core.store.state,o=this.edgeIndicatorPadding,n=Math.max(o,Math.min(s-o,t)),a=Math.max(o,Math.min(r-o,e)),i=n-o,l=s-o-n,c=a-o;let d="top";const h=Math.min(i,l,c,r-o-a);return d=h===i?"left":h===l?"right":h===c?"top":"bottom",{x:n,y:a,angle:Math.atan2(e-a,t-n),edge:d}}getUserDisplayName(t){return t.displayName?t.displayName:t.firstName||t.lastName?[t.firstName,t.lastName].filter(Boolean).join(" "):"Unknown"}getInitials(t){const e=t.trim().split(/\s+/);return 0===e.length||1===e.length&&e[0].length<=1?t:1===e.length?e[0][0].toUpperCase():(e[0][0]+e[e.length-1][0]).toUpperCase()}render(){const t=Array.from(this.remoteCursors.values());return s(r,{key:"0f8678b0a96d80e12d2aa75f85af74a8737f836d"},t.map((t=>{if(!t.cursor)return null;let e,s=!1;if(t.activeObjectId){const r=this.getActiveObjectTip(t.activeObjectId);r?(s=!0,e=this.worldToScreen(r.x,r.y)):e=this.worldToScreen(t.cursor.x,t.cursor.y)}else e=this.worldToScreen(t.cursor.x,t.cursor.y);const r=this.isInViewport(e.x,e.y),o=this.isStale(t),n=t.user.color||"#6B7280";return r?this.renderCursor(t,e.x,e.y,n,o,s):this.showEdgeIndicators?this.renderEdgeIndicator(t,e.x,e.y,n,o,s):null})),t.map((t=>{if(!t.selectionBox)return null;const e=t.user.color||"#6B7280",r=t.selectionBox,o=this.worldToScreen(r.x,r.y),{scale:n}=this.core.store.state;return s("div",{key:`selection-box-${t.clientId}`,class:"remote-selection-box",style:{transform:`translate(${o.x}px, ${o.y}px)`,width:r.width*n+"px",height:r.height*n+"px",backgroundColor:`color-mix(in srgb, ${e} 20%, transparent)`,borderColor:`color-mix(in srgb, ${e} 50%, transparent)`}})})))}renderCursor(t,e,r,o,n,a){return s("div",{key:`cursor-${t.clientId}`,class:{"awareness-cursor":!0,stale:n,"tracking-object":a},style:{transform:`translate(${e}px, ${r}px)`}},s("svg",{class:"cursor-arrow",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{d:"M5 3L19 12L12 13L9 20L5 3Z",fill:o,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),s("span",{class:"cursor-label",style:{backgroundColor:o}},this.getUserDisplayName(t.user)))}renderEdgeIndicator(t,e,r,o,n,a){const i=this.clampToEdge(e,r),l=180*i.angle/Math.PI+90;let c=0,d=0;"left"===i.edge?c=20:"right"===i.edge?c=-20:"top"===i.edge?d=20:"bottom"===i.edge&&(d=-20);const h=this.getUserDisplayName(t.user);return s("div",{key:`edge-${t.clientId}`,class:{"edge-indicator":!0,stale:n,"tracking-object":a},style:{transform:`translate(${i.x}px, ${i.y}px)`}},s("svg",{class:{"edge-arrow":!0,stale:n},width:"16",height:"16",viewBox:"0 0 16 16",style:{transform:`rotate(${l}deg)`}},s("path",{d:"M8 1L14 13H2L8 1Z",fill:o,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),s("span",{class:"edge-label",style:{backgroundColor:o,transform:`translate(${c}px, ${d}px)`}},this.getInitials(h)))}static get style(){return":host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}"}},[513,"kritzel-awareness-cursors",{core:[16],showEdgeIndicators:[4,"show-edge-indicators"],edgeIndicatorPadding:[2,"edge-indicator-padding"],remoteCursors:[32],objectVersion:[32]}]);function l(){"undefined"!=typeof customElements&&["kritzel-awareness-cursors"].forEach((t=>{"kritzel-awareness-cursors"===t&&(customElements.get(o(t))||customElements.define(o(t),i))}))}export{i as K,l as d}

package/dist/components/p-CBTqCoUx.js

@@ -1 +0,0 @@
-import{p as e,H as t,c as o,h as i,d as r,t as s}from"./p-BWj1eE2b.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=o(this,"valueChanged")}get el(){return this}options=[];optionsChanged(){this.updateInternalValue(this.internalValue,!0)}value;externalValueChanged(e){e!==this.internalValue&&this.updateInternalValue(e,!1)}width;selectStyles={};forceOpenDirection;internalValue;hasSuffixContent=!1;hasPrefixContent=!1;isOpen=!1;focusedIndex=-1;openDirection="down";valueChanged;suffixSlotElement;prefixSlotElement;triggerElement;menuElement;wrapperElement;componentWillLoad(){this.updateInternalValue(this.value,!1),this.evaluateSuffixContent(),this.evaluatePrefixContent()}disconnectedCallback(){this.isOpen&&(this.isOpen=!1)}handleDocumentClick(e){this.isOpen&&!this.el.contains(e.target)&&this.closeMenu()}handleDocumentKeydown(e){this.isOpen&&"Escape"===e.key&&(e.stopPropagation(),e.preventDefault(),this.closeMenu(),this.triggerElement?.focus())}updateInternalValue(e,t){let o=e;if(this.options&&this.options.length>0){const e=this.options.some((e=>e.value===o));o&&e||(o=this.options[0].value)}else o=void 0;this.internalValue!==o&&(this.internalValue=o,(t||e!==o&&void 0!==e)&&this.valueChanged.emit(this.internalValue))}toggleMenu=()=>{this.isOpen?this.closeMenu():this.openMenu()};openMenu=()=>{this.calculateMenuDirection(),this.isOpen=!0;const e=this.options.findIndex((e=>e.value===this.internalValue));this.focusedIndex=e>=0?e:0,requestAnimationFrame((()=>{this.menuElement?.focus()}))};calculateMenuDirection=()=>{if(this.forceOpenDirection)return void(this.openDirection=this.forceOpenDirection);if(!this.wrapperElement)return void(this.openDirection="down");const e=this.wrapperElement.getBoundingClientRect(),t=window.innerHeight-e.bottom,o=e.top,i=Math.min(240,36*this.options.length+8);this.openDirection=t<i&&o>t?"up":"down"};closeMenu=()=>{this.isOpen=!1,this.focusedIndex=-1};selectOption=e=>{this.internalValue!==e.value&&(this.internalValue=e.value,this.valueChanged.emit(this.internalValue)),this.closeMenu(),this.triggerElement?.focus()};handleTriggerKeyDown=e=>{switch(e.key){case"Enter":case" ":case"ArrowDown":case"ArrowUp":e.preventDefault(),this.openMenu()}};handleMenuKeyDown=e=>{switch(e.key){case"ArrowDown":e.preventDefault(),this.focusedIndex=Math.min(this.focusedIndex+1,this.options.length-1),this.scrollFocusedOptionIntoView();break;case"ArrowUp":e.preventDefault(),this.focusedIndex=Math.max(this.focusedIndex-1,0),this.scrollFocusedOptionIntoView();break;case"Enter":case" ":e.preventDefault(),this.focusedIndex>=0&&this.focusedIndex<this.options.length&&this.selectOption(this.options[this.focusedIndex]);break;case"Home":e.preventDefault(),this.focusedIndex=0,this.scrollFocusedOptionIntoView();break;case"End":e.preventDefault(),this.focusedIndex=this.options.length-1,this.scrollFocusedOptionIntoView();break;case"Tab":this.closeMenu()}};scrollFocusedOptionIntoView=()=>{!this.menuElement||this.focusedIndex<0||requestAnimationFrame((()=>{const e=this.menuElement?.querySelector(".dropdown-option.is-focused");e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}))};handleOptionMouseEnter=e=>{this.focusedIndex=e};evaluateSuffixContent=()=>{if(this.suffixSlotElement){const e=this.suffixSlotElement.assignedNodes({flatten:!0}).length>0;this.hasSuffixContent!==e&&(this.hasSuffixContent=e)}else!1!==this.hasSuffixContent&&(this.hasSuffixContent=!1)};evaluatePrefixContent=()=>{if(this.prefixSlotElement){const e=this.prefixSlotElement.assignedNodes({flatten:!0}).length>0;this.hasPrefixContent!==e&&(this.hasPrefixContent=e)}else!1!==this.hasPrefixContent&&(this.hasPrefixContent=!1)};getSelectedLabel(){const e=this.options.find((e=>e.value===this.internalValue));return e?.label??""}getSelectedStyle(){const e=this.options.find((e=>e.value===this.internalValue));return e?.style}render(){const e={"dropdown-trigger":!0,"has-suffix-border":this.hasSuffixContent,"has-prefix-border":this.hasPrefixContent,"is-open":this.isOpen,"open-up":"up"===this.openDirection},t={"dropdown-menu":!0,"is-open":this.isOpen,"open-up":"up"===this.openDirection,"open-down":"down"===this.openDirection};return i(r,{key:"ac4dc8a445f79fa68555756a4ac26ba174a13eaa"},i("div",{key:"1c73835be42e6a289657920ef33c2a53c183913d",class:"dropdown-wrapper",ref:e=>this.wrapperElement=e},i("slot",{key:"ac73d76b5e24e2f2740113523524bc00d1c98d02",name:"prefix",ref:e=>this.prefixSlotElement=e,onSlotchange:this.evaluatePrefixContent}),i("div",{key:"e1e71c68a8abb2cf0dc2b9314e05d1170c0bb5b3",class:"dropdown-container",style:{width:this.width}},i("button",{key:"74588e1ff661f8f86318a2ed9bb53192ad96bacd",type:"button",class:e,style:{...this.selectStyles,...this.getSelectedStyle()},onClick:this.toggleMenu,onKeyDown:this.handleTriggerKeyDown,"aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false",ref:e=>this.triggerElement=e},i("span",{key:"432f694526e20e1e6abb6721f12aa246471d830d",class:"dropdown-trigger-label"},this.getSelectedLabel()),i("span",{key:"81f7d98f78201910f4427a7c442172d0283de45b",class:"dropdown-trigger-arrow","aria-hidden":"true"},i("svg",{key:"18db309dc145718fbb3d51e44058e3bfa96b0d27",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("polyline",{key:"32af6ce9a1f045c2ce3b205b1b1dc1fe1a80e227",points:"6 9 12 15 18 9"}))))),i("slot",{key:"b37cd43daa06424ea7b7951929352154f7d1ea0f",name:"suffix",ref:e=>this.suffixSlotElement=e,onSlotchange:this.evaluateSuffixContent}),i("ul",{key:"0e673d4e09e007a4c93ed6a992dddeb8eba33e91",class:t,role:"listbox",tabindex:"-1",onKeyDown:this.handleMenuKeyDown,ref:e=>this.menuElement=e},this.options.map(((e,t)=>{const o=e.value===this.internalValue;return i("li",{class:{"dropdown-option":!0,"is-selected":o,"is-focused":t===this.focusedIndex},role:"option","aria-selected":o?"true":"false",style:e.style,onClick:()=>this.selectOption(e),onMouseEnter:()=>this.handleOptionMouseEnter(t)},e.label,o&&i("span",{class:"dropdown-option-check","aria-hidden":"true"},i("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},i("polyline",{points:"20 6 9 17 4 12"}))))})))))}static get watchers(){return{options:[{optionsChanged:0}],value:[{externalValueChanged:0}]}}static get style(){return":host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:6px;overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:6px;border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:6px;box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease,     transform 0.15s ease,     visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}"}},[769,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[16],forceOpenDirection:[1,"force-open-direction"],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32],isOpen:[32],focusedIndex:[32],openDirection:[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{options:[{optionsChanged:0}],value:[{externalValueChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-dropdown"].forEach((e=>{"kritzel-dropdown"===e&&(customElements.get(s(e))||customElements.define(s(e),n))}))}export{n as K,a as d}

package/dist/components/p-DdlK75Kx.js

@@ -1 +0,0 @@
-import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-BWj1eE2b.js";import{h as n,f as s}from"./p-CJjwjpMH.js";import{K as a}from"./p-jGOpkGDl.js";import{K as c,d}from"./p-DwHZN643.js";import{a as h}from"./p-DjAiIBXv.js";import{d as p}from"./p-CqAkznU_.js";import{d as k}from"./p-B638ZH7S.js";import{d as b}from"./p-CBTqCoUx.js";import{d as u}from"./p-C4vg_-vg.js";import{d as f}from"./p-qBqQhAmh.js";import{d as g}from"./p-DDBaFNFi.js";import{d as z}from"./p-A7Ult9iv.js";import{d as m}from"./p-D6KNaj_Y.js";import{d as v}from"./p-DemKKw9U.js";import{d as y}from"./p-DEd2L0e3.js";import{d as x}from"./p-ihbmwmHg.js";import{d as w}from"./p-0cs6zQLB.js";import{d as C}from"./p-BV3EJRtU.js";const j=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme;isControlsReady;firstConfig=null;isTouchDevice=a.isTouchDevice();selectedSubOptions=new Map;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;internalControls=[];handleActiveToolChangeBound=this.handleActiveToolChange.bind(this);handleSelectionChangeBound=this.handleSelectionChange.bind(this);handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.internalControls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool),this.closeTooltip()}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}async onControlsChange(){this.kritzelEngine&&await this.initializeTools()}onThemeChange(){this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll"))}kritzelEngine=null;toolsScrollRef=null;configTriggerRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}get activeToolAsLineTool(){return this.activeControl?.tool}get activeToolAsShapeTool(){return this.activeControl?.tool}handleDisplayValuesChange=t=>{const o=t.detail;this.displayValues&&this.displayValues.color===o.color&&this.displayValues.size===o.size&&this.displayValues.fontFamily===o.fontFamily||(this.displayValues=o)};updateDisplayValues(t){const o=c.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:h.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof s&&(r.fontFamily=t.fontFamily),this.displayValues&&this.displayValues.color===r.color&&this.displayValues.size===r.size&&this.displayValues.fontFamily===r.fontFamily||(this.displayValues=r)}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}componentDidLoad(){this.updateScrollIndicators()}componentDidRender(){this.updateScrollIndicators()}disconnectedCallback(){this.kritzelEngine&&(this.kritzelEngine.removeEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound))}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef,r=t>2,i=t+e<o-2,l=o>e;this.canScrollLeft!==r&&(this.canScrollLeft=r),this.canScrollRight!==i&&(this.canScrollRight=i),this.needsScrolling!==l&&(this.needsScrolling=l)}handleToolsScroll=()=>{this.updateScrollIndicators()};async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.");this.kritzelEngine.addEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}async initializeTools(){let t=!1;const o=this.controls.map((t=>({...t})));for(const e of o){if("tool"===e.type&&e.tool){let t=e.tool;"function"!=typeof t&&(t=t.constructor);const o=await this.kritzelEngine.registerTool(e.name,t,e.config);o&&(e.tool=o)}"tool"===e.type&&e.isDefault&&e.tool&&(await this.kritzelEngine.changeActiveTool(e.tool),this.activeControl=e,this.updateDisplayValues(e.tool),t=!0),"config"===e.type&&(null===this.firstConfig?this.firstConfig=e:console.warn("Only one config control is allowed. The first one will be used."))}if(this.internalControls=o,!t){const t=this.internalControls.find((t=>"tool"===t.type&&t.tool));t&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool))}}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&(this.updateDisplayValues(this.activeControl.tool),await this.kritzelEngine.changeActiveTool(this.activeControl.tool))}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.closeTooltip(),await this.handleControlClick(t)}render(){const t=null!==(this.activeControl?.tool?c.getToolConfig(this.activeControl.tool):null),o=this.internalControls.filter((t=>"tool"===t.type||"separator"===t.type)),e=this.internalControls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"7f2a5fed45ac89b34a86b87552ffaa1b94f44d8b",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"2dcbbe498bce0b59fbd225d103f2e322d3b7ff85",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"6431079040502a78f021c612a7e953b1349f319a",class:"kritzel-controls"},r("div",{key:"6e0d6dce107cf6b54fb904809fd525ce3b2ae4f0",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"2686304ad10deac2d022e1deba19195587659d64",class:"kritzel-tools-scroll",ref:t=>this.toolsScrollRef=t,onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,"data-testid":`tool-${t.name}`,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),"aria-label":o?.label,"data-testid":`tool-${t.name}-main`},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},ref:o=>{o&&(t._triggerRef=o)},"aria-label":`Select ${t.name} options`,"data-testid":`tool-${t.name}-dropdown`,tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{anchorElement:t._anchorRef,triggerElement:t._triggerRef},r("div",{class:"kritzel-submenu-content"},t.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===o?.id},key:e.id,"data-testid":`suboption-${e.id}`,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return"separator"===t.type?r("div",{class:"kritzel-control-separator",key:t.name}):r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,"data-testid":`tool-${t.name}`,onClick:()=>this.handleControlClick?.(t),"aria-label":t.name.charAt(0).toUpperCase()+t.name.slice(1)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"f4bcbc856f6e027cdb579356faf54288b43aa080",class:{"scroll-indicator-right":!0,visible:this.canScrollRight&&!(e&&this.activeControl&&t)}}),e&&this.activeControl&&r("div",{class:{"kritzel-config-container":!0,visible:t},key:e.name},r("div",{key:"0646c98b32047f51841f75dd5fb57813ebb153f5",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"0816b8d7ca55add3c6a81de788be3c61a8a814f2",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"8f299593454e7855d83ad5d79b528940b2dcb202",tool:this.activeControl.tool,theme:this.theme,engine:this.kritzelEngine,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"8b2dc1dcc61df93a92cea8ba2aeb776e57965ab3",tabIndex:t?0:-1,class:"kritzel-config","data-testid":"tool-config",ref:t=>{t&&(this.configTriggerRef=t)},onKeyDown:t=>{"Enter"===t.key&&t.target.click()},style:{cursor:"pointer"}},this.displayValues&&r("div",{key:"1074fc05048aed92ec9d62e347822df0a57a80e4",class:"color-container"},r("kritzel-color",{key:"222efa6883ccbc6c97d10360039a1315de7d6273",value:this.displayValues.color,theme:this.theme,size:18,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:100%;z-index:1}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:1;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-controls-border, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],theme:[1],firstConfig:[32],isTouchDevice:[32],selectedSubOptions:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],internalControls:[32],closeTooltip:[64]},[[8,"keydown","handleKeyDown"]],{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}]);function E(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),j);break;case"kritzel-color":customElements.get(l(t))||p();break;case"kritzel-color-palette":customElements.get(l(t))||k();break;case"kritzel-dropdown":customElements.get(l(t))||b();break;case"kritzel-font":customElements.get(l(t))||u();break;case"kritzel-font-family":customElements.get(l(t))||f();break;case"kritzel-font-size":customElements.get(l(t))||g();break;case"kritzel-icon":customElements.get(l(t))||z();break;case"kritzel-line-endings":customElements.get(l(t))||m();break;case"kritzel-opacity-slider":customElements.get(l(t))||v();break;case"kritzel-shape-fill":customElements.get(l(t))||y();break;case"kritzel-stroke-size":customElements.get(l(t))||x();break;case"kritzel-tool-config":customElements.get(l(t))||d();break;case"kritzel-tooltip":customElements.get(l(t))||w();break;case"kritzel-utility-panel":customElements.get(l(t))||C()}}))}export{j as K,E as d}

package/dist/components/p-DjAiIBXv.js

@@ -1 +0,0 @@
-const o=[{light:"#000000",dark:"#ffffff",label:"Primary"},{light:"#ff5252",dark:"#ff5252"},{light:"#ffbc00",dark:"#ffbc00"},{light:"#00c853",dark:"#00c853"},{light:"#0000FF",dark:"#0000FF"},{light:"#d500f9",dark:"#d500f9"},{light:"#fafafa",dark:"#212121",label:"Background"},{light:"#a52714",dark:"#a52714"},{light:"#ee8100",dark:"#ee8100"},{light:"#558b2f",dark:"#558b2f"},{light:"#01579b",dark:"#01579b"},{light:"#8e24aa",dark:"#8e24aa"},{light:"#90a4ae",dark:"#607d8b",label:"Neutral"},{light:"#ff4081",dark:"#ff4081"},{light:"#ff6e40",dark:"#ff6e40"},{light:"#aeea00",dark:"#aeea00"},{light:"#304ffe",dark:"#304ffe"},{light:"#7c4dff",dark:"#7c4dff"},{light:"#cfd8dc",dark:"#455a64"},{light:"#f8bbd0",dark:"#ec407a"},{light:"#ffccbc",dark:"#ff7043"},{light:"#f0f4c3",dark:"#c0ca33"},{light:"#9fa8da",dark:"#5c6bc0"},{light:"#d1c4e9",dark:"#9575cd"}],e={name:"light",global:{borderColor:"#ebebeb",dividerColor:"#e0e0e0",focusColor:"#333333",focusRingColor:"#333333",iconColor:"currentColor",scrollbarThumbColor:"#ebebeb",textPrimary:"#000000",textSecondary:"#333333"},pillTabs:{background:"#f0f0f0",tabBackground:"transparent",tabBackgroundHover:"rgba(0, 0, 0, 0.05)",tabBackgroundSelected:"#ffffff",tabShadowSelected:"0 1px 3px rgba(0, 0, 0, 0.1)",tabTextColor:"#666666",tabTextColorSelected:"#000000"},textInput:{background:"#ffffff",borderColor:"#dbdbdb",focusBorderColor:"#333333",hoverBorderColor:"#cccccc",labelColor:"#333333",placeholderColor:"#999999",selectionBackground:"#007AFF",selectionColor:"#ffffff",suffixBackground:"#f5f5f5",suffixColor:"#666666",textColor:"#333333"},selection:{borderColor:"#007AFF",handleColor:"#ffffff"},checkerboard:{colorDark:"#cccccc",colorLight:"#ffffff"},backToContent:{activeBackgroundColor:"hsl(0, 0%, 0%, 8.6%)",backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 0 3px rgba(0, 0, 0, 0.08)",color:"#000000",hoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)"},colorPalette:{circleBorderColor:"#dddcdc",hoverBackgroundColor:"#ebebeb",selectedBackgroundColor:"#ebebeb"},contextMenu:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 1px 6px rgba(0, 0, 0, 0.12)",dividerColor:"rgba(0, 0, 0, 0.1)",itemActiveBackgroundColor:"hsl(0, 0%, 0%, 8.6%)",itemColor:"#333333",itemDisabledColor:"#aaaaaa",itemHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)"},controls:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 0 3px rgba(0, 0, 0, 0.08)",controlActiveBackgroundColor:"hsl(0, 0%, 0%, 8.6%)",controlColor:"#000000",controlHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",controlSelectedBackgroundColor:"#007AFF",controlSelectedColor:"#ffffff"},currentUserDialog:{emailColor:"#666666",nameColor:"#333333"},dialog:{backdropColor:"rgba(0, 0, 0, 0.4)",backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 4px 24px rgba(0, 0, 0, 0.15)",closeButtonActiveBackground:"hsl(0, 0%, 0%, 8.6%)",closeButtonBackground:"transparent",closeButtonColor:"#333333",closeButtonHoverBackground:"hsl(0, 0%, 0%, 4.3%)",closeButtonHoverColor:"#000000",fontFamily:"inherit",footerBorder:"1px solid #ebebeb",headerBorder:"1px solid #ebebeb",titleColor:"#000000"},loginDialog:{buttonActiveBackground:"#ebebeb",buttonBackground:"#ffffff",buttonBorderColor:"#e0e0e0",buttonHoverBackground:"#f5f5f5",buttonHoverBorderColor:"#cccccc",buttonTextColor:"#333333",spinnerActiveColor:"#333333",spinnerColor:"#cccccc",subtitleColor:"#666666"},dropdown:{accentColor:"#007bff",background:"#ffffff",borderColor:"#dbdbdb",hoverBorderColor:"#cccccc",hoverBackgroundColor:"#f0f0f0",selectedBackgroundColor:"#007bff1a",textColor:"#333333"},engine:{backgroundColor:"#ffffff",loadingOverlayBackground:"rgba(255, 255, 255, 0.85)",loadingOverlayColor:"#333333",loadingOverlaySpinnerActiveColor:"#333333",loadingOverlaySpinnerColor:"#cccccc"},snap:{indicatorFill:"rgba(59, 130, 246, 0.3)",indicatorStroke:"#007bff",lineStroke:"rgba(0, 0, 0, 0.2)"},fontSize:{hoverBackgroundColor:"#ebebeb",selectedBackgroundColor:"#ebebeb",textColor:"#333333"},lineEndings:{hoverBackgroundColor:"#ebebeb",labelColor:"#666666",optionBackground:"#ffffff",selectedBackgroundColor:"#ebebeb"},masterDetail:{backButtonColor:"#333333",backgroundColor:"#ffffff",detailBackgroundColor:"#ffffff",detailFocusOutline:"2px solid #333333",menuBackgroundColor:"#ffffff",menuBorderRight:"1px solid #ebebeb",menuItemActiveBackgroundColor:"hsl(0, 0%, 0%, 8.6%)",menuItemBackgroundColor:"transparent",menuItemChevronColor:"#aaaaaa",menuItemColor:"#333333",menuItemDisabledColor:"#aaaaaa",menuItemFocusOutline:"2px solid #333333",menuItemHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",menuItemSelectedBackgroundColor:"#007AFF",menuItemSelectedColor:"#ffffff",menuItemSelectedHoverBackgroundColor:"#007AFF"},menu:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 0 3px rgba(0, 0, 0, 0.08)",itemButtonHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",itemChildOpenBackgroundColor:"hsl(0, 0%, 0%, 3%)",itemColor:"#333333",itemEditingBackgroundColor:"#f0f0f0",itemInputBorder:"1px solid #333333",itemInputBorderColorOnSelected:"#ffffff",itemInputCaretColor:"#333333",itemInputCaretColorOnSelected:"#ffffff",itemInputSelectionColor:"#007aff",itemInputSelectionColorOnSelected:"rgba(255, 255, 255, 0.55)",itemInputSelectionTextColor:"#ffffff",itemInputSelectionTextColorOnSelected:"#ffffff",itemOverlayBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",itemSelectedBackgroundColor:"#007aff",itemSelectedColor:"#ffffff"},moreMenu:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",borderRadius:"12px",boxShadow:"0 0 3px rgba(0, 0, 0, 0.08)",buttonActiveBackgroundColor:"hsl(0, 0%, 0%, 8.6%)",buttonColor:"#000000",buttonHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",innerBorderRadius:"12px"},numericInput:{focusBorderColor:"#333333",borderColor:"#dbdbdb",hoverBorderColor:"#cccccc",inputBackground:"#ffffff",labelColor:"#666666",selectionBackground:"#007AFF",selectionColor:"#ffffff",spinnerActiveBackground:"hsl(0, 0%, 0%, 8.6%)",spinnerBackground:"transparent",spinnerColor:"#333333",spinnerHoverBackground:"hsl(0, 0%, 0%, 4.3%)",textColor:"#333333"},opacitySlider:{activeColor:"#007AFF",thumbBorderColor:"#007AFF",thumbColor:"#ffffff",trackColor:"#e0e0e0"},settings:{contentHeadingColor:"#000000",contentTextColor:"#333333",descriptionColor:"#666666",labelColor:"#333333",shortcutItemBg:"#f8f8f8",shortcutKeyBg:"#ffffff",shortcutKeyBorder:"#e0e0e0",shortcutKeyColor:"#555555"},shapeFill:{hoverBackgroundColor:"#ebebeb",optionBackground:"#ffffff",selectedBackgroundColor:"#ebebeb"},shareDialog:{borderColor:"#e5e5e5",copyButtonBackground:"#ffffff",copyButtonColor:"#666666",copyButtonHoverBackground:"#e8e8e8",copyButtonHoverColor:"#333333",copySuccessBackground:"#d4edda",copySuccessColor:"#28a745",descriptionColor:"#666666",inputBackground:"#f5f5f5",inputBorderColor:"#e0e0e0",inputTextColor:"#333333",labelColor:"#333333",revokeButtonBorderColor:"#dc3545",revokeButtonColor:"#dc3545",revokeButtonHoverBackground:"#dc3545",revokeButtonHoverColor:"#ffffff",selectionColor:"#cce5ff"},slideToggle:{thumbColor:"#fff",thumbSize:"18px",trackCheckedColor:"#007AFF",trackColor:"#ccc"},splitButton:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 0 3px rgba(0, 0, 0, 0.08)",color:"#000000",dividerBackgroundColor:"#ebebeb",hoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)"},strokeSize:{hoverBackgroundColor:"#ebebeb",selectedBackgroundColor:"#ebebeb"},tooltip:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 1px 6px rgba(0, 0, 0, 0.12)",color:"#000000"},utilityPanel:{backgroundColor:"#e2e2e2",buttonColor:"#333333",buttonHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",separatorColor:"hsl(0, 0%, 0%, 8%)"}},r={name:"dark",global:{borderColor:"#3a3a3a",dividerColor:"#3a3a3a",focusColor:"#ffffff",focusRingColor:"#ffffff",iconColor:"currentColor",scrollbarThumbColor:"#555555",textPrimary:"#ffffff",textSecondary:"#e0e0e0"},pillTabs:{background:"#3a3a3a",tabBackground:"transparent",tabBackgroundHover:"rgba(255, 255, 255, 0.08)",tabBackgroundSelected:"#2a2a2a",tabShadowSelected:"0 1px 3px rgba(0, 0, 0, 0.3)",tabTextColor:"#999999",tabTextColorSelected:"#ffffff"},textInput:{background:"#1a1a1a",borderColor:"#4a4a4a",focusBorderColor:"#ffffff",hoverBorderColor:"#5a5a5a",labelColor:"#e0e0e0",placeholderColor:"#777777",selectionBackground:"#0A84FF",selectionColor:"#ffffff",suffixBackground:"#3a3a3a",suffixColor:"#aaaaaa",textColor:"#e0e0e0"},selection:{borderColor:"#0A84FF",handleColor:"#1a1a1a"},checkerboard:{colorDark:"#4a4a4a",colorLight:"#3a3a3a"},backToContent:{activeBackgroundColor:"hsl(0, 0%, 100%, 12%)",backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 0 6px rgba(0, 0, 0, 0.3)",color:"#ffffff",hoverBackgroundColor:"hsl(0, 0%, 100%, 8%)"},colorPalette:{circleBorderColor:"#4a4a4a",hoverBackgroundColor:"#3a3a3a",selectedBackgroundColor:"#3a3a3a"},contextMenu:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 1px 8px rgba(0, 0, 0, 0.4)",dividerColor:"rgba(255, 255, 255, 0.1)",itemActiveBackgroundColor:"hsl(0, 0%, 100%, 12%)",itemColor:"#e0e0e0",itemDisabledColor:"#666666",itemHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)"},controls:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 0 6px rgba(0, 0, 0, 0.3)",controlActiveBackgroundColor:"hsl(0, 0%, 100%, 12%)",controlColor:"#ffffff",controlHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)",controlSelectedBackgroundColor:"#0A84FF",controlSelectedColor:"#ffffff"},currentUserDialog:{emailColor:"#999999",nameColor:"#ffffff"},dialog:{backdropColor:"rgba(0, 0, 0, 0.6)",backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 4px 24px rgba(0, 0, 0, 0.5)",closeButtonActiveBackground:"hsl(0, 0%, 100%, 12%)",closeButtonBackground:"transparent",closeButtonColor:"#e0e0e0",closeButtonHoverBackground:"hsl(0, 0%, 100%, 8%)",closeButtonHoverColor:"#ffffff",footerBorder:"1px solid #3a3a3a",headerBorder:"1px solid #3a3a3a",titleColor:"#ffffff"},loginDialog:{buttonActiveBackground:"#444444",buttonBackground:"#2a2a2a",buttonBorderColor:"#4a4a4a",buttonHoverBackground:"#3a3a3a",buttonHoverBorderColor:"#5a5a5a",buttonTextColor:"#e0e0e0",spinnerActiveColor:"#ffffff",spinnerColor:"#555555",subtitleColor:"#999999"},dropdown:{accentColor:"#0A84FF",borderColor:"#4a4a4a",hoverBorderColor:"#5a5a5a",background:"#1a1a1a",hoverBackgroundColor:"#3a3a3a",selectedBackgroundColor:"rgba(10, 132, 255, 0.2)",textColor:"#e0e0e0"},engine:{backgroundColor:"#1a1a1a",loadingOverlayBackground:"rgba(26, 26, 26, 0.85)",loadingOverlayColor:"#e0e0e0",loadingOverlaySpinnerActiveColor:"#e0e0e0",loadingOverlaySpinnerColor:"#555555"},snap:{indicatorFill:"rgba(10, 132, 255, 0.35)",indicatorStroke:"#0A84FF",lineStroke:"rgba(255, 255, 255, 0.35)"},fontSize:{hoverBackgroundColor:"#3a3a3a",selectedBackgroundColor:"#3a3a3a",textColor:"#e0e0e0"},lineEndings:{hoverBackgroundColor:"#3a3a3a",labelColor:"#999999",optionBackground:"#2a2a2a",selectedBackgroundColor:"#3a3a3a"},masterDetail:{backButtonColor:"#e0e0e0",backgroundColor:"#2a2a2a",detailBackgroundColor:"#2a2a2a",detailFocusOutline:"2px solid #ffffff",menuBackgroundColor:"#2a2a2a",menuBorderRight:"1px solid #3a3a3a",menuItemActiveBackgroundColor:"hsl(0, 0%, 100%, 12%)",menuItemBackgroundColor:"transparent",menuItemChevronColor:"#666666",menuItemColor:"#e0e0e0",menuItemDisabledColor:"#666666",menuItemFocusOutline:"2px solid #ffffff",menuItemHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)",menuItemSelectedBackgroundColor:"#0A84FF",menuItemSelectedColor:"#ffffff",menuItemSelectedHoverBackgroundColor:"#0A84FF"},menu:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 0 6px rgba(0, 0, 0, 0.3)",itemButtonHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)",itemChildOpenBackgroundColor:"hsl(0, 0%, 100%, 6%)",itemColor:"#e0e0e0",itemEditingBackgroundColor:"#3a3a3a",itemInputBorder:"1px solid #ffffff",itemInputBorderColorOnSelected:"#ffffff",itemInputCaretColor:"#e0e0e0",itemInputCaretColorOnSelected:"#ffffff",itemInputSelectionColor:"#b0b0b0",itemInputSelectionColorOnSelected:"rgba(255, 255, 255, 0.35)",itemInputSelectionTextColor:"#ffffff",itemInputSelectionTextColorOnSelected:"#ffffff",itemOverlayBackgroundColor:"hsl(0, 0%, 100%, 8%)",itemSelectedBackgroundColor:"#0A84FF",itemSelectedColor:"#ffffff"},moreMenu:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",borderRadius:"12px",boxShadow:"0 0 6px rgba(0, 0, 0, 0.3)",buttonActiveBackgroundColor:"hsl(0, 0%, 100%, 12%)",buttonColor:"#ffffff",buttonHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)",innerBorderRadius:"12px"},numericInput:{borderColor:"#4a4a4a",focusBorderColor:"#ffffff",hoverBorderColor:"#5a5a5a",inputBackground:"#1a1a1a",labelColor:"#999999",selectionBackground:"#0A84FF",selectionColor:"#ffffff",spinnerActiveBackground:"hsl(0, 0%, 100%, 12%)",spinnerBackground:"transparent",spinnerColor:"#e0e0e0",spinnerHoverBackground:"hsl(0, 0%, 100%, 8%)",textColor:"#e0e0e0"},opacitySlider:{activeColor:"#0A84FF",thumbBorderColor:"#0A84FF",thumbColor:"#ffffff",trackColor:"#4a4a4a"},settings:{contentHeadingColor:"#ffffff",contentTextColor:"#e0e0e0",descriptionColor:"#999999",labelColor:"#e0e0e0",shortcutItemBg:"#3a3a3a",shortcutKeyBg:"#2a2a2a",shortcutKeyBorder:"#4a4a4a",shortcutKeyColor:"#e0e0e0"},shapeFill:{hoverBackgroundColor:"#3a3a3a",optionBackground:"#2a2a2a",selectedBackgroundColor:"#3a3a3a"},shareDialog:{labelColor:"#e0e0e0",descriptionColor:"#e0e0e0",inputBackground:"#1a1a1a",inputBorderColor:"#4a4a4a",inputTextColor:"#e0e0e0",selectionColor:"#0A84FF",copyButtonBackground:"#2a2a2a",copyButtonColor:"#e0e0e0",copyButtonHoverBackground:"#3a3a3a",copyButtonHoverColor:"#ffffff",copySuccessBackground:"#28a745",copySuccessColor:"#ffffff"},slideToggle:{thumbColor:"#ffffff",trackCheckedColor:"#0A84FF",trackColor:"#4a4a4a",transitionDuration:"0.2s"},splitButton:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 0 6px rgba(0, 0, 0, 0.3)",color:"#ffffff",dividerBackgroundColor:"#3a3a3a",hoverBackgroundColor:"hsl(0, 0%, 100%, 8%)"},strokeSize:{hoverBackgroundColor:"#3a3a3a",selectedBackgroundColor:"#3a3a3a"},tooltip:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 1px 8px rgba(0, 0, 0, 0.4)",color:"#ffffff"},utilityPanel:{backgroundColor:"#3a3a3a",buttonColor:"#e0e0e0",buttonHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)",separatorColor:"hsl(0, 0%, 100%, 12%)"}};class a{static camelToKebab(o){return o.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}static flattenThemeToVariables(o,e="--kritzel"){const r=new Map,t=(o,e,l=!1)=>{for(const[f,n]of Object.entries(o)){if(l&&"name"===f)continue;const o=`${e}-${a.camelToKebab(f)}`;"object"==typeof n&&null!==n?t(n,o):"string"==typeof n&&r.set(o,n)}};return t(o,e,!0),r}static applyVariablesToElement(o,e){for(const[r,a]of e)o.style.setProperty(r,a)}static applyThemeToElement(o,e){const r=a.flattenThemeToVariables(e);a.applyVariablesToElement(o,r)}}const t="kritzel-settings",l="light";class f{_core;_currentTheme=l;_targetElement=null;_storageKey;constructor(o){this._core=o,this._storageKey=o.editorId?`${t}-${o.editorId}`:t,this._currentTheme=this.getStoredTheme()}get currentTheme(){return this._currentTheme}setTargetElement(o){this._targetElement=o,this._targetElement&&this.applyTheme(this._currentTheme)}getTargetElement(){return this._targetElement}getThemeByName(o){return"dark"===o?r:e}getStoredTheme(){if("undefined"==typeof localStorage)return l;const o=localStorage.getItem(this._storageKey);if(!o)return l;try{const e=JSON.parse(o);if("dark"===e?.theme||"light"===e?.theme)return e.theme}catch{}return l}static getStoredTheme(){if("undefined"==typeof localStorage)return l;const o=localStorage.getItem(t);if(!o)return l;try{const e=JSON.parse(o);if("dark"===e?.theme||"light"===e?.theme)return e.theme}catch{}return l}setTheme(o){this._currentTheme=o,this._targetElement&&this.applyTheme(o)}isDarkTheme(){return"dark"===this._currentTheme}applyTheme(o){if(!this._targetElement)return;const e=this.getThemeByName(o);a.applyThemeToElement(this._targetElement,e)}cleanup(){this._targetElement=null}}class n{static resolveThemeColor(o,e){return o?function(o,e){return o[e]}(o,e??f.getStoredTheme()):""}static applyOpacity(o,e,r){const a="string"==typeof o?o:this.resolveThemeColor(o,r);if(!a||e>=1)return a;const t=a.startsWith("#")?a.slice(1):a;let l,f,n;if(3===t.length)l=parseInt(t[0]+t[0],16),f=parseInt(t[1]+t[1],16),n=parseInt(t[2]+t[2],16);else{if(6!==t.length)return a;l=parseInt(t.substring(0,2),16),f=parseInt(t.substring(2,4),16),n=parseInt(t.substring(4,6),16)}return isNaN(l)||isNaN(f)||isNaN(n)?a:`rgba(${l}, ${f}, ${n}, ${e})`}static getContrastColor(o){const e=o.startsWith("#")?o.slice(1):o;let r,a,t;if(3===e.length)r=parseInt(e[0]+e[0],16),a=parseInt(e[1]+e[1],16),t=parseInt(e[2]+e[2],16);else{if(6!==e.length)return"#000000";r=parseInt(e.substring(0,2),16),a=parseInt(e.substring(2,4),16),t=parseInt(e.substring(4,6),16)}return isNaN(r)||isNaN(a)||isNaN(t)||.299*r+.587*a+.114*t>150?"#000000":"#ffffff"}static determineTextColor(o){const e="transparent"===o.light,r="transparent"===o.dark;return e&&r?{light:"#000000",dark:"#ffffff"}:{light:e?"#000000":this.getContrastColor(o.light),dark:r?"#ffffff":this.getContrastColor(o.dark)}}}export{o as D,f as K,n as a,r as d,e as l}