kritzel-stencil 0.3.18 → 0.3.19

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.19";

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,6 +1,6 @@
 {
   "name": "kritzel-stencil",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "homepage": "https://kritzel.io/",
   "description": "Build infinite canvas experiences in minutes.",
   "license": "PolyForm-Noncommercial-1.0.0",

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}