@kritzel/editor 0.4.31

package/dist/types/components/kritzel-editor/kritzel-editor.d.ts

@@ -0,0 +1,356 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { KritzelToolbarItem } from '@kritzel/engine';
+import { KritzelAlignment } from '@kritzel/engine';
+import { KritzelBaseObject } from '@kritzel/engine';
+import { ContextMenuItem } from '@kritzel/engine';
+import { KritzelEngineState } from '@kritzel/engine';
+import { KritzelSettingsConfig } from '@kritzel/engine';
+import { KritzelDebugInfo } from '@kritzel/engine';
+import { IKritzelMenuItem } from '@kritzel/engine';
+import { KritzelWorkspace } from '@kritzel/engine';
+import { KritzelSyncConfig } from '@kritzel/engine';
+import { KritzelAssetStorageConfig } from '@kritzel/engine';
+import { KritzelBaseTool } from '@kritzel/engine';
+import { KritzelBrushToolConfig, KritzelLineToolConfig, KritzelShapeToolConfig, KritzelTextToolConfig } from '@kritzel/engine';
+import { ActiveWorkspaceChangeEvent } from '@kritzel/engine';
+import { EditorIsReadyEvent } from '@kritzel/engine';
+import { KritzelUndoState } from '@kritzel/engine';
+import { ThemeName, KritzelTheme } from '@kritzel/engine';
+import { KritzelLocale, KritzelTermKey, KritzelTermVars, LocaleCode } from '@kritzel/engine';
+import { KritzelShortcut } from '@kritzel/engine';
+import { KritzelViewportState } from '@kritzel/engine';
+import { ObjectsAddedEvent, ObjectsRemovedEvent, ObjectsUpdatedEvent } from '@kritzel/engine';
+import { IKritzelUser } from '@kritzel/engine';
+import { IKritzelIsPublicChangeEvent } from '@kritzel/engine';
+import { KritzelLoginConfig as KritzelLoginConfig } from '@kritzel/engine';
+import { LoginEvent } from '@kritzel/engine';
+import { KritzelNotification } from '@kritzel/engine';
+import { KritzelFontMap } from '@kritzel/engine';
+import { KritzelContextMenuState } from '@kritzel/engine';
+import { KritzelObjectExportFormat } from '@kritzel/engine';
+export declare class KritzelEditor {
+    host: HTMLElement;
+    scaleMax: number;
+    scaleMin: number;
+    lockDrawingScale: boolean;
+    viewportBoundaryLeft: number;
+    viewportBoundaryRight: number;
+    viewportBoundaryTop: number;
+    viewportBoundaryBottom: number;
+    debugInfo: KritzelDebugInfo;
+    user?: IKritzelUser;
+    activeUsers?: IKritzelUser[];
+    toolbarItems: KritzelToolbarItem[];
+    globalContextMenuItems: ContextMenuItem[];
+    objectContextMenuItems: ContextMenuItem[];
+    moreMenuItems?: IKritzelMenuItem[];
+    themes?: KritzelTheme[];
+    theme: ThemeName;
+    /** License key that, when valid, removes the "Powered by Kritzel" watermark. */
+    licenseKey?: string;
+    /** The current locale (language) code applied to the editor, e.g. 'en', 'de', 'fr'. */
+    locale: LocaleCode;
+    /** An array of available locale definitions (with optional partial term overrides). */
+    locales?: KritzelLocale[];
+    /** The locale used to resolve terms missing from the active locale. */
+    fallbackLocale: LocaleCode;
+    customSvgIcons: Record<string, string>;
+    /**
+     * Registers fonts for runtime usage (for example custom object rendering).
+    * Text-tool config tooltip options are controlled via toolbarItems[].config.availableFonts.
+     */
+    customFonts: KritzelFontMap;
+    isPanningEnabled: boolean;
+    isZoomingEnabled: boolean;
+    isToolbarVisible: boolean;
+    isUtilityPanelVisible: boolean;
+    isWorkspaceManagerVisible: boolean;
+    isMoreMenuVisible: boolean;
+    isZoomPanelVisible: boolean;
+    syncConfig?: KritzelSyncConfig;
+    assetStorageConfig?: KritzelAssetStorageConfig;
+    /** The element to use as the target for the cursor. Defaults to the editor container if not set. */
+    cursorTarget?: HTMLElement;
+    /** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
+    loginConfig?: KritzelLoginConfig;
+    /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
+    editorId?: string;
+    /** Optional workspace ID to set as active. If provided, the editor will automatically activate the workspace with this ID. */
+    activeWorkspaceId?: string;
+    /** Authoritative workspace catalog for this editor instance. When provided, provider-only workspaces are hidden but not deleted. */
+    workspaces?: KritzelWorkspace[];
+    isReady: EventEmitter<EditorIsReadyEvent>;
+    activeWorkspaceChange: EventEmitter<ActiveWorkspaceChangeEvent>;
+    objectsChange: EventEmitter<KritzelBaseObject[]>;
+    objectsAdded: EventEmitter<ObjectsAddedEvent>;
+    objectsRemoved: EventEmitter<ObjectsRemovedEvent>;
+    objectsUpdated: EventEmitter<ObjectsUpdatedEvent>;
+    objectsSelectionChange: EventEmitter<KritzelBaseObject[]>;
+    undoStateChange: EventEmitter<KritzelUndoState>;
+    themeChange: EventEmitter<ThemeName>;
+    localeChange: EventEmitter<LocaleCode>;
+    viewportChange: EventEmitter<KritzelViewportState>;
+    logout: EventEmitter<void>;
+    login: EventEmitter<LoginEvent>;
+    isPublicChange: EventEmitter<IKritzelIsPublicChangeEvent>;
+    awarenessChange: EventEmitter<Map<number, Record<string, any>>>;
+    isEngineReady: boolean;
+    isToolbarReady: boolean;
+    isWorkspaceManagerReady: boolean;
+    availableWorkspaces: KritzelWorkspace[];
+    activeWorkspace?: KritzelWorkspace;
+    isVirtualKeyboardOpen: boolean;
+    undoState: KritzelUndoState | null;
+    isBackToContentButtonVisible: boolean;
+    /** Localized strings for editor-owned UI (e.g. the more menu), resolved from the active locale. */
+    resolvedTerms: Partial<Record<KritzelTermKey, string>>;
+    /** Available locales as `{ code, label }` options for the settings language selector. */
+    availableLocaleOptions: {
+        code: LocaleCode;
+        label: string;
+    }[];
+    currentZoomPercent: number;
+    shortcuts: Omit<KritzelShortcut, 'action' | 'condition'>[];
+    currentIsPublic: boolean;
+    isEditorVisible: boolean;
+    activeNotification?: KritzelNotification;
+    isNotificationDismissing: boolean;
+    contextMenuState?: KritzelContextMenuState;
+    resolvedMoreMenuItems: IKritzelMenuItem[];
+    isLoadingOverlayVisible: boolean;
+    private loadingOverlayShowTimeout?;
+    private loadingOverlayHideTimeout?;
+    private loadingOverlayShownTimestamp?;
+    private readonly loadingOverlayDelayMs;
+    private readonly loadingOverlayMinDisplayDurationMs;
+    private notificationDismissTimeout?;
+    private notificationDismissAnimationTimeout?;
+    private readonly notificationDisplayDurationMs;
+    private readonly notificationDismissAnimationDurationMs;
+    private isNotificationHovered;
+    private customFontsLoadVersion;
+    private customFontsReady;
+    onIsEngineReady(newValue: boolean): void;
+    onIsToolbarReady(newValue: boolean): void;
+    onAvailableWorkspacesChange(newWorkspaces: KritzelWorkspace[]): void;
+    onActiveWorkspaceChange(): void;
+    onCustomFontsChange(newValue: KritzelFontMap): void;
+    onMoreMenuItemsChange(): void;
+    onSyncConfigChange(): void;
+    onLoginConfigChange(): void;
+    onUserChange(): void;
+    onActiveWorkspaceIdChange(newId?: string): void;
+    onCurrentThemeChange(): void;
+    onThemesChange(): void;
+    onLocaleChange(newValue: LocaleCode): void;
+    onLocalesChange(newValue?: KritzelLocale[]): void;
+    /**
+     * Refreshes the editor-owned localized strings (e.g. the more menu and the
+     * strings forwarded to child UI components) from the engine's localization
+     * manager for the active locale.
+     */
+    private refreshLocalizedTerms;
+    onTouchStart(event: MouseEvent): void;
+    getObjectById<T extends KritzelBaseObject>(id: string): Promise<T | null>;
+    addObject<T extends KritzelBaseObject>(object: T): Promise<T | null>;
+    addObjects<T extends KritzelBaseObject>(objects: T[]): Promise<T[]>;
+    updateObject<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>): Promise<T | null>;
+    removeObject<T extends KritzelBaseObject>(object: T): Promise<T | null>;
+    removeObjects<T extends KritzelBaseObject>(objects: T[]): Promise<T[]>;
+    getSelectedObjects(): Promise<KritzelBaseObject[]>;
+    selectObjects(objects: KritzelBaseObject[]): Promise<void>;
+    selectAllObjectsInViewport(): Promise<void>;
+    clearSelection(): Promise<void>;
+    centerObjectInViewport(object: KritzelBaseObject): Promise<KritzelBaseObject<HTMLElement | SVGElement>>;
+    panToObject(object: KritzelBaseObject): Promise<void>;
+    backToContent(): Promise<boolean>;
+    centerAllObjects(animate?: boolean): Promise<boolean>;
+    centerObjects(objects: KritzelBaseObject[], animate?: boolean): Promise<boolean>;
+    setViewport(x: number, y: number, scale: number): Promise<void>;
+    panTo(x: number, y: number): Promise<void>;
+    zoomTo(scale: number, worldX?: number, worldY?: number): Promise<void>;
+    zoomIn(factor?: number, duration?: number): Promise<void>;
+    zoomOut(factor?: number, duration?: number): Promise<void>;
+    getViewport(): Promise<KritzelViewportState>;
+    screenToWorld(x: number, y: number): Promise<{
+        x: number;
+        y: number;
+    }>;
+    worldToScreen(x: number, y: number): Promise<{
+        x: number;
+        y: number;
+    }>;
+    setActiveWorkspace(id: string): Promise<void>;
+    createWorkspace(workspace: KritzelWorkspace): Promise<KritzelWorkspace | null>;
+    updateWorkspace(workspace: KritzelWorkspace): Promise<void>;
+    deleteWorkspace(workspace: KritzelWorkspace): Promise<void>;
+    getWorkspaces(): Promise<KritzelWorkspace[]>;
+    getActiveWorkspace(): Promise<KritzelWorkspace>;
+    loadSharedWorkspace(token: string): Promise<void>;
+    reinitSync(): Promise<void>;
+    registerTool(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig | KritzelShapeToolConfig): Promise<KritzelBaseTool | null>;
+    changeActiveTool(toolName: string): Promise<void>;
+    disable(): Promise<void>;
+    enable(): Promise<void>;
+    copy(): Promise<void>;
+    cut(): Promise<void>;
+    paste(x: number, y: number): Promise<void>;
+    delete(): Promise<void>;
+    bringForward(object?: KritzelBaseObject<any>): Promise<void>;
+    sendBackward(object?: KritzelBaseObject<any>): Promise<void>;
+    bringToFront(object?: KritzelBaseObject<any>): Promise<void>;
+    sendToBack(object?: KritzelBaseObject<any>): Promise<void>;
+    alignObjects(alignment: KritzelAlignment): Promise<void>;
+    group(): Promise<void>;
+    ungroup(): Promise<void>;
+    undo(): Promise<void>;
+    redo(): Promise<void>;
+    getScreenshot(format?: 'png' | 'svg'): Promise<string | null>;
+    exportViewportAsPng(): Promise<void>;
+    exportViewportAsSvg(): Promise<void>;
+    getSelectedObjectSupportedExportFormats(): Promise<KritzelObjectExportFormat[]>;
+    canExportSelectedObjectAs(format: KritzelObjectExportFormat): Promise<boolean>;
+    exportSelectedObject(format: KritzelObjectExportFormat): Promise<void>;
+    exportAsJson(): Promise<string>;
+    importFromJson(json: string): Promise<void>;
+    downloadAsJson(filename?: string): Promise<void>;
+    importFromFile(): Promise<void>;
+    loadObjectsFromJson(json: string): Promise<number>;
+    getObjectsTotalCount(): Promise<number>;
+    getAllObjects<T extends KritzelBaseObject>(): Promise<T[]>;
+    findObjects<T extends KritzelBaseObject>(predicate: (obj: KritzelBaseObject<Element>) => boolean): Promise<T[]>;
+    getObjectsInViewport(): Promise<KritzelBaseObject[]>;
+    hideContextMenu(): Promise<void>;
+    openContextMenu(options: {
+        x: number;
+        y: number;
+        objectId?: string;
+    }): Promise<void>;
+    openWorkspaceManagerMenu(): Promise<void>;
+    closeWorkspaceManagerMenu(): Promise<void>;
+    openMoreMenu(): Promise<void>;
+    closeMoreMenu(): Promise<void>;
+    openUserDialog(): Promise<void>;
+    closeUserDialog(): Promise<void>;
+    openExportDialog(): Promise<void>;
+    closeExportDialog(): Promise<void>;
+    openImportDialog(): Promise<void>;
+    closeImportDialog(): Promise<void>;
+    openSettingsDialog(): Promise<void>;
+    closeSettingsDialog(): Promise<void>;
+    openShareDialog(): Promise<void>;
+    closeShareDialog(): Promise<void>;
+    triggerSelectionChange(): Promise<void>;
+    beginSceneBootstrap(): Promise<void>;
+    endSceneBootstrap(): Promise<void>;
+    getDisplayableShortcuts(): Promise<Omit<KritzelShortcut, 'action' | 'condition'>[]>;
+    openLoginDialog(): Promise<void>;
+    closeLoginDialog(): Promise<void>;
+    setLoginLoading(provider: string | null): Promise<void>;
+    /**
+     * Sets the active locale (language) and re-renders the UI.
+     * @param code - The locale code to activate, e.g. 'de'.
+     */
+    setLocale(code: LocaleCode): Promise<void>;
+    /**
+     * Gets the currently active locale code.
+     */
+    getLocale(): Promise<LocaleCode>;
+    /**
+     * Gets the list of available locale codes (built-in and registered).
+     */
+    getAvailableLocales(): Promise<LocaleCode[]>;
+    /**
+     * Registers additional locale definitions (with optional partial term overrides).
+     * @param locales - The locale definitions to register.
+     */
+    registerLocales(locales: KritzelLocale[]): Promise<void>;
+    /**
+     * Registers custom fonts for the editor runtime.
+     * @param fonts - Mapping from font keys to family names or font definitions.
+     * @remarks This no longer controls the text-tool config tooltip font options.
+    * Configure tooltip fonts via toolbarItems[].config.availableFonts.
+     */
+    registerFonts(fonts: KritzelFontMap): Promise<void>;
+    /**
+     * Resolves a term key to its translated string for the active locale.
+     * @param key - The term key to resolve.
+     * @param vars - Optional values for `{placeholder}` interpolation.
+     */
+    t(key: KritzelTermKey, vars?: KritzelTermVars): Promise<string>;
+    /**
+     * 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>;
+    engineRef: HTMLKritzelEngineElement;
+    toolbarRef: HTMLKritzelToolbarElement;
+    settingsRef: HTMLKritzelSettingsElement;
+    exportRef: HTMLKritzelExportElement;
+    splitButtonRef: HTMLKritzelSplitButtonElement;
+    workspaceManagerRef: HTMLKritzelWorkspaceManagerElement;
+    moreMenuRef: HTMLKritzelMoreMenuElement;
+    shareDialogRef: HTMLKritzelShareDialogElement;
+    loginDialogRef: HTMLKritzelLoginDialogElement;
+    currentUserDialogRef: HTMLKritzelCurrentUserDialogElement;
+    componentWillLoad(): void;
+    private isTextToolConfig;
+    private lastToolbarItemsRef;
+    private lastNormalizedToolbarItems;
+    private getNormalizedToolbarItems;
+    private normalizeToolbar;
+    private recomputeMoreMenuItems;
+    private applyTheme;
+    private resolveThemeObject;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    checkIsReady(): Promise<void>;
+    onEngineReady(event: CustomEvent<KritzelEngineState>): Promise<void>;
+    handleWorkspacesChange(event: CustomEvent<KritzelWorkspace[]>): void;
+    handleWorkspaceManagerChange(event: CustomEvent<KritzelWorkspace | null>): Promise<void>;
+    handleActiveWorkspaceChange(event: CustomEvent<KritzelWorkspace>): void;
+    handleObjectsChange(event: CustomEvent<KritzelBaseObject[]>): void;
+    handleObjectsAdded(event: CustomEvent<ObjectsAddedEvent>): void;
+    handleObjectsRemoved(event: CustomEvent<ObjectsRemovedEvent>): void;
+    handleObjectsUpdated(event: CustomEvent<ObjectsUpdatedEvent>): void;
+    handleObjectsSelectionChange(event: CustomEvent<KritzelBaseObject[]>): void;
+    handleUndoStateChange(event: CustomEvent<KritzelUndoState>): void;
+    handleObjectsInViewportChange(event: CustomEvent<KritzelBaseObject<Element>[]>): Promise<void>;
+    handleViewportChange(event: CustomEvent<KritzelViewportState>): void;
+    private getZoomPercentFromScale;
+    handleAwarenessChange(event: CustomEvent<Map<number, Record<string, any>>>): void;
+    handleNotificationsChange(event: CustomEvent<KritzelNotification>): void;
+    handleContextMenuStateChange(event: CustomEvent<KritzelContextMenuState>): void;
+    handleIsLoadingChange(event: CustomEvent<boolean>): void;
+    private clearLoadingOverlayShowTimer;
+    private clearLoadingOverlayHideTimer;
+    private handleContextMenuActionSelected;
+    handleNotificationHoverChange(event: CustomEvent<boolean>): void;
+    private scheduleNotificationDismiss;
+    private clearNotificationDismissTimer;
+    private clearNotificationDismissAnimationTimer;
+    private dismissNotification;
+    handleSettingsChange(event: CustomEvent<KritzelSettingsConfig>): void;
+    private handleToggleIsPublic;
+    /**
+     * Updates the currentIsPublic state from the active workspace and emits the isPublicChange event.
+     */
+    private updateCurrentIsPublic;
+    private handleProviderLogin;
+    private handleCurrentUserLogout;
+    private get isLoggedIn();
+    private canExportObjectsAs;
+    private canExportObjects;
+    private getPreferredExportFormat;
+    private getSettingsStorageKey;
+    private loadSettingsFromStorage;
+    private loadShortcuts;
+    private get currentSettingsConfig();
+    private getContentObjects;
+    private registerCustomSvgIcons;
+    private registerCustomFonts;
+    private waitForCustomFontsReady;
+    private listenForMobileKeyboard;
+    private setOsSpecificCssVariables;
+    render(): any;
+}

