@gntik-ai/templates 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gntik-ai/templates",
-  "version": "0.9.0",
+  "version": "0.10.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/blocks": "0.10.0",
+    "@gntik-ai/charts": "0.10.0",
+    "@gntik-ai/chat": "0.10.0",
     "@gntik-ai/editor": "0.5.0",
     "@gntik-ai/flow": "0.5.0",
     "@gntik-ai/icons": "0.5.0",
     "@gntik-ai/tokens": "0.2.1",
-    "@gntik-ai/ui": "0.9.0",
+    "@gntik-ai/ui": "0.10.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/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.tsx

@@ -28,6 +28,7 @@ import {
   TabsPanel,
   TabsTab,
   Textarea,
+  useI18n,
   type BreadcrumbItem,
 } from '@gntik-ai/ui';
 import { useState } from 'react';
@@ -45,7 +46,16 @@ import {
 
 export type ResourceDetailTab = 'overview' | 'activity' | 'settings';
 
+export interface ResourceDetailLabels {
+  overview: string;
+  activity: string;
+  settings: string;
+  sections: string;
+}
+
 export interface ResourceDetailProps {
+  /** 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
    * the "Resource sections" tablist, using explicit resource props without sample defaults.
@@ -85,14 +95,11 @@ export interface ResourceDetailProps {
   shell: Omit<ConsoleShellProps, 'children'>;
 }
 
-const TABS: Array<{ value: ResourceDetailTab; label: string }> = [
-  { value: 'overview', label: 'Overview' },
-  { value: 'activity', label: 'Activity' },
-  { value: 'settings', label: 'Settings' },
-];
+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>) {
+  const { t } = useI18n();
   const readOnly = props.readOnly ?? false;
   const {
     name = readOnly ? '' : detailResource.name,
@@ -114,6 +121,7 @@ export default function ResourceDetailPage(props: Partial<ResourceDetailProps>)
     onSaveSettings,
     onDangerAction,
     shell,
+    labels,
   } = props;
   const meta = metaProp ?? (readOnly ? [] : detailMeta);
   const actions: PageChromeAction[] =
@@ -130,7 +138,10 @@ export default function ResourceDetailPage(props: Partial<ResourceDetailProps>)
   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}>
@@ -156,7 +167,7 @@ export default function ResourceDetailPage(props: Partial<ResourceDetailProps>)
             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}

package/src/resource-detail/examples/Labels.tsx

@@ -0,0 +1,18 @@
+import { I18nProvider } from '@gntik-ai/ui';
+import ResourceDetailPage from '../Page';
+
+/** Each tab label and the tablist name can be overridden independently. */
+export default function Labels() {
+  return (
+    <I18nProvider locale="es">
+      <ResourceDetailPage
+        labels={{
+          overview: 'Resource overview',
+          activity: 'Resource activity',
+          settings: 'Resource settings',
+          sections: 'Resource navigation',
+        }}
+      />
+    </I18nProvider>
+  );
+}

package/src/resource-detail/examples/Spanish.tsx

@@ -0,0 +1,11 @@
+import { I18nProvider } from '@gntik-ai/ui';
+import ResourceDetailPage from '../Page';
+
+/** Only tab chrome is translated; imported resource data and section content stay unchanged. */
+export default function Spanish() {
+  return (
+    <I18nProvider locale="es">
+      <ResourceDetailPage />
+    </I18nProvider>
+  );
+}

package/src/resource-detail/template.meta.ts

@@ -6,7 +6,7 @@ export const meta: TemplateMeta = {
   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.',
+    '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',