kritzel-stencil 0.3.16 → 0.3.18

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

@@ -1,2 +1,4 @@
 export declare const ABSOLUTE_SCALE_MAX = 1000;
 export declare const ABSOLUTE_SCALE_MIN = 0.0001;
+/** Destination opened when the "Powered by Kritzel" watermark is clicked. */
+export declare const KRITZEL_WEBSITE_URL = "https://kritzel.io";

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

@@ -0,0 +1,25 @@
+/**
+ * License verification constants.
+ *
+ * Kritzel licenses are offline Ed25519 signed tokens. The owner signs each
+ * customer's token with a private key that never leaves their machine
+ * (see scripts/license/); the library verifies tokens against the public key
+ * below. The public key is safe to ship — it can only *verify* signatures,
+ * never forge them.
+ */
+/**
+ * Token format version prefix. A valid license key looks like:
+ *
+ *   KRTZL1.<base64url(payload JSON)>.<base64url(ed25519 signature)>
+ *
+ * Bump the version (and this prefix) if the token scheme ever changes.
+ */
+export declare const KRITZEL_LICENSE_TOKEN_PREFIX = "KRTZL1.";
+/**
+ * Raw 32-byte Ed25519 public key (base64url) used to verify license tokens.
+ *
+ * Generate the matching key pair with `npm run license:keygen` and paste the
+ * printed public key here. Replacing this value invalidates every license
+ * signed with the previous key.
+ */
+export declare const KRITZEL_LICENSE_PUBLIC_KEY = "I-pYJlxDEjT94rwSaqhXW5Sv__fMKS-JKKnV3pg0PaM";

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.16";
+export declare const KRITZEL_VERSION = "0.3.18";

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

@@ -0,0 +1,18 @@
+import { KritzelTermVars } from '../interfaces/localization.interface';
+/**
+ * Pure static utilities for localization term resolution.
+ */
+export declare class LocalizationHelper {
+    /**
+     * Interpolates `{placeholder}` tokens in a term template with the provided
+     * variables. Tokens without a matching variable are left untouched.
+     *
+     * @param template - The raw term string, e.g. `'Expires {date}'`
+     * @param vars - Map of placeholder names to replacement values
+     * @returns The interpolated string
+     *
+     * @example
+     * LocalizationHelper.interpolate('Hello {name}', { name: 'Ada' }); // 'Hello Ada'
+     */
+    static interpolate(template: string, vars?: KritzelTermVars): string;
+}

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

@@ -1,3 +1,4 @@
 export declare class KritzelMathHelper {
     static average(a: number, b: number): number;
+    static degreesToRadians(degrees: number): number;
 }

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

@@ -11,6 +11,28 @@ export interface SvgExportOptions {
     padding?: number;
     /** Whether to include XML declaration. Defaults to true. */
     includeXmlDeclaration?: boolean;
+    /**
+     * Enables raster-safe serialization for objects that normally rely on
+     * `<foreignObject>` (currently text). Use this when the generated SVG is
+     * rendered into an `<img>` and then drawn to a canvas for PNG export.
+     */
+    rasterSafeForCanvas?: boolean;
+    /**
+     * Map of image object id -> inlined `data:` URL used to embed image
+     * bytes directly into the exported markup. Required for the bytes to
+     * survive rasterization (e.g. SVG -> PNG), because browsers refuse to
+     * load external/`blob:` resources referenced from an SVG loaded into
+     * an `<img>` element. Populate via {@link KritzelSvgExportHelper.resolveImageDataUrls}.
+     */
+    imageDataUrls?: Map<string, string>;
+}
+/**
+ * Minimal structural contract for the asset resolver dependency used by
+ * the export inlining path. Declared structurally to keep this helper
+ * decoupled from the concrete resolver implementation.
+ */
+export interface SvgExportAssetResolver {
+    fetchBlob(id: string): Promise<Blob>;
 }
 /**
  * Helper class for exporting Kritzel objects to SVG format.
@@ -37,6 +59,34 @@ export declare class KritzelSvgExportHelper {
      * @returns Flat array of all objects including group children
      */
     private static flattenObjects;
+    /**
+     * Resolves every image referenced by the given objects (including those
+     * nested inside groups) to an inlined `data:` URL, keyed by object id.
+     *
+     * This is required for export flows that rasterize the SVG (e.g. PNG
+     * export): an SVG loaded into an `<img>` element will NOT load external
+     * or `blob:` resources, so a `<image href="blob:...">` renders as a
+     * broken-image placeholder. Embedding the bytes as a base64 `data:` URL
+     * makes the image self-contained and survive rasterization.
+     *
+     * Resolution is best-effort: images that fail to resolve are simply
+     * omitted from the map, and the SVG falls back to whatever `href` the
+     * synchronous path would have produced.
+     * @param objects - Objects to inline images for
+     * @param assetResolver - Resolver used to fetch asset bytes; optional
+     * @returns Map of image object id -> inlined `data:` URL
+     */
+    static resolveImageDataUrls(objects: KritzelBaseObject[], assetResolver?: SvgExportAssetResolver): Promise<Map<string, string>>;
+    /**
+     * Reads a Blob into a base64 `data:` URL.
+     * @param blob - The blob to encode
+     * @returns Promise resolving to the data URL string
+     */
+    private static blobToDataUrl;
+    /**
+     * Encodes a byte array to base64 across browser and Node-like runtimes.
+     */
+    private static uint8ToBase64;
     /**
      * Collects SVG defs (markers, patterns, etc.) needed by the objects.
      * @param objects - Objects to collect defs for
@@ -56,9 +106,10 @@ export declare class KritzelSvgExportHelper {
      * Converts a Kritzel object to its SVG element representation.
      * @param object - The object to convert
      * @param theme - Theme for color resolution
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
      * @returns SVG element string, or empty string if object type is not supported
      */
