@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-loading-overlay/kritzel-loading-overlay.js

@@ -0,0 +1,70 @@
+import { Host, h } from "@stencil/core";
+export class KritzelLoadingOverlay {
+    /**
+     * Whether the overlay is visible
+     */
+    visible = false;
+    /**
+     * The text to display next to the spinner
+     */
+    text = 'Loading...';
+    render() {
+        return (h(Host, { key: '9db6a5b128b4ba9e4e196e0bf9fff6b7853ef7c9' }, h("div", { key: 'e113ed032c0c7349b6e452d5c12d9ffb42d2dbb7', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: '55a601348ab9269125cb2043fb6e568ce8fe6b44', class: "loading-spinner" }), this.text)));
+    }
+    static get is() { return "kritzel-loading-overlay"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-loading-overlay.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-loading-overlay.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 overlay is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display next to the spinner"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "'Loading...'"
+            }
+        };
+    }
+}

package/dist/collection/components/kritzel-login-dialog/kritzel-login-dialog.css

@@ -0,0 +1,98 @@
+:host {
+  display: contents;
+}
+
+kritzel-dialog {
+  --kritzel-dialog-width-small: 380px;
+}
+
+.login-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.login-subtitle {
+  font-size: 13px;
+  color: var(--kritzel-login-dialog-subtitle-color, #666666);
+  margin: 0;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.login-providers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Provider Button */
+.provider-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);
+  border-radius: 8px;
+  background: var(--kritzel-login-dialog-button-background, #ffffff);
+  color: var(--kritzel-login-dialog-button-text-color, #333333);
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.provider-button:hover:not(:disabled) {
+  background: var(--kritzel-login-dialog-button-hover-background, #f5f5f5);
+  border-color: var(--kritzel-login-dialog-button-hover-border-color, #cccccc);
+}
+
+.provider-button:active:not(:disabled) {
+  background: var(--kritzel-login-dialog-button-active-background, #ebebeb);
+}
+
+.provider-button:focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
+
+.provider-button.is-disabled {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}
+
+.provider-button.is-loading {
+  cursor: default;
+}
+
+.provider-label {
+  flex-shrink: 0;
+}
+
+/* Loading Spinner */
+.provider-button.is-loading .provider-label {
+  opacity: 0.7;
+}
+
+@keyframes kritzel-login-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  border: 2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);
+  border-top-color: var(--kritzel-login-dialog-spinner-active-color, #333333);
+  border-radius: 50%;
+  animation: kritzel-login-spin 0.6s linear infinite;
+}

package/dist/collection/components/kritzel-login-dialog/kritzel-login-dialog.js

@@ -0,0 +1,239 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Login dialog component for displaying authentication provider buttons.
+ * This is a presentational component that emits events for all actions.
+ * The parent component (kritzel-editor) handles the actual authentication flow.
+ */
+export class KritzelLoginDialog {
+    host;
+    /** Array of authentication provider buttons to render */
+    providers = [];
+    /** Dialog title */
+    dialogTitle = 'Sign in';
+    /** Optional subtitle text displayed below the title */
+    subtitle;
+    isDialogOpen = false;
+    loadingProvider = null;
+    /** Emitted when a provider button is clicked */
+    providerLogin;
+    /** Emitted when the dialog is closed */
+    dialogClosed;
+    /** Opens the login dialog */
+    async open() {
+        this.loadingProvider = null;
+        this.isDialogOpen = true;
+    }
+    /** Closes the login dialog */
+    async close() {
+        this.isDialogOpen = false;
+        this.loadingProvider = null;
+    }
+    /** Sets or clears the loading state on a provider button */
+    async setLoading(provider) {
+        this.loadingProvider = provider;
+    }
+    handleProviderClick = (provider) => {
+        if (this.loadingProvider)
+            return;
+        this.loadingProvider = provider.name;
+        this.providerLogin.emit({ provider: provider.name });
+    };
+    closeDialog = () => {
+        this.isDialogOpen = false;
+        this.loadingProvider = null;
+        this.dialogClosed.emit();
+    };
+    render() {
+        return (h(Host, { key: '09738ca8deef6d44233b7f29bed5c63d1ec151e6' }, h("kritzel-dialog", { key: '3acdc31c0954837f3590d1087dc7a5597a177012', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'ec57c43e11a1800799b0bf5ac33fdd68cd03e746', class: "login-content" }, this.subtitle && (h("p", { key: 'ac1d59da1f857d7eb64d70a9a3f650bdb74c864c', class: "login-subtitle" }, this.subtitle)), h("div", { key: '0cf4e38f32f25a1f40b5e28b28784b5d53302cc3', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
+                'provider-button': true,
+                'is-loading': this.loadingProvider === provider.name,
+                'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
+            }, disabled: this.loadingProvider !== null && this.loadingProvider !== provider.name, onClick: () => this.handleProviderClick(provider) }, this.loadingProvider === provider.name ? (h("span", { class: "spinner" })) : (provider.icon && h("kritzel-icon", { name: provider.icon, size: 20 })), h("span", { class: "provider-label" }, provider.label)))))))));
+    }
+    static get is() { return "kritzel-login-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-login-dialog.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-login-dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "providers": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelLoginProvider[]",
+                    "resolved": "KritzelLoginProvider[]",
+                    "references": {
+                        "KritzelLoginProvider": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelLoginProvider",
+                            "referenceLocation": "KritzelLoginProvider"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of authentication provider buttons to render"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "dialogTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dialog-title",
+                "defaultValue": "'Sign in'"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional subtitle text displayed below the title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtitle"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDialogOpen": {},
+            "loadingProvider": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "providerLogin",
+                "name": "providerLogin",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a provider button is clicked"
+                },
+                "complexType": {
+                    "original": "LoginEvent",
+                    "resolved": "LoginEvent",
+                    "references": {
+                        "LoginEvent": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::LoginEvent",
+                            "referenceLocation": "LoginEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dialogClosed",
+                "name": "dialogClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dialog is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the login dialog",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the login dialog",
+                    "tags": []
+                }
+            },
+            "setLoading": {
+                "complexType": {
+                    "signature": "(provider: string | null) => Promise<void>",
+                    "parameters": [{
+                            "name": "provider",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets or clears the loading state on a provider button",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/kritzel-master-detail/kritzel-master-detail.css

@@ -0,0 +1,190 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.master-detail-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: var(--kritzel-master-detail-min-height, 300px);
+  gap: var(--kritzel-master-detail-gap, 0);
+  background-color: var(--kritzel-master-detail-background-color, transparent);
+}
+
+/* Master Menu (Left Panel) */
+.master-menu {
+  display: flex;
+  flex-direction: column;
+  width: var(--kritzel-master-detail-menu-width, 200px);
+  min-width: var(--kritzel-master-detail-menu-min-width, 160px);
+  padding: var(--kritzel-master-detail-menu-padding, 8px);
+  background-color: var(--kritzel-master-detail-menu-background-color, #ffffff);
+  border-right: var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);
+  gap: var(--kritzel-master-detail-menu-gap, 4px);
+  overflow-y: auto;
+}
+
+/* Menu Item */
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--kritzel-master-detail-menu-item-gap, 10px);
+  padding: var(--kritzel-master-detail-menu-item-padding, 10px 12px);
+  border: none;
+  border-radius: var(--kritzel-master-detail-menu-item-border-radius, 6px);
+  background-color: var(--kritzel-master-detail-menu-item-background-color, transparent);
+  color: var(--kritzel-master-detail-menu-item-color, #333333);
+  font-family: inherit;
+  font-size: var(--kritzel-master-detail-menu-item-font-size, 14px);
+  font-weight: var(--kritzel-master-detail-menu-item-font-weight, 400);
+  text-align: left;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  transition: background-color 150ms ease, color 150ms ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.menu-item:hover:not(.is-disabled) {
+  background-color: var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb);
+}
+
+.menu-item:active:not(.is-disabled) {
+  background-color: var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0);
+}
+
+.menu-item.is-selected {
+  background-color: var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);
+  color: var(--kritzel-master-detail-menu-item-selected-color, #ffffff);
+  font-weight: var(--kritzel-master-detail-menu-item-selected-font-weight, 500);
+}
+
+.menu-item.is-selected:hover {
+  background-color: var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3);
+}
+
+.menu-item.is-disabled {
+  color: var(--kritzel-master-detail-menu-item-disabled-color, #999999);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.menu-item:focus-visible {
+  outline: var(--kritzel-master-detail-menu-item-focus-outline, revert);
+  outline-offset: var(--kritzel-master-detail-menu-item-focus-outline-offset, revert);
+}
+
+/* Menu Item Icon */
+.menu-item-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Menu Item Label */
+.menu-item-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Detail Panel (Right Panel) */
+.detail-panel {
+  flex: 1;
+  min-height: 0;
+  padding: var(--kritzel-master-detail-detail-padding, 16px);
+  background-color: var(--kritzel-master-detail-detail-background-color, #ffffff);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
+  scrollbar-width: thin;
+}
+
+.detail-panel:focus {
+  outline: none;
+}
+
+.detail-panel:focus-visible {
+  outline: var(--kritzel-master-detail-detail-focus-outline, revert);
+  outline-offset: var(--kritzel-master-detail-detail-focus-outline-offset, revert);
+}
+
+/* Mobile Back Button */
+.mobile-back-button {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 0 0 16px 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--kritzel-master-detail-back-button-color, #333333);
+  font-weight: 500;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.mobile-back-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Mobile Chevron */
+.menu-item-chevron {
+  display: none;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--kritzel-master-detail-menu-item-chevron-color, #999999);
+}
+
+.menu-item-chevron svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+}
+
+/* Mobile specific styles */
+@media (max-width: 768px) {
+  .master-menu {
+    width: 100%;
+    border-right: none;
+  }
+
+  .detail-panel {
+    display: none;
+    width: 100%;
+  }
+
+  /* When detail is active on mobile */
+  .master-detail-container.is-mobile-detail-visible .master-menu {
+    display: none;
+  }
+
+  .master-detail-container.is-mobile-detail-visible .detail-panel {
+    display: block;
+  }
+
+  .mobile-back-button {
+    display: flex;
+  }
+
+  /* Override selected styles for mobile */
+  .menu-item.is-selected {
+    background-color: transparent;
+    color: var(--kritzel-master-detail-menu-item-color, #333333);
+    font-weight: var(--kritzel-master-detail-menu-item-font-weight, 400);
+  }
+
+  .menu-item.is-selected:hover {
+    background-color: var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb);
+  }
+
+  .menu-item-chevron {
+    display: flex;
+    align-items: center;
+  }
+}