@estiva-app/ui 0.72.0-widgets2.2 → 0.73.0-inline-text.1

package/src/InlineText.tsx

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useImperativeHandle, useRef, useState, type Ref } from 'react'
+import { Extension, Node } from '@tiptap/core'
+import { history, redo, undo } from '@tiptap/pm/history'
+import { EditorContent, useEditor } from '@tiptap/react'
+import { cn } from './cn'
+
+/**
+ * A line of plain text on a page that you edit where it stands, as in a
+ * document: a title, a summary. Ship's title editor (Katerina, 29 September,
+ * findings E1 and E2), moved here for the summary (Miky, 16 October: "it feels
+ * like a document, not a form") so every app's header edits the same way.
+ *
+ * - **No box**, on hover or on click, and nothing moves: the text is the
+ *   editor, in its own size and colour. The text cursor is the only sign.
+ * - **The caret goes where you click**, and nothing is selected.
+ * - **Enter saves and moves on** — `onEnter` says where: the title to the
+ *   summary, the summary to the description.
+ * - **Escape stops editing and keeps the text**, saving it, as leaving does.
+ *   Nothing is thrown away; Ctrl+Z undoes.
+ * - **An unchanged value is not a write.** Leaving it empty brings the saved
+ *   one back, unless `clearable`: then empty is saved, as nothing.
+ * - **A refused save keeps your text where it is**, and the app says why
+ *   beside it; a change made elsewhere does not overwrite it until you have
+ *   saved, changed or emptied it.
+ *
+ * One paragraph and no marks, so pasted line breaks become spaces and it wraps
+ * like text, which a one-line `<input>` cannot. A Tiptap editor rather than a
+ * raw `contenteditable`, so it is the same kind of surface as the description
+ * under it.
+ */
+export interface InlineTextProps {
+  /** The saved text. A new value is loaded when you are not in the field and hold nothing unsaved. */
+  value: string
+  /** What it is for, muted, while it is empty: "Untitled", "Add a summary". */
+  placeholder: string
+  /** The accessible name: "Title", "Summary". */
+  label: string
+  /** Save it: resolve `true` when saved; `false` keeps your text in place. */
+  onCommit: (value: string) => Promise<boolean> | boolean
+  /** The text as it is being written, on focus and every change; `null` when you leave. For a count. */
+  onText?: (text: string | null) => void
+  /** Enter, after the save has started: where the caret goes next. */
+  onEnter?: () => void
+  /** `title`: the page's heading. `summary`: the line under it, quieter. */
+  variant?: 'title' | 'summary'
+  /** Empty is a value (a summary). Otherwise leaving it empty brings the saved one back (a title). */
+  clearable?: boolean
+  /** Text only, the same size and place: nobody can change it, or the editor is not ready. */
+  readOnly?: boolean
+  /** Placement only. */
+  className?: string
+  ref?: Ref<InlineTextHandle>
+}
+
+type CaretAt = 'start' | 'end'
+
+export interface InlineTextHandle {
+  /** Put the caret in it, at the start or the end. */
+  focus: (at?: CaretAt) => void
+}
+
+/** Size and tone, per variant: the same for the text at rest and while it is written. */
+const VARIANT = {
+  title: 'text-h2 text-text-primary',
+  summary: 'text-body-1 text-text-secondary',
+} as const
+
+/** The room around the text: the caret has a little space at the edges, and the text still lines up with what is above and below it. */
+const ROOM = '-mx-2 px-2 py-1'
+
+// The whole schema: one paragraph of text. Written with the core, so the
+// package's peers stay what they were.
+const OneLine = Node.create({ name: 'doc', topNode: true, content: 'paragraph' })
+const Paragraph = Node.create({
+  name: 'paragraph',
+  content: 'text*',
+  parseHTML: () => [{ tag: 'p' }],
+  renderHTML: () => ['p', 0],
+})
+const Text = Node.create({ name: 'text' })
+const Undo = Extension.create({
+  name: 'inlineTextUndo',
+  addProseMirrorPlugins: () => [history()],
+  addKeyboardShortcuts() {
+    const run = (command: typeof undo) => () => command(this.editor.state, this.editor.view.dispatch)
+    return { 'Mod-z': run(undo), 'Shift-Mod-z': run(redo), 'Mod-y': run(redo) }
+  },
+})
+
+const doc = (text: string) => ({ type: 'doc', content: [{ type: 'paragraph', content: text ? [{ type: 'text', text }] : [] }] })
+
+/** One line: every run of white space, line breaks included, is one space. */
+const oneLine = (text: string) => text.replace(/\s+/g, ' ').trim()
+
+export function InlineText({ value, placeholder, label, onCommit, onText, onEnter, variant = 'title', clearable = false, readOnly = false, className, ref }: InlineTextProps) {
+  const saved = useRef(value)
+  // The placeholder follows the text as it is typed or deleted, not the saved value.
+  const [empty, setEmpty] = useState(!value)
+  // Read at key time: the editor's handlers are built once, and a prop they
+  // closed over would be the first render's.
+  const latest = useRef({ onEnter, onText, onCommit, clearable })
+  latest.current = { onEnter, onText, onCommit, clearable }
+
+  const save = useCallback(async (text: string) => {
+    const next = oneLine(text)
+    if (next === saved.current) return
+    if (!next && !latest.current.clearable) return
+    if (await latest.current.onCommit(next)) saved.current = next
+  }, [])
+
+  const editor = useEditor({
+    extensions: [OneLine, Paragraph, Text, Undo],
+    content: doc(value),
+    editable: !readOnly,
+    editorProps: {
+      attributes: {
+        'aria-label': label,
+        role: 'textbox',
+        'aria-multiline': 'false',
+        'aria-placeholder': placeholder,
+        ...(readOnly ? { 'aria-readonly': 'true' } : {}),
+        class: 'outline-none',
+      },
+      handleKeyDown: (view, event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault()
+          void save(view.state.doc.textContent)
+          latest.current.onEnter?.()
+          return true
+        }
+        if (event.key === 'Escape') {
+          view.dom.blur()
+          return true
+        }
+        return false
+      },
+      // A paste is its plain text on this one line, whatever it was copied from.
+      handlePaste: (view, event) => {
+        const text = event.clipboardData?.getData('text/plain')
+        if (text == null) return false
+        view.dispatch(view.state.tr.insertText(text.replace(/\s+/g, ' ')))
+        return true
+      },
+    },
+    onFocus: ({ editor: e }) => latest.current.onText?.(e.getText()),
+    onUpdate: ({ editor: e }) => {
+      setEmpty(e.isEmpty)
+      latest.current.onText?.(e.getText())
+    },
+    onBlur: ({ editor: e }) => {
+      latest.current.onText?.(null)
+      // Left empty where empty is not a value: the saved text comes back, so
+      // the page never shows the placeholder while everyone else sees the text.
+      if (e.isEmpty && saved.current && !latest.current.clearable) {
+        e.commands.setContent(doc(saved.current), { emitUpdate: false })
+        setEmpty(false)
+        return
+      }
+      void save(e.getText())
+    },
+  }, [readOnly])
+
+  // A change made elsewhere is loaded while you are not in the field and hold
+  // nothing unsaved; your own save coming back is left alone.
+  useEffect(() => {
+    if (!editor || editor.isDestroyed || value === saved.current || editor.isFocused) return
+    if (oneLine(editor.getText()) !== saved.current) return
+    editor.commands.setContent(doc(value), { emitUpdate: false })
+    saved.current = value
+    setEmpty(!value)
+  }, [editor, value])
+
+  useImperativeHandle(ref, () => ({
+    focus: (at = 'start') => editor?.commands.focus(at),
+  }), [editor])
+
+  return (
+    <div className={cn('relative', VARIANT[variant], className)}>
+      <EditorContent editor={editor} className={cn(ROOM, !readOnly && 'cursor-text')} />
+      {/* Empty — never saved, or just deleted — shows what it is for, muted,
+          and is not part of the text. Drawn over the editor, where the text starts. */}
+      {empty && !readOnly && (
+        <span aria-hidden className="pointer-events-none absolute left-0 top-1 text-text-muted">{placeholder}</span>
+      )}
+    </div>
+  )
+}

