@hartl-services/medusa-base 2.6.1 → 2.8.0

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/ImageSettingInput.d.ts

@@ -1,6 +1,7 @@
 type ImageSettingInputProps = {
     id: string;
-    hintId: string;
+    /** Id of the element describing the field; `undefined` when there is none. */
+    describedBy: string | undefined;
     label: string;
     /** Public URL of the current image; `""` = none. */
     value: string;
@@ -11,5 +12,5 @@ type ImageSettingInputProps = {
  * Uploads an image to the public File Module storage and hands its URL to
  * the settings draft; the form stores it on save like any other value.
  */
-export declare const ImageSettingInput: ({ id, hintId, label, value, disabled, onChange, }: ImageSettingInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageSettingInput: ({ id, describedBy, label, value, disabled, onChange, }: ImageSettingInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/ImageSettingInput.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Hint, Text } from "@medusajs/ui";
+import { Button, Hint } from "@medusajs/ui";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { texts } from "../../../i18n/texts";
 import { validateFile } from "../../../shared/lib/file-validation";
 import { sdk } from "../../../shared/lib/sdk";
-import { FilePickerButton } from "../../../shared/ui/FilePickerButton";
+import { FileDropField } from "../../../shared/ui/FileDropField";
 /** Largest image an `image` setting accepts in the Admin. */
 const SETTING_IMAGE_MAX_BYTES = 2 * 1024 * 1024;
 const SETTING_IMAGE_OPTIONS = {
@@ -22,7 +22,7 @@ const SETTING_IMAGE_OPTIONS = {
  * Uploads an image to the public File Module storage and hands its URL to
  * the settings draft; the form stores it on save like any other value.
  */
-export const ImageSettingInput = ({ id, hintId, label, value, disabled, onChange, }) => {
+export const ImageSettingInput = ({ id, describedBy, label, value, disabled, onChange, }) => {
     const [error, setError] = useState(null);
     const upload = useMutation({
         mutationFn: async (file) => {
@@ -44,5 +44,5 @@ export const ImageSettingInput = ({ id, hintId, label, value, disabled, onChange
             upload.mutate(file);
         }
     };
-    return (_jsxs("div", { className: "grid gap-2", children: [value && (_jsx("div", { className: "bg-ui-bg-subtle flex items-center justify-center rounded-md border p-4", children: _jsx("img", { src: value, alt: texts.settings.imagePreviewAlt(label), className: "max-h-24 max-w-full object-contain" }) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FilePickerButton, { id: id, "aria-describedby": hintId, accept: "image/png,image/jpeg", label: value ? texts.settings.imageReplace : texts.settings.imageUpload, isLoading: upload.isPending, disabled: busy, onFileSelected: selectFile }), value && (_jsx(Button, { type: "button", size: "small", variant: "transparent", disabled: busy, onClick: () => onChange(""), children: texts.settings.imageRemove })), !value && (_jsx(Text, { size: "small", className: "text-ui-fg-muted", children: texts.settings.imageNone }))] }), error && _jsx(Hint, { variant: "error", children: error })] }));
+    return (_jsxs("div", { className: "grid gap-2", children: [value && (_jsx("div", { className: "bg-ui-bg-subtle flex items-center justify-center rounded-md border p-4", children: _jsx("img", { src: value, alt: texts.settings.imagePreviewAlt(label), className: "max-h-24 max-w-full object-contain" }) })), _jsx(FileDropField, { id: id, "aria-describedby": describedBy, accept: "image/png,image/jpeg", label: value ? texts.settings.imageReplace : texts.settings.imageUpload, text: value ? undefined : texts.settings.imageNone, isLoading: upload.isPending, disabled: busy, onFileSelected: selectFile }), value && (_jsx("div", { children: _jsx(Button, { type: "button", size: "small", variant: "transparent", disabled: busy, onClick: () => onChange(""), children: texts.settings.imageRemove }) })), error && _jsx(Hint, { variant: "error", children: error })] }));
 };

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginActionsSection.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Container, Text, toast, usePrompt } from "@medusajs/ui";
+import { Button, Text, toast, usePrompt } from "@medusajs/ui";
 import { useEffect, useRef } from "react";
 import { texts } from "../../../i18n/texts";
-import { SectionHeader } from "../../../shared/ui/SectionHeader";
+import { AdminSection } from "../../../shared/ui/AdminSection";
 import { useLatestPluginActionRun, useRunPluginAction, } from "../hooks/usePluginFeatures";
 import { formatRunTime, progressCount, progressPercent, runTransition, summarizeActionResult, } from "../lib/action-runs";
 /** Progress of a running run: label, "current / total", bar and start time. */
@@ -39,7 +39,7 @@ const PluginActionRow = ({ pluginKey, action, starting, blocked, onRun, }) => {
             });
         }
     }, [run, action.label]);
-    return (_jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Text, { size: "small", weight: "plus", children: action.label }), action.description && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: action.description })), run && (running ? _jsx(RunProgress, { run: run }) : _jsx(RunStatusLine, { run: run }))] }), _jsx(Button, { size: "small", variant: "secondary", className: "shrink-0", isLoading: starting || running, disabled: blocked || starting || running, onClick: () => onRun(action), children: action.label })] }));
+    return (_jsxs("div", { className: "flex items-center gap-4 px-6 py-4", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Text, { size: "small", leading: "compact", weight: "plus", children: action.label }), action.description && (_jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: action.description })), run && (running ? _jsx(RunProgress, { run: run }) : _jsx(RunStatusLine, { run: run }))] }), _jsx(Button, { size: "small", variant: "secondary", className: "shrink-0", isLoading: starting || running, disabled: blocked || starting || running, onClick: () => onRun(action), children: action.label })] }));
 };
 export const PluginActionsSection = ({ plugin }) => {
     const mutation = useRunPluginAction(plugin.plugin_key);
@@ -63,5 +63,5 @@ export const PluginActionsSection = ({ plugin }) => {
         }
         mutation.mutate(action);
     };
