@estiva-app/ui 0.72.0-widgets2.1 → 0.72.0

package/src/ComposeBox.tsx

@@ -0,0 +1,183 @@
+import { useCallback, useEffect, useState, type ReactNode } from 'react'
+import { Extension } from '@tiptap/core'
+import { EditorContent, type Editor } from '@tiptap/react'
+import { IconArrowUp } from '@tabler/icons-react'
+import { IconButton } from './IconButton'
+import { Toolbar } from './Toolbar'
+import { cn } from './cn'
+import { richTextClassName } from './RichText'
+import { WRITING_BOX_CLASSES } from './looks'
+import { SelectionToolbar, type SelectionToolbarProps } from './SelectionToolbar'
+import { isSuggestionActive } from './suggestionPopup'
+
+/**
+ * The box a message, a reply or a comment is written in, from Katerina's Leaf
+ * prototype (9 October). Peek's `ComposeBox`, its look and its keys, with
+ * what only Peek knows left in Peek: drafts, uploads, highlights, its text
+ * format. The app makes the editor (its extensions are its own) and adds
+ * `ComposeKeys`; this draws the box around it and sends.
+ */
+
+/** The editor's own classes inside the box: Peek's, rich text with no outline. Put them in `editorProps.attributes.class`. */
+export const COMPOSE_EDITOR_CLASSES = richTextClassName('default', 'outline-none w-full bg-transparent min-h-[20px] [&>p+p]:-mt-1')
+
+type ComposeKeysStorage = { send: (() => boolean) | null }
+
+/**
+ * Enter sends; Shift+Enter is a new line — in a list a new item (or out of the
+ * list, on an empty one), in a quote a new line (or out of it, on an empty one).
+ * Peek's keys, as its ComposeBox has them. Enter while a `/`, `@` or `[` list is
+ * open picks a row instead. `ComposeBox` says what sending does.
+ */
+export const ComposeKeys = Extension.create<Record<string, never>, ComposeKeysStorage>({
+  name: 'composeKeys',
+  addStorage() {
+    return { send: null }
+  },
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        if (isSuggestionActive()) return false
+        this.storage.send?.()
+        return true
+      },
+      'Shift-Enter': ({ editor }) => {
+        const { $from } = editor.state.selection
+        for (let d = $from.depth; d > 0; d--) {
+          const node = $from.node(d)
+          if (node.type.name === 'listItem') {
+            return node.textContent.length === 0 ? editor.commands.liftListItem('listItem') : editor.commands.splitListItem('listItem')
+          }
+          if (node.type.name === 'blockquote') {
+            if ($from.parent.textContent.length === 0) return editor.commands.lift('paragraph')
+            break
+          }
+        }
+        return editor.commands.splitBlock()
+      },
+    }
+  },
+})
+
+/** Nothing written: no text, no chip and no picture — empty lines, lists or quotes only. */
+function isEmptyDoc(editor: Editor): boolean {
+  const doc = editor.state.doc
+  if (doc.textContent.length > 0) return false
+  let empty = true
+  doc.descendants((node) => {
+    if (node.isAtom && node.type.name !== 'hardBreak') empty = false
+  })
+  return empty
+}
+
+export interface ComposeBoxProps {
+  /** The app's editor, with `ComposeKeys` in its extensions and `COMPOSE_EDITOR_CLASSES` on it. `null` while it loads. */
+  editor: Editor | null
+  /**
+   * Send what is written. The box empties afterwards — unless this returns
+   * `false`: nothing was sent, and the words stay.
+   */
+  onSend: (editor: Editor) => void | boolean
+  /** Said in the empty box: words, and a `Kbd` where a key helps ("type / for commands"). */
+  placeholder: ReactNode
+  /** The tools under the text, left: `ToolbarButton`s (attach, highlight). One Tab stop. */
+  tools?: ReactNode
+  /** What is attached, under the text: `AttachmentCard pending`s. */
+  attachments?: ReactNode
+  /** Something to send even with no words — a file ready. */
+  ready?: boolean
+  /** Sending waits — a file still uploading. */
+  holding?: boolean
+  /** The bar down the text's left: an urgent mention or a highlight, as Peek draws it. */
+  marked?: boolean
+  /** The selection strip's buttons: its marks, Link, and the app's own (`actions`). */
+  selection?: Pick<SelectionToolbarProps, 'marks' | 'link' | 'actions'>
+  className?: string
+}
+
+/**
+ * The box for writing: the text, the selection strip over it, what is
+ * attached, the tools and Send. Enter sends (`ComposeKeys`), and so does the
+ * button.
+ */
+export function ComposeBox({ editor, onSend, placeholder, tools, attachments, ready = false, holding = false, marked = false, selection, className }: ComposeBoxProps) {
+  const [empty, setEmpty] = useState(true)
+  const canSend = (!empty || ready) && !holding
+
+  const send = useCallback((): boolean => {
+    if (!editor || holding || (isEmptyDoc(editor) && !ready)) return true
+    if (onSend(editor) === false) return true
+    editor.commands.clearContent(true)
+    editor.commands.focus()
+    return true
+  }, [editor, holding, ready, onSend])
+
+  // Enter, through `ComposeKeys`, sends the way the button does.
+  useEffect(() => {
+    if (!editor) return
+    const storage = (editor.storage as unknown as { composeKeys?: ComposeKeysStorage }).composeKeys
+    if (!storage) return
+    storage.send = send
+    return () => {
+      storage.send = null
+    }
+  }, [editor, send])
+
+  useEffect(() => {
+    if (!editor) return
+    const read = () => setEmpty(isEmptyDoc(editor))
+    read()
+    editor.on('update', read)
+    return () => {
+      editor.off('update', read)
+    }
+  }, [editor])
+
+  return (
+    <div className={cn('relative', className)}>
+      <div className={cn(WRITING_BOX_CLASSES, 'focus-within:border-border-strong transition-colors')}>
+        <div data-composer-editor className={cn('relative min-h-[20px] transition-all', marked && 'border-l-4 border-border-strong pl-2')}>
+          <EditorContent editor={editor} />
+          <SelectionToolbar editor={editor} {...selection} />
+          {empty && (
+            <div className="pointer-events-none absolute inset-0 flex flex-wrap items-center gap-1 text-body-2 text-text-muted">{placeholder}</div>
+          )}
+        </div>
+
+        {attachments && <div className="flex flex-wrap gap-2">{attachments}</div>}
+
+        {/* The tools are one strip — one Tab stop, arrows along it; Send, the answer rather than a tool, keeps its own. */}
+        <div className="flex items-center justify-between">
+          {tools ? (
+            <Toolbar aria-label="Compose tools" surface={false} className="flex items-center gap-1">
+              {tools}
+            </Toolbar>
+          ) : (
+            <span />
+          )}
+          <div className="flex items-center gap-2.5">
+            <span className="hidden select-none font-mono text-menu font-normal tracking-wider text-text-muted signal:inline">Enter to send · Shift+Enter new line</span>
+            {/* Focus stays in the text: the press sends on its way down. A keyboard press is the click (`detail` 0), so a click never sends twice. */}
+            <IconButton
+              variant="primary"
+              onMouseDown={(e) => {
+                e.preventDefault()
+                send()
+              }}
+              onClick={(e) => {
+                if (e.detail === 0) send()
+              }}
+              disabled={!canSend}
+              aria-label="Send"
+              tooltip="Send"
+              tooltipShortcut="Enter"
+              glow={canSend}
+            >
+              <IconArrowUp size={16} stroke={1.5} />
+            </IconButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/ComposerTriggers.tsx

@@ -7,6 +7,7 @@ import { NodeViewWrapper, ReactNodeViewRenderer, type ReactNodeViewProps } from
 import { Avatar } from './Avatar'
 import { EnterHint } from './Menu'
 import { inlineChipClassName } from './InlineChip'
+import { WithTooltip } from './Tooltip'
 import type { SuggestionMenuRow } from './SuggestionMenu'
 import { suggestionPopup, type SuggestionPopupOptions } from './suggestionPopup'
 
@@ -308,9 +309,14 @@ export const CaptionedReference = Mention.extend<MentionOptions & CaptionedRefer
     const { icon, iconFor } = this.options
     return ReactNodeViewRenderer(
       ({ node }: ReactNodeViewProps) => (
-        <NodeViewWrapper as="span" className={inlineChipClassName('neutral', 'max-w-[24ch] cursor-default')}>
-          <span className="flex items-center justify-center w-4 h-4 shrink-0 text-text-secondary">{iconFor?.(node.attrs.uri ?? null) ?? icon}</span>
-          <span className="truncate">{captionOf(node.attrs.label, node.attrs.snippet)}</span>
+        // The caption is cut at 24ch, so the whole of it is on hover, in the package's tooltip (UIG-14) — as Peek's sent chip has it.
+        <NodeViewWrapper as="span">
+          <WithTooltip inline label={captionOf(node.attrs.label, node.attrs.snippet)}>
+            <span className={inlineChipClassName('neutral', 'max-w-[24ch] cursor-default')}>
+              <span className="flex items-center justify-center w-4 h-4 shrink-0 text-text-secondary">{iconFor?.(node.attrs.uri ?? null) ?? icon}</span>
+              <span className="truncate">{captionOf(node.attrs.label, node.attrs.snippet)}</span>
+            </span>
+          </WithTooltip>
         </NodeViewWrapper>
       ),
       { as: 'span' },

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,21 @@
  * 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 {
+  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 177 names over 83 files: 118 components, 57 helpers and 2 hooks (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: 118, helper: 57, hook: 2 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(83)
   })
 
   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(79)
+    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,8 @@ 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 |
+| 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,99 +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[];
-    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, 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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"}