refactor(custom-widgets): extract domain package

packages/custom-widgets/src/runtime/refresh-button.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@mantine/core";
+import { IconRefresh } from "@tabler/icons-react";
+
+import { useCustomWidgetRuntime } from "./context";
+
+export interface RefreshButtonProps {
+  label?: string;
+  color?: string;
+  variant?: string;
+  size?: string;
+}
+
+export function RefreshButton({ label, color = "blue", variant = "light", size = "sm" }: RefreshButtonProps) {
+  const runtime = useCustomWidgetRuntime();
+  const [loading, setLoading] = useState(false);
+  const refresh = async () => {
+    if (!runtime.itemId && !runtime.previewSessionId) return;
+    setLoading(true);
+    try {
+      await runtime.port.invalidate({
+        itemId: runtime.itemId,
+        previewSessionId: runtime.previewSessionId,
+        targets: ["parent", "*"],
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (
+    <Button
+      color={color}
+      variant={variant as never}
+      size={size as never}
+      leftSection={<IconRefresh size={16} />}
+      onClick={() => void refresh()}
+      loading={loading}
+      disabled={(!runtime.itemId && !runtime.previewSessionId) || runtime.isEditMode}
+    >
+      {label ?? runtime.messages.refresh}
+    </Button>
+  );
+}