@gntik-ai/templates 0.9.0 → 0.11.0

package/dist/index.js

@@ -1,11 +1,11 @@
 'use client';
-import { ActivityFeed, AppSidebarFooter, AppSidebarHeader, AppSidebarNav, AppTopbar, AuthHeader, BulkActionBar, ChartCard, CodePanel, CommentThread, ConfirmDestructive, CreateApiKeyDialog, DEPLOYMENT_COLUMNS, DEPLOYMENT_DETAILS, DEPLOYMENT_EVENTS, DEPLOYMENT_ROWS, DangerZone, DataTable, DateRangeFilter, DescriptionListCard, ErrorPanel, EvaluationScorecard, Faq, FeatureGrid, FileUploadPanel, FilterBar, FirstRunEmpty, FlowBuilder, ForgotPasswordForm, FormSection, Hero, InlineCallout, InviteMembersDialog, InvoiceTable, KPI_ITEMS, KpiRow, ListSkeleton, LogViewer, MembersTable, MfaChallenge, ModelKeysList, NoResultsEmpty, NotificationMatrix, PROJECT_ACTIVITY, PageHeader, PageToolbar, PaymentMethodCard, PendingInvitations, PlanCard, PricingTable, ProfileHeader, PromptEditor, QuotaMeters, RESOURCE_CARDS, ResetPasswordForm, ResourceCardGrid, SectionHeader, SessionsDevices, SettingsRow, SignInForm, SignUpForm, SsoButtons, StatusTimeline, StickyActionBar, SystemBanner, TokenCostCard, TraceWaterfall, TrendDelta, ValidationSummary, apiKeyExpiries, apiKeyScopes, appSidebarNavGroups, appSidebarUser, appSidebarUser as appSidebarUser$1, appSidebarWorkspaces, appTopbarNotifications, firstRunSteps, formatSpanDuration, generateDemoSecret, memberRoles, noAccessSample, notificationChannels, notificationDefaults, notificationEvents, sampleDeviceSessions, sampleInvitations, sampleInvoices, sampleMembers, samplePaymentMethod, samplePlan, samplePricingTiers, sampleProfile, sampleQuotas, ssoProviders, ssoProviders as ssoProviders$1 } from "@gntik-ai/blocks";
-import { Alert, AuthLayout, Avatar, AvatarGroup, Badge, Blockquote, Breadcrumbs, Button, CanvasLayout, Card, CardBody, CardDescription, CardHeader, CardTitle, Checkbox, CheckboxGroup, ClickableCard, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, Drawer, DrawerBody, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, EmptyState, Field, FieldDescription, FieldError, FieldLabel, Grid, GridItem, HStack, Heading, IconButton, Input, InspectorLayout, InspectorToggle, JsonViewer, KanbanBoard, Kbd, KbdCombo, Link, ListInput, LiveAnnouncer, Logo, MegaMenu, MenuItem, MenuSeparator, Meter, MobileNav, NavList, OtpInput, OverflowList, Page, PasswordInput, PowerSearch, Progress, Section, Select, SelectContent, SelectItem, SelectTrigger, SelectableCard, SelectableCardGroup, Separator, SettingsLayout, SidebarLayout, SimpleSelect, Skeleton, Spinner, SplitLayout, Stack, StackedLayout, StatusDot, StatusLayout, StatusTag, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Text, Textarea, ThemeSwitcher, Thumbnail, ThumbnailList, Timer, Timestamp, Toggle, ToggleGroup, TokenInput, TooltipProvider, TransferList, TreeList, VisuallyHidden, WizardLayout, cn, emptyPowerSearchQuery, formatPowerSearch, matchPowerSearch, matchText, megaMenuNavItems, moveKanbanCard, parsePowerSearch, useAnnounce, useHasLiveAnnouncer, useI18n, useInspectorLayout, useTheme } from "@gntik-ai/ui";
+import { ChartLocaleProvider, Heatmap, MiniBar, RadarChart, chartFmt } from "@gntik-ai/charts";
+import { ActivityFeed, AppSidebarFooter, AppSidebarHeader, AppSidebarNav, AppTopbar, AuthHeader, BulkActionBar, ChartCard, CodePanel, CommentThread, ConfirmDestructive, CreateApiKeyDialog, DEPLOYMENT_COLUMNS, DEPLOYMENT_DETAILS, DEPLOYMENT_EVENTS, DEPLOYMENT_ROWS, DangerZone, DataTable, DateRangeFilter, DescriptionListCard, ErrorPanel, EvaluationScorecard, Faq, FeatureGrid, FileUploadPanel, FilterBar, FirstRunEmpty, FlowBuilder, ForgotPasswordForm, FormSection, Hero, InlineCallout, InviteMembersDialog, InvoiceTable, KPI_ITEMS, KpiRow, ListSkeleton, LogViewer, MembersTable, MfaChallenge, ModelKeysList, NoResultsEmpty, NotificationMatrix, PROJECT_ACTIVITY, PageHeader, PageToolbar, PaymentMethodCard, PendingInvitations, PlanCard, PricingTable, ProfileHeader, PromptEditor, QuotaMeters, RESOURCE_CARDS, ResetPasswordForm, ResourceCardGrid, SectionHeader, SessionsDevices, SettingsRow, SignInForm, SignUpForm, SsoButtons, StatusTimeline, StickyActionBar, SystemBanner, TokenCostCard, TraceWaterfall, TrendDelta, ValidationSummary, apiKeyExpiries, apiKeyScopes, appSidebarNavGroups, appSidebarUser, appSidebarUser as appSidebarUser$1, appSidebarWorkspaces, appTopbarNotifications, builderEdges, builderNodes, cleanFlowGraph, firstRunSteps, formatSpanDuration, generateDemoSecret, memberRoles, noAccessSample, notificationChannels, notificationDefaults, notificationEvents, sampleDeviceSessions, sampleInvitations, sampleInvoices, sampleMembers, samplePaymentMethod, samplePlan, samplePricingTiers, sampleProfile, sampleQuotas, ssoProviders, ssoProviders as ssoProviders$1 } from "@gntik-ai/blocks";
+import { Alert, AuthLayout, Avatar, AvatarGroup, Badge, Blockquote, Breadcrumbs, Button, CanvasLayout, Card, CardBody, CardDescription, CardHeader, CardTitle, Checkbox, CheckboxGroup, ClickableCard, CodeBlock, ContextMenu, ContextMenuContent, ContextMenuTrigger, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, Drawer, DrawerBody, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, EmptyState, Field, FieldDescription, FieldError, FieldLabel, Grid, GridItem, HStack, Heading, IconButton, Input, InspectorLayout, InspectorToggle, JsonViewer, KanbanBoard, Kbd, KbdCombo, Link, ListInput, LiveAnnouncer, Logo, MegaMenu, MenuItem, MenuSeparator, Meter, MobileNav, NavList, OtpInput, OverflowList, Page, PasswordInput, PowerSearch, Progress, Section, Select, SelectContent, SelectItem, SelectTrigger, SelectableCard, SelectableCardGroup, Separator, SettingsLayout, SidebarLayout, SimpleSelect, Skeleton, Spinner, SplitLayout, Stack, StackedLayout, StatusDot, StatusLayout, StatusTag, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Text, Textarea, ThemeSwitcher, Thumbnail, ThumbnailList, Timer, Timestamp, Toggle, ToggleGroup, TokenInput, TooltipProvider, TransferList, TreeList, VisuallyHidden, WizardLayout, cn, emptyPowerSearchQuery, formatPowerSearch, matchPowerSearch, matchText, megaMenuNavItems, moveKanbanCard, parsePowerSearch, useAnnounce, useHasLiveAnnouncer, useI18n, useInspectorLayout, useOs, useTheme } from "@gntik-ai/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, createElement, useEffect, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { ChatAnnouncer, ChatComposer, ChatLayout, ChatMessage, CitationList, Markdown, SuggestionChips, ToolCallCard } from "@gntik-ai/chat";
 import { Archive, ArrowLeft, ArrowRight, BarChart3, Bell, BellOff, BellRing, BookOpen, Braces, Building2, CalendarClock, Check, CheckCheck, CircleCheck, Clock, Code2, Columns3, Copy, Cpu, CreditCard, Database, Download, ExternalLink, FileCode, FileDiff, FileJson, FileQuestion, FileSearch, FileText, Folder, FolderKanban, FolderOpen, GitBranch, Globe, GripVertical, Hand, HardDrive, Home, KeyRound, Keyboard, LayoutGrid, LayoutTemplate, LifeBuoy, ListOrdered, ListTodo, Lock, Mail, MailOpen, MapPin, MessageSquare, MessagesSquare, Minus, Palette, Phone, Play, PlayCircle, Plug, Plus, RefreshCw, Rocket, RotateCcw, RotateCw, Rss, Save, Search, SearchX, Send, Server, ServerCrash, Shield, ShieldCheck, Square, SquarePen, Table2, ThumbsDown, ThumbsUp, Trash2, Upload, User, UserPlus, Users, Wrench, X } from "@gntik-ai/icons";
