fix: an empty note is draggable, and the image tool takes a pasted file path (#523)

Two owner-reported Atlas bugs, both live-reproduced and now e2e-pinned:

- An empty sticky note rendered the editing-style invitation with
  nodrag/nopan on its whole surface, so it could never be moved or
  click-selected. The invitation now stays a normal draggable board
  node: the editor subtree is pointer-inert at rest (Crepe's
  placeholder decoration needs the editable mount, so read-only wasn't
  an option), a single click still starts typing, shift/cmd clicks
  match the at-rest gesture table.

- The image popover's paste zone answered only bitmap clipboard data;
  a pasted image-file path (or image URL) as text did nothing. It now
  routes image-shaped text through the same server-side recognizer the
  board's own paste door already runs (PasteToBoard -> mirror-copy,
  existence check, URL fetch), with quote/file:// normalization in the
  new imagePathFromClipboardText gate. The board's window-level paste
  door now respects defaultPrevented so the two doors can never land
  the same paste twice (live-caught: one paste, two objects). Non-image
  text pasted into the zone gets the inline extension message instead
  of silence, and the hint copy names the path option.


Claude-Session: https://claude.ai/code/session_012im1JxQQV2ahnXzZDdVmZq

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: alicoding

frontend/e2e/atlas-authoring.spec.ts

@@ -12,7 +12,7 @@ import {
 } from './fixtures/server'
 import { contextMenu, rightClickEmptyArea } from './fixtures/contextMenu'
 import { ATLAS_KIND_CONTACT, ATLAS_KIND_TOPIC, selectKind } from './fixtures/kindPicker'
-import { clickCorner, groupCard, noteCard, zoomAllTheWayOut } from './fixtures/atlasBoard'
+import { clickCorner, dragBetween, groupCard, noteCard, zoomAllTheWayOut } from './fixtures/atlasBoard'
 
 // Atlas creation core (goal 0081 slice A1): the tray, its placement
 // popover, right-click create, sticky notes, and the note promotion
@@ -251,6 +251,17 @@ test('an empty note places, shows its own placeholder inline, and takes text lat
     // Milkdown's own placeholder feature sets, not rendered text.
     await expect(sticky.locator('.crepe-placeholder')).toHaveAttribute('data-placeholder', 'Type a note…')
 
+    // Regression: the invitation's whole surface carried `nodrag`, so
+    // an empty note could never be moved at all. A body drag moves it
+    // like any other node -- and a moved gesture never opens an edit
+    // session (the drag machinery suppresses its trailing click).
+    const beforeBox = await sticky.boundingBox()
+    if (!beforeBox) throw new Error('empty sticky has no bounding box')
+    const center = { x: beforeBox.x + beforeBox.width / 2, y: beforeBox.y + beforeBox.height / 2 }
+    await dragBetween(page, center, { x: center.x + 120, y: center.y + 80 })
+    await expect.poll(async () => (await sticky.boundingBox())?.x ?? 0).toBeGreaterThan(beforeBox.x + 60)
+    await expect(stickyEditor(page)).toHaveCount(0)
+
     // A single press into the empty note's own field starts typing
     // directly -- no prior selection needed (unlike a non-empty note's
     // select-then-click), since the placeholder IS the invitation.

frontend/e2e/atlas-image-tool.spec.ts

@@ -1,3 +1,6 @@
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
 import { test, expect } from './fixtures/server'
 import { dragResizeHandle, nonSeededBoardObjects, openCard } from './fixtures/atlasBoard'
 import { deleteViaPageMenu } from './fixtures/atlasPage'
@@ -124,6 +127,50 @@ test('pasting a clipboard image lands a board object -- selectable, draggable, d
   await expect(object).toHaveCount(0)
 })
 
