@gntik-ai/templates 0.10.0 → 0.11.0

package/dist/index.d.ts

@@ -648,6 +648,17 @@ declare function ResetPasswordPage({ onSubmit, onContinue, error, minPasswordLen
 //#region src/reset-password/template.meta.d.ts
 declare const meta$29: TemplateMeta;
 //#endregion
+//#region src/resource-detail/CustomTabs.d.ts
+interface CustomTabsProps {
+  tabs: {
+    value: string;
+    label: string;
+    content: ReactNode;
+  }[];
+  defaultTab?: string;
+  onTabChange?: (tab: string) => void;
+}
+//#endregion
 //#region src/resource-detail/data.d.ts
 /** The editable part of the resource (Settings tab). */
 interface ResourceSettings {
@@ -663,11 +674,11 @@ interface ResourceDetailLabels {
   settings: string;
   sections: string;
 }
-interface ResourceDetailProps {
+interface ResourceDetailBaseProps {
   /** Per-key copy overrides; explicit props take precedence, then labels, then the active catalog. */
   labels?: Partial<ResourceDetailLabels>;
   /**
-   * Optional boolean, default false. Shows only the keyboard-accessible Overview tab in
+   * Optional boolean, default false. With built-in tabs, shows only the keyboard-accessible Overview tab in
    * the "Resource sections" tablist, using explicit resource props without sample defaults.
    * Ignores activity, events, dangerActions, defaultTab, onSaveSettings and onDangerAction.
    * Explicit actions and onEditDetails are still honored. ConsoleShell defaults are unchanged.
@@ -696,16 +707,31 @@ interface ResourceDetailProps {
   events: readonly StatusEvent[];
   activity: readonly ActivityItem[];
   dangerActions: DangerZoneAction[];
-  defaultTab: ResourceDetailTab;
-  onTabChange: (tab: ResourceDetailTab) => void;
   onEditDetails: () => void;
   onSaveSettings: (settings: ResourceSettings) => void;
   /** Confirmed Danger zone action id (e.g. `pause`, `delete`). */
   onDangerAction: (actionId: string) => void | Promise<void>;
-  shell: Omit<ConsoleShellProps, 'children'>;
-}
-/** Resource detail: editable tabs by default, or explicit-only Overview when readOnly is true. */
-declare function ResourceDetailPage(props: Partial<ResourceDetailProps>): import("react").JSX.Element;
+  /** null omits ConsoleShell; undefined or an object preserves the default frame. */
+  shell: Omit<ConsoleShellProps, 'children'> | null;
+}
+type ResourceDetailTabsProps = {
+  tabs?: undefined;
+  defaultTab?: ResourceDetailTab;
+  onTabChange?: (tab: ResourceDetailTab) => void;
+} |
+/** Replaces the built-in tabs, including in read-only mode; [] hides the tab set. */
+CustomTabsProps;
+type ResourceDetailProps = ResourceDetailBaseProps & ResourceDetailTabsProps;
+/**
+ * Resource detail: editable tabs by default, or explicit-only Overview when readOnly is true.
+ * Pass tabs to replace the built-in sections with caller labels, values and content; readOnly
+ * does not filter custom tabs. An omitted or unknown defaultTab selects the first custom tab.
+ * shell={null} renders only Page and its header. The host owns the main landmark and must
+ * provide ChartLocaleProvider when its custom chart content needs a locale. Breadcrumbs
+ * render in the header in this mode: pass a trail or [] to avoid the editable sample trail.
+ * Omitted or object shells and omitted tabs preserve the existing default output.
+ */
+declare function ResourceDetailPage(props: Partial<ResourceDetailBaseProps> & ResourceDetailTabsProps): import("react").JSX.Element;
 //#endregion
 //#region src/resource-detail/template.meta.d.ts
 declare const meta$30: TemplateMeta;

package/dist/index.js

@@ -3003,6 +3003,33 @@ const meta$29 = {
 	blocks: ["reset-password-form"]
 };
 //#endregion
+//#region src/resource-detail/CustomTabs.tsx
+function CustomTabs({ tabs, defaultTab, onTabChange, label }) {
+	const [selected, setSelected] = useState(defaultTab);
+	const value = tabs.find((tab) => tab.value === selected)?.value ?? tabs[0]?.value ?? null;
+	if (tabs.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Tabs, {
+		value,
+		onValueChange: (next) => {
+			const tab = tabs.find((tab) => tab.value === next);
+			if (tab) {
+				setSelected(tab.value);
+				onTabChange?.(tab.value);
+			}
+		},
+		children: [/* @__PURE__ */ jsx(TabsList, {
+			"aria-label": label,
+			children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsTab, {
+				value: tab.value,
+				children: tab.label
+			}, tab.value))
+		}), tabs.map((tab) => /* @__PURE__ */ jsx(TabsPanel, {
+			value: tab.value,
+			children: tab.content
+		}, tab.value))]
+	});
+}
+//#endregion
 //#region src/resource-detail/data.ts
 const detailResource = {
 	name: "orders-api",
@@ -3058,11 +3085,19 @@ const TABS = [
 	"activity",
 	"settings"
 ];
-/** Resource detail: editable tabs by default, or explicit-only Overview when readOnly is true. */
+/**
+* Resource detail: editable tabs by default, or explicit-only Overview when readOnly is true.
+* Pass tabs to replace the built-in sections with caller labels, values and content; readOnly
+* does not filter custom tabs. An omitted or unknown defaultTab selects the first custom tab.
+* shell={null} renders only Page and its header. The host owns the main landmark and must
+* provide ChartLocaleProvider when its custom chart content needs a locale. Breadcrumbs
+* render in the header in this mode: pass a trail or [] to avoid the editable sample trail.
+* Omitted or object shells and omitted tabs preserve the existing default output.
+*/
 function ResourceDetailPage(props) {
 	const { t } = useI18n();
 	const readOnly = props.readOnly ?? false;
-	const { name = readOnly ? "" : detailResource.name, description = readOnly ? "" : detailResource.description, status = readOnly ? "" : detailResource.status, breadcrumbs = readOnly ? [] : detailBreadcrumbs, meta: metaProp, actions: actionsProp, details: detailsProp, overviewTitle = "Configuration", overviewDescription = readOnly ? "" : "Settings of this resource.", historyTitle = "Status history", events = readOnly ? [] : detailEvents, activity = readOnly ? [] : detailActivity, dangerActions = readOnly ? [] : detailDangerActions, defaultTab = "overview", onTabChange, onEditDetails, onSaveSettings, onDangerAction, shell, labels } = props;
+	const { name = readOnly ? "" : detailResource.name, description = readOnly ? "" : detailResource.description, status = readOnly ? "" : detailResource.status, breadcrumbs = readOnly ? [] : detailBreadcrumbs, meta: metaProp, actions: actionsProp, details: detailsProp, overviewTitle = "Configuration", overviewDescription = readOnly ? "" : "Settings of this resource.", historyTitle = "Status history", events = readOnly ? [] : detailEvents, activity = readOnly ? [] : detailActivity, dangerActions = readOnly ? [] : detailDangerActions, defaultTab = "overview", onEditDetails, onSaveSettings, onDangerAction, shell, labels } = props;
 	const meta = metaProp ?? (readOnly ? [] : detailMeta);
 	const actions = actionsProp ?? (readOnly ? [] : [{
 		label: "View logs",
@@ -3089,139 +3124,146 @@ function ResourceDetailPage(props) {
 		value,
 		label: labels?.[value] ?? t(`resourceDetail.${value}`)
 	}));
-	return /* @__PURE__ */ jsx(ConsoleShell, {
-		currentHref: "/deployments",
-		breadcrumbs,
-		...shell,
-		children: /* @__PURE__ */ jsx(Page, {
-			width: "wide",
-			header: /* @__PURE__ */ jsx(PageHeader, {
-				breadcrumbs: null,
-				title: name,
-				description,
-				status,
-				meta,
-				actions,
-				tabs: null
-			}),
-			children: /* @__PURE__ */ jsxs(Tabs, {
-				value: readOnly ? "overview" : tab,
-				onValueChange: (v) => {
-					const next = tabs.find((t) => t.value === v)?.value ?? "overview";
-					setTab(next);
-					onTabChange?.(next);
-				},
-				children: [
-					/* @__PURE__ */ jsx(TabsList, {
-						"aria-label": labels?.sections ?? t("resourceDetail.sections"),
-						children: tabs.map((t) => /* @__PURE__ */ jsx(TabsTab, {
-							value: t.value,
-							children: t.label
-						}, t.value))
-					}),
-					/* @__PURE__ */ jsx(TabsPanel, {
-						value: "overview",
-						children: /* @__PURE__ */ jsxs(Grid, {
-							cols: historyEvents === void 0 ? 1 : {
-								base: 1,
-								lg: 5
-							},
-							gap: 6,
-							align: "start",
-							children: [/* @__PURE__ */ jsx(DescriptionListCard, {
-								className: historyEvents === void 0 ? void 0 : "lg:col-span-3",
-								titleAs: "h2",
-								title: overviewTitle,
-								description: overviewDescription,
-								items: details,
-								onEdit: onEditDetails
-							}), historyEvents !== void 0 && /* @__PURE__ */ jsx(Section, {
-								role: readOnly ? "group" : void 0,
-								variant: "card",
-								padding: "md",
-								title: historyTitle,
-								className: "lg:col-span-2",
-								children: /* @__PURE__ */ jsx(StatusTimeline, {
-									events: historyEvents,
-									maxVisible: readOnly ? void 0 : 4
-								})
-							})]
-						})
-					}),
-					!readOnly && /* @__PURE__ */ jsx(TabsPanel, {
-						value: "activity",
-						children: /* @__PURE__ */ jsx(Section, {
+	const content = /* @__PURE__ */ jsx(Page, {
+		width: "wide",
+		header: /* @__PURE__ */ jsx(PageHeader, {
+			as: shell === null ? "div" : void 0,
+			breadcrumbs: shell === null ? breadcrumbs : null,
+			title: name,
+			description,
+			status,
+			meta,
+			actions,
+			tabs: null
+		}),
+		children: props.tabs !== void 0 ? /* @__PURE__ */ jsx(CustomTabs, {
+			tabs: props.tabs,
+			defaultTab: props.defaultTab,
+			onTabChange: props.onTabChange,
+			label: labels?.sections ?? t("resourceDetail.sections")
+		}) : /* @__PURE__ */ jsxs(Tabs, {
+			value: readOnly ? "overview" : tab,
+			onValueChange: (v) => {
+				const next = tabs.find((t) => t.value === v)?.value ?? "overview";
+				setTab(next);
+				if (props.tabs === void 0) props.onTabChange?.(next);
+			},
+			children: [
+				/* @__PURE__ */ jsx(TabsList, {
+					"aria-label": labels?.sections ?? t("resourceDetail.sections"),
+					children: tabs.map((t) => /* @__PURE__ */ jsx(TabsTab, {
+						value: t.value,
+						children: t.label
+					}, t.value))
+				}),
+				/* @__PURE__ */ jsx(TabsPanel, {
+					value: "overview",
+					children: /* @__PURE__ */ jsxs(Grid, {
+						cols: historyEvents === void 0 ? 1 : {
+							base: 1,
+							lg: 5
+						},
+						gap: 6,
+						align: "start",
+						children: [/* @__PURE__ */ jsx(DescriptionListCard, {
+							className: historyEvents === void 0 ? void 0 : "lg:col-span-3",
+							titleAs: "h2",
+							title: overviewTitle,
+							description: overviewDescription,
+							items: details,
+							onEdit: onEditDetails
+						}), historyEvents !== void 0 && /* @__PURE__ */ jsx(Section, {
+							role: readOnly ? "group" : void 0,
 							variant: "card",
 							padding: "md",
-							title: "Activity",
-							description: "Changes made to this resource by people and automations.",
-							children: /* @__PURE__ */ jsx(ActivityFeed, {
-								items: activity,
-								label: "Activity, newest first"
+							title: historyTitle,
+							className: "lg:col-span-2",
+							children: /* @__PURE__ */ jsx(StatusTimeline, {
+								events: historyEvents,
+								maxVisible: readOnly ? void 0 : 4
 							})
+						})]
+					})
+				}),
+				!readOnly && /* @__PURE__ */ jsx(TabsPanel, {
+					value: "activity",
+					children: /* @__PURE__ */ jsx(Section, {
+						variant: "card",
+						padding: "md",
+						title: "Activity",
+						description: "Changes made to this resource by people and automations.",
+						children: /* @__PURE__ */ jsx(ActivityFeed, {
+							items: activity,
+							label: "Activity, newest first"
 						})
-					}),
-					!readOnly && /* @__PURE__ */ jsx(TabsPanel, {
-						value: "settings",
-						children: /* @__PURE__ */ jsxs(Stack, {
-							gap: 8,
-							children: [/* @__PURE__ */ jsx("form", {
-								noValidate: true,
-								onSubmit: (e) => {
-									e.preventDefault();
-									setSaved(settings);
-									onSaveSettings?.(settings);
-								},
-								children: /* @__PURE__ */ jsx(FormSection, {
-									title: "General",
-									description: "Name and description shown across the console.",
-									actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
-										variant: "ghost",
-										disabled: !dirty,
-										onClick: () => setSettings(saved),
-										children: "Discard"
-									}), /* @__PURE__ */ jsx(Button, {
-										type: "submit",
-										disabled: !dirty,
-										children: "Save changes"
-									})] }),
-									children: /* @__PURE__ */ jsxs(Stack, {
-										gap: 4,
-										children: [/* @__PURE__ */ jsxs(Field, { children: [
-											/* @__PURE__ */ jsx(FieldLabel, {
-												required: true,
-												children: "Name"
-											}),
-											/* @__PURE__ */ jsx(Input, {
-												required: true,
-												value: settings.name,
-												onValueChange: (v) => setSettings((s) => ({
-													...s,
-													name: v
-												}))
-											}),
-											/* @__PURE__ */ jsx(FieldDescription, { children: "Lowercase letters, numbers and dashes." })
-										] }), /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, { children: "Description" }), /* @__PURE__ */ jsx(Textarea, {
-											rows: 3,
-											value: settings.description,
+					})
+				}),
+				!readOnly && /* @__PURE__ */ jsx(TabsPanel, {
+					value: "settings",
+					children: /* @__PURE__ */ jsxs(Stack, {
+						gap: 8,
+						children: [/* @__PURE__ */ jsx("form", {
+							noValidate: true,
+							onSubmit: (e) => {
+								e.preventDefault();
+								setSaved(settings);
+								onSaveSettings?.(settings);
+							},
+							children: /* @__PURE__ */ jsx(FormSection, {
+								title: "General",
+								description: "Name and description shown across the console.",
+								actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									disabled: !dirty,
+									onClick: () => setSettings(saved),
+									children: "Discard"
+								}), /* @__PURE__ */ jsx(Button, {
+									type: "submit",
+									disabled: !dirty,
+									children: "Save changes"
+								})] }),
+								children: /* @__PURE__ */ jsxs(Stack, {
+									gap: 4,
+									children: [/* @__PURE__ */ jsxs(Field, { children: [
+										/* @__PURE__ */ jsx(FieldLabel, {
+											required: true,
+											children: "Name"
+										}),
+										/* @__PURE__ */ jsx(Input, {
+											required: true,
+											value: settings.name,
 											onValueChange: (v) => setSettings((s) => ({
 												...s,
-												description: v
+												name: v
 											}))
-										})] })]
-									})
+										}),
+										/* @__PURE__ */ jsx(FieldDescription, { children: "Lowercase letters, numbers and dashes." })
+									] }), /* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, { children: "Description" }), /* @__PURE__ */ jsx(Textarea, {
+										rows: 3,
+										value: settings.description,
+										onValueChange: (v) => setSettings((s) => ({
+											...s,
+											description: v
+										}))
+									})] })]
 								})
-							}), /* @__PURE__ */ jsx(DangerZone, {
-								description: "These actions affect everyone who uses this resource.",
-								actions: dangerActions,
-								onConfirm: onDangerAction
-							})]
-						})
+							})
+						}), /* @__PURE__ */ jsx(DangerZone, {
+							description: "These actions affect everyone who uses this resource.",
+							actions: dangerActions,
+							onConfirm: onDangerAction
+						})]
 					})
-				]
-			})
+				})
+			]
 		})
 	});
