@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-more-menu/kritzel-more-menu.js

@@ -0,0 +1,381 @@
+import { Host, h } from "@stencil/core";
+import { KritzelDevicesHelper } from "@kritzel/engine";
+export class KritzelMoreMenu {
+    host;
+    /**
+     * Whether the menu button is visible
+     */
+    visible = false;
+    /**
+     * The menu items to display in the dropdown.
+     * Items with `isVisible` set to `false` will be filtered out.
+     * Items with an `action` will have that action invoked on selection.
+     */
+    items = [];
+    /**
+     * The icon to display on the button
+     */
+    icon = 'ellipsis-vertical';
+    /**
+     * The size of the icon
+     */
+    iconSize = 24;
+    /**
+     * Offset Y for the portal positioning
+     */
+    offsetY = 4;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    /**
+     * Emitted when a menu item is selected
+     */
+    itemSelect;
+    menuAnchor = null;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    visibleItems = [];
+    visibilityResolveVersion = 0;
+    onItemsChange() {
+        void this.resolveVisibleItems();
+    }
+    async open() {
+        if (!this.visible || this.menuAnchor) {
+            return;
+        }
+        window.dispatchEvent(new CustomEvent('kritzel-dismiss-menus'));
+        this.menuAnchor = this.host;
+        this.visibleItems = this.filterVisibleItemsSync(this.items ?? []);
+        await this.resolveVisibleItems();
+    }
+    async close() {
+        this.closeMenu();
+    }
+    componentWillLoad() {
+        void this.resolveVisibleItems();
+    }
+    toggleMenu = (event) => {
+        event.stopPropagation();
+        if (this.menuAnchor) {
+            this.closeMenu();
+        }
+        else {
+            void this.open();
+        }
+    };
+    closeMenu = () => {
+        this.menuAnchor = null;
+    };
+    async evaluateVisibility(visibility) {
+        if (typeof visibility === 'function') {
+            try {
+                return (await visibility()) !== false;
+            }
+            catch {
+                return false;
+            }
+        }
+        return visibility !== false;
+    }
+    evaluateVisibilitySync(visibility) {
+        if (typeof visibility === 'function') {
+            try {
+                const result = visibility();
+                return result instanceof Promise ? null : result !== false;
+            }
+            catch {
+                return false;
+            }
+        }
+        return visibility !== false;
+    }
+    filterVisibleItemsSync(items) {
+        return items.reduce((visibleItems, item) => {
+            const isVisible = this.evaluateVisibilitySync(item.isVisible);
+            if (isVisible === null || !isVisible) {
+                return visibleItems;
+            }
+            if (!item.children?.length) {
+                visibleItems.push(item);
+                return visibleItems;
+            }
+            visibleItems.push({
+                ...item,
+                children: this.filterVisibleItemsSync(item.children),
+            });
+            return visibleItems;
+        }, []);
+    }
+    async filterVisibleItems(items) {
+        const resolved = await Promise.all(items.map(async (item) => {
+            const isVisible = await this.evaluateVisibility(item.isVisible);
+            if (!isVisible) {
+                return null;
+            }
+            if (!item.children?.length) {
+                return item;
+            }
+            return {
+                ...item,
+                children: await this.filterVisibleItems(item.children),
+            };
+        }));
+        return resolved.filter((item) => !!item);
+    }
+    async resolveVisibleItems() {
+        const version = ++this.visibilityResolveVersion;
+        const items = this.items ?? [];
+        const resolvedItems = await this.filterVisibleItems(items);
+        if (version !== this.visibilityResolveVersion) {
+            return;
+        }
+        this.visibleItems = resolvedItems;
+    }
+    resolveMenuLabels(items) {
+        return items.map(item => ({
+            ...item,
+            label: this.terms[item.label] ?? item.label,
+            children: item.children ? this.resolveMenuLabels(item.children) : undefined,
+        }));
+    }
+    handleMenuItemSelect = (event) => {
+        const { item, parent } = event.detail;
+        if (item.action) {
+            item.action(item, parent);
+        }
+        this.itemSelect.emit(event.detail);
+        this.closeMenu();
+    };
+    render() {
+        return (h(Host, { key: '841c9097f30d0fd9e73741ec13541b5183f3a84d', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: 'ac494e6a6f7e7a5155fc3ceac25517000ed41068', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '0d7edc5a525e692dc3692b616af0e198758ca95e', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'cc87018d0816f3c21be992bccc9feda460c98a32', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'abb10d21c437c660de25af6313081a9064ac2cac', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '3411f1403393845c098243d309cdb5e52c0eede8', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
+    }
+    static get is() { return "kritzel-more-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-more-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-more-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu button is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IKritzelMenuItem[]",
+                    "resolved": "IKritzelMenuItem<any>[]",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The menu items to display in the dropdown.\r\nItems with `isVisible` set to `false` will be filtered out.\r\nItems with an `action` will have that action invoked on selection."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon to display on the button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'ellipsis-vertical'"
+            },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size",
+                "defaultValue": "24"
+            },
+            "offsetY": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Offset Y for the portal positioning"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-y",
+                "defaultValue": "4"
+            },
+            "terms": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<Record<KritzelTermKey, string>>",
+                    "resolved": "\"backToContent.label\" | \"currentUser.dialogTitle\" | \"editor.loading\" | \"export.dialogTitle\" | \"export.exportButton\" | \"export.filename.label\" | \"export.filename.placeholder\" | \"export.format.label\" | \"export.tabs.viewport\" | \"export.tabs.workspace\" | \"login.dialogTitle\" | \"menu.align\" | \"menu.alignBottom\" | \"menu.alignCenterHorizontal\" | \"menu.alignCenterVertical\" | \"menu.alignLeft\" | \"menu.alignRight\" | \"menu.alignTop\" | \"menu.bringToFront\" | \"menu.copy\" | \"menu.cut\" | \"menu.delete\" | \"menu.export\" | \"menu.exportAsPng\" | \"menu.exportAsSvg\" | \"menu.group\" | \"menu.import\" | \"menu.logout\" | \"menu.moveDown\" | \"menu.moveUp\" | \"menu.order\" | \"menu.paste\" | \"menu.selectAll\" | \"menu.sendToBack\" | \"menu.settings\" | \"menu.share\" | \"menu.ungroup\" | \"moreMenu.ariaLabel\" | \"settings.about.description\" | \"settings.about.title\" | \"settings.categories.about\" | \"settings.categories.developer\" | \"settings.categories.general\" | \"settings.categories.shortcuts\" | \"settings.categories.viewport\" | \"settings.developer.showMigrationInfo.description\" | \"settings.developer.showMigrationInfo.label\" | \"settings.developer.showObjectInfo.description\" | \"settings.developer.showObjectInfo.label\" | \"settings.developer.showSyncProviderInfo.description\" | \"settings.developer.showSyncProviderInfo.label\" | \"settings.developer.showViewportInfo.description\" | \"settings.developer.showViewportInfo.label\" | \"settings.developer.title\" | \"settings.dialogTitle\" | \"settings.general.language.description\" | \"settings.general.language.label\" | \"settings.general.lockDrawingScale.description\" | \"settings.general.lockDrawingScale.label\" | \"settings.general.theme.description\" | \"settings.general.theme.label\" | \"settings.general.title\" | \"settings.shortcuts.title\" | \"settings.viewport.boundaryBottom.description\" | \"settings.viewport.boundaryBottom.label\" | \"settings.viewport.boundaryLeft.description\" | \"settings.viewport.boundaryLeft.label\" | \"settings.viewport.boundaryPlaceholder\" | \"settings.viewport.boundaryRight.description\" | \"settings.viewport.boundaryRight.label\" | \"settings.viewport.boundaryTop.description\" | \"settings.viewport.boundaryTop.label\" | \"settings.viewport.maxZoom.description\" | \"settings.viewport.maxZoom.label\" | \"settings.viewport.minZoom.description\" | \"settings.viewport.minZoom.label\" | \"settings.viewport.title\" | \"share.copyLink.copied\" | \"share.copyLink.title\" | \"share.dialogTitle\" | \"share.linkSharing.disabledDescription\" | \"share.linkSharing.enabledDescription\" | \"share.linkSharing.label\" | \"share.linkSharing.toggleLabel\" | \"toolConfig.collapse\" | \"toolConfig.expand\" | \"utility.delete\" | \"utility.redo\" | \"utility.undo\" | \"watermark.poweredBy\" | \"workspace.delete\" | \"workspace.rename\" | \"workspace.sharedTooltip\" | \"zoom.zoomIn\" | \"zoom.zoomOut\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved localized strings keyed by term key, supplied by the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "menuAnchor": {},
+            "isTouchDevice": {},
+            "visibleItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelect",
+                "name": "itemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a menu item is selected"
+                },
+                "complexType": {
+                    "original": "{ item: IKritzelMenuItem; parent: IKritzelMenuItem }",
+                    "resolved": "{ item: IKritzelMenuItem<any>; parent: IKritzelMenuItem<any>; }",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::IKritzelMenuItem",
+                            "referenceLocation": "IKritzelMenuItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "onItemsChange"
+            }];
+    }
+}

package/dist/collection/components/kritzel-notification-card/kritzel-notification-card.css

@@ -0,0 +1,101 @@
+:host {
+  display: block;
+}
+
+.card {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--kritzel-notification-card-max-width, 360px);
+  margin-inline: auto;
+  font-family: var(--kritzel-font-family, sans-serif);
+  padding: var(--kritzel-notification-card-padding, 12px 14px);
+  border: var(--kritzel-notification-card-border, 1px solid #e5e7eb);
+  border-radius: var(--kritzel-notification-card-border-radius, 12px);
+  background-color: var(--kritzel-notification-card-background-color, #ffffff);
+  color: var(--kritzel-notification-card-color, #111827);
+  box-shadow: var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08));
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kritzel-notification-card-header-gap, 8px);
+  margin-bottom: var(--kritzel-notification-card-header-margin-bottom, 8px);
+}
+
+.header-right {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kritzel-notification-card-header-right-gap, 6px);
+}
+
+.type-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--kritzel-notification-card-pill-height, 22px);
+  padding: var(--kritzel-notification-card-pill-padding, 0 8px);
+  border-radius: var(--kritzel-notification-card-pill-border-radius, 999px);
+  background-color: var(--kritzel-notification-card-pill-background-color, #eff6ff);
+  color: var(--kritzel-notification-card-pill-color, #1d4ed8);
+  font-size: var(--kritzel-notification-card-pill-font-size, 12px);
+  font-weight: var(--kritzel-notification-card-pill-font-weight, 600);
+  line-height: 1;
+}
+
+.card.type-info .type-pill {
+  background-color: var(--kritzel-notification-card-info-pill-background-color, #eff6ff);
+  color: var(--kritzel-notification-card-info-pill-color, #1d4ed8);
+}
+
+.card.type-warning .type-pill {
+  background-color: var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);
+  color: var(--kritzel-notification-card-warning-pill-color, #b45309);
+}
+
+.card.type-error .type-pill {
+  background-color: var(--kritzel-notification-card-error-pill-background-color, #fef2f2);
+  color: var(--kritzel-notification-card-error-pill-color, #b91c1c);
+}
+
+.timestamp {
+  color: var(--kritzel-notification-card-timestamp-color, #6b7280);
+  font-size: var(--kritzel-notification-card-timestamp-font-size, 12px);
+  white-space: nowrap;
+}
+
+.dismiss-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kritzel-notification-card-dismiss-button-size, 24px);
+  height: var(--kritzel-notification-card-dismiss-button-size, 24px);
+  padding: 0;
+  border: none;
+  border-radius: var(--kritzel-notification-card-dismiss-button-border-radius, 6px);
+  background: var(--kritzel-notification-card-dismiss-button-background-color, transparent);
+  color: var(--kritzel-notification-card-dismiss-button-color, #4b5563);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.dismiss-button:hover {
+  background: var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6);
+}
+
+.dismiss-button:active {
+  background: var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb);
+}
+
+.dismiss-button:focus-visible {
+  outline: revert;
+}
+
+.message {
+  margin: 0;
+  color: var(--kritzel-notification-card-message-color, inherit);
+  font-size: var(--kritzel-notification-card-message-font-size, 14px);
+  line-height: var(--kritzel-notification-card-message-line-height, 1.45);
+  word-break: break-word;
+}

package/dist/collection/components/kritzel-notification-card/kritzel-notification-card.js

@@ -0,0 +1,173 @@
+import { Host, h } from "@stencil/core";
+export class KritzelNotificationCard {
+    /** Notification data rendered by this card. */
+    notification;
+    /** Whether a formatted timestamp should be displayed when available. */
+    showTimestamp = true;
+    /** Locale used for formatting the timestamp. */
+    locale;
+    /** Emitted when the notification should be dismissed manually. */
+    dismiss;
+    /** Emitted when pointer hover state changes. */
+    hoverChange;
+    handleDismissClick = (event) => {
+        event.stopPropagation();
+        this.dismiss.emit();
+    };
+    handleMouseEnter = () => {
+        this.hoverChange.emit(true);
+    };
+    handleMouseLeave = () => {
+        this.hoverChange.emit(false);
+    };
+    get type() {
+        return this.notification?.type ?? 'info';
+    }
+    get role() {
+        return this.type === 'error' ? 'alert' : 'status';
+    }
+    getTypeLabel(type) {
+        switch (type) {
+            case 'warning':
+                return 'Warning';
+            case 'error':
+                return 'Error';
+            default:
+                return 'Info';
+        }
+    }
+    formatTimestamp(timestamp) {
+        if (!timestamp || !this.showTimestamp) {
+            return null;
+        }
+        const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+        if (Number.isNaN(date.getTime())) {
+            return null;
+        }
+        return new Intl.DateTimeFormat(this.locale, {
+            dateStyle: 'medium',
+            timeStyle: 'short',
+        }).format(date);
+    }
+    render() {
+        const notification = this.notification;
+        if (!notification) {
+            return h(Host, null);
+        }
+        const type = this.type;
+        const timestamp = this.formatTimestamp(notification.timestamp);
+        return (h(Host, null, h("article", { class: { card: true, [`type-${type}`]: true }, role: this.role, "aria-live": "polite", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("header", { class: "card-header" }, h("span", { class: "type-pill" }, this.getTypeLabel(type)), h("div", { class: "header-right" }, timestamp && (h("time", { class: "timestamp", dateTime: notification.timestamp?.toISOString() }, timestamp)), h("button", { class: "dismiss-button", type: "button", "aria-label": "Dismiss notification", onClick: this.handleDismissClick }, h("kritzel-icon", { name: "x", size: 16 })))), h("p", { class: "message" }, notification.message))));
+    }
+    static get is() { return "kritzel-notification-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-notification-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-notification-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "notification": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelNotification",
+                    "resolved": "KritzelNotification",
+                    "references": {
+                        "KritzelNotification": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelNotification",
+                            "referenceLocation": "KritzelNotification"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Notification data rendered by this card."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "showTimestamp": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether a formatted timestamp should be displayed when available."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-timestamp",
+                "defaultValue": "true"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Locale used for formatting the timestamp."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dismiss",
+                "name": "dismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the notification should be dismissed manually."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "hoverChange",
+                "name": "hoverChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when pointer hover state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}