@gntik-ai/templates 0.8.0 → 0.10.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, 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
@@ -721,8 +725,8 @@ const DAY$1 = 864e5;
 const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
 const fieldValue$1 = (e, field) => field === "actor" ? e.actor.name : field === "resource" ? e.resource : field === "result" ? e.result : "";
 /** Applies the search text, the filter chips (OR within a field, AND across fields) and the date range. */
-function filterAuditEvents(events, query, filters, range) {
-	const q = query.trim().toLowerCase();
+function filterAuditEvents(events, query, filters, range, locale) {
+	const q = query.trim();
 	const fields = [...new Set(filters.map((f) => f.field))];
 	const from = range.start ? startOfDay(range.start).getTime() : -Infinity;
 	const to = range.end ? startOfDay(range.end).getTime() + DAY$1 : Infinity;
@@ -732,13 +736,17 @@ function filterAuditEvents(events, query, filters, range) {
 			e.actor.email,
 			e.action,
 			e.target
-		].some((v) => v.toLowerCase().includes(q))) return false;
+		].some((v) => matchText(v, q, { locale }))) return false;
 		if (!fields.every((field) => filters.some((f) => f.field === field && f.value === fieldValue$1(e, field)))) return false;
 		const t = e.at.getTime();
 		return t >= from && t < to;
 	});
 }
-const csvCell = (v) => /[",\n]/.test(v) ? `"${v.replace(/"/g, "\"\"")}"` : v;
+/** Neutralises leading spreadsheet formula triggers before applying CSV quoting. */
+function escapeCsvCell(value) {
+	const safe = /^[=+@\t\r-]/.test(value) ? `'${value}` : value;
+	return /[",\n]/.test(safe) ? `"${safe.replace(/"/g, "\"\"")}"` : safe;
+}
 /** CSV of the events (time, actor, action, resource, target, ip, result). */
 function auditEventsToCsv(events) {
 	return [[
@@ -759,7 +767,7 @@ function auditEventsToCsv(events) {
 		e.target,
 		e.ip,
 		e.result
-	])].map((r) => r.map(csvCell).join(",")).join("\n");
+	])].map((r) => r.map(escapeCsvCell).join(",")).join("\n");
 }
 function downloadCsv(events) {
 	if (typeof URL.createObjectURL !== "function") return;
@@ -772,6 +780,7 @@ function downloadCsv(events) {
 }
 /** Audit log: ConsoleShell + Page with FilterBar + DateRangeFilter, an events DataTable and a diff drawer. */
 function AuditLogPage(props) {
+	const { locale } = useI18n();
 	const { events = auditEvents, filterFields = auditFilterFields, defaultRange, today, onExport = downloadCsv, breadcrumbs = auditBreadcrumbs, currentHref = "/activity", title = "Audit log", description = "Every change made in this workspace: who did it, when, from where and what changed.", shell } = props;
 	const [query, setQuery] = useState("");
 	const [filters, setFilters] = useState([]);
@@ -784,7 +793,7 @@ function AuditLogPage(props) {
 		};
 	});
 	const [diffEvent, setDiffEvent] = useState(null);
-	const rows = filterAuditEvents(events, query, filters, range);
+	const rows = filterAuditEvents(events, query, filters, range, locale);
 	const columns = [
 		{
 			id: "at",
@@ -973,7 +982,7 @@ const meta$2 = {
 	family: "Work",
 	priority: "P2",
 	status: "beta",
-	description: "Workspace audit trail: FilterBar (search, actor / resource / result filters) and DateRangeFilter over a DataTable of events with actor, action, target and result; a drawer shows the change diff (CodeBlock); export to CSV.",
+	description: "Workspace audit trail: FilterBar (search, actor / resource / result filters) and DateRangeFilter over a DataTable of events with actor, action, target and result; a drawer shows the change diff (CodeBlock); export to CSV. CSV export neutralises leading spreadsheet formula triggers.",
 	layout: "SidebarLayout · Page",
 	blocks: [
 		"app-sidebar",
@@ -1933,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);
 		}
 	};
@@ -1989,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,
@@ -2020,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"]
 };
