@semiont/react-ui 0.5.9 → 0.5.11

package/src/components/StatusDisplay.css

@@ -209,6 +209,42 @@
   font-size: var(--semiont-font-size-xs);
 }
 
+/* Editing affordances (RESOURCE-TAGS-INLINE-EDITING) */
+.semiont-resource-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font-size: var(--semiont-font-size-xs);
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.semiont-resource-tag__remove:hover:not(:disabled) {
+  opacity: 1;
+}
+
+.semiont-resource-tag__remove:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.semiont-resource-tag--add {
+  cursor: pointer;
+  background: none;
+}
+
+.semiont-resource-tag--add:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.semiont-resource-tags-inline--editing .semiont-form__entity-type-buttons {
+  margin-top: var(--semiont-spacing-xs);
+}
+
 /* Dark mode for ResourceTagsInline - Fixed to respect data-theme attribute */
 [data-theme="dark"] .semiont-resource-tags-inline {
   border-top-color: var(--semiont-color-neutral-700);

package/src/components/__tests__/AnnotateReferencesProgressWidget.test.tsx

@@ -7,76 +7,56 @@ import type { components } from '@semiont/core';
 
 type JobProgress = components['schemas']['JobProgress'];
 
+// The widget no longer reads translations internally — the caller supplies the
+// copy + cancel job type. These are the annotation-flow values for these tests.
+const tr = {
+  title: 'Annotating',
+  cancel: 'Cancel',
+  inProgress: 'In progress',
+  complete: 'Complete',
+  failed: 'Failed',
+  found: (count: number) => `Found ${count}`,
+  current: (entityType: string) => `Current ${entityType}`,
+};
+
+function renderWidget(progress: JobProgress | null, opts?: { returnEventBus?: boolean }) {
+  return renderWithProviders(
+    <AnnotateReferencesProgressWidget progress={progress} cancelJobType="annotation" translations={tr} />,
+    opts,
+  );
+}
+
 describe('AnnotateReferencesProgressWidget', () => {
   it('returns null when progress is null', () => {
-    const { container } = renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={null} />
-    );
-
+    const { container } = renderWidget(null);
     expect(container.firstChild).toBeNull();
   });
 
   it('renders progress with stage message', () => {
-    const progress: JobProgress = {
-      stage: 'in-progress',
-      percentage: 50,
-      message: 'Processing entities...',
-    };
-
-    renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
+    const progress: JobProgress = { stage: 'in-progress', percentage: 50, message: 'Processing entities...' };
+    renderWidget(progress);
     expect(screen.getByText('Processing entities...')).toBeInTheDocument();
   });
 
   it('shows cancel button when not complete', () => {
-    const progress: JobProgress = {
-      stage: 'in-progress',
-      percentage: 30,
-      message: 'Working...',
-    };
-
-    renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
-    const cancelButton = screen.getByTitle('ReferencesPanel.cancelAnnotation');
-    expect(cancelButton).toBeInTheDocument();
+    const progress: JobProgress = { stage: 'in-progress', percentage: 30, message: 'Working...' };
+    renderWidget(progress);
+    expect(screen.getByTitle('Cancel')).toBeInTheDocument();
   });
 
   it('hides cancel button when complete', () => {
-    const progress: JobProgress = {
-      stage: 'complete',
-      percentage: 100,
-      message: '',
-    };
-
-    renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
-    expect(screen.queryByTitle('ReferencesPanel.cancelAnnotation')).not.toBeInTheDocument();
+    const progress: JobProgress = { stage: 'complete', percentage: 100, message: '' };
+    renderWidget(progress);
+    expect(screen.queryByTitle('Cancel')).not.toBeInTheDocument();
   });
 
   it('emits job:cancel-requested on cancel click', () => {
     const handler = vi.fn();
-    const progress: JobProgress = {
-      stage: 'in-progress',
-      percentage: 40,
-      message: 'Working...',
-    };
-
-    const { eventBus } = renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />,
-      { returnEventBus: true }
-    );
+    const progress: JobProgress = { stage: 'in-progress', percentage: 40, message: 'Working...' };
+    const { eventBus } = renderWidget(progress, { returnEventBus: true });
 
     const subscription = eventBus!.get('job:cancel-requested').subscribe(handler);
-
-    const cancelButton = screen.getByTitle('ReferencesPanel.cancelAnnotation');
-    fireEvent.click(cancelButton);
-
+    fireEvent.click(screen.getByTitle('Cancel'));
     expect(handler).toHaveBeenCalledWith({ jobType: 'annotation' });
 
     subscription.unsubscribe();
@@ -92,60 +72,30 @@ describe('AnnotateReferencesProgressWidget', () => {
         { entityType: 'Organization', foundCount: 3 },
       ],
     };
-
-    renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
+    renderWidget(progress);
     expect(screen.getByText('Person:')).toBeInTheDocument();
     expect(screen.getByText('Organization:')).toBeInTheDocument();
-    // Translation mock returns "ReferencesPanel.found" for each entity type
-    const foundLabels = screen.getAllByText('ReferencesPanel.found');
-    expect(foundLabels).toHaveLength(2);
+    expect(screen.getByText('Found 5')).toBeInTheDocument();
+    expect(screen.getByText('Found 3')).toBeInTheDocument();
   });
 
   it('shows complete icon for complete stage', () => {
-    const progress: JobProgress = {
-      stage: 'complete',
-      percentage: 100,
-      message: '',
-    };
-
-    const { container } = renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
+    const progress: JobProgress = { stage: 'complete', percentage: 100, message: '' };
+    const { container } = renderWidget(progress);
     expect(container.querySelector('[data-status="complete"]')).toBeInTheDocument();
-    expect(screen.getByText('ReferencesPanel.complete')).toBeInTheDocument();
+    expect(screen.getByText('Complete')).toBeInTheDocument();
   });
 
   it('shows error message for error stage', () => {
-    const progress: JobProgress = {
-      stage: 'error',
-      percentage: 0,
-      message: 'Something went wrong',
-    };
-
-    const { container } = renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
+    const progress: JobProgress = { stage: 'error', percentage: 0, message: 'Something went wrong' };
+    const { container } = renderWidget(progress);
     expect(container.querySelector('[data-status="error"]')).toBeInTheDocument();
     expect(screen.getByText('Something went wrong')).toBeInTheDocument();
   });
 
   it('shows current entity type processing details', () => {
-    const progress: JobProgress = {
-      stage: 'in-progress',
-      percentage: 50,
-      message: '',
-      currentEntityType: 'Location',
-    };
-
-    renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
+    const progress: JobProgress = { stage: 'in-progress', percentage: 50, message: '', currentEntityType: 'Location' };
+    renderWidget(progress);
     expect(screen.getByText(/Processing: Location/)).toBeInTheDocument();
   });
 });