-    return (_jsxs(Container, { className: "divide-y p-0", children: [_jsx(SectionHeader, { title: texts.sections.actions }), plugin.actions.map((action) => (_jsx(PluginActionRow, { pluginKey: plugin.plugin_key, action: action, starting: startingKey === action.key, blocked: mutation.isPending && startingKey !== action.key, onRun: (entry) => void run(entry) }, action.key)))] }));
+    return (_jsx(AdminSection, { title: texts.sections.actions, children: plugin.actions.map((action) => (_jsx(PluginActionRow, { pluginKey: plugin.plugin_key, action: action, starting: startingKey === action.key, blocked: mutation.isPending && startingKey !== action.key, onRun: (entry) => void run(entry) }, action.key))) }));
 };

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginBreadcrumb.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The plugin's label as a breadcrumb text. A route `handle` function cannot
+ * call hooks, so the label is read by this element, which the handle returns.
+ * Falls back to the plugin key until the plugin is loaded.
+ */
+export declare const PluginLabelCrumb: ({ pluginKey }: {
+    pluginKey: string;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Breadcrumb of a plugin's own page that lives in another plugin than the
+ * base's hub: "Plugins" (linked to the hub) and the plugin's label. The
+ * Admin only adds parent crumbs for routes of the same plugin, so the base's
+ * own pages need just `PluginLabelCrumb`. Use as the route handle's
+ * `breadcrumb`: `export const handle = { breadcrumb: () => pluginBreadcrumb("affiliate") }`.
+ */
+export declare const pluginBreadcrumb: (pluginKey: string) => import("react/jsx-runtime").JSX.Element;

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginBreadcrumb.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { texts } from "../../../i18n/texts";
+import { BreadcrumbTrail } from "../../../shared/ui/BreadcrumbTrail";
+import { usePluginFeature } from "../hooks/usePluginFeatures";
+import { PLUGIN_HUB_PATH } from "../lib/plugin-paths";
+/**
+ * The plugin's label as a breadcrumb text. A route `handle` function cannot
+ * call hooks, so the label is read by this element, which the handle returns.
+ * Falls back to the plugin key until the plugin is loaded.
+ */
+export const PluginLabelCrumb = ({ pluginKey }) => {
+    const label = usePluginFeature(pluginKey).data?.plugin.label;
+    return _jsx(_Fragment, { children: label ?? pluginKey });
+};
+/**
+ * Breadcrumb of a plugin's own page that lives in another plugin than the
+ * base's hub: "Plugins" (linked to the hub) and the plugin's label. The
+ * Admin only adds parent crumbs for routes of the same plugin, so the base's
+ * own pages need just `PluginLabelCrumb`. Use as the route handle's
+ * `breadcrumb`: `export const handle = { breadcrumb: () => pluginBreadcrumb("affiliate") }`.
+ */
+export const pluginBreadcrumb = (pluginKey) => (_jsx(BreadcrumbTrail, { items: [
+        { label: texts.breadcrumbs.hub, to: PLUGIN_HUB_PATH },
+        { label: _jsx(PluginLabelCrumb, { pluginKey: pluginKey }) },
+    ] }));

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginDetailPage.js

@@ -5,5 +5,5 @@ import { PluginPageShell } from "./PluginPageShell";
 /** The base's generic page of a plugin without an own `admin_page`. */
 export const PluginDetailPage = () => {
     const { plugin_key: pluginKey = "" } = useParams();
-    return (_jsx(PluginPageShell, { pluginKey: pluginKey, children: _jsx(PluginFeatureSections, { pluginKey: pluginKey }) }));
+    return (_jsx(PluginPageShell, { pluginKey: pluginKey, variant: "header", children: _jsx(PluginFeatureSections, { pluginKey: pluginKey }) }));
 };

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginFeatureSections.d.ts

@@ -2,10 +2,11 @@ type PluginFeatureSectionsProps = {
     pluginKey: string;
 };
 /**
- * The base's sections of one plugin: Funktionen (unless the plugin has
- * neither a switch nor features), Einstellungen (when the plugin declares
- * settings) and Aktionen (when it declares actions). Renders
- * nothing until the plugin is loaded; `PluginPageShell` shows that state.
+ * The base's sections of one plugin: warnings (required settings missing,
+ * every top-level feature off), Funktionen (unless the plugin has neither a
+ * switch nor features), Einstellungen (when the plugin declares settings) and
+ * Aktionen (when it declares actions). Renders nothing until the plugin is
+ * loaded; `PluginPageShell` shows that state.
  */
 export declare const PluginFeatureSections: ({ pluginKey }: PluginFeatureSectionsProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginFeatureSections.js

@@ -1,19 +1,22 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert } from "@medusajs/ui";
 import { texts } from "../../../i18n/texts";
 import { usePluginFeature } from "../hooks/usePluginFeatures";
+import { allTopLevelFeaturesOff, isUnconfigured, missingLabels } from "../lib/plugin-view";
 import { PluginActionsSection } from "./PluginActionsSection";
 import { PluginFeaturesCard } from "./PluginFeaturesCard";
 import { PluginSettingsForm } from "./PluginSettingsForm";
 /**
- * The base's sections of one plugin: Funktionen (unless the plugin has
- * neither a switch nor features), Einstellungen (when the plugin declares
- * settings) and Aktionen (when it declares actions). Renders
- * nothing until the plugin is loaded; `PluginPageShell` shows that state.
+ * The base's sections of one plugin: warnings (required settings missing,
+ * every top-level feature off), Funktionen (unless the plugin has neither a
+ * switch nor features), Einstellungen (when the plugin declares settings) and
+ * Aktionen (when it declares actions). Renders nothing until the plugin is
+ * loaded; `PluginPageShell` shows that state.
  */
 export const PluginFeatureSections = ({ pluginKey }) => {
     const plugin = usePluginFeature(pluginKey).data?.plugin;
     if (!plugin) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [(plugin.switchable || plugin.features.length > 0) && (_jsx(PluginFeaturesCard, { plugin: plugin, title: texts.sections.features })), plugin.settings.length > 0 && _jsx(PluginSettingsForm, { plugin: plugin }), plugin.actions.length > 0 && _jsx(PluginActionsSection, { plugin: plugin })] }));
+    return (_jsxs(_Fragment, { children: [isUnconfigured(plugin) && (_jsx(Alert, { variant: "warning", children: texts.settings.missing(missingLabels(plugin)) })), plugin.all_off_warning && allTopLevelFeaturesOff(plugin) && (_jsx(Alert, { variant: "warning", children: plugin.all_off_warning })), (plugin.switchable || plugin.features.length > 0) && (_jsx(PluginFeaturesCard, { plugin: plugin })), plugin.settings.length > 0 && _jsx(PluginSettingsForm, { plugin: plugin }), plugin.actions.length > 0 && _jsx(PluginActionsSection, { plugin: plugin })] }));
 };

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginFeaturesCard.d.ts