-    static objectToSvgElement(object: KritzelBaseObject, theme?: ThemeName): string;
+    static objectToSvgElement(object: KritzelBaseObject, theme?: ThemeName, imageDataUrls?: Map<string, string>, rasterSafeForCanvas?: boolean): string;
     /**
      * Converts a KritzelPath to SVG.
      * @param path - The path object
@@ -87,18 +138,27 @@ export declare class KritzelSvgExportHelper {
      * @returns SVG element string
      */
     private static textToSvg;
+    /**
+     * Converts a KritzelText to SVG using pure SVG text primitives.
+     * This path avoids `<foreignObject>`, which taints canvases when the
+     * generated SVG is rasterized through `<img>` and `drawImage`.
+     */
+    private static textToSvgRasterSafe;
     /**
      * Converts a KritzelImage to SVG.
      *
-     * Uses `resolvedSrc` when available (populated by the renderer via the
-     * asset resolver), falling back to the legacy inline `src` field for
+     * Prefers an inlined `data:` URL from `imageDataUrls` (keyed by object
+     * id) when provided, so the embedded bytes survive rasterization to
+     * PNG. Falls back to `resolvedSrc` (populated by the renderer via the
+     * asset resolver) and finally the legacy inline `src` field for
      * documents persisted before the asset layer existed.
      *
-     * Note: SVG export is synchronous and cannot await asset bytes from a
-     * remote provider. Callers that need the fully rasterized image bytes
-     * embedded in the exported SVG should pre-resolve assets via
-     * `core.assetResolver.fetchBlob` and inline them as data URLs.
+     * Note: a `blob:` `resolvedSrc` renders correctly on-canvas but becomes
+     * a broken-image placeholder once the SVG is loaded into an `<img>` and
+     * drawn to a canvas. Callers that rasterize the SVG must pass
+     * `imageDataUrls` (see {@link KritzelSvgExportHelper.resolveImageDataUrls}).
      * @param image - The image object
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
      * @returns SVG element string
      */
     private static imageToSvg;