@@ -3029,23 +3054,15 @@ 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. */
 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", onTabChange, onEditDetails, onSaveSettings, onDangerAction, shell, labels } = props;
 	const meta = metaProp ?? (readOnly ? [] : detailMeta);
 	const actions = actionsProp ?? (readOnly ? [] : [{
 		label: "View logs",
@@ -3068,7 +3085,10 @@ function ResourceDetailPage(props) {
 		description
 	});
 	const dirty = settings.name !== saved.name || settings.description !== saved.description;
-	const tabs = readOnly ? TABS.filter((t) => t.value === "overview") : TABS;
+	const tabs = (readOnly ? TABS.filter((value) => value === "overview") : TABS).map((value) => ({
+		value,
+		label: labels?.[value] ?? t(`resourceDetail.${value}`)
+	}));
 	return /* @__PURE__ */ jsx(ConsoleShell, {
 		currentHref: "/deployments",
 		breadcrumbs,
@@ -3093,7 +3113,7 @@ function ResourceDetailPage(props) {
 				},
 				children: [
 					/* @__PURE__ */ jsx(TabsList, {
-						"aria-label": "Resource sections",
+						"aria-label": labels?.sections ?? t("resourceDetail.sections"),
 						children: tabs.map((t) => /* @__PURE__ */ jsx(TabsTab, {
 							value: t.value,
 							children: t.label
@@ -3210,7 +3230,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 unless explicit shell props are supplied, as in the examples.",
 	layout: "SidebarLayout + Page",
 	blocks: [
 		"app-sidebar",
@@ -3541,19 +3561,18 @@ const galleryColumns = [
 	}
 ];
 /** Case-insensitive search over name and description. */
-function searchResources(items, query) {
-	const q = query.trim().toLowerCase();
-	if (!q) return [...items];
-	return items.filter((i) => i.name.toLowerCase().includes(q) || (i.description ?? "").toLowerCase().includes(q));
+function searchResources(items, query, locale) {
+	return items.filter((i) => matchText(i.name, query, { locale }) || matchText(i.description ?? "", query, { locale }));
 }
 //#endregion
 //#region src/resource-gallery/Page.tsx
 /** Resource gallery: toolbar with search and a grid/table view toggle over the same resources. */
 function ResourceGalleryPage({ title = "Resources", description = "Services, databases and jobs that make up this project.", breadcrumbs = galleryBreadcrumbs, items: initialItems = galleryItems, defaultView = "grid", onViewChange, createLabel = "New resource", onCreate, onAction, shell }) {
+	const { locale } = useI18n();
 	const [items, setItems] = useState(initialItems);
 	const [view, setView] = useState(defaultView);
 	const [query, setQuery] = useState("");
-	const visible = searchResources(items, query);
+	const visible = searchResources(items, query, locale);
 	const handleAction = (action, item) => {
 		if (onAction) onAction(action, item);
 		else if (action === "delete") setItems((prev) => prev.filter((i) => i.id !== item.id));
@@ -3728,16 +3747,17 @@ const text = (v) => typeof v === "string" || typeof v === "number" ? String(v).t
 * A filter field reads the column with the same id (its `accessor`), else the row property of that
 * name, so statuses come from the columns.
 */
-function filterResources(rows, query, filters, columns) {
-	const q = query.trim().toLowerCase();
+function filterResources(rows, query, filters, columns, locale) {
+	const q = query.trim();
 	const byField = /* @__PURE__ */ new Map();
 	for (const f of filters) byField.set(f.field, [...byField.get(f.field) ?? [], f.value.toLowerCase()]);
 	return rows.filter((row) => {
 		if (q) {
 			const r = row;
-			let haystack = [r.name, r.id].map(text).filter((v) => v !== void 0);
-			if (haystack.length === 0 && columns) haystack = columns.map((c) => text(c.accessor?.(row))).filter((v) => v !== void 0);
-			if (!haystack.some((v) => v.includes(q))) return false;
+			const searchText = (v) => typeof v === "string" || typeof v === "number" ? String(v) : void 0;
+			let haystack = [r.name, r.id].map(searchText).filter((v) => v !== void 0);
+			if (haystack.length === 0 && columns) haystack = columns.map((c) => searchText(c.accessor?.(row))).filter((v) => v !== void 0);
+			if (!haystack.some((v) => matchText(v, q, { locale }))) return false;
 		}
 		for (const [field, values] of byField) {
 			const value = text(fieldValue(row, field, columns));
@@ -3758,11 +3778,12 @@ const defaultArchive = (row) => "status" in row ? {
 } : row;
 /** Resource index: header, filter bar, selectable sortable table with pagination, bulk action bar and a no-results state. */
 function ResourceIndexPage({ title = "Deployments", description = "Every service deployed in this workspace, across regions.", breadcrumbs = resourceBreadcrumbs, rows: initialRows = resourceRows, columns = resourceColumns, filterFields = resourceFilterFields, savedViews = resourceSavedViews, getRowId = defaultRowId, getRowHref, onRowClick, linkColumnId, noun = ["deployment", "deployments"], createLabel = "New deployment", onCreate, onOpen, onBulkAction, archiveRow = defaultArchive, loading = false, shell }) {
+	const { locale } = useI18n();
 	const [rows, setRows] = useState(initialRows);
 	const [query, setQuery] = useState("");
 	const [filters, setFilters] = useState([]);
 	const [selected, setSelected] = useState([]);
-	const visible = filterResources(rows, query, filters, columns);
+	const visible = filterResources(rows, query, filters, columns, locale);
 	const visibleSelected = selected.filter((id) => visible.some((r) => getRowId(r) === id));
 	const tableColumns = useMemo(() => linkColumns(columns, linkColumnId ?? columns[0]?.id, getRowHref, onRowClick), [
 		columns,
@@ -4048,19 +4069,18 @@ const EMPTY_SELECTION = {
 };
 const facetValue = (hit, facet) => facet === "type" ? hit.type : hit.owner;
 /** Hits whose title or snippet contain the query (case-insensitive). */
-function matchQuery(hits, query) {
-	const q = query.trim().toLowerCase();
-	return q ? hits.filter((h) => `${h.title} ${h.snippet}`.toLowerCase().includes(q)) : [...hits];
+function matchQuery(hits, query, locale) {
+	return hits.filter((h) => matchText(`${h.title} ${h.snippet}`, query, { locale }));
 }
 /** Search results: ConsoleShell + Page with Checkbox-group facets and results grouped by type. */
 function SearchResultsPage(props) {
-	const { t } = useI18n();
+	const { t, locale } = useI18n();
 	const { hits = searchHits, facets = searchFacets, defaultQuery = searchDefaultQuery, onQueryChange, onSelectionChange, breadcrumbs = searchBreadcrumbs, currentHref = "/search", shell } = props;
 	const id = useId();
 	const resultsRef = useRef(null);
 	const [query, setQuery] = useState(defaultQuery);
 	const [selection, setSelection] = useState(EMPTY_SELECTION);
-	const matched = matchQuery(hits, query);
+	const matched = matchQuery(hits, query, locale);
 	const results = matched.filter((h) => Object.keys(selection).every((f) => selection[f].length === 0 || selection[f].includes(facetValue(h, f))));
 	const groups = searchTypeOrder.map((type) => ({
 		type,
@@ -7158,12 +7178,12 @@ const usageSavedViews = [
 * Search by project name; filters match the row field named by the filter id (same field OR,
 * across fields AND). Filters on fields the row does not have are ignored.
 */
-function filterUsage(rows, query, filters) {
-	const q = query.trim().toLowerCase();
+function filterUsage(rows, query, filters, locale) {
+	const q = query.trim();
 	const byField = /* @__PURE__ */ new Map();
 	for (const f of filters) byField.set(f.field, [...byField.get(f.field) ?? [], f.value]);
 	return rows.filter((row) => {
-		if (q && !row.project.toLowerCase().includes(q)) return false;
+		if (q && !matchText(row.project, q, { locale })) return false;
 		for (const [field, values] of byField) {
 			const value = row[field];
 			if (value !== void 0 && value !== null && !values.includes(String(value))) return false;
@@ -7286,6 +7306,7 @@ const TRAFFIC_CHART = {
 };
 /** Usage analytics: date range + filters, two charts and a sortable breakdown table with export. */
 function UsageAnalyticsPage({ title = "Usage analytics", description = "Traffic, errors and spend by project and environment.", breadcrumbs = usageBreadcrumbs, rows = usageRows, columns = usageColumns, filterFields = usageFilterFields, searchPlaceholder = "Search projects…", savedViews = usageSavedViews, primaryChart, trafficByRange: traffic = trafficByRange, trafficRanges: ranges = trafficRanges, secondaryChart, onRangeChange, onExport, shell }) {
+	const { locale } = useI18n();
 	const secondary = {
 		...TRAFFIC_CHART,
 		...secondaryChart
@@ -7293,7 +7314,7 @@ function UsageAnalyticsPage({ title = "Usage analytics", description = "Traffic,
 	const [range, setRange] = useState(null);
 	const [query, setQuery] = useState("");
 	const [filters, setFilters] = useState([]);
-	const visible = filterUsage(rows, query, filters);
+	const visible = filterUsage(rows, query, filters, locale);
 	const clearFilters = () => setFilters([]);
 	const exportAction = {
 		label: "Export CSV",
@@ -12412,15 +12433,14 @@ const helpArticles = [
 	}
 ];
 /** Articles whose title or excerpt contains the query. */
-function searchArticles(articles, query) {
-	const q = query.trim().toLowerCase();
-	if (!q) return [...articles];
-	return articles.filter((a) => a.title.toLowerCase().includes(q) || a.excerpt.toLowerCase().includes(q));
+function searchArticles(articles, query, locale) {
+	return articles.filter((a) => matchText(a.title, query, { locale }) || matchText(a.excerpt, query, { locale }));
 }
 //#endregion
 //#region src/help-home/Page.tsx
 /** Help center home on DocsLayout: search, category cards and popular articles. */
 function HelpHomePage(props) {
+	const { locale } = useI18n();
 	const { brand = /* @__PURE__ */ jsx(Logo, {
 		size: 22,
 		wordmark: true
@@ -12438,7 +12458,7 @@ function HelpHomePage(props) {
 	}) } = props;
 	const [query, setQuery] = useState("");
 	const ids = useId();
-	const results = searchArticles(articles, query);
+	const results = searchArticles(articles, query, locale);
 	const searching = query.trim() !== "";
 	const categoryTitle = (id) => categories.find((c) => c.id === id)?.title ?? id;
 	const submit = (e) => {
@@ -13259,7 +13279,7 @@ const shortcutGroups = [
 			{
 				id: "palette",
 				description: "Open the command palette",
-				keys: ["⌘", "K"]
+				keys: ["mod", "K"]
 			},
 			{
 				id: "help",
@@ -13269,13 +13289,13 @@ const shortcutGroups = [
 			{
 				id: "sidebar",
 				description: "Collapse or expand the sidebar",
-				keys: ["⌘", "B"]
+				keys: ["mod", "B"]
 			},
 			{
 				id: "theme",
 				description: "Switch theme",
 				keys: [
-					"⌘",
+					"mod",
 					"⇧",
 					"L"
 				]
@@ -13350,12 +13370,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",
@@ -13365,27 +13385,39 @@ 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) {
+/** 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) => s.description.toLowerCase().includes(q) || g.title.toLowerCase().includes(q) || [...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
 //#region src/keyboard-shortcuts/ShortcutSheet.tsx
 /** 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);
+	const visible = filterShortcuts(groups, query, locale, os);
 	const total = visible.reduce((n, g) => n + g.shortcuts.length, 0);
 	return /* @__PURE__ */ jsxs(Stack, {
 		gap: 5,
@@ -14508,14 +14540,14 @@ function triageFieldValue(i, field) {
 	if (field === "owner") return i.owner;
 }
 /** True when the incident matches the search text and every filtered field (OR within a field). */
-function matchesTriage(i, query, filters) {
-	const q = query.trim().toLowerCase();
+function matchesTriage(i, query, filters, locale) {
+	const q = query.trim();
 	if (q && ![
 		i.id,
 		i.title,
 		i.service,
 		i.owner
-	].some((v) => v.toLowerCase().includes(q))) return false;
+	].some((v) => matchText(v, q, { locale }))) return false;
 	const byField = /* @__PURE__ */ new Map();
 	for (const f of filters) byField.set(f.field, [...byField.get(f.field) ?? [], f.value]);
 	return [...byField].every(([field, values]) => values.includes(triageFieldValue(i, field) ?? ""));
@@ -14619,6 +14651,7 @@ function IncidentCard({ incident, now }) {
 	});
 }
 function IncidentBoard({ title, description, defaultColumns, filterFields, defaultFilters, now, onMove, defaultOpenId, onDeclare, onExport }) {
+	const { locale } = useI18n();
 	const announce = useAnnounce();
 	const [columns, setColumns] = useState(defaultColumns);
 	const [query, setQuery] = useState("");
@@ -14626,7 +14659,7 @@ function IncidentBoard({ title, description, defaultColumns, filterFields, defau
 	const [openId, setOpenId] = useState(defaultOpenId);
 	const visible = columns.map((c) => ({
 		...c,
-		cards: c.cards.filter((i) => matchesTriage(i, query, filters))
+		cards: c.cards.filter((i) => matchesTriage(i, query, filters, locale))
 	}));
 	const shown = visible.reduce((n, c) => n + c.cards.length, 0);
 	const openColumn = columns.find((c) => c.cards.some((i) => i.id === openId));