@@ -1,12 +1,12 @@
 import type { AdminPluginFeatures } from "@hartl-services/medusa-food-supplements-contracts/types/plugin-features-admin";
 type PluginFeaturesCardProps = {
     plugin: AdminPluginFeatures;
-    /** Heading of the card; the plugin label when omitted. */
-    title?: string;
 };
 /**
  * Plugin switch (unless the plugin is not switchable) plus the feature
- * switches of one plugin; saves immediately.
+ * switches of one plugin; saves immediately. A plugin without features gets
+ * just its switch row; otherwise the switch is the first row of the features
+ * section, and the feature rows are dimmed and locked while the plugin is off.
  */
-export declare const PluginFeaturesCard: ({ plugin, title }: PluginFeaturesCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PluginFeaturesCard: ({ plugin }: PluginFeaturesCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginFeaturesCard.js

@@ -1,34 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Container, Heading, Label, Switch, Text } from "@medusajs/ui";
 import { texts } from "../../../i18n/texts";
-import { useUpdatePluginFeatures } from "../hooks/usePluginFeatures";
-const configuredFeatures = (plugin) => Object.fromEntries(plugin.features.map((feature) => [feature.key, feature.enabled]));
+import { AdminSection } from "../../../shared/ui/AdminSection";
+import { SwitchRow } from "../../../shared/ui/SwitchRow";
+import { usePluginSwitch } from "../hooks/usePluginSwitch";
+import { disabledParent, isLastRequiredFeature } from "../lib/plugin-view";
 /**
  * Plugin switch (unless the plugin is not switchable) plus the feature
- * switches of one plugin; saves immediately.
+ * switches of one plugin; saves immediately. A plugin without features gets
+ * just its switch row; otherwise the switch is the first row of the features
+ * section, and the feature rows are dimmed and locked while the plugin is off.
  */
-export const PluginFeaturesCard = ({ plugin, title }) => {
-    const mutation = useUpdatePluginFeatures();
-    const pending = mutation.isPending;
-    const labels = new Map(plugin.features.map((feature) => [feature.key, feature.label]));
-    const configured = configuredFeatures(plugin);
+export const PluginFeaturesCard = ({ plugin }) => {
+    const { pending, setEnabled, setFeature } = usePluginSwitch(plugin);
     const pluginSwitchId = `plugin-features-${plugin.plugin_key}`;
-    const save = (enabled, features) => {
-        mutation.mutate({
-            plugin_key: plugin.plugin_key,
-            expected_version: plugin.version,
-            enabled,
-            features,
-        });
-    };
-    return (_jsxs(Container, { className: "divide-y p-0", "aria-busy": pending, children: [_jsxs("div", { className: "flex items-start justify-between gap-4 px-6 py-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Heading, { level: "h2", children: title ?? plugin.label }), title === undefined && plugin.description && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: plugin.description })), !plugin.enabled && (_jsx(Text, { size: "small", className: "text-ui-fg-muted mt-1", children: texts.hints.pluginDisabled })), pending && (_jsx(Text, { size: "small", className: "text-ui-fg-muted mt-1", children: texts.hints.saving }))] }), plugin.switchable && (_jsx(Switch, { id: pluginSwitchId, "aria-label": texts.plugin.switchLabel(plugin.label), className: "shrink-0", checked: plugin.enabled, disabled: pending, onCheckedChange: (checked) => save(checked === true, configured) }))] }), plugin.features.map((feature) => {
-                const switchId = `${pluginSwitchId}-${feature.key}`;
-                const parent = plugin.features.find((candidate) => candidate.key === feature.parent_key);
-                const parentOff = parent !== undefined && !parent.enabled;
-                const locked = pending || !plugin.enabled || parentOff;
-                return (_jsxs("div", { className: `flex items-start justify-between gap-4 py-3 pr-6 ${feature.parent_key ? "pl-12" : "pl-6"}`, children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: switchId, size: "small", weight: "plus", className: locked ? "text-ui-fg-disabled" : undefined, children: feature.label }), feature.description && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: feature.description })), plugin.enabled && parentOff && feature.parent_key && (_jsx(Text, { size: "small", className: "text-ui-fg-muted mt-1", children: texts.hints.parentDisabled(labels.get(feature.parent_key) ?? feature.parent_key) }))] }), _jsx(Switch, { id: switchId, className: "shrink-0", checked: feature.enabled, disabled: locked, onCheckedChange: (checked) => save(plugin.enabled, {
-                                ...configured,
-                                [feature.key]: checked === true,
-                            }) })] }, feature.key));
-            })] }));
+    const labels = new Map(plugin.features.map((feature) => [feature.key, feature.label]));
+    const pluginRow = plugin.switchable ? (_jsx(SwitchRow, { id: pluginSwitchId, label: texts.plugin.switchRow, description: plugin.disable_hint, hint: plugin.enabled ? undefined : texts.hints.pluginDisabled, checked: plugin.enabled, disabled: pending, onCheckedChange: setEnabled, className: plugin.features.length > 0 ? "bg-ui-bg-subtle" : "py-4" })) : null;
+    if (plugin.features.length === 0) {
+        return (_jsx(AdminSection, { "aria-busy": pending, children: pluginRow }));
+    }
+    return (_jsxs(AdminSection, { "aria-busy": pending, title: plugin.features_heading ?? texts.sections.features, note: pending ? texts.hints.saving : plugin.features_note, children: [pluginRow, _jsx("div", { className: `divide-y transition-opacity ${plugin.enabled ? "" : "opacity-50"}`, children: plugin.features.map((feature) => {
+                    const parent = disabledParent(plugin.features, feature);
+                    const lastRequired = isLastRequiredFeature(plugin, feature);
+                    const locked = pending || !plugin.enabled || parent !== undefined || lastRequired;
+                    return (_jsx(SwitchRow, { id: `${pluginSwitchId}-${feature.key}`, label: feature.label, description: feature.description, hint: plugin.enabled && parent
+                            ? texts.hints.parentDisabled(labels.get(parent.key) ?? parent.key)
+                            : lastRequired
+                                ? texts.hints.lastRequiredFeature
+                                : undefined, indent: feature.parent_key !== null, checked: feature.enabled, disabled: locked, onCheckedChange: (checked) => setFeature(feature.key, checked), className: plugin.enabled && parent ? "opacity-60" : undefined }, feature.key));
+                }) })] }));
 };

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginFeaturesSettingsPage.d.ts