package/src/SelectionToolbar.actions.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+/**
+ * The app's own buttons on the selection strip (`actions`, LEAF-4): pressing
+ * one runs it with the selection in place, and the strip closes. jsdom has no
+ * layout, so the view's focus and coordinates are stood in for.
+ */
+import { afterEach, expect, it, vi } from 'vitest'
+import { act, cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+import { KeptSelection, SelectionToolbar } from './SelectionToolbar'
+
+let editor: Editor | undefined
+
+afterEach(() => {
+  cleanup()
+  editor?.destroy()
+  editor = undefined
+  vi.useRealTimers()
+})
+
+it('runs an action with the selection in place, and closes the strip', async () => {
+  vi.useFakeTimers({ shouldAdvanceTime: true })
+  editor = new Editor({ extensions: [StarterKit, KeptSelection], content: '<p>some words to comment on</p>' })
+  vi.spyOn(editor.view, 'hasFocus').mockReturnValue(true)
+  vi.spyOn(editor.view, 'coordsAtPos').mockReturnValue({ top: 10, bottom: 20, left: 10, right: 20 })
+  const seen: { from: number; to: number }[] = []
+  const run = vi.fn((e: Editor) => seen.push({ from: e.state.selection.from, to: e.state.selection.to }))
+  render(<SelectionToolbar editor={editor} actions={[{ label: 'Comment', icon: <span aria-hidden />, run }]} />)
+
+  act(() => {
+    editor!.commands.setTextSelection({ from: 6, to: 11 })
+  })
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(400)
+  })
+  const button = await screen.findByRole('button', { name: 'Comment' })
+  await userEvent.setup({ advanceTimers: vi.advanceTimersByTime }).click(button)
+
+  expect(run).toHaveBeenCalledTimes(1)
+  expect(seen).toEqual([{ from: 6, to: 11 }])
+  expect(screen.queryByRole('button', { name: 'Comment' })).toBeNull()
+})

