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

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

@@ -65,6 +65,8 @@ export interface Thing {
         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;

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

@@ -1 +1 @@
-{"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;CACjB;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"}
+{"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

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"places.d.ts","sourceRoot":"","sources":["../../src/widgets-2/places.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,yDAAyD;AACzD,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,KAAK,CAAA;AAClC,oFAAoF;AACpF,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,KAAK,EAAE,CAAA;AAIlC,+CAA+C;AAC/C,wBAAgB,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,CAE9C;AAED,kGAAkG;AAClG,wBAAgB,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,GAAG,SAAS,CAG3D;AAED,8EAA8E;AAC9E,wBAAgB,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,OAAO,CAEpD;AAED,2JAA2J;AAC3J,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,+BAIjD;AAkBD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAA;IACb,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,8DAA8D;IAC9D,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,gJAAgJ;AAChJ,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAU,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAqC5F;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAA;IACZ,0GAA0G;IAC1G,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAqB,EAAE,SAAS,EAAE,EAAE,cAAc,+BAgB9F;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,IAAI,EAAE,CAAA;IACb,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,EAAE,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAe,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,kBAAkB,+BAY3H;AAED,4EAA4E;AAC5E,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,MAAa,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,IAAI,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAGvH;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,KAAK,CAAA;IACZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wIAAwI;AACxI,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAY,EAAE,OAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,aAAa,+BA2BjG;AAED,mGAAmG;AACnG,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,YAAiB,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,IAAI,EAAE,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BA4BrI;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,IAAW,EAAE,KAAY,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,+BAkBnG;AAED,2FAA2F;AAC3F,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAU,EAAE,EAAE;IAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAYnF"}

package/dist/widgets-2.d.ts

@@ -8,4 +8,5 @@
  */
 export * from './widgets-2/proposed';
 export * from './widgets-2/fixtures';
+export * from './widgets-2/places';
 //# sourceMappingURL=widgets-2.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"widgets-2.d.ts","sourceRoot":"","sources":["../src/widgets-2.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA"}
+{"version":3,"file":"widgets-2.d.ts","sourceRoot":"","sources":["../src/widgets-2.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA"}

package/dist/widgets-2.js

@@ -388,18 +388,176 @@ var UNREADABLE = { kind: "issue", noun: "Issue", app: "Ship", address: "naddr1qq
 var PICTURE = "data:image/svg+xml;utf8," + encodeURIComponent(
   '<svg xmlns="http://www.w3.org/2000/svg" width="480" height="300"><rect width="480" height="300" fill="#8a94a6"/><circle cx="360" cy="90" r="40" fill="#d8dde6"/><path d="M0 300 L170 120 L300 260 L380 190 L480 300 Z" fill="#5d6778"/></svg>'
 );
+
+// src/widgets-2/places.tsx
+import {
+  IconCheck,
+  IconExternalLink,
+  IconH1,
+  IconLetterT,
+  IconLink,
+  IconListCheck,
+  IconPaperclip as IconPaperclip2,
+  IconTable,
+  IconX
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { cn as cn2 } from "@estiva-app/ui";
+import { IconButton } from "@estiva-app/ui";
+import { MenuItem, MenuPanel as MenuPanel2, MenuSection, MenuSeparator } from "@estiva-app/ui";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var isLink = (piece) => typeof piece === "object" && !Array.isArray(piece);
+function linksIn(lines) {
+  return [...new Set(lines.flatMap((line) => isLink(line) ? [line] : line.filter(isLink)))];
+}
+function cardFileOf(lines) {
+  const files = linksIn(lines);
+  return files.length === 1 ? files[0] : void 0;
+}
+function isOnlyOneLink(lines) {
+  return lines.length === 1 && isLink(lines[0]);
+}
+function CardOf({ thing }) {
+  if (thing.state === "loading") return /* @__PURE__ */ jsx2(CardLoading, { kind: thing.kind, layout: "detailed", shape: loadingShapeOf(thing) });
+  if (thing.state === "unavailable") return /* @__PURE__ */ jsx2(CardUnavailable, { kind: thing.kind, noun: thing.noun, app: thing.app });
+  return thing.kind === "message" ? /* @__PURE__ */ jsx2(MessageCard, { thing }) : /* @__PURE__ */ jsx2(DetailedCard, { thing });
+}
+function Row({ thing, preview = false }) {
+  if (thing.state === "loading") return /* @__PURE__ */ jsx2(CardLoading, { kind: thing.kind, layout: "compact" });
+  if (thing.state === "unavailable") return /* @__PURE__ */ jsx2(CardUnavailable, { kind: thing.kind, noun: thing.noun, app: thing.app });
+  return /* @__PURE__ */ jsx2(CompactCard, { thing, preview });
+}
+function Sentence({ pieces }) {
+  return /* @__PURE__ */ jsx2("p", { className: "text-body-2 text-text-primary", children: pieces.map((piece, i) => typeof piece === "string" ? /* @__PURE__ */ jsx2("span", { children: piece }, i) : /* @__PURE__ */ jsx2(ReferenceChip, { thing: piece, state: piece.state, preview: !piece.state }, i)) });
+}
+function PlacedLines({ lines, cards = [], onLink, under, className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn2("flex flex-col gap-2", className), children: lines.map((line, i) => /* @__PURE__ */ jsxs2("div", { className: "relative flex flex-col", children: [
+    isLink(line) ? onLink ? (
+      // While writing, a click on the link opens its menu instead of following it (the record clicking-a-chip-while-editing-opens-a-menu).
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          "aria-haspopup": "menu",
+          className: "w-full min-w-0 cursor-pointer",
+          onClickCapture: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onLink(i);
+          },
+          onKeyDown: (event) => {
+            if (event.key === "Enter") onLink(i);
+          },
+          children: cards.includes(i) ? /* @__PURE__ */ jsx2(CardOf, { thing: line }) : /* @__PURE__ */ jsx2(Row, { thing: line })
+        }
+      )
+    ) : cards.includes(i) ? /* @__PURE__ */ jsx2(CardOf, { thing: line }) : /* @__PURE__ */ jsx2(Row, { thing: line, preview: true }) : /* @__PURE__ */ jsx2(Sentence, { pieces: line }),
+    under?.(i)
+  ] }, i)) });
+}
+function CardUnder({ thing, onRemove, removeOnHover = false, className }) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn2("group/card flex items-start gap-1", className), children: [
+    /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx2(CardOf, { thing }) }),
+    onRemove && // At the card's top corner, not its middle: a tall card's ✕ halfway down reads as belonging to nothing.
+    /* @__PURE__ */ jsx2("div", { className: "flex shrink-0 self-start pt-2", children: /* @__PURE__ */ jsx2(IconButton, { "aria-label": "Remove card", tooltip: "Remove card", onClick: onRemove, className: cn2(removeOnHover && "opacity-0 group-hover/card:opacity-100 focus-visible:opacity-100"), children: /* @__PURE__ */ jsx2(IconX, { size: 16 }) }) })
+  ] });
+}
+function PlacedMessage({ lines, removed = false, onRemove, removeOnHover, oldCompact, className }) {
+  const file = removed || oldCompact ? void 0 : cardFileOf(lines);
+  const shown = file ? lines.filter((line) => line !== file) : lines;
+  return /* @__PURE__ */ jsxs2("div", { className: cn2("flex flex-col gap-2", className), children: [
+    shown.length > 0 && /* @__PURE__ */ jsx2(PlacedLines, { lines: shown }),
+    file && /* @__PURE__ */ jsx2(CardUnder, { thing: file, onRemove, removeOnHover, className: "max-w-[480px]" }),
+    oldCompact?.map((thing, i) => /* @__PURE__ */ jsx2(CompactCard, { thing, preview: true }, i))
+  ] });
+}
+function SentMessage({ lines, author = true, className }) {
+  const [removed, setRemoved] = useState(false);
+  return /* @__PURE__ */ jsx2(PlacedMessage, { lines, removed, onRemove: author ? () => setRemoved(true) : void 0, removeOnHover: true, className });
+}
+function ChipMenu({ thing, alone = true, shownAs = "row", onShowAs, onOpen }) {
+  return /* @__PURE__ */ jsx2(MenuPanel2, { className: "w-[200px]", children: /* @__PURE__ */ jsxs2("div", { role: "menu", "aria-label": "Link", className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx2(MenuItem, { role: "menuitem", label: "Open", leading: /* @__PURE__ */ jsx2(IconExternalLink, { size: 16 }), onClick: onOpen }),
+    alone && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx2(MenuSeparator, {}),
+      /* @__PURE__ */ jsx2("div", { role: "group", "aria-label": "Show as", children: /* @__PURE__ */ jsx2(MenuSection, { label: "Show as", children: ["row", "card"].map((as) => /* @__PURE__ */ jsx2(
+        MenuItem,
+        {
+          role: "menuitemradio",
+          "aria-checked": shownAs === as,
+          label: as === "row" ? "Row" : "Card",
+          trailing: shownAs === as ? /* @__PURE__ */ jsx2(IconCheck, { size: 16, "aria-hidden": true }) : void 0,
+          onClick: () => onShowAs?.(as)
+        },
+        as
+      )) }) })
+    ] })
+  ] }) });
+}
+function PlacedDocument({ lines, initialCards = [], className }) {
+  const [cards, setCards] = useState(initialCards);
+  const [open, setOpen] = useState(null);
+  return /* @__PURE__ */ jsx2(
+    PlacedLines,
+    {
+      lines,
+      cards,
+      className,
+      onLink: (i) => setOpen(open === i ? null : i),
+      under: (i) => {
+        const line = lines[i];
+        if (open !== i || !isLink(line)) return null;
+        return /* @__PURE__ */ jsx2("div", { className: "absolute left-0 top-full z-10 mt-1", children: /* @__PURE__ */ jsx2(
+          ChipMenu,
+          {
+            thing: line,
+            shownAs: cards.includes(i) ? "card" : "row",
+            onOpen: () => setOpen(null),
+            onShowAs: (as) => {
+              setCards(as === "card" ? [...cards, i] : cards.filter((c) => c !== i));
+              setOpen(null);
+            }
+          }
+        ) });
+      }
+    }
+  );
+}
+function SlashMenuWithLink({ file = true, table = true }) {
+  return /* @__PURE__ */ jsx2(MenuPanel2, { className: "w-[260px]", children: /* @__PURE__ */ jsxs2("div", { role: "menu", "aria-label": "Insert", className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsxs2(MenuSection, { label: "Format", children: [
+      /* @__PURE__ */ jsx2(MenuItem, { label: "Text", leading: /* @__PURE__ */ jsx2(IconLetterT, { size: 16 }) }),
+      /* @__PURE__ */ jsx2(MenuItem, { label: "Heading", leading: /* @__PURE__ */ jsx2(IconH1, { size: 16 }), shortcut: "#" }),
+      /* @__PURE__ */ jsx2(MenuItem, { label: "Checklist", leading: /* @__PURE__ */ jsx2(IconListCheck, { size: 16 }), shortcut: "[]" })
+    ] }),
+    /* @__PURE__ */ jsx2(MenuSeparator, {}),
+    /* @__PURE__ */ jsxs2(MenuSection, { label: "Insert", children: [
+      table && /* @__PURE__ */ jsx2(MenuItem, { label: "Table", leading: /* @__PURE__ */ jsx2(IconTable, { size: 16 }) }),
+      file && /* @__PURE__ */ jsx2(MenuItem, { label: "File", leading: /* @__PURE__ */ jsx2(IconPaperclip2, { size: 16 }) }),
+      /* @__PURE__ */ jsx2(MenuItem, { label: "Link to a file", leading: /* @__PURE__ */ jsx2(IconLink, { size: 16 }), shortcut: "[", selected: true })
+    ] })
+  ] }) });
+}
+function LinkPicker({ files, query = "" }) {
+  return /* @__PURE__ */ jsx2(MenuPanel2, { className: "w-[320px]", children: /* @__PURE__ */ jsx2("div", { role: "listbox", "aria-label": "Link to a file", className: "flex flex-col gap-0.5", children: /* @__PURE__ */ jsx2(MenuSection, { label: query ? `Files matching \u201C${query}\u201D` : "Recent files", children: files.map((thing, i) => /* @__PURE__ */ jsx2(MenuItem, { role: "option", label: thing.kind === "message" ? `${thing.author}: ${thing.body}` : thing.title, leading: /* @__PURE__ */ jsx2(ThingIcon, { kind: thing.kind }), hint: thing.key && /* @__PURE__ */ jsx2("span", { className: "text-caption text-text-secondary", children: thing.key }), selected: i === 0 }, i)) }) }) });
+}
 export {
   ATTACHMENT,
   ATTACHMENT_FILE,
   AttachmentChip,
   CardLoading,
+  CardOf,
   CardUnavailable,
+  CardUnder,
+  ChipMenu,
   CommentAnchor,
   CompactCard,
   DetailedCard,
   HoverPreview,
   HoverPreviewOpen,
   ISSUE,
+  LinkPicker,
   MESSAGE,
   MessageCard,
   PAGE,
@@ -407,12 +565,20 @@ export {
   PICTURE,
   PROJECT,
   PartCard,
+  PlacedDocument,
+  PlacedLines,
+  PlacedMessage,
   ProgressRing,
   ReferenceChip,
+  SentMessage,
+  SlashMenuWithLink,
   StatusMark,
   TOPIC,
   ThingIcon,
   UNREADABLE,
+  cardFileOf,
+  isOnlyOneLink,
+  linksIn,
   loadingShapeOf
 };
 //# sourceMappingURL=widgets-2.js.map

package/dist/widgets-2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/widgets-2/proposed.tsx", "../src/widgets-2/fixtures.ts"],
-  "sourcesContent": ["/**\n * Widgets 2 prototype: the proposed shared kit, one drawing of each widget for\n * Peek, Ship and Leaf alike. Written as the package would export it: no app\n * name and no product noun in a name or a prop. The kind's icon, the key and\n * every field arrive as data from the app's manifest.\n *\n * In `src/` on `concept/widgets-2` only, so the apps' own Storybooks can place\n * it (WID-3): `@estiva-app/ui/widgets-2`, an unlisted entry published only as a\n * `concept` prerelease. The build project shapes the real exports from it once\n * Miky and Katerina approve it.\n *\n * Second iteration, from Miky's notes on WID-2 (15 Oct):\n * - no noun in a card's corner and no \"Open in \u2026\": the icon says what it is,\n *   and the title is the link;\n * - an issue shows its key; the only status and assignee are the actionable ones;\n * - detailed shows the file's short summary, not the opening of its description;\n * - hovering a chip or a compact card shows the detailed card;\n * - a project shows its progress as a ring, its status and lead as actions,\n *   its comments, and each issue's assignee;\n * - a topic shows its conversations, its last update and its members, and\n *   detailed adds the latest conversation;\n * - a message is drawn with its author's face; a page with its authors and\n *   its last edit.\n */\nimport { IconCircle, IconCircleCheck, IconCircleDashed, IconCircleHalf2, IconCircleX, IconFileText, IconMessage2, IconPaperclip } from '@tabler/icons-react'\nimport type { ReactNode } from 'react'\nimport { Avatar } from '../Avatar'\nimport { AvatarGroup } from '../AvatarGroup'\nimport { Card } from '../Card'\nimport { cn } from '../cn'\nimport { InlineChip } from '../InlineChip'\nimport { KindIcon } from '../KindIcon'\nimport { Link } from '../Link'\nimport { MenuPanel } from '../Menu'\nimport { PreviewCard } from '../PreviewCard'\nimport { Select } from '../Select'\nimport { SkeletonBar } from '../Skeleton'\nimport { UnreadDot } from '../UnreadDot'\nimport type { Status, StatusColour, Thing } from './fixtures'\n\nconst HREF = '#'\nconst noop = () => {}\n\n/* ------------------------------------------------------------ the parts */\n\nconst STATUS_ICON: Record<StatusColour, { Icon: typeof IconCircle; tone: string }> = {\n  neutral: { Icon: IconCircleDashed, tone: 'text-text-secondary' },\n  blue: { Icon: IconCircleHalf2, tone: 'text-info-default' },\n  green: { Icon: IconCircleCheck, tone: 'text-success-default' },\n  muted: { Icon: IconCircleX, tone: 'text-text-muted' },\n}\n\n/** A status as its shape: Ship's icons, which read without colour. */\nexport function StatusMark({ status }: { status: Status }) {\n  return (\n    <span className=\"inline-flex shrink-0 items-center\" title={status.label}>\n      <StatusIcon status={status} />\n      <span className=\"sr-only\">{status.label}</span>\n    </span>\n  )\n}\n\n/** The status's shape alone, beside words that already name it. */\nfunction StatusIcon({ status }: { status: Status }) {\n  const { Icon, tone } = STATUS_ICON[status.colour]\n  return <Icon size={14} stroke={1.5} className={cn('shrink-0', tone)} aria-hidden />\n}\n\n/** The icon for a kind. A page gets its own (proposed): today every app draws it as \"another app's file\". */\nexport function ThingIcon({ kind, size = 16, tone = 'secondary' }: { kind: Thing['kind']; size?: 14 | 16; tone?: 'secondary' | 'inherit' }) {\n  if (kind === 'page') return <IconFileText size={size} stroke={1.5} className={cn('shrink-0', tone === 'secondary' && 'text-text-secondary')} aria-hidden />\n  return <KindIcon kind={kind} size={size} tone={tone} />\n}\n\n/** A key, the way people say it (\"ABC-2\"): before the title, quieter than it. */\nfunction Key({ children }: { children: ReactNode }) {\n  return <span className=\"shrink-0 text-caption tabular-nums text-text-muted\">{children}</span>\n}\n\n/**\n * Progress as a small ring with the count beside it as a label (Miky, 15 Oct,\n * second round: the ring with the count inside was too big).\n */\nexport function ProgressRing({ done, total }: { done: number; total: number }) {\n  const size = 16\n  const stroke = 2\n  const r = (size - stroke) / 2\n  const c = 2 * Math.PI * r\n  return (\n    <span className=\"inline-flex shrink-0 items-center gap-1 text-caption tabular-nums text-text-secondary\" title={`${done} of ${total} done`}>\n      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className=\"shrink-0 -rotate-90\" aria-hidden>\n        <circle cx={size / 2} cy={size / 2} r={r} fill=\"none\" strokeWidth={stroke} className=\"stroke-border-default\" />\n        <circle cx={size / 2} cy={size / 2} r={r} fill=\"none\" strokeWidth={stroke} strokeLinecap=\"round\" strokeDasharray={`${(c * done) / total} ${c}`} className=\"stroke-success-default\" />\n      </svg>\n      {done}/{total}\n    </span>\n  )\n}\n\n/*\n  The unread dot after a count is the package's UnreadDot: the reader has\n  something unread in this conversation. Only a member has unread (SPEC \u00A711.8),\n  so a reader who is not one sees the count alone.\n*/\n\n/** Where the count leads: the file's conversation, at the first unread when there is one. */\nconst CONVERSATION_HREF = '#conversation'\n\n/**\n * The comment count, the words brighter and a dot after it when the reader\n * has unread there. It is a link to the conversation (Miky, fourth round:\n * \"especially needed when you have unread messages\"), and it sits above a\n * compact card's covering link, so the card opens the file and the count\n * opens its conversation.\n */\nfunction Comments({ count, unread = false, noun = 'comments' }: { count: number; unread?: boolean; noun?: string }) {\n  return (\n    <Link\n      href={CONVERSATION_HREF}\n      variant=\"plain\"\n      className={cn(\n        'relative z-10 -mx-1 inline-flex shrink-0 items-center gap-1 rounded-sm px-1 text-caption tabular-nums hover:bg-bg-active',\n        unread ? 'font-medium text-text-primary' : 'text-text-secondary',\n      )}\n    >\n      <IconMessage2 size={14} stroke={1.5} aria-hidden />\n      {count}\n      <span className=\"sr-only\">{unread ? `${noun}, unread \u2014 open the conversation` : `${noun} \u2014 open the conversation`}</span>\n      {unread && <UnreadDot className=\"h-auto w-auto\" />}\n    </Link>\n  )\n}\n\n/**\n * A topic's conversations: the same icon and count as every other file's\n * comments (Miky, third round), after when the last one moved.\n */\nfunction Conversations({ thing }: { thing: Thing }) {\n  return (\n    <span className=\"inline-flex shrink-0 items-center gap-2\">\n      <span className=\"text-caption text-text-secondary\">{thing.updated}</span>\n      <Comments count={thing.conversations ?? 0} unread={thing.unread} noun=\"conversations\" />\n    </span>\n  )\n}\n\nconst people = (names: string[] = []) => names.map((name) => ({ name }))\n\n/**\n * The kind's own pickers, the only place its status and owner show in detailed.\n * Read only, for a reader who may not change the file and in the hover preview\n * (Miky, 15 Oct: no actions on hover), they are the same two values as words,\n * in the same place.\n */\nfunction Pickers({ thing, readOnly = false }: { thing: Thing; readOnly?: boolean }) {\n  if (!thing.status) return null\n  if (readOnly) {\n    return (\n      <span className=\"flex h-6 min-w-0 items-center gap-3 text-caption text-text-secondary\">\n        <span className=\"inline-flex shrink-0 items-center gap-1\">\n          <StatusIcon status={thing.status} />\n          {thing.status.label}\n        </span>\n        <span className=\"inline-flex min-w-0 items-center gap-1\">\n          <Avatar name={thing.assignee} size={16} />\n          <span className=\"truncate\">{thing.assignee ?? 'Unassigned'}</span>\n        </span>\n      </span>\n    )\n  }\n  return (\n    <>\n      <Select size=\"small\" className=\"w-auto\" value=\"s\" onChange={noop} ariaLabel=\"Status\" options={[{ value: 's', label: thing.status.label, leading: <StatusIcon status={thing.status} /> }]} />\n      <Select\n        size=\"small\"\n        className=\"w-auto\"\n        value=\"a\"\n        onChange={noop}\n        ariaLabel={thing.kind === 'project' ? 'Lead' : 'Assignee'}\n        options={[{ value: 'a', label: thing.assignee ?? 'Unassigned', leading: <Avatar name={thing.assignee} size={16} /> }]}\n      />\n    </>\n  )\n}\n\n/* ----------------------------------------------------------------- chip */\n\nexport interface ReferenceChipProps {\n  thing: Thing\n  state?: 'ready' | 'loading' | 'unavailable'\n  /** Hovering the chip shows the detailed card. */\n  preview?: boolean\n}\n\n/** What leads a chip and a compact card: the author's face for a message, the kind's icon otherwise. */\nfunction Lead({ thing, chip = false }: { thing: Thing; chip?: boolean }) {\n  if (thing.kind === 'message') return <Avatar name={thing.author} size={16} />\n  return <ThingIcon kind={thing.kind} size={chip ? 14 : 16} tone={chip ? 'inherit' : 'secondary'} />\n}\n\n/**\n * A link in running text: the icon (or the author's face), the key, the\n * title cut at 24ch, the status as its shape. Loading keeps the icon (the\n * kind is known from the address); not available says so in words.\n */\nexport function ReferenceChip({ thing, state = 'ready', preview = false }: ReferenceChipProps) {\n  if (state === 'loading') {\n    return (\n      <InlineChip icon={<ThingIcon kind={thing.kind} size={14} tone=\"inherit\" />}>\n        <SkeletonBar className=\"h-2.5 w-16\" />\n      </InlineChip>\n    )\n  }\n  if (state === 'unavailable') {\n    return (\n      <InlineChip icon={<ThingIcon kind={thing.kind} size={14} tone=\"inherit\" />} className=\"text-text-muted\">\n        {thing.noun}, not available\n      </InlineChip>\n    )\n  }\n  const chip = (\n    <InlineChip icon={<Lead thing={thing} chip />} href={HREF} className=\"max-w-[28ch]\">\n      {thing.key && <Key>{thing.key}</Key>}\n      <span className=\"truncate\">{thing.kind === 'message' ? `${thing.author}: ${thing.body}` : thing.title}</span>\n      {thing.status && <StatusMark status={thing.status} />}\n    </InlineChip>\n  )\n  return preview ? <HoverPreview thing={thing}>{chip}</HoverPreview> : chip\n}\n\n/* ---------------------------------------------------------------- cards */\n\nexport type CardLayout = 'compact' | 'detailed'\n\n/** Compact: one 36px line. Every kind, every app. Hovering it shows the detailed card. */\nexport function CompactCard({ thing, preview = false }: { thing: Thing; preview?: boolean }) {\n  const card = (\n    <Card fill=\"inset\" hover=\"hairline\" className=\"relative flex h-9 items-center gap-2 px-3\">\n      <Lead thing={thing} />\n      {thing.kind === 'message' ? (\n        <span className=\"flex min-w-0 flex-1 items-baseline gap-2 text-body-2\">\n          <span className=\"shrink-0 text-body-2-strong text-text-primary\">{thing.author}</span>\n          <Link href={HREF} variant=\"quiet\" cover truncate className=\"text-text-secondary\">\n            {thing.body}\n          </Link>\n        </span>\n      ) : (\n        <>\n          {thing.key && <Key>{thing.key}</Key>}\n          <span className=\"contents text-body-2-strong text-text-primary\">\n            <Link href={HREF} variant=\"quiet\" cover truncate className=\"min-w-0 flex-1\">\n              {thing.title}\n            </Link>\n          </span>\n        </>\n      )}\n      {thing.kind === 'topic' && <Conversations thing={thing} />}\n      {thing.kind === 'page' && <span className=\"shrink-0 text-caption text-text-secondary\">{thing.updated}</span>}\n      {thing.kind === 'message' && <span className=\"shrink-0 text-caption text-text-muted\">{thing.updated}</span>}\n      {/* Compact keeps to one line: the comment count shows only when there is something unread in it. */}\n      {thing.unread && thing.comments !== undefined && <Comments count={thing.comments} unread />}\n      {thing.status && thing.kind === 'issue' && <StatusMark status={thing.status} />}\n      {thing.done && <ProgressRing done={thing.done.done} total={thing.done.total} />}\n      {thing.assignee && <Avatar name={thing.assignee} size={16} />}\n      {thing.members && <AvatarGroup members={people(thing.members)} size={16} />}\n      {thing.authors && <AvatarGroup members={people(thing.authors)} size={16} />}\n    </Card>\n  )\n  return preview ? (\n    <HoverPreview thing={thing} block>\n      {card}\n    </HoverPreview>\n  ) : (\n    card\n  )\n}\n\n/**\n * Detailed: what compact cannot hold. The header is compact's line (icon, key,\n * title as the link; a project's ring or a topic's members in the corner),\n * then the summary, the kind's own extras (a project's issues, a topic's\n * latest conversation), and a footer: the pickers and the comments for an\n * issue or a project, who and when for a page and a topic.\n *\n * `bare` drops the card's frame, for the hover preview, which draws the\n * package's one elevated box around it.\n */\nexport function DetailedCard({ thing, bare = false, readOnly = bare }: { thing: Thing; bare?: boolean; readOnly?: boolean }) {\n  const body = (\n    <>\n      <div className=\"flex min-h-[19.6px] items-center gap-2\">\n        {/* The icon opens the file too, so the target is larger than the words (Miky, third round). */}\n        <Link href={HREF} variant=\"quiet\" className=\"flex min-w-0 flex-1 items-center gap-2 text-body-2-strong text-text-primary\">\n          <ThingIcon kind={thing.kind} />\n          <span className=\"truncate\">{thing.title}</span>\n        </Link>\n        {thing.done && <ProgressRing done={thing.done.done} total={thing.done.total} />}\n        {thing.members && <AvatarGroup members={people(thing.members)} size={16} />}\n      </div>\n      {/* The key sits with the project under the title: \"ABC-2 \u00B7 Group one\" (Miky, second round). */}\n      {(thing.key || thing.subtitle) && <p className=\"-mt-1 pl-6 text-caption text-text-secondary\">{[thing.key, thing.subtitle].filter(Boolean).join(' \u00B7 ')}</p>}\n      {thing.summary && <p className=\"line-clamp-2 text-body-2 text-text-secondary\">{thing.summary}</p>}\n      {thing.children && (\n        <div className=\"flex flex-col divide-y divide-border-subtle rounded-md border border-border-subtle\">\n          {thing.children.map((child) => (\n            <div key={child.key} className=\"relative flex h-8 items-center gap-2 px-2 hover:bg-bg-active\">\n              {/* The status is the row's icon: a list of issues needs no issue icon on every row (Miky, second round). */}\n              <StatusMark status={child.status} />\n              <Key>{child.key}</Key>\n              {/* Each issue opens on its own; the link covers its row (Miky, third round). */}\n              <span className=\"contents text-body-2 text-text-primary\">\n                <Link href={HREF} variant=\"quiet\" cover truncate className=\"min-w-0 flex-1\">\n                  {child.title}\n                </Link>\n              </span>\n              {child.assignee ? <Avatar name={child.assignee} size={16} /> : <span className=\"size-4 shrink-0\" aria-hidden />}\n            </div>\n          ))}\n        </div>\n      )}\n      {thing.latest && (\n        <div className=\"flex flex-col gap-1\">\n          {/*\n            \"Latest\" in words: the card follows the topic, so it is not the conversation the link was sent about.\n            The label names the whole box, so it sits above it, not inside (Miky, fourth round).\n          */}\n          <span className=\"text-caption text-text-muted\">Latest conversation</span>\n          <div className=\"flex gap-2 rounded-md border border-border-subtle p-2\">\n            <Avatar name={thing.latest.author} size={16} />\n            <div className=\"min-w-0 flex-1\">\n              <div className=\"flex items-baseline gap-2 text-caption\">\n                <span className=\"text-text-primary\">{thing.latest.author}</span>\n                <span className=\"text-text-muted\">{thing.latest.at}</span>\n              </div>\n              <p className=\"line-clamp-2 text-body-2 text-text-secondary\">{thing.latest.body}</p>\n            </div>\n          </div>\n        </div>\n      )}\n      <div className=\"flex min-h-6 items-center gap-2 border-t border-border-subtle pt-2\">\n        {(thing.kind === 'issue' || thing.kind === 'project') && <Pickers thing={thing} readOnly={readOnly} />}\n        {thing.kind === 'topic' && (\n          <span className=\"flex items-center gap-2\">\n            <span className=\"text-caption text-text-secondary\">Updated {thing.updated}</span>\n          </span>\n        )}\n        {/* Faces only, as every other widget: names would not fit once several people wrote it (Miky, third round). */}\n        {thing.authors && (\n          <span className=\"flex min-w-0 items-center gap-2 text-caption text-text-secondary\">\n            <AvatarGroup members={people(thing.authors)} size={16} />\n            <span className=\"shrink-0\">{thing.updated}</span>\n          </span>\n        )}\n        {thing.kind === 'topic' && (\n          <span className=\"ml-auto flex\">\n            <Comments count={thing.conversations ?? 0} unread={thing.unread} noun=\"conversations\" />\n          </span>\n        )}\n        {thing.comments !== undefined && (\n          <span className=\"ml-auto flex\">\n            <Comments count={thing.comments} unread={thing.unread} />\n          </span>\n        )}\n      </div>\n    </>\n  )\n  if (bare) return <div className=\"flex flex-col gap-2 p-3\">{body}</div>\n  return (\n    <Card fill=\"inset\" data-card=\"detailed\" className=\"flex flex-col gap-2 p-3\">\n      {body}\n    </Card>\n  )\n}\n\n/** The detailed card, on hover over a chip or a compact card: the package's preview card. */\nexport function HoverPreview({ thing, block = false, children }: { thing: Thing; block?: boolean; children: ReactNode }) {\n  // A compact card fills its column; PreviewCard's own trigger is inline and would shrink it to its words.\n  return (\n    <PreviewCard side=\"bottom\" content={<DetailedCard thing={thing} bare />} wrapperClassName={block ? 'grid w-full min-w-0 grid-cols-[minmax(0,1fr)]' : 'max-w-full'}>\n      {children}\n    </PreviewCard>\n  )\n}\n\n/** The hover preview drawn open, for a still picture of it: the same box PreviewCard draws. */\nexport function HoverPreviewOpen({ thing }: { thing: Thing }) {\n  return (\n    <MenuPanel className=\"w-[360px] p-0\">\n      <DetailedCard thing={thing} bare />\n    </MenuPanel>\n  )\n}\n\n/**\n * A linked message, detailed: a card, the frame every other detailed card has\n * (Miky, 15 Oct: \"card it is\", over a quote). The time is the link.\n */\nexport function MessageCard({ thing }: { thing: Thing }) {\n  return (\n    <Card fill=\"inset\" className=\"flex flex-col gap-2 p-3\">\n      <div className=\"flex items-center gap-2\">\n        <Avatar name={thing.author} size={24} />\n        <span className=\"text-body-2-strong text-text-primary\">{thing.author}</span>\n        <Link href={HREF} variant=\"quiet\" className=\"text-caption text-text-muted\">\n          {thing.updated}\n        </Link>\n      </div>\n      <p className=\"line-clamp-4 text-body-2 text-text-primary\">{thing.body}</p>\n    </Card>\n  )\n}\n\n/* ------------------------------------------------- loading, not available */\n\n/** What a kind's detailed card will hold, known before it loads (the kind is in the address). */\nexport interface LoadingShape {\n  subtitle?: boolean\n  summary?: boolean\n  rows?: number\n  preview?: boolean\n  ring?: boolean\n  footer?: 'pickers' | 'people' | 'line' | 'none'\n}\n\n/** The shape a thing's detailed card takes, for its placeholder. */\nexport function loadingShapeOf(thing: Thing): LoadingShape {\n  return {\n    subtitle: !!(thing.subtitle || thing.key),\n    summary: !!thing.summary,\n    rows: thing.children?.length ?? 0,\n    preview: !!thing.latest,\n    ring: !!thing.done,\n    footer: thing.kind === 'issue' || thing.kind === 'project' ? 'pickers' : thing.authors ? 'people' : 'line',\n  }\n}\n\n/** A bar that shows on an inset card: the package's bar is the inset colour, and vanishes on one. */\nfunction Bar({ className }: { className?: string }) {\n  return <SkeletonBar className={cn('bg-bg-active', className)} />\n}\n\n/**\n * Loading: the card it will become, drawn in bars, at the card's own height,\n * so the conversation does not jump when it arrives.\n */\nexport function CardLoading({ kind, layout, shape = {} }: { kind: Thing['kind']; layout: CardLayout; shape?: LoadingShape }) {\n  if (layout === 'compact') {\n    return (\n      <Card fill=\"inset\" aria-hidden data-card=\"loading\" className=\"flex h-9 items-center gap-2 px-3 animate-skeleton-in\">\n        <ThingIcon kind={kind} />\n        <Bar className=\"h-3 w-2/5\" />\n        <Bar className=\"ml-auto size-4 rounded-full\" />\n      </Card>\n    )\n  }\n  const { subtitle = false, summary = true, rows = 0, preview = false, ring = false, footer = 'line' } = shape\n  return (\n    <Card fill=\"inset\" aria-hidden data-card=\"loading\" className=\"flex flex-col gap-2 p-3 animate-skeleton-in\">\n      <div className=\"flex h-[19.6px] items-center gap-2\">\n        <ThingIcon kind={kind} />\n        <Bar className=\"h-3.5 w-1/2\" />\n        {ring && <Bar className=\"ml-auto size-4 rounded-full\" />}\n      </div>\n      {subtitle && (\n        <div className=\"-mt-1 flex h-[14.4px] items-center pl-6\">\n          <Bar className=\"h-2.5 w-20\" />\n        </div>\n      )}\n      {summary && (\n        <div className=\"flex h-[19.6px] items-center\">\n          <Bar className=\"h-3 w-4/5\" />\n        </div>\n      )}\n      {rows > 0 && (\n        <div className=\"flex flex-col divide-y divide-border-subtle rounded-md border border-border-subtle\">\n          {Array.from({ length: rows }, (_, i) => (\n            <div key={i} className=\"flex h-8 items-center px-2\">\n              <Bar className=\"h-3 w-1/3\" />\n            </div>\n          ))}\n        </div>\n      )}\n      {preview && (\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"flex h-[14.4px] items-center\">\n            <Bar className=\"h-2.5 w-28\" />\n          </div>\n          <div className=\"flex h-[71.6px] flex-col justify-center gap-2 rounded-md border border-border-subtle p-2\">\n            <Bar className=\"h-2.5 w-24\" />\n            <Bar className=\"h-3 w-full\" />\n            <Bar className=\"h-3 w-3/5\" />\n          </div>\n        </div>\n      )}\n      {footer !== 'none' && (\n        <div className=\"flex min-h-6 items-center gap-2 border-t border-border-subtle pt-2\">\n          {footer === 'pickers' ? (\n            <>\n              <Bar className=\"h-6 w-24 rounded-md\" />\n              <Bar className=\"h-6 w-28 rounded-md\" />\n            </>\n          ) : footer === 'people' ? (\n            <>\n              <Bar className=\"size-4 rounded-full\" />\n              <Bar className=\"h-3 w-40\" />\n            </>\n          ) : (\n            <Bar className=\"h-3 w-40\" />\n          )}\n        </div>\n      )}\n    </Card>\n  )\n}\n\n/**\n * Not available: one line, at compact's height, whichever layout was chosen.\n * Deleted and unreadable read the same (Widgets 2, Not in scope). Here the\n * way out stays: there is no title to click, and the app it lives in may\n * still open it for you.\n */\nexport function CardUnavailable({ kind, noun, app }: { kind: Thing['kind']; noun: string; app: string }) {\n  return (\n    <Card fill=\"none\" unreadable className=\"flex h-9 items-center gap-2 px-3\">\n      <ThingIcon kind={kind} />\n      <span className=\"min-w-0 flex-1 truncate text-body-2 text-text-muted\">{noun} \u2014 not available.</span>\n      <span className=\"shrink-0 text-caption\">\n        <Link href={HREF} variant=\"quiet\" external className=\"text-text-secondary\">\n          Open in {app} \u2197\n        </Link>\n      </span>\n    </Card>\n  )\n}\n\n/* ------------------------------------------------------------ the part */\n\n/**\n * A block of a description, shared live (a part). No compact or detailed:\n * a pasted block link inserts the part itself (the-author-chooses-a-links-card,\n * Accepted). The same header as a detailed card: the key and the title of\n * the file it is part of, as the link.\n */\nexport function PartCard({ kind, heading, partKey, children, state = 'ready', noun, app }: { kind: Thing['kind']; heading: string; partKey?: string; children?: ReactNode; state?: 'ready' | 'loading' | 'unavailable'; noun: string; app: string }) {\n  if (state === 'loading') return <CardLoading kind={kind} layout=\"detailed\" shape={{ summary: true, rows: 0, footer: 'none' }} />\n  if (state === 'unavailable') return <CardUnavailable kind={kind} noun={`A part of this ${noun.toLowerCase()}`} app={app} />\n  return (\n    <Card fill=\"inset\" className=\"flex flex-col gap-2 p-3\">\n      <Link href={HREF} variant=\"quiet\" className=\"flex min-w-0 items-center gap-2 text-body-2-strong text-text-primary\">\n        <ThingIcon kind={kind} />\n        {partKey && <Key>{partKey}</Key>}\n        <span className=\"truncate\">{heading}</span>\n      </Link>\n      <div className=\"border-l-2 border-border-default pl-3\">{children}</div>\n    </Card>\n  )\n}\n\n/**\n * A comment's anchor: the part it is about, quoted above the comment.\n * Unchanged from today (the two apps already agree), with the deleted line in\n * the same muted voice as \"not available.\".\n */\nexport function CommentAnchor({ text }: { text?: string }) {\n  if (text === undefined) return <div className=\"border-l-2 border-border-default pl-2 text-caption text-text-muted\">The part this is about was deleted.</div>\n  return (\n    <div className=\"border-l-2 border-border-strong pl-2 text-caption text-text-muted\">\n      <span className=\"line-clamp-2 italic\">{text}</span>\n    </div>\n  )\n}\n\n/* ----------------------------------------------------------- attachment */\n\n/** An attachment's chip: a paperclip and the file's name. */\nexport function AttachmentChip({ name, state = 'ready' }: { name: string; state?: 'ready' | 'loading' | 'unavailable' }) {\n  if (state === 'loading') {\n    return (\n      <InlineChip icon={<IconPaperclip size={14} stroke={1.5} aria-hidden />}>\n        <SkeletonBar className=\"h-2.5 w-16\" />\n      </InlineChip>\n    )\n  }\n  if (state === 'unavailable') {\n    return (\n      <InlineChip icon={<IconPaperclip size={14} stroke={1.5} aria-hidden />} className=\"text-text-muted\">\n        File, not available\n      </InlineChip>\n    )\n  }\n  return (\n    <InlineChip icon={<IconPaperclip size={14} stroke={1.5} aria-hidden />} href={HREF} className=\"max-w-[24ch]\">\n      <span className=\"truncate\">{name}</span>\n    </InlineChip>\n  )\n}\n", "/**\n * Widgets 2 prototype: the placeholder things every widget on these pages\n * draws. Words are placeholders (stories-and-pages.md); the kinds are named,\n * because telling them apart is what the prototype is for.\n */\nimport type { ThingKind } from '../KindIcon'\n\n/** The colours a status draws in, as the apps' manifests name them. */\nexport type StatusColour = 'neutral' | 'blue' | 'green' | 'muted'\n\nexport interface Status {\n  label: string\n  colour: StatusColour\n}\n\n/** One thing a link can stand for, with every field any app draws today. */\nexport interface Thing {\n  /** The kinds the prototype covers, one more than KindIcon has: a page. */\n  kind: ThingKind | 'page'\n  /** The noun a card's corner says. */\n  noun: string\n  /** The app it opens in. */\n  app: string\n  title: string\n  /** Its key, the way people say it: an issue's \"WID-2\". */\n  key?: string\n  /** The line under the title: the project an issue is in, a page's Folder. */\n  subtitle?: string\n  /** The opening of its description, a page's text, a message's words: what the apps draw today. */\n  body?: string\n  /**\n   * A short summary of the file, one or two sentences (Miky, 15 Oct: detailed\n   * shows the summary, not the opening of the long description). No file\n   * carries one yet; it is its own project.\n   */\n  summary?: string\n  status?: Status\n  assignee?: string\n  author?: string\n  /** Everyone who wrote a page. */\n  authors?: string[]\n  comments?: number\n  /**\n   * The reader has something unread in its conversation: they are a member\n   * and it moved since they last read it (SPEC \u00A711.8, membership-replaces-following).\n   */\n  unread?: boolean\n  /** A project's issues, drawn as rows inside its detailed card. */\n  children?: { title: string; key: string; status: Status; assignee?: string }[]\n  /** A project's progress line. */\n  progress?: string\n  /** A project's progress as numbers, for the ring. */\n  done?: { done: number; total: number }\n  /** A topic: how many conversations, who is in it, and its latest one. */\n  conversations?: number\n  members?: string[]\n  latest?: { author: string; body: string; at: string }\n  updated?: string\n}\n\nconst TODO: Status = { label: 'Todo', colour: 'neutral' }\nconst DOING: Status = { label: 'In progress', colour: 'blue' }\nconst DONE: Status = { label: 'Done', colour: 'green' }\n\nconst PARAGRAPH =\n  'A description long enough to need more than one line, so the card has to choose how much of it to show and where to cut it short. The rest is there when you open it.'\n\nconst SUMMARY = 'A one-sentence summary of what this is for.'\n\nexport const ISSUE: Thing = {\n  kind: 'issue',\n  noun: 'Issue',\n  app: 'Ship',\n  title: 'Item one, with a title long enough to be cut short',\n  key: 'ABC-2',\n  subtitle: 'Group one',\n  body: PARAGRAPH,\n  summary: SUMMARY,\n  status: DOING,\n  assignee: 'Person One',\n  comments: 4,\n  unread: true,\n}\n\nexport const PROJECT: Thing = {\n  kind: 'project',\n  noun: 'Project',\n  app: 'Ship',\n  title: 'Group one',\n  body: PARAGRAPH,\n  summary: SUMMARY,\n  status: DOING,\n  assignee: 'Person Two',\n  progress: '3 of 8 done',\n  done: { done: 3, total: 8 },\n  comments: 6,\n  children: [\n    { title: 'Item one', key: 'ABC-1', status: DONE, assignee: 'Person One' },\n    { title: 'Item two', key: 'ABC-2', status: DOING, assignee: 'Person Two' },\n    { title: 'Item three', key: 'ABC-3', status: TODO },\n  ],\n}\n\nexport const TOPIC: Thing = {\n  kind: 'topic',\n  noun: 'Topic',\n  app: 'Peek',\n  title: 'Place one',\n  conversations: 12,\n  unread: true,\n  members: ['Person One', 'Person Two', 'Person Three'],\n  updated: '2h ago',\n  latest: { author: 'Person Three', body: 'The latest conversation in the topic, as its first message reads. It may run to a second line before it is cut short.', at: '2h ago' },\n}\n\nexport const MESSAGE: Thing = {\n  kind: 'message',\n  noun: 'Message',\n  app: 'Peek',\n  title: 'Person Two',\n  author: 'Person Two',\n  body: 'A message of two sentences, written by someone in a conversation. It is the words the link points to.',\n  updated: '10:42',\n}\n\nexport const PAGE: Thing = {\n  kind: 'page',\n  noun: 'Page',\n  app: 'Leaf',\n  title: 'Page one',\n  subtitle: 'Folder one',\n  body: PARAGRAPH,\n  summary: SUMMARY,\n  author: 'Person One',\n  authors: ['Person One', 'Person Two'],\n  comments: 2,\n  updated: 'Edited yesterday',\n}\n\n/** A block of a description: drawn live, as the part it is. */\nexport const PART = {\n  heading: 'Item one',\n  noun: 'Issue',\n  app: 'Ship',\n  blocks: ['Heading of the part', 'A paragraph of the part, as it reads in the description right now.', 'A point in a list', 'Another point'],\n}\n\nexport const ATTACHMENT = { name: 'picture-one.png', size: 182_400, contentType: 'image/png' }\nexport const ATTACHMENT_FILE = { name: 'document-one.pdf', size: 1_240_000, contentType: 'application/pdf' }\n\n/** A file the reader cannot read: only its kind and app are known, from its address. */\nexport const UNREADABLE = { kind: 'issue' as const, noun: 'Issue', app: 'Ship', address: 'naddr1qqjxgdmzxy6r2vfs95cryvmp956x2etp94sns' }\n\n/** A small picture for the attachment, drawn rather than fetched. */\nexport const PICTURE =\n  'data:image/svg+xml;utf8,' +\n  encodeURIComponent(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"480\" height=\"300\"><rect width=\"480\" height=\"300\" fill=\"#8a94a6\"/><circle cx=\"360\" cy=\"90\" r=\"40\" fill=\"#d8dde6\"/><path d=\"M0 300 L170 120 L300 260 L380 190 L480 300 Z\" fill=\"#5d6778\"/></svg>',\n  )\n"],
-  "mappings": "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",
-  "names": []
+  "sources": ["../src/widgets-2/proposed.tsx", "../src/widgets-2/fixtures.ts", "../src/widgets-2/places.tsx"],
+  "sourcesContent": ["/**\n * Widgets 2 prototype: the proposed shared kit, one drawing of each widget for\n * Peek, Ship and Leaf alike. Written as the package would export it: no app\n * name and no product noun in a name or a prop. The kind's icon, the key and\n * every field arrive as data from the app's manifest.\n *\n * In `src/` on `concept/widgets-2` only, so the apps' own Storybooks can place\n * it (WID-3): `@estiva-app/ui/widgets-2`, an unlisted entry published only as a\n * `concept` prerelease. The build project shapes the real exports from it once\n * Miky and Katerina approve it.\n *\n * Second iteration, from Miky's notes on WID-2 (15 Oct):\n * - no noun in a card's corner and no \"Open in \u2026\": the icon says what it is,\n *   and the title is the link;\n * - an issue shows its key; the only status and assignee are the actionable ones;\n * - detailed shows the file's short summary, not the opening of its description;\n * - hovering a chip or a compact card shows the detailed card;\n * - a project shows its progress as a ring, its status and lead as actions,\n *   its comments, and each issue's assignee;\n * - a topic shows its conversations, its last update and its members, and\n *   detailed adds the latest conversation;\n * - a message is drawn with its author's face; a page with its authors and\n *   its last edit.\n */\nimport { IconCircle, IconCircleCheck, IconCircleDashed, IconCircleHalf2, IconCircleX, IconFileText, IconMessage2, IconPaperclip } from '@tabler/icons-react'\nimport type { ReactNode } from 'react'\nimport { Avatar } from '../Avatar'\nimport { AvatarGroup } from '../AvatarGroup'\nimport { Card } from '../Card'\nimport { cn } from '../cn'\nimport { InlineChip } from '../InlineChip'\nimport { KindIcon } from '../KindIcon'\nimport { Link } from '../Link'\nimport { MenuPanel } from '../Menu'\nimport { PreviewCard } from '../PreviewCard'\nimport { Select } from '../Select'\nimport { SkeletonBar } from '../Skeleton'\nimport { UnreadDot } from '../UnreadDot'\nimport type { Status, StatusColour, Thing } from './fixtures'\n\nconst HREF = '#'\nconst noop = () => {}\n\n/* ------------------------------------------------------------ the parts */\n\nconst STATUS_ICON: Record<StatusColour, { Icon: typeof IconCircle; tone: string }> = {\n  neutral: { Icon: IconCircleDashed, tone: 'text-text-secondary' },\n  blue: { Icon: IconCircleHalf2, tone: 'text-info-default' },\n  green: { Icon: IconCircleCheck, tone: 'text-success-default' },\n  muted: { Icon: IconCircleX, tone: 'text-text-muted' },\n}\n\n/** A status as its shape: Ship's icons, which read without colour. */\nexport function StatusMark({ status }: { status: Status }) {\n  return (\n    <span className=\"inline-flex shrink-0 items-center\" title={status.label}>\n      <StatusIcon status={status} />\n      <span className=\"sr-only\">{status.label}</span>\n    </span>\n  )\n}\n\n/** The status's shape alone, beside words that already name it. */\nfunction StatusIcon({ status }: { status: Status }) {\n  const { Icon, tone } = STATUS_ICON[status.colour]\n  return <Icon size={14} stroke={1.5} className={cn('shrink-0', tone)} aria-hidden />\n}\n\n/** The icon for a kind. A page gets its own (proposed): today every app draws it as \"another app's file\". */\nexport function ThingIcon({ kind, size = 16, tone = 'secondary' }: { kind: Thing['kind']; size?: 14 | 16; tone?: 'secondary' | 'inherit' }) {\n  if (kind === 'page') return <IconFileText size={size} stroke={1.5} className={cn('shrink-0', tone === 'secondary' && 'text-text-secondary')} aria-hidden />\n  return <KindIcon kind={kind} size={size} tone={tone} />\n}\n\n/** A key, the way people say it (\"ABC-2\"): before the title, quieter than it. */\nfunction Key({ children }: { children: ReactNode }) {\n  return <span className=\"shrink-0 text-caption tabular-nums text-text-muted\">{children}</span>\n}\n\n/**\n * Progress as a small ring with the count beside it as a label (Miky, 15 Oct,\n * second round: the ring with the count inside was too big).\n */\nexport function ProgressRing({ done, total }: { done: number; total: number }) {\n  const size = 16\n  const stroke = 2\n  const r = (size - stroke) / 2\n  const c = 2 * Math.PI * r\n  return (\n    <span className=\"inline-flex shrink-0 items-center gap-1 text-caption tabular-nums text-text-secondary\" title={`${done} of ${total} done`}>\n      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className=\"shrink-0 -rotate-90\" aria-hidden>\n        <circle cx={size / 2} cy={size / 2} r={r} fill=\"none\" strokeWidth={stroke} className=\"stroke-border-default\" />\n        <circle cx={size / 2} cy={size / 2} r={r} fill=\"none\" strokeWidth={stroke} strokeLinecap=\"round\" strokeDasharray={`${(c * done) / total} ${c}`} className=\"stroke-success-default\" />\n      </svg>\n      {done}/{total}\n    </span>\n  )\n}\n\n/*\n  The unread dot after a count is the package's UnreadDot: the reader has\n  something unread in this conversation. Only a member has unread (SPEC \u00A711.8),\n  so a reader who is not one sees the count alone.\n*/\n\n/** Where the count leads: the file's conversation, at the first unread when there is one. */\nconst CONVERSATION_HREF = '#conversation'\n\n/**\n * The comment count, the words brighter and a dot after it when the reader\n * has unread there. It is a link to the conversation (Miky, fourth round:\n * \"especially needed when you have unread messages\"), and it sits above a\n * compact card's covering link, so the card opens the file and the count\n * opens its conversation.\n */\nfunction Comments({ count, unread = false, noun = 'comments' }: { count: number; unread?: boolean; noun?: string }) {\n  return (\n    <Link\n      href={CONVERSATION_HREF}\n      variant=\"plain\"\n      className={cn(\n        'relative z-10 -mx-1 inline-flex shrink-0 items-center gap-1 rounded-sm px-1 text-caption tabular-nums hover:bg-bg-active',\n        unread ? 'font-medium text-text-primary' : 'text-text-secondary',\n      )}\n    >\n      <IconMessage2 size={14} stroke={1.5} aria-hidden />\n      {count}\n      <span className=\"sr-only\">{unread ? `${noun}, unread \u2014 open the conversation` : `${noun} \u2014 open the conversation`}</span>\n      {unread && <UnreadDot className=\"h-auto w-auto\" />}\n    </Link>\n  )\n}\n\n/**\n * A topic's conversations: the same icon and count as every other file's\n * comments (Miky, third round), after when the last one moved.\n */\nfunction Conversations({ thing }: { thing: Thing }) {\n  return (\n    <span className=\"inline-flex shrink-0 items-center gap-2\">\n      <span className=\"text-caption text-text-secondary\">{thing.updated}</span>\n      <Comments count={thing.conversations ?? 0} unread={thing.unread} noun=\"conversations\" />\n    </span>\n  )\n}\n\nconst people = (names: string[] = []) => names.map((name) => ({ name }))\n\n/**\n * The kind's own pickers, the only place its status and owner show in detailed.\n * Read only, for a reader who may not change the file and in the hover preview\n * (Miky, 15 Oct: no actions on hover), they are the same two values as words,\n * in the same place.\n */\nfunction Pickers({ thing, readOnly = false }: { thing: Thing; readOnly?: boolean }) {\n  if (!thing.status) return null\n  if (readOnly) {\n    return (\n      <span className=\"flex h-6 min-w-0 items-center gap-3 text-caption text-text-secondary\">\n        <span className=\"inline-flex shrink-0 items-center gap-1\">\n          <StatusIcon status={thing.status} />\n          {thing.status.label}\n        </span>\n        <span className=\"inline-flex min-w-0 items-center gap-1\">\n          <Avatar name={thing.assignee} size={16} />\n          <span className=\"truncate\">{thing.assignee ?? 'Unassigned'}</span>\n        </span>\n      </span>\n    )\n  }\n  return (\n    <>\n      <Select size=\"small\" className=\"w-auto\" value=\"s\" onChange={noop} ariaLabel=\"Status\" options={[{ value: 's', label: thing.status.label, leading: <StatusIcon status={thing.status} /> }]} />\n      <Select\n        size=\"small\"\n        className=\"w-auto\"\n        value=\"a\"\n        onChange={noop}\n        ariaLabel={thing.kind === 'project' ? 'Lead' : 'Assignee'}\n        options={[{ value: 'a', label: thing.assignee ?? 'Unassigned', leading: <Avatar name={thing.assignee} size={16} /> }]}\n      />\n    </>\n  )\n}\n\n/* ----------------------------------------------------------------- chip */\n\nexport interface ReferenceChipProps {\n  thing: Thing\n  state?: 'ready' | 'loading' | 'unavailable'\n  /** Hovering the chip shows the detailed card. */\n  preview?: boolean\n}\n\n/** What leads a chip and a compact card: the author's face for a message, the kind's icon otherwise. */\nfunction Lead({ thing, chip = false }: { thing: Thing; chip?: boolean }) {\n  if (thing.kind === 'message') return <Avatar name={thing.author} size={16} />\n  return <ThingIcon kind={thing.kind} size={chip ? 14 : 16} tone={chip ? 'inherit' : 'secondary'} />\n}\n\n/**\n * A link in running text: the icon (or the author's face), the key, the\n * title cut at 24ch, the status as its shape. Loading keeps the icon (the\n * kind is known from the address); not available says so in words.\n */\nexport function ReferenceChip({ thing, state = 'ready', preview = false }: ReferenceChipProps) {\n  if (state === 'loading') {\n    return (\n      <InlineChip icon={<ThingIcon kind={thing.kind} size={14} tone=\"inherit\" />}>\n        <SkeletonBar className=\"h-2.5 w-16\" />\n      </InlineChip>\n    )\n  }\n  if (state === 'unavailable') {\n    return (\n      <InlineChip icon={<ThingIcon kind={thing.kind} size={14} tone=\"inherit\" />} className=\"text-text-muted\">\n        {thing.noun}, not available\n      </InlineChip>\n    )\n  }\n  const chip = (\n    <InlineChip icon={<Lead thing={thing} chip />} href={HREF} className=\"max-w-[28ch]\">\n      {thing.key && <Key>{thing.key}</Key>}\n      <span className=\"truncate\">{thing.kind === 'message' ? `${thing.author}: ${thing.body}` : thing.title}</span>\n      {thing.status && <StatusMark status={thing.status} />}\n    </InlineChip>\n  )\n  return preview ? <HoverPreview thing={thing}>{chip}</HoverPreview> : chip\n}\n\n/* ---------------------------------------------------------------- cards */\n\nexport type CardLayout = 'compact' | 'detailed'\n\n/** Compact: one 36px line. Every kind, every app. Hovering it shows the detailed card. */\nexport function CompactCard({ thing, preview = false }: { thing: Thing; preview?: boolean }) {\n  const card = (\n    <Card fill=\"inset\" hover=\"hairline\" className=\"relative flex h-9 items-center gap-2 px-3\">\n      <Lead thing={thing} />\n      {thing.kind === 'message' ? (\n        <span className=\"flex min-w-0 flex-1 items-baseline gap-2 text-body-2\">\n          <span className=\"shrink-0 text-body-2-strong text-text-primary\">{thing.author}</span>\n          <Link href={HREF} variant=\"quiet\" cover truncate className=\"text-text-secondary\">\n            {thing.body}\n          </Link>\n        </span>\n      ) : (\n        <>\n          {thing.key && <Key>{thing.key}</Key>}\n          <span className=\"contents text-body-2-strong text-text-primary\">\n            <Link href={HREF} variant=\"quiet\" cover truncate className=\"min-w-0 flex-1\">\n              {thing.title}\n            </Link>\n          </span>\n        </>\n      )}\n      {thing.kind === 'topic' && <Conversations thing={thing} />}\n      {thing.kind === 'page' && <span className=\"shrink-0 text-caption text-text-secondary\">{thing.updated}</span>}\n      {thing.kind === 'message' && <span className=\"shrink-0 text-caption text-text-muted\">{thing.updated}</span>}\n      {/* Compact keeps to one line: the comment count shows only when there is something unread in it. */}\n      {thing.unread && thing.comments !== undefined && <Comments count={thing.comments} unread />}\n      {thing.status && thing.kind === 'issue' && <StatusMark status={thing.status} />}\n      {thing.done && <ProgressRing done={thing.done.done} total={thing.done.total} />}\n      {thing.assignee && <Avatar name={thing.assignee} size={16} />}\n      {thing.members && <AvatarGroup members={people(thing.members)} size={16} />}\n      {thing.authors && <AvatarGroup members={people(thing.authors)} size={16} />}\n    </Card>\n  )\n  return preview ? (\n    <HoverPreview thing={thing} block>\n      {card}\n    </HoverPreview>\n  ) : (\n    card\n  )\n}\n\n/**\n * Detailed: what compact cannot hold. The header is compact's line (icon, key,\n * title as the link; a project's ring or a topic's members in the corner),\n * then the summary, the kind's own extras (a project's issues, a topic's\n * latest conversation), and a footer: the pickers and the comments for an\n * issue or a project, who and when for a page and a topic.\n *\n * `bare` drops the card's frame, for the hover preview, which draws the\n * package's one elevated box around it.\n */\nexport function DetailedCard({ thing, bare = false, readOnly = bare }: { thing: Thing; bare?: boolean; readOnly?: boolean }) {\n  const body = (\n    <>\n      <div className=\"flex min-h-[19.6px] items-center gap-2\">\n        {/* The icon opens the file too, so the target is larger than the words (Miky, third round). */}\n        <Link href={HREF} variant=\"quiet\" className=\"flex min-w-0 flex-1 items-center gap-2 text-body-2-strong text-text-primary\">\n          <ThingIcon kind={thing.kind} />\n          <span className=\"truncate\">{thing.title}</span>\n        </Link>\n        {thing.done && <ProgressRing done={thing.done.done} total={thing.done.total} />}\n        {thing.members && <AvatarGroup members={people(thing.members)} size={16} />}\n      </div>\n      {/* The key sits with the project under the title: \"ABC-2 \u00B7 Group one\" (Miky, second round). */}\n      {(thing.key || thing.subtitle) && <p className=\"-mt-1 pl-6 text-caption text-text-secondary\">{[thing.key, thing.subtitle].filter(Boolean).join(' \u00B7 ')}</p>}\n      {thing.summary && <p className=\"line-clamp-2 text-body-2 text-text-secondary\">{thing.summary}</p>}\n      {thing.children && (\n        <div className=\"flex flex-col divide-y divide-border-subtle rounded-md border border-border-subtle\">\n          {thing.children.map((child) => (\n            <div key={child.key} className=\"relative flex h-8 items-center gap-2 px-2 hover:bg-bg-active\">\n              {/* The status is the row's icon: a list of issues needs no issue icon on every row (Miky, second round). */}\n              <StatusMark status={child.status} />\n              <Key>{child.key}</Key>\n              {/* Each issue opens on its own; the link covers its row (Miky, third round). */}\n              <span className=\"contents text-body-2 text-text-primary\">\n                <Link href={HREF} variant=\"quiet\" cover truncate className=\"min-w-0 flex-1\">\n                  {child.title}\n                </Link>\n              </span>\n              {child.assignee ? <Avatar name={child.assignee} size={16} /> : <span className=\"size-4 shrink-0\" aria-hidden />}\n            </div>\n          ))}\n        </div>\n      )}\n      {thing.latest && (\n        <div className=\"flex flex-col gap-1\">\n          {/*\n            \"Latest\" in words: the card follows the topic, so it is not the conversation the link was sent about.\n            The label names the whole box, so it sits above it, not inside (Miky, fourth round).\n          */}\n          <span className=\"text-caption text-text-muted\">Latest conversation</span>\n          <div className=\"flex gap-2 rounded-md border border-border-subtle p-2\">\n            <Avatar name={thing.latest.author} size={16} />\n            <div className=\"min-w-0 flex-1\">\n              <div className=\"flex items-baseline gap-2 text-caption\">\n                <span className=\"text-text-primary\">{thing.latest.author}</span>\n                <span className=\"text-text-muted\">{thing.latest.at}</span>\n              </div>\n              <p className=\"line-clamp-2 text-body-2 text-text-secondary\">{thing.latest.body}</p>\n            </div>\n          </div>\n        </div>\n      )}\n      <div className=\"flex min-h-6 items-center gap-2 border-t border-border-subtle pt-2\">\n        {(thing.kind === 'issue' || thing.kind === 'project') && <Pickers thing={thing} readOnly={readOnly} />}\n        {thing.kind === 'topic' && (\n          <span className=\"flex items-center gap-2\">\n            <span className=\"text-caption text-text-secondary\">Updated {thing.updated}</span>\n          </span>\n        )}\n        {/* Faces only, as every other widget: names would not fit once several people wrote it (Miky, third round). */}\n        {thing.authors && (\n          <span className=\"flex min-w-0 items-center gap-2 text-caption text-text-secondary\">\n            <AvatarGroup members={people(thing.authors)} size={16} />\n            <span className=\"shrink-0\">{thing.updated}</span>\n          </span>\n        )}\n        {thing.kind === 'topic' && (\n          <span className=\"ml-auto flex\">\n            <Comments count={thing.conversations ?? 0} unread={thing.unread} noun=\"conversations\" />\n          </span>\n        )}\n        {thing.comments !== undefined && (\n          <span className=\"ml-auto flex\">\n            <Comments count={thing.comments} unread={thing.unread} />\n          </span>\n        )}\n      </div>\n    </>\n  )\n  if (bare) return <div className=\"flex flex-col gap-2 p-3\">{body}</div>\n  return (\n    <Card fill=\"inset\" data-card=\"detailed\" className=\"flex flex-col gap-2 p-3\">\n      {body}\n    </Card>\n  )\n}\n\n/** The detailed card, on hover over a chip or a compact card: the package's preview card. */\nexport function HoverPreview({ thing, block = false, children }: { thing: Thing; block?: boolean; children: ReactNode }) {\n  // A compact card fills its column; PreviewCard's own trigger is inline and would shrink it to its words.\n  return (\n    <PreviewCard side=\"bottom\" content={<DetailedCard thing={thing} bare />} wrapperClassName={block ? 'grid w-full min-w-0 grid-cols-[minmax(0,1fr)]' : 'max-w-full'}>\n      {children}\n    </PreviewCard>\n  )\n}\n\n/** The hover preview drawn open, for a still picture of it: the same box PreviewCard draws. */\nexport function HoverPreviewOpen({ thing }: { thing: Thing }) {\n  return (\n    <MenuPanel className=\"w-[360px] p-0\">\n      <DetailedCard thing={thing} bare />\n    </MenuPanel>\n  )\n}\n\n/**\n * A linked message, detailed: a card, the frame every other detailed card has\n * (Miky, 15 Oct: \"card it is\", over a quote). The time is the link.\n */\nexport function MessageCard({ thing }: { thing: Thing }) {\n  return (\n    <Card fill=\"inset\" className=\"flex flex-col gap-2 p-3\">\n      <div className=\"flex items-center gap-2\">\n        <Avatar name={thing.author} size={24} />\n        <span className=\"text-body-2-strong text-text-primary\">{thing.author}</span>\n        <Link href={HREF} variant=\"quiet\" className=\"text-caption text-text-muted\">\n          {thing.updated}\n        </Link>\n      </div>\n      <p className=\"line-clamp-4 text-body-2 text-text-primary\">{thing.body}</p>\n    </Card>\n  )\n}\n\n/* ------------------------------------------------- loading, not available */\n\n/** What a kind's detailed card will hold, known before it loads (the kind is in the address). */\nexport interface LoadingShape {\n  subtitle?: boolean\n  summary?: boolean\n  rows?: number\n  preview?: boolean\n  ring?: boolean\n  footer?: 'pickers' | 'people' | 'line' | 'none'\n}\n\n/** The shape a thing's detailed card takes, for its placeholder. */\nexport function loadingShapeOf(thing: Thing): LoadingShape {\n  return {\n    subtitle: !!(thing.subtitle || thing.key),\n    summary: !!thing.summary,\n    rows: thing.children?.length ?? 0,\n    preview: !!thing.latest,\n    ring: !!thing.done,\n    footer: thing.kind === 'issue' || thing.kind === 'project' ? 'pickers' : thing.authors ? 'people' : 'line',\n  }\n}\n\n/** A bar that shows on an inset card: the package's bar is the inset colour, and vanishes on one. */\nfunction Bar({ className }: { className?: string }) {\n  return <SkeletonBar className={cn('bg-bg-active', className)} />\n}\n\n/**\n * Loading: the card it will become, drawn in bars, at the card's own height,\n * so the conversation does not jump when it arrives.\n */\nexport function CardLoading({ kind, layout, shape = {} }: { kind: Thing['kind']; layout: CardLayout; shape?: LoadingShape }) {\n  if (layout === 'compact') {\n    return (\n      <Card fill=\"inset\" aria-hidden data-card=\"loading\" className=\"flex h-9 items-center gap-2 px-3 animate-skeleton-in\">\n        <ThingIcon kind={kind} />\n        <Bar className=\"h-3 w-2/5\" />\n        <Bar className=\"ml-auto size-4 rounded-full\" />\n      </Card>\n    )\n  }\n  const { subtitle = false, summary = true, rows = 0, preview = false, ring = false, footer = 'line' } = shape\n  return (\n    <Card fill=\"inset\" aria-hidden data-card=\"loading\" className=\"flex flex-col gap-2 p-3 animate-skeleton-in\">\n      <div className=\"flex h-[19.6px] items-center gap-2\">\n        <ThingIcon kind={kind} />\n        <Bar className=\"h-3.5 w-1/2\" />\n        {ring && <Bar className=\"ml-auto size-4 rounded-full\" />}\n      </div>\n      {subtitle && (\n        <div className=\"-mt-1 flex h-[14.4px] items-center pl-6\">\n          <Bar className=\"h-2.5 w-20\" />\n        </div>\n      )}\n      {summary && (\n        <div className=\"flex h-[19.6px] items-center\">\n          <Bar className=\"h-3 w-4/5\" />\n        </div>\n      )}\n      {rows > 0 && (\n        <div className=\"flex flex-col divide-y divide-border-subtle rounded-md border border-border-subtle\">\n          {Array.from({ length: rows }, (_, i) => (\n            <div key={i} className=\"flex h-8 items-center px-2\">\n              <Bar className=\"h-3 w-1/3\" />\n            </div>\n          ))}\n        </div>\n      )}\n      {preview && (\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"flex h-[14.4px] items-center\">\n            <Bar className=\"h-2.5 w-28\" />\n          </div>\n          <div className=\"flex h-[71.6px] flex-col justify-center gap-2 rounded-md border border-border-subtle p-2\">\n            <Bar className=\"h-2.5 w-24\" />\n            <Bar className=\"h-3 w-full\" />\n            <Bar className=\"h-3 w-3/5\" />\n          </div>\n        </div>\n      )}\n      {footer !== 'none' && (\n        <div className=\"flex min-h-6 items-center gap-2 border-t border-border-subtle pt-2\">\n          {footer === 'pickers' ? (\n            <>\n              <Bar className=\"h-6 w-24 rounded-md\" />\n              <Bar className=\"h-6 w-28 rounded-md\" />\n            </>\n          ) : footer === 'people' ? (\n            <>\n              <Bar className=\"size-4 rounded-full\" />\n              <Bar className=\"h-3 w-40\" />\n            </>\n          ) : (\n            <Bar className=\"h-3 w-40\" />\n          )}\n        </div>\n      )}\n    </Card>\n  )\n}\n\n/**\n * Not available: one line, at compact's height, whichever layout was chosen.\n * Deleted and unreadable read the same (Widgets 2, Not in scope). Here the\n * way out stays: there is no title to click, and the app it lives in may\n * still open it for you.\n */\nexport function CardUnavailable({ kind, noun, app }: { kind: Thing['kind']; noun: string; app: string }) {\n  return (\n    <Card fill=\"none\" unreadable className=\"flex h-9 items-center gap-2 px-3\">\n      <ThingIcon kind={kind} />\n      <span className=\"min-w-0 flex-1 truncate text-body-2 text-text-muted\">{noun} \u2014 not available.</span>\n      <span className=\"shrink-0 text-caption\">\n        <Link href={HREF} variant=\"quiet\" external className=\"text-text-secondary\">\n          Open in {app} \u2197\n        </Link>\n      </span>\n    </Card>\n  )\n}\n\n/* ------------------------------------------------------------ the part */\n\n/**\n * A block of a description, shared live (a part). No compact or detailed:\n * a pasted block link inserts the part itself (the-author-chooses-a-links-card,\n * Accepted). The same header as a detailed card: the key and the title of\n * the file it is part of, as the link.\n */\nexport function PartCard({ kind, heading, partKey, children, state = 'ready', noun, app }: { kind: Thing['kind']; heading: string; partKey?: string; children?: ReactNode; state?: 'ready' | 'loading' | 'unavailable'; noun: string; app: string }) {\n  if (state === 'loading') return <CardLoading kind={kind} layout=\"detailed\" shape={{ summary: true, rows: 0, footer: 'none' }} />\n  if (state === 'unavailable') return <CardUnavailable kind={kind} noun={`A part of this ${noun.toLowerCase()}`} app={app} />\n  return (\n    <Card fill=\"inset\" className=\"flex flex-col gap-2 p-3\">\n      <Link href={HREF} variant=\"quiet\" className=\"flex min-w-0 items-center gap-2 text-body-2-strong text-text-primary\">\n        <ThingIcon kind={kind} />\n        {partKey && <Key>{partKey}</Key>}\n        <span className=\"truncate\">{heading}</span>\n      </Link>\n      <div className=\"border-l-2 border-border-default pl-3\">{children}</div>\n    </Card>\n  )\n}\n\n/**\n * A comment's anchor: the part it is about, quoted above the comment.\n * Unchanged from today (the two apps already agree), with the deleted line in\n * the same muted voice as \"not available.\".\n */\nexport function CommentAnchor({ text }: { text?: string }) {\n  if (text === undefined) return <div className=\"border-l-2 border-border-default pl-2 text-caption text-text-muted\">The part this is about was deleted.</div>\n  return (\n    <div className=\"border-l-2 border-border-strong pl-2 text-caption text-text-muted\">\n      <span className=\"line-clamp-2 italic\">{text}</span>\n    </div>\n  )\n}\n\n/* ----------------------------------------------------------- attachment */\n\n/** An attachment's chip: a paperclip and the file's name. */\nexport function AttachmentChip({ name, state = 'ready' }: { name: string; state?: 'ready' | 'loading' | 'unavailable' }) {\n  if (state === 'loading') {\n    return (\n      <InlineChip icon={<IconPaperclip size={14} stroke={1.5} aria-hidden />}>\n        <SkeletonBar className=\"h-2.5 w-16\" />\n      </InlineChip>\n    )\n  }\n  if (state === 'unavailable') {\n    return (\n      <InlineChip icon={<IconPaperclip size={14} stroke={1.5} aria-hidden />} className=\"text-text-muted\">\n        File, not available\n      </InlineChip>\n    )\n  }\n  return (\n    <InlineChip icon={<IconPaperclip size={14} stroke={1.5} aria-hidden />} href={HREF} className=\"max-w-[24ch]\">\n      <span className=\"truncate\">{name}</span>\n    </InlineChip>\n  )\n}\n", "/**\n * Widgets 2 prototype: the placeholder things every widget on these pages\n * draws. Words are placeholders (stories-and-pages.md); the kinds are named,\n * because telling them apart is what the prototype is for.\n */\nimport type { ThingKind } from '../KindIcon'\n\n/** The colours a status draws in, as the apps' manifests name them. */\nexport type StatusColour = 'neutral' | 'blue' | 'green' | 'muted'\n\nexport interface Status {\n  label: string\n  colour: StatusColour\n}\n\n/** One thing a link can stand for, with every field any app draws today. */\nexport interface Thing {\n  /** The kinds the prototype covers, one more than KindIcon has: a page. */\n  kind: ThingKind | 'page'\n  /** The noun a card's corner says. */\n  noun: string\n  /** The app it opens in. */\n  app: string\n  title: string\n  /** Its key, the way people say it: an issue's \"WID-2\". */\n  key?: string\n  /** The line under the title: the project an issue is in, a page's Folder. */\n  subtitle?: string\n  /** The opening of its description, a page's text, a message's words: what the apps draw today. */\n  body?: string\n  /**\n   * A short summary of the file, one or two sentences (Miky, 15 Oct: detailed\n   * shows the summary, not the opening of the long description). No file\n   * carries one yet; it is its own project.\n   */\n  summary?: string\n  status?: Status\n  assignee?: string\n  author?: string\n  /** Everyone who wrote a page. */\n  authors?: string[]\n  comments?: number\n  /**\n   * The reader has something unread in its conversation: they are a member\n   * and it moved since they last read it (SPEC \u00A711.8, membership-replaces-following).\n   */\n  unread?: boolean\n  /** A project's issues, drawn as rows inside its detailed card. */\n  children?: { title: string; key: string; status: Status; assignee?: string }[]\n  /** A project's progress line. */\n  progress?: string\n  /** A project's progress as numbers, for the ring. */\n  done?: { done: number; total: number }\n  /** A topic: how many conversations, who is in it, and its latest one. */\n  conversations?: number\n  members?: string[]\n  latest?: { author: string; body: string; at: string }\n  updated?: string\n  /** Where it is placed (WID-3): still loading, or not available to this reader. Ready when absent. */\n  state?: 'loading' | 'unavailable'\n}\n\nconst TODO: Status = { label: 'Todo', colour: 'neutral' }\nconst DOING: Status = { label: 'In progress', colour: 'blue' }\nconst DONE: Status = { label: 'Done', colour: 'green' }\n\nconst PARAGRAPH =\n  'A description long enough to need more than one line, so the card has to choose how much of it to show and where to cut it short. The rest is there when you open it.'\n\nconst SUMMARY = 'A one-sentence summary of what this is for.'\n\nexport const ISSUE: Thing = {\n  kind: 'issue',\n  noun: 'Issue',\n  app: 'Ship',\n  title: 'Item one, with a title long enough to be cut short',\n  key: 'ABC-2',\n  subtitle: 'Group one',\n  body: PARAGRAPH,\n  summary: SUMMARY,\n  status: DOING,\n  assignee: 'Person One',\n  comments: 4,\n  unread: true,\n}\n\nexport const PROJECT: Thing = {\n  kind: 'project',\n  noun: 'Project',\n  app: 'Ship',\n  title: 'Group one',\n  body: PARAGRAPH,\n  summary: SUMMARY,\n  status: DOING,\n  assignee: 'Person Two',\n  progress: '3 of 8 done',\n  done: { done: 3, total: 8 },\n  comments: 6,\n  children: [\n    { title: 'Item one', key: 'ABC-1', status: DONE, assignee: 'Person One' },\n    { title: 'Item two', key: 'ABC-2', status: DOING, assignee: 'Person Two' },\n    { title: 'Item three', key: 'ABC-3', status: TODO },\n  ],\n}\n\nexport const TOPIC: Thing = {\n  kind: 'topic',\n  noun: 'Topic',\n  app: 'Peek',\n  title: 'Place one',\n  conversations: 12,\n  unread: true,\n  members: ['Person One', 'Person Two', 'Person Three'],\n  updated: '2h ago',\n  latest: { author: 'Person Three', body: 'The latest conversation in the topic, as its first message reads. It may run to a second line before it is cut short.', at: '2h ago' },\n}\n\nexport const MESSAGE: Thing = {\n  kind: 'message',\n  noun: 'Message',\n  app: 'Peek',\n  title: 'Person Two',\n  author: 'Person Two',\n  body: 'A message of two sentences, written by someone in a conversation. It is the words the link points to.',\n  updated: '10:42',\n}\n\nexport const PAGE: Thing = {\n  kind: 'page',\n  noun: 'Page',\n  app: 'Leaf',\n  title: 'Page one',\n  subtitle: 'Folder one',\n  body: PARAGRAPH,\n  summary: SUMMARY,\n  author: 'Person One',\n  authors: ['Person One', 'Person Two'],\n  comments: 2,\n  updated: 'Edited yesterday',\n}\n\n/** A block of a description: drawn live, as the part it is. */\nexport const PART = {\n  heading: 'Item one',\n  noun: 'Issue',\n  app: 'Ship',\n  blocks: ['Heading of the part', 'A paragraph of the part, as it reads in the description right now.', 'A point in a list', 'Another point'],\n}\n\nexport const ATTACHMENT = { name: 'picture-one.png', size: 182_400, contentType: 'image/png' }\nexport const ATTACHMENT_FILE = { name: 'document-one.pdf', size: 1_240_000, contentType: 'application/pdf' }\n\n/** A file the reader cannot read: only its kind and app are known, from its address. */\nexport const UNREADABLE = { kind: 'issue' as const, noun: 'Issue', app: 'Ship', address: 'naddr1qqjxgdmzxy6r2vfs95cryvmp956x2etp94sns' }\n\n/** A small picture for the attachment, drawn rather than fetched. */\nexport const PICTURE =\n  'data:image/svg+xml;utf8,' +\n  encodeURIComponent(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"480\" height=\"300\"><rect width=\"480\" height=\"300\" fill=\"#8a94a6\"/><circle cx=\"360\" cy=\"90\" r=\"40\" fill=\"#d8dde6\"/><path d=\"M0 300 L170 120 L300 260 L380 190 L480 300 Z\" fill=\"#5d6778\"/></svg>',\n  )\n", "/**\n * Where a link sits decides how it draws (Miky, 15 Oct, on the brief \"Where a\n * Link Sits\"; why: https://github.com/estiva-app/estiva-docs/blob/main/decisions/where-a-link-sits-decides-how-it-draws.md),\n * drawn once here so Peek, Ship and Leaf place the same widgets the same way\n * (WID-3). Each app's own stories put these inside its own frames.\n *\n * - A link in a sentence is a chip; a link alone on its line is a row.\n * - In a message: the one file it links gets its card under it, added by\n *   default and removed with \u2715; a message that is only one link shows the card\n *   instead of the row; two or more files, no card. No layout choice.\n * - In a document: no card is ever added. The chip menu on a lone-line link\n *   offers Open and its card, and the card takes that line's place.\n */\nimport {\n  IconCheck,\n  IconExternalLink,\n  IconH1,\n  IconLetterT,\n  IconLink,\n  IconListCheck,\n  IconPaperclip,\n  IconTable,\n  IconX,\n} from '@tabler/icons-react'\nimport { useState, type ReactNode } from 'react'\nimport { cn } from '../cn'\nimport { IconButton } from '../IconButton'\nimport { MenuItem, MenuPanel, MenuSection, MenuSeparator } from '../Menu'\nimport type { Thing } from './fixtures'\nimport { CardLoading, CardUnavailable, CompactCard, DetailedCard, loadingShapeOf, MessageCard, ReferenceChip, ThingIcon } from './proposed'\n\n/** A piece of a sentence: words, or a link to a file. */\nexport type Piece = string | Thing\n/** One line of text: a link alone on its line, or a sentence of words and links. */\nexport type Line = Thing | Piece[]\n\nconst isLink = (piece: Piece | Line): piece is Thing => typeof piece === 'object' && !Array.isArray(piece)\n\n/** Every file the lines link to, each once. */\nexport function linksIn(lines: Line[]): Thing[] {\n  return [...new Set(lines.flatMap((line) => (isLink(line) ? [line] : line.filter(isLink))))]\n}\n\n/** The file whose card goes under a message: the one it links. None when it links two or more. */\nexport function cardFileOf(lines: Line[]): Thing | undefined {\n  const files = linksIn(lines)\n  return files.length === 1 ? files[0] : undefined\n}\n\n/** A message that is nothing but one link: it shows the card, not the row. */\nexport function isOnlyOneLink(lines: Line[]): boolean {\n  return lines.length === 1 && isLink(lines[0])\n}\n\n/** 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. */\nexport function CardOf({ thing }: { thing: Thing }) {\n  if (thing.state === 'loading') return <CardLoading kind={thing.kind} layout=\"detailed\" shape={loadingShapeOf(thing)} />\n  if (thing.state === 'unavailable') return <CardUnavailable kind={thing.kind} noun={thing.noun} app={thing.app} />\n  return thing.kind === 'message' ? <MessageCard thing={thing} /> : <DetailedCard thing={thing} />\n}\n\n/** A link alone on its line: its row, or loading, or not available. */\nfunction Row({ thing, preview = false }: { thing: Thing; preview?: boolean }) {\n  if (thing.state === 'loading') return <CardLoading kind={thing.kind} layout=\"compact\" />\n  if (thing.state === 'unavailable') return <CardUnavailable kind={thing.kind} noun={thing.noun} app={thing.app} />\n  return <CompactCard thing={thing} preview={preview} />\n}\n\n/** A sentence: its words, and a chip for each link in it. */\nfunction Sentence({ pieces }: { pieces: Piece[] }) {\n  return (\n    <p className=\"text-body-2 text-text-primary\">\n      {pieces.map((piece, i) => (typeof piece === 'string' ? <span key={i}>{piece}</span> : <ReferenceChip key={i} thing={piece} state={piece.state} preview={!piece.state} />))}\n    </p>\n  )\n}\n\nexport interface PlacedLinesProps {\n  lines: Line[]\n  /** In a document: the lone-line links switched to their card, by line index. */\n  cards?: number[]\n  /** In a document: a click on a lone-line link, which opens its chip menu. */\n  onLink?: (index: number) => void\n  /** Drawn under a line, by line index: the chip menu, open. */\n  under?: (index: number) => ReactNode\n  className?: string\n}\n\n/** 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. */\nexport function PlacedLines({ lines, cards = [], onLink, under, className }: PlacedLinesProps) {\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      {lines.map((line, i) => (\n        <div key={i} className=\"relative flex flex-col\">\n          {isLink(line) ? (\n            onLink ? (\n              // While writing, a click on the link opens its menu instead of following it (the record clicking-a-chip-while-editing-opens-a-menu).\n              <div\n                role=\"button\"\n                tabIndex={0}\n                aria-haspopup=\"menu\"\n                className=\"w-full min-w-0 cursor-pointer\"\n                onClickCapture={(event) => {\n                  event.preventDefault()\n                  event.stopPropagation()\n                  onLink(i)\n                }}\n                onKeyDown={(event) => {\n                  if (event.key === 'Enter') onLink(i)\n                }}\n              >\n                {cards.includes(i) ? <CardOf thing={line} /> : <Row thing={line} />}\n              </div>\n            ) : cards.includes(i) ? (\n              <CardOf thing={line} />\n            ) : (\n              <Row thing={line} preview />\n            )\n          ) : (\n            <Sentence pieces={line} />\n          )}\n          {under?.(i)}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport interface CardUnderProps {\n  thing: Thing\n  /** The \u2715 that removes it: under the message box before sending, or the author's own on a sent message. */\n  onRemove?: () => void\n  /** On a sent message the \u2715 shows on hover; under the box it always shows. */\n  removeOnHover?: boolean\n  className?: string\n}\n\n/** The one file's card under a message, and the \u2715 that removes it. */\nexport function CardUnder({ thing, onRemove, removeOnHover = false, className }: CardUnderProps) {\n  return (\n    <div className={cn('group/card flex items-start gap-1', className)}>\n      <div className=\"min-w-0 flex-1\">\n        <CardOf thing={thing} />\n      </div>\n      {onRemove && (\n        // At the card's top corner, not its middle: a tall card's \u2715 halfway down reads as belonging to nothing.\n        <div className=\"flex shrink-0 self-start pt-2\">\n          <IconButton aria-label=\"Remove card\" tooltip=\"Remove card\" onClick={onRemove} className={cn(removeOnHover && 'opacity-0 group-hover/card:opacity-100 focus-visible:opacity-100')}>\n            <IconX size={16} />\n          </IconButton>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport interface PlacedMessageProps {\n  lines: Line[]\n  /** The card was removed with \u2715: before sending, or by the author afterwards. */\n  removed?: boolean\n  /** Draws the \u2715; without it the card shows with none, as to anyone but the author. */\n  onRemove?: () => void\n  removeOnHover?: boolean\n  /**\n   * An old message, sent before Widgets 2 with a `compact` tag for each of\n   * these: no card was added to it, and each still draws as a row under it.\n   */\n  oldCompact?: Thing[]\n  className?: string\n}\n\n/**\n * A message's text, and under it the one file's card. A file with its card\n * under the message draws no row in it (a chip in a sentence still draws), so\n * a message that is only one link shows its card alone.\n */\nexport function PlacedMessage({ lines, removed = false, onRemove, removeOnHover, oldCompact, className }: PlacedMessageProps) {\n  const file = removed || oldCompact ? undefined : cardFileOf(lines)\n  const shown = file ? lines.filter((line) => line !== file) : lines\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      {shown.length > 0 && <PlacedLines lines={shown} />}\n      {file && <CardUnder thing={file} onRemove={onRemove} removeOnHover={removeOnHover} className=\"max-w-[480px]\" />}\n      {oldCompact?.map((thing, i) => (\n        <CompactCard key={i} thing={thing} preview />\n      ))}\n    </div>\n  )\n}\n\n/** A sent message whose author can remove its card with \u2715, live: try it. */\nexport function SentMessage({ lines, author = true, className }: { lines: Line[]; author?: boolean; className?: string }) {\n  const [removed, setRemoved] = useState(false)\n  return <PlacedMessage lines={lines} removed={removed} onRemove={author ? () => setRemoved(true) : undefined} removeOnHover className={className} />\n}\n\nexport interface ChipMenuProps {\n  thing: Thing\n  /**\n   * A lone-line link offers its card; a chip in a sentence offers Open only,\n   * and so does a link to what has no card worth choosing (a Folder, a file\n   * that is not a picture).\n   */\n  alone?: boolean\n  shownAs?: 'row' | 'card'\n  onShowAs?: (as: 'row' | 'card') => void\n  onOpen?: () => void\n}\n\n/** 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. */\nexport function ChipMenu({ thing, alone = true, shownAs = 'row', onShowAs, onOpen }: ChipMenuProps) {\n  return (\n    <MenuPanel className=\"w-[200px]\">\n      <div role=\"menu\" aria-label=\"Link\" className=\"flex flex-col gap-0.5\">\n        <MenuItem role=\"menuitem\" label=\"Open\" leading={<IconExternalLink size={16} />} onClick={onOpen} />\n        {alone && (\n          <>\n            <MenuSeparator />\n            <div role=\"group\" aria-label=\"Show as\">\n              <MenuSection label=\"Show as\">\n                {(['row', 'card'] as const).map((as) => (\n                  <MenuItem\n                    key={as}\n                    role=\"menuitemradio\"\n                    aria-checked={shownAs === as}\n                    label={as === 'row' ? 'Row' : 'Card'}\n                    trailing={shownAs === as ? <IconCheck size={16} aria-hidden /> : undefined}\n                    onClick={() => onShowAs?.(as)}\n                  />\n                ))}\n              </MenuSection>\n            </div>\n          </>\n        )}\n      </div>\n    </MenuPanel>\n  )\n}\n\n/** A document's text with its chip menu, live: click a lone-line link, then choose Row or Card. */\nexport function PlacedDocument({ lines, initialCards = [], className }: { lines: Line[]; initialCards?: number[]; className?: string }) {\n  const [cards, setCards] = useState(initialCards)\n  const [open, setOpen] = useState<number | null>(null)\n  return (\n    <PlacedLines\n      lines={lines}\n      cards={cards}\n      className={className}\n      onLink={(i) => setOpen(open === i ? null : i)}\n      under={(i) => {\n        const line = lines[i]\n        if (open !== i || !isLink(line)) return null\n        return (\n          <div className=\"absolute left-0 top-full z-10 mt-1\">\n            <ChipMenu\n              thing={line}\n              shownAs={cards.includes(i) ? 'card' : 'row'}\n              onOpen={() => setOpen(null)}\n              onShowAs={(as) => {\n                setCards(as === 'card' ? [...cards, i] : cards.filter((c) => c !== i))\n                setOpen(null)\n              }}\n            />\n          </div>\n        )\n      }}\n    />\n  )\n}\n\n/**\n * A description's and a page's `/` menu with the widget entry (Miky's QA note,\n * 15 Oct: \"`/` section where you can use `[` to insert a widget\"). Format rows\n * shortened to three; Insert as the app has it, plus the link.\n */\nexport function SlashMenuWithLink({ file = true, table = true }: { file?: boolean; table?: boolean }) {\n  return (\n    <MenuPanel className=\"w-[260px]\">\n      <div role=\"menu\" aria-label=\"Insert\" className=\"flex flex-col gap-0.5\">\n        <MenuSection label=\"Format\">\n          <MenuItem label=\"Text\" leading={<IconLetterT size={16} />} />\n          <MenuItem label=\"Heading\" leading={<IconH1 size={16} />} shortcut=\"#\" />\n          <MenuItem label=\"Checklist\" leading={<IconListCheck size={16} />} shortcut=\"[]\" />\n        </MenuSection>\n        <MenuSeparator />\n        <MenuSection label=\"Insert\">\n          {table && <MenuItem label=\"Table\" leading={<IconTable size={16} />} />}\n          {file && <MenuItem label=\"File\" leading={<IconPaperclip size={16} />} />}\n          <MenuItem label=\"Link to a file\" leading={<IconLink size={16} />} shortcut=\"[\" selected />\n        </MenuSection>\n      </div>\n    </MenuPanel>\n  )\n}\n\n/** The `[` list the widget entry opens: the files to link, each led by its kind's icon. */\nexport function LinkPicker({ files, query = '' }: { files: Thing[]; query?: string }) {\n  return (\n    <MenuPanel className=\"w-[320px]\">\n      <div role=\"listbox\" aria-label=\"Link to a file\" className=\"flex flex-col gap-0.5\">\n        <MenuSection label={query ? `Files matching \u201C${query}\u201D` : 'Recent files'}>\n          {files.map((thing, i) => (\n            <MenuItem key={i} role=\"option\" label={thing.kind === 'message' ? `${thing.author}: ${thing.body}` : thing.title} leading={<ThingIcon kind={thing.kind} />} hint={thing.key && <span className=\"text-caption text-text-secondary\">{thing.key}</span>} selected={i === 0} />\n          ))}\n        </MenuSection>\n      </div>\n    </MenuPanel>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["IconPaperclip", "cn", "MenuPanel", "Fragment", "jsx", "jsxs", "cn", "MenuPanel", "IconPaperclip"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.72.0-widgets2.0",
+  "version": "0.72.0-widgets2.1",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.72.0-widgets2.0",
+    "packageVersion": "0.72.0-widgets2.1",
     "exports": 166,
     "typeExports": 155,
     "files": null

package/src/widgets-2/fixtures.ts

@@ -56,6 +56,8 @@ export interface Thing {
   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'
 }
 
 const TODO: Status = { label: 'Todo', colour: 'neutral' }

package/src/widgets-2/places.tsx

@@ -0,0 +1,309 @@
+/**
+ * Where a link sits decides how it draws (Miky, 15 Oct, on the brief "Where a
+ * Link Sits"; why: https://github.com/estiva-app/estiva-docs/blob/main/decisions/where-a-link-sits-decides-how-it-draws.md),
+ * drawn once here so Peek, Ship and Leaf place the same widgets the same way
+ * (WID-3). Each app's own stories put these inside its own frames.
+ *
+ * - A link in a sentence is a chip; a link alone on its line is a row.
+ * - In a message: the one file it links gets its card under it, added by
+ *   default and removed with ✕; a message that is only one link shows the card
+ *   instead of the row; two or more files, no card. No layout choice.
+ * - In a document: no card is ever added. The chip menu on a lone-line link
+ *   offers Open and its card, and the card takes that line's place.
+ */
+import {
+  IconCheck,
+  IconExternalLink,
+  IconH1,
+  IconLetterT,
+  IconLink,
+  IconListCheck,
+  IconPaperclip,
+  IconTable,
+  IconX,
+} from '@tabler/icons-react'
+import { useState, type ReactNode } from 'react'
+import { cn } from '../cn'
+import { IconButton } from '../IconButton'
+import { MenuItem, MenuPanel, MenuSection, MenuSeparator } from '../Menu'
+import type { Thing } from './fixtures'
+import { CardLoading, CardUnavailable, CompactCard, DetailedCard, loadingShapeOf, MessageCard, ReferenceChip, ThingIcon } from './proposed'
+
+/** 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[]
+
+const isLink = (piece: Piece | Line): piece is Thing => typeof piece === 'object' && !Array.isArray(piece)
+
+/** Every file the lines link to, each once. */
+export function linksIn(lines: Line[]): Thing[] {
+  return [...new Set(lines.flatMap((line) => (isLink(line) ? [line] : line.filter(isLink))))]
+}
+
+/** The file whose card goes under a message: the one it links. None when it links two or more. */
+export function cardFileOf(lines: Line[]): Thing | undefined {
+  const files = linksIn(lines)
+  return files.length === 1 ? files[0] : undefined
+}
+
+/** A message that is nothing but one link: it shows the card, not the row. */
+export function isOnlyOneLink(lines: Line[]): boolean {
+  return lines.length === 1 && isLink(lines[0])
+}
+
+/** 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 function CardOf({ thing }: { thing: Thing }) {
+  if (thing.state === 'loading') return <CardLoading kind={thing.kind} layout="detailed" shape={loadingShapeOf(thing)} />
+  if (thing.state === 'unavailable') return <CardUnavailable kind={thing.kind} noun={thing.noun} app={thing.app} />
+  return thing.kind === 'message' ? <MessageCard thing={thing} /> : <DetailedCard thing={thing} />
+}
+
+/** A link alone on its line: its row, or loading, or not available. */
+function Row({ thing, preview = false }: { thing: Thing; preview?: boolean }) {
+  if (thing.state === 'loading') return <CardLoading kind={thing.kind} layout="compact" />
+  if (thing.state === 'unavailable') return <CardUnavailable kind={thing.kind} noun={thing.noun} app={thing.app} />
+  return <CompactCard thing={thing} preview={preview} />
+}
+
+/** A sentence: its words, and a chip for each link in it. */
+function Sentence({ pieces }: { pieces: Piece[] }) {
+  return (
+    <p className="text-body-2 text-text-primary">
+      {pieces.map((piece, i) => (typeof piece === 'string' ? <span key={i}>{piece}</span> : <ReferenceChip key={i} thing={piece} state={piece.state} preview={!piece.state} />))}
+    </p>
+  )
+}
+
+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 function PlacedLines({ lines, cards = [], onLink, under, className }: PlacedLinesProps) {
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {lines.map((line, i) => (
+        <div key={i} className="relative flex flex-col">
+          {isLink(line) ? (
+            onLink ? (
+              // While writing, a click on the link opens its menu instead of following it (the record clicking-a-chip-while-editing-opens-a-menu).
+              <div
+                role="button"
+                tabIndex={0}
+                aria-haspopup="menu"
+                className="w-full min-w-0 cursor-pointer"
+                onClickCapture={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  onLink(i)
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') onLink(i)
+                }}
+              >
+                {cards.includes(i) ? <CardOf thing={line} /> : <Row thing={line} />}
+              </div>
+            ) : cards.includes(i) ? (
+              <CardOf thing={line} />
+            ) : (
+              <Row thing={line} preview />
+            )
+          ) : (
+            <Sentence pieces={line} />
+          )}
+          {under?.(i)}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+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 function CardUnder({ thing, onRemove, removeOnHover = false, className }: CardUnderProps) {
+  return (
+    <div className={cn('group/card flex items-start gap-1', className)}>
+      <div className="min-w-0 flex-1">
+        <CardOf thing={thing} />
+      </div>
+      {onRemove && (
+        // At the card's top corner, not its middle: a tall card's ✕ halfway down reads as belonging to nothing.
+        <div className="flex shrink-0 self-start pt-2">
+          <IconButton aria-label="Remove card" tooltip="Remove card" onClick={onRemove} className={cn(removeOnHover && 'opacity-0 group-hover/card:opacity-100 focus-visible:opacity-100')}>
+            <IconX size={16} />
+          </IconButton>
+        </div>
+      )}
+    </div>
+  )
+}
+
+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 function PlacedMessage({ lines, removed = false, onRemove, removeOnHover, oldCompact, className }: PlacedMessageProps) {
+  const file = removed || oldCompact ? undefined : cardFileOf(lines)
+  const shown = file ? lines.filter((line) => line !== file) : lines
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {shown.length > 0 && <PlacedLines lines={shown} />}
+      {file && <CardUnder thing={file} onRemove={onRemove} removeOnHover={removeOnHover} className="max-w-[480px]" />}
+      {oldCompact?.map((thing, i) => (
+        <CompactCard key={i} thing={thing} preview />
+      ))}
+    </div>
+  )
+}
+
+/** A sent message whose author can remove its card with ✕, live: try it. */
+export function SentMessage({ lines, author = true, className }: { lines: Line[]; author?: boolean; className?: string }) {
+  const [removed, setRemoved] = useState(false)
+  return <PlacedMessage lines={lines} removed={removed} onRemove={author ? () => setRemoved(true) : undefined} removeOnHover className={className} />
+}
+
+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 function ChipMenu({ thing, alone = true, shownAs = 'row', onShowAs, onOpen }: ChipMenuProps) {
+  return (
+    <MenuPanel className="w-[200px]">
+      <div role="menu" aria-label="Link" className="flex flex-col gap-0.5">
+        <MenuItem role="menuitem" label="Open" leading={<IconExternalLink size={16} />} onClick={onOpen} />
+        {alone && (
+          <>
+            <MenuSeparator />
+            <div role="group" aria-label="Show as">
+              <MenuSection label="Show as">
+                {(['row', 'card'] as const).map((as) => (
+                  <MenuItem
+                    key={as}
+                    role="menuitemradio"
+                    aria-checked={shownAs === as}
+                    label={as === 'row' ? 'Row' : 'Card'}
+                    trailing={shownAs === as ? <IconCheck size={16} aria-hidden /> : undefined}
+                    onClick={() => onShowAs?.(as)}
+                  />
+                ))}
+              </MenuSection>
+            </div>
+          </>
+        )}
+      </div>
+    </MenuPanel>
+  )
+}
+
+/** A document's text with its chip menu, live: click a lone-line link, then choose Row or Card. */
+export function PlacedDocument({ lines, initialCards = [], className }: { lines: Line[]; initialCards?: number[]; className?: string }) {
+  const [cards, setCards] = useState(initialCards)
+  const [open, setOpen] = useState<number | null>(null)
+  return (
+    <PlacedLines
+      lines={lines}
+      cards={cards}
+      className={className}
+      onLink={(i) => setOpen(open === i ? null : i)}
+      under={(i) => {
+        const line = lines[i]
+        if (open !== i || !isLink(line)) return null
+        return (
+          <div className="absolute left-0 top-full z-10 mt-1">
+            <ChipMenu
+              thing={line}
+              shownAs={cards.includes(i) ? 'card' : 'row'}
+              onOpen={() => setOpen(null)}
+              onShowAs={(as) => {
+                setCards(as === 'card' ? [...cards, i] : cards.filter((c) => c !== i))
+                setOpen(null)
+              }}
+            />
+          </div>
+        )
+      }}
+    />
+  )
+}
+
+/**
+ * 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 function SlashMenuWithLink({ file = true, table = true }: { file?: boolean; table?: boolean }) {
+  return (
+    <MenuPanel className="w-[260px]">
+      <div role="menu" aria-label="Insert" className="flex flex-col gap-0.5">
+        <MenuSection label="Format">
+          <MenuItem label="Text" leading={<IconLetterT size={16} />} />
+          <MenuItem label="Heading" leading={<IconH1 size={16} />} shortcut="#" />
+          <MenuItem label="Checklist" leading={<IconListCheck size={16} />} shortcut="[]" />
+        </MenuSection>
+        <MenuSeparator />
+        <MenuSection label="Insert">
+          {table && <MenuItem label="Table" leading={<IconTable size={16} />} />}
+          {file && <MenuItem label="File" leading={<IconPaperclip size={16} />} />}
+          <MenuItem label="Link to a file" leading={<IconLink size={16} />} shortcut="[" selected />
+        </MenuSection>
+      </div>
+    </MenuPanel>
+  )
+}
+
+/** The `[` list the widget entry opens: the files to link, each led by its kind's icon. */
+export function LinkPicker({ files, query = '' }: { files: Thing[]; query?: string }) {
+  return (
+    <MenuPanel className="w-[320px]">
+      <div role="listbox" aria-label="Link to a file" className="flex flex-col gap-0.5">
+        <MenuSection label={query ? `Files matching “${query}”` : 'Recent files'}>
+          {files.map((thing, i) => (
+            <MenuItem key={i} role="option" label={thing.kind === 'message' ? `${thing.author}: ${thing.body}` : thing.title} leading={<ThingIcon kind={thing.kind} />} hint={thing.key && <span className="text-caption text-text-secondary">{thing.key}</span>} selected={i === 0} />
+          ))}
+        </MenuSection>
+      </div>
+    </MenuPanel>
+  )
+}

package/src/widgets-2.ts

@@ -8,3 +8,4 @@
  */
 export * from './widgets-2/proposed'
 export * from './widgets-2/fixtures'
+export * from './widgets-2/places'