Modules

Dockable UI modules — side panels, bottom terminals, center tabs, etc. — are contributed as ModuleProvider values. The layout system creates instances and renders your component with ModuleProviderProps (moduleInstance, optional pane).

Types: ModuleProvider, ModuleInstance, ModulePosition.

Related: Plugin API

Mental model

• One provider describes a kind of module (id, display metadata, lifecycle flags).
• Instances carry optional opaque state from getDefaultState / persistence.
• Center placement is opt-in: when allowedPositions is omitted, the host typically exposes the module in sidebar/bottom docks but not center (exact defaults are in the type comments — verify against sdk/plugin-types.generated.d.ts for your SDK version).

Shape (high level)

Registration

Declare the provider on your PhialsPlugin.providers array. At activation the host registers it with the module registry so lifecycle (deactivate, uninstall) stays symmetric.

Minimal snippet

import MyPanel from "./MyPanel.svelte";

const myModule: ModuleProvider = {
	type: "module",
	id: "vendor.module.metrics",
	name: "Metrics",
	icon: "mdi:chart-box",
	defaultPosition: "right",
	allowedPositions: ["left", "right"],
	component: MyPanel,
	allowMultiple: false,
	getDefaultState: () => ({ filter: "" }),
};

export default function createPlugin(): PhialsPlugin {
	return {
		id: "vendor.module.metrics",
		name: "Metrics",
		version: "1.0.0",
		icons: [myModule.icon],
		providers: [myModule],
	};
}

Pitfalls

• Use requiresRemount when the subtree holds non-serializable handles (media elements, terminals).
• Center-only modules interact with shell layout assumptions — prototype in the example repo and test in Phials.