@gntik-ai/templates 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gntik-ai/templates",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "gntik-ui page templates: complete product pages (auth, dashboard, resources, settings, system) on the kit layouts and blocks.",
   "license": "MIT",
   "type": "module",
@@ -35,14 +35,14 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@gntik-ai/blocks": "0.9.0",
-    "@gntik-ai/charts": "0.5.0",
-    "@gntik-ai/chat": "0.9.0",
-    "@gntik-ai/editor": "0.5.0",
-    "@gntik-ai/flow": "0.5.0",
+    "@gntik-ai/blocks": "0.11.0",
+    "@gntik-ai/charts": "0.11.0",
+    "@gntik-ai/chat": "0.11.0",
+    "@gntik-ai/editor": "0.11.0",
+    "@gntik-ai/flow": "0.11.0",
     "@gntik-ai/icons": "0.5.0",
-    "@gntik-ai/tokens": "0.2.1",
-    "@gntik-ai/ui": "0.9.0",
+    "@gntik-ai/tokens": "0.3.0",
+    "@gntik-ai/ui": "0.11.0",
     "lucide-react": "^1.48.0"
   },
   "devDependencies": {

package/src/index.ts

@@ -57,7 +57,7 @@ export { meta as resetPasswordTemplateMeta } from './reset-password/template.met
 export type { ResetPasswordPageProps } from './reset-password/Page';
 export { default as ResourceDetailPage } from './resource-detail/Page';
 export { meta as resourceDetailTemplateMeta } from './resource-detail/template.meta';
-export type { ResourceDetailProps, ResourceDetailTab } from './resource-detail/Page';
+export type { ResourceDetailProps, ResourceDetailTab, ResourceDetailLabels } from './resource-detail/Page';
 export type { ResourceSettings } from './resource-detail/data';
 export { default as ResourceFormPage } from './resource-form/Page';
 export { meta as resourceFormTemplateMeta } from './resource-form/template.meta';

package/src/keyboard-shortcuts/Page.test.tsx

@@ -2,7 +2,45 @@ import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expectNoAxeViolations } from '../test/a11y';
 import KeyboardShortcutsPage, { KeyboardShortcutsDialog } from './Page';
