@semiont/react-ui 0.5.25 → 0.5.26

package/src/components/pdf-annotation/__tests__/estimate-slot-height.test.ts

@@ -0,0 +1,53 @@
+/**
+ * PDF-CONTINUOUS-SCROLL S1b.
+ *
+ * The scroll column reserves space for unmounted pages. If the reservation is
+ * wrong, every mount and unmount changes the column's height and the scrollbar
+ * jumps — which is what S1 shipped, by reserving the raster height rather than
+ * the displayed one.
+ *
+ * These pins hold the estimate to the CSS the image is actually under:
+ * `max-width: 100%; height: auto`.
+ */
+import { describe, it, expect } from 'vitest';
+import { estimateSlotHeight } from '../estimate-slot-height';
+
+// US Letter at scale 1.5: 918 × 1188 raster, aspect 792/612.
+const ASPECT = 792 / 612;
+const RASTER_W = 918;
+
+describe('estimateSlotHeight', () => {
+  it('scales to the column when the column is narrower than the raster', () => {
+    // The common case: `max-width: 100%` shrinks the image to the column.
+    expect(estimateSlotHeight(600, RASTER_W, ASPECT)).toBe(Math.round(600 * ASPECT));
+  });
+
+  it('never upscales past the raster — max-width shrinks only', () => {
+    // A column wider than the raster leaves the image at natural size, so the
+    // height stops growing. Reserving columnWidth * aspect here would over-
+    // reserve and leave a gap under every page.
+    expect(estimateSlotHeight(1600, RASTER_W, ASPECT)).toBe(Math.round(RASTER_W * ASPECT));
+  });
+
+  it('is exactly the raster height when the column matches the raster', () => {
+    expect(estimateSlotHeight(RASTER_W, RASTER_W, ASPECT)).toBe(Math.round(RASTER_W * ASPECT));
+  });
+
+  it('does NOT use the raster height as a width-independent constant', () => {
+    // The S1 defect, stated as a pin: the raster is 1188px tall, but in a
+    // 600px column the page occupies ~776px. Reserving 1188 is what made the
+    // column's height lurch on every mount.
+    const rasterHeight = Math.round(RASTER_W * ASPECT); // 1188
+    expect(estimateSlotHeight(600, RASTER_W, ASPECT)).not.toBe(rasterHeight);
+    expect(estimateSlotHeight(600, RASTER_W, ASPECT)).toBeLessThan(rasterHeight);
+  });
+
+  it('answers null until every measurement is in, rather than guessing', () => {
+    // A wrong reservation is worse than none: an unsized slot is stable, a
+    // mis-sized one moves when the page lands.
+    expect(estimateSlotHeight(null, RASTER_W, ASPECT)).toBeNull();
+    expect(estimateSlotHeight(600, null, ASPECT)).toBeNull();
+    expect(estimateSlotHeight(600, RASTER_W, null)).toBeNull();
+    expect(estimateSlotHeight(0, RASTER_W, ASPECT)).toBeNull();
+  });
+});

package/src/components/pdf-annotation/estimate-slot-height.ts

@@ -0,0 +1,31 @@
+/**
+ * The height a page will occupy once rendered, computed BEFORE rendering it.
+ *
+ * The scrolling column reserves space for pages it has not mounted. If the
+ * reserved height differs from the height the page actually takes, every mount
+ * and unmount changes the column's total height and the scrollbar jumps under
+ * the reader's cursor — the defect S1 shipped by reserving the *raster* height
+ * (`getViewport({ scale }).height`) instead of the *displayed* one.
+ *
+ * This models the CSS the image is under exactly:
+ *
+ *   .semiont-pdf-annotation-canvas__image { max-width: 100%; height: auto; }
+ *
+ * `max-width` shrinks but never upscales, so the displayed width is
+ * `min(columnWidth, rasterWidth)` and the height follows the page's aspect
+ * ratio. Aspect is scale-invariant, so it can come from any viewport.
+ *
+ * @param columnWidth  Measured inner width of the scroll column, in CSS px.
+ * @param rasterWidth  Width of the rendered raster, in px (`viewport(scale).width`).
+ * @param aspect       Page height ÷ width, from any viewport scale.
+ * @returns Reserved height in CSS px, or null when a measurement is not in yet.
+ */
+export function estimateSlotHeight(
+  columnWidth: number | null,
+  rasterWidth: number | null,
+  aspect: number | null,
+): number | null {
+  if (!columnWidth || !rasterWidth || !aspect) return null;
+  if (columnWidth <= 0 || rasterWidth <= 0 || aspect <= 0) return null;
+  return Math.round(Math.min(columnWidth, rasterWidth) * aspect);
+}