+// Regression: the paste zone answered only bitmap clipboard data -- a
+// pasted image-file PATH (plain text) was silently ignored, and the
+// board's window-level paste door acting on the same event could land
+// a second copy. The zone now routes image-shaped text through the
+// same server-side recognizer the board door uses (mirror-copy), and
+// marks the event handled so exactly ONE object lands.
+test('pasting an image file path as text lands a board object rendering that file', async ({ page }) => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'mill-e2e-atlas-image-paste-path-'))
+  const pngPath = path.join(dir, 'ZzE2ePastedPath.png')
+  fs.writeFileSync(pngPath, Buffer.from(ONE_PIXEL_PNG_BASE64, 'base64'))
+  try {
+    await page.goto('/')
+    await page.getByRole('link', { name: 'Atlas' }).click()
+    await expect(page.getByTestId('atlas-board')).toBeVisible()
+
+    await openImagePopover(page)
+    // Same dispatched-ClipboardEvent escape hatch as the bitmap-paste
+    // test above: no user primitive can place arbitrary text on the
+    // real OS clipboard portably in this harness, and the dispatched
+    // event carries the exact DataTransfer shape a real ⌘V delivers.
+    await page.getByTestId('atlas-image-paste-zone').evaluate((el, p) => {
+      const dt = new DataTransfer()
+      dt.setData('text/plain', p)
+      el.dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true }))
+    }, pngPath)
+
+    const object = imageObjects(page)
+    await expect(object).toHaveCount(1)
+    // The object renders the file found at the pasted path -- a real
+    // <img> confirms the bytes loaded, not just a titled box.
+    await expect(object.locator('img')).toBeVisible()
+    // The popover closes itself once the paste resolves.
+    await expect(page.getByTestId('atlas-image-input')).not.toBeVisible()
+    // The rule, absolute: never a card.
+    await expect(page.getByTestId('atlas-note-card').filter({ hasText: 'ZzE2ePastedPath' })).toHaveCount(0)
+
+    await object.click()
+    await page.keyboard.press('Delete')
+    await expect(object).toHaveCount(0)
+  } finally {
+    fs.rmSync(dir, { recursive: true, force: true })
+  }
+})
+
 // Note (goal 0206): the prior "a non-image path shows an inline error"
 // case tested typing an arbitrary bad path into a free-text field --
 // that field no longer exists (replaced by the native picker, which

frontend/src/atlas/AtlasBoard.tsx