package/src/SelectionToolbar.mdx

@@ -16,6 +16,7 @@ over text you have already selected in an editor.
   itself when to appear: once a selection has stood still, centred over it.
 - `marks` chooses the buttons, in order: `bold`, `italic`, `underline`, `code`.
   The default is the first three.
+- `actions` adds the app's own buttons at the end, past a separator — Comment, in a document. Each `run`s with the selection in place, and the strip closes after it.
 - `link` adds the Link button, which turns the strip into one field for the
   address. Select words that are already a link and the field opens by itself,
   their address in it.

package/src/SelectionToolbar.tsx

@@ -7,7 +7,7 @@ import { IconBold, IconCode, IconItalic, IconLink, IconUnderline } from '@tabler
 import { Form } from './Form'
 import { Popover } from './Popover'
 import { TextInput } from './TextInput'
-import { Toolbar, ToolbarButton } from './Toolbar'
+import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar'
 import { shortcutLabel } from './shortcuts'
 
 /**
@@ -228,9 +228,26 @@ export interface SelectionToolbarProps {
    * nothing.
    */
   children?: ReactNode
+  /**
+   * The app's own buttons after the marks, past a separator: "Comment". Each
+   * runs with the selection still in place, and the strip closes after it.
+   */
+  actions?: readonly SelectionAction[]
+}
+
+/** One of the app's buttons in the strip. */
+export interface SelectionAction {
+  /** Says what it does: the tooltip and the button's name. */
+  label: string
+  /** A 16px icon. */
+  icon: ReactNode
+  /** The keys that do the same, shown in the tooltip ("Mod-Shift-M"). */
+  keys?: string
+  /** What it does, with the selection as it is. */
+  run: (editor: Editor) => void
 }
 
