@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/editorScrollSync.ts

@@ -0,0 +1,73 @@
+/**
+ * Scroll-position handoff between the WYSIWYG and source editors.
+ *
+ * The two surfaces render the same document at very different heights, so a
+ * normalized position is a better shared currency than raw pixels. Keeping
+ * these adapters separate from EditorContext also makes the DOM/Monaco math
+ * independently testable.
+ */
+
+interface MonacoScrollEditor {
+  getScrollTop(): number;
+  getScrollHeight(): number;
+  getLayoutInfo(): { height: number };
+  setScrollTop(scrollTop: number): void;
+}
+
+interface WysiwygScrollEditor {
+  view: { dom: Element };
+}
+
+function clampRatio(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.min(1, Math.max(0, value));
+}
+
+export function scrollRatio(
+  scrollTop: number,
+  scrollHeight: number,
+  viewportHeight: number,
+): number {
+  const availableScroll = scrollHeight - viewportHeight;
+  if (availableScroll <= 0) return 0;
+  return clampRatio(scrollTop / availableScroll);
+}
+
+export function scrollTopForRatio(
+  ratio: number,
+  scrollHeight: number,
+  viewportHeight: number,
+): number {
+  return clampRatio(ratio) * Math.max(0, scrollHeight - viewportHeight);
+}
+
+export function readMonacoScrollRatio(editor: MonacoScrollEditor): number {
+  return scrollRatio(
+    editor.getScrollTop(),
+    editor.getScrollHeight(),
+    editor.getLayoutInfo().height,
+  );
+}
+
+export function restoreMonacoScrollRatio(editor: MonacoScrollEditor, ratio: number): void {
+  editor.setScrollTop(
+    scrollTopForRatio(ratio, editor.getScrollHeight(), editor.getLayoutInfo().height),
+  );
+}
+
+function findWysiwygScrollElement(editor: WysiwygScrollEditor): HTMLElement | null {
+  return editor.view.dom.closest<HTMLElement>('.squisq-wysiwyg-container');
+}
+
+export function readWysiwygScrollRatio(editor: WysiwygScrollEditor): number | null {
+  const element = findWysiwygScrollElement(editor);
+  if (!element) return null;
+  return scrollRatio(element.scrollTop, element.scrollHeight, element.clientHeight);
+}
+
+export function restoreWysiwygScrollRatio(editor: WysiwygScrollEditor, ratio: number): boolean {
+  const element = findWysiwygScrollElement(editor);
+  if (!element) return false;
+  element.scrollTop = scrollTopForRatio(ratio, element.scrollHeight, element.clientHeight);
+  return true;
+}

package/src/emojiData.ts

@@ -13,7 +13,7 @@
  * lookup; the user can paste anything we don't have.
  */
 
