kritzel-stencil 0.3.18 → 0.3.20

package/dist/types/components.d.ts

@@ -31,6 +31,7 @@ import { KritzelBaseTool } from "./classes/tools/base-tool.class";
 import { KritzelAlignment } from "./enums/alignment.enum";
 import { Element, Event } from "./stencil-public-runtime";
 import { KritzelShortcut } from "./interfaces/shortcut.interface";
+import { KritzelNotification } from "./interfaces/notification.interface";
 import { KritzelEngineState } from "./interfaces/engine-state.interface";
 import { KritzelImage } from "./classes/objects/image.class";
 import { KritzelText } from "./classes/objects/text.class";
@@ -71,6 +72,7 @@ export { KritzelBaseTool } from "./classes/tools/base-tool.class";
 export { KritzelAlignment } from "./enums/alignment.enum";
 export { Element, Event } from "./stencil-public-runtime";
 export { KritzelShortcut } from "./interfaces/shortcut.interface";
+export { KritzelNotification } from "./interfaces/notification.interface";
 export { KritzelEngineState } from "./interfaces/engine-state.interface";
 export { KritzelImage } from "./classes/objects/image.class";
 export { KritzelText } from "./classes/objects/text.class";
@@ -409,7 +411,6 @@ export namespace Components {
           * Gets the list of available locale codes (built-in and registered).
          */
         "getAvailableLocales": () => Promise<LocaleCode[]>;
-        "getCopiedObjects": () => Promise<KritzelBaseObject[]>;
         "getDisplayableShortcuts": () => Promise<Omit<KritzelShortcut, "action" | "condition">[]>;
         /**
           * Gets the currently active locale code.
@@ -423,7 +424,7 @@ export namespace Components {
         "getViewport": () => Promise<KritzelViewportState>;
         "getWorkspaces": () => Promise<KritzelWorkspace[]>;
         /**
-          * @default [     {       label: 'menu.paste',       icon: 'paste',       disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,       action: menu => this.engineRef.paste(menu.x, menu.y),     },     {       label: 'menu.selectAll',       icon: 'select-all',       disabled: async () => (await this.engineRef.getObjectsInViewport()).length === 0,       action: () => this.selectAllObjectsInViewport(),     },   ]
+          * @default [     {       label: 'menu.paste',       icon: 'paste',       action: menu => this.engineRef.paste(menu.x, menu.y),     },     {       label: 'menu.selectAll',       icon: 'select-all',       action: () => this.selectAllObjectsInViewport(),     },   ]
          */
         "globalContextMenuItems": ContextMenuItem[];
         "group": () => Promise<void>;
@@ -490,7 +491,7 @@ export namespace Components {
          */
         "loginConfig"?: KritzelLoginConfig;
         /**
-          * @default [     { label: 'menu.copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },     { label: 'menu.cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },     {       label: 'menu.paste',       icon: 'paste',       group: 'clipboard',       disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,       action: (menu, _) => this.engineRef.paste(menu.x, menu.y),     },     {       label: 'menu.order',       icon: 'ordering',       group: 'other',       children: [         { label: 'menu.bringToFront', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },         { label: 'menu.sendToBack', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },         { label: 'menu.moveUp', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },         { label: 'menu.moveDown', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },       ],     },     {       label: 'menu.align',       icon: 'align',       group: 'other',       disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,       children: [         { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },         { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },         { label: 'menu.alignRight', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },         { label: 'menu.alignTop', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },         { label: 'menu.alignCenterVertical', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },         { label: 'menu.alignBottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },       ],     },     {       label: 'menu.group',       icon: 'group',       group: 'other',       children: [         {           label: 'menu.group',           icon: 'group',           disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,           action: () => this.engineRef.group(),         },         {           label: 'menu.ungroup',           icon: 'ungroup',           disabled: async () => {             const selectedObjects = await this.engineRef.getSelectedObjects();             return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');           },           action: () => this.engineRef.ungroup(),         },       ],     },     {       label: 'menu.export',       icon: 'download',       group: 'export',       children: [         { label: 'menu.exportAsSvg', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },         { label: 'menu.exportAsPng', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },       ],     },     { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },   ]
+          * @default [     { label: 'menu.copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },     { label: 'menu.cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },     {       label: 'menu.paste',       icon: 'paste',       group: 'clipboard',       action: (menu, _) => this.engineRef.paste(menu.x, menu.y),     },     {       label: 'menu.order',       icon: 'ordering',       group: 'other',       children: [         { label: 'menu.bringToFront', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },         { label: 'menu.sendToBack', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },         { label: 'menu.moveUp', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },         { label: 'menu.moveDown', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },       ],     },     {       label: 'menu.align',       icon: 'align',       group: 'other',       children: [         { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },         { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },         { label: 'menu.alignRight', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },         { label: 'menu.alignTop', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },         { label: 'menu.alignCenterVertical', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },         { label: 'menu.alignBottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },       ],     },     {       label: 'menu.group',       icon: 'group',       group: 'other',       children: [         {           label: 'menu.group',           icon: 'group',           action: () => this.engineRef.group(),         },         {           label: 'menu.ungroup',           icon: 'ungroup',           action: () => this.engineRef.ungroup(),         },       ],     },     {       label: 'menu.export',       icon: 'download',       group: 'export',       children: [         { label: 'menu.exportAsSvg', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },         { label: 'menu.exportAsPng', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },       ],     },     { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },   ]
          */
         "objectContextMenuItems": ContextMenuItem[];
         "openContextMenu": (options: { x: number; y: number; objectId?: string; }) => Promise<void>;
@@ -543,6 +544,11 @@ export namespace Components {
          */
         "theme": ThemeName;
         "themes"?: KritzelTheme[];
+        /**
+          * Triggers a UI notification programmatically.
+          * @param notification - Notification payload. `id` and `timestamp` are optional.
+         */
+        "triggerNotification": (notification: Omit<KritzelNotification, "id"> & Partial<Pick<KritzelNotification, "id" | "timestamp">>) => Promise<void>;
         "triggerSelectionChange": () => Promise<void>;
         "undo": () => Promise<void>;
         "ungroup": () => Promise<void>;
@@ -747,10 +753,6 @@ export namespace Components {
           * Gets the list of available locale codes (built-in and registered).
          */
         "getAvailableLocales": () => Promise<LocaleCode[]>;
-        /**
-          * Returns the objects currently stored in the internal clipboard from a prior `copy()` call.
-         */
-        "getCopiedObjects": () => Promise<KritzelBaseObject[]>;
         /**
           * Returns all registered keyboard shortcuts (without action/condition) for display in a help UI.
          */
@@ -1296,6 +1298,21 @@ export namespace Components {
          */
         "visible": boolean;
     }
+    interface KritzelNotificationCard {
+        /**
+          * Locale used for formatting the timestamp.
+         */
+        "locale"?: string;
+        /**
+          * Notification data rendered by this card.
+         */
+        "notification"?: KritzelNotification;
+        /**
+          * Whether a formatted timestamp should be displayed when available.
+          * @default true
+         */
+        "showTimestamp": boolean;
+    }
     interface KritzelNumericInput {
         /**
           * Label text displayed above the input
@@ -1665,6 +1682,10 @@ export interface KritzelMoreMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKritzelMoreMenuElement;
 }
+export interface KritzelNotificationCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLKritzelNotificationCardElement;
+}
 export interface KritzelNumericInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLKritzelNumericInputElement;
@@ -1951,6 +1972,7 @@ declare global {
         "objectsInViewportChange": ObjectsInViewportChangeEvent;
         "viewportChange": KritzelViewportState;
         "awarenessChange": Map<number, Record<string, any>>;
+        "notificationsChange": KritzelNotification;
     }
     interface HTMLKritzelEngineElement extends Components.KritzelEngine, HTMLStencilElement {
         addEventListener<K extends keyof HTMLKritzelEngineElementEventMap>(type: K, listener: (this: HTMLKritzelEngineElement, ev: KritzelEngineCustomEvent<HTMLKritzelEngineElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2165,6 +2187,24 @@ declare global {
         prototype: HTMLKritzelMoreMenuElement;
         new (): HTMLKritzelMoreMenuElement;
     };
+    interface HTMLKritzelNotificationCardElementEventMap {
+        "dismiss": void;
+        "hoverChange": boolean;
+    }
+    interface HTMLKritzelNotificationCardElement extends Components.KritzelNotificationCard, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLKritzelNotificationCardElementEventMap>(type: K, listener: (this: HTMLKritzelNotificationCardElement, ev: KritzelNotificationCardCustomEvent<HTMLKritzelNotificationCardElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLKritzelNotificationCardElementEventMap>(type: K, listener: (this: HTMLKritzelNotificationCardElement, ev: KritzelNotificationCardCustomEvent<HTMLKritzelNotificationCardElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLKritzelNotificationCardElement: {
+        prototype: HTMLKritzelNotificationCardElement;
+        new (): HTMLKritzelNotificationCardElement;
+    };
     interface HTMLKritzelNumericInputElementEventMap {
         "valueChange": number | undefined;
     }
@@ -2482,6 +2522,7 @@ declare global {
         "kritzel-menu": HTMLKritzelMenuElement;
         "kritzel-menu-item": HTMLKritzelMenuItemElement;
         "kritzel-more-menu": HTMLKritzelMoreMenuElement;
+        "kritzel-notification-card": HTMLKritzelNotificationCardElement;
         "kritzel-numeric-input": HTMLKritzelNumericInputElement;
         "kritzel-opacity-slider": HTMLKritzelOpacitySliderElement;
         "kritzel-pill-tabs": HTMLKritzelPillTabsElement;
@@ -2810,7 +2851,7 @@ declare namespace LocalJSX {
          */
         "fallbackLocale"?: LocaleCode;
         /**
-          * @default [     {       label: 'menu.paste',       icon: 'paste',       disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,       action: menu => this.engineRef.paste(menu.x, menu.y),     },     {       label: 'menu.selectAll',       icon: 'select-all',       disabled: async () => (await this.engineRef.getObjectsInViewport()).length === 0,       action: () => this.selectAllObjectsInViewport(),     },   ]
+          * @default [     {       label: 'menu.paste',       icon: 'paste',       action: menu => this.engineRef.paste(menu.x, menu.y),     },     {       label: 'menu.selectAll',       icon: 'select-all',       action: () => this.selectAllObjectsInViewport(),     },   ]
          */
         "globalContextMenuItems"?: ContextMenuItem[];
         /**
@@ -2872,7 +2913,7 @@ declare namespace LocalJSX {
          */
         "loginConfig"?: KritzelLoginConfig;
         /**
-          * @default [     { label: 'menu.copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },     { label: 'menu.cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },     {       label: 'menu.paste',       icon: 'paste',       group: 'clipboard',       disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,       action: (menu, _) => this.engineRef.paste(menu.x, menu.y),     },     {       label: 'menu.order',       icon: 'ordering',       group: 'other',       children: [         { label: 'menu.bringToFront', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },         { label: 'menu.sendToBack', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },         { label: 'menu.moveUp', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },         { label: 'menu.moveDown', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },       ],     },     {       label: 'menu.align',       icon: 'align',       group: 'other',       disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,       children: [         { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },         { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },         { label: 'menu.alignRight', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },         { label: 'menu.alignTop', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },         { label: 'menu.alignCenterVertical', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },         { label: 'menu.alignBottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },       ],     },     {       label: 'menu.group',       icon: 'group',       group: 'other',       children: [         {           label: 'menu.group',           icon: 'group',           disabled: async () => (await this.engineRef.getSelectedObjects()).length < 2,           action: () => this.engineRef.group(),         },         {           label: 'menu.ungroup',           icon: 'ungroup',           disabled: async () => {             const selectedObjects = await this.engineRef.getSelectedObjects();             return !selectedObjects.some(obj => obj.__class__ === 'KritzelGroup');           },           action: () => this.engineRef.ungroup(),         },       ],     },     {       label: 'menu.export',       icon: 'download',       group: 'export',       children: [         { label: 'menu.exportAsSvg', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },         { label: 'menu.exportAsPng', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },       ],     },     { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },   ]
+          * @default [     { label: 'menu.copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },     { label: 'menu.cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },     {       label: 'menu.paste',       icon: 'paste',       group: 'clipboard',       action: (menu, _) => this.engineRef.paste(menu.x, menu.y),     },     {       label: 'menu.order',       icon: 'ordering',       group: 'other',       children: [         { label: 'menu.bringToFront', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },         { label: 'menu.sendToBack', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },         { label: 'menu.moveUp', icon: 'arrow-up-from-dot', action: () => this.engineRef.bringForward() },         { label: 'menu.moveDown', icon: 'arrow-down-from-dot', action: () => this.engineRef.sendBackward() },       ],     },     {       label: 'menu.align',       icon: 'align',       group: 'other',       children: [         { label: 'menu.alignLeft', icon: 'align-start-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.StartHorizontal) },         { label: 'menu.alignCenterHorizontal', icon: 'align-center-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterHorizontal) },         { label: 'menu.alignRight', icon: 'align-end-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.EndHorizontal) },         { label: 'menu.alignTop', icon: 'align-start-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.StartVertical) },         { label: 'menu.alignCenterVertical', icon: 'align-center-vertical', action: () => this.engineRef.alignObjects(KritzelAlignment.CenterVertical) },         { label: 'menu.alignBottom', icon: 'align-end-horizontal', action: () => this.engineRef.alignObjects(KritzelAlignment.EndVertical) },       ],     },     {       label: 'menu.group',       icon: 'group',       group: 'other',       children: [         {           label: 'menu.group',           icon: 'group',           action: () => this.engineRef.group(),         },         {           label: 'menu.ungroup',           icon: 'ungroup',           action: () => this.engineRef.ungroup(),         },       ],     },     {       label: 'menu.export',       icon: 'download',       group: 'export',       children: [         { label: 'menu.exportAsSvg', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsSvg() },         { label: 'menu.exportAsPng', icon: 'download', action: () => this.engineRef.exportSelectedObjectsAsPng() },       ],     },     { label: 'menu.delete', icon: 'delete', group: 'edit', action: () => this.engineRef.delete() },   ]
          */
         "objectContextMenuItems"?: ContextMenuItem[];
         "onActiveWorkspaceChange"?: (event: KritzelEditorCustomEvent<ActiveWorkspaceChangeEvent>) => void;
@@ -3016,6 +3057,10 @@ declare namespace LocalJSX {
           * Emitted on long-press (touch/pen). Useful for showing custom context menus on mobile.
          */
         "onLongpress"?: (event: KritzelEngineCustomEvent<PointerEvent>) => void;
+        /**
+          * Emitted when notifications change.
+         */
+        "onNotificationsChange"?: (event: KritzelEngineCustomEvent<KritzelNotification>) => void;
         /**
           * Emitted when one or more objects are added to the canvas.
          */
@@ -3317,6 +3362,29 @@ declare namespace LocalJSX {
          */
         "visible"?: boolean;
     }
+    interface KritzelNotificationCard {
+        /**
+          * Locale used for formatting the timestamp.
+         */
+        "locale"?: string;
+        /**
+          * Notification data rendered by this card.
+         */
+        "notification"?: KritzelNotification;
+        /**
+          * Emitted when the notification should be dismissed manually.
+         */
+        "onDismiss"?: (event: KritzelNotificationCardCustomEvent<void>) => void;
+        /**
+          * Emitted when pointer hover state changes.
+         */
+        "onHoverChange"?: (event: KritzelNotificationCardCustomEvent<boolean>) => void;
+        /**
+          * Whether a formatted timestamp should be displayed when available.
+          * @default true
+         */
+        "showTimestamp"?: boolean;
+    }
     interface KritzelNumericInput {
         /**
           * Label text displayed above the input
@@ -3790,6 +3858,10 @@ declare namespace LocalJSX {
         "iconSize": number;
         "offsetY": number;
     }
+    interface KritzelNotificationCardAttributes {
+        "showTimestamp": boolean;
+        "locale": string;
+    }
     interface KritzelNumericInputAttributes {
         "value": number;
         "min": number;
@@ -3884,6 +3956,7 @@ declare namespace LocalJSX {
         "kritzel-menu": KritzelMenu;
         "kritzel-menu-item": KritzelMenuItem;
         "kritzel-more-menu": Omit<KritzelMoreMenu, keyof KritzelMoreMenuAttributes> & { [K in keyof KritzelMoreMenu & keyof KritzelMoreMenuAttributes]?: KritzelMoreMenu[K] } & { [K in keyof KritzelMoreMenu & keyof KritzelMoreMenuAttributes as `attr:${K}`]?: KritzelMoreMenuAttributes[K] } & { [K in keyof KritzelMoreMenu & keyof KritzelMoreMenuAttributes as `prop:${K}`]?: KritzelMoreMenu[K] };
+        "kritzel-notification-card": Omit<KritzelNotificationCard, keyof KritzelNotificationCardAttributes> & { [K in keyof KritzelNotificationCard & keyof KritzelNotificationCardAttributes]?: KritzelNotificationCard[K] } & { [K in keyof KritzelNotificationCard & keyof KritzelNotificationCardAttributes as `attr:${K}`]?: KritzelNotificationCardAttributes[K] } & { [K in keyof KritzelNotificationCard & keyof KritzelNotificationCardAttributes as `prop:${K}`]?: KritzelNotificationCard[K] };
         "kritzel-numeric-input": Omit<KritzelNumericInput, keyof KritzelNumericInputAttributes> & { [K in keyof KritzelNumericInput & keyof KritzelNumericInputAttributes]?: KritzelNumericInput[K] } & { [K in keyof KritzelNumericInput & keyof KritzelNumericInputAttributes as `attr:${K}`]?: KritzelNumericInputAttributes[K] } & { [K in keyof KritzelNumericInput & keyof KritzelNumericInputAttributes as `prop:${K}`]?: KritzelNumericInput[K] };
         "kritzel-opacity-slider": Omit<KritzelOpacitySlider, keyof KritzelOpacitySliderAttributes> & { [K in keyof KritzelOpacitySlider & keyof KritzelOpacitySliderAttributes]?: KritzelOpacitySlider[K] } & { [K in keyof KritzelOpacitySlider & keyof KritzelOpacitySliderAttributes as `attr:${K}`]?: KritzelOpacitySliderAttributes[K] } & { [K in keyof KritzelOpacitySlider & keyof KritzelOpacitySliderAttributes as `prop:${K}`]?: KritzelOpacitySlider[K] };
         "kritzel-pill-tabs": Omit<KritzelPillTabs, keyof KritzelPillTabsAttributes> & { [K in keyof KritzelPillTabs & keyof KritzelPillTabsAttributes]?: KritzelPillTabs[K] } & { [K in keyof KritzelPillTabs & keyof KritzelPillTabsAttributes as `attr:${K}`]?: KritzelPillTabsAttributes[K] } & { [K in keyof KritzelPillTabs & keyof KritzelPillTabsAttributes as `prop:${K}`]?: KritzelPillTabs[K] };
@@ -3940,6 +4013,7 @@ declare module "@stencil/core" {
             "kritzel-menu": LocalJSX.IntrinsicElements["kritzel-menu"] & JSXBase.HTMLAttributes<HTMLKritzelMenuElement>;
             "kritzel-menu-item": LocalJSX.IntrinsicElements["kritzel-menu-item"] & JSXBase.HTMLAttributes<HTMLKritzelMenuItemElement>;
             "kritzel-more-menu": LocalJSX.IntrinsicElements["kritzel-more-menu"] & JSXBase.HTMLAttributes<HTMLKritzelMoreMenuElement>;
+            "kritzel-notification-card": LocalJSX.IntrinsicElements["kritzel-notification-card"] & JSXBase.HTMLAttributes<HTMLKritzelNotificationCardElement>;
             "kritzel-numeric-input": LocalJSX.IntrinsicElements["kritzel-numeric-input"] & JSXBase.HTMLAttributes<HTMLKritzelNumericInputElement>;
             "kritzel-opacity-slider": LocalJSX.IntrinsicElements["kritzel-opacity-slider"] & JSXBase.HTMLAttributes<HTMLKritzelOpacitySliderElement>;
             "kritzel-pill-tabs": LocalJSX.IntrinsicElements["kritzel-pill-tabs"] & JSXBase.HTMLAttributes<HTMLKritzelPillTabsElement>;

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

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

@@ -10,9 +10,6 @@ import { SnapCandidate } from "./anchor.interface";
 export interface KritzelEngineState {
     activeWorkspace: KritzelWorkspace | null | undefined;
     activeTool: KritzelBaseTool | null;
-    copiedObjects?: KritzelBaseObject<any>[] | null;
-    /** Maps copied object IDs to their original source object IDs (for anchor remapping during paste) */
-    copiedObjectIdMapping?: Map<string, string> | null;
     objects: KritzelObjectMap<KritzelBaseObject<Element>> | null;
     snapCandidate?: SnapCandidate | null;
     resizeHandleType: KritzelHandleType | undefined;

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

@@ -0,0 +1,10 @@
+export interface KritzelNotification {
+    /** Unique identifier for the notification */
+    id: string;
+    /** Type of the notification (e.g., 'info', 'warning', 'error') */
+    type: 'info' | 'warning' | 'error';
+    /** Message content of the notification */
+    message: string;
+    /** Optional timestamp for when the notification was created */
+    timestamp?: Date;
+}

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

@@ -189,6 +189,12 @@ export interface KritzelTheme {
         controlsTransform?: string;
         controlsTransition?: string;
         controlsTransitionDuration?: string;
+        notificationAnimationDuration?: string;
+        notificationAnimationEasing?: string;
+        notificationDismissAnimationDuration?: string;
+        notificationDismissAnimationEasing?: string;
+        topCenterNotificationTop?: string;
+        topCenterNotificationZIndex?: string;
         topLeftButtonsLeft?: string;
         topLeftButtonsTop?: string;
         topRightButtonsRight?: string;
@@ -307,6 +313,43 @@ export interface KritzelTheme {
         innerBorderRadius?: string;
         padding?: string;
     };
+    /** Notification card variables */
+    notificationCard?: {
+        backgroundColor?: string;
+        border?: string;
+        borderRadius?: string;
+        boxShadow?: string;
+        color?: string;
+        dismissButtonActiveBackgroundColor?: string;
+        dismissButtonBackgroundColor?: string;
+        dismissButtonBorderRadius?: string;
+        dismissButtonColor?: string;
+        dismissButtonHoverBackgroundColor?: string;
+        dismissButtonSize?: string;
+        errorPillBackgroundColor?: string;
+        errorPillColor?: string;
+        headerGap?: string;
+        headerMarginBottom?: string;
+        headerRightGap?: string;
+        infoPillBackgroundColor?: string;
+        infoPillColor?: string;
+        maxWidth?: string;
+        messageColor?: string;
+        messageFontSize?: string;
+        messageLineHeight?: string;
+        padding?: string;
+        pillBackgroundColor?: string;
+        pillBorderRadius?: string;
+        pillColor?: string;
+        pillFontSize?: string;
+        pillFontWeight?: string;
+        pillHeight?: string;
+        pillPadding?: string;
+        timestampColor?: string;
+        timestampFontSize?: string;
+        warningPillBackgroundColor?: string;
+        warningPillColor?: string;
+    };
     /** Numeric input variables */
     numericInput?: {
         borderColor?: string;

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "kritzel-stencil",
-  "version": "0.3.18",
+  "version": "0.3.20",
   "homepage": "https://kritzel.io/",
-  "description": "Build infinite canvas experiences in minutes.",
+  "description": "Build infinite canvas experiences in minutes with Kritzel.io",
+  "keywords": [
+    "infinite canvas",
+    "collaboration",
+    "whiteboard",
+    "drawing"
+  ],
   "license": "PolyForm-Noncommercial-1.0.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -1,115 +1,11 @@
-[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
+# Kritzel Stencil Core
 
-# Stencil Component Starter
+This package contains the shared Stencil-based core that powers Kritzel's framework-specific variants.
 
-This is a starter project for building a standalone Web Component using Stencil.
+It is not intended as the primary entry point for application integration. Instead, use the framework wrapper that matches your stack:
 
-Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.
+- [Kritzel for Angular](https://kritzel.io/docs/angular/overview)
+- [Kritzel for React](https://kritzel.io/docs/react/overview)
+- [Kritzel for Vue](https://kritzel.io/docs/vue/overview)
 
-# Stencil
-
-Stencil is a compiler for building fast web apps using Web Components.
-
-Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
-
-Stencil components are just Web Components, so they work in any major framework or with no framework at all.
-
-## Getting Started
-
-To start building a new web component using Stencil, clone this repo to a new directory:
-
-```bash
-git clone https://github.com/ionic-team/stencil-component-starter.git my-component
-cd my-component
-git remote rm origin
-```
-
-and run:
-
-```bash
-npm install
-npm start
-```
-
-To build the component for production, run:
-
-```bash
-npm run build
-```
-
-To run the unit tests for the components, run:
-
-```bash
-npm test
-```
-
-Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
-
-## Naming Components
-
-When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
-
-Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic-generated web components use the prefix `ion`.
-
-## Using this component
-
-There are two strategies we recommend for using web components built with Stencil.
-
-The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
-
-You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
-
-### Lazy Loading
-
-If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
-
-For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
-
-```html
-<script type="module" src="https://unpkg.com/my-design-system"></script>
-<!--
-To avoid unpkg.com redirects to the actual file, you can also directly import:
-https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
--->
-<my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
-```
-
-This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
-
-You can also import the script as part of your `node_modules` in your applications entry file:
-
-```tsx
-import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
-```
-
-Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
-
-### Standalone
-
-If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
-
-To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
-
-For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
-
-```tsx
-import 'foobar-design-system/my-component';
-
-function App() {
-  return (
-    <>
-      <div>
-        <my-component
-          first="Stencil"
-          middle="'Don't call me a framework'"
-          last="JS"
-        ></my-component>
-      </div>
-    </>
-  );
-}
-
-export default App;
-```
-
-Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx).
+For licensing details, see the [Kritzel License](https://kritzel.io/license).

package/dist/components/p-Bc55X65h.js

@@ -1 +0,0 @@
-import{p as e,H as t,h as o,d as s,t as i}from"./p-B43upypT.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}fontFamily="Arial, sans-serif";size=24;color="#000000";render(){return o(s,{key:"49c44f7fef61bd7116e63bbe9522b0a0e22de116"},o("div",{key:"4d130682f67e9c0d758cb6194e6a95f15bceb2ee",class:"font-preview",style:{fontFamily:this.fontFamily,fontSize:`${this.size}px`,color:this.color}},"A"))}static get style(){return":host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}"}},[513,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}]);function r(){"undefined"!=typeof customElements&&["kritzel-font"].forEach((e=>{"kritzel-font"===e&&(customElements.get(i(e))||customElements.define(i(e),n))}))}export{n as K,r as d}