@@ -1,5 +1,5 @@
 /**
- * Hub: one card per installed plugin. Plugins that cannot be switched off
- * (the shop master data) come first; the rest keep the server's order.
+ * Hub: title, the shop master data banner and one card per installed plugin
+ * (plugins that cannot be switched off first, then the server's order).
  */
 export declare const PluginFeaturesSettingsPage: () => import("react/jsx-runtime").JSX.Element;

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginFeaturesSettingsPage.js

@@ -1,17 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Container, Text } from "@medusajs/ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Container, Heading, Text } from "@medusajs/ui";
 import { texts } from "../../../i18n/texts";
-import { SectionHeader } from "../../../shared/ui/SectionHeader";
 import { usePluginFeatures } from "../hooks/usePluginFeatures";
+import { hubOrder } from "../lib/plugin-view";
 import { PluginHubCard } from "./PluginHubCard";
+import { SHOP_PLUGIN_KEY, ShopMasterDataBanner } from "./ShopMasterDataBanner";
 /**
- * Hub: one card per installed plugin. Plugins that cannot be switched off
- * (the shop master data) come first; the rest keep the server's order.
+ * Hub: title, the shop master data banner and one card per installed plugin
+ * (plugins that cannot be switched off first, then the server's order).
  */
 export const PluginFeaturesSettingsPage = () => {
     const query = usePluginFeatures();
-    return (_jsxs("div", { className: "flex flex-col gap-y-3", children: [_jsx(Container, { className: "p-0", children: _jsx(SectionHeader, { description: texts.page.description, level: "h1", title: texts.page.title }) }), query.isPending ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.loading }) })) : query.isError ? (_jsxs(Container, { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(Text, { className: "text-ui-fg-error", children: texts.states.error }), _jsx(Button, { size: "small", variant: "secondary", isLoading: query.isFetching, onClick: () => void query.refetch(), children: texts.states.retry })] })) : query.data.plugins.length === 0 ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.empty }) })) : ([
-                ...query.data.plugins.filter((plugin) => !plugin.switchable),
-                ...query.data.plugins.filter((plugin) => plugin.switchable),
-            ].map((plugin) => (_jsx(PluginHubCard, { plugin: plugin }, plugin.plugin_key))))] }));
+    const shop = query.data?.plugins.find((plugin) => plugin.plugin_key === SHOP_PLUGIN_KEY);
+    const plugins = hubOrder(query.data?.plugins.filter((plugin) => plugin.plugin_key !== SHOP_PLUGIN_KEY) ?? []);
+    return (_jsxs("div", { className: "flex flex-col gap-y-3", children: [_jsx(Container, { children: _jsxs("div", { className: "flex flex-col gap-y-1", children: [_jsx(Heading, { level: "h1", children: texts.page.title }), _jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: texts.page.description })] }) }), query.isPending ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.loading }) })) : query.isError ? (_jsxs(Container, { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(Text, { className: "text-ui-fg-error", children: texts.states.error }), _jsx(Button, { size: "small", variant: "secondary", isLoading: query.isFetching, onClick: () => void query.refetch(), children: texts.states.retry })] })) : query.data.plugins.length === 0 ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.empty }) })) : (_jsxs(_Fragment, { children: [shop && _jsx(ShopMasterDataBanner, { plugin: shop }), _jsxs("div", { className: "flex items-center justify-between gap-x-4 px-1 pt-3", children: [_jsx(Heading, { level: "h2", children: texts.page.pluginsHeading }), _jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: texts.page.installed(plugins.length) })] }), _jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(min(100%,320px),1fr))] gap-3", children: plugins.map((plugin) => (_jsx(PluginHubCard, { plugin: plugin }, plugin.plugin_key))) })] }))] }));
 };

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginHubCard.d.ts

@@ -2,6 +2,10 @@ import type { AdminPluginFeatures } from "@hartl-services/medusa-food-supplement
 type PluginHubCardProps = {
     plugin: AdminPluginFeatures;
 };
-/** One plugin on the hub: status, plugin switch and the link to its page. */
+/**
+ * One plugin on the hub: icon, name, plugin switch (switchable plugins only),
+ * summary, "Nicht konfiguriert" while required settings are missing, and the
+ * link to its page. Switching off asks for confirmation.
+ */
 export declare const PluginHubCard: ({ plugin }: PluginHubCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginHubCard.js

@@ -1,21 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Container, Heading, Switch, Text } from "@medusajs/ui";
+import { Button, Container, Heading, IconBadge, StatusBadge, Switch, Text, } from "@medusajs/ui";
 import { Link } from "react-router-dom";
 import { texts } from "../../../i18n/texts";
-import { useUpdatePluginFeatures } from "../hooks/usePluginFeatures";
+import { PluginIcon } from "../../../shared/ui/PluginIcon";
+import { usePluginSwitch } from "../hooks/usePluginSwitch";
 import { pluginDetailPath } from "../lib/plugin-paths";