+	return shell === null ? content : /* @__PURE__ */ jsx(ConsoleShell, {
+		currentHref: "/deployments",
+		breadcrumbs,
+		...shell,
+		children: content
+	});
 }
 //#endregion
 //#region src/resource-detail/template.meta.ts
@@ -3230,7 +3272,7 @@ const meta$30 = {
 	family: "Resources",
 	priority: "P1",
 	status: "beta",
-	description: "Resource detail with editable Overview, Activity and Settings tabs by default; optional readOnly (boolean, default false) uses only explicit header and detail props and one Overview tab, with optional history (readonly StatusEvent[], default undefined): omitted hides the history card, [] shows the named empty state, and events render exactly as supplied without invented actors. Read-only ignores activity, events, dangerActions, defaultTab, onSaveSettings and onDangerAction; explicit actions and onEditDetails are honored. The Resource sections tablist retains Tab, arrow, Home/End and Enter/Space keyboard navigation; history is a named group containing the Status history list or empty-state region. Uses token styling in dark (default), light and high_contrast. Examples: runtime-with-transition maps state and lastTransitionAt to one actor-free event, runtime-without-transition maps null to [], and realtime-configuration and postgres-table-detail omit history. Optional labels?: Partial<ResourceDetailLabels> overrides overview, activity, settings and sections (all strings). Unset keys use I18nProvider (en/es); no provider keeps English. Only the tabs and tablist are localized by this template; fixtures and other section text are unchanged. readOnly keeps only the localized overview tab. See the Catalog labels live preview. ConsoleShell retains sample frame defaults unless explicit shell props are supplied, as in the examples.",
+	description: "Resource detail with editable Overview, Activity and Settings tabs by default; optional readOnly (boolean, default false) uses only explicit header and detail props and one Overview tab, with optional history (readonly StatusEvent[], default undefined): omitted hides the history card, [] shows the named empty state, and events render exactly as supplied without invented actors. Read-only ignores activity, events, dangerActions, defaultTab, onSaveSettings and onDangerAction; explicit actions and onEditDetails are honored. The Resource sections tablist retains Tab, arrow, Home/End and Enter/Space keyboard navigation; history is a named group containing the Status history list or empty-state region. Uses token styling in dark (default), light and high_contrast. Examples: runtime-with-transition maps state and lastTransitionAt to one actor-free event, runtime-without-transition maps null to [], and realtime-configuration and postgres-table-detail omit history. Optional labels?: Partial<ResourceDetailLabels> overrides overview, activity, settings and sections (all strings). Unset keys use I18nProvider (en/es); no provider keeps English. Only the tabs and tablist are localized by this template; fixtures and other section text are unchanged. readOnly keeps only the localized overview tab. See the Catalog labels live preview. ConsoleShell retains sample frame defaults when shell is omitted or an object. shell={null} renders only Page and PageHeader, with breadcrumbs in the header; pass breadcrumbs or [] to avoid the editable sample trail. The host owns main and provides ChartLocaleProvider for custom chart locales. Optional tabs?: { value: string; label: string; content: ReactNode }[] replaces the built-in tabs in caller order, even with readOnly; [] hides the tab set. With custom tabs, defaultTab and onTabChange use string values; an omitted or unknown defaultTab selects the first tab. Without tabs they retain ResourceDetailTab values. Custom tabs use the same Base UI keyboard navigation and panel mounting. See the embedded-custom-tabs live preview for shell-less composition inside a host main.",
 	layout: "SidebarLayout + Page",
 	blocks: [
 		"app-sidebar",