package/src/components/resource/__tests__/browse-renderers.dispatch.test.tsx

@@ -109,5 +109,38 @@ describe('browse-renderers — annotation + session forwarding (dispatch contrac
     expect(props.existingAnnotations).toEqual([shapeAnnotation()]); // pinned — worked before
     expect(props.drawingMode).toBeNull();
     expect(props.session).toBe(session);                            // NEW — was a session-less no-op
+    // PDF-CONTINUOUS-SCROLL S1: browse asks for the scrolling column.
+    expect(props.pageLayout).toBe('scroll');
+  });
+
+  // S2. Annotate is the mode people actually work in
+  // (.plans/PDF-CONTINUOUS-SCROLL.md D3, second correction), so it gets the
+  // column too — leaving it on Previous/Next made the feature invisible to
+  // its primary audience.
+  it('the annotate registry asks for the column as well, with the live tool', async () => {
+    const session = fakeSession();
+    const { AnnotateView } = await import('../AnnotateView');
+    const { container } = render(
+      <AnnotateView
+        content="blob:pdf-url"
+        mimeType="application/pdf"
+        resourceUri="res-1"
+        annotations={emptyAnnotations}
+        uiState={{
+          selectedMotivation: 'highlighting',
+          selectedClick: 'detail',
+          selectedShape: 'rectangle',
+          hoveredAnnotationId: null,
+          scrollToAnnotationId: null,
+        }}
+        annotateMode
+        session={session}
+      />,
+    );
+
+    await within(container).findByText('pdf-canvas-mock');
+    const props = captured.pdf.at(-1)!;
+    expect(props.pageLayout).toBe('scroll');
+    expect(props.drawingMode).toBe('rectangle'); // the tool still reaches the pages
   });
 });

package/src/components/resource/annotate-renderers.tsx

@@ -7,10 +7,18 @@ import { SvgDrawingCanvas } from '../image-annotation/SvgDrawingCanvas';
 import { CodeMirrorRenderer } from '../CodeMirrorRenderer';
 import { segmentTextWithAnnotations } from '../../lib/text-segmentation';
 import type { SelectionMotivation, ShapeType } from '../annotation/AnnotateToolbar';
+import { useTranslations } from '../../contexts/TranslationContext';
 
 // Lazy-load the PDF component to avoid SSR issues with browser PDF.js loading.
 // Kept lazy here deliberately: hoisting it to a static import would make it
 // eager again and reintroduce the SSR problem this indirection exists for.
+/** The lazy chunk's fallback needs its own component: a hook cannot run
+ *  inside a `fallback` prop expression. */
+function PdfViewerLoading() {
+  const t = useTranslations('PdfViewer');
+  return <>{t('viewerLoading')}</>;
+}
+
 const PdfAnnotationCanvas = lazy(() =>
   import('../pdf-annotation/PdfAnnotationCanvas.client').then((mod) => ({ default: mod.PdfAnnotationCanvas })),
 );
