@bendyline/squisq-editor-react 1.3.0 → 1.5.0

package/src/WysiwygEditor.tsx

@@ -10,7 +10,8 @@
  * and code blocks.
  */
 
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { CSSProperties } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Table from '@tiptap/extension-table';
@@ -19,14 +20,23 @@ import TableCell from '@tiptap/extension-table-cell';
 import TableHeader from '@tiptap/extension-table-header';
 import TaskList from '@tiptap/extension-task-list';
 import TaskItem from '@tiptap/extension-task-item';
+import Link from '@tiptap/extension-link';
 import Placeholder from '@tiptap/extension-placeholder';
+import { resolveFontFamily, FONT_FALLBACKS } from '@bendyline/squisq/schemas';
 import { HeadingWithTemplate } from './TemplateAnnotation';
+import { InlineIcon } from './InlineIcon';
 import { ImageWithMediaProvider } from './ImageNodeView';
+import { TiptapVideo } from './tiptap/TiptapVideo';
+import { TiptapAudio } from './tiptap/TiptapAudio';
+import { TemplateBadgePopover, TEMPLATE_NAMES } from './TemplatePicker';
+import { profileBlockContents, recommendTemplatesForBlock } from '@bendyline/squisq/recommend';
+import { findBlockSliceByHeadingIndex } from './blockSlice';
 import { useEditorContext } from './EditorContext';
 import { buildMentionExtension } from './MentionExtension';
 import { markdownToTiptap, tiptapToMarkdown } from './tiptapBridge';
 import { looksLikeMarkdown } from './detectMarkdown';
 import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
+import { usePreviewSettingsOptional } from './PreviewControls';
 
 // ── Frontmatter helpers ────────────────────────────────────────────
 