package/dist/types/components/kritzel-export/kritzel-export.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { KritzelTermKey } from '@kritzel/engine';
+type ExportTab = 'viewport' | 'workspace';
+type ViewportExportFormat = 'png' | 'svg';
+export declare class KritzelExport {
+    /**
+     * The name of the current workspace, used as default filename
+     */
+    workspaceName: string;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
+    isDialogOpen: boolean;
+    previewUrl: string;
+    isLoading: boolean;
+    activeTab: ExportTab;
+    exportFilename: string;
+    viewportExportFormat: ViewportExportFormat;
+    exportPng: EventEmitter<void>;
+    exportSvg: EventEmitter<void>;
+    exportJson: EventEmitter<string>;
+    private get tabs();
+    private viewportFormatOptions;
+    open(previewUrl?: string): Promise<void>;
+    close(): Promise<void>;
+    private generateDefaultFilename;
+    private handleFilenameChange;
+    private closeDialog;
+    private handleTabChange;
+    private handleViewportFormatChange;
+    private handleExport;
+    private renderViewportExport;
+    private renderWorkspaceExport;
+    render(): any;
+}
+export {};

package/dist/types/components/kritzel-font/kritzel-font.d.ts

@@ -0,0 +1,6 @@
+export declare class KritzelFont {
+    fontFamily: string;
+    size: number;
+    color: string;
+    render(): any;
+}