@@ -127,7 +135,7 @@ export function PdfAnnotateRenderer({
 }: AnnotateMediaRendererProps) {
   if (!content) return null;
   return (
-    <Suspense fallback={<div className="semiont-annotate-view__loading">Loading PDF viewer...</div>}>
+    <Suspense fallback={<div className="semiont-annotate-view__loading"><PdfViewerLoading /></div>}>
       <PdfAnnotationCanvas
         pdfUrl={content}
         resourceUri={resourceUri}
@@ -137,6 +145,7 @@ export function PdfAnnotateRenderer({
         session={session}
         hoveredAnnotationId={hoveredAnnotationId || null}
         hoverDelayMs={hoverDelayMs}
+        pageLayout="scroll"
       />
     </Suspense>
   );

package/src/components/resource/browse-renderers.tsx

@@ -6,8 +6,16 @@ import remarkGfm from 'remark-gfm';
 import type { Annotation } from '@semiont/core';
 import type { SemiontSession } from '@semiont/sdk';
 import { SvgDrawingCanvas } from '../image-annotation/SvgDrawingCanvas';
+import { useTranslations } from '../../contexts/TranslationContext';
 
 // Lazy-load the PDF component to avoid SSR issues with browser PDF.js loading.
+/** The lazy chunk's fallback needs its own component: a hook cannot run
+ *  inside a `fallback` prop expression. */
+function PdfViewerLoading() {
+  const t = useTranslations('PdfViewer');
+  return <>{t('viewerLoading')}</>;
+}
+
 const PdfAnnotationCanvas = lazy(() => import('../pdf-annotation/PdfAnnotationCanvas.client').then(mod => ({ default: mod.PdfAnnotationCanvas })));
 
 /**
@@ -60,7 +68,7 @@ export function ImageBrowseRenderer({ content, resourceUri, annotations, session
 
 export function PdfBrowseRenderer({ content, resourceUri, annotations, session }: MediaRendererProps) {
   return (
-    <Suspense fallback={<div className="semiont-browse-view__loading">Loading PDF viewer...</div>}>
+    <Suspense fallback={<div className="semiont-browse-view__loading"><PdfViewerLoading /></div>}>
       <PdfAnnotationCanvas
         pdfUrl={content}
         resourceUri={resourceUri}
@@ -68,6 +76,7 @@ export function PdfBrowseRenderer({ content, resourceUri, annotations, session }
         drawingMode={null}
         selectedMotivation={null}
         session={session}
+        pageLayout="scroll"
       />
     </Suspense>
   );

package/src/features/auth/auth.css

@@ -316,12 +316,12 @@
 }
 
 .semiont-form__input-row:focus-visible {
-  outline: 2px solid var(--semiont-focus-ring, #3b82f6);
+  outline: 2px solid var(--semiont-focus-ring);
   outline-offset: 2px;
 }
 
 [data-theme="dark"] .semiont-form__input-row:focus-visible {
-  outline-color: var(--semiont-focus-ring, #60a5fa);
+  outline-color: var(--semiont-focus-ring);
 }
 
 .semiont-form__input-row .semiont-input {
@@ -329,12 +329,12 @@
 }
 
 .semiont-form__input-row .semiont-input:focus-visible {
-  outline: 2px solid var(--semiont-focus-ring, #3b82f6);
+  outline: 2px solid var(--semiont-focus-ring);
   outline-offset: 2px;
 }
 
 [data-theme="dark"] .semiont-form__input-row .semiont-input:focus-visible {
-  outline-color: var(--semiont-focus-ring, #60a5fa);
+  outline-color: var(--semiont-focus-ring);
 }
 
 .semiont-form__url-status {
@@ -345,27 +345,27 @@
 }
 
 .semiont-form__url-status--checking {
-  color: var(--semiont-text-muted, #888888);
+  color: var(--semiont-text-tertiary);
   animation: spin 1s linear infinite;
   display: inline-block;
 }
 
 [data-theme="dark"] .semiont-form__url-status--checking {
-  color: var(--semiont-text-muted, #888888);
+  color: var(--semiont-text-tertiary);
 }
 
 .semiont-form__url-status--ok {
-  color: var(--semiont-success, #22c55e);
+  color: var(--semiont-color-success);
 }
 
 [data-theme="dark"] .semiont-form__url-status--ok {
-  color: var(--semiont-success, #22c55e);
+  color: var(--semiont-color-success);
 }
 
 .semiont-form__url-status--error {
-  color: var(--semiont-error, #ef4444);
+  color: var(--semiont-color-error);
 }
 
 [data-theme="dark"] .semiont-form__url-status--error {
-  color: var(--semiont-error, #ef4444);
+  color: var(--semiont-color-error);
 }

package/src/features/resource-viewer/__tests__/ResourceViewerPage.test.tsx

@@ -123,6 +123,15 @@ vi.mock('../../../contexts/ResourceAnnotationsContext', () => ({
   ResourceAnnotationsProvider: ({ children }: any) => children,
 }));
 
+// Capture what ResourceViewerPage passes to useOutcomeToasts. The real hook is a
+// pure event subscription, so standing it in costs the other specs nothing.
+const outcomeToastsCalls = vi.hoisted(() => [] as unknown[]);
+vi.mock('../../../hooks/useOutcomeToasts', () => ({
+  useOutcomeToasts: (resourceId: unknown) => {
+    outcomeToastsCalls.push(resourceId);
+  },
+}));
+
 // Mock useEventSubscription at the direct path used by ResourceViewerPage
 // (the barrel export mock doesn't intercept direct context imports)
 const mockUseEventSubscriptions = vi.fn();
@@ -180,6 +189,23 @@ const renderWithProviders = (ui: React.ReactElement) => {
   );
 };
 
+describe('ResourceViewerPage — outcome toasts reach the user', () => {
+  // The decline/success toast was dropped for EVERY resource:
+  // `useOutcomeToasts(resource.id as string)` read a property
+  // `ResourceDescriptor` does not declare (it carries `@id`). The descriptor's
+  // open index signature made the access legal and the `as string` silenced its
+  // `unknown` type, so the hook's `event.resourceId !== resourceId` guard
+  // compared a real id against `undefined` and returned early every time.
+  it('subscribes with the resource id, not a property the descriptor lacks', () => {
+    outcomeToastsCalls.length = 0;
+    renderWithProviders(<ResourceViewerPage {...createMockProps()} />);
+
+    expect(outcomeToastsCalls).not.toHaveLength(0);
+    // Must be the resource's identity — `undefined` here silences every toast.
+    expect(outcomeToastsCalls[0]).toBe('test-123');
+  });
+});
+
 describe('ResourceViewerPage', () => {
   beforeEach(() => {
   });

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -396,7 +396,7 @@ export function ResourceViewerPage({
   // assist timed-out) live in useOutcomeToasts — they need only the resource id
   // and the toast surface. The registration below keeps the handlers that need
   // page-local dependencies (SDK actions, sparkles, settings, navigation).
-  useOutcomeToasts(resource.id as string);
+  useOutcomeToasts(rUri);
 
   // Single useEventSubscriptions call per file (enforced by
   // scripts/compliance/audit-hooks-ordering.ts); hooks like useOutcomeToasts

package/src/styles/core/inputs.css

@@ -137,7 +137,7 @@
   align-items: center;
   padding: 0.5rem 0.5rem 0.5rem 0.75rem;
   font-size: var(--semiont-text-sm);
-  font-family: var(--semiont-font-mono, monospace);
+  font-family: var(--semiont-font-mono);
   color: var(--semiont-text-tertiary);
   background-color: var(--semiont-color-gray-50);
   border-right: 1px solid var(--semiont-color-gray-300);

package/src/styles/features/compose.css

@@ -118,7 +118,7 @@
    highlight while a drag hovers. */
 .semiont-form__upload-dropzone[data-drag-over="true"] {
   border-color: var(--semiont-color-primary-500);
-  background: var(--semiont-color-primary-50, rgba(59, 130, 246, 0.06));
+  background: var(--semiont-color-primary-50);
 }
 
 /* Dark mode needs its own tint: primary-50 is a near-white wash that would

package/src/styles/features/resource-viewer.css

@@ -324,7 +324,7 @@
 }
 
 [data-theme="dark"] .semiont-browse-view__content tr:nth-child(even) td {
-  background: var(--semiont-color-gray-850, var(--semiont-color-gray-800));
+  background: var(--semiont-color-gray-800);
 }
 
 /* GFM task list checkboxes */

package/src/styles/features/static-pages.css

@@ -412,8 +412,8 @@
 }
 
 .semiont-static-warning-box {
-  background: var(--semiont-color-warning-50);
-  border-left: 4px solid var(--semiont-color-warning-500);
+  background: var(--semiont-color-amber-50);
+  border-left: 4px solid var(--semiont-color-amber-500);
   border-radius: 0.375rem;
   padding: 1rem 1.25rem;
   margin: 1.5rem 0;
@@ -427,7 +427,7 @@
 
 [data-theme="dark"] .semiont-static-warning-box {
   background: rgba(251, 146, 60, 0.1);
-  border-left-color: var(--semiont-color-warning-400);
+  border-left-color: var(--semiont-color-amber-400);
 }
 
 /* ========================================
@@ -447,27 +447,27 @@
 
 .semiont-static-badge-planned {
   background: rgba(251, 146, 60, 0.1);
-  color: var(--semiont-color-warning-700);
-  border: 1px solid var(--semiont-color-warning-200);
+  color: var(--semiont-color-amber-700);
+  border: 1px solid var(--semiont-color-amber-200);
 }
 
 .semiont-static-badge-active {
   background: rgba(34, 197, 94, 0.1);
-  color: var(--semiont-color-success-700);
-  border: 1px solid var(--semiont-color-success-200);
+  color: var(--semiont-color-green-700);
+  border: 1px solid var(--semiont-color-green-200);
 }
 
 /* Dark mode */
 [data-theme="dark"] .semiont-static-badge-planned {
   background: rgba(251, 146, 60, 0.15);
-  color: var(--semiont-color-warning-400);
-  border-color: var(--semiont-color-warning-600);
+  color: var(--semiont-color-amber-400);
+  border-color: var(--semiont-color-amber-600);
 }
 
 [data-theme="dark"] .semiont-static-badge-active {
   background: rgba(34, 197, 94, 0.15);
-  color: var(--semiont-color-success-400);
-  border-color: var(--semiont-color-success-600);
+  color: var(--semiont-color-green-400);
+  border-color: var(--semiont-color-green-600);
 }
 
 /* ========================================

package/src/styles/motivations/motivation-comment.css

@@ -33,8 +33,8 @@
   --semiont-motivation-comment-panel-bg-dark: rgba(55, 65, 81, 0.2);
 
   /* Button gradients */
-  --semiont-motivation-comment-button-bg: linear-gradient(to right, var(--semiont-color-purple-600), var(--semiont-color-indigo-600));
-  --semiont-motivation-comment-button-bg-hover: linear-gradient(to right, var(--semiont-color-purple-700), var(--semiont-color-indigo-700));
+  --semiont-motivation-comment-button-bg: linear-gradient(to right, var(--semiont-color-purple-600), var(--semiont-color-blue-600));
+  --semiont-motivation-comment-button-bg-hover: linear-gradient(to right, var(--semiont-color-purple-700), var(--semiont-color-blue-700));
 }
 
 /* ============================================

package/src/styles/motivations/motivation-reference.css

@@ -14,8 +14,8 @@
   /* Light theme colors */
   --semiont-motivation-reference-primary: var(--semiont-color-cyan-600);
   --semiont-motivation-reference-secondary: var(--semiont-color-blue-600);
-  --semiont-motivation-reference-bg: linear-gradient(to right, var(--semiont-color-cyan-200, #a5f3fc), var(--semiont-color-blue-200));
-  --semiont-motivation-reference-bg-hover: linear-gradient(to right, var(--semiont-color-cyan-300, #67e8f9), var(--semiont-color-blue-300));
+  --semiont-motivation-reference-bg: linear-gradient(to right, var(--semiont-color-cyan-200), var(--semiont-color-blue-200));
+  --semiont-motivation-reference-bg-hover: linear-gradient(to right, var(--semiont-color-cyan-300), var(--semiont-color-blue-300));
   --semiont-motivation-reference-border: rgba(6, 182, 212, 0.3);
   --semiont-motivation-reference-border-hover: rgba(6, 182, 212, 0.5);
   --semiont-motivation-reference-text: var(--semiont-color-gray-900);

package/src/styles/patterns/panels-base.css

@@ -405,12 +405,12 @@
 
 /* Login form pulsing border for first-launch nudge */
 @keyframes semiont-pulse-border {
-  0%, 100% { border-color: var(--semiont-color-primary-300, #93c5fd); }
-  50% { border-color: var(--semiont-color-primary-600, #2563eb); }
+  0%, 100% { border-color: var(--semiont-color-primary-300); }
+  50% { border-color: var(--semiont-color-primary-600); }
 }
 
 .semiont-panel__login-form--pulsing {
-  border: 2px solid var(--semiont-color-primary-400, #60a5fa);
-  border-radius: var(--semiont-panel-border-radius, 0.5rem);
+  border: 2px solid var(--semiont-color-primary-400);
+  border-radius: var(--semiont-panel-border-radius);
   animation: semiont-pulse-border 2s ease-in-out infinite;
 }

package/src/styles/utilities/motion.css

@@ -124,7 +124,7 @@
 .semiont-transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: var(--semiont-duration-base, 150ms);
+  transition-duration: var(--semiont-duration-base);
 }
 
 .semiont-transition-none {
@@ -134,58 +134,58 @@
 .semiont-transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: var(--semiont-duration-base, 150ms);
+  transition-duration: var(--semiont-duration-base);
 }
 
 .semiont-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: var(--semiont-duration-base, 150ms);
+  transition-duration: var(--semiont-duration-base);
 }
 
 .semiont-transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: var(--semiont-duration-base, 150ms);
+  transition-duration: var(--semiont-duration-base);
 }
 
 .semiont-transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: var(--semiont-duration-base, 150ms);
+  transition-duration: var(--semiont-duration-base);
 }
 
 /* Animation classes */
 .semiont-animate-fade-in {
-  animation: fadeIn var(--semiont-duration-base, 150ms) ease-in-out;
+  animation: fadeIn var(--semiont-duration-base) ease-in-out;
 }
 
 .semiont-animate-fade-out {
-  animation: fadeOut var(--semiont-duration-base, 150ms) ease-in-out;
+  animation: fadeOut var(--semiont-duration-base) ease-in-out;
 }
 
 .semiont-animate-slide-in-up {
-  animation: slideInUp var(--semiont-duration-moderate, 300ms) ease-out;
+  animation: slideInUp var(--semiont-duration-base) ease-out;
 }
 
 .semiont-animate-slide-in-down {
-  animation: slideInDown var(--semiont-duration-moderate, 300ms) ease-out;
+  animation: slideInDown var(--semiont-duration-base) ease-out;
 }
 
 .semiont-animate-slide-in-left {
-  animation: slideInLeft var(--semiont-duration-moderate, 300ms) ease-out;
+  animation: slideInLeft var(--semiont-duration-base) ease-out;
 }
 
 .semiont-animate-slide-in-right {
-  animation: slideInRight var(--semiont-duration-moderate, 300ms) ease-out;
+  animation: slideInRight var(--semiont-duration-base) ease-out;
 }
 
 .semiont-animate-scale-in {
-  animation: scaleIn var(--semiont-duration-base, 150ms) ease-out;
+  animation: scaleIn var(--semiont-duration-base) ease-out;
 }
 
 .semiont-animate-scale-out {
-  animation: scaleOut var(--semiont-duration-base, 150ms) ease-in;
+  animation: scaleOut var(--semiont-duration-base) ease-in;
 }
 
 .semiont-animate-spin {
@@ -299,13 +299,13 @@
   .semiont-motion-safe-transition-all {
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: var(--semiont-duration-base, 150ms);
+    transition-duration: var(--semiont-duration-base);
   }
 
   .semiont-motion-safe-transition-transform {
     transition-property: transform;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: var(--semiont-duration-base, 150ms);
+    transition-duration: var(--semiont-duration-base);
   }
 }
 

package/src/styles/variables.css

@@ -177,6 +177,14 @@
   --semiont-bg-tertiary: var(--semiont-color-neutral-100);
   --semiont-bg-inverse: var(--semiont-color-neutral-900);
 
+  /* Borders — the panel/card border every pattern file reaches for. */
+  --semiont-border-primary: var(--semiont-color-neutral-200);
+  --semiont-border-secondary: var(--semiont-color-neutral-100);
+
+  /* Interaction */
+  --semiont-bg-hover: var(--semiont-color-neutral-100);
+  --semiont-focus-ring: var(--semiont-color-blue-500);
+
   /* Text Colors */
   --semiont-text-primary: var(--semiont-color-neutral-900);
   --semiont-text-secondary: var(--semiont-color-neutral-600);
@@ -186,6 +194,8 @@
 
   /* Spacing */
   --semiont-spacing-0: 0;
+  --semiont-panel-gap-xs: 0.25rem;
+  --semiont-text-2xs: 0.625rem;
   --semiont-spacing-xs: 0.25rem;
   --semiont-spacing-sm: 0.5rem;
   --semiont-spacing-md: 1rem;
@@ -322,6 +332,11 @@
     --semiont-text-tertiary: var(--semiont-color-neutral-400);
     --semiont-text-disabled: var(--semiont-color-neutral-600);
     --semiont-text-inverse: var(--semiont-color-neutral-900);
+
+    --semiont-border-primary: var(--semiont-color-neutral-700);
+    --semiont-border-secondary: var(--semiont-color-neutral-800);
+    --semiont-bg-hover: var(--semiont-color-neutral-800);
+    --semiont-focus-ring: var(--semiont-color-blue-400);
   }
 }
 
@@ -337,6 +352,14 @@
   --semiont-text-tertiary: var(--semiont-color-neutral-500);
   --semiont-text-disabled: var(--semiont-color-neutral-400);
   --semiont-text-inverse: var(--semiont-color-neutral-0);
+
+  /* Borders — the panel/card border every pattern file reaches for. */
+  --semiont-border-primary: var(--semiont-color-neutral-200);
+  --semiont-border-secondary: var(--semiont-color-neutral-100);
+
+  /* Interaction */
+  --semiont-bg-hover: var(--semiont-color-neutral-100);
+  --semiont-focus-ring: var(--semiont-color-blue-500);
 }
 
 /* Allow manual dark mode override */
@@ -351,4 +374,9 @@
   --semiont-text-tertiary: var(--semiont-color-neutral-400);
   --semiont-text-disabled: var(--semiont-color-neutral-600);
   --semiont-text-inverse: var(--semiont-color-neutral-900);
-}
+
+  --semiont-border-primary: var(--semiont-color-neutral-700);
+  --semiont-border-secondary: var(--semiont-color-neutral-800);
+  --semiont-bg-hover: var(--semiont-color-neutral-800);
+  --semiont-focus-ring: var(--semiont-color-blue-400);
+}

package/translations/ar.json

@@ -4,6 +4,16 @@
     "paramsTitle": "معاملات الطلب:",
     "processing": "الحالي: {{label}}"
   },
+  "PdfViewer": {
+    "loadFailed": "فشل تحميل ملف PDF",
+    "loading": "جارٍ تحميل PDF...",
+    "next": "التالي",
+    "pageLoadFailed": "فشل تحميل الصفحة",
+    "pageOf": "صفحة {{page}} من {{total}}",
+    "pagination": "ترقيم الصفحات",
+    "previous": "السابق",
+    "viewerLoading": "جارٍ تحميل عارض PDF..."
+  },
   "Toolbar": {
     "annotations": "التعليقات التوضيحية",
     "history": "السجل",

package/translations/bn.json

@@ -4,6 +4,16 @@
     "paramsTitle": "অনুরোধের প্যারামিটার:",
     "processing": "বর্তমান: {{label}}"
   },
+  "PdfViewer": {
+    "loadFailed": "PDF লোড করা যায়নি",
+    "loading": "PDF লোড হচ্ছে...",
+    "next": "পরবর্তী",
+    "pageLoadFailed": "পৃষ্ঠা লোড করা যায়নি",
+    "pageOf": "পৃষ্ঠা {{page}} / {{total}}",
+    "pagination": "পৃষ্ঠা নেভিগেশন",
+    "previous": "পূর্ববর্তী",
+    "viewerLoading": "PDF ভিউয়ার লোড হচ্ছে..."
+  },
   "Toolbar": {
     "annotations": "টীকাসমূহ",
     "history": "ইতিহাস",

package/translations/cs.json

@@ -4,6 +4,16 @@
     "paramsTitle": "Parametry požadavku:",
     "processing": "Aktuální: {{label}}"
   },
+  "PdfViewer": {
+    "loadFailed": "Nepodařilo se načíst PDF",
+    "loading": "Načítání PDF...",
+    "next": "Další",
+    "pageLoadFailed": "Nepodařilo se načíst stránku",
+    "pageOf": "Strana {{page}} z {{total}}",
+    "pagination": "Stránkování",
+    "previous": "Předchozí",
+    "viewerLoading": "Načítání prohlížeče PDF..."
+  },
   "Toolbar": {
     "annotations": "Anotace",
     "history": "Historie",