inputs and data views keyed: search, select, tabs, state blocks, data table

The DataTable's pagination carries the only interpolated strings in this area
('Showing page {{current}} of {{total}}', '{{size}} / page'). No plural forms:
nothing here is a count-varying noun, so inventing one would only add a key
nobody uses.

DataTable.test.tsx now renders inside an I18nProvider with the real en-GB
catalog, so it still asserts the English a user sees rather than a dot-path.

Left/right utilities became logical (ms-/me-/ps-/pe-/start-) per D3.

src/workspaces/components/Data/StateBlock.tsx

@@ -2,6 +2,7 @@ import type { LucideIcon } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { Loader2, TriangleAlert } from 'lucide-react';
 import { cn } from 'helpers/cn';
+import { useTranslation } from '@/components/locales';
 
 // Loading, failed, empty. See docs/design-language-interface.md § 6.
 //
@@ -19,12 +20,15 @@ const Shell = ({ children, className }: { children: ReactNode; className?: strin
   </div>
 );
 
-export const LoadingBlock = ({ label = 'Loading…' }: { label?: string }) => (
-  <Shell>
-    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-    <p className="text-sm text-muted-foreground">{label}</p>
-  </Shell>
-);
+export const LoadingBlock = ({ label }: { label?: string }) => {
+  const { t } = useTranslation();
+  return (
+    <Shell>
+      <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+      <p className="text-sm text-muted-foreground">{label ?? t('state.loading')}</p>
+    </Shell>
+  );
+};
 
 /**
  * The real message is shown, not a friendly substitute for it. On a self-hosted platform the person