@eclipse-lyra/extension-howto-system 0.7.56 → 0.7.58

package/dist/howto-extension-BEQ-0XJ7.js

@@ -0,0 +1,1335 @@
+import { File, LyraWidget, TOOLBAR_BOTTOM_END, TOPIC_CONTRIBUTEIONS_CHANGED, TOPIC_WORKSPACE_CHANGED, TOPIC_WORKSPACE_CONNECTED, activeEditorSignal, appLoaderService, appSettings, commandRegistry, contributionRegistry, createLogger, partDirtySignal, publish, registerAll, rootContext, subscribe, toastError, watchSignal, workspaceService } from "@eclipse-lyra/core";
+import { KEY_AI_CONFIG, TOPIC_AICONFIG_CHANGED } from "@eclipse-lyra/extension-ai-system/api";
+import { css, html, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+//#region src/howto-service.ts
+var logger$1 = createLogger("HowToService");
+var HOWTO_CONTRIBUTION_TARGET = "system.howtos";
+/**
+* HowTo Service
+* 
+* Manages HowTo contributions by reading from the contribution registry.
+* Provides methods to retrieve and manage workflows.
+*/
+var HowToService = class {
+	constructor() {
+		this.contributions = /* @__PURE__ */ new Map();
+		this.loadContributions();
+		subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
+			if (event.target === "system.howtos") this.loadContributions();
+		});
+	}
+	/**
+	* Load contributions from the contribution registry
+	*/
+	loadContributions() {
+		const contributions = contributionRegistry.getContributions(HOWTO_CONTRIBUTION_TARGET);
+		this.contributions.clear();
+		for (const contribution of contributions) {
+			if (!contribution.id) {
+				logger$1.warn("HowTo contribution missing id, skipping");
+				continue;
+			}
+			if (!contribution.label) contribution.label = typeof contribution.title === "function" ? contribution.title() : contribution.title;
+			if (!contribution.steps || contribution.steps.length === 0) {
+				logger$1.warn(`HowTo contribution "${contribution.id}" has no steps, skipping`);
+				continue;
+			}
+			const stepIds = /* @__PURE__ */ new Set();
+			for (const step of contribution.steps) {
+				if (stepIds.has(step.id)) {
+					logger$1.warn(`HowTo contribution "${contribution.id}" has duplicate step ID: "${step.id}"`);
+					continue;
+				}
+				stepIds.add(step.id);
+			}
+			this.contributions.set(contribution.id, contribution);
+			const title = typeof contribution.title === "function" ? contribution.title() : contribution.title;
+			logger$1.debug(`Loaded HowTo contribution: ${title} (${contribution.id})`);
+		}
+		logger$1.info(`Loaded ${this.contributions.size} HowTo contributions`);
+	}
+	/**
+	* Get a HowTo Contribution by ID
+	* 
+	* @param contributionId The ID of the contribution
+	* @returns The contribution or undefined if not found
+	*/
+	getContribution(contributionId) {
+		return this.contributions.get(contributionId);
+	}
+	/**
+	* Get all registered HowTo Contributions
+	* 
+	* @returns Array of all contributions
+	*/
+	getAllContributions() {
+		return Array.from(this.contributions.values());
+	}
+	/**
+	* Get HowTo Contributions by category
+	* 
+	* @param category The category to filter by
+	* @returns Array of contributions in the category
+	*/
+	getContributionsByCategory(category) {
+		return Array.from(this.contributions.values()).filter((contrib) => contrib.category === category);
+	}
+	/**
+	* Check if a contribution exists
+	* 
+	* @param contributionId The ID of the contribution
+	* @returns True if the contribution exists
+	*/
+	hasContribution(contributionId) {
+		return this.contributions.has(contributionId);
+	}
+};
+var howToService = new HowToService();
+//#endregion
+//#region src/contributions/onboarding-howto-contributions.ts
+var ONBOARDING_FILE_NAME = "welcome.txt";
+async function getOnboardingFilePath() {
+	if (!await workspaceService.getWorkspace()) return null;
+	const folders = await workspaceService.getFolders();
+	if (folders.length === 0) return null;
+	return `${folders[0].name}/${ONBOARDING_FILE_NAME}`;
+}
+/**
+* Type guard to check if an editor implements EditorContentProvider
+*/
+function isEditorContentProvider$1(editor) {
+	return editor && typeof editor.getFilePath === "function";
+}
+/**
+* Checks if a workspace is selected
+*/
+async function isWorkspaceSelected() {
+	return workspaceService.isConnected();
+}
+/**
+* Checks if the onboarding file exists
+*/
+async function onboardingFileExists() {
+	const path = await getOnboardingFilePath();
+	if (!path) return false;
+	const workspace = await workspaceService.getWorkspace();
+	if (!workspace) return false;
+	try {
+		return await workspace.getResource(path) instanceof File;
+	} catch {
+		return false;
+	}
+}
+/**
+* Checks if the onboarding file is open in an editor
+*/
+function isOnboardingFileOpen() {
+	const activeEditor = activeEditorSignal.get();
+	if (!activeEditor || !isEditorContentProvider$1(activeEditor)) return false;
+	const filePath = activeEditor.getFilePath();
+	return filePath === ONBOARDING_FILE_NAME || filePath?.endsWith("/" + ONBOARDING_FILE_NAME) === true;
+}
+/**
+* Checks if the active editor is clean (no unsaved changes)
+* Returns true only if the onboarding file is open AND not dirty
+*/
+function isActiveEditorClean() {
+	if (!isOnboardingFileOpen()) return false;
+	const activeEditor = activeEditorSignal.get();
+	if (!activeEditor) return false;
+	return activeEditor.isDirty() === false;
+}
+/**
+* Checks if the onboarding file is closed (not open in any editor)
+*/
+function isOnboardingFileClosed() {
+	return !isOnboardingFileOpen();
+}
+function getAppName$1() {
+	return appLoaderService.getCurrentApp()?.name || "AppSpace";
+}
+contributionRegistry.registerContribution(HOWTO_CONTRIBUTION_TARGET, {
+	id: "appspace.onboarding",
+	title: () => `Welcome to ${getAppName$1()}`,
+	description: () => `Get started with ${getAppName$1()} by learning the basics of workspace and file management`,
+	icon: "graduation-cap",
+	label: "",
+	category: "Getting Started",
+	initialize: (context) => {
+		const cleanups = [];
+		subscribe(TOPIC_WORKSPACE_CHANGED, () => {
+			context.requestUpdate();
+		});
+		subscribe(TOPIC_WORKSPACE_CONNECTED, () => {
+			context.requestUpdate();
+		});
+		cleanups.push(watchSignal(activeEditorSignal, () => {
+			context.requestUpdate();
+		}));
+		cleanups.push(watchSignal(partDirtySignal, () => {
+			context.requestUpdate();
+		}));
+		return () => {
+			cleanups.forEach((cleanup) => cleanup());
+		};
+	},
+	steps: [
+		{
+			id: "create-text-file",
+			title: "Create welcome.txt",
+			description: "Create a new text file called \"welcome.txt\" in your workspace. If you don't have a workspace selected, choose one first.",
+			preCondition: async () => {
+				return await isWorkspaceSelected();
+			},
+			postCondition: async () => {
+				return await onboardingFileExists();
+			},
+			command: "touch",
+			commandParams: async () => {
+				const path = await getOnboardingFilePath();
+				return path ? {
+					path,
+					contents: "Welcome to AppSpace!\n\nThis is your first file. You can edit it and save your changes."
+				} : {};
+			}
+		},
+		{
+			id: "open-text-file",
+			title: "Open welcome.txt",
+			description: "Open the \"welcome.txt\" file in the editor.",
+			preCondition: async () => {
+				return await onboardingFileExists();
+			},
+			postCondition: () => {
+				return isOnboardingFileOpen();
+			},
+			command: "open_editor",
+			commandParams: async () => {
+				const path = await getOnboardingFilePath();
+				return path ? { path } : {};
+			}
+		},
+		{
+			id: "edit-and-save",
+			title: "Type something and save",
+			description: "Type some text in the editor to modify the file, then save it using Ctrl+S or the save button.",
+			preCondition: () => {
+				return isOnboardingFileOpen();
+			},
+			postCondition: () => {
+				return isActiveEditorClean();
+			}
+		},
+		{
+			id: "close-text-file",
+			title: "Close the file",
+			description: "Close the editor tab by clicking the X button on the tab.",
+			preCondition: () => {
+				return isOnboardingFileOpen();
+			},
+			postCondition: () => {
+				return isOnboardingFileClosed();
+			}
+		}
+	]
+});
+//#endregion
+//#region src/contributions/ai-setup-howto-contributions.ts
+var AI_CONFIG_EDITOR_KEY = ".system.ai-config";
+/**
+* Type guard to check if an editor implements EditorContentProvider
+*/
+function isEditorContentProvider(editor) {
+	return editor && typeof editor.getFilePath === "function";
+}
+/**
+* Checks if the AI config editor is open
+*/
+function isAIConfigEditorOpen() {
+	const activeEditor = activeEditorSignal.get();
+	if (!activeEditor || !isEditorContentProvider(activeEditor)) return false;
+	return activeEditor.getFilePath() === AI_CONFIG_EDITOR_KEY;
+}
+/**
+* Checks if an LLM provider is configured (has default provider with API key)
+*/
+async function isLLMProviderConfigured() {
+	try {
+		const config = await appSettings.get(KEY_AI_CONFIG);
+		if (!config || !config.defaultProvider) return false;
+		const defaultProvider = config.providers?.find((p) => p.name === config.defaultProvider);
+		if (!defaultProvider) return false;
+		return !!defaultProvider.apiKey && defaultProvider.apiKey.trim() !== "";
+	} catch {
+		return false;
+	}
+}
+/**
+* Checks if the AI config editor has unsaved changes
+*/
+function isAIConfigEditorDirty() {
+	const activeEditor = activeEditorSignal.get();
+	if (!activeEditor || !isEditorContentProvider(activeEditor)) return false;
+	if (activeEditor.getFilePath() !== AI_CONFIG_EDITOR_KEY) return false;
+	return activeEditor.isDirty() === true;
+}
+/**
+* Checks if the AI config editor is saved (not dirty)
+*/
+function isAIConfigEditorSaved() {
+	if (!isAIConfigEditorOpen()) return false;
+	return !isAIConfigEditorDirty();
+}
+/**
+* Checks if the AI config editor is closed
+*/
+function isAIConfigEditorClosed() {
+	return !isAIConfigEditorOpen();
+}
+/**
+* Checks if user has typed something in the AI chat
+* This checks if there are any chat sessions with messages
+*/
+async function hasTypedInChat() {
+	try {
+		const sessions = await appSettings.get("aiChatSessions");
+		if (!sessions || typeof sessions !== "object") return false;
+		for (const sessionId in sessions) {
+			const session = sessions[sessionId];
+			if (session?.history && Array.isArray(session.history)) {
+				if (session.history.some((msg) => msg.role === "user" && msg.content && msg.content.trim() !== "")) return true;
+			}
+		}
+		return false;
+	} catch {
+		return false;
+	}
+}
+function getAppName() {
+	return appLoaderService.getCurrentApp()?.name || "AppSpace";
+}
+contributionRegistry.registerContribution(HOWTO_CONTRIBUTION_TARGET, {
+	id: "appspace.ai-setup",
+	title: () => `Set up AI in ${getAppName()}`,
+	description: () => `Configure an LLM provider to enable AI chat features in ${getAppName()}`,
+	icon: "robot",
+	label: "",
+	category: "Getting Started",
+	initialize: (context) => {
+		const cleanups = [];
+		cleanups.push(watchSignal(activeEditorSignal, () => {
+			context.requestUpdate();
+		}));
+		cleanups.push(watchSignal(partDirtySignal, () => {
+			context.requestUpdate();
+		}));
+		subscribe(TOPIC_AICONFIG_CHANGED, () => {
+			context.requestUpdate();
+		});
+		return () => {
+			cleanups.forEach((cleanup) => cleanup());
+		};
+	},
+	steps: [
+		{
+			id: "open-ai-settings",
+			title: "Open AI Settings",
+			description: "Open the AI settings editor by clicking the robot icon in the toolbar or using the command palette.",
+			preCondition: () => true,
+			postCondition: () => isAIConfigEditorOpen(),
+			command: "open_ai_config"
+		},
+		{
+			id: "configure-llm-provider",
+			title: "Configure LLM Provider",
+			description: "Select a provider as default and enter an API key. Make sure to save your changes using Ctrl+S or the save button.",
+			preCondition: () => isAIConfigEditorOpen(),
+			postCondition: async () => {
+				const configured = await isLLMProviderConfigured();
+				const saved = isAIConfigEditorSaved();
+				return configured && saved;
+			}
+		},
+		{
+			id: "save-and-close",
+			title: "Save and Close",
+			description: "Save your changes (if not already saved) and close the AI settings editor tab.",
+			preCondition: () => isAIConfigEditorOpen(),
+			postCondition: () => isAIConfigEditorClosed()
+		},
+		{
+			id: "type-in-chat",
+			title: "Type in Chat",
+			description: "Open the AI chat view (if not already open) and type a message to test your AI configuration.",
+			preCondition: async () => await isLLMProviderConfigured(),
+			postCondition: async () => await hasTypedInChat()
+		}
+	]
+});
+//#endregion
+//#region src/howto-panel.ts
+var TOPIC_SHOW_HOWTO_PANEL = "howto/show-panel";
+var TOPIC_TOGGLE_HOWTO_PANEL = "howto/toggle-panel";
+var SETTINGS_KEY = "howto-panel";
+var DEFAULT_POSITION = {
+	x: 100,
+	y: 100
+};
+var DEFAULT_PANEL_SIZE = {
+	width: 400,
+	height: 300
+};
+var LyraHowToPanel = class LyraHowToPanel extends LyraWidget {
+	constructor(..._args) {
+		super(..._args);
+		this.contributions = [];
+		this.activeContributionId = null;
+		this.stepStates = /* @__PURE__ */ new Map();
+		this.isMinimized = false;
+		this.isVisible = false;
+		this.positionX = DEFAULT_POSITION.x;
+		this.positionY = DEFAULT_POSITION.y;
+		this.isDragging = false;
+		this.dragPreviewPosition = null;
+		this.dragStartPosition = {
+			x: 0,
+			y: 0
+		};
+		this.panelRef = createRef();
+		this.handleDragStart = (e) => {
+			const target = e.target;
+			if (this.isDragTarget(target) || !this.panelRef.value) return;
+			const rect = this.panelRef.value.getBoundingClientRect();
+			this.dragStartPosition = {
+				x: e.clientX - rect.left,
+				y: e.clientY - rect.top
+			};
+			this.isDragging = true;
+			this.dragPreviewPosition = {
+				x: this.positionX,
+				y: this.positionY
+			};
+			this.requestUpdate();
+			e.preventDefault();
+			e.stopPropagation();
+		};
+		this.handleDragMove = (e) => {
+			if (!this.isDragging || !this.dragPreviewPosition) return;
+			const bounds = this.getViewportBounds();
+			const newX = Math.max(0, Math.min(e.clientX - this.dragStartPosition.x, bounds.maxX));
+			const newY = Math.max(0, Math.min(e.clientY - this.dragStartPosition.y, bounds.maxY));
+			if (this.dragPreviewPosition.x !== newX || this.dragPreviewPosition.y !== newY) {
+				this.dragPreviewPosition = {
+					x: newX,
+					y: newY
+				};
+				this.requestUpdate();
+			}
+		};
+		this.handleDragEnd = async () => {
+			if (!this.isDragging || !this.dragPreviewPosition) return;
+			this.isDragging = false;
+			const previewPos = this.dragPreviewPosition;
+			this.dragPreviewPosition = null;
+			this.positionX = previewPos.x;
+			this.positionY = previewPos.y;
+			await this.saveSettings();
+			this.requestUpdate();
+		};
+	}
+	async doBeforeUI() {
+		this.loadContributions();
+		subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
+			if (event.target === "system.howtos") {
+				this.loadContributions();
+				this.requestUpdate();
+			}
+		});
+		subscribe(TOPIC_SHOW_HOWTO_PANEL, () => this.showPanel());
+		subscribe(TOPIC_TOGGLE_HOWTO_PANEL, () => this.toggleVisibility());
+		await this.loadSettings();
+		if (!workspaceService.isConnected() && this.isVisible === false) {
+			const settings = await appSettings.getDialogSetting(SETTINGS_KEY);
+			if (!settings || settings.visible === void 0) {
+				this.isVisible = true;
+				await this.saveSettings();
+			}
+		}
+		subscribe(TOPIC_WORKSPACE_CONNECTED, () => {
+			const checkAutoHide = async () => {
+				const settings = await appSettings.getDialogSetting(SETTINGS_KEY);
+				if (!settings || settings.visible === void 0) {}
+			};
+			checkAutoHide();
+		});
+	}
+	doInitUI() {
+		this.boundHandleDragMove = this.handleDragMove.bind(this);
+		this.boundHandleDragEnd = this.handleDragEnd.bind(this);
+		document.addEventListener("mousemove", this.boundHandleDragMove);
+		document.addEventListener("mouseup", this.boundHandleDragEnd);
+	}
+	firstUpdated(_changedProperties) {
+		super.firstUpdated(_changedProperties);
+	}
+	loadContributions() {
+		this.contributions = howToService.getAllContributions();
+	}
+	async loadSettings() {
+		const settings = await appSettings.getDialogSetting(SETTINGS_KEY);
+		if (settings) {
+			if (settings.position) {
+				this.positionX = settings.position.x || DEFAULT_POSITION.x;
+				this.positionY = settings.position.y || DEFAULT_POSITION.y;
+			}
+			if (settings.visible !== void 0) this.isVisible = settings.visible;
+		}
+	}
+	async saveSettings() {
+		await appSettings.setDialogSetting(SETTINGS_KEY, {
+			position: {
+				x: this.positionX,
+				y: this.positionY
+			},
+			visible: this.isVisible
+		});
+	}
+	isDragTarget(target) {
+		return !!(target.closest(".header-actions") || target.closest("wa-button"));
+	}
+	getViewportBounds() {
+		const panelWidth = this.panelRef.value?.offsetWidth || DEFAULT_PANEL_SIZE.width;
+		const panelHeight = this.panelRef.value?.offsetHeight || DEFAULT_PANEL_SIZE.height;
+		return {
+			maxX: window.innerWidth - panelWidth,
+			maxY: window.innerHeight - panelHeight
+		};
+	}
+	async startHowTo(contributionId) {
+		const contribution = howToService.getContribution(contributionId);
+		if (!contribution) {
+			toastError(`HowTo "${contributionId}" not found`);
+			return;
+		}
+		this.cleanupHowTo();
+		this.activeContributionId = contributionId;
+		this.isMinimized = false;
+		const states = contribution.steps.map((step) => ({
+			step,
+			status: "pending"
+		}));
+		this.stepStates.set(contributionId, states);
+		if (contribution.initialize) {
+			const context = {
+				requestUpdate: () => this.recheckActiveStepConditions(),
+				contributionId
+			};
+			this.howtoCleanup = contribution.initialize(context) || void 0;
+		}
+		this.requestUpdate();
+		await this.checkPreConditions(contributionId, 0);
+	}
+	cleanupHowTo() {
+		if (this.howtoCleanup) {
+			this.howtoCleanup();
+			this.howtoCleanup = void 0;
+		}
+	}
+	getStepState(contributionId, stepIndex) {
+		const states = this.stepStates.get(contributionId);
+		return states && stepIndex < states.length ? states[stepIndex] : null;
+	}
+	async checkPreConditions(contributionId, stepIndex) {
+		const state = this.getStepState(contributionId, stepIndex);
+		if (!state) return;
+		if (!state.step.preCondition) {
+			state.preConditionMet = true;
+			this.requestUpdate();
+			return;
+		}
+		try {
+			state.preConditionMet = await state.step.preCondition();
+			this.requestUpdate();
+		} catch (error) {
+			console.error(`Pre-condition check failed for step ${state.step.id}:`, error);
+			state.preConditionMet = false;
+			this.requestUpdate();
+		}
+	}
+	async checkPostConditions(contributionId, stepIndex) {
+		const state = this.getStepState(contributionId, stepIndex);
+		if (!state) return;
+		if (!state.step.postCondition) {
+			this.completeStep(contributionId, stepIndex);
+			return;
+		}
+		try {
+			const result = await state.step.postCondition();
+			state.postConditionMet = result;
+			state.status = result ? "completed" : "failed";
+			if (result) this.activateNextStep(contributionId, stepIndex);
+			this.requestUpdate();
+		} catch (error) {
+			console.error(`Post-condition check failed for step ${state.step.id}:`, error);
+			state.postConditionMet = false;
+			state.status = "failed";
+			this.requestUpdate();
+		}
+	}
+	completeStep(contributionId, stepIndex) {
+		const state = this.getStepState(contributionId, stepIndex);
+		if (!state) return;
+		state.status = "completed";
+		this.activateNextStep(contributionId, stepIndex);
+		this.requestUpdate();
+	}
+	async activateNextStep(contributionId, stepIndex) {
+		const states = this.stepStates.get(contributionId);
+		if (!states || stepIndex + 1 >= states.length) return;
+		const nextState = states[stepIndex + 1];
+		nextState.status = "active";
+		await this.checkPreConditions(contributionId, stepIndex + 1);
+	}
+	/**
+	* Re-checks conditions for active and pending steps when workspace or editor state changes
+	*/
+	async recheckActiveStepConditions() {
+		if (!this.activeContributionId) return;
+		const states = this.stepStates.get(this.activeContributionId);
+		if (!states) return;
+		const activeStepIndex = states.findIndex((state) => state.status === "active");
+		if (activeStepIndex !== -1) {
+			const activeState = states[activeStepIndex];
+			const step = activeState.step;
+			if (step.postCondition) try {
+				if (await step.postCondition() && activeState.status === "active") {
+					await this.checkPostConditions(this.activeContributionId, activeStepIndex);
+					return;
+				}
+			} catch (error) {}
+		}
+		for (let i = 0; i < states.length; i++) {
+			const state = states[i];
+			if (state.status === "pending" && state.step.preCondition) await this.checkPreConditions(this.activeContributionId, i);
+		}
+		this.requestUpdate();
+	}
+	async executeStep(contributionId, stepIndex) {
+		const state = this.getStepState(contributionId, stepIndex);
+		if (!state) return;
+		if (!await this.validatePreConditions(state, contributionId, stepIndex)) return;
+		state.status = "active";
+		this.requestUpdate();
+		if (state.step.command && !await this.executeStepCommand(state)) return;
+		await this.checkPostConditions(contributionId, stepIndex);
+	}
+	async validatePreConditions(state, contributionId, stepIndex) {
+		if (!state.step.preCondition) return true;
+		if (state.preConditionMet === void 0 || state.preConditionMet === false) await this.checkPreConditions(contributionId, stepIndex);
+		if (state.preConditionMet !== true) {
+			toastError(`Pre-conditions not met for step: ${state.step.title}`);
+			return false;
+		}
+		return true;
+	}
+	async executeStepCommand(state) {
+		if (!state.step.command) return true;
+		try {
+			const rawParams = state.step.commandParams;
+			const params = typeof rawParams === "function" ? await rawParams() : rawParams || {};
+			const execContext = commandRegistry.createExecutionContext(params);
+			await commandRegistry.execute(state.step.command, execContext);
+			return true;
+		} catch (error) {
+			console.error(`Failed to execute command for step ${state.step.id}:`, error);
+			toastError(`Failed to execute step: ${state.step.title}`);
+			state.status = "failed";
+			this.requestUpdate();
+			return false;
+		}
+	}
+	async runStepCommand(contributionId, stepIndex) {
+		const state = this.getStepState(contributionId, stepIndex);
+		if (!state || !state.step.command) return;
+		if (state.step.preCondition) {
+			if (!await state.step.preCondition()) {
+				toastError(`Pre-conditions not met for step: ${state.step.title}`);
+				return;
+			}
+		}
+		if (await this.executeStepCommand(state)) await this.checkPostConditions(contributionId, stepIndex);
+	}
+	skipStep(contributionId, stepIndex) {
+		const state = this.getStepState(contributionId, stepIndex);
+		if (!state || !state.step.optional) return;
+		state.status = "skipped";
+		this.activateNextStep(contributionId, stepIndex);
+		this.requestUpdate();
+	}
+	closeHowTo() {
+		this.cleanupHowTo();
+		this.activeContributionId = null;
+		this.stepStates.clear();
+		this.requestUpdate();
+	}
+	toggleMinimize() {
+		this.isMinimized = !this.isMinimized;
+		this.requestUpdate();
+	}
+	async showPanel() {
+		this.isVisible = true;
+		this.isMinimized = false;
+		await this.saveSettings();
+		this.requestUpdate();
+	}
+	async hidePanel() {
+		this.isVisible = false;
+		await this.saveSettings();
+		this.requestUpdate();
+	}
+	async toggleVisibility() {
+		if (this.isVisible) await this.hidePanel();
+		else await this.showPanel();
+	}
+	renderStep(state, index, contributionId) {
+		const { step, status, preConditionMet, postConditionMet } = state;
+		const isActive = status === "active";
+		const isCompleted = status === "completed";
+		const isFailed = status === "failed";
+		const isPending = status === "pending";
+		const isSkipped = status === "skipped";
+		return html`
+            <div class="step ${status}" ?data-active=${isActive}>
+                <div class="step-header">
+                    <div class="step-number">${index + 1}</div>
+                    <div class="step-title">${step.title}</div>
+                    <div class="step-status">
+                        ${step.command ? html`
+                            <wa-button 
+                                size="small" 
+                                appearance="plain" 
+                                @click=${(e) => {
+			e.stopPropagation();
+			this.runStepCommand(contributionId, index);
+		}}
+                                title="Run step command"
+                            >
+                                <wa-icon name="play"></wa-icon>
+                            </wa-button>
+                        ` : nothing}
+                        ${isCompleted ? html`<wa-icon name="check-circle" class="status-icon completed"></wa-icon>` : nothing}
+                        ${isFailed ? html`<wa-icon name="xmark-circle" class="status-icon failed"></wa-icon>` : nothing}
+                        ${isSkipped ? html`<wa-icon name="minus-circle" class="status-icon skipped"></wa-icon>` : nothing}
+                        ${isPending ? html`<wa-icon name="circle" class="status-icon pending"></wa-icon>` : nothing}
+                        ${isActive ? html`<wa-icon name="play-circle" class="status-icon active"></wa-icon>` : nothing}
+                    </div>
+                </div>
+                <div class="step-description">${step.description}</div>
+                ${step.preCondition && preConditionMet !== void 0 ? html`
+                    <div class="condition pre-condition ${preConditionMet ? "met" : "not-met"}">
+                        <wa-icon name="${preConditionMet ? "check" : "xmark"}"></wa-icon>
+                        <span>Pre-condition: ${preConditionMet ? "Met" : "Not met"}</span>
+                    </div>
+                ` : nothing}
+                ${step.postCondition && postConditionMet !== void 0 ? html`
+                    <div class="condition post-condition ${postConditionMet ? "met" : "not-met"}">
+                        <wa-icon name="${postConditionMet ? "check" : "xmark"}"></wa-icon>
+                        <span>Post-condition: ${postConditionMet ? "Met" : "Not met"}</span>
+                    </div>
+                ` : nothing}
+                ${isActive && step.optional ? html`
+                    <div class="step-actions">
+                        <wa-button size="small" appearance="outline" @click=${() => this.skipStep(contributionId, index)}>
+                            <wa-icon name="forward"></wa-icon>
+                            Skip
+                        </wa-button>
+                    </div>
+                ` : nothing}
+            </div>
+        `;
+	}
+	render() {
+		if (!this.isVisible) return nothing;
+		const activeContribution = this.activeContributionId ? howToService.getContribution(this.activeContributionId) : null;
+		const activeStepStates = this.activeContributionId ? this.stepStates.get(this.activeContributionId) || [] : [];
+		return html`
+            ${this.dragPreviewPosition ? html`
+                <div 
+                    class="howto-panel-drag-preview"
+                style=${styleMap({
+			left: `${this.dragPreviewPosition.x}px`,
+			top: `${this.dragPreviewPosition.y}px`,
+			width: `${this.panelRef.value?.offsetWidth || DEFAULT_PANEL_SIZE.width}px`,
+			height: `${this.panelRef.value?.offsetHeight || DEFAULT_PANEL_SIZE.height}px`,
+			display: "block",
+			visibility: "visible"
+		})}
+                ></div>
+            ` : nothing}
+            <div 
+                class="howto-panel ${this.isMinimized ? "minimized" : ""} ${this.dragPreviewPosition ? "dragging" : ""}"
+                style=${styleMap({
+			left: `${this.positionX}px`,
+			top: `${this.positionY}px`,
+			transform: "translateZ(0)"
+		})}
+                ${ref(this.panelRef)}
+            >
+                <div class="panel-header" @mousedown=${this.handleDragStart}>
+                    <div class="header-title">
+                        <wa-icon name="list-check"></wa-icon>
+                        <span>HowTo Workflows</span>
+                    </div>
+                    <div class="header-actions" @mousedown=${(e) => e.stopPropagation()}>
+                        <wa-button 
+                            size="small" 
+                            appearance="plain" 
+                            @click=${this.toggleMinimize}
+                            title="${this.isMinimized ? "Expand" : "Minimize"}"
+                        >
+                            <wa-icon name="${this.isMinimized ? "chevron-up" : "chevron-down"}"></wa-icon>
+                        </wa-button>
+                        <wa-button 
+                            size="small" 
+                            appearance="plain" 
+                            @click=${this.hidePanel}
+                            title="Hide Panel"
+                        >
+                            <wa-icon name="xmark"></wa-icon>
+                        </wa-button>
+                    </div>
+                </div>
+                
+                ${!this.isMinimized ? html`
+                    <div class="panel-content">
+                        ${activeContribution ? html`
+                            <div class="active-workflow">
+                                <div class="workflow-header">
+                                    <div class="workflow-title-section">
+                                        <h3>${typeof activeContribution.title === "function" ? activeContribution.title() : activeContribution.title}</h3>
+                                        ${activeContribution.description ? html`
+                                            <p class="workflow-description">${typeof activeContribution.description === "function" ? activeContribution.description() : activeContribution.description}</p>
+                                        ` : nothing}
+                                    </div>
+                                    <wa-button 
+                                        size="small" 
+                                        appearance="plain" 
+                                        @click=${this.closeHowTo}
+                                        title="Close HowTo"
+                                    >
+                                        <wa-icon name="xmark"></wa-icon>
+                                    </wa-button>
+                                </div>
+                                <div class="steps-list">
+                                    ${activeStepStates.map((state, index) => this.renderStep(state, index, this.activeContributionId))}
+                                </div>
+                            </div>
+                        ` : html`
+                            <div class="workflows-list">
+                                <h3>Available Workflows</h3>
+                                ${this.contributions.length === 0 ? html`
+                                    <div class="empty-state">
+                                        <wa-icon name="list-check" style="font-size: 2em; opacity: 0.5; margin-bottom: 12px;"></wa-icon>
+                                        <p>No HowTo workflows available yet.</p>
+                                        <p style="font-size: 0.9em; opacity: 0.7;">Extensions can register workflows via the contribution registry.</p>
+                                    </div>
+                                ` : this.contributions.map((contrib) => {
+			const title = typeof contrib.title === "function" ? contrib.title() : contrib.title;
+			const description = contrib.description ? typeof contrib.description === "function" ? contrib.description() : contrib.description : null;
+			return html`
+                                    <div class="workflow-item" @click=${() => this.startHowTo(contrib.id)}>
+                                        ${contrib.icon ? html`
+                                            <wa-icon name="${contrib.icon}"></wa-icon>
+                                        ` : html`
+                                            <wa-icon name="list-check"></wa-icon>
+                                        `}
+                                        <div class="workflow-info">
+                                            <div class="workflow-title">${title}</div>
+                                            ${description ? html`
+                                                <div class="workflow-desc">${description}</div>
+                                            ` : nothing}
+                                            <div class="workflow-meta">${contrib.steps.length} step${contrib.steps.length !== 1 ? "s" : ""}</div>
+                                        </div>
+                                    </div>
+                                `;
+		})}
+                            </div>
+                        `}
+                    </div>
+                ` : nothing}
+            </div>
+        `;
+	}
+	static {
+		this.styles = css`
+        :host {
+            display: block;
+            position: fixed;
+            z-index: 10000;
+            pointer-events: none;
+        }
+
+        .howto-panel-drag-preview {
+            position: fixed !important;
+            border: 3px dashed var(--wa-color-primary-50, #0066cc) !important;
+            background: var(--wa-color-primary-05, rgba(0, 102, 204, 0.05)) !important;
+            border-radius: var(--wa-border-radius-medium, 8px);
+            z-index: 10001 !important;
+            pointer-events: none !important;
+            opacity: 0.8 !important;
+            box-sizing: border-box;
+            display: block !important;
+            visibility: visible !important;
+            min-width: 100px;
+            min-height: 100px;
+        }
+
+        :host-context(.wa-light) .howto-panel-drag-preview {
+            background: var(--wa-color-primary-95);
+            border-color: var(--wa-color-primary-50);
+        }
+
+        .howto-panel {
+            position: fixed !important;
+            width: 400px;
+            max-height: 600px;
+            background: var(--wa-color-surface-raised, var(--wa-color-neutral-05));
+            border: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-loud, var(--wa-color-neutral-25));
+            border-radius: var(--wa-border-radius-medium, 8px);
+            box-shadow: var(--wa-shadow-large, 0 8px 24px rgba(0, 0, 0, 0.8));
+            pointer-events: all;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        :host-context(.wa-light) .howto-panel {
+            background: var(--wa-color-surface-raised, var(--wa-color-neutral-95));
+            border-color: var(--wa-color-neutral-border-loud, var(--wa-color-neutral-75));
+            box-shadow: var(--wa-shadow-large, 0 8px 24px rgba(0, 0, 0, 0.2));
+        }
+
+        .howto-panel.minimized {
+            max-height: auto;
+        }
+
+        .howto-panel.dragging {
+            opacity: 0.5;
+        }
+
+        .panel-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--wa-spacing-medium, 12px) var(--wa-spacing-large, 16px);
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-10));
+            border-bottom: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-loud, var(--wa-color-neutral-25));
+            cursor: move;
+            user-select: none;
+        }
+
+        :host-context(.wa-light) .panel-header {
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-90));
+            border-bottom-color: var(--wa-color-neutral-border-loud, var(--wa-color-neutral-75));
+        }
+
+        .header-title {
+            display: flex;
+            align-items: center;
+            gap: var(--wa-spacing-small, 8px);
+            font-weight: 600;
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-90));
+        }
+
+        :host-context(.wa-light) .header-title {
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-10));
+        }
+
+        .header-actions {
+            display: flex;
+            gap: var(--wa-spacing-x-small, 4px);
+        }
+
+        .panel-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: var(--wa-spacing-large, 16px);
+        }
+
+        .workflows-list h3 {
+            margin: 0 0 var(--wa-spacing-medium, 12px) 0;
+            font-size: var(--wa-font-size-medium, 14px);
+            font-weight: 600;
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-80));
+        }
+
+        :host-context(.wa-light) .workflows-list h3 {
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-20));
+        }
+
+        .workflow-item {
+            display: flex;
+            align-items: flex-start;
+            gap: var(--wa-spacing-medium, 12px);
+            padding: var(--wa-spacing-medium, 12px);
+            margin-bottom: var(--wa-spacing-small, 8px);
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-10));
+            border: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-subtle, var(--wa-color-neutral-20));
+            border-radius: var(--wa-border-radius-small, 6px);
+            cursor: pointer;
+            transition: all var(--wa-transition-medium, 0.2s);
+        }
+
+        :host-context(.wa-light) .workflow-item {
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-90));
+            border-color: var(--wa-color-neutral-border-subtle, var(--wa-color-neutral-80));
+        }
+
+        .workflow-item:hover {
+            background: var(--wa-color-mix-hover, var(--wa-color-neutral-15));
+            border-color: var(--wa-color-neutral-border-loud, var(--wa-color-neutral-30));
+        }
+
+        :host-context(.wa-light) .workflow-item:hover {
+            background: var(--wa-color-mix-hover, var(--wa-color-neutral-85));
+            border-color: var(--wa-color-neutral-border-loud, var(--wa-color-neutral-70));
+        }
+
+        .workflow-info {
+            flex: 1;
+        }
+
+        .workflow-title {
+            font-weight: 600;
+            margin-bottom: var(--wa-spacing-x-small, 4px);
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-90));
+        }
+
+        :host-context(.wa-light) .workflow-title {
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-10));
+        }
+
+        .workflow-desc {
+            font-size: var(--wa-font-size-small, 12px);
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-70));
+            margin-bottom: var(--wa-spacing-x-small, 4px);
+        }
+
+        :host-context(.wa-light) .workflow-desc {
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-30));
+        }
+
+        .workflow-meta {
+            font-size: var(--wa-font-size-x-small, 11px);
+            color: var(--wa-color-text-quiet, var(--wa-color-neutral-60));
+        }
+
+        :host-context(.wa-light) .workflow-meta {
+            color: var(--wa-color-text-quiet, var(--wa-color-neutral-40));
+        }
+
+        .active-workflow {
+            display: flex;
+            flex-direction: column;
+            gap: var(--wa-spacing-large, 16px);
+        }
+
+        .workflow-header {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: var(--wa-spacing-medium, 12px);
+            margin-bottom: var(--wa-spacing-medium, 12px);
+        }
+
+        .workflow-title-section {
+            flex: 1;
+        }
+
+        .workflow-header h3 {
+            margin: 0 0 var(--wa-spacing-small, 8px) 0;
+            font-size: var(--wa-font-size-large, 16px);
+            font-weight: 600;
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-90));
+        }
+
+        :host-context(.wa-light) .workflow-header h3 {
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-10));
+        }
+
+        .workflow-description {
+            margin: 0;
+            font-size: var(--wa-font-size-medium, 13px);
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-70));
+        }
+
+        :host-context(.wa-light) .workflow-description {
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-30));
+        }
+
+        .steps-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--wa-spacing-medium, 12px);
+        }
+
+        .step {
+            padding: var(--wa-spacing-medium, 12px);
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-10));
+            border: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-subtle, var(--wa-color-neutral-20));
+            border-radius: var(--wa-border-radius-small, 6px);
+            transition: all var(--wa-transition-medium, 0.2s);
+        }
+
+        :host-context(.wa-light) .step {
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-90));
+            border-color: var(--wa-color-neutral-border-subtle, var(--wa-color-neutral-80));
+        }
+
+        .step[data-active="true"] {
+            border-color: var(--wa-color-primary-50);
+            background: var(--wa-color-primary-05);
+        }
+
+        :host-context(.wa-light) .step[data-active="true"] {
+            background: var(--wa-color-primary-95);
+            border-color: var(--wa-color-primary-50);
+        }
+
+        .step.completed {
+            border-color: var(--wa-color-success-50);
+            background: var(--wa-color-success-05);
+        }
+
+        :host-context(.wa-light) .step.completed {
+            background: var(--wa-color-success-95);
+            border-color: var(--wa-color-success-50);
+        }
+
+        .step.failed {
+            border-color: var(--wa-color-danger-50);
+            background: var(--wa-color-danger-05);
+        }
+
+        :host-context(.wa-light) .step.failed {
+            background: var(--wa-color-danger-95);
+            border-color: var(--wa-color-danger-50);
+        }
+
+        .step-header {
+            display: flex;
+            align-items: center;
+            gap: var(--wa-spacing-medium, 12px);
+            margin-bottom: var(--wa-spacing-small, 8px);
+        }
+
+        .step-number {
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-20));
+            border-radius: 50%;
+            font-size: var(--wa-font-size-small, 12px);
+            font-weight: 600;
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-80));
+        }
+
+        :host-context(.wa-light) .step-number {
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-80));
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-20));
+        }
+
+        .step-title {
+            flex: 1;
+            font-weight: 600;
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-90));
+        }
+
+        :host-context(.wa-light) .step-title {
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-10));
+        }
+
+        .step-status {
+            display: flex;
+            align-items: center;
+            gap: var(--wa-spacing-small, 8px);
+        }
+
+        .status-icon {
+            width: 20px;
+            height: 20px;
+        }
+
+        .status-icon.completed {
+            color: var(--wa-color-success-50);
+        }
+
+        .status-icon.failed {
+            color: var(--wa-color-danger-50);
+        }
+
+        .status-icon.skipped {
+            color: var(--wa-color-neutral-50);
+        }
+
+        .status-icon.active {
+            color: var(--wa-color-primary-50);
+        }
+
+        .status-icon.pending {
+            color: var(--wa-color-neutral-50);
+        }
+
+        .step-description {
+            font-size: var(--wa-font-size-medium, 13px);
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-70));
+            margin-bottom: var(--wa-spacing-small, 8px);
+            line-height: 1.4;
+        }
+
+        :host-context(.wa-light) .step-description {
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-30));
+        }
+
+        .condition {
+            display: flex;
+            align-items: center;
+            gap: var(--wa-spacing-x-small, 6px);
+            font-size: var(--wa-font-size-small, 12px);
+            padding: var(--wa-spacing-x-small, 6px) var(--wa-spacing-small, 8px);
+            border-radius: var(--wa-border-radius-x-small, 4px);
+            margin-bottom: var(--wa-spacing-small, 8px);
+        }
+
+        .condition.met {
+            background: var(--wa-color-success-10);
+            color: var(--wa-color-success-70);
+        }
+
+        :host-context(.wa-light) .condition.met {
+            background: var(--wa-color-success-90);
+            color: var(--wa-color-success-30);
+        }
+
+        .condition.not-met {
+            background: var(--wa-color-danger-10);
+            color: var(--wa-color-danger-70);
+        }
+
+        :host-context(.wa-light) .condition.not-met {
+            background: var(--wa-color-danger-90);
+            color: var(--wa-color-danger-30);
+        }
+
+        .step-actions {
+            display: flex;
+            gap: var(--wa-spacing-small, 8px);
+            margin-top: var(--wa-spacing-small, 8px);
+        }
+
+        .empty-state {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: var(--wa-spacing-x-large, 40px) var(--wa-spacing-large, 20px);
+            text-align: center;
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-70));
+        }
+
+        :host-context(.wa-light) .empty-state {
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-30));
+        }
+
+        .empty-state p {
+            margin: var(--wa-spacing-small, 8px) 0;
+        }
+    `;
+	}
+};
+_decorate([state()], LyraHowToPanel.prototype, "contributions", void 0);
+_decorate([state()], LyraHowToPanel.prototype, "activeContributionId", void 0);
+_decorate([state()], LyraHowToPanel.prototype, "stepStates", void 0);
+_decorate([state()], LyraHowToPanel.prototype, "isMinimized", void 0);
+_decorate([state()], LyraHowToPanel.prototype, "isVisible", void 0);
+_decorate([state()], LyraHowToPanel.prototype, "positionX", void 0);
+_decorate([state()], LyraHowToPanel.prototype, "positionY", void 0);
+_decorate([state()], LyraHowToPanel.prototype, "dragPreviewPosition", void 0);
+LyraHowToPanel = _decorate([customElement("lyra-howto-panel")], LyraHowToPanel);
+//#endregion
+//#region src/howto-extension.ts
+var logger = createLogger("HowToExtension");
+/**
+* HowTo System Extension
+* 
+* Provides a system for registering and displaying step-by-step workflows
+* that guide users through specific processes with pre and post condition checks.
+* 
+* Features:
+* - Register HowToContributions via contribution registry
+* - Floating, draggable UI panel
+* - Sequential step execution
+* - Pre and post condition validation
+* - Step status tracking
+*/
+function howToExtension(context) {
+	logger.info("HowTo system extension loaded");
+	rootContext.put("howToService", howToService);
+	const ensurePanelInDOM = () => {
+		if (document.querySelector("lyra-howto-panel")) return;
+		const panel = document.createElement("lyra-howto-panel");
+		document.body.appendChild(panel);
+		logger.info("HowTo panel added to DOM");
+	};
+	if (document.body) requestAnimationFrame(() => {
+		ensurePanelInDOM();
+	});
+	else {
+		const checkDOM = () => {
+			if (document.body) ensurePanelInDOM();
+			else requestAnimationFrame(checkDOM);
+		};
+		requestAnimationFrame(checkDOM);
+	}
+	registerAll({
+		command: {
+			id: "howto.show-panel",
+			name: "Show HowTo Panel",
+			description: "Shows the HowTo workflows panel",
+			icon: "list-check",
+			parameters: []
+		},
+		handler: { execute: () => {
+			publish(TOPIC_SHOW_HOWTO_PANEL, null);
+		} }
+	});
+	registerAll({
+		command: {
+			id: "howto.toggle-panel",
+			name: "Toggle HowTo Panel",
+			description: "Toggles the visibility of the HowTo workflows panel",
+			icon: "list-check",
+			keyBinding: "CTRL+SHIFT+H",
+			parameters: []
+		},
+		handler: { execute: () => {
+			publish(TOPIC_TOGGLE_HOWTO_PANEL, null);
+		} },
+		contribution: {
+			target: TOOLBAR_BOTTOM_END,
+			icon: "list-check",
+			label: "HowTo"
+		}
+	});
+	logger.info("HowTo system extension initialized");
+}
+//#endregion
+export { HOWTO_CONTRIBUTION_TARGET, howToExtension as default, howToService };
+
+//# sourceMappingURL=howto-extension-BEQ-0XJ7.js.map