-import { PluginStatusChips } from "./PluginStatusChips";
-/** One plugin on the hub: status, plugin switch and the link to its page. */
+import { isUnconfigured } from "../lib/plugin-view";
+/**
+ * One plugin on the hub: icon, name, plugin switch (switchable plugins only),
+ * summary, "Nicht konfiguriert" while required settings are missing, and the
+ * link to its page. Switching off asks for confirmation.
+ */
 export const PluginHubCard = ({ plugin }) => {
-    const mutation = useUpdatePluginFeatures();
-    const pending = mutation.isPending;
-    const toggle = (enabled) => {
-        mutation.mutate({
-            plugin_key: plugin.plugin_key,
-            expected_version: plugin.version,
-            enabled,
-            features: Object.fromEntries(plugin.features.map((feature) => [feature.key, feature.enabled])),
-        });
-    };
-    return (_jsxs(Container, { className: "flex flex-wrap items-start justify-between gap-4 px-6 py-4", "aria-busy": pending, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Heading, { level: "h2", children: plugin.label }), plugin.description && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: plugin.description })), _jsx(PluginStatusChips, { plugin: plugin }), pending && (_jsx(Text, { size: "small", className: "text-ui-fg-muted mt-1", children: texts.hints.saving }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [plugin.switchable && (_jsx(Switch, { "aria-label": texts.plugin.switchLabel(plugin.label), checked: plugin.enabled, disabled: pending, onCheckedChange: (checked) => toggle(checked === true) })), _jsx(Button, { size: "small", variant: "secondary", asChild: true, children: _jsx(Link, { to: plugin.admin_page ?? pluginDetailPath(plugin.plugin_key), "aria-label": texts.plugin.openLabel(plugin.label), children: texts.plugin.open }) })] })] }));
+    const { pending, setEnabled } = usePluginSwitch(plugin);
+    return (_jsx(Container, { "aria-busy": pending, children: _jsxs("div", { className: "flex min-h-[132px] flex-col gap-y-3", children: [_jsxs("div", { className: "flex items-center gap-x-3", children: [_jsx(IconBadge, { size: "large", children: _jsx(PluginIcon, { name: plugin.icon }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(Heading, { level: "h3", children: plugin.label }) }), plugin.switchable && (_jsx(Switch, { "aria-label": texts.plugin.switchLabel(plugin.label), checked: plugin.enabled, disabled: pending, onCheckedChange: (checked) => setEnabled(checked === true) }))] }), _jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: plugin.summary ?? plugin.description }), _jsxs("div", { className: "mt-auto flex items-center justify-between gap-x-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2", children: [isUnconfigured(plugin) && (_jsx(StatusBadge, { color: "orange", children: texts.chips.notConfigured })), pending && (_jsx(Text, { size: "small", className: "text-ui-fg-muted", children: texts.hints.saving }))] }), _jsx(Button, { size: "small", variant: "secondary", asChild: true, children: _jsx(Link, { to: plugin.admin_page ?? pluginDetailPath(plugin.plugin_key), "aria-label": texts.plugin.openLabel(plugin.label), className: "ml-auto", children: texts.plugin.open }) })] })] }) }));
 };

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginPageShell.d.ts

@@ -1,13 +1,19 @@
 import type { ReactNode } from "react";
 type PluginPageShellProps = {
     pluginKey: string;
+    /**
+     * `back-link` (default): back link to the hub above a plain title card.
+     * `header`: `AdminPageHeader` with the plugin's icon, summary and status
+     * badges and no back link; the route's `handle` carries the breadcrumb.
+     */
+    variant?: "back-link" | "header";
     /** Rendered below the header once the plugin is loaded. */
     children?: ReactNode;
 };
 /**
- * Frame of a plugin's page: back link to the hub, the plugin's label,
- * description and status, then `children`. Shows loading, not-installed and
- * error states instead of `children`.
+ * Frame of a plugin's page: the plugin's label, description and status, then
+ * `children`. Shows loading, not-installed and error states instead of
+ * `children`.
  */
-export declare const PluginPageShell: ({ pluginKey, children }: PluginPageShellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PluginPageShell: ({ pluginKey, variant, children, }: PluginPageShellProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginPageShell.js

@@ -1,20 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Container, Heading, Text } from "@medusajs/ui";
 import { texts } from "../../../i18n/texts";
+import { AdminPageHeader } from "../../../shared/ui/AdminPageHeader";
 import { BackLink } from "../../../shared/ui/BackLink";
+import { InfoTooltip } from "../../../shared/ui/InfoTooltip";
+import { PluginIcon } from "../../../shared/ui/PluginIcon";
 import { usePluginFeature } from "../hooks/usePluginFeatures";
 import { PLUGIN_HUB_PATH } from "../lib/plugin-paths";
+import { headerInfoText } from "../lib/plugin-view";
 import { PluginStatusChips } from "./PluginStatusChips";
 const isNotFound = (error) => typeof error === "object" &&
     error !== null &&
     error.status === 404;
 /**
- * Frame of a plugin's page: back link to the hub, the plugin's label,
- * description and status, then `children`. Shows loading, not-installed and
- * error states instead of `children`.
+ * Frame of a plugin's page: the plugin's label, description and status, then
+ * `children`. Shows loading, not-installed and error states instead of
+ * `children`.
  */
-export const PluginPageShell = ({ pluginKey, children }) => {
+export const PluginPageShell = ({ pluginKey, variant = "back-link", children, }) => {
     const query = usePluginFeature(pluginKey);
     const plugin = query.data?.plugin;
-    return (_jsxs("div", { className: "flex flex-col gap-y-3", children: [_jsx(BackLink, { label: texts.detail.back, to: PLUGIN_HUB_PATH }), plugin ? (_jsxs(_Fragment, { children: [_jsxs(Container, { className: "px-6 py-4", children: [_jsx(Heading, { level: "h1", children: plugin.label }), plugin.description && (_jsx(Text, { className: "text-ui-fg-subtle", children: plugin.description })), _jsx(PluginStatusChips, { plugin: plugin })] }), children] })) : query.isPending ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.loading }) })) : isNotFound(query.error) ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.notFound }) })) : (_jsxs(Container, { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(Text, { className: "text-ui-fg-error", children: texts.states.error }), _jsx(Button, { size: "small", variant: "secondary", isLoading: query.isFetching, onClick: () => void query.refetch(), children: texts.states.retry })] }))] }));
+    const info = plugin ? headerInfoText(plugin) : null;
+    return (_jsxs("div", { className: "flex flex-col gap-y-3", children: [variant === "back-link" && (_jsx(BackLink, { label: texts.detail.back, to: PLUGIN_HUB_PATH })), plugin ? (_jsxs(_Fragment, { children: [variant === "header" ? (_jsx(AdminPageHeader, { icon: _jsx(PluginIcon, { name: plugin.icon }), title: plugin.label, description: plugin.summary ?? plugin.description, info: info ? (_jsx(InfoTooltip, { label: texts.info.label(plugin.label), children: info })) : undefined, badges: _jsx(PluginStatusChips, { plugin: plugin }) })) : (_jsxs(Container, { className: "px-6 py-4", children: [_jsx(Heading, { level: "h1", children: plugin.label }), plugin.description && (_jsx(Text, { className: "text-ui-fg-subtle", children: plugin.description })), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: _jsx(PluginStatusChips, { plugin: plugin }) })] })), children] })) : query.isPending ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.loading }) })) : isNotFound(query.error) ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.notFound }) })) : (_jsxs(Container, { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(Text, { className: "text-ui-fg-error", children: texts.states.error }), _jsx(Button, { size: "small", variant: "secondary", isLoading: query.isFetching, onClick: () => void query.refetch(), children: texts.states.retry })] }))] }));
 };

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginSettingsForm.d.ts