@@ -106,6 +166,7 @@ export declare class KritzelSvgExportHelper {
      * Converts a KritzelGroup to SVG by recursively converting children.
      * @param group - The group object
      * @param theme - Theme for color resolution
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
      * @returns SVG element string
      */
     private static groupToSvg;
@@ -116,6 +177,10 @@ export declare class KritzelSvgExportHelper {
      * @returns Transform attribute value string
      */
     private static buildTransform;
+    /**
+     * Returns a safe non-zero scale for export geometry calculations.
+     */
+    private static getObjectScale;
     /**
      * Converts ProseMirror JSON content to HTML string.
      * @param content - ProseMirror document JSON
@@ -131,6 +196,15 @@ export declare class KritzelSvgExportHelper {
      * @returns HTML string
      */
     private static nodeToHtml;
+    /**
+     * Converts ProseMirror JSON content to plain-text lines.
+     * Used by raster-safe SVG export, which cannot depend on HTML/foreignObject.
+     */
+    private static prosemirrorToPlainTextLines;
+    /**
+     * Converts a ProseMirror node tree into plain text.
+     */
+    private static nodeToPlainText;
     /**
      * Applies a ProseMirror mark to text.
      * @param text - The text to wrap

package/dist/types/index.d.ts

@@ -17,6 +17,7 @@ export * from './classes/objects/image.class';
 export * from './classes/objects/line.class';
 export * from './classes/objects/group.class';
 export * from './classes/objects/shape.class';
+export * from './classes/tools/base-tool.class';
 export * from './classes/tools/brush-tool.class';
 export * from './classes/tools/line-tool.class';
 export * from './classes/tools/eraser-tool.class';
@@ -37,6 +38,8 @@ export * from './classes/providers/assets/presigned-asset-provider.class';
 export * from './classes/core/workspace.class';
 export * from './classes/managers/anchor.manager';
 export * from './classes/managers/theme.manager';
+export * from './classes/managers/localization.manager';
+export * from './classes/managers/license.manager';
 export * from './interfaces/toolbar-control.interface';
 export * from './interfaces/menu-item.interface';
 export * from './interfaces/object-change-event.interface';
@@ -51,13 +54,23 @@ export * from './interfaces/anchor.interface';
 export * from './interfaces/viewport-state.interface';
 export * from './interfaces/user.interface';
 export * from './interfaces/theme.interface';
+export * from './interfaces/localization.interface';
 export * from './interfaces/shortcut.interface';
+export * from './interfaces/undo-state.interface';
+export * from './interfaces/share.interface';
+export * from './interfaces/engine-state.interface';
+export * from './interfaces/debug-info.interface';
+export * from './interfaces/bounding-box.interface';
+export * from './interfaces/polygon.interface';
 export * from './configs/default-brush-tool.config';
 export * from './configs/default-text-tool.config';
 export * from './configs/default-line-tool.config';
 export * from './configs/default-asset-storage.config';
 export * from './themes/light-theme';
 export * from './themes/dark-theme';
+export * from './locales/en-locale';
+export * from './locales/de-locale';
+export * from './locales/fr-locale';
 export * from './enums/alignment.enum';
 export * from './enums/shape-type.enum';
 export * from './interfaces/migration.interface';

package/dist/types/interfaces/context-menu-item.interface.d.ts

@@ -1,6 +1,12 @@
 import { KritzelBaseObject } from "../classes/objects/base-object.class";
+import { KritzelTermKey } from "./localization.interface";
 export interface ContextMenuItem {
-    label: string;
+    /**
+     * The item label. Always resolved through the active locale: pass a
+     * {@link KritzelTermKey} (e.g. `'menu.copy'`) to display its translation, or
+     * any other string to use it verbatim. Known term keys are autocompleted.
+     */
+    label: KritzelTermKey | (string & NonNullable<unknown>);
     action?: (menu: {
         x: number;
         y: number;

package/dist/types/interfaces/line-options.interface.d.ts

@@ -10,6 +10,8 @@ export interface KritzelLineOptions {
     controlY?: number;
     translateX?: number;
     translateY?: number;
+    /** Rotation in degrees at initialization time. */
+    rotation?: number;
     scale?: number;
     stroke?: ThemeAwareColor;
     strokeWidth?: number;

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

@@ -0,0 +1,143 @@
+/**
+ * Canonical locale identifier type for available locales.
+ * Locales are identified by their code (e.g. 'en', 'de', 'fr').
+ * The union is open so consumers can register additional locale codes.
+ */
+export type LocaleCode = 'en' | 'de' | 'fr' | (string & NonNullable<unknown>);
+/**
+ * Typed map of all known user-visible UI term keys to their translated strings.
+ *
+ * Keys are namespaced with a dotted prefix (e.g. `menu.copy`, `settings.title`)
+ * to group related strings. Using a closed interface gives full compile-time
+ * safety: typos in term keys are caught by the compiler and editors can
+ * autocomplete the available keys.
+ */
+export interface KritzelTerms {
+    'menu.copy': string;
+    'menu.cut': string;
+    'menu.paste': string;
+    'menu.selectAll': string;
+    'menu.order': string;
+    'menu.bringToFront': string;
+    'menu.sendToBack': string;
+    'menu.moveUp': string;
+    'menu.moveDown': string;
+    'menu.align': string;
+    'menu.alignLeft': string;
+    'menu.alignCenterHorizontal': string;
+    'menu.alignRight': string;
+    'menu.alignTop': string;
+    'menu.alignCenterVertical': string;
+    'menu.alignBottom': string;
+    'menu.group': string;
+    'menu.ungroup': string;
+    'menu.export': string;
+    'menu.exportAsSvg': string;
+    'menu.exportAsPng': string;
+    'menu.delete': string;
+    'menu.share': string;
+    'menu.import': string;
+    'menu.settings': string;
+    'menu.logout': string;
+    'settings.dialogTitle': string;
+    'settings.categories.general': string;
+    'settings.categories.viewport': string;
+    'settings.categories.shortcuts': string;
+    'settings.categories.developer': string;
+    'settings.categories.about': string;
+    'settings.general.title': string;
+    'settings.general.theme.label': string;
+    'settings.general.theme.description': string;
+    'settings.general.language.label': string;
+    'settings.general.language.description': string;
+    'settings.general.lockDrawingScale.label': string;
+    'settings.general.lockDrawingScale.description': string;
+    'settings.viewport.title': string;
+    'settings.viewport.minZoom.label': string;
+    'settings.viewport.minZoom.description': string;
+    'settings.viewport.maxZoom.label': string;
+    'settings.viewport.maxZoom.description': string;
+    'settings.viewport.boundaryLeft.label': string;
+    'settings.viewport.boundaryLeft.description': string;
+    'settings.viewport.boundaryRight.label': string;
+    'settings.viewport.boundaryRight.description': string;
+    'settings.viewport.boundaryTop.label': string;
+    'settings.viewport.boundaryTop.description': string;
+    'settings.viewport.boundaryBottom.label': string;
+    'settings.viewport.boundaryBottom.description': string;
+    'settings.viewport.boundaryPlaceholder': string;
+    'settings.shortcuts.title': string;
+    'settings.developer.title': string;
+    'settings.developer.showViewportInfo.label': string;
+    'settings.developer.showViewportInfo.description': string;
+    'settings.developer.showObjectInfo.label': string;
+    'settings.developer.showObjectInfo.description': string;
+    'settings.developer.showSyncProviderInfo.label': string;
+    'settings.developer.showSyncProviderInfo.description': string;
+    'settings.developer.showMigrationInfo.label': string;
+    'settings.developer.showMigrationInfo.description': string;
+    'settings.about.title': string;
+    'settings.about.description': string;
+    'export.dialogTitle': string;
+    'export.tabs.viewport': string;
+    'export.tabs.workspace': string;
+    'export.format.label': string;
+    'export.filename.label': string;
+    'export.filename.placeholder': string;
+    'export.exportButton': string;
+    'workspace.sharedTooltip': string;
+    'workspace.rename': string;
+    'workspace.delete': string;
+    'zoom.zoomIn': string;
+    'zoom.zoomOut': string;
+    'utility.undo': string;
+    'utility.redo': string;
+    'utility.delete': string;
+    'share.dialogTitle': string;
+    'share.linkSharing.label': string;
+    'share.linkSharing.enabledDescription': string;
+    'share.linkSharing.disabledDescription': string;
+    'share.linkSharing.toggleLabel': string;
+    'share.copyLink.title': string;
+    'share.copyLink.copied': string;
+    'login.dialogTitle': string;
+    'currentUser.dialogTitle': string;
+    'backToContent.label': string;
+    'toolConfig.collapse': string;
+    'toolConfig.expand': string;
+    'moreMenu.ariaLabel': string;
+    'engine.loading': string;
+    'watermark.poweredBy': string;
+}
+/**
+ * A localization key. Restricted to the known {@link KritzelTerms} keys so that
+ * lookups are validated at compile time.
+ */
+export type KritzelTermKey = keyof KritzelTerms;
+/**
+ * Definition of a single locale.
+ *
+ * `terms` is a `Partial<KritzelTerms>`, so a locale may override only a subset
+ * of the available terms. Any missing term is resolved through the fallback
+ * chain (see {@link KritzelLocalizationManager}). This mirrors the theming API,
+ * allowing consumers to spread a built-in locale and override specific keys:
+ *
+ * ```ts
+ * const myDe: KritzelLocale = {
+ *   code: 'de',
+ *   terms: { ...DE_LOCALE.terms, 'menu.copy': 'Duplizieren' },
+ * };
+ * ```
+ */
+export interface KritzelLocale {
+    /** Canonical locale code, e.g. 'en', 'de', 'fr'. */
+    code: LocaleCode;
+    /** Optional human-readable display name shown in the language selector, e.g. 'Deutsch'. */
+    label?: string;
+    /** Partial map of term keys to translated strings. Missing keys fall back. */
+    terms: Partial<KritzelTerms>;
+}
+/**
+ * Values used to interpolate `{placeholder}` tokens inside a translated term.
+ */
+export type KritzelTermVars = Record<string, string | number>;

package/dist/types/interfaces/path-options.interface.d.ts

@@ -3,6 +3,8 @@ export interface KritzelPathOptions {
     points: number[][];
     translateX?: number;
     translateY?: number;
+    /** Rotation in degrees at initialization time. */
+    rotation?: number;
     scale?: number;
     stroke?: ThemeAwareColor;
     strokeWidth?: number;

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

@@ -1,5 +1,6 @@
 import { KritzelDebugInfo } from './debug-info.interface';
 import { ThemeName } from './theme.interface';
+import { LocaleCode } from './localization.interface';
 export interface KritzelSettingsConfig {
     /** Minimum zoom level allowed (0.0001 to 1) */
     scaleMin: number;
@@ -9,6 +10,8 @@ export interface KritzelSettingsConfig {
     lockDrawingScale: boolean;
     /** The current theme name */
     theme: ThemeName;
+    /** The current locale (language) code */
+    locale: LocaleCode;
     /** Left boundary of the viewport in world coordinates */
     viewportBoundaryLeft: number;
     /** Right boundary of the viewport in world coordinates */

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

@@ -12,10 +12,10 @@ export interface KritzelTheme {
     global?: {
         cursorTrailColor?: string;
         cursorTrailOpacity?: string;
-        fontFamily?: string;
-        borderColor?: string;
         dividerColor?: string;
         focusColor?: string;
+        fontFamily?: string;
+        borderColor?: string;
         focusRingColor?: string;
         iconColor?: string;
         pointerCursor?: string;
@@ -466,4 +466,29 @@ export interface KritzelTheme {
         buttonHoverBackgroundColor?: string;
         separatorColor?: string;
     };
+    /** Watermark variables */
+    watermark?: {
+        background?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        color?: string;
+        fontSize?: string;
+        offsetBottom?: string;
+        offsetRight?: string;
+        opacity?: string;
+    };
+    /** Zoom panel variables */
+    zoomPanel?: {
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        buttonActiveBackgroundColor?: string;
+        buttonBorderRadius?: string;
+        buttonHoverBackgroundColor?: string;
+        buttonSize?: string;
+        gap?: string;
+        iconColor?: string;
+        padding?: string;
+    };
 }

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

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

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

@@ -0,0 +1,6 @@
+import { KritzelLocale } from '../interfaces/localization.interface';
+/**
+ * Built-in English locale (default). Provides a complete set of term values
+ * that act as the ultimate fallback when other locales omit a key.
+ */
+export declare const EN_LOCALE: KritzelLocale;

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

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

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "kritzel-stencil",
-  "version": "0.3.16",
-  "description": "Stencil Component Starter",
+  "version": "0.3.18",
+  "homepage": "https://kritzel.io/",
+  "description": "Build infinite canvas experiences in minutes.",
+  "license": "PolyForm-Noncommercial-1.0.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
@@ -30,10 +32,6 @@
       "require": "./dist/components/*"
     }
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/kasual1/kritzel.git"
-  },
   "files": [
     "dist/",
     "loader/"
@@ -47,7 +45,6 @@
     "bump": "npm version patch",
     "release": "npm publish"
   },
-  "license": "MIT",
   "dependencies": {
     "@hocuspocus/provider": "^3.4.0",
     "@types/lodash": "^4.17.20",

package/dist/components/p-2xYAGd0I.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",borderRadius:"6px",focusBorderColor:"#333333",hoverBorderColor:"#cccccc",labelColor:"#333333",placeholderColor:"#999999",selectionBackground:"#007AFF",selectionColor:"#ffffff",suffixBackground:"#f5f5f5",suffixColor:"#666666",textColor:"#333333"},selection:{borderColor:"#007AFF",boxBackgroundColor:"rgba(0, 122, 255, 0.2)",boxBorderColor:"rgba(0, 122, 255, 0.5)",handleColor:"#ffffff",handleStrokeColor:"#007AFF"},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",separatorColor:"#ebebeb"},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",borderRadius:"6px",hoverBorderColor:"#cccccc",hoverBackgroundColor:"#f0f0f0",menuBorderRadius:"6px",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",borderRadius:"6px",hoverBorderColor:"#cccccc",inputBackground:"#ffffff",labelColor:"#666666",selectionBackground:"#007AFF",selectionColor:"#ffffff",spinnerActiveBackground:"hsl(0, 0%, 0%, 8.6%)",spinnerBackground:"transparent",spinnerBorderRadius:"5px",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",borderRadius:"6px",focusBorderColor:"#ffffff",hoverBorderColor:"#5a5a5a",labelColor:"#e0e0e0",placeholderColor:"#777777",selectionBackground:"#0A84FF",selectionColor:"#ffffff",suffixBackground:"#3a3a3a",suffixColor:"#aaaaaa",textColor:"#e0e0e0"},selection:{borderColor:"#0A84FF",boxBackgroundColor:"rgba(10, 132, 255, 0.2)",boxBorderColor:"rgba(10, 132, 255, 0.5)",handleColor:"#1a1a1a",handleStrokeColor:"#0A84FF"},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",separatorColor:"#3a3a3a"},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",borderRadius:"6px",hoverBorderColor:"#5a5a5a",background:"#1a1a1a",hoverBackgroundColor:"#3a3a3a",menuBorderRadius:"6px",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",borderRadius:"6px",focusBorderColor:"#ffffff",hoverBorderColor:"#5a5a5a",inputBackground:"#1a1a1a",labelColor:"#999999",selectionBackground:"#0A84FF",selectionColor:"#ffffff",spinnerActiveBackground:"hsl(0, 0%, 100%, 12%)",spinnerBackground:"transparent",spinnerBorderRadius:"5px",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[n,f]of Object.entries(o)){if(l&&"name"===n)continue;const o=`${e}-${a.camelToKebab(n)}`;"object"==typeof f&&null!==f?t(f,o):"string"==typeof f&&r.set(o,f)}};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 n{_core;_currentTheme=l;_targetElement=null;_storageKey;_themeRegistry=new Map;constructor(o){this._core=o,this._storageKey=o.editorId?`${t}-${o.editorId}`:t,this._themeRegistry.set("light",e),this._themeRegistry.set("dark",r),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 this._themeRegistry.get(o)??this._themeRegistry.values().next().value}registerThemes(o){0===o.length&&console.warn("[KritzelThemeManager] registerThemes called with an empty array. The theme registry will be empty."),this._themeRegistry.clear();for(const e of o)this._themeRegistry.set(e.name,e)}injectThemeEarly(o){let e=o;if(e||"undefined"==typeof document||(e=document.documentElement),!e)return;const r=this.getStoredTheme(),t=this.getThemeByName(r);a.applyThemeToElement(e,t)}getAllThemes(){return Array.from(this._themeRegistry.values())}getStoredTheme(){if("undefined"==typeof localStorage)return l;const o=localStorage.getItem(this._storageKey);if(!o)return l;try{const e=JSON.parse(o);if("string"==typeof 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("string"==typeof 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 f{static resolveThemeColor(o,e){return o?function(o,e){return e in o&&o[e]?o[e]:o["dark"===e?"dark":"light"]}(o,e??n.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,n,f;if(3===t.length)l=parseInt(t[0]+t[0],16),n=parseInt(t[1]+t[1],16),f=parseInt(t[2]+t[2],16);else{if(6!==t.length)return a;l=parseInt(t.substring(0,2),16),n=parseInt(t.substring(2,4),16),f=parseInt(t.substring(4,6),16)}return isNaN(l)||isNaN(n)||isNaN(f)?a:`rgba(${l}, ${n}, ${f}, ${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,n as K,a as T,f as a,r as d,e as l}

package/dist/components/p-B2Os1ya_.js

@@ -1 +0,0 @@
-import{p as e,H as s,c as t,h as r,d as i,t as o}from"./p-B43upypT.js";import{d as l}from"./p-skWUIStn.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=t(this,"sizeChange")}sizes=[4,6,8,12,16,24];selectedSize=null;sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}render(){return r(i,{key:"514d87732c9b15cddd5a905407ff7ce9069c06d7"},r("div",{key:"170c9a8abfe8298116d8a269338da95fbc2aac7b",class:"size-grid"},this.sizes.map((e=>r("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e)},r("kritzel-color",{value:"var(--kritzel-global-text-primary)",size:e}))))))}static get style(){return":host{display:flex;align-items:flex-start;gap:0;padding:0;width:100%;box-sizing:border-box}.size-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill, 32px);gap:8px;justify-items:center}.size-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}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}"}},[513,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}]);function c(){"undefined"!=typeof customElements&&["kritzel-stroke-size","kritzel-color"].forEach((e=>{switch(e){case"kritzel-stroke-size":customElements.get(o(e))||customElements.define(o(e),a);break;case"kritzel-color":customElements.get(o(e))||l()}}))}export{a as K,c as d}