@@ -471,7 +471,7 @@ function AtlasBoardInner({ boardFilter, onBoardFilterChange, filterMatchCount, f
       {fileDrop.dropDuplicateNotice && <div className={styles.dropNotice} data-testid="atlas-file-drop-duplicate-notice">{fileDrop.dropDuplicateNotice}</div>}
       {!readOnly && (haveSelection
         ? <AtlasSelectionTray ref={trayRef} selectedCardCount={selection.selectedCards.length} selectedNoteCount={selection.selectedNotes.length} selectedObjectCount={selection.selectedObjects.length} onGroup={onTrayGroup} onDelete={onTrayDelete} />
-        : <AtlasCreationTray armedTool={armedTool.armedToolId} locked={creation.locked} onToggle={creation.toggleArm} tablePickerOpen={tablePicker.open} onTableToggle={tablePicker.setOpen} onClosePickerVisibility={tablePicker.closePickerVisibility} onPickTableSize={(cols, rows) => tablePicker.setPendingSize({ cols, rows })} onTableFromList={onOpenTableFromList} imagePopoverOpen={imagePopover.open} onImageToggle={imagePopover.setOpen} onImageSubmitPath={imageCreate.createFromPath} onImageSubmitFile={imageCreate.createFromFile} />)}
+        : <AtlasCreationTray armedTool={armedTool.armedToolId} locked={creation.locked} onToggle={creation.toggleArm} tablePickerOpen={tablePicker.open} onTableToggle={tablePicker.setOpen} onClosePickerVisibility={tablePicker.closePickerVisibility} onPickTableSize={(cols, rows) => tablePicker.setPendingSize({ cols, rows })} onTableFromList={onOpenTableFromList} imagePopoverOpen={imagePopover.open} onImageToggle={imagePopover.setOpen} onImageSubmitPath={imageCreate.createFromPath} onImageSubmitFile={imageCreate.createFromFile} onImageSubmitText={imageCreate.createFromPastedText} />)}
       {creation.popover && (
         <AtlasPlacementPopover
           mode={creation.popover.mode}

frontend/src/atlas/AtlasCreationTray.tsx

@@ -71,7 +71,7 @@ const PRIMARY_GROUP_ORDER = ['knowledge', 'file'] as const
 // near the board's bottom-left. The full name is still discoverable
 // via `title` (hover) and `aria-label` (screen readers) on every
 // button, including the Annotate group's own trigger.
-export function AtlasCreationTray({ armedTool, locked, onToggle, tablePickerOpen, onTableToggle, onClosePickerVisibility, onPickTableSize, onTableFromList, imagePopoverOpen, onImageToggle, onImageSubmitPath, onImageSubmitFile }: {
+export function AtlasCreationTray({ armedTool, locked, onToggle, tablePickerOpen, onTableToggle, onClosePickerVisibility, onPickTableSize, onTableFromList, imagePopoverOpen, onImageToggle, onImageSubmitPath, onImageSubmitFile, onImageSubmitText }: {
   // The ONE shared armed-tool field (useAtlasArmedTool.ts, goal 0238)
   // -- widened past AtlasArmableTool so Table/Image share the exact
   // same value every OTHER tool's own `data-armed`/`aria-pressed`
@@ -102,6 +102,7 @@ export function AtlasCreationTray({ armedTool, locked, onToggle, tablePickerOpen
   onImageToggle: (open: boolean) => void
   onImageSubmitPath: (path: string) => Promise<void>
   onImageSubmitFile: (file: File) => Promise<void>
+  onImageSubmitText: (text: string) => Promise<void>
 }) {
   const { t } = useTranslation('atlas')
   // Settings > Extensions disable semantics, item 1: a disabled tool's
@@ -284,7 +285,7 @@ export function AtlasCreationTray({ armedTool, locked, onToggle, tablePickerOpen
             renderAnchor={null}
             side="outside-top"
           >
-            <AtlasImageInput onSubmitPath={onImageSubmitPath} onSubmitFile={onImageSubmitFile} onDone={() => onImageToggle(false)} />
+            <AtlasImageInput onSubmitPath={onImageSubmitPath} onSubmitFile={onImageSubmitFile} onSubmitText={onImageSubmitText} onDone={() => onImageToggle(false)} />
           </AnchoredOverlay>
         </Fragment>
       )

frontend/src/atlas/AtlasImageInput.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { Button, Text } from '@primer/react'
 import { AtlasService } from '../shared/bindings'
 import { readClipboardImageFile } from '../shared/clipboardRead'
+import { imagePathFromClipboardText } from './atlasCreateHelpers'
 import { IMAGE_EXTENSIONS } from './atlasUnitMirror'
 import { extensionOf } from './unitRegistry'
 import styles from './AtlasImageInput.module.css'
@@ -14,9 +15,10 @@ import styles from './AtlasImageInput.module.css'
 // user is asked to type (ux-writing.md). Rendering the created object
 // is the placement door's job (useAtlasImageCreate.ts); this component
 // only resolves WHICH path or file to hand off.
-export function AtlasImageInput({ onSubmitPath, onSubmitFile, onDone }: {
+export function AtlasImageInput({ onSubmitPath, onSubmitFile, onSubmitText, onDone }: {
   onSubmitPath: (path: string) => Promise<void>
   onSubmitFile: (file: File) => Promise<void>
+  onSubmitText: (text: string) => Promise<void>
   onDone: () => void
 }) {
   const { t } = useTranslation('atlas')
@@ -74,10 +76,41 @@ export function AtlasImageInput({ onSubmitPath, onSubmitFile, onDone }: {
         tabIndex={0}
         autoFocus
         onPaste={(e) => {
+          // preventDefault on every handled shape below also tells the
+          // board's own window-level paste door (useAtlasPaste.ts) to
+          // stand down -- without it, both doors land the same paste
+          // and the object appears twice.
           const file = readClipboardImageFile(e.clipboardData)
-          if (!file) return
-          e.preventDefault()
-          submitFile(file)
+          if (file) {
+            e.preventDefault()
+            submitFile(file)
+            return
+          }
+          // No bitmap on the clipboard: a pasted image-file PATH or
+          // image URL (text) lands through the same server-side
+          // recognizer the board's own paste door uses. Text that
+          // isn't image-shaped gets the same inline answer the
+          // picker's own extension re-check gives, never silence.
+          const path = imagePathFromClipboardText(
+            e.clipboardData.getData('text/uri-list'),
+            e.clipboardData.getData('text/plain'),
+          )
+          if (path) {
+            e.preventDefault()
+            setBusy(true)
+            setError(null)
+            onSubmitText(path)
+              .then(onDone)
+              .catch(() => {
+                setBusy(false)
+                setError(t('imageInput.addFailed'))
+              })
+            return
+          }
+          if (e.clipboardData.getData('text/plain').trim() !== '') {
+            e.preventDefault()
+            setError(t('imageInput.invalidExtension'))
+          }
         }}
       >
         <Text size="small" className={styles.hint} data-testid="atlas-image-paste-hint">

frontend/src/atlas/AtlasStickyNode.module.css

@@ -33,6 +33,21 @@
 .sticky.editing {
     cursor: text;
 }
+/* The empty-note invitation at rest: the SAME editable mount as an
+   edit session (Crepe's placeholder plugin bails on `crepe.readonly`,
+   so a read-only mount would lose the "Type a note…" decoration), but
+   the node itself must stay a normal draggable/selectable board object
+   -- so the editor subtree is pointer-inert until a click promotes it
+   to a real session, and every press belongs to the canvas library's
+   own drag/select. The resize-control exclusion mirrors the width rule
+   below: NodeResizer's handles are direct children of this wrapper. */
+.sticky.editing.invitation {
+    cursor: pointer;
+}
+.sticky.editing.invitation > *:not(:global(.react-flow__resize-control)) {
+    pointer-events: none;
+}
+
 /* The editor's own wrapper fills the note's width and carries the
    growth cap: content-driven height stops here and wheel-scrolls past
    it (goal 0199's bounded-editor contract, checked by

frontend/src/atlas/AtlasStickyNode.tsx

@@ -228,30 +228,37 @@ export const AtlasStickyNode = memo(function AtlasStickyNode({ data, selected }:
     return (
       <div
         ref={wrapRef}
-        className={`${styles.sticky} ${styles.editing} nodrag nopan nowheel`}
+        // nodrag/nopan/nowheel only while a REAL edit session runs: the
+        // empty-note invitation (editing false) must stay an ordinary
+        // draggable/selectable board node -- its editor subtree is
+        // pointer-inert instead (styles.invitation), so the canvas
+        // library owns every press until a click promotes to editing.
+        className={`${styles.sticky} ${styles.editing} ${editing ? 'nodrag nopan nowheel' : styles.invitation}`}
         style={boxStyle}
         data-testid="atlas-sticky-note"
         data-editing={editing ? 'true' : 'false'}
-        // A press into an empty note (not yet a real editing session,
-        // just showing its own placeholder) promotes to a real one --
-        // the same promotion MarkdownNoteField's onFocus does. Idle
-        // while already editing (editing is already true).
+        // Keyboard focus (Tab) landing on the invitation's field
+        // promotes to a real editing session -- the same promotion
+        // MarkdownNoteField's onFocus does; pointer presses never
+        // focus the field (it is pointer-inert at rest). Idle while
+        // already editing (editing is already true).
         onFocus={() => {
           if (!editing) onEnterEdit()
         }}
-        // A short/empty note's own contenteditable is only as tall as
-        // its one line of placeholder text (a percentage-height chain
-        // to fill the box was tried and measured unreliable --
-        // MilkdownEditor.module.css's own header carries that finding)
-        // -- a press anywhere in the REMAINING box below it must still
-        // focus the field, the same way clicking blank space in a
-        // native textarea does. Idle once a real click already landed
-        // on the editable itself (this would just re-focus the same
-        // element).
+        // A single click anywhere in the invitation starts typing --
+        // no prior selection needed, the placeholder IS the invitation
+        // (unlike a non-empty note's select-then-click). Modifier
+        // gestures match the at-rest branch: shift leaves the click to
+        // multi-select, ⌘ opens the big surface. A real drag never
+        // reaches here -- the drag machinery suppresses the click that
+        // follows a moved gesture.
         onClick={(e) => {
-          if (editing) return
-          const target = e.currentTarget.querySelector<HTMLElement>('[contenteditable="true"], textarea')
-          target?.focus()
+          if (editing || e.shiftKey) return
+          if (e.metaKey || e.ctrlKey) {
+            onOpenBig()
+            return
+          }
+          onEnterEdit()
         }}
         onKeyDown={(e) => {
           if (e.key === 'Escape') {

frontend/src/atlas/atlasCreateHelpers.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { normalizeLocalPathInput, resolveDefaultKindID, resolveNoteCommitText, titleFromFilename, titleFromNoteText } from './atlasCreateHelpers'
+import { imagePathFromClipboardText, normalizeLocalPathInput, resolveDefaultKindID, resolveNoteCommitText, titleFromFilename, titleFromNoteText } from './atlasCreateHelpers'
 import type { Kind } from '../../bindings/github.com/alicoding/mill/internal/domain/atlas/models'
 
 function kind(id: string): Kind {
@@ -122,3 +122,48 @@ describe('resolveNoteCommitText', () => {
     expect(resolveNoteCommitText('')).toBeNull()
   })
 })
+
+describe('imagePathFromClipboardText', () => {
+  // Regression: the image paste zone answered only bitmap clipboard
+  // data -- a pasted image-file path (text) was silently ignored.
+  it('accepts a plain absolute image path', () => {
+    expect(imagePathFromClipboardText('/Users/me/photo.png')).toBe('/Users/me/photo.png')
+  })
+
+  it('trims surrounding whitespace and a trailing newline', () => {
+    expect(imagePathFromClipboardText(' /Users/me/photo.jpg \n')).toBe('/Users/me/photo.jpg')
+  })
+
+  it('strips matched wrapping quotes from a terminal-copied path', () => {
+    expect(imagePathFromClipboardText('"/Users/me/My Photo.png"')).toBe('/Users/me/My Photo.png')
+    expect(imagePathFromClipboardText("'/Users/me/photo.webp'")).toBe('/Users/me/photo.webp')
+  })
+
+  it('resolves a file:// URL through the same normalization the picker uses', () => {
+    expect(imagePathFromClipboardText('file:///Users/me/My%20Photo.png')).toBe('/Users/me/My Photo.png')
+  })
+
+  it('takes only the first line of a uri-list flavor, in preference order', () => {
+    expect(imagePathFromClipboardText('file:///a/first.png\nfile:///b/second.png', '/c/plain.png')).toBe('/a/first.png')
+  })
+
+  it('falls through an unusable first flavor to a later one', () => {
+    expect(imagePathFromClipboardText('', '/Users/me/photo.gif')).toBe('/Users/me/photo.gif')
+  })
+
+  it('passes an image URL through untouched for the server-side recognizer', () => {
+    expect(imagePathFromClipboardText('https://example.com/pics/logo.png')).toBe('https://example.com/pics/logo.png')
+  })
+
+  it('rejects a path with a non-image extension', () => {
+    expect(imagePathFromClipboardText('/Users/me/notes.txt')).toBeNull()
+  })
+
+  it('rejects prose that is not a path at all', () => {
+    expect(imagePathFromClipboardText('hello world')).toBeNull()
+  })
+
+  it('rejects empty input', () => {
+    expect(imagePathFromClipboardText('', '   ')).toBeNull()
+  })
+})

frontend/src/atlas/atlasCreateHelpers.ts

@@ -1,4 +1,6 @@
 import type { Kind } from '../../bindings/github.com/alicoding/mill/internal/domain/atlas/models'
+import { extensionOf } from './unitRegistry'
+import { IMAGE_EXTENSIONS } from './atlasUnitMirror'
 
 // The placement popover's own two pure decisions (goal 0081 slice A1),
 // split out so both are Vitest-unit-testable without a React render --
@@ -67,6 +69,31 @@ export function normalizeLocalPathInput(input: string): string {
   }
 }
 
+// imagePathFromClipboardText resolves a pasted TEXT clipboard into an
+// image-file path or image URL, or null when no candidate is one --
+// the image paste zone's own SHAPE gate after readClipboardImageFile
+// finds no bitmap (an http(s) URL whose path ends in an image
+// extension passes through untouched; the server-side recognizer owns
+// fetching it).
+// Callers pass the paste's text flavors in preference order (a
+// `text/uri-list` before `text/plain`); only each flavor's FIRST line
+// is considered (uri-list is defined as one URI per line, and a
+// multi-line plain-text paste isn't a path). Wrapping quotes are
+// stripped (a path copied out of a terminal often carries them), then
+// the same normalize + extension gate the picker's own re-check uses
+// decides. Pure -- existence is the backend's own concern, exactly as
+// it is for a picked path.
+export function imagePathFromClipboardText(...candidates: string[]): string | null {
+  for (const candidate of candidates) {
+    const firstLine = (candidate.split('\n')[0] ?? '').trim()
+    const unquoted = /^(['"]).*\1$/.test(firstLine) ? firstLine.slice(1, -1) : firstLine
+    if (!unquoted) continue
+    const path = normalizeLocalPathInput(unquoted)
+    if (IMAGE_EXTENSIONS.has(extensionOf(path))) return path
+  }
+  return null
+}
+
 // resolveNoteCommitText decides whether a re-edited note's text should
 // persist, and exactly what to persist (goal 0226's round-trip
 // contract): null skips the write entirely (an existing note's own