-import { filterShortcuts, shortcutGroups } from './data';
+import { filterShortcuts, shortcutGroups, type ShortcutGroup } from './data';
+import { ShortcutSheet } from './ShortcutSheet';
+
+describe('platform shortcut hints', () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('shows Ctrl on Linux and finds the command palette by ctrl k', async () => {
+    vi.stubGlobal('navigator', { platform: 'Linux x86_64' });
+    render(<ShortcutSheet groups={shortcutGroups} />);
+    const row = screen.getByText('Open the command palette').closest('li');
+    expect(row).not.toBeNull();
+    expect(within(row!).getByText('Ctrl')).toBeInTheDocument();
+    await userEvent.type(screen.getByRole('searchbox'), 'ctrl k');
+    expect(screen.getByText('Open the command palette')).toBeInTheDocument();
+    expect(screen.getByText('1 shortcut')).toBeInTheDocument();
+  });
+
+  it('matches platform modifier spellings without changing legacy callers', () => {
+    const ids = (groups: ShortcutGroup[]) => groups.flatMap((group) => group.shortcuts.map((shortcut) => shortcut.id));
+    expect(ids(filterShortcuts(shortcutGroups, 'CtRl k', 'en', 'linux'))).toEqual(['palette']);
+    expect(ids(filterShortcuts(shortcutGroups, '⌘ k', 'en', 'macos'))).toEqual(['palette']);
+    expect(ids(filterShortcuts(shortcutGroups, '⌘ k', 'en'))).toEqual(['palette']);
+    const legacy: ShortcutGroup[] = [
+      {
+        id: 'legacy',
+        title: 'Legacy',
+        shortcuts: [
+          { id: 'literal', description: 'Explicit shortcut', keys: ['⌘', 'K'] },
+          { id: 'sequence', description: 'Sequence', keys: ['G'], then: ['P'] },
+        ],
+      },
+    ];
+    expect(ids(filterShortcuts(legacy, '⌘ k', 'es'))).toEqual(['literal']);
+    expect(filterShortcuts(legacy, 'ctrl k', 'es')).toEqual([]);
+    expect(ids(filterShortcuts(legacy, 'g p'))).toEqual(['sequence']);
+    expect(filterShortcuts(legacy, 'legacy')).toEqual(legacy);
+    expect(filterShortcuts(legacy, ' ')).toEqual(legacy);
+  });
+});
 
 describe('KeyboardShortcutsPage', () => {
   it('renders the console page with every group', { timeout: 15000 }, async () => {

package/src/keyboard-shortcuts/ShortcutSheet.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from '@gntik-ai/ui';
+import { useI18n, useOs } from '@gntik-ai/ui';
 import { Keyboard, Search } from '@gntik-ai/icons';
 import { EmptyState, Grid, Heading, Input, KbdCombo, Stack, Text } from '@gntik-ai/ui';
 import { useId, useState } from 'react';
@@ -16,9 +16,10 @@ export interface ShortcutSheetProps {
 /** Searchable shortcut sheet shared by the page and the dialog. */
 export function ShortcutSheet({ groups, headingLevel = 2, columns = 2, autoFocus }: ShortcutSheetProps) {
   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 (
     <Stack gap={5}>

package/src/keyboard-shortcuts/data.ts

@@ -1,11 +1,11 @@
 import { matchText } from '@gntik-ai/ui';
-import type { BreadcrumbItem } from '@gntik-ai/ui';
+import type { BreadcrumbItem, Os } from '@gntik-ai/ui';
 
 export interface Shortcut {
   id: string;
   /** What the shortcut does. */
   description: string;
-  /** Keys pressed together, e.g. ['⌘', 'K']. */
+  /** Keys pressed together, e.g. ['mod', 'K']. */
   keys: string[];
   /** A second combination that does the same (e.g. a sequence "G then P"). */
   then?: string[];
@@ -28,10 +28,10 @@ export const shortcutGroups: ShortcutGroup[] = [
     id: 'general',
     title: 'General',
     shortcuts: [
-      { id: 'palette', description: 'Open the command palette', keys: ['⌘', 'K'] },
+      { id: 'palette', description: 'Open the command palette', keys: ['mod', 'K'] },
       { id: 'help', description: 'Show keyboard shortcuts', keys: ['?'] },
-      { id: 'sidebar', description: 'Collapse or expand the sidebar', keys: ['⌘', 'B'] },
-      { id: 'theme', description: 'Switch theme', keys: ['⌘', '⇧', 'L'] },
+      { id: 'sidebar', description: 'Collapse or expand the sidebar', keys: ['mod', 'B'] },
+      { id: 'theme', description: 'Switch theme', keys: ['mod', '⇧', 'L'] },
     ],
   },
   {
@@ -59,26 +59,40 @@ export const shortcutGroups: ShortcutGroup[] = [
     id: 'editing',
     title: 'Editing',
     shortcuts: [
-      { id: 'save', description: 'Save changes', keys: ['⌘', 'S'] },
-      { id: 'submit', description: 'Submit a form or comment', keys: ['⌘', '↵'] },
+      { id: 'save', description: 'Save changes', keys: ['mod', 'S'] },
+      { id: 'submit', description: 'Submit a form or comment', keys: ['mod', '↵'] },
       { id: 'cancel', description: 'Cancel and close', keys: ['Esc'] },
-      { id: 'undo', description: 'Undo', keys: ['⌘', 'Z'] },
+      { id: 'undo', description: 'Undo', keys: ['mod', 'Z'] },
     ],
   },
 ];
 
-/** Groups with only the shortcuts whose description or keys match the query. */
-export function filterShortcuts(groups: readonly ShortcutGroup[], query: string, locale?: string): ShortcutGroup[] {
+/** Groups matching descriptions, titles or keys; mod accepts both Command and Ctrl spellings. */
+export function filterShortcuts(
+  groups: readonly ShortcutGroup[],
+  query: string,
+  locale?: string,
+  os: Os = 'undetermined',
+): ShortcutGroup[] {
   const q = query.trim().toLowerCase();
   if (!q) return [...groups];
+  const modifier = os === 'macos' || os === 'ios' ? '⌘' : 'Ctrl';
+  const alias = modifier === '⌘' ? 'Ctrl' : '⌘';
+  const matchesKeys = (shortcut: 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,
+        (s) => matchText(s.description, query, { locale }) || matchText(g.title, query, { locale }) || matchesKeys(s),
       ),
     }))
     .filter((g) => g.shortcuts.length > 0);

package/src/resource-detail/CustomTabs.tsx

@@ -0,0 +1,41 @@
+import { Tabs, TabsList, TabsPanel, TabsTab } from '@gntik-ai/ui';
+import { useState, type ReactNode } from 'react';
+
+export interface CustomTabsProps {
+  tabs: { value: string; label: string; content: ReactNode }[];
+  defaultTab?: string;
+  onTabChange?: (tab: string) => void;
+}
+
+export function CustomTabs({ tabs, defaultTab, onTabChange, label }: CustomTabsProps & { label: string }) {
+  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 (
+    <Tabs
+      value={value}
+      onValueChange={(next) => {
+        const tab = tabs.find((tab) => tab.value === next);
+        if (tab) {
+          setSelected(tab.value);
+          onTabChange?.(tab.value);
+        }
+      }}
+    >
+      <TabsList aria-label={label}>
+        {tabs.map((tab) => (
+          <TabsTab key={tab.value} value={tab.value}>
+            {tab.label}
+          </TabsTab>
+        ))}
+      </TabsList>
+      {tabs.map((tab) => (
+        <TabsPanel key={tab.value} value={tab.value}>
+          {tab.content}
+        </TabsPanel>
+      ))}
+    </Tabs>
+  );
+}

package/src/resource-detail/Page.default.test.tsx

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react';
+import ResourceDetailPage from './Page';
+import { shell } from './examples/shell';
+
+vi.hoisted(() => {
+  vi.useFakeTimers({ now: new Date('2026-10-23T12:00:00Z'), toFake: ['Date'] });
+});
+afterAll(() => vi.useRealTimers());
+
+// React's client IDs advance across roots. Preserve their relationships while
+// canonicalizing only the generated IDs so the original markup is comparable.
+function stableIds(html: string) {
+  const ids = new Map<string, string>();
+  return html.replace(/_r_[\da-z]+_/g, (id) => {
+    if (!ids.has(id)) ids.set(id, `_stable_${ids.size}_`);
+    return ids.get(id)!;
+  });
+}
+
+it('preserves the original default shell markup', () => {
+  const { container } = render(<ResourceDetailPage />);
+  expect(stableIds(container.innerHTML)).toMatchSnapshot();
+});
+
+it('preserves the original explicit shell markup', () => {
+  const { container } = render(<ResourceDetailPage shell={shell} />);
+  expect(stableIds(container.innerHTML)).toMatchSnapshot();
+});

package/src/resource-detail/Page.labels.test.tsx

@@ -0,0 +1,67 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nProvider, es } from '@gntik-ai/ui';
+import ResourceDetailPage, { type ResourceDetailLabels } from './Page';
+import { detailResource, detailMeta, detailItems } from './data';
+import { expectNoAxeViolations } from '../test/a11y';
+
+it(
+  'localizes only resource tabs and their tablist, preserves fixtures, and remains keyboard accessible',
+  { timeout: 15000 },
+  async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <I18nProvider locale="es">
+        <ResourceDetailPage />
+      </I18nProvider>,
+    );
+    expect(screen.getByRole('tablist', { name: es['resourceDetail.sections'] })).toBeVisible();
+    for (const key of ['overview', 'activity', 'settings'] as const)
+      expect(screen.getByRole('tab', { name: es[`resourceDetail.${key}`] })).toBeVisible();
+    const overview = screen.getByRole('tab', { name: 'Resumen' });
+    expect(overview).toHaveAttribute('aria-selected', 'true');
+    act(() => overview.focus());
+    await user.keyboard('{ArrowRight}{Enter}');
+    expect(screen.getByRole('tab', { name: 'Actividad' })).toHaveAttribute('aria-selected', 'true');
+    await user.click(overview);
+    expect(screen.getByRole('heading', { name: detailResource.name })).toBeVisible();
+    expect(screen.getByText(detailResource.description)).toBeVisible();
+    for (const item of detailMeta) expect(screen.getAllByText(String(item.value))[0]).toBeVisible();
+    for (const item of detailItems) expect(screen.getAllByText(item.label)[0]).toBeVisible();
+    expect(screen.getByRole('heading', { name: 'Configuration' })).toBeVisible();
+    expect(screen.getAllByRole('button', { name: 'View logs' })[0]).toBeVisible();
+    expect(screen.getAllByRole('link', { name: 'Deployments' })[0]).toHaveAttribute('href', '/deployments');
+    expect(container.textContent).not.toContain('{');
+    await expectNoAxeViolations(container);
+  },
+);
+
+it('keeps the English defaults and renders every tab override with catalog fallback in readOnly mode', () => {
+  const { rerender } = render(<ResourceDetailPage />);
+  expect(screen.getByRole('tablist', { name: 'Resource sections' })).toBeVisible();
+  for (const name of ['Overview', 'Activity', 'Settings']) expect(screen.getByRole('tab', { name })).toBeVisible();
+  const labels: ResourceDetailLabels = {
+    overview: 'Overview override',
+    activity: 'Activity override',
+    settings: 'Settings override',
+    sections: 'Sections override',
+  };
+  const view = (overrides: Partial<ResourceDetailLabels>, readOnly = false) => (
+    <I18nProvider locale="es">
+      <ResourceDetailPage labels={overrides} readOnly={readOnly} />
+    </I18nProvider>
+  );
+  rerender(view(labels));
+  expect(screen.getByRole('tablist', { name: labels.sections })).toBeVisible();
+  for (const name of [labels.overview, labels.activity, labels.settings])
+    expect(screen.getByRole('tab', { name })).toBeVisible();
+  rerender(view({ overview: 'Only overview' }));
+  expect(screen.getByRole('tablist', { name: es['resourceDetail.sections'] })).toBeVisible();
+  expect(screen.getByRole('tab', { name: 'Only overview' })).toBeVisible();
+  expect(screen.getByRole('tab', { name: es['resourceDetail.activity'] })).toBeVisible();
+  expect(screen.getByRole('tab', { name: es['resourceDetail.settings'] })).toBeVisible();
+  rerender(view({}, true));
+  expect(screen.getAllByRole('tab')).toHaveLength(1);
+  expect(screen.getByRole('tab', { name: es['resourceDetail.overview'] })).toHaveAttribute('aria-selected', 'true');
+  expect(screen.getByRole('tablist', { name: es['resourceDetail.sections'] })).toBeVisible();
+});

package/src/resource-detail/Page.shell-less.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen, within } from '@testing-library/react';
+import ResourceDetailPage from './Page';
+import { expectNoAxeViolations } from '../test/a11y';
+
+it('renders only page content and the default breadcrumb navigation without a shell', () => {
+  render(<ResourceDetailPage shell={null} />);
+  for (const role of ['complementary', 'banner', 'main']) {
+    expect(screen.queryByRole(role)).not.toBeInTheDocument();
+  }
+  expect(screen.getAllByRole('navigation')).toHaveLength(1);
+  expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
+  expect(screen.getByRole('tablist', { name: 'Resource sections' })).toBeVisible();
+});
+
+it('shows explicit breadcrumbs and omits navigation for an empty trail', () => {
+  const { rerender } = render(
+    <ResourceDetailPage shell={null} breadcrumbs={[{ label: 'Ops', href: '/ops' }, { label: 'Op 1' }]} />,
+  );
+  const nav = screen.getByRole('navigation');
+  expect(within(nav).getByRole('link', { name: 'Ops' })).toHaveAttribute('href', '/ops');
+  expect(within(nav).getByText('Op 1')).toBeVisible();
+  rerender(<ResourceDetailPage shell={null} breadcrumbs={[]} />);
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+  rerender(<ResourceDetailPage shell={null} readOnly name="Resource record" />);
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
+it('fits accessibly inside the host main landmark', { timeout: 15000 }, async () => {
+  const { container } = render(
+    <main>
+      <ResourceDetailPage shell={null} />
+    </main>,
+  );
+  expect(screen.getAllByRole('main')).toHaveLength(1);
+  await expectNoAxeViolations(container);
+});

package/src/resource-detail/Page.tabs.test.tsx

@@ -0,0 +1,116 @@
+import { act, render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectTypeOf } from 'vitest';
+import type { ComponentProps } from 'react';
+import { expectNoAxeViolations } from '../test/a11y';
+import ResourceDetailPage, { type ResourceDetailTab } from './Page';
+
+const tabs = [
+  { value: 'A', label: 'First section', content: <p>Content A</p> },
+  { value: 'B', label: 'Second section', content: <p>Content B</p> },
+  { value: 'C', label: 'Third section', content: <p>Content C</p> },
+];
+
+it('replaces built-in tabs with caller labels, order and content', async () => {
+  const user = userEvent.setup();
+  render(<ResourceDetailPage tabs={tabs} />);
+  expect(screen.getAllByRole('tab').map((tab) => tab.textContent)).toEqual([
+    'First section',
+    'Second section',
+    'Third section',
+  ]);
+  for (const name of ['Overview', 'Activity', 'Settings']) {
+    expect(screen.queryByRole('tab', { name })).not.toBeInTheDocument();
+  }
+  expect(screen.getByText('Content A')).toBeVisible();
+  await user.click(screen.getByRole('tab', { name: 'Second section' }));
+  await waitFor(() => expect(screen.getAllByRole('tabpanel')).toHaveLength(1));
+  expect(within(screen.getByRole('tabpanel')).getByText('Content B')).toBeVisible();
+  expect(screen.queryByText('Content A')).not.toBeInTheDocument();
+  expect(screen.queryByText('Content C')).not.toBeInTheDocument();
+});
+
+it('uses caller defaults, panel associations and manual keyboard activation', async () => {
+  const user = userEvent.setup();
+  const onTabChange = vi.fn();
+  render(<ResourceDetailPage tabs={tabs} defaultTab="B" onTabChange={onTabChange} />);
+  const first = screen.getByRole('tab', { name: 'First section' });
+  const second = screen.getByRole('tab', { name: 'Second section' });
+  const third = screen.getByRole('tab', { name: 'Third section' });
+  expect(second).toHaveAttribute('aria-selected', 'true');
+  act(() => second.focus());
+  await user.keyboard('{ArrowRight}');
+  expect(third).toHaveFocus();
+  expect(second).toHaveAttribute('aria-selected', 'true');
+  expect(onTabChange).not.toHaveBeenCalled();
+  await user.keyboard('{Enter}');
+  expect(third).toHaveAttribute('aria-selected', 'true');
+  expect(onTabChange).toHaveBeenCalledWith('C');
+  await user.keyboard('{Home}');
+  expect(first).toHaveFocus();
+  await user.keyboard('{End}');
+  expect(third).toHaveFocus();
+  for (const tab of [first, second, third]) {
+    await user.click(tab);
+    const panel = await screen.findByRole('tabpanel');
+    expect(tab).toHaveAttribute('aria-controls', panel.id);
+    expect(panel).toHaveAttribute('aria-labelledby', tab.id);
+  }
+});
+
+it('falls back to the first caller tab for an unknown default', () => {
+  render(<ResourceDetailPage tabs={tabs} defaultTab="unknown" />);
+  expect(screen.getByRole('tab', { name: 'First section' })).toHaveAttribute('aria-selected', 'true');
+  expect(screen.getByText('Content A')).toBeVisible();
+});
+
+it('renders only the heading and header when caller tabs are empty', () => {
+  render(<ResourceDetailPage tabs={[]} />);
+  expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
+  expect(screen.queryByRole('tabpanel')).not.toBeInTheDocument();
+  expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
+});
+
+it('selects the first caller tab when no default is supplied, including built-in value names', () => {
+  render(<ResourceDetailPage tabs={[tabs[0]!, { ...tabs[1]!, value: 'overview' }]} />);
+  expect(screen.getByRole('tab', { name: 'First section' })).toHaveAttribute('aria-selected', 'true');
+});
+
+it('does not filter custom tabs or their selection in read-only mode', async () => {
+  const user = userEvent.setup();
+  render(<ResourceDetailPage readOnly name="Resource record" tabs={tabs.slice(0, 2)} />);
+  expect(screen.getAllByRole('tab')).toHaveLength(2);
+  await user.click(screen.getByRole('tab', { name: 'Second section' }));
+  expect(screen.getByText('Content B')).toBeVisible();
+});
+
+it.each([undefined, null])('keeps custom tabs accessible with shell=%s', { timeout: 15000 }, async (shell) => {
+  const { container } = render(
+    <ResourceDetailPage shell={shell} tabs={tabs} labels={{ sections: 'Record sections' }} />,
+  );
+  expect(screen.getByRole('tablist', { name: 'Record sections' })).toBeVisible();
+  await expectNoAxeViolations(container);
+});
+
+it('keeps built-in callback values narrow and custom callback values as strings', () => {
+  type Props = ComponentProps<typeof ResourceDetailPage>;
+  type BuiltIn = Extract<Props, { tabs?: undefined }>;
+  type Custom = Extract<Props, { tabs: unknown[] }>;
+  expectTypeOf<BuiltIn['defaultTab']>().toEqualTypeOf<ResourceDetailTab | undefined>();
+  expectTypeOf<NonNullable<BuiltIn['onTabChange']>>().parameter(0).toEqualTypeOf<ResourceDetailTab>();
+  expectTypeOf<Custom['defaultTab']>().toEqualTypeOf<string | undefined>();
+  expectTypeOf<NonNullable<Custom['onTabChange']>>().parameter(0).toEqualTypeOf<string>();
+  expectTypeOf<{ defaultTab: 'B' }>().not.toExtend<Props>();
+});
+
+it('smoke-loads the embedded custom tabs preview inside one accessible main', { timeout: 15000 }, async () => {
+  const { default: EmbeddedCustomTabs } = await import('./examples/embedded-custom-tabs');
+  const { container } = render(<EmbeddedCustomTabs />);
+  expect(screen.getAllByRole('main')).toHaveLength(1);
+  expect(screen.queryByRole('banner')).not.toBeInTheDocument();
+  expect(screen.queryByRole('complementary')).not.toBeInTheDocument();
+  expect(screen.getAllByRole('tab').map((tab) => tab.textContent)).toEqual(['Summary', 'Output']);
+  await userEvent.click(screen.getByRole('tab', { name: 'Output' }));
+  expect(screen.getByText('The resource completed successfully.')).toBeVisible();
+  await expectNoAxeViolations(container);
+});

package/src/resource-detail/Page.tsx

@@ -28,10 +28,12 @@ import {
   TabsPanel,
   TabsTab,
   Textarea,
+  useI18n,
   type BreadcrumbItem,
 } from '@gntik-ai/ui';
 import { useState } from 'react';
 import { ConsoleShell, type ConsoleShellProps } from '../shared/ConsoleShell';
+import { CustomTabs, type CustomTabsProps } from './CustomTabs';
 import {
   detailActivity,
   detailBreadcrumbs,
@@ -45,9 +47,18 @@ import {
 
 export type ResourceDetailTab = 'overview' | 'activity' | 'settings';
 
-export interface ResourceDetailProps {
+export interface ResourceDetailLabels {
+  overview: string;
+  activity: string;
+  settings: string;
+  sections: string;
+}
+
+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.
@@ -76,23 +87,39 @@ export 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'>;
+  /** null omits ConsoleShell; undefined or an object preserves the default frame. */
+  shell: Omit<ConsoleShellProps, 'children'> | null;
 }
 
-const TABS: Array<{ value: ResourceDetailTab; label: string }> = [
-  { value: 'overview', label: 'Overview' },
-  { value: 'activity', label: 'Activity' },
-  { value: 'settings', label: 'Settings' },
-];
+// Custom tabs require an explicit list; omitted tabs retain the built-in value types.
+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;
+
+export type ResourceDetailProps = ResourceDetailBaseProps & ResourceDetailTabsProps;
+
+const TABS: ResourceDetailTab[] = ['overview', 'activity', 'settings'];
 
-/** Resource detail: editable tabs by default, or explicit-only Overview when readOnly is true. */
-export default function ResourceDetailPage(props: Partial<ResourceDetailProps>) {
+/**
+ * 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.
+ */
+export default function ResourceDetailPage(props: Partial<ResourceDetailBaseProps> & ResourceDetailTabsProps) {
+  const { t } = useI18n();
   const readOnly = props.readOnly ?? false;
   const {
     name = readOnly ? '' : detailResource.name,
@@ -109,11 +136,11 @@ export default function ResourceDetailPage(props: Partial<ResourceDetailProps>)
     activity = readOnly ? [] : detailActivity,
     dangerActions = readOnly ? [] : detailDangerActions,
     defaultTab = 'overview',
-    onTabChange,
     onEditDetails,
     onSaveSettings,
     onDangerAction,
     shell,
+    labels,
   } = props;
   const meta = metaProp ?? (readOnly ? [] : detailMeta);
   const actions: PageChromeAction[] =
@@ -126,37 +153,48 @@ export default function ResourceDetailPage(props: Partial<ResourceDetailProps>)
         ]);
   const details = detailsProp ?? (readOnly ? [] : detailItems);
   const historyEvents = readOnly ? props.history : events;
-  const [tab, setTab] = useState<ResourceDetailTab>(defaultTab);
+  const [tab, setTab] = useState(defaultTab);
   const [settings, setSettings] = useState<ResourceSettings>({ name, description });
   const [saved, setSaved] = useState<ResourceSettings>({ name, 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 (
-    <ConsoleShell currentHref="/deployments" breadcrumbs={breadcrumbs} {...shell}>
-      <Page
-        width="wide"
-        header={
-          <PageHeader
-            breadcrumbs={null}
-            title={name}
-            description={description}
-            status={status}
-            meta={meta}
-            actions={actions}
-            tabs={null}
-          />
-        }
-      >
+  const content = (
+    <Page
+      width="wide"
+      header={
+        <PageHeader
+          as={shell === null ? 'div' : undefined}
+          breadcrumbs={shell === null ? breadcrumbs : null}
+          title={name}
+          description={description}
+          status={status}
+          meta={meta}
+          actions={actions}
+          tabs={null}
+        />
+      }
+    >
+      {props.tabs !== undefined ? (
+        <CustomTabs
+          tabs={props.tabs}
+          defaultTab={props.defaultTab}
+          onTabChange={props.onTabChange}
+          label={labels?.sections ?? t('resourceDetail.sections')}
+        />
+      ) : (
         <Tabs
           value={readOnly ? 'overview' : tab}
           onValueChange={(v) => {
             const next = tabs.find((t) => t.value === v)?.value ?? 'overview';
             setTab(next);
-            onTabChange?.(next);
+            if (props.tabs === undefined) props.onTabChange?.(next);
           }}
         >
-          <TabsList aria-label="Resource sections">
+          <TabsList aria-label={labels?.sections ?? t('resourceDetail.sections')}>
             {tabs.map((t) => (
               <TabsTab key={t.value} value={t.value}>
                 {t.label}
@@ -256,7 +294,15 @@ export default function ResourceDetailPage(props: Partial<ResourceDetailProps>)
             </TabsPanel>
           )}
         </Tabs>
-      </Page>
+      )}
+    </Page>
+  );
+
+  return shell === null ? (
+    content
+  ) : (
+    <ConsoleShell currentHref="/deployments" breadcrumbs={breadcrumbs} {...shell}>
+      {content}
     </ConsoleShell>
   );
 }