@@ -90,10 +100,17 @@ export function WysiwygEditor({
   submitOnEnter,
   readOnly = false,
 }: WysiwygEditorProps) {
-  const { markdownSource, setMarkdownSource, setTiptapEditor, mediaProvider, mentionProvider } =
-    useEditorContext();
+  const {
+    markdownSource,
+    setMarkdownSource,
+    setTiptapEditor,
+    mediaProvider,
+    mentionProvider,
+    blockTagsVisible,
+    themeInheritance,
+  } = useEditorContext();
   // Keep a ref so the mention extension — created once at editor mount —
-  // always sees the latest provider. Swapping projects or gezels changes
+  // always sees the latest provider. Swapping projects changes
   // the provider without remounting the editor.
   const mentionProviderRef = useRef(mentionProvider);
   useEffect(() => {
@@ -136,9 +153,17 @@ export function WysiwygEditor({
       TableHeader,
       TaskList,
       TaskItem.configure({ nested: true }),
+      Link.configure({
+        openOnClick: false,
+        autolink: true,
+        HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' },
+      }),
       ImageWithMediaProvider.configure({ inline: false }),
+      TiptapVideo,
+      TiptapAudio,
       Placeholder.configure({ placeholder: resolvedPlaceholder }),
       buildMentionExtension(() => mentionProviderRef.current),
+      InlineIcon,
     ],
     content: markdownToTiptap(stripFrontmatter(markdownSource).body),
     onUpdate: ({ editor: ed }) => {
@@ -159,6 +184,18 @@ export function WysiwygEditor({
       // normal behavior (Enter = paragraph break, Shift+Enter = soft break).
       handleKeyDown: (view, event) => {
         if (event.key !== 'Enter' || !submitOnEnterRef.current) return false;
+        // Defer Enter to an open mention/suggestion popover so the user
+        // can pick the highlighted candidate. ProseMirror plugins fire
+        // AFTER editorProps.handleKeyDown, so without this short-circuit
+        // plain Enter submits the message and the popover closes
+        // without inserting the mention. The MentionExtension marks
+        // its container with `display: block` while items are showing
+        // and `display: none` when empty — only short-circuit when
+        // there's actually a candidate to pick.
+        const popover = document.querySelector<HTMLElement>('.squisq-mention-popover');
+        if (popover && popover.style.display !== 'none') {
+          return false;
+        }
         if (event.metaKey || event.ctrlKey) {
           // User wants a newline. Insert a hard-break and stop propagation so
           // we don't also create a new paragraph.
@@ -209,10 +246,20 @@ export function WysiwygEditor({
       // entries via a custom MIME type and skip the upload step.
       // Falls through to default handling for non-image drops or when no
       // MediaProvider is available.
-      handleDrop: (view, event, _slice, _moved) => {
+      handleDrop: (view, event, _slice, moved) => {
         const dt = event.dataTransfer;
         if (!dt) return false;
 
+        // Internal node move (the user dragged an existing node within
+        // the document). ProseMirror's `moved` flag is true in this
+        // case; let it handle the reposition natively so width/height
+        // attributes are preserved and the source node is removed.
+        // Without this short-circuit, the browser also exposes the
+        // dragged `<img>` as a virtual file in `dataTransfer`, so the
+        // upload-and-insert path below would fire — producing a
+        // dimension-less duplicate next to the original.
+        if (moved) return false;
+
         // In-app drag from the MediaBin — insert without uploading
         const squisqRaw = dt.getData(SQUISQ_MEDIA_MIME);
         if (squisqRaw) {
@@ -226,7 +273,27 @@ export function WysiwygEditor({
         }
 
         const imageFiles = filesFromDataTransfer(dt);
-        if (imageFiles.length === 0 || !mediaProviderRef.current) return false;
+        if (imageFiles.length === 0) {
+          // Nothing image-like in the drop. Let the browser / ProseMirror
+          // handle it (links, text, etc.). Log enough to debug if the user
+          // expected this to be an image drop — Windows/browser combos
+          // sometimes deliver image drags without a usable File payload.
+          if (dt.files.length > 0 || dt.items.length > 0) {
+            console.warn(
+              '[squisq-editor] Drop received with no recognizable image File. Types:',
+              Array.from(dt.types ?? []),
+              'files:',
+              Array.from(dt.files).map((f) => `${f.name} (${f.type || 'no-type'})`),
+            );
+          }
+          return false;
+        }
+        if (!mediaProviderRef.current) {
+          console.warn(
+            '[squisq-editor] Image drop received but no MediaProvider is wired up; cannot persist the image. Pass `mediaProvider` to EditorShell / EditorProvider.',
+          );
+          return false;
+        }
 
         event.preventDefault();
         moveSelectionToDropPoint(view, event);
@@ -251,6 +318,68 @@ export function WysiwygEditor({
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
 
+  // ── Template badge → popover ─────────────────────────────────────
+  // The HeadingWithTemplate extension renders an inert `.squisq-template-badge`
+  // span inside templated headings. We delegate clicks at the container
+  // level so we can locate the heading position and open the gallery
+  // anchored at that badge.
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [badgeMenu, setBadgeMenu] = useState<{
+    rect: DOMRect;
+    template: string;
+    headingPos: number;
+    headingIndex: number;
+  } | null>(null);
+
+  useEffect(() => {
+    if (!editor) return;
+    const root = containerRef.current;
+    if (!root) return;
+    const onClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+      const badge = target.closest('.squisq-template-badge') as HTMLElement | null;
+      if (!badge || !root.contains(badge)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      // Find the parent heading element and resolve its document position.
+      const headingEl = badge.closest('h1,h2,h3,h4,h5,h6') as HTMLElement | null;
+      if (!headingEl) return;
+      let pos: number | null = null;
+      try {
+        pos = editor.view.posAtDOM(headingEl, 0);
+      } catch {
+        pos = null;
+      }
+      if (pos == null) return;
+      // posAtDOM returns the position *inside* the heading; subtract 1
+      // to land on the heading node itself so setNodeMarkup targets it.
+      const headingPos = Math.max(0, pos - 1);
+      const node = editor.state.doc.nodeAt(headingPos);
+      if (!node || node.type.name !== 'heading') return;
+      // Count how many headings precede this one so the markdown-source
+      // slice helper can locate the matching heading by index.
+      let headingIndex = 0;
+      let count = 0;
+      editor.state.doc.descendants((n, p) => {
+        if (n.type.name !== 'heading') return;
+        if (p === headingPos) {
+          headingIndex = count;
+          return false;
+        }
+        count++;
+      });
+      setBadgeMenu({
+        rect: badge.getBoundingClientRect(),
+        template: (node.attrs.dataTemplate as string | null) ?? '',
+        headingPos,
+        headingIndex,
+      });
+    };
+    root.addEventListener('mousedown', onClick);
+    return () => root.removeEventListener('mousedown', onClick);
+  }, [editor]);
+
   // Sync external changes into Tiptap
   useEffect(() => {
     if (!editor) return;
@@ -266,26 +395,117 @@ export function WysiwygEditor({
     }
   }, [markdownSource, editor]);
 
+  // Match the WYSIWYG editor's appearance to the active Squisq theme
+  // when one is set in frontmatter or picked in the preview dropdown.
+  // Driven by the View menu's "Theme inheritance" setting:
+  //   - 'none'         → don't inherit anything
+  //   - 'fonts'        → body + heading fonts only (historical default)
+  //   - 'fonts-colors' → fonts plus the theme's canvas / text colors
+  // Pushed as CSS custom properties on the container so the stylesheet
+  // can pick them up (with sensible fallbacks for hosts that don't have
+  // a PreviewSettingsProvider in scope).
+  const previewSettings = usePreviewSettingsOptional();
+  const activeTheme = previewSettings?.activeTheme;
+  const themeStyle = useMemo<CSSProperties>(() => {
+    if (themeInheritance === 'none' || !activeTheme) return {};
+    const out: Record<string, string> = {
+      '--squisq-theme-body-font': resolveFontFamily(
+        activeTheme.typography.bodyFont,
+        FONT_FALLBACKS.sans,
+      ),
+      '--squisq-theme-title-font': resolveFontFamily(
+        activeTheme.typography.titleFont,
+        FONT_FALLBACKS.sans,
+      ),
+    };
+    if (themeInheritance === 'fonts-colors') {
+      const colors = activeTheme.colors;
+      out['--squisq-theme-bg'] = colors.background;
+      // backgroundLight gives a subtle on-canvas surface for inline emphasis
+      // (inline `code`, code blocks). Themes always define it.
+      out['--squisq-theme-bg-muted'] = colors.backgroundLight;
+      out['--squisq-theme-text'] = colors.text;
+      out['--squisq-theme-text-muted'] = colors.textMuted;
+      out['--squisq-theme-primary'] = colors.primary;
+    }
+    return out as CSSProperties;
+  }, [activeTheme, themeInheritance]);
+
   return (
     <div
       className={`squisq-wysiwyg-container${className ? ` ${className}` : ''}`}
-      style={{ width: '100%', height: '100%', overflow: 'auto' }}
+      style={{ width: '100%', height: '100%', overflow: 'auto', ...themeStyle }}
       data-testid="wysiwyg-container"
+      data-block-tags={blockTagsVisible ? 'visible' : 'hidden'}
+      data-theme-inheritance={themeInheritance}
+      ref={containerRef}
     >
       <EditorContent editor={editor} style={{ height: '100%' }} />
+      {badgeMenu && (
+        <TemplateBadgePopover
+          anchorRect={badgeMenu.rect}
+          value={badgeMenu.template}
+          recommended={(() => {
+            const slice = findBlockSliceByHeadingIndex(markdownSource, badgeMenu.headingIndex);
+            if (!slice) return undefined;
+            const profile = profileBlockContents(slice);
+            return recommendTemplatesForBlock(profile, TEMPLATE_NAMES).recommended;
+          })()}
+          onChange={(name) => {
+            if (!editor) return;
+            const tr = editor.state.tr.setNodeMarkup(badgeMenu.headingPos, undefined, {
+              ...editor.state.doc.nodeAt(badgeMenu.headingPos)?.attrs,
+              dataTemplate: name === '' ? null : name,
+            });
+            editor.view.dispatch(tr);
+          }}
+          onClose={() => setBadgeMenu(null)}
+        />
+      )}
     </div>
   );
 }
 
 // ── Image drop / paste helpers ─────────────────────────────────────
 
-/** Extract image File objects from a DataTransfer (drop event). */
+/** Extension-based fallback when a dragged file has no `type` set (rare
+ *  but happens when sources omit the MIME — e.g. some screenshot tools). */
+const IMAGE_EXT_RE = /\.(png|jpe?g|gif|webp|bmp|svg|avif|ico)$/i;
+
+function looksLikeImageFile(file: File): boolean {
+  if (file.type.startsWith('image/')) return true;
+  return IMAGE_EXT_RE.test(file.name);
+}
+
+/** Extract image File objects from a DataTransfer (drop event). Reads
+ *  from both `dt.files` and `dt.items`; some drag sources (cross-tab
+ *  drags, certain native apps) populate only one of the two. */
 function filesFromDataTransfer(dt: DataTransfer): File[] {
   const files: File[] = [];
+  const seen = new Set<string>();
+
   for (let i = 0; i < dt.files.length; i++) {
     const file = dt.files[i];
-    if (file.type.startsWith('image/')) files.push(file);
+    if (looksLikeImageFile(file)) {
+      files.push(file);
+      seen.add(`${file.name}|${file.size}`);
+    }
   }
+
+  if (dt.items) {
+    for (let i = 0; i < dt.items.length; i++) {
+      const item = dt.items[i];
+      if (item.kind !== 'file') continue;
+      const file = item.getAsFile();
+      if (!file) continue;
+      if (!looksLikeImageFile(file)) continue;
+      const key = `${file.name}|${file.size}`;
+      if (seen.has(key)) continue;
+      files.push(file);
+      seen.add(key);
+    }
+  }
+
   return files;
 }
 

package/src/__tests__/detectMarkdown.test.ts

@@ -70,19 +70,4 @@ describe('looksLikeMarkdown', () => {
   it('detects markdown with windows line endings', () => {
     expect(looksLikeMarkdown('# Heading\r\n\r\nBody text')).toBe(true);
   });
-
-  it('detects a full resume-style document', () => {
-    const text = `# Mike Ammerlaan
-
-## Projects
-
-Qualla (qualla.com) - Designed and built a map-driven storytelling platform.
-
-## **Experience**
-
-**Principal Product Manager, Minecraft**
-Jan 2021 - Present
-Driving the creator platform.`;
-    expect(looksLikeMarkdown(text)).toBe(true);
-  });
 });

package/src/__tests__/documentSettingsDialog.test.tsx

@@ -0,0 +1,147 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+import { DocumentSettingsDialog } from '../DocumentSettingsDialog';
+
+afterEach(() => cleanup());
+
+function open(source: string, onSave: (next: string) => void) {
+  return render(
+    <DocumentSettingsDialog markdownSource={source} onSave={onSave} onClose={() => {}} />,
+  );
+}
+
+function clickSave() {
+  fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+}
+
+/**
+ * Open the Theme picker popover and click the theme whose row title
+ * matches `name`. The picker is portaled to `document.body`, so the
+ * listbox lives outside the dialog form — testing-library's `screen`
+ * still finds it because it queries the whole document.
+ */
+function pickTheme(name: string) {
+  // Trigger button has aria-label "Theme"
+  fireEvent.click(screen.getByLabelText('Theme'));
+  // Scope the option lookup to the popover — the Transform <select> in
+  // the same dialog also exposes role="option" entries (one of which is
+  // literally "Documentary"), so a global query would collide.
+  const popover = document.getElementById('squisq-theme-picker-popover')!;
+  fireEvent.click(within(popover).getByRole('option', { name }));
+}
+
+describe('DocumentSettingsDialog', () => {
+  it('shows the inferred title as the placeholder when no title in frontmatter', () => {
+    const onSave = vi.fn();
+    open('# My Document\n\nBody.', onSave);
+    const input = screen.getByLabelText('Title') as HTMLInputElement;
+    expect(input.value).toBe('');
+    expect(input.placeholder).toBe('My Document');
+  });
+
+  it('does not write title when input is left empty', () => {
+    const onSave = vi.fn();
+    open('# My Document\n\nBody.', onSave);
+    clickSave();
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).not.toMatch(/^---[\s\S]*title:/);
+  });
+
+  it('does not write title when value matches the inferred title', () => {
+    const onSave = vi.fn();
+    open('# My Document\n\nBody.', onSave);
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'My Document' } });
+    clickSave();
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).not.toMatch(/^---[\s\S]*title:/);
+  });
+
+  it('strips an existing title key when the user clears the input', () => {
+    const onSave = vi.fn();
+    const src = '---\ntitle: Old\n---\n\n# My Document\n';
+    open(src, onSave);
+    const input = screen.getByLabelText('Title') as HTMLInputElement;
+    expect(input.value).toBe('Old');
+    fireEvent.change(input, { target: { value: '' } });
+    clickSave();
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).not.toMatch(/title:/);
+  });
+
+  it('writes a title that differs from the inferred value', () => {
+    const onSave = vi.fn();
+    open('# My Document\n\nBody.', onSave);
+    fireEvent.change(screen.getByLabelText('Title'), {
+      target: { value: 'Custom Title' },
+    });
+    clickSave();
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).toMatch(/^---\ntitle: Custom Title\n---/);
+  });
+
+  it('writes squisq-theme when the user picks a theme', () => {
+    const onSave = vi.fn();
+    open('# Doc\n', onSave);
+    pickTheme('Documentary');
+    clickSave();
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).toContain('squisq-theme: documentary');
+  });
+
+  it('clears the legacy theme key when switching themes', () => {
+    const onSave = vi.fn();
+    const src = '---\ntheme: bold\n---\n\n# Doc\n';
+    open(src, onSave);
+    pickTheme('Documentary');
+    clickSave();
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).toContain('squisq-theme: documentary');
+    expect(next).not.toMatch(/^theme:/m);
+  });
+
+  it('removes squisq-theme when reverting to default', () => {
+    const onSave = vi.fn();
+    const src = '---\nsquisq-theme: documentary\n---\n\n# Doc\n';
+    open(src, onSave);
+    pickTheme('Default');
+    clickSave();
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).not.toContain('squisq-theme');
+  });
+
+  it('writes squisq-transform when a transform is picked', () => {
+    const onSave = vi.fn();
+    open('# Doc\n', onSave);
+    const select = screen.getByLabelText('Transform') as HTMLSelectElement;
+    // Pick any non-empty option from the dropdown
+    const first = Array.from(select.options).find((o) => o.value !== '');
+    if (!first) throw new Error('no transform options available');
+    fireEvent.change(select, { target: { value: first.value } });
+    clickSave();
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).toContain(`squisq-transform: ${first.value}`);
+  });
+
+  it('writes squisq-captions when picked', () => {
+    const onSave = vi.fn();
+    open('# Doc\n', onSave);
+    fireEvent.change(screen.getByLabelText('Captions'), { target: { value: 'social' } });
+    clickSave();
+    const next = onSave.mock.calls[0][0] as string;
+    expect(next).toContain('squisq-captions: social');
+  });
+
+  it('closes when the Cancel button is clicked', () => {
+    const onClose = vi.fn();
+    render(<DocumentSettingsDialog markdownSource="# Doc" onSave={() => {}} onClose={onClose} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('falls back to the H2 when no H1 exists', () => {
+    const onSave = vi.fn();
+    open('## Subtitle\n\nBody.', onSave);
+    const input = screen.getByLabelText('Title') as HTMLInputElement;
+    expect(input.placeholder).toBe('Subtitle');
+  });
+});

package/src/__tests__/emojiPicker.test.tsx

@@ -0,0 +1,133 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { EmojiPicker } from '../EmojiPicker';
+import {
+  EMOJI_CATEGORIES,
+  ALL_EMOJIS,
+  searchEmojis,
+  PICKER_CATEGORIES,
+  ALL_PICKER_ENTRIES,
+  searchPickerEntries,
+} from '../emojiData';
+
+describe('emojiData — legacy emoji exports', () => {
+  it('exposes the standard CLDR category buckets', () => {
+    const ids = EMOJI_CATEGORIES.map((c) => c.id);
+    expect(ids).toEqual([
+      'smileys',
+      'people',
+      'nature',
+      'food',
+      'travel',
+      'activities',
+      'objects',
+      'symbols',
+      'flags',
+    ]);
+  });
+
+  it('each entry has a non-empty char and name', () => {
+    for (const entry of ALL_EMOJIS) {
+      expect(entry.char.length).toBeGreaterThan(0);
+      expect(entry.name.length).toBeGreaterThan(0);
+    }
+  });
+
+  it('searchEmojis matches by name (case-insensitive)', () => {
+    const results = searchEmojis('HEART');
+    expect(results.some((e) => e.char === '❤️')).toBe(true);
+  });
+});
+
+describe('emojiData — unified picker entries', () => {
+  it('appends FA Brands, Solid, and Regular categories after the emoji buckets', () => {
+    const ids = PICKER_CATEGORIES.map((c) => c.id);
+    expect(ids).toContain('fa-brands');
+    expect(ids).toContain('fa-solid');
+    expect(ids).toContain('fa-regular');
+    // Order matters — emoji first, FA after.
+    expect(ids.indexOf('smileys')).toBeLessThan(ids.indexOf('fa-brands'));
+  });
+
+  it('FA categories carry icon-kind entries', () => {
+    const brands = PICKER_CATEGORIES.find((c) => c.id === 'fa-brands')!;
+    expect(brands.entries.length).toBeGreaterThan(0);
+    const github = brands.entries.find((e) => e.kind === 'icon' && e.name === 'github');
+    expect(github).toBeDefined();
+    expect(github!.kind).toBe('icon');
+  });
+
+  it('searchPickerEntries matches across emoji and icons', () => {
+    const emojiHit = searchPickerEntries('heart').find((e) => e.kind === 'emoji');
+    const iconHit = searchPickerEntries('github').find((e) => e.kind === 'icon');
+    expect(emojiHit).toBeDefined();
+    expect(iconHit).toBeDefined();
+  });
+
+  it('ALL_PICKER_ENTRIES is the concat of all categories', () => {
+    const sum = PICKER_CATEGORIES.reduce((acc, c) => acc + c.entries.length, 0);
+    expect(ALL_PICKER_ENTRIES.length).toBe(sum);
+  });
+});
+
+describe('EmojiPicker', () => {
+  it('does not render when closed', () => {
+    render(<EmojiPicker open={false} onSelect={() => {}} onClose={() => {}} />);
+    expect(screen.queryByTestId('emoji-picker')).toBeNull();
+  });
+
+  it('renders all emoji + FA tabs when open', () => {
+    render(<EmojiPicker open onSelect={() => {}} onClose={() => {}} />);
+    for (const cat of EMOJI_CATEGORIES) {
+      expect(screen.getByRole('tab', { name: cat.label })).toBeTruthy();
+    }
+    expect(screen.getByRole('tab', { name: 'Brands' })).toBeTruthy();
+    expect(screen.getByRole('tab', { name: 'Solid' })).toBeTruthy();
+    expect(screen.getByRole('tab', { name: 'Regular' })).toBeTruthy();
+  });
+
+  it('fires onSelect with an emoji PickerEntry when an emoji tile is clicked', () => {
+    const onSelect = vi.fn();
+    render(<EmojiPicker open onSelect={onSelect} onClose={() => {}} />);
+    fireEvent.click(screen.getByRole('button', { name: 'grinning' }));
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ kind: 'emoji', char: '😀' }));
+  });
+
+  it('fires onSelect with an icon PickerEntry when an FA tile is clicked', () => {
+    const onSelect = vi.fn();
+    render(<EmojiPicker open onSelect={onSelect} onClose={() => {}} />);
+    fireEvent.click(screen.getByRole('tab', { name: 'Brands' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Github' }));
+    expect(onSelect).toHaveBeenCalledWith(
+      expect.objectContaining({ kind: 'icon', family: 'brands', name: 'github' }),
+    );
+  });
+
+  it('switches categories when a tab is clicked', () => {
+    render(<EmojiPicker open onSelect={() => {}} onClose={() => {}} />);
+    fireEvent.click(screen.getByRole('tab', { name: 'Nature' }));
+    expect(screen.getByRole('button', { name: 'dog face' })).toBeTruthy();
+  });
+
+  it('shows search results across emoji + icons and hides the tabs', () => {
+    render(<EmojiPicker open onSelect={() => {}} onClose={() => {}} />);
+    const search = screen.getByLabelText('Search emoji & icons') as HTMLInputElement;
+    fireEvent.change(search, { target: { value: 'github' } });
+    expect(screen.getByRole('button', { name: 'Github' })).toBeTruthy();
+    expect(screen.queryByRole('tab', { name: 'Smileys' })).toBeNull();
+  });
+
+  it('shows a no-matches state when search returns nothing', () => {
+    render(<EmojiPicker open onSelect={() => {}} onClose={() => {}} />);
+    const search = screen.getByLabelText('Search emoji & icons') as HTMLInputElement;
+    fireEvent.change(search, { target: { value: 'thisdoesnotexist' } });
+    expect(screen.getByText(/No matches for/i)).toBeTruthy();
+  });
+
+  it('fires onClose on Escape', () => {
+    const onClose = vi.fn();
+    render(<EmojiPicker open onSelect={() => {}} onClose={onClose} />);
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalled();
+  });
+});

package/src/__tests__/fileKind.test.ts

@@ -93,4 +93,20 @@ describe('resolveFileKind', () => {
   it('accepts a language with no fileName', () => {
     expect(resolveFileKind(undefined, 'rust')).toEqual({ mode: 'code', language: 'rust' });
   });
+
+  it('returns image mode for raster image extensions', () => {
+    expect(resolveFileKind('foo.png')).toEqual({ mode: 'image', language: 'image' });
+    expect(resolveFileKind('photo.JPEG')).toEqual({ mode: 'image', language: 'image' });
+    expect(resolveFileKind('anim.gif')).toEqual({ mode: 'image', language: 'image' });
+    expect(resolveFileKind('hero.webp')).toEqual({ mode: 'image', language: 'image' });
+    expect(resolveFileKind('icon.avif')).toEqual({ mode: 'image', language: 'image' });
+  });
+
+  it('keeps SVG as code mode (xml) so the source stays editable', () => {
+    expect(resolveFileKind('logo.svg')).toEqual({ mode: 'code', language: 'xml' });
+  });
+
+  it('respects an explicit language=image override', () => {
+    expect(resolveFileKind(undefined, 'image')).toEqual({ mode: 'image', language: 'image' });
+  });
 });