package/dist/components/p-BTEV1WwT.js

@@ -1 +0,0 @@
-import{p as e,H as t,c as s,h as i,d as o,t as r}from"./p-B43upypT.js";import{e as n,d as a}from"./p-CUPYGT8c.js";import{a as l}from"./p-2xYAGd0I.js";import{d as h}from"./p-skWUIStn.js";import{d as p}from"./p-BFoK4W--.js";import{d as c}from"./p-Df3BwVGy.js";import{d}from"./p-CmuNn1Tc.js";import{d as m}from"./p-JhOYwUOj.js";import{d as f}from"./p-FK7b3BGt.js";import{d as u}from"./p-DbB730vO.js";import{d as g}from"./p-CXpv9Rxe.js";import{d as z}from"./p-DEy7zJCe.js";import{d as y}from"./p-BFYtCsZu.js";import{d as k}from"./p-B2Os1ya_.js";class C{static getToolConfig(e){switch(e?.toolType){case"selection":return"getToolConfig"in e&&"function"==typeof e.getToolConfig?e.getToolConfig():null;case"brush":return{type:"brush",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"size"}]};case"line":return{type:"line",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"size"},{type:"line-endings",propertyName:"arrows",additionalProps:{}}]};case"shape":return{type:"shape",colorProperty:"strokeColor",sizeProperty:"strokeWidth",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"strokeWidth"},{type:"shape-fill",propertyName:"fillColor",additionalProps:{}}]};case"text":return{type:"text",colorProperty:"fontColor",sizeProperty:"fontSize",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"font-size",propertyName:"fontSize",additionalProps:{}},{type:"font-family",propertyName:"fontFamily"}]};default:return null}}}const x=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toolChange=s(this,"toolChange"),this.displayValuesChange=s(this,"displayValuesChange")}tool;handleToolChange(e,t){const s=C.getToolConfig(e);if(t&&e&&"shape"===s?.type){const i=C.getToolConfig(t);"shape"===i?.type&&[s.colorProperty,s.sizeProperty,s.opacityProperty,"fillColor"].forEach((s=>{s&&void 0!==t[s]&&(e[s]=t[s])}))}this.config=s,this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=e[this.config.opacityProperty]??1,this.emitDisplayValues())}isExpanded=!1;theme;engine;handleSelectionChangeBound=this.handleSelectionChange.bind(this);onThemeChange(){this.emitDisplayValues()}handleEngineChange(e,t){t&&t.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound),e&&e.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}toolChange;displayValuesChange;config;palette=[];sizes=[];currentOpacity=1;updateTrigger=0;handleSelectionChange(){this.tool instanceof n&&(this.config=C.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()))}disconnectedCallback(){this.engine&&this.engine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}componentWillLoad(){this.config=C.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()),this.engine&&this.engine.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}emitDisplayValues(){if(!this.config)return;const e=this.tool[this.config.sizeProperty],t={color:l.applyOpacity(this.tool[this.config.colorProperty],this.currentOpacity,this.theme),size:e};this.tool instanceof a&&(t.fontFamily=this.tool.fontFamily),this.displayValuesChange.emit(t)}updatePalette(){this.config&&(this.palette="none"===this.config.paletteSource?[]:this.tool.palette||[])}updateSizes(){this.config&&(this.sizes="none"===this.config.sizesSource?[]:this.tool.sizes||[])}handleToggleExpand=()=>{this.isExpanded=!this.isExpanded};handleColorChange=e=>{if(this.tool[this.config.colorProperty]=e.detail,"shape"===this.config.type||"selection"===this.config.type){const t=this.tool;("string"==typeof t.fillColor?"transparent"===t.fillColor:"transparent"===t.fillColor.light&&"transparent"===t.fillColor.dark)||(t.fillColor=e.detail)}this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleSizeChange=e=>{this.tool[this.config.sizeProperty]=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleOpacityChange=e=>{this.tool[this.config.opacityProperty]=e.detail,this.currentOpacity=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool)};handlePropertyChange=(e,t)=>{if("shape"!==this.config.type&&"selection"!==this.config.type||"fillColor"!==e)this.tool[e]=t,"fontFamily"===e&&this.emitDisplayValues();else{const e="filled"===t?this.tool[this.config.colorProperty]:{light:"transparent",dark:"transparent"};this.tool.fillColor=e,"filled"===t&&(this.tool[this.config.colorProperty]=e)}this.toolChange.emit(this.tool),this.updateTrigger++};getShapeFillValue(){const e=this.tool.fillColor;return("string"==typeof e?"transparent"===e:"transparent"===e.light&&"transparent"===e.dark)?"transparent":"filled"}renderControl(e){const t=this.tool[e.propertyName];switch(e.type){case"stroke-size":return i("kritzel-stroke-size",{key:e.type,sizes:this.sizes.length>0?this.sizes:void 0,selectedSize:t,onSizeChange:this.handleSizeChange});case"font-size":return i("kritzel-font-size",{key:e.type,sizes:this.sizes.length>0?this.sizes:void 0,selectedSize:t,fontFamily:this.tool.fontFamily,onSizeChange:this.handleSizeChange});case"line-endings":return i("kritzel-line-endings",{key:e.type,value:t,onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"shape-fill":return i("kritzel-shape-fill",{key:e.type,value:this.getShapeFillValue(),onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"font-family":return i("kritzel-font-family",{key:e.type,selectedFontFamily:t,onFontFamilyChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});default:return null}}render(){if(!this.config)return null;const e=this.palette.length>6||"text"===this.config.type,t=this.palette.length>0,s=this.config.controls.find((e=>"stroke-size"===e.type||"font-size"===e.type)),r=this.config.controls.filter((e=>"stroke-size"!==e.type&&"font-size"!==e.type));return i(o,null,i("div",{style:{display:"flex",flexDirection:"row",gap:"8px",width:"100%"}},i("div",{style:{display:"flex",flexDirection:"column",gap:"12px",flex:"1"}},t&&i("kritzel-color-palette",{colors:this.palette,selectedColor:this.tool[this.config.colorProperty],isExpanded:this.isExpanded,isOpaque:!0,opacity:this.currentOpacity,theme:this.theme,onColorChange:this.handleColorChange}),s&&this.renderControl(s),i("kritzel-opacity-slider",{value:this.tool[this.config.opacityProperty],previewColor:this.tool[this.config.colorProperty],onValueChange:this.handleOpacityChange}),r.map((e=>[i("div",{class:"divider"}),this.renderControl(e)]))),e&&i("div",{style:{display:"flex",alignItems:"flex-start"}},i("button",{class:"expand-toggle",onClick:this.handleToggleExpand,title:this.isExpanded?"Collapse":"Expand"},i("kritzel-icon",{name:this.isExpanded?"chevron-up":"chevron-down"})))))}static get watchers(){return{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}],engine:[{handleEngineChange:0}]}}static get style(){return".expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}"}},[513,"kritzel-tool-config",{tool:[1040],isExpanded:[1028,"is-expanded"],theme:[1],engine:[16],config:[32],palette:[32],sizes:[32],currentOpacity:[32],updateTrigger:[32]},void 0,{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}],engine:[{handleEngineChange:0}]}]);function b(){"undefined"!=typeof customElements&&["kritzel-tool-config","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"].forEach((e=>{switch(e){case"kritzel-tool-config":customElements.get(r(e))||customElements.define(r(e),x);break;case"kritzel-color":customElements.get(r(e))||h();break;case"kritzel-color-palette":customElements.get(r(e))||p();break;case"kritzel-dropdown":customElements.get(r(e))||c();break;case"kritzel-font":customElements.get(r(e))||d();break;case"kritzel-font-family":customElements.get(r(e))||m();break;case"kritzel-font-size":customElements.get(r(e))||f();break;case"kritzel-icon":customElements.get(r(e))||u();break;case"kritzel-line-endings":customElements.get(r(e))||g();break;case"kritzel-opacity-slider":customElements.get(r(e))||z();break;case"kritzel-shape-fill":customElements.get(r(e))||y();break;case"kritzel-stroke-size":customElements.get(r(e))||k()}}))}export{C as K,x as a,b as d}