package/dist/types/components/kritzel-font-family/kritzel-font-family.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface FontOption {
+    value: string;
+    label: string;
+    cssFontFamily?: string;
+}
+export declare class KritzelFontFamily {
+    fontOptions: FontOption[];
+    selectedFontFamily: string;
+    fontFamilyChange: EventEmitter<string>;
+    handleFontOptionsChange(): void;
+    componentWillLoad(): void;
+    private handleDropdownValueChange;
+    private ensureValidSelectedFont;
+    private resolveFontOptions;
+    render(): any;
+}

package/dist/types/components/kritzel-font-size/kritzel-font-size.d.ts

@@ -0,0 +1,10 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class KritzelFontSize {
+    sizes: number[];
+    selectedSize: number | null;
+    fontFamily: string;
+    sizeChange: EventEmitter<number>;
+    private handleSizeClick;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/kritzel-input/kritzel-input.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class KritzelInput {
+    /** Current text value */
+    value: string;
+    /** Label text displayed above the input */
+    label: string;
+    /** Placeholder text shown when input is empty */
+    placeholder: string;
+    /** Suffix text displayed after the input (e.g., file extension) */
+    suffix: string;
+    /** Input type */
+    type: 'text' | 'email' | 'password' | 'url';
+    /** Whether the input is disabled */
+    disabled: boolean;
+    /** Emitted when the value changes */
+    valueChange: EventEmitter<string>;
+    private inputValue;
+    onValueChange(newValue: string): void;
+    componentWillLoad(): void;
+    private handleInput;
+    render(): any;
+}

package/dist/types/components/kritzel-line-endings/kritzel-line-endings.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ArrowHeadStyle, LineArrowConfig } from '@kritzel/engine';
+export type LineEndingType = 'none' | ArrowHeadStyle;
+export interface LineEndingsValue {
+    start: LineEndingType;
+    end: LineEndingType;
+}
+export declare class KritzelLineEndings {
+    /** Available ending styles */
+    styles: LineEndingType[];
+    /** Current line arrow configuration */
+    value: LineArrowConfig | undefined;
+    valueChange: EventEmitter<LineArrowConfig>;
+    private getStartEnding;
+    private getEndEnding;
+    private handleStartChange;
+    private handleEndChange;
+    private getEndingPath;
+    private renderEndingIcon;
+    render(): any;
+}