-export function SelectionToolbar({ editor, marks = ['bold', 'italic', 'underline'], link = false, children }: SelectionToolbarProps) {
+export function SelectionToolbar({ editor, marks = ['bold', 'italic', 'underline'], link = false, children, actions = [] }: SelectionToolbarProps) {
   /** The selection's top edge and horizontal centre; the face decides the rest. */
   const [anchor, setAnchor] = useState<{ top: number; centre: number } | null>(null)
   const [mode, setMode] = useState<Mode>('marks')
@@ -488,6 +505,23 @@ export function SelectionToolbar({ editor, marks = ['bold', 'italic', 'underline
             </ToolbarButton>
           )}
           {children}
+          {actions.length > 0 && <ToolbarSeparator />}
+          {actions.map((action) => (
+            <ToolbarButton
+              key={action.label}
+              aria-label={action.label}
+              tooltip={action.label}
+              tooltipShortcut={action.keys ? shortcutLabel(action.keys) : undefined}
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => {
+                // Closing first: it lets go of a kept selection, which the action may want to keep.
+                hide()
+                action.run(editor)
+              }}
+            >
+              {action.icon}
+            </ToolbarButton>
+          ))}
         </Toolbar>
       )}
     </Popover>

package/src/editor.ts

@@ -7,7 +7,22 @@
  * as the eslint ones are. The rest of the package it draws with — `Popover`,
  * `Toolbar`, `MenuItem`, `SuggestionMenu` — is the main entry's own, not a copy.
  */
-export { KeptSelection, SelectionToolbar, normalizeHref, type MarkId, type SelectionToolbarProps } from './SelectionToolbar'
+export { KeptSelection, SelectionToolbar, keepSelection, releaseSelection, normalizeHref, type MarkId, type SelectionAction, type SelectionToolbarProps } from './SelectionToolbar'
+export { ComposeBox, ComposeKeys, COMPOSE_EDITOR_CLASSES, type ComposeBoxProps } from './ComposeBox'
+export { InlineText, type InlineTextProps, type InlineTextHandle } from './InlineText'
+export {
+  CommentHighlights,
+  setCommentAnchors,
+  commentPlace,
+  commentElement,
+  anchorOfSelection,
+  quoteText,
+  type CommentAnchor,
+  type CommentHighlightsOptions,
+  type CommentPlace,
+  type CommentQuote,
+  type SelectionAnchor,
+} from './CommentHighlights'
 export { PastedImages, pastedImages, pastedImageName, type PastedImagesOptions, type ClipboardSource } from './PastedImages'
 export { PastedMarkdown, type PastedMarkdownOptions } from './PastedMarkdown'
 export { CodeBlockColours } from './CodeBlockColours'

package/src/looks.ts

@@ -67,3 +67,11 @@ export const MENU_TRIGGER_CLASSES = 'cursor-pointer rounded-md transition-colors
  * prefers-reduced-motion. CollapsibleSection's rows, and the rows under a NavItem.
  */
 export const COLLAPSIBLE_PANEL_CLASSES = 'h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0'
+
+/**
+ * The box a message or a comment is written in: Peek's writing box (its
+ * `looks.ts`, Katerina 24 September), moved with ComposeBox. Inset, a hairline,
+ * 12px in, 16px between the text and the row under it; the focus ring in Signal.
+ */
+export const WRITING_BOX_CLASSES =
+  'relative bg-bg-inset border border-border-default rounded-lg p-3 flex flex-col gap-4 signal:transition-shadow signal:focus-within:border-border-focus signal:focus-within:shadow-focus-ring'

package/src/registry/app.test.ts

@@ -596,7 +596,13 @@ describe('one search over the package and the apps', () => {
       root: app({ 'src/Composer.tsx': '/** Where a comment is written and sent. */\nexport function Composer() {\n  return <form />\n}\n' }),
       repo: 'fixture',
     })