package/dist/components/p-BbactVA0.js

@@ -1 +0,0 @@
-import{p as e,H as t,c as i,h as s,d as n,t as l}from"./p-B43upypT.js";import{K as a}from"./p-DhMlShij.js";import{O as o}from"./p-BAN5dnHX.js";import{d as h}from"./p-DbB730vO.js";import{d as r,a as c}from"./p-SptaSMno.js";import{d as u}from"./p-BYmp9Ovv.js";import{d as m}from"./p-COLHjboZ.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.isWorkspaceManagerReady=i(this,"isWorkspaceManagerReady"),this.workspaceChange=i(this,"workspaceChange")}get host(){return this}visible=!1;activeWorkspace;workspaces=[];isWorkspaceManagerReady;workspaceChange;childMenuAnchor=null;openChildMenuItem=null;newWorkspace=null;editingItemId=null;handleWheel(e){e.ctrlKey&&e.preventDefault()}kritzelEngineRef=null;splitButtonRef;get sortedWorkspaces(){return[this.newWorkspace,...this.workspaces].filter((e=>null!=e)).sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime()))}async componentWillLoad(){await this.initializeEngine(),this.isWorkspaceManagerReady.emit()}async initializeEngine(){await customElements.whenDefined("kritzel-engine");const e=this.host.closest("kritzel-editor");this.kritzelEngineRef=e?.querySelector("kritzel-engine")??null,this.kritzelEngineRef||console.warn("kritzel-engine not found in kritzel-editor.")}async select(e,t){this.editingItemId||(e.action?e.action(e,t):this.workspaceChange.emit(e.value))}async add(){await this.splitButtonRef.open(),this.newWorkspace=new a(o.generateUUID(),"New Workspace"),this.editingItemId=this.newWorkspace.id}edit(e){this.openChildMenuItem=null,this.childMenuAnchor=null,requestAnimationFrame((()=>{this.editingItemId=e.id}))}async save(e){if(this.newWorkspace)this.newWorkspace.name=e.label,await(this.kritzelEngineRef?.createWorkspace(this.newWorkspace)),this.workspaceChange.emit(this.newWorkspace);else{const t=e.value;t.name=e.label,await(this.kritzelEngineRef?.updateWorkspace(t))}this.editingItemId=null,this.newWorkspace=null}cancel(){this.newWorkspace=null,this.editingItemId=null}async delete(e){this.openChildMenuItem=null,this.childMenuAnchor=null,await(this.kritzelEngineRef?.deleteWorkspace(e.value)),e.value.id===this.activeWorkspace?.id&&(this.activeWorkspace=this.sortedWorkspaces.find((t=>t.id!==e.value.id))||null,this.workspaceChange.emit(this.activeWorkspace)),await this.splitButtonRef.focusMenu()}toggleChildMenu(e,t){this.openChildMenuItem=e,this.childMenuAnchor=t}closeChildMenu(){this.openChildMenuItem=null,this.childMenuAnchor=null}handleMenuOpen(){}handleMenuClose(){this.cancel(),this.closeChildMenu()}render(){const e=this.sortedWorkspaces.sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime())).filter((e=>null!==e)).map((e=>({id:e.id,label:e.name,icon:e.isPublic?"users-round":void 0,iconTooltip:e.isPublic?"Shared workspace":void 0,value:e,isEditing:this.editingItemId===e.id,isSelected:this.activeWorkspace?.id===e.id,isNewItem:this.newWorkspace?.id===e.id,isChildMenuOpen:this.openChildMenuItem?.id===e.id,childMenuAnchor:this.openChildMenuItem?.id===e.id?this.childMenuAnchor:null,children:[{id:`${e.id}-rename`,label:"Rename",value:"rename",action:(e,t)=>this.edit(t)},{id:`${e.id}-delete`,label:"Delete",value:"delete",isDisabled:this.sortedWorkspaces.length<=1,action:(e,t)=>this.delete(t)}]})));return s(n,{style:{display:this.visible?"":"none"}},s("div",{class:{manager:!0,visible:this.visible}},s("kritzel-split-button",{ref:e=>this.splitButtonRef=e,items:e,mainButtonDisabled:null!=this.editingItemId,onMainButtonClick:()=>this.add(),onItemSelect:e=>this.select(e.detail.item,e.detail.parent),onItemToggleChildMenu:e=>this.toggleChildMenu(e.detail.item,e.detail.childMenuAnchor),onItemSave:e=>this.save(e.detail),onItemCancel:()=>this.cancel(),onItemCloseChildMenu:()=>this.closeChildMenu(),onMenuOpen:()=>this.handleMenuOpen(),onMenuClose:()=>this.handleMenuClose()})))}static get style(){return":host{display:flex;flex-direction:column;z-index:1}.manager{opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.manager.visible{opacity:1;pointer-events:auto}"}},[513,"kritzel-workspace-manager",{visible:[4],activeWorkspace:[1040],workspaces:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]},[[8,"wheel","handleWheel"]]]);function p(){"undefined"!=typeof customElements&&["kritzel-workspace-manager","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal","kritzel-split-button"].forEach((e=>{switch(e){case"kritzel-workspace-manager":customElements.get(l(e))||customElements.define(l(e),d);break;case"kritzel-icon":customElements.get(l(e))||h();break;case"kritzel-menu":customElements.get(l(e))||c();break;case"kritzel-menu-item":customElements.get(l(e))||r();break;case"kritzel-portal":customElements.get(l(e))||u();break;case"kritzel-split-button":customElements.get(l(e))||m()}}))}export{d as K,p as d}