package/src/components/__tests__/ResourceTagsInline.test.tsx

@@ -1,9 +1,9 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { ResourceTagsInline } from '../ResourceTagsInline';
 
 describe('ResourceTagsInline', () => {
-  const mockOnUpdate = vi.fn();
+  const mockOnUpdate = vi.fn(async () => {});
   const defaultProps = {
     resourceId: 'doc-123',
     tags: ['tag1', 'tag2', 'tag3'],
@@ -11,6 +11,11 @@ describe('ResourceTagsInline', () => {
     onUpdate: mockOnUpdate,
   };
 
+  beforeEach(() => {
+    mockOnUpdate.mockClear();
+    mockOnUpdate.mockImplementation(async () => {});
+  });
+
   describe('Rendering', () => {
     it('should render tags', () => {
       render(<ResourceTagsInline {...defaultProps} />);
@@ -177,4 +182,97 @@ describe('ResourceTagsInline', () => {
       expect(container.firstChild).toBeNull();
     });
   });
+
+  // ── RESOURCE-TAGS-INLINE-EDITING: the declared contract, implemented ──
+
+  describe('Editing mode', () => {
+    it('browse mode renders no editing affordances (pins today’s rendering)', () => {
+      const { container } = render(
+        <ResourceTagsInline {...defaultProps} isEditing={false} vocabulary={['Person']} />,
+      );
+      expect(container.querySelector('button')).toBeNull();
+    });
+
+    it('renders the editor for EMPTY tags while editing (the primary tagging case)', () => {
+      const { container } = render(
+        <ResourceTagsInline {...defaultProps} tags={[]} isEditing={true} vocabulary={['Person']} />,
+      );
+      // No null short-circuit in edit mode: the strip renders with an add affordance.
+      expect(container.firstChild).not.toBeNull();
+      expect(screen.getByLabelText('Add tag')).toBeInTheDocument();
+    });
+
+    it('removing a tag commits ONCE with the full new set', async () => {
+      render(<ResourceTagsInline {...defaultProps} isEditing={true} />);
+      fireEvent.click(screen.getByLabelText('Remove tag2'));
+      await waitFor(() => expect(mockOnUpdate).toHaveBeenCalledTimes(1));
+      expect(mockOnUpdate).toHaveBeenCalledWith(['tag1', 'tag3']);
+    });
+
+    it('disabled renders the editor inert', () => {
+      render(
+        <ResourceTagsInline {...defaultProps} isEditing={true} disabled={true} vocabulary={['Person']} />,
+      );
+      fireEvent.click(screen.getByLabelText('Remove tag1'));
+      expect(mockOnUpdate).not.toHaveBeenCalled();
+      expect(screen.getByLabelText('Remove tag1')).toBeDisabled();
+      expect(screen.getByLabelText('Add tag')).toBeDisabled();
+    });
+
+    it('an in-flight onUpdate blocks a second commit', async () => {
+      let resolveUpdate!: () => void;
+      mockOnUpdate.mockImplementation(() => new Promise<void>((r) => { resolveUpdate = r; }));
+      render(<ResourceTagsInline {...defaultProps} isEditing={true} />);
+
+      fireEvent.click(screen.getByLabelText('Remove tag1'));
+      fireEvent.click(screen.getByLabelText('Remove tag2')); // while pending — must not fire
+      expect(mockOnUpdate).toHaveBeenCalledTimes(1);
+
+      resolveUpdate();
+      await waitFor(() => expect(screen.getByLabelText('Remove tag2')).not.toBeDisabled());
+      fireEvent.click(screen.getByLabelText('Remove tag2')); // settled — fires again
+      expect(mockOnUpdate).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('Vocabulary (controlled — adds are a picker, never free text)', () => {
+    it('the add affordance offers ONLY vocabulary entries minus already-applied tags', () => {
+      render(
+        <ResourceTagsInline {...defaultProps} tags={['Person']} isEditing={true}
+          vocabulary={['Person', 'Place', 'Topic']} />,
+      );
+      fireEvent.click(screen.getByLabelText('Add tag'));
+      expect(screen.getByRole('button', { name: 'Place' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Topic' })).toBeInTheDocument();
+      // Already applied → not a candidate (the chip renders as text, not a candidate button)
+      expect(screen.queryByRole('button', { name: 'Person' })).not.toBeInTheDocument();
+    });
+
+    it('picking a candidate commits the full set including the added tag', async () => {
+      render(
+        <ResourceTagsInline {...defaultProps} tags={['Person']} isEditing={true}
+          vocabulary={['Person', 'Place']} />,
+      );
+      fireEvent.click(screen.getByLabelText('Add tag'));
+      fireEvent.click(screen.getByRole('button', { name: 'Place' }));
+      await waitFor(() => expect(mockOnUpdate).toHaveBeenCalledTimes(1));
+      expect(mockOnUpdate).toHaveBeenCalledWith(['Person', 'Place']);
+    });
+
+    it('without a vocabulary the editor is REMOVAL-ONLY (no add affordance)', () => {
+      render(<ResourceTagsInline {...defaultProps} isEditing={true} />);
+      expect(screen.queryByLabelText('Add tag')).not.toBeInTheDocument();
+      expect(screen.getByLabelText('Remove tag1')).toBeInTheDocument();
+    });
+
+    it('removal is never vocabulary-gated — a stale tag not in the vocabulary is removable', async () => {
+      render(
+        <ResourceTagsInline {...defaultProps} tags={['LegacyType', 'Person']} isEditing={true}
+          vocabulary={['Person']} />,
+      );
+      fireEvent.click(screen.getByLabelText('Remove LegacyType'));
+      await waitFor(() => expect(mockOnUpdate).toHaveBeenCalledTimes(1));
+      expect(mockOnUpdate).toHaveBeenCalledWith(['Person']);
+    });
+  });
 });

package/src/components/annotation/AnnotateToolbar.tsx

@@ -2,8 +2,6 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { useTranslations } from '../../contexts/TranslationContext';
-import { useSemiont } from '../../session/SemiontProvider';
-import { useObservable } from '../../hooks/useObservable';
 import { getSupportedShapes } from '../../lib/media-shapes';
 import type { Annotator } from '../../lib/annotation-registry';
 import './annotations.css';
@@ -14,12 +12,13 @@ export type SelectionMotivation = 'linking' | 'highlighting' | 'assessing' | 'co
 export type ClickAction = 'detail' | 'follow' | 'jsonld' | 'deleting';
 export type ShapeType = 'rectangle' | 'circle' | 'polygon';
 
+/** The bar's composable controls, in fixed render order. */
+export type ToolbarPart = 'clickAction' | 'mode' | 'selection' | 'shape';
+
 interface AnnotateToolbarProps {
   selectedMotivation: SelectionMotivation | null;
   selectedClick: ClickAction;
-  showSelectionGroup?: boolean;
   showDeleteButton?: boolean;
-  showShapeGroup?: boolean;
   selectedShape?: ShapeType;
   mediaType?: string | null;  // MIME type to determine supported shapes
 
@@ -28,6 +27,26 @@ interface AnnotateToolbarProps {
 
   // Annotators for emoji lookup
   annotators: Record<string, Annotator>;
+
+  /**
+   * Which controls to render (composition over CSS hiding). Default: all four.
+   * Order is fixed (click, mode, selection, shape); shape stays media-gated.
+   */
+  parts?: ToolbarPart[];
+
+  /**
+   * Purely presentational: each control reports the chosen value via its
+   * callback; the owner (viewer instance or host) applies it. The bar holds no
+   * pref state, emits no bus events, and touches no storage.
+   */
+  onModeChange?: (mode: boolean) => void;
+  onClickActionChange?: (action: ClickAction) => void;
+  onSelectionChange?: (motivation: SelectionMotivation | null) => void;
+  onShapeChange?: (shape: ShapeType) => void;
+
+  // Compact display form (display-only): icon-only, tight, chromeless — for inline
+  // embeds. The bar's functionality is identical; only its form changes.
+  compact?: boolean;
 }
 
 interface DropdownGroupProps {
@@ -101,26 +120,26 @@ function DropdownGroup({
 }
 
 /**
- * Toolbar for annotation controls with mode, selection, click, and shape options
- *
- * @emits mark:selection-changed - Selection motivation changed. Payload: { motivation: SelectionMotivation | null }
- * @emits mark:click-changed - Click action mode changed. Payload: { action: ClickAction }
- * @emits mark:shape-changed - Drawing shape changed. Payload: { shape: ShapeType }
- * @emits mark:mode-toggled - View mode toggled between browse and annotate. Payload: undefined
+ * Toolbar for annotation controls with mode, selection, click, and shape options.
+ * Purely presentational (TOOLBAR-PREFS-AS-PROPS): renders the given values for the
+ * given `parts` and reports choices via the on*Change callbacks — no bus, no storage.
  */
 export function AnnotateToolbar({
   selectedMotivation,
   selectedClick,
-  showSelectionGroup = true,
   showDeleteButton = true,
-  showShapeGroup = false,
   selectedShape = 'rectangle',
   mediaType,
   annotateMode = false,
-  annotators
+  annotators,
+  parts = ['clickAction', 'mode', 'selection', 'shape'],
+  onModeChange,
+  onClickActionChange,
+  onSelectionChange,
+  onShapeChange,
+  compact = false,
 }: AnnotateToolbarProps) {
   const t = useTranslations('AnnotateToolbar');
-  const session = useObservable(useSemiont().activeSession$);
 
   // Helper to get emoji from annotators by motivation (with fallback for safety)
   const getMotivationEmoji = (motivation: SelectionMotivation): string => {
@@ -188,32 +207,28 @@ export function AnnotateToolbar({
 
   const handleSelectionClick = (motivation: SelectionMotivation | null) => {
     // If null is clicked, always deselect. Otherwise toggle.
-    if (motivation === null) {
-      session?.client.mark.changeSelection(null);
-    } else {
-      session?.client.mark.changeSelection(selectedMotivation === motivation ? null : motivation);
-    }
+    onSelectionChange?.(motivation === null ? null : (selectedMotivation === motivation ? null : motivation));
     // Close dropdown after selection
     setSelectionPinned(false);
     setSelectionHovered(false);
   };
 
   const handleClickClick = (action: ClickAction) => {
-    session?.client.mark.changeClick(action);
+    onClickActionChange?.(action);
     // Close dropdown after selection
     setClickPinned(false);
     setClickHovered(false);
   };
 
   const handleShapeClick = (shape: ShapeType) => {
-    session?.client.mark.changeShape(shape);
+    onShapeChange?.(shape);
     // Close dropdown after selection
     setShapePinned(false);
     setShapeHovered(false);
   };
 
   const handleModeToggle = () => {
-    session?.client.mark.toggleMode();
+    onModeChange?.(!annotateMode);
     setModePinned(false);
     setModeHovered(false);
   };
@@ -288,9 +303,16 @@ export function AnnotateToolbar({
   const supportedShapes = getSupportedShapes(mediaType);
   const shapeTypes = allShapeTypes.filter(st => supportedShapes.includes(st.shape));
 
+  // Part gates (fixed order: click, mode, selection, shape); shape stays media-gated.
+  const showClick = parts.includes('clickAction');
+  const showMode = parts.includes('mode');
+  const showSelection = parts.includes('selection');
+  const showShape = parts.includes('shape') && shapeTypes.length > 0;
+
   return (
-    <div className="semiont-annotate-toolbar">
+    <div className={`semiont-annotate-toolbar${compact ? ' semiont-annotate-toolbar--compact' : ''}`}>
       {/* Click Group */}
+      {showClick && (
       <DropdownGroup
         label={t('clickGroup')}
         isExpanded={clickExpanded}
@@ -320,11 +342,13 @@ export function AnnotateToolbar({
           </>
         }
       />
+      )}
 
       {/* Separator */}
-      <div className="semiont-toolbar-separator" />
+      {showMode && showClick && <div className="semiont-toolbar-separator" />}
 
       {/* Mode Group */}
+      {showMode && (
       <DropdownGroup
         label={t('modeGroup')}
         isExpanded={modeExpanded}
@@ -346,12 +370,13 @@ export function AnnotateToolbar({
           </>
         }
       />
+      )}
 
       {/* Separator */}
-      {showSelectionGroup && <div className="semiont-toolbar-separator" />}
+      {showSelection && (showClick || showMode) && <div className="semiont-toolbar-separator" />}
 
       {/* Selection Group */}
-      {showSelectionGroup && (
+      {showSelection && (
         <DropdownGroup
           label={t('selectionGroup')}
           isExpanded={selectionExpanded}
@@ -394,10 +419,10 @@ export function AnnotateToolbar({
       )}
 
       {/* Separator */}
-      {showShapeGroup && <div className="semiont-toolbar-separator" />}
+      {showShape && (showClick || showMode || showSelection) && <div className="semiont-toolbar-separator" />}
 
       {/* Shape Group */}
-      {showShapeGroup && shapeTypes.length > 0 && (
+      {showShape && (
         <DropdownGroup
           label={t('shapeGroup')}
           isExpanded={shapeExpanded}

package/src/components/annotation/__tests__/AnnotateToolbar.display.test.tsx

@@ -0,0 +1,76 @@
+/**
+ * EMBEDDABLE-VIEWER-COMPLETION Phase 3 — Annotate Bar display forms.
+ *
+ * Behavior is mostly fixed (the bar IS the annotation capability); the host
+ * gets freedom over its display form. `compact` is a display-only variant:
+ * icon-only, tight, chromeless — the functional groups stay present and wired.
+ * BrowseView's `inline` embed shows the compact bar automatically. Theming
+ * (semiont-* classes + CSS vars) and labels (i18n) already exist — no new API
+ * for those.
+ *
+ * Started RED (no `compact` prop) and GREEN once Phase 3 lands.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import type { SemiontSession } from '@semiont/sdk';
+import { AnnotateToolbar } from '../AnnotateToolbar';
+import { ANNOTATORS } from '../../../lib/annotation-registry';
+import { BrowseView } from '../../resource/BrowseView';
+
+vi.mock('react-markdown', () => ({ default: ({ children }: { children: string }) => <div>{children}</div> }));
+vi.mock('remark-gfm', () => ({ default: () => ({}) }));
+
+const emptyAnnotations = { highlights: [], references: [], assessments: [], comments: [], tags: [] };
+
+function fakeSession(): SemiontSession {
+  return {
+    client: { browse: { click: vi.fn() }, beckon: { hover: vi.fn() } },
+    subscribe: () => () => {},
+  } as unknown as SemiontSession;
+}
+
+const toolbarProps = {
+  selectedMotivation: null,
+  selectedClick: 'detail' as const,
+  annotateMode: false,
+  annotators: ANNOTATORS,
+  session: null,
+};
+
+describe('Annotate Bar display forms (Phase 3)', () => {
+  it('`compact` adds the display modifier; default does not', () => {
+    const { container: normal } = render(<AnnotateToolbar {...toolbarProps} />);
+    expect(normal.querySelector('.semiont-annotate-toolbar')).not.toHaveClass('semiont-annotate-toolbar--compact');
+
+    const { container } = render(<AnnotateToolbar {...toolbarProps} compact />);
+    expect(container.querySelector('.semiont-annotate-toolbar')).toHaveClass('semiont-annotate-toolbar--compact');
+  });
+
+  it('compact is display-only: the functional groups are still present', () => {
+    render(<AnnotateToolbar {...toolbarProps} compact />);
+    // Groups render with their aria labels (default-English translations, no provider).
+    expect(screen.getByLabelText(/mode/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/click/i)).toBeInTheDocument();
+  });
+
+  it('BrowseView inline embeds show the compact bar automatically', () => {
+    const props = {
+      content: 'x', mimeType: 'text/plain', resourceUri: 'res-1',
+      annotations: emptyAnnotations, annotateMode: false, session: fakeSession(),
+    };
+    const { container: pane } = render(<BrowseView {...props} />);
+    expect(pane.querySelector('.semiont-annotate-toolbar')).not.toHaveClass('semiont-annotate-toolbar--compact');
+
+    const { container } = render(<BrowseView {...props} inline />);
+    expect(container.querySelector('.semiont-annotate-toolbar')).toHaveClass('semiont-annotate-toolbar--compact');
+  });
+
+  it('stylesheet carries the compact form (static gate — icon-only, chromeless)', () => {
+    const css = readFileSync(resolve(process.cwd(), 'src/components/toolbar/Toolbar.css'), 'utf8');
+    expect(css).toMatch(/\.semiont-annotate-toolbar--compact\s*\{/);
+    expect(css).toMatch(/\.semiont-annotate-toolbar--compact\s+\.semiont-dropdown-label\s*\{[^}]*display:\s*none/);
+  });
+});