@@ -2,6 +2,5 @@ import type { AdminPluginFeatures } from "@hartl-services/medusa-food-supplement
 type PluginSettingsFormProps = {
     plugin: AdminPluginFeatures;
 };
-export declare const missingLabels: (plugin: AdminPluginFeatures) => string;
 export declare const PluginSettingsForm: ({ plugin }: PluginSettingsFormProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginSettingsForm.js

@@ -1,54 +1,105 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, Button, Container, Heading, Hint, Input, Label, Select, Switch, Text, } from "@medusajs/ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Heading, Hint, Input, Label, Select, Text } from "@medusajs/ui";
 import { texts } from "../../../i18n/texts";
-import { groupSettings, isHexColor, normalizeColorInput, } from "../lib/settings-draft";
+import { AdminSection } from "../../../shared/ui/AdminSection";
+import { InfoTooltip } from "../../../shared/ui/InfoTooltip";
+import { SwitchRow } from "../../../shared/ui/SwitchRow";
+import { invalidatedByLabels, invalidatesLabels, isGroupDimmed, settingInfoText, showsBoundsLine, showsSourceHint, } from "../lib/plugin-view";
+import { isHexColor, normalizeColorInput } from "../lib/settings-draft";
+import { dateFromInputValue, inputValueFromDate } from "../../../shared/lib/date-input";
+import { AdminDatePicker } from "../../../shared/ui/AdminDatePicker";
+import { buildSettingGroups, isGroupVisible, } from "../lib/settings-layout";
 import { usePluginSettingsForm } from "../hooks/usePluginSettingsForm";
 import { ImageSettingInput } from "./ImageSettingInput";
 const fieldId = (pluginKey, key) => `plugin-setting-${pluginKey}-${key}`;
-export const missingLabels = (plugin) => plugin.missing
-    .map((key) => plugin.settings.find((setting) => setting.key === key)?.label ?? key)
-    .join(", ");
-/** "API-Key, Passwort" for the secrets a change of `setting` deletes. */
-const invalidatesLabels = (plugin, setting) => setting.invalidates
-    .map((key) => plugin.settings.find((candidate) => candidate.key === key)?.label ?? key)
-    .join(", ");
-/** "Zwischen 0 und 100." etc.; `undefined` without bounds. */
-const boundsText = (setting) => setting.min !== null && setting.max !== null
+const rangeText = (setting) => setting.min !== null && setting.max !== null
     ? texts.settings.numberRange(setting.min, setting.max)
     : setting.min !== null
         ? texts.settings.numberMin(setting.min)
         : setting.max !== null
             ? texts.settings.numberMax(setting.max)
             : undefined;
-const ColorSettingInput = ({ id, hintId, label, value, invalid, disabled, onChange, }) => {
+/** "Zwischen 0 und 100. Ganze Zahl." etc.; `undefined` without bounds or integer. */
+const boundsText = (setting) => {
+    const range = rangeText(setting);
+    return setting.integer
+        ? [range, texts.settings.numberInteger].filter(Boolean).join(" ")
+        : range;
+};
+/** Label text with the " *" marker of a required setting. */
+const labelText = (setting) => setting.required ? `${setting.label} *` : setting.label;
+const ColorSettingInput = ({ id, hintId, label, value, invalid, required, disabled, onChange, }) => {
     const hasColor = isHexColor(value.trim());
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: id, "aria-describedby": hintId, "aria-invalid": invalid, className: "flex-1 font-mono", type: "text", autoComplete: "off", spellCheck: false, placeholder: texts.settings.colorPlaceholder, value: value, disabled: disabled, onChange: (event) => onChange(normalizeColorInput(event.target.value)) }), _jsx("input", { type: "color", "aria-label": texts.settings.colorPickLabel(label), 
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: id, "aria-describedby": hintId, "aria-invalid": invalid, "aria-required": required || undefined, className: "flex-1 font-mono", type: "text", autoComplete: "off", spellCheck: false, placeholder: texts.settings.colorPlaceholder, value: value, disabled: disabled, onChange: (event) => onChange(normalizeColorInput(event.target.value)) }), _jsx("input", { type: "color", "aria-label": texts.settings.colorPickLabel(label), 
                 // An empty value shows the browser's black; dim it so it does not
                 // read as a chosen color.
                 className: `h-8 w-10 shrink-0 cursor-pointer rounded-md border border-ui-border-base bg-ui-bg-field p-1 disabled:cursor-not-allowed ${hasColor ? "" : "opacity-30"}`, value: hasColor ? value.trim() : "#000000", disabled: disabled, onChange: (event) => onChange(normalizeColorInput(event.target.value)) })] }));
 };