package/dist/types/components/kritzel-loading-overlay/kritzel-loading-overlay.d.ts

@@ -0,0 +1,11 @@
+export declare class KritzelLoadingOverlay {
+    /**
+     * Whether the overlay is visible
+     */
+    visible: boolean;
+    /**
+     * The text to display next to the spinner
+     */
+    text: string;
+    render(): any;
+}

package/dist/types/components/kritzel-login-dialog/kritzel-login-dialog.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { KritzelLoginProvider } from '@kritzel/engine';
+import { LoginEvent } from '@kritzel/engine';
+/**
+ * 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 declare class KritzelLoginDialog {
+    host: HTMLElement;
+    /** Array of authentication provider buttons to render */
+    providers: KritzelLoginProvider[];
+    /** Dialog title */
+    dialogTitle: string;
+    /** Optional subtitle text displayed below the title */
+    subtitle?: string;
+    isDialogOpen: boolean;
+    loadingProvider: string | null;
+    /** Emitted when a provider button is clicked */
+    providerLogin: EventEmitter<LoginEvent>;
+    /** Emitted when the dialog is closed */
+    dialogClosed: EventEmitter<void>;
+    /** Opens the login dialog */
+    open(): Promise<void>;
+    /** Closes the login dialog */
+    close(): Promise<void>;
+    /** Sets or clears the loading state on a provider button */
+    setLoading(provider: string | null): Promise<void>;
+    private handleProviderClick;
+    private closeDialog;
+    render(): any;
+}