-    expect(findInRegistries([packageRegistry, composer], 'comment composer')[0].entry).toMatchObject({ repo: 'fixture', name: 'Composer' })
+    // Since the Leaf prototype (9 October) the package has a box for writing comments, ComposeBox, and it answers first by its
+    // own purpose. What this guards still holds: the app's composer is found above the parts the words reach only through notes.
+    const found = findInRegistries([packageRegistry, composer], 'comment composer', { limit: 10 }).map((f) => `${f.entry.repo}:${f.entry.name}`)
+    expect(found[0]).toBe('estiva-ui:ComposeBox')
+    expect(found.indexOf('fixture:Composer')).toBeGreaterThan(0)
+    const triggers = found.indexOf('estiva-ui:ComposerTriggers')
+    if (triggers >= 0) expect(found.indexOf('fixture:Composer')).toBeLessThan(triggers)
   })
 
   it('says which apps hand a package part on, and how a default is imported', () => {

package/src/registry/registry.test.ts

@@ -26,7 +26,7 @@ import { SCHEMA_VERSION, validateRegistry, type Registry, type RegistryEntry } f
 const root = process.cwd()
 const registry = buildRegistry({ root })
 /** Editor extensions: named like components by the catalogue, and not React components. */
-const EDITOR_EXTENSIONS = ['KeptSelection', 'BlockId', 'UnknownBlock', 'ReferenceNode', 'AttachmentNode', 'PersonMention', 'UrgentPersonMention', 'CaptionedReference', 'ReferenceTrigger', 'SlashCommands', 'PastedImages', 'PastedMarkdown', 'CodeBlockColours', 'Checklist', 'Callout', 'ReferenceCards', 'LinkChips', 'ReferenceMenu']
+const EDITOR_EXTENSIONS = ['KeptSelection', 'BlockId', 'UnknownBlock', 'ReferenceNode', 'AttachmentNode', 'PersonMention', 'UrgentPersonMention', 'CaptionedReference', 'ReferenceTrigger', 'SlashCommands', 'PastedImages', 'PastedMarkdown', 'CodeBlockColours', 'Checklist', 'Callout', 'ReferenceCards', 'LinkChips', 'ReferenceMenu', 'CommentHighlights', 'ComposeKeys']
 const entry = (name: string): RegistryEntry => {
   const found = registry.entries.find((candidate) => candidate.name === name)
   if (!found) throw new Error(`no entry for ${name}`)
@@ -48,20 +48,20 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 166 names over 81 files: 115 components, 49 helpers and 2 hooks (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, moveBlock and blockDropCursor, the drop in the gutter, on 5 October, MembersPill and MembersDialog, moved from Peek (SHI-31), on 6 October, ShowMore on 7 October, AppProvider on 8 October, and KindIcon, thingKindOf and PastedImages with its two helpers, moved from Peek, on 8 October; CodeBlockColours, the coloured code block of the editor, on 9 October; Checklist, Callout, isChecklistTick and calloutLook (RIC-19) on 13 October; EditorTableControls and its four actions (RIC-21) on 13 October; ReferenceCards, useReferenceCards and its three helpers, the card a chip in a document asks for, on 14 October; LinkChips and its two helpers, a URL in a document read as its chip, on 14 October; ReferenceMenu, ReferenceMenuView and three helpers, the menu of a chip while writing, on 14 October; PastedMarkdown, markdown pasted as the blocks it spells (LEAF-10), on 15 October; turnIntoRows, turnListInto and turnQuoteInto, the block menu’s Turn into for a list and a quote (LEAF-11), on 15 October)', () => {
+  it('counts 178 names over 84 files: 119 components, 57 helpers and 2 hooks (InlineText, a title or the line under it edited where it stands (SUM-4), on 16 October; ComposeBox with ComposeKeys and its classes, CommentHighlights with its five helpers, and keepSelection and releaseSelection, from the Leaf prototype (LEAF-4), on 16 October;NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, moveBlock and blockDropCursor, the drop in the gutter, on 5 October, MembersPill and MembersDialog, moved from Peek (SHI-31), on 6 October, ShowMore on 7 October, AppProvider on 8 October, and KindIcon, thingKindOf and PastedImages with its two helpers, moved from Peek, on 8 October; CodeBlockColours, the coloured code block of the editor, on 9 October; Checklist, Callout, isChecklistTick and calloutLook (RIC-19) on 13 October; EditorTableControls and its four actions (RIC-21) on 13 October; ReferenceCards, useReferenceCards and its three helpers, the card a chip in a document asks for, on 14 October; LinkChips and its two helpers, a URL in a document read as its chip, on 14 October; ReferenceMenu, ReferenceMenuView and three helpers, the menu of a chip while writing, on 14 October; PastedMarkdown, markdown pasted as the blocks it spells (LEAF-10), on 15 October; turnIntoRows, turnListInto and turnQuoteInto, the block menu’s Turn into for a list and a quote (LEAF-11), on 15 October)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     // The `EDITOR_EXTENSIONS` count as components by their names; they are
     // editor extensions, documented on SelectionToolbar's, BlockNodes' and
     // ComposerTriggers' pages.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 115, helper: 49, hook: 2 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(81)
+    expect(kinds).toEqual({ component: 119, helper: 57, hook: 2 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(84)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
-    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(77)
-    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(89)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(80)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(98)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {

package/stories/Choosing.mdx

@@ -72,6 +72,9 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | Bold, italic and the like over selected text in an editor | **SelectionToolbar**, from `@estiva-app/ui/editor` — it follows the selection by itself |
 | A composer's `@`, `!@`, `[` and `/` — mention a person, reference something, format or insert | **ComposerTriggers** — `PersonMention`, `UrgentPersonMention`, `CaptionedReference`, `ReferenceTrigger` and `SlashCommands` from `@estiva-app/ui/editor`; the app passes its people, its items and its own `/` rows |
 | An editor that saves a block document and must keep its block ids | **BlockNodes** — `BlockId`, `UnknownBlock`, `ReferenceNode` and `AttachmentNode` from `@estiva-app/ui/editor`, beside StarterKit and TableKit |
+| A page's title or the line under it, edited where it stands, as in a document | **InlineText**, from `@estiva-app/ui/editor` — no box; Enter saves and moves on |
+| The box a message, a reply or a comment is written in and sent | **ComposeBox**, from `@estiva-app/ui/editor` — the app brings its editor and adds `ComposeKeys` |
+| Comments on words, a passage or whole blocks of a document, drawn where they are | **CommentHighlights**, from `@estiva-app/ui/editor` — a run of blocks and the words quoted; says which was clicked and which moved or are gone |
 | Move, turn, duplicate or delete one block of a document being edited | **EditorBlockHandle**, from `@estiva-app/ui/editor`, with your rows after its own |
 | Add or delete a table's rows and columns in a document being edited | **EditorTableControls**, from `@estiva-app/ui/editor`, inside the EditorBlockHandle |
 | Offer a link or a comment on one block of a document being read | **BlockHandle** — your rows only, and no Tiptap loaded |

package/dist/widgets-2/fixtures.d.ts

@@ -1,102 +0,0 @@
-/**
- * Widgets 2 prototype: the placeholder things every widget on these pages
- * draws. Words are placeholders (stories-and-pages.md); the kinds are named,
- * because telling them apart is what the prototype is for.
- */
-import type { ThingKind } from '../KindIcon';
-/** The colours a status draws in, as the apps' manifests name them. */
-export type StatusColour = 'neutral' | 'blue' | 'green' | 'muted';
-export interface Status {
-    label: string;
-    colour: StatusColour;
-}
-/** One thing a link can stand for, with every field any app draws today. */
-export interface Thing {
-    /** The kinds the prototype covers, one more than KindIcon has: a page. */
-    kind: ThingKind | 'page';
-    /** The noun a card's corner says. */
-    noun: string;
-    /** The app it opens in. */
-    app: string;
-    title: string;
-    /** Its key, the way people say it: an issue's "WID-2". */
-    key?: string;
-    /** The line under the title: the project an issue is in, a page's Folder. */
-    subtitle?: string;
-    /** The opening of its description, a page's text, a message's words: what the apps draw today. */
-    body?: string;
-    /**
-     * A short summary of the file, one or two sentences (Miky, 15 Oct: detailed
-     * shows the summary, not the opening of the long description). No file
-     * carries one yet; it is its own project.
-     */
-    summary?: string;
-    status?: Status;
-    assignee?: string;
-    author?: string;
-    /** Everyone who wrote a page. */
-    authors?: string[];
-    comments?: number;
-    /**
-     * The reader has something unread in its conversation: they are a member
-     * and it moved since they last read it (SPEC §11.8, membership-replaces-following).
-     */
-    unread?: boolean;
-    /** A project's issues, drawn as rows inside its detailed card. */
-    children?: {
-        title: string;
-        key: string;
-        status: Status;
-        assignee?: string;
-    }[];
-    /** A project's progress line. */
-    progress?: string;
-    /** A project's progress as numbers, for the ring. */
-    done?: {
-        done: number;
-        total: number;
-    };
-    /** A topic: how many conversations, who is in it, and its latest one. */
-    conversations?: number;
-    members?: string[];
-    latest?: {
-        author: string;
-        body: string;
-        at: string;
-    };
-    updated?: string;
-    /** Where it is placed (WID-3): still loading, or not available to this reader. Ready when absent. */
-    state?: 'loading' | 'unavailable';
-}
-export declare const ISSUE: Thing;
-export declare const PROJECT: Thing;
-export declare const TOPIC: Thing;
-export declare const MESSAGE: Thing;
-export declare const PAGE: Thing;
-/** A block of a description: drawn live, as the part it is. */
-export declare const PART: {
-    heading: string;
-    noun: string;
-    app: string;
-    blocks: string[];
-};
-export declare const ATTACHMENT: {
-    name: string;
-    size: number;
-    contentType: string;
-};
-export declare const ATTACHMENT_FILE: {
-    name: string;
-    size: number;
-    contentType: string;
-};
-/** A file the reader cannot read: only its kind and app are known, from its address. */
-export declare const UNREADABLE: {
-    kind: "issue";
-    noun: string;
-    app: string;
-    address: string;
-};
-/** A small picture for the attachment, drawn rather than fetched. */
-export declare const PICTURE: string;
-//# sourceMappingURL=fixtures.d.ts.map

package/dist/widgets-2/fixtures.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fixtures.d.ts","sourceRoot":"","sources":["../../src/widgets-2/fixtures.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAE5C,uEAAuE;AACvE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;AAEjE,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,YAAY,CAAA;CACrB;AAED,4EAA4E;AAC5E,MAAM,WAAW,KAAK;IACpB,0EAA0E;IAC1E,IAAI,EAAE,SAAS,GAAG,MAAM,CAAA;IACxB,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,2BAA2B;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kGAAkG;IAClG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,kEAAkE;IAClE,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC9E,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qDAAqD;IACrD,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IACtC,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,MAAM,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IACrD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,qGAAqG;IACrG,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;CAClC;AAWD,eAAO,MAAM,KAAK,EAAE,KAanB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAA;AAED,+DAA+D;AAC/D,eAAO,MAAM,IAAI;;;;;CAKhB,CAAA;AAED,eAAO,MAAM,UAAU;;;;CAAuE,CAAA;AAC9F,eAAO,MAAM,eAAe;;;;CAAgF,CAAA;AAE5G,wFAAwF;AACxF,eAAO,MAAM,UAAU;;;;;CAAiH,CAAA;AAExI,qEAAqE;AACrE,eAAO,MAAM,OAAO,QAIjB,CAAA"}

package/dist/widgets-2/places.d.ts

@@ -1,105 +0,0 @@
-import { type ReactNode } from 'react';
-import type { Thing } from './fixtures';
-/** A piece of a sentence: words, or a link to a file. */
-export type Piece = string | Thing;
-/** One line of text: a link alone on its line, or a sentence of words and links. */
-export type Line = Thing | Piece[];
-/** Every file the lines link to, each once. */
-export declare function linksIn(lines: Line[]): Thing[];
-/** The file whose card goes under a message: the one it links. None when it links two or more. */
-export declare function cardFileOf(lines: Line[]): Thing | undefined;
-/** A message that is nothing but one link: it shows the card, not the row. */
-export declare function isOnlyOneLink(lines: Line[]): boolean;
-/** A file's card: a linked message draws as a message, every other file as its detailed card; loading and not available as the proposed kit draws them. */
-export declare function CardOf({ thing }: {
-    thing: Thing;
-}): import("react").JSX.Element;
-export interface PlacedLinesProps {
-    lines: Line[];
-    /** In a document: the lone-line links switched to their card, by line index. */
-    cards?: number[];
-    /** In a document: a click on a lone-line link, which opens its chip menu. */
-    onLink?: (index: number) => void;
-    /** Drawn under a line, by line index: the chip menu, open. */
-    under?: (index: number) => ReactNode;
-    className?: string;
-}
-/** Text whose links draw by where they sit: a chip in a sentence, a row alone on its line, or (in a document) the card chosen for that line. */
-export declare function PlacedLines({ lines, cards, onLink, under, className }: PlacedLinesProps): import("react").JSX.Element;
-export interface CardUnderProps {
-    thing: Thing;
-    /** The ✕ that removes it: under the message box before sending, or the author's own on a sent message. */
-    onRemove?: () => void;
-    /** On a sent message the ✕ shows on hover; under the box it always shows. */
-    removeOnHover?: boolean;
-    className?: string;
-}
-/** The one file's card under a message, and the ✕ that removes it. */
-export declare function CardUnder({ thing, onRemove, removeOnHover, className }: CardUnderProps): import("react").JSX.Element;
-export interface PlacedMessageProps {
-    lines: Line[];
-    /** The card was removed with ✕: before sending, or by the author afterwards. */
-    removed?: boolean;
-    /** Draws the ✕; without it the card shows with none, as to anyone but the author. */
-    onRemove?: () => void;
-    removeOnHover?: boolean;
-    /**
-     * An old message, sent before Widgets 2 with a `compact` tag for each of
-     * these: no card was added to it, and each still draws as a row under it.
-     */
-    oldCompact?: Thing[];
-    /**
-     * The file whose page this message is read on, as under "Mentioned in": it
-     * gets no card, since you are already on it; its chip and row still draw
-     * (Miky, 15 Oct, WID-3).
-     */
-    here?: Thing;
-    className?: string;
-}
-/**
- * A message's text, and under it the one file's card. A file with its card
- * under the message draws no row in it (a chip in a sentence still draws), so
- * a message that is only one link shows its card alone.
- */
-export declare function PlacedMessage({ lines, removed, onRemove, removeOnHover, oldCompact, here, className }: PlacedMessageProps): import("react").JSX.Element;
-/** A sent message whose author can remove its card with ✕, live: try it. */
-export declare function SentMessage({ lines, author, className }: {
-    lines: Line[];
-    author?: boolean;
-    className?: string;
-}): import("react").JSX.Element;
-export interface ChipMenuProps {
-    thing: Thing;
-    /**
-     * A lone-line link offers its card; a chip in a sentence offers Open only,
-     * and so does a link to what has no card worth choosing (a Folder, a file
-     * that is not a picture).
-     */
-    alone?: boolean;
-    shownAs?: 'row' | 'card';
-    onShowAs?: (as: 'row' | 'card') => void;
-    onOpen?: () => void;
-}
-/** What a link in a document offers its writer: Open, and on a lone-line link of a kind that has one, its card in that line's place. */
-export declare function ChipMenu({ thing, alone, shownAs, onShowAs, onOpen }: ChipMenuProps): import("react").JSX.Element;
-/** A document's text with its chip menu, live: click a lone-line link, then choose Row or Card. */
-export declare function PlacedDocument({ lines, initialCards, className }: {
-    lines: Line[];
-    initialCards?: number[];
-    className?: string;
-}): import("react").JSX.Element;
-/**
- * A description's and a page's `/` menu with the widget entry (Miky's QA note,
- * 15 Oct: "`/` section where you can use `[` to insert a widget"). Format rows
- * shortened to three; Insert as the app has it, plus the link.
- */
-export declare function SlashMenuWithLink({ file, table }: {
-    file?: boolean;
-    table?: boolean;
-}): import("react").JSX.Element;
-/** The `[` list the widget entry opens: the files to link, each led by its kind's icon. */
-export declare function LinkPicker({ files, query }: {
-    files: Thing[];
-    query?: string;
-}): import("react").JSX.Element;
-//# sourceMappingURL=places.d.ts.map

package/dist/widgets-2/places.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"places.d.ts","sourceRoot":"","sources":["../../src/widgets-2/places.tsx"],"names":[],"mappings":"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"}