-export interface EmojiEntry {
+interface EmojiEntry {
   /** The actual emoji glyph (may be multi-codepoint, e.g. ZWJ sequences). */
   char: string;
   /** Display name shown in the tooltip. */
@@ -22,7 +22,7 @@ export interface EmojiEntry {
   keywords: string;
 }
 
-export interface EmojiCategory {
+interface EmojiCategory {
   id: string;
   label: string;
   /** Single-glyph icon shown on the tab. */
@@ -34,7 +34,7 @@ function e(char: string, name: string, ...kw: string[]): EmojiEntry {
   return { char, name, keywords: [name, ...kw].join(' ').toLowerCase() };
 }
 
-export const EMOJI_CATEGORIES: EmojiCategory[] = [
+const EMOJI_CATEGORIES: EmojiCategory[] = [
   {
     id: 'smileys',
     label: 'Smileys',
@@ -1216,26 +1216,6 @@ export const EMOJI_CATEGORIES: EmojiCategory[] = [
   },
 ];
 
-/**
- * Flat list of every emoji across all categories — used as the search
- * corpus and to expose a `getEmojiByChar` lookup.
- */
-export const ALL_EMOJIS: EmojiEntry[] = EMOJI_CATEGORIES.flatMap((c) => c.emojis);
-
-/** Search for emoji whose name or keywords contain the query (case-insensitive). */
-export function searchEmojis(query: string, limit = 80): EmojiEntry[] {
-  const q = query.trim().toLowerCase();
-  if (!q) return [];
-  const out: EmojiEntry[] = [];
-  for (const entry of ALL_EMOJIS) {
-    if (entry.keywords.includes(q)) {
-      out.push(entry);
-      if (out.length >= limit) break;
-    }
-  }
-  return out;
-}
-
 // ── Unified picker entries (emoji + FontAwesome icons) ─────────────
 
 import { ICONS } from '@bendyline/squisq/icons';

package/src/headingTransition.ts

@@ -6,16 +6,13 @@
  *
  * - Markdown (Monaco): operate on the raw heading line string.
  * - WYSIWYG (Tiptap): operate on the heading node's `dataBlockAttrs` string
- *   (the inner of the Pandoc `{…}` block, no braces — matching how
- *   `tiptapBridge` stores and re-emits it).
+ *   (Pandoc `{…}` inner) and `dataTemplateParams` string (the params inside
+ *   the squisq-native `{[…]}` annotation).
  *
- * Transitions are stored in the Pandoc `{#id .class key=value}` attribute
- * block, NOT the `{[template …]}` annotation. That mirrors the canonical
- * serializer (`core/doc/docToMarkdown.ts` → `ensureTransitionAttributes`,
- * which always emits the `{…}` form) and `diagram/diagramCommands.ts`, so a
- * value set here round-trips through a Doc render without being duplicated
- * or moved. Reads still look at the `{[…]}` params too, so a hand-typed
- * `{[title transition=fade]}` shows up in the picker.
+ * The editor writes transitions to the squisq-native `{[…]}` annotation by
+ * default. It still reads legacy Pandoc `{transition=…}` attributes and
+ * removes/migrates those keys when rewriting, so the two channels cannot drift
+ * after a toolbar edit.
  *
  * All the brace-matching / tokenizing / serializing is delegated to the
  * shared core helpers so this stays in lockstep with the parser by import
@@ -29,6 +26,7 @@ import {
   serializePandocAttributes,
   tokenizeAttrTokens,
   splitKeyValueToken,
+  quoteAttrValue,
   type HeadingAttributes,
 } from '@bendyline/squisq/markdown';
 
@@ -85,6 +83,14 @@ function applyFieldsToParams(
   return out;
 }
 
+function removeFieldsFromAttrs(attrs: HeadingAttributes): HeadingAttributes {
+  if (!attrs.params) return attrs;
+  const params = applyFieldsToParams(attrs.params, EMPTY_TRANSITION);
+  if (Object.keys(params).length > 0) attrs.params = params;
+  else delete attrs.params;
+  return attrs;
+}
+
 /** Parse a bare `key=value …` token string into a params map. */
 function paramsFromTokenString(input: string, skipFirstToken: boolean): Record<string, string> {
   const tokens = tokenizeAttrTokens(input);
@@ -96,6 +102,39 @@ function paramsFromTokenString(input: string, skipFirstToken: boolean): Record<s
   return params;
 }
 
+function templatePartsFromInner(inner: string | null | undefined): {
+  template: string | undefined;
+  params: Record<string, string>;
+} {
+  if (!inner) return { template: undefined, params: {} };
+  const tokens = tokenizeAttrTokens(inner);
+  const firstIsParam = tokens.length > 0 && tokens[0].indexOf('=') > 0;
+  const template = firstIsParam || tokens.length === 0 ? undefined : tokens[0];
+  const startIdx = template ? 1 : 0;
+  const params: Record<string, string> = {};
+  for (const token of tokens.slice(startIdx)) {
+    const kv = splitKeyValueToken(token);
+    if (kv) params[kv.key] = kv.value;
+  }
+  return { template, params };
+}
+
+function paramsToInner(params: Record<string, string>): string | null {
+  const parts = Object.entries(params).map(([key, value]) => `${key}=${quoteAttrValue(value)}`);
+  return parts.length > 0 ? parts.join(' ') : null;
+}
+
+function templateAnnotationOrNull(
+  template: string | undefined,
+  params: Record<string, string>,
+): string | null {
+  const parts: string[] = [];
+  if (template) parts.push(template);
+  const paramInner = paramsToInner(params);
+  if (paramInner) parts.push(paramInner);
+  return parts.length > 0 ? `{[${parts.join(' ')}]}` : null;
+}
+
 // ============================================
 // Heading line (Markdown / Monaco view)
 // ============================================
@@ -141,7 +180,7 @@ function splitHeadingLine(line: string): SplitHeadingLine | null {
 
 /**
  * Read the transition fields off a heading line. Looks in both the Pandoc
- * `{…}` block (canonical) and the `{[…]}` template params (hand-typed),
+ * `{…}` block (legacy) and the `{[…]}` template params (canonical),
  * with the Pandoc block taking precedence. Returns the empty transition for
  * non-heading lines.
  */
@@ -149,7 +188,7 @@ export function readHeadingLineTransition(line: string): TransitionFields {
   const split = splitHeadingLine(line);
   if (!split) return { ...EMPTY_TRANSITION };
   const fromTemplate = split.templateText
-    ? paramsFromTokenString(stripTemplateBraces(split.templateText), true)
+    ? templatePartsFromInner(stripTemplateBraces(split.templateText)).params
     : {};
   const fromPandoc = split.pandocInner
     ? (parsePandocAttrTokens(split.pandocInner).params ?? {})
@@ -159,8 +198,9 @@ export function readHeadingLineTransition(line: string): TransitionFields {
 
 /**
  * Return `line` with its transition rewritten from `next`, writing into the
- * Pandoc `{…}` block and leaving the `{[…]}` template annotation untouched.
- * Non-heading lines are returned unchanged.
+ * squisq-native `{[…]}` annotation. Legacy Pandoc transition keys are removed
+ * while preserving ids, classes, and other Pandoc params. Non-heading lines are
+ * returned unchanged.
  */
 export function setHeadingLineTransition(line: string, next: TransitionFields): string {
   const split = splitHeadingLine(line);
@@ -168,12 +208,18 @@ export function setHeadingLineTransition(line: string, next: TransitionFields):
   const attrs: HeadingAttributes = split.pandocInner
     ? parsePandocAttrTokens(split.pandocInner)
     : {};
-  attrs.params = applyFieldsToParams(attrs.params ?? {}, next);
+  removeFieldsFromAttrs(attrs);
   const pandoc = pandocBlockOrNull(attrs);
 
+  const templateParts = templatePartsFromInner(
+    split.templateText ? stripTemplateBraces(split.templateText) : null,
+  );
+  const templateParams = applyFieldsToParams(templateParts.params, next);
+  const template = templateAnnotationOrNull(templateParts.template, templateParams);
+
   let out = split.prefix + split.text;
   if (pandoc) out += ` ${pandoc}`;
-  if (split.templateText) out += ` ${split.templateText}`;
+  if (template) out += ` ${template}`;
   return out;
 }
 
@@ -188,8 +234,10 @@ function stripTemplateBraces(templateText: string): string {
 // ============================================
 
 /**
- * Read the transition fields from a heading node's `dataBlockAttrs` (Pandoc
- * inner) plus `dataTemplateParams` (the `{[…]}` params). Pandoc wins.
+ * Read the transition fields from a heading node's `dataBlockAttrs` (legacy
+ * Pandoc inner) plus `dataTemplateParams` (canonical `{[…]}` params). Pandoc
+ * wins so the picker mirrors the value that `markdownToDoc` will render when
+ * both channels are present.
  */
 export function readBlockAttrsTransition(
   blockAttrsInner: string | null | undefined,
@@ -200,20 +248,32 @@ export function readBlockAttrsTransition(
   return fieldsFromParams({ ...fromTemplate, ...fromPandoc });
 }
 
+export interface HeadingTransitionAttrs {
+  /** Inner of the Pandoc `{…}` block, without braces. */
+  blockAttrsInner: string | null;
+  /** Param string inside the `{[…]}` annotation, without the template token. */
+  templateParams: string | null;
+}
+
 /**
- * Rewrite the transition in a heading node's `dataBlockAttrs` inner string.
- * Returns the new inner (no braces), or null when the block carries no
- * attributes at all — matching how `tiptapBridge` stores `dataBlockAttrs`
- * (absent attribute → null, not `{}`).
+ * Rewrite a heading node's transition for Tiptap, writing the transition
+ * family into `dataTemplateParams` and removing any legacy transition keys
+ * from `dataBlockAttrs`.
  */
-export function setBlockAttrsTransition(
+export function setHeadingAttrsTransition(
   blockAttrsInner: string | null | undefined,
+  templateParams: string | null | undefined,
   next: TransitionFields,
-): string | null {
+): HeadingTransitionAttrs {
   const attrs: HeadingAttributes = blockAttrsInner ? parsePandocAttrTokens(blockAttrsInner) : {};
-  attrs.params = applyFieldsToParams(attrs.params ?? {}, next);
+  removeFieldsFromAttrs(attrs);
   const pandoc = pandocBlockOrNull(attrs);
-  return pandoc ? pandoc.slice(1, -1) : null;
+
+  const params = applyFieldsToParams(paramsFromTokenString(templateParams ?? '', false), next);
+  return {
+    blockAttrsInner: pandoc ? pandoc.slice(1, -1) : null,
+    templateParams: paramsToInner(params),
+  };
 }
 
 // ============================================

package/src/imageEditor/CanvasSurface.tsx

@@ -15,7 +15,7 @@
  * the canvas is the viewport and `blockTime` is 0 (no animation).
  */
 
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { PathLayer } from '@bendyline/squisq-react';
 import type { ImageEditDoc, ImageEditLayer } from '@bendyline/squisq/schemas';
 import type { CanvasRect, ImageEditorAction, ImageEditorTool } from './state.js';
@@ -97,6 +97,7 @@ export function CanvasSurface({
   surfaceRef,
   requestEditLayerId,
 }: CanvasSurfaceProps) {
+  const checkerId = `squisq-image-editor-checker-${useId().replace(/:/g, '')}`;
   const svgRef = useRef<SVGSVGElement | null>(null);
   const dragRef = useRef<DragState | null>(null);
   const [, forceRender] = useState(0);
@@ -402,16 +403,11 @@ export function CanvasSurface({
             fill={
               doc.canvas.background && doc.canvas.background !== 'transparent'
                 ? doc.canvas.background
-                : 'url(#squisq-image-editor-checker)'
+                : `url(#${checkerId})`
             }
           />
           <defs>
-            <pattern
-              id="squisq-image-editor-checker"
-              width="16"
-              height="16"
-              patternUnits="userSpaceOnUse"
-            >
+            <pattern id={checkerId} width="16" height="16" patternUnits="userSpaceOnUse">
               <rect width="16" height="16" fill="#f0f0f0" />
               <rect width="8" height="8" fill="#d0d0d0" />
               <rect x="8" y="8" width="8" height="8" fill="#d0d0d0" />
@@ -461,9 +457,16 @@ export function CanvasSurface({
           })}
 
           {/* Selection handles */}
-          {selectedLayer && paddedSelectionBox && tool === 'select' && !selectedLayer.locked && (
-            <SelectionHandles box={paddedSelectionBox} onHandlePointerDown={onPointerDownHandle} />
-          )}
+          {selectedLayer &&
+            paddedSelectionBox &&
+            tool === 'select' &&
+            !selectedLayer.locked &&
+            editingLayerId !== selectedLayer.id && (
+              <SelectionHandles
+                box={paddedSelectionBox}
+                onHandlePointerDown={onPointerDownHandle}
+              />
+            )}
 
           {/* Inline text editor — foreignObject overlays the hidden text layer */}
           {editingLayerId &&
@@ -471,16 +474,16 @@ export function CanvasSurface({
               const editLayer = doc.layers.find((l) => l.id === editingLayerId);
               if (!editLayer || editLayer.type !== 'text') return null;
               const pos = layerBox(editLayer, doc);
-              const s = (editLayer as ImageEditLayer & { type: 'text' }).content;
-              // Give generous height so text can grow without being clipped.
-              const foHeight = Math.max(pos.height * 4, 200);
+              const textLayer = editLayer as ImageEditLayer & { type: 'text' };
+              const s = textLayer.content;
+              const editBox = measureTextLayerBox(textLayer, pos);
               return (
                 <foreignObject
                   key={`inline-edit-${editingLayerId}`}
-                  x={pos.x}
-                  y={pos.y}
-                  width={pos.width}
-                  height={foHeight}
+                  x={editBox.x}
+                  y={editBox.y}
+                  width={editBox.width}
+                  height={editBox.height}
                   style={{ overflow: 'visible' }}
                 >
                   <textarea
@@ -503,9 +506,11 @@ export function CanvasSurface({
                     }}
                     onPointerDown={(e) => e.stopPropagation()}
                     onClick={(e) => e.stopPropagation()}
+                    wrap="off"
                     style={{
                       display: 'block',
                       width: '100%',
+                      height: '100%',
                       padding: 0,
                       margin: 0,
                       border: 'none',
@@ -514,9 +519,9 @@ export function CanvasSurface({
                       resize: 'none',
                       background: 'transparent',
                       fontFamily: s.style.fontFamily ?? 'sans-serif',
-                      // font-size in CSS pixels must be scaled by zoom because foreignObject
-                      // content renders in screen pixels, not SVG user-space pixels.
-                      fontSize: `${s.style.fontSize * zoom}px`,
+                      // The foreignObject participates in the SVG viewBox transform, so its
+                      // contents use canvas units and inherit zoom from the SVG exactly once.
+                      fontSize: `${s.style.fontSize}px`,
                       fontWeight: s.style.fontWeight ?? 'normal',
                       color: s.style.color,
                       textAlign: (s.style.textAlign ?? 'left') as 'left' | 'center' | 'right',
@@ -677,8 +682,9 @@ function measureTextLayerBox(
   }
   const lineHeight = style.lineHeight ?? 1.4;
   const lineHeightPx = fontSize * lineHeight;
-  // First line spans fontSize tall; subsequent lines add lineHeightPx each.
-  const totalHeight = fontSize + Math.max(0, lines.length - 1) * lineHeightPx;
+  // Use full line boxes so the SVG selection and textarea editor share
+  // identical bounds without clipping the caret or the final line.
+  const totalHeight = Math.max(1, lines.length) * lineHeightPx;
   // Mirror the textAnchor logic in EditorTextLayer.
   const anchor =
     style.textAlign === 'center' ? 'middle' : style.textAlign === 'right' ? 'end' : 'start';

package/src/imageEditor/LayersPanel.tsx

@@ -4,6 +4,7 @@
  * panel shows the array reversed so "top" appears at the top of the list.
  */
 
+import { useEffect, useRef, useState } from 'react';
 import type { ImageEditDoc } from '@bendyline/squisq/schemas';
 import type { ImageEditorAction } from './state.js';
 import {
@@ -12,23 +13,95 @@ import {
   CloseIcon,
   EyeIcon,
   EyeOffIcon,
+  ImageIcon,
   LockIcon,
+  PlusIcon,
+  ShapeIcon,
+  TextIcon,
   UnlockIcon,
 } from './icons.js';
 
+export type AddableLayerKind = 'text' | 'shape' | 'image';
+
 export interface LayersPanelProps {
   doc: ImageEditDoc;
   selectedLayerId: string | null;
   dispatch: (action: ImageEditorAction) => void;
+  onAddLayer: (kind: AddableLayerKind) => void;
 }
 
-export function LayersPanel({ doc, selectedLayerId, dispatch }: LayersPanelProps) {
+const ADD_LAYER_OPTIONS: ReadonlyArray<{
+  kind: AddableLayerKind;
+  label: string;
+  icon: React.ReactNode;
+}> = [
+  { kind: 'text', label: 'Text layer', icon: <TextIcon /> },
+  { kind: 'shape', label: 'Shape layer', icon: <ShapeIcon /> },
+  { kind: 'image', label: 'Image layer…', icon: <ImageIcon /> },
+];
+
+export function LayersPanel({ doc, selectedLayerId, dispatch, onAddLayer }: LayersPanelProps) {
+  const [addMenuOpen, setAddMenuOpen] = useState(false);
+  const addMenuRef = useRef<HTMLSpanElement | null>(null);
+
+  useEffect(() => {
+    if (!addMenuOpen) return;
+
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (!addMenuRef.current?.contains(event.target as Node)) setAddMenuOpen(false);
+    };
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setAddMenuOpen(false);
+    };
+
+    document.addEventListener('mousedown', closeOnOutsideClick);
+    document.addEventListener('keydown', closeOnEscape);
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsideClick);
+      document.removeEventListener('keydown', closeOnEscape);
+    };
+  }, [addMenuOpen]);
+
   // Visual order: top of stack first.
   const ordered = doc.layers.slice().reverse();
 
   return (
     <div className="squisq-image-editor-layers" data-testid="image-editor-layers">
-      <div className="squisq-image-editor-panel-header">Layers</div>
+      <div className="squisq-image-editor-panel-header squisq-image-editor-layers-header">
+        <span>Layers</span>
+        <span ref={addMenuRef} className="squisq-image-editor-layer-add">
+          <button
+            type="button"
+            className="squisq-image-editor-layer-add-button"
+            onClick={() => setAddMenuOpen((open) => !open)}
+            aria-label="Add layer"
+            title="Add layer"
+            aria-haspopup="menu"
+            aria-expanded={addMenuOpen}
+          >
+            <PlusIcon />
+          </button>
+          {addMenuOpen && (
+            <div className="squisq-image-editor-layer-add-menu" role="menu">
+              {ADD_LAYER_OPTIONS.map(({ kind, label, icon }) => (
+                <button
+                  key={kind}
+                  type="button"
+                  className="squisq-image-editor-layer-add-menu-item"
+                  role="menuitem"
+                  onClick={() => {
+                    setAddMenuOpen(false);
+                    onAddLayer(kind);
+                  }}
+                >
+                  {icon}
+                  <span>{label}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </span>
+      </div>
       <ul className="squisq-image-editor-layer-list">
         {ordered.length === 0 && <li className="squisq-image-editor-layer-empty">No layers yet</li>}
         {ordered.map((layer) => {
@@ -38,6 +111,7 @@ export function LayersPanel({ doc, selectedLayerId, dispatch }: LayersPanelProps
           const canMoveUp = stackIndex < doc.layers.length - 1;
           const canMoveDown = stackIndex > 0;
           const isSelected = selectedLayerId === layer.id;
+          const layerName = layer.name ?? defaultLayerName(layer);
 
           return (
             <li
@@ -84,8 +158,9 @@ export function LayersPanel({ doc, selectedLayerId, dispatch }: LayersPanelProps
                 type="button"
                 className="squisq-image-editor-layer-name"
                 onClick={() => dispatch({ type: 'select', layerId: layer.id })}
+                title={layerName}
               >
-                {layer.name ?? defaultLayerName(layer)}
+                <span className="squisq-image-editor-layer-name-text">{layerName}</span>
                 <span className="squisq-image-editor-layer-kind">{layer.type}</span>
               </button>
               <button

package/src/imageEditor/Toolbar.tsx

@@ -18,6 +18,8 @@ export interface ToolbarProps {
   dispatch: (a: ImageEditorAction) => void;
   /** Upload an image asset and return its sidecar-relative path. */
   uploadAsset: (file: Blob, suggestedName?: string) => Promise<string>;
+  /** Shared image picker ref used by the toolbar and Layers panel. */
+  imageInputRef?: React.RefObject<HTMLInputElement>;
   /** Trigger an export (PNG/JPEG/WebP) of the flattened canvas. */
   onExport: (format: 'png' | 'jpeg' | 'webp') => void;
   /** Force-flush the state.json (host's "save" button). */
@@ -142,6 +144,7 @@ export function Toolbar({
   shapeKind,
   dispatch,
   uploadAsset,
+  imageInputRef,
   onExport,
   onSave,
   saveLabel = 'Save',
@@ -154,7 +157,8 @@ export function Toolbar({
   onZoomFit,
   onZoom1to1,
 }: ToolbarProps) {
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const internalImageInputRef = useRef<HTMLInputElement>(null);
+  const fileInputRef = imageInputRef ?? internalImageInputRef;
   const [shapePaletteOpen, setShapePaletteOpen] = useState(false);
 
   const onFilePicked = async (file: File) => {

package/src/imageEditor/icons.tsx

@@ -58,6 +58,10 @@ export function PlusIcon(props: Props) {
   return <Icon icon="fa-solid fa-plus" {...props} />;
 }
 
+export function ImageIcon(props: Props) {
+  return <Icon icon="fa-solid fa-image" {...props} />;
+}
+
 export function NoneIcon(props: Props) {
   // "No fill / transparent" affordance.
   return <Icon icon="fa-solid fa-ban" {...props} />;