-import { Heatmap, MiniBar, RadarChart, chartFmt } from "@gntik-ai/charts";
 import { DiffEditor } from "@gntik-ai/editor";
 import { flushSync } from "react-dom";
 //#region src/shared/ConsoleShell.tsx
@@ -16,38 +16,42 @@ import { flushSync } from "react-dom";
 * link and user-menu items.
 */
 function ConsoleShell({ children, nav, currentHref, breadcrumbs, workspaces, currentWorkspaceId, onWorkspaceChange, onCreateWorkspace, user, usage, helpHref, helpLabel, userMenuItems, onSignOut, topbar, storageKey, sidebarLabel, collapseMode }) {
-	return /* @__PURE__ */ jsx(SidebarLayout, {
-		fullScreen: true,
-		storageKey,
-		sidebarLabel,
-		collapseMode,
-		sidebarHeader: ({ collapsed }) => /* @__PURE__ */ jsx(AppSidebarHeader, {
-			collapsed,
-			workspaces,
-			currentWorkspaceId,
-			onWorkspaceChange,
-			onCreateWorkspace
-		}),
-		sidebar: ({ collapsed }) => /* @__PURE__ */ jsx(AppSidebarNav, {
-			groups: nav,
-			currentHref,
-			collapsed
-		}),
-		sidebarFooter: ({ collapsed }) => /* @__PURE__ */ jsx(AppSidebarFooter, {
-			collapsed,
-			user,
-			usage,
-			helpHref,
-			helpLabel,
-			userMenuItems,
-			onSignOut
-		}),
-		topbar: /* @__PURE__ */ jsx(AppTopbar, {
-			breadcrumbs,
-			user,
-			...topbar
-		}),
-		children
+	const { locale } = useI18n();
+	return /* @__PURE__ */ jsx(ChartLocaleProvider, {
+		locale,
+		children: /* @__PURE__ */ jsx(SidebarLayout, {
+			fullScreen: true,
+			storageKey,
+			sidebarLabel,
+			collapseMode,
+			sidebarHeader: ({ collapsed }) => /* @__PURE__ */ jsx(AppSidebarHeader, {
+				collapsed,
+				workspaces,
+				currentWorkspaceId,
+				onWorkspaceChange,
+				onCreateWorkspace
+			}),
+			sidebar: ({ collapsed }) => /* @__PURE__ */ jsx(AppSidebarNav, {
+				groups: nav,
+				currentHref,
+				collapsed
+			}),
+			sidebarFooter: ({ collapsed }) => /* @__PURE__ */ jsx(AppSidebarFooter, {
+				collapsed,
+				user,
+				usage,
+				helpHref,
+				helpLabel,
+				userMenuItems,
+				onSignOut
+			}),
+			topbar: /* @__PURE__ */ jsx(AppTopbar, {
+				breadcrumbs,
+				user,
+				...topbar
+			}),
+			children
+		})
 	});
 }
 //#endregion
@@ -1938,15 +1942,24 @@ const flowBuilderBreadcrumbs = [{
 * '@gntik-ai/flow/styles.css' once for the React Flow canvas.
 */
 function FlowBuilderPage(props) {
-	const { title = flowBuilderContent.title, status = flowBuilderContent.status, nodes, edges, palette, onRun, consoleEntries, defaultConsoleEntries, onConsoleChange, onConsoleClear, onSave, onPublish, nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode, nodeStatus, onNodeSelect, codePanel, breadcrumbs = flowBuilderBreadcrumbs, height = 640, fullScreen = true } = props;
+	const { title = flowBuilderContent.title, status = flowBuilderContent.status, nodes = builderNodes, edges = builderEdges, palette, onRun, consoleEntries, defaultConsoleEntries, onConsoleChange, onConsoleClear, onSave, onPublish, nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode, nodeStatus, onNodeSelect, graph, onGraphChange, codePanel, breadcrumbs = flowBuilderBreadcrumbs, height = 640, fullScreen = true } = props;
 	const [saving, setSaving] = useState(false);
-	const [savedNote, setSavedNote] = useState(flowBuilderContent.lastSaved);
+	const [initialGraph] = useState(() => ({
+		nodes,
+		edges
+	}));
+	const [latestGraph, setLatestGraph] = useState();
+	const [saveState, setSaveState] = useState("initial");
+	const revision = useRef(0);
+	const { t } = useI18n();
+	const savedNote = saveState === "initial" ? flowBuilderContent.lastSaved : t(saveState === "unsaved" ? "actionBar.unsaved" : "actionBar.saved");
 	const save = async () => {
 		setSaving(true);
+		const savedRevision = revision.current;
 		try {
-			await onSave?.();
-			setSavedNote("All changes saved");
-		} finally {
+			await onSave?.(cleanFlowGraph(graph ?? latestGraph ?? initialGraph));
+			if (revision.current === savedRevision) setSaveState("saved");
+		} catch {} finally {
 			setSaving(false);
 		}
 	};
@@ -1994,6 +2007,13 @@ function FlowBuilderPage(props) {
 				title,
 				nodes,
 				edges,
+				graph,
+				onGraphChange: (next, change) => {
+					revision.current += 1;
+					setLatestGraph(next);
+					setSaveState("unsaved");
+					onGraphChange?.(next, change);
+				},
 				palette,
 				onRun,
 				consoleEntries,
@@ -2025,7 +2045,7 @@ const meta$60 = {
 	family: "Builders",
 	priority: "P3",
 	status: "experimental",
-	description: "Full-screen workflow editor with optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode=\"run\", nodeStatus and onNodeSelect passed to FlowBuilder; codePanel passes readOnly, markers, onValidityChange, onMonacoReady and loader to an optional CodePanel (branch, parallel, sequence and worker-backed YAML examples). The app must import '@gntik-ai/flow/styles.css' once for the canvas styles. Optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode, nodeStatus and onNodeSelect pass to FlowBuilder unchanged (see its branch, parallel and sequence examples). mode=\"run\" hides Save, Publish and the saved notice, and preserves focus and node selection. Optional codePanel renders a companion CodePanel and passes all its extensions: readOnly, markers, onValidityChange, onMonacoReady and loader; run mode forces its readOnly to true. For example, WorkflowBuilderPage mode=\"run\" nodeStatus={{step:\"running\"}} onNodeSelect={openDetails}; codePanel={{files,problems:[],loader:yamlLoader,markers}} uses consumer-owned same-origin YAML workers and inline schemas.",
+	description: "onSave(graph) receives the graph on screen (controlled graph, latest reported edit, or initial starter graph), without selected, dragging or measured node fields. Zero-argument handlers remain valid. Optional graph and onGraphChange pass through to FlowBuilder. Committed edits show actionBar.unsaved, a resolved save shows actionBar.saved, and a rejected save retains unsaved status and releases loading. Edits during a pending save remain unsaved. examples/SaveGraph.tsx shows a controlled graph and onSave={(graph) => localStorage.setItem(\"workflow-builder-example\", JSON.stringify(graph))}; hosts own persistence. Full-screen workflow editor with optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode=\"run\", nodeStatus and onNodeSelect passed to FlowBuilder; codePanel passes readOnly, markers, onValidityChange, onMonacoReady and loader to an optional CodePanel (branch, parallel, sequence and worker-backed YAML examples). The app must import '@gntik-ai/flow/styles.css' once for the canvas styles. Optional nodeTypes, onConnectEdge, onConnect, isValidConnection, onConnectionRejected, validationIssues, mode, nodeStatus and onNodeSelect pass to FlowBuilder unchanged (see its branch, parallel and sequence examples). mode=\"run\" hides Save, Publish and the saved notice, and preserves focus and node selection. Optional codePanel renders a companion CodePanel and passes all its extensions: readOnly, markers, onValidityChange, onMonacoReady and loader; run mode forces its readOnly to true. For example, WorkflowBuilderPage mode=\"run\" nodeStatus={{step:\"running\"}} onNodeSelect={openDetails}; codePanel={{files,problems:[],loader:yamlLoader,markers}} uses consumer-owned same-origin YAML workers and inline schemas.",
 	layout: "CanvasLayout",
 	blocks: ["flow-builder", "code-panel"]
 };
@@ -2983,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",
@@ -3034,23 +3081,23 @@ const detailDangerActions = [{
 //#endregion
 //#region src/resource-detail/Page.tsx
 const TABS = [
-	{
-		value: "overview",
-		label: "Overview"
-	},
-	{
-		value: "activity",
-		label: "Activity"
-	},
-	{
-		value: "settings",
-		label: "Settings"
-	}
+	"overview",
+	"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 } = 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",
@@ -3073,140 +3120,150 @@ function ResourceDetailPage(props) {
 		description
 	});
 	const dirty = settings.name !== saved.name || settings.description !== saved.description;
-	const tabs = readOnly ? TABS.filter((t) => t.value === "overview") : TABS;
-	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": "Resource 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 tabs = (readOnly ? TABS.filter((value) => value === "overview") : TABS).map((value) => ({
+		value,
+		label: labels?.[value] ?? t(`resourceDetail.${value}`)
+	}));
+	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
@@ -3215,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. 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",
@@ -13264,7 +13321,7 @@ const shortcutGroups = [
 			{
 				id: "palette",
 				description: "Open the command palette",
-				keys: ["⌘", "K"]
+				keys: ["mod", "K"]
 			},
 			{
 				id: "help",
@@ -13274,13 +13331,13 @@ const shortcutGroups = [
 			{
 				id: "sidebar",
 				description: "Collapse or expand the sidebar",
-				keys: ["⌘", "B"]
+				keys: ["mod", "B"]
 			},
 			{
 				id: "theme",
 				description: "Switch theme",
 				keys: [
-					"⌘",
+					"mod",
 					"⇧",
 					"L"
 				]
@@ -13355,12 +13412,12 @@ const shortcutGroups = [
 			{
 				id: "save",
 				description: "Save changes",
-				keys: ["⌘", "S"]
+				keys: ["mod", "S"]
 			},
 			{
 				id: "submit",
 				description: "Submit a form or comment",
-				keys: ["⌘", "↵"]
+				keys: ["mod", "↵"]
 			},
 			{
 				id: "cancel",
@@ -13370,18 +13427,28 @@ const shortcutGroups = [
 			{
 				id: "undo",
 				description: "Undo",
-				keys: ["⌘", "Z"]
+				keys: ["mod", "Z"]
 			}
 		]
 	}
 ];
-/** Groups with only the shortcuts whose description or keys match the query. */
-function filterShortcuts(groups, query, locale) {
+/** Groups matching descriptions, titles or keys; mod accepts both Command and Ctrl spellings. */
+function filterShortcuts(groups, query, locale, os = "undetermined") {
 	const q = query.trim().toLowerCase();
 	if (!q) return [...groups];
+	const modifier = os === "macos" || os === "ios" ? "⌘" : "Ctrl";
+	const alias = modifier === "⌘" ? "Ctrl" : "⌘";
+	const matchesKeys = (shortcut) => {
+		const keys = [...shortcut.keys, ...shortcut.then ?? []];
+		return [
+			"mod",
+			modifier,
+			alias
+		].some((mod) => keys.map((key) => key === "mod" ? mod : key).join(" ").toLowerCase() === q);
+	};
 	return groups.map((g) => ({
 		...g,
-		shortcuts: g.shortcuts.filter((s) => matchText(s.description, query, { locale }) || matchText(g.title, query, { locale }) || [...s.keys, ...s.then ?? []].join(" ").toLowerCase() === q)
+		shortcuts: g.shortcuts.filter((s) => matchText(s.description, query, { locale }) || matchText(g.title, query, { locale }) || matchesKeys(s))
 	})).filter((g) => g.shortcuts.length > 0);
 }
 //#endregion
@@ -13389,9 +13456,10 @@ function filterShortcuts(groups, query, locale) {
 /** Searchable shortcut sheet shared by the page and the dialog. */
 function ShortcutSheet({ groups, headingLevel = 2, columns = 2, autoFocus }) {
 	const { locale } = useI18n();
+	const os = useOs();
 	const [query, setQuery] = useState("");
 	const countId = useId();
-	const visible = filterShortcuts(groups, query, locale);
+	const visible = filterShortcuts(groups, query, locale, os);
 	const total = visible.reduce((n, g) => n + g.shortcuts.length, 0);
 	return /* @__PURE__ */ jsxs(Stack, {
 		gap: 5,