-const SettingField = ({ pluginKey, setting, invalidatesLabels, value, invalid, disabled, onChange, }) => {
+/** A non-boolean setting: label (with source hint), control and hints. */
+const SettingField = ({ pluginKey, setting, invalidatedBy, invalidates, value, invalid, disabled, onChange, }) => {
     const id = fieldId(pluginKey, setting.key);
+    const labelId = `${id}-label`;
     const hintId = `${id}-hint`;
     const clearPending = setting.type === "secret" && value === null;
     const bounds = setting.type === "number" ? boundsText(setting) : undefined;
-    return (_jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs(Label, { htmlFor: id, size: "small", weight: "plus", children: [setting.label, setting.required && (_jsxs("span", { className: "text-ui-fg-muted", children: [" (", texts.settings.required, ")"] }))] }), _jsx(Text, { size: "xsmall", className: "text-ui-fg-muted shrink-0", children: texts.settings.source[setting.source] })] }), setting.type === "boolean" ? (_jsx(Switch, { id: id, "aria-describedby": hintId, checked: value === true, disabled: disabled, onCheckedChange: (checked) => onChange(checked === true) })) : setting.type === "secret" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: id, "aria-describedby": hintId, className: "flex-1", type: "password", autoComplete: "new-password", placeholder: setting.is_set ? texts.settings.secretPlaceholder : "", value: typeof value === "string" ? value : "", disabled: disabled || clearPending, onChange: (event) => onChange(event.target.value) }), setting.source === "stored" && (_jsx(Button, { type: "button", size: "small", variant: "secondary", disabled: disabled, "aria-label": clearPending
+    const hint = setting.hint ?? setting.description;
+    const info = settingInfoText(setting);
+    const showBounds = Boolean(bounds) && showsBoundsLine(setting);
+    const required = setting.required;
+    const hasHints = Boolean(hint) ||
+        clearPending ||
+        invalidatedBy.length > 0 ||
+        invalidates.length > 0 ||
+        showBounds ||
+        invalid;
+    const describedBy = hasHints ? hintId : undefined;
+    const placeholder = setting.placeholder ?? undefined;
+    return (_jsxs("div", { className: "flex flex-col gap-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-x-1", children: [_jsx(Label, { id: labelId, htmlFor: id, size: "small", weight: "plus", children: labelText(setting) }), info && (_jsx(InfoTooltip, { label: texts.info.label(setting.label), children: info }))] }), showsSourceHint(setting.source) && (_jsx(Text, { size: "xsmall", className: "text-ui-fg-muted shrink-0", children: texts.settings.source[setting.source] }))] }), setting.type === "secret" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: id, "aria-describedby": describedBy, "aria-required": required || undefined, className: "flex-1", type: "password", autoComplete: "new-password", placeholder: setting.is_set ? texts.settings.secretPlaceholder : placeholder, value: typeof value === "string" ? value : "", disabled: disabled || clearPending, onChange: (event) => onChange(event.target.value) }), setting.source === "stored" && (_jsx(Button, { type: "button", size: "small", variant: "secondary", disabled: disabled, "aria-label": clearPending
                             ? texts.settings.secretClearUndoLabel(setting.label)
                             : texts.settings.secretClearLabel(setting.label), onClick: () => onChange(clearPending ? "" : null), children: clearPending
                             ? texts.settings.secretClearUndo
-                            : texts.settings.secretClear }))] })) : setting.type === "select" ? (_jsxs(Select, { value: typeof value === "string" ? value : "", disabled: disabled, onValueChange: (next) => onChange(next), children: [_jsx(Select.Trigger, { id: id, "aria-describedby": hintId, children: _jsx(Select.Value, { placeholder: texts.settings.selectPlaceholder }) }), _jsx(Select.Content, { children: setting.options.map((option) => (_jsx(Select.Item, { value: option.value, children: option.label }, option.value))) })] })) : setting.type === "image" ? (_jsx(ImageSettingInput, { id: id, hintId: hintId, label: setting.label, value: typeof value === "string" ? value : "", disabled: disabled, onChange: (url) => onChange(url) })) : setting.type === "color" ? (_jsx(ColorSettingInput, { id: id, hintId: hintId, label: setting.label, value: typeof value === "string" ? value : "", invalid: invalid, disabled: disabled, onChange: (next) => onChange(next) })) : setting.type === "number" ? (_jsx(Input, { id: id, "aria-describedby": hintId, "aria-invalid": invalid, type: "number", step: "any", min: setting.min ?? undefined, max: setting.max ?? undefined, value: typeof value === "string" ? value : "", disabled: disabled, onChange: (event) => onChange(event.target.value, event.target.validity.badInput) })) : (_jsx(Input, { id: id, "aria-describedby": hintId, "aria-invalid": invalid, type: setting.type === "url" ? "url" : "text", value: typeof value === "string" ? value : "", disabled: disabled, onChange: (event) => onChange(event.target.value) })), _jsxs("div", { id: hintId, className: "grid gap-1", children: [setting.description && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: setting.description })), clearPending && (_jsx(Hint, { variant: "info", children: texts.settings.secretClearPending })), invalidatesLabels && (_jsx(Text, { size: "small", className: "text-ui-fg-muted", children: texts.settings.invalidates(invalidatesLabels) })), bounds && !invalid && (_jsx(Text, { size: "small", className: "text-ui-fg-muted", children: bounds })), invalid && (_jsx(Hint, { variant: "error", children: setting.type === "color"
+                            : texts.settings.secretClear }))] })) : setting.type === "select" ? (_jsxs(Select, { value: typeof value === "string" ? value : "", disabled: disabled, onValueChange: (next) => onChange(next), children: [_jsx(Select.Trigger, { id: id, "aria-describedby": describedBy, "aria-required": required || undefined, children: _jsx(Select.Value, { placeholder: texts.settings.selectPlaceholder }) }), _jsx(Select.Content, { children: setting.options.map((option) => (_jsx(Select.Item, { value: option.value, children: option.label }, option.value))) })] })) : setting.type === "image" ? (_jsx(ImageSettingInput, { id: id, describedBy: describedBy, label: setting.label, value: typeof value === "string" ? value : "", disabled: disabled, onChange: (url) => onChange(url) })) : setting.type === "color" ? (_jsx(ColorSettingInput, { id: id, hintId: describedBy, label: setting.label, value: typeof value === "string" ? value : "", invalid: invalid, required: required, disabled: disabled, onChange: (next) => onChange(next) })) : setting.type === "date" ? (_jsx(AdminDatePicker, { id: id, "aria-labelledby": labelId, "aria-describedby": describedBy, isDisabled: disabled, value: dateFromInputValue(typeof value === "string" ? value : ""), onChange: (date) => onChange(inputValueFromDate(date)) })) : setting.type === "number" ? (_jsx(Input, { id: id, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": required || undefined, type: "number", step: setting.integer ? 1 : "any", min: setting.min ?? undefined, max: setting.max ?? undefined, placeholder: placeholder, value: typeof value === "string" ? value : "", disabled: disabled, onChange: (event) => onChange(event.target.value, event.target.validity.badInput) })) : (_jsx(Input, { id: id, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": required || undefined, type: setting.type === "url" ? "url" : "text", placeholder: placeholder, value: typeof value === "string" ? value : "", disabled: disabled, onChange: (event) => onChange(event.target.value) })), hasHints && (_jsxs("div", { id: hintId, className: "flex flex-col gap-y-1", children: [hint && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: hint })), clearPending && (_jsx(Hint, { variant: "info", children: texts.settings.secretClearPending })), invalidatedBy.length > 0 && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: texts.settings.invalidatedBy(invalidatedBy) })), invalidates.length > 0 && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: texts.settings.invalidates(invalidates.join(", ")) })), showBounds && !invalid && (_jsx(Text, { size: "small", className: "text-ui-fg-muted", children: bounds })), invalid && (_jsx(Hint, { variant: "error", children: setting.type === "color"
                             ? texts.settings.invalidColor
-                            : (bounds ?? texts.settings.invalidNumber) }))] })] }));
+                            : (bounds ?? texts.settings.invalidNumber) }))] }))] }));
 };
 export const PluginSettingsForm = ({ plugin }) => {
     const form = usePluginSettingsForm(plugin);
     const pending = form.mutation.isPending;
-    const sections = groupSettings(plugin.settings);
-    const hasTextFields = plugin.settings.some((setting) => setting.type !== "boolean" &&
-        setting.type !== "secret" &&
-        setting.type !== "select" &&
-        setting.type !== "image");
-    return (_jsxs(Container, { className: "divide-y p-0", "aria-busy": pending, children: [_jsxs("div", { className: "px-6 py-4", children: [_jsx(Heading, { level: "h2", children: texts.sections.settings }), hasTextFields && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: texts.settings.clearHint }))] }), _jsxs("form", { onSubmit: form.submit, className: "grid gap-5 px-6 py-5", children: [!plugin.configured && (_jsx(Alert, { variant: "warning", children: texts.settings.missing(missingLabels(plugin)) })), sections.map((section, index) => (_jsxs("div", { className: section.group !== null && index > 0
-                            ? "grid gap-5 border-t border-ui-border-base pt-5"
-                            : "grid gap-5", children: [section.group !== null && (_jsx(Heading, { level: "h3", children: section.group })), section.settings.map((setting) => (_jsx(SettingField, { pluginKey: plugin.plugin_key, setting: setting, invalidatesLabels: invalidatesLabels(plugin, setting), value: form.draft[setting.key], invalid: form.invalid.includes(setting.key), disabled: pending, onChange: (value, badInput) => form.setValue(setting.key, value, badInput) }, setting.key)))] }, section.settings[0].key))), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { type: "submit", size: "small", isLoading: pending, disabled: !form.dirty || form.invalid.length > 0 || pending, children: texts.settings.save }) })] })] }));
+    const groups = buildSettingGroups(plugin.settings, plugin.setting_groups, texts.sections.settings).filter((group) => isGroupVisible(group, form.draft));
+    const hasTextFields = plugin.settings.some((setting) => setting.type === "string" ||
+        setting.type === "url" ||
+        setting.type === "number" ||
+        setting.type === "color" ||
+        setting.type === "date");
+    const renderField = (setting) => (_jsx(SettingField, { pluginKey: plugin.plugin_key, setting: setting, invalidatedBy: setting.type === "secret"
+            ? invalidatedByLabels(plugin.settings, setting.key)
+            : [], invalidates: invalidatesLabels(plugin.settings, setting), value: form.draft[setting.key], invalid: form.invalid.includes(setting.key), disabled: pending, onChange: (value, badInput) => form.setValue(setting.key, value, badInput) }, setting.key));
+    // `dimmed`: the group's required feature is off; the rows stay editable.
+    const renderBlock = (block, dimmed) => {
+        const dim = dimmed ? "opacity-50 transition-opacity" : "transition-opacity";
+        const heading = block.heading ? (_jsx(Heading, { level: "h3", className: "px-6 pt-5", children: block.heading })) : null;
+        if (block.kind === "switch") {
+            const { setting } = block;
+            const row = (_jsx(SwitchRow, { id: fieldId(plugin.plugin_key, setting.key), label: labelText(setting), info: settingInfoText(setting) ? (_jsx(InfoTooltip, { label: texts.info.label(setting.label), children: settingInfoText(setting) })) : undefined, description: setting.hint ?? setting.description, hint: showsSourceHint(setting.source)
+                    ? texts.settings.source[setting.source]
+                    : undefined, checked: form.draft[setting.key] === true, disabled: pending, onCheckedChange: (checked) => form.setValue(setting.key, checked) }));
+            return heading ? (_jsxs("div", { className: dim, children: [heading, row] }, setting.key)) : (_jsx("div", { className: dim, children: row }, setting.key));
+        }
+        const first = block.rows[0];
+        const key = first.kind === "full" ? first.setting.key : first.settings[0].key;
+        return (_jsxs("div", { className: `flex flex-col gap-y-5 px-6 py-5 ${dim}`, children: [block.heading ? _jsx(Heading, { level: "h3", children: block.heading }) : null, block.rows.map((row) => row.kind === "full" ? (renderField(row.setting)) : (_jsx("div", { 
+                    // A lone half setting stays half width (never stretched to the full row).
+                    className: `grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-4 ${row.settings.length === 1 ? "md:max-w-[calc(50%-0.5rem)]" : ""}`, children: row.settings.map(renderField) }, row.settings[0].key)))] }, key));
+    };
+    const footer = (_jsxs(_Fragment, { children: [hasTextFields && (_jsx(Text, { size: "small", className: "text-ui-fg-muted mr-auto", children: texts.settings.clearHint })), _jsx(Button, { type: "submit", size: "small", isLoading: pending, disabled: !form.dirty || form.invalid.length > 0 || pending, children: texts.settings.save })] }));
+    // One card: the save button is its footer row. Several cards: one save row
+    // under all of them (the form saves every changed value at once).
+    const single = groups.length === 1;
+    return (_jsxs("form", { onSubmit: form.submit, className: "flex flex-col gap-y-3", "aria-busy": pending, children: [groups.map((group) => {
+                const dimmed = isGroupDimmed(plugin.features, group.requiresFeature);
+                const legend = group.settings.some((setting) => setting.required)
+                    ? texts.settings.requiredLegend
+                    : null;
+                return (_jsx(AdminSection, { title: group.title, description: group.description && legend ? (_jsxs(_Fragment, { children: [group.description, _jsx("span", { className: "block", children: legend })] })) : ((group.description ?? legend)), note: group.note, footer: single ? footer : undefined, children: group.blocks.map((block) => renderBlock(block, dimmed)) }, group.name ?? ""));
+            }), !single && (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-2", children: footer }))] }));
 };