@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-pill-tabs/kritzel-pill-tabs.js

@@ -0,0 +1,135 @@
+import { Host, h } from "@stencil/core";
+export class KritzelPillTabs {
+    /**
+     * Array of tab definitions to render
+     */
+    tabs = [];
+    /**
+     * Currently selected tab ID
+     */
+    value;
+    /**
+     * Emitted when the selected tab changes
+     */
+    valueChange;
+    handleTabClick(tabId) {
+        if (this.value !== tabId) {
+            this.value = tabId;
+            this.valueChange.emit(tabId);
+        }
+    }
+    handleKeyDown(event, index) {
+        const tabButtons = this.tabs;
+        let newIndex = index;
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = index > 0 ? index - 1 : tabButtons.length - 1;
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = index < tabButtons.length - 1 ? index + 1 : 0;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = tabButtons.length - 1;
+                break;
+            default:
+                return;
+        }
+        const newTab = tabButtons[newIndex];
+        this.handleTabClick(newTab.id);
+        // Focus the new tab button
+        const container = event.currentTarget;
+        const parent = container.parentElement;
+        const buttons = parent?.querySelectorAll('button');
+        buttons?.[newIndex]?.focus();
+    }
+    render() {
+        return (h(Host, { key: '16fce447fb7db0539ba115ef19771ac78f30a302' }, h("div", { key: '95487da922621b18c1ec422eb0d464131dbc28d3', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.id, class: {
+                'pill-tab': true,
+                'selected': this.value === tab.id,
+            }, role: "tab", "aria-selected": this.value === tab.id ? 'true' : 'false', tabIndex: this.value === tab.id ? 0 : -1, onClick: () => this.handleTabClick(tab.id), onKeyDown: (e) => this.handleKeyDown(e, index) }, tab.icon && h("kritzel-icon", { name: tab.icon, size: 16 }), h("span", { class: "pill-tab-label" }, tab.label)))))));
+    }
+    static get is() { return "kritzel-pill-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-pill-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-pill-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tabs": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelPillTab[]",
+                    "resolved": "KritzelPillTab[]",
+                    "references": {
+                        "KritzelPillTab": {
+                            "location": "local",
+                            "path": "C:/Projects/kritzel/libs/editor/core/src/components/kritzel-pill-tabs/kritzel-pill-tabs.tsx",
+                            "id": "src/components/kritzel-pill-tabs/kritzel-pill-tabs.tsx::KritzelPillTab"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of tab definitions to render"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected tab ID"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected tab changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/kritzel-portal/kritzel-portal.js

@@ -0,0 +1,432 @@
+import { Host, h } from "@stencil/core";
+import { ObjectHelper } from "@kritzel/engine";
+import { KritzelHTMLHelper } from "@kritzel/engine";
+export class KritzelPortal {
+    host;
+    anchor;
+    anchorChanged(newValue) {
+        if (newValue) {
+            this.openPortal();
+            // Use requestAnimationFrame to wait for the browser to paint the portal content
+            // so that getBoundingClientRect returns accurate dimensions
+            requestAnimationFrame(() => {
+                this.calculatePosition();
+                if (this.autoFocus) {
+                    this.focusFirstElement();
+                }
+            });
+        }
+        else {
+            this.closePortal();
+        }
+    }
+    offsetX;
+    offsetY;
+    autoFocus = true;
+    close;
+    handleDismissMenus() {
+        if (this.portal) {
+            this.close.emit();
+            this.closePortal();
+        }
+    }
+    handleOutsideClick(event) {
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        const target = event.target;
+        if (!this.host.contains(target)) {
+            this.close.emit();
+            this.closePortal();
+        }
+    }
+    handleOutsidePointerDown(event) {
+        if (!this.portal)
+            return;
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        const path = event.composedPath();
+        const isInsidePortal = path.some(el => el === this.host);
+        const isOnAnchor = this.anchor && path.some(el => el === this.anchor);
+        if (!isInsidePortal && !isOnAnchor) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.close.emit();
+            this.closePortal();
+        }
+    }
+    handleKeyDown(event) {
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.anchor.focus();
+            this.close.emit();
+            this.closePortal();
+            return;
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+            return;
+        }
+        if (event.key === 'Enter') {
+            const activeElement = this.getDeepActiveElement();
+            if (activeElement?.click) {
+                event.preventDefault();
+                activeElement.click();
+            }
+        }
+    }
+    handleResize() {
+        this.calculatePosition();
+    }
+    handleWindowScroll() {
+        const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
+        if (!isInViewport) {
+            this.anchor?.blur();
+            this.closePortal();
+            return;
+        }
+        this.calculatePosition();
+    }
+    portal;
+    id = `portal-${ObjectHelper.generateUUID()}`;
+    defaultOffset = 0;
+    minLeft = 0;
+    themeObserver;
+    focusFirstElement() {
+        requestAnimationFrame(() => {
+            this.firstFocusableElement?.focus?.();
+        });
+    }
+    getDeepActiveElement() {
+        let activeEl = document.activeElement;
+        while (activeEl?.shadowRoot?.activeElement) {
+            activeEl = activeEl.shadowRoot.activeElement;
+        }
+        return activeEl;
+    }
+    trapFocus(event) {
+        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
+        if (focusableElements.length === 0)
+            return;
+        const firstFocusable = focusableElements[0];
+        const lastFocusable = focusableElements[focusableElements.length - 1];
+        const activeElement = this.getDeepActiveElement();
+        if (event.shiftKey) {
+            /* shift + tab */
+            if (activeElement === firstFocusable) {
+                lastFocusable.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            /* tab */
+            if (activeElement === lastFocusable) {
+                firstFocusable.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    get firstFocusableElement() {
+        const slotEl = this.host.shadowRoot?.querySelector('slot');
+        const firstAssigned = slotEl?.assignedElements({ flatten: true })[0];
+        if (!firstAssigned)
+            return null;
+        const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);
+        return focusable[0] ?? firstAssigned;
+    }
+    get lastAddedPortal() {
+        const portals = Array.from(document.querySelectorAll('[id^="portal-"]'));
+        return portals.length ? portals[portals.length - 1] : null;
+    }
+    calculateLeft() {
+        if (!this.anchor || !this.portal)
+            return 0;
+        const refRect = this.anchor.getBoundingClientRect();
+        const portalRect = this.portal.getBoundingClientRect();
+        const offset = this.offsetX ?? this.defaultOffset;
+        // Determine alignment based on anchor position
+        // If anchor center is past the viewport midpoint, align to end (right edge of anchor)
+        const anchorCenter = refRect.left + refRect.width / 2;
+        const viewportMidpoint = window.innerWidth / 2;
+        const shouldAlignEnd = anchorCenter > viewportMidpoint;
+        let left;
+        if (shouldAlignEnd) {
+            // Align portal's right edge to anchor's right edge
+            left = refRect.right - portalRect.width - offset;
+        }
+        else {
+            // Align portal's left edge to anchor's left edge
+            left = refRect.left + offset;
+        }
+        // Clamp to viewport bounds
+        const maxLeft = window.innerWidth - portalRect.width - this.minLeft;
+        if (left < this.minLeft)
+            left = this.minLeft;
+        if (left > maxLeft)
+            left = maxLeft;
+        return Math.round(left + window.scrollX);
+    }
+    calculateTop() {
+        if (!this.anchor || !this.portal)
+            return 0;
+        const refRect = this.anchor.getBoundingClientRect();
+        const portalRect = this.portal.getBoundingClientRect();
+        const offset = this.offsetY ?? this.defaultOffset;
+        const padding = 8; // Minimum padding from viewport edges
+        let top = refRect.bottom + offset;
+        const spaceBelow = window.innerHeight - refRect.bottom - offset - padding;
+        const spaceAbove = refRect.top - offset - padding;
+        // Reset max-height CSS custom property  
+        this.host.style.removeProperty('--kritzel-portal-max-height');
+        if (portalRect.height <= spaceBelow) {
+            // Fits below the anchor
+            top = refRect.bottom + offset;
+        }
+        else if (portalRect.height <= spaceAbove) {
+            // Fits above the anchor
+            top = refRect.top - portalRect.height - offset;
+        }
+        else {
+            // Doesn't fit above or below - constrain the height
+            if (spaceBelow >= spaceAbove) {
+                // More space below, keep it below with constrained height
+                top = refRect.bottom + offset;
+                this.host.style.setProperty('--kritzel-portal-max-height', `${spaceBelow}px`);
+            }
+            else {
+                // More space above, position above with constrained height
+                top = padding;
+                this.host.style.setProperty('--kritzel-portal-max-height', `${spaceAbove}px`);
+            }
+        }
+        return Math.round(top + window.scrollY);
+    }
+    getThemeProvider() {
+        if (!this.anchor)
+            return null;
+        let current = this.anchor;
+        while (current) {
+            const provider = current.closest('kritzel-editor');
+            if (provider instanceof HTMLElement) {
+                return provider;
+            }
+            const portalProvider = current.closest('[id^="portal-"]');
+            if (portalProvider instanceof HTMLElement) {
+                return portalProvider;
+            }
+            const root = current.getRootNode();
+            if (root instanceof ShadowRoot) {
+                current = root.host;
+            }
+            else {
+                return null;
+            }
+        }
+        return null;
+    }
+    openPortal() {
+        this.portal = document.createElement('div');
+        this.portal.setAttribute('id', this.id);
+        this.portal.style.zIndex = '1';
+        this.portal.style.position = 'absolute';
+        this.portal.style.top = '0px';
+        this.portal.style.left = '0px';
+        this.portal.style.visibility = 'hidden';
+        const themeProvider = this.getThemeProvider();
+        if (themeProvider) {
+            const applyTheme = () => {
+                if (!this.portal)
+                    return;
+                for (let i = 0; i < themeProvider.style.length; i++) {
+                    const prop = themeProvider.style[i];
+                    if (prop.startsWith('--kritzel-')) {
+                        this.portal.style.setProperty(prop, themeProvider.style.getPropertyValue(prop));
+                    }
+                }
+            };
+            applyTheme();
+            this.themeObserver = new MutationObserver(() => applyTheme());
+            this.themeObserver.observe(themeProvider, {
+                attributes: true,
+                attributeFilter: ['style'],
+            });
+        }
+        this.portal.appendChild(this.host);
+        document.body.append(this.portal);
+    }
+    closePortal() {
+        this.themeObserver?.disconnect();
+        this.themeObserver = null;
+        const portal = document.getElementById(this.id);
+        if (!portal)
+            return;
+        document.body.removeChild(portal);
+        this.host.remove();
+    }
+    calculatePosition() {
+        if (!this.anchor || !this.portal)
+            return;
+        const top = this.calculateTop();
+        const left = this.calculateLeft();
+        this.portal.style.top = `${top}px`;
+        this.portal.style.left = `${left}px`;
+        this.portal.style.visibility = 'visible';
+    }
+    render() {
+        return (h(Host, { key: 'c92b863d46e8a96b44d318288471ad11ae04d1f4', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'd207f238571b877145c0c445e9d184cb1c4a4e2b' })));
+    }
+    static get is() { return "kritzel-portal"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "anchor": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "offsetX": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-x"
+            },
+            "offsetY": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-y"
+            },
+            "autoFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-focus",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "anchor",
+                "methodName": "anchorChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "kritzel-dismiss-menus",
+                "method": "handleDismissMenus",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleOutsideClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "handleOutsidePointerDown",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "scroll",
+                "method": "handleWindowScroll",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/kritzel-settings/kritzel-settings.css

@@ -0,0 +1,137 @@
+:host {
+  display: contents;
+}
+
+kritzel-dialog {
+  --kritzel-dialog-body-padding: 0;
+  --kritzel-dialog-width-large: 800px;
+  --kritzel-dialog-height-large: 500px;
+}
+
+
+.footer-button {
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.cancel-button {
+  border: 1px solid #ebebeb;
+  background: #fff;
+  color: inherit;
+}
+
+.cancel-button:hover {
+  background: #f5f5f5;
+}
+
+/* Settings Content */
+.settings-tab-panel {
+  display: none;
+}
+
+.settings-tab-panel.is-active {
+  display: block;
+}
+
+.settings-content {
+  padding: 0;
+}
+
+.settings-content h3 {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--kritzel-settings-content-heading-color, #333333);
+}
+
+.settings-content p {
+  margin: 0;
+  font-size: 14px;
+  color: var(--kritzel-settings-content-text-color, #666666);
+  line-height: 1.5;
+}
+
+.settings-group {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.settings-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.settings-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--kritzel-settings-label-color, #333333);
+  margin: 0 0 4px 0;
+}
+
+.settings-description {
+  font-size: 12px;
+  color: var(--kritzel-settings-description-color, #888888);
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* Shortcuts List */
+.shortcuts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.shortcuts-category {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.shortcuts-category-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--kritzel-settings-label-color, #333333);
+  margin: 0 0 4px 0;
+}
+
+.shortcuts-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.shortcut-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02));
+}
+
+.shortcut-label {
+  font-size: 14px;
+  color: var(--kritzel-settings-content-text-color, #666666);
+}
+
+.shortcut-key {
+  font-family: monospace;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--kritzel-settings-shortcut-key-bg, #f0f0f0);
+  color: var(--kritzel-settings-shortcut-key-color, #333333);
+  border: 1px solid var(--kritzel-settings-shortcut-key-border, #ddd);
+}