feat: replace core homepage widget registry with generic extension points

plugins/host-metrics/src/frontend/MetricsChartWidget.tsx

@@ -236,8 +236,7 @@ export const metricsChartWidget: WidgetDefinition<MetricsChartConfig> = {
   },
   defaultSize: { w: GRID_SIZE * 12, h: GRID_SIZE * 6 },
   minSize: { w: GRID_SIZE * 6, h: GRID_SIZE * 4 },
-  component: MetricsChartWidget,
-  editFormComponent: MetricsChartEditForm,
+  components: { view: MetricsChartWidget, editForm: MetricsChartEditForm },
 };
 
 export { MetricsChartWidget };

plugins/host-metrics/src/frontend/index.tsx

@@ -1,7 +1,6 @@
 import type { ComponentType } from "react";
 import { Activity, Server } from "lucide-react";
 import type {
-  HomepageWidgetContribution,
   HostEditorSectionProps,
   PluginHostRecord,
   StandaloneViewProps,
@@ -100,9 +99,7 @@ export async function activate(app: TermixApp): Promise<void> {
     component: MetricsHostSection,
   });
 
-  app.registerHomepageWidget(
-    metricsChartWidget as unknown as HomepageWidgetContribution,
-  );
+  app.registerExtension("homepage.widgets", metricsChartWidget);
 
   // Live CPU, memory and disk bars in the terminal toolbar's expanded view.
   app.registerSlotContribution("terminal.toolbarStatus", {

plugins/host-metrics/src/shared/homepage.ts

@@ -1,4 +1,5 @@
-import type { HomepageWidgetContribution } from "@termix/plugin-sdk/frontend";
+import type { ComponentType, ReactNode } from "react";
+import type { ExtensionContribution } from "@termix/plugin-sdk/frontend";
 
 /** The homepage's grid step, in pixels. */
 export const GRID_SIZE = 30;
@@ -25,7 +26,18 @@ export interface WidgetEditFormProps<C> {
   onChange: (config: C) => void;
 }
 
-export type WidgetDefinition<C> = Omit<
-  HomepageWidgetContribution<C>,
-  "defaultConfig"
-> & { defaultConfig: C };
+/** What app.registerExtension("homepage.widgets", ...) takes. */
+export interface WidgetDefinition<C> extends ExtensionContribution {
+  id: string;
+  name: string;
+  description: string;
+  category: "links" | "info" | "system" | "monitoring";
+  icon: ReactNode;
+  defaultConfig: C;
+  defaultSize: { w: number; h: number };
+  minSize: { w: number; h: number };
+  components: {
+    view: ComponentType<WidgetComponentProps<C>>;
+    editForm?: ComponentType<WidgetEditFormProps<C>>;
+  };
+}