package/dist/types/components/kritzel-master-detail/kritzel-master-detail.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IKritzelMasterDetailItem, IKritzelMasterDetailSelectEvent } from '@kritzel/engine';
+export declare class KritzelMasterDetail {
+    host: HTMLElement;
+    /** Array of menu items to display in the master (left) panel */
+    items: IKritzelMasterDetailItem[];
+    /** ID of the currently selected item */
+    selectedItemId: string;
+    /** Emitted when an item is selected */
+    itemSelect: EventEmitter<IKritzelMasterDetailSelectEvent>;
+    focusedIndex: number;
+    showMobileDetail: boolean;
+    private tabRefs;
+    watchSelectedItemId(newValue: string, oldValue: string): void;
+    componentWillRender(): void;
+    private handleItemClick;
+    private handleBackClick;
+    private handleKeyDown;
+    private focusTab;
+    private handleFocus;
+    private handleBlur;
+    private setTabRef;
+    private getTabIndex;
+    render(): any;
+}

package/dist/types/components/kritzel-menu/kritzel-menu.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '@kritzel/engine';
+export declare class KritzelMenu {
+    host: HTMLElement;
+    items: IKritzelMenuItem[];
+    parent: IKritzelMenuItem;
+    itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;
+    itemSave: EventEmitter<IKritzelMenuItem>;
+    itemCancel: EventEmitter<IKritzelMenuItem>;
+    itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;
+    itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;
+    close: EventEmitter<void>;
+    selectedIndex: number | null;
+    setScrollTop(scrollTop: number): Promise<void>;
+    setFocus(): Promise<void>;
+    get openChildMenuItem(): IKritzelMenuItem<any>;
+    get editingMenuItem(): IKritzelMenuItem<any>;
+    private onOverlayClick;
+    private handleItemSelect;
+    private handleSave;
+    private handleCancel;
+    private handleToggleChildMenu;
+    private handleCloseChildMenu;
+    render(): any;
+}

package/dist/types/components/kritzel-menu-item/kritzel-menu-item.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '@kritzel/engine';
+export declare class KritzelMenuItem {
+    host: HTMLElement;
+    item: IKritzelMenuItem;
+    onItemChange(newValue: IKritzelMenuItem, oldValue: IKritzelMenuItem): void;
+    parent: IKritzelMenuItem;
+    itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;
+    itemSave: EventEmitter<IKritzelMenuItem>;
+    itemCancel: EventEmitter<IKritzelMenuItem>;
+    itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;
+    itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;
+    isDirty: boolean;
+    private inputRef;
+    private focusInput;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    private setDeviceSpecificStyles;
+    private handleItemSelect;
+    private handleInputChange;
+    private handleSave;
+    private handleCancel;
+    private handleMenuToggle;
+    private handleMenuClose;
+    private renderViewMode;
+    private renderEditMode;
+    render(): any;
+}

package/dist/types/components/kritzel-more-menu/kritzel-more-menu.d.ts

@@ -0,0 +1,55 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IKritzelMenuItem } from '@kritzel/engine';
+import { KritzelTermKey } from '@kritzel/engine';
+export declare class KritzelMoreMenu {
+    host: HTMLElement;
+    /**
+     * Whether the menu button is visible
+     */
+    visible: boolean;
+    /**
+     * 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: IKritzelMenuItem[];
+    /**
+     * The icon to display on the button
+     */
+    icon: string;
+    /**
+     * The size of the icon
+     */
+    iconSize: number;
+    /**
+     * Offset Y for the portal positioning
+     */
+    offsetY: number;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms: Partial<Record<KritzelTermKey, string>>;
+    /**
+     * Emitted when a menu item is selected
+     */
+    itemSelect: EventEmitter<{
+        item: IKritzelMenuItem;
+        parent: IKritzelMenuItem;
+    }>;
+    menuAnchor: HTMLElement;
+    isTouchDevice: boolean;
+    visibleItems: IKritzelMenuItem[];
+    private visibilityResolveVersion;
+    onItemsChange(): void;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    componentWillLoad(): void;
+    private toggleMenu;
+    private closeMenu;
+    private evaluateVisibility;
+    private evaluateVisibilitySync;
+    private filterVisibleItemsSync;
+    private filterVisibleItems;
+    private resolveVisibleItems;
+    private resolveMenuLabels;
+    private handleMenuItemSelect;
+    render(): any;
+}