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

package/dist/widgets-2.js

@@ -0,0 +1,584 @@
+// src/widgets-2/proposed.tsx
+import { IconCircleCheck, IconCircleDashed, IconCircleHalf2, IconCircleX, IconFileText, IconMessage2, IconPaperclip } from "@tabler/icons-react";
+import { Avatar } from "@estiva-app/ui";
+import { AvatarGroup } from "@estiva-app/ui";
+import { Card } from "@estiva-app/ui";
+import { cn } from "@estiva-app/ui";
+import { InlineChip } from "@estiva-app/ui";
+import { KindIcon } from "@estiva-app/ui";
+import { Link } from "@estiva-app/ui";
+import { MenuPanel } from "@estiva-app/ui";
+import { PreviewCard } from "@estiva-app/ui";
+import { Select } from "@estiva-app/ui";
+import { SkeletonBar } from "@estiva-app/ui";
+import { UnreadDot } from "@estiva-app/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var HREF = "#";
+var noop = () => {
+};
+var STATUS_ICON = {
+  neutral: { Icon: IconCircleDashed, tone: "text-text-secondary" },
+  blue: { Icon: IconCircleHalf2, tone: "text-info-default" },
+  green: { Icon: IconCircleCheck, tone: "text-success-default" },
+  muted: { Icon: IconCircleX, tone: "text-text-muted" }
+};
+function StatusMark({ status }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center", title: status.label, children: [
+    /* @__PURE__ */ jsx(StatusIcon, { status }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: status.label })
+  ] });
+}
+function StatusIcon({ status }) {
+  const { Icon, tone } = STATUS_ICON[status.colour];
+  return /* @__PURE__ */ jsx(Icon, { size: 14, stroke: 1.5, className: cn("shrink-0", tone), "aria-hidden": true });
+}
+function ThingIcon({ kind, size = 16, tone = "secondary" }) {
+  if (kind === "page") return /* @__PURE__ */ jsx(IconFileText, { size, stroke: 1.5, className: cn("shrink-0", tone === "secondary" && "text-text-secondary"), "aria-hidden": true });
+  return /* @__PURE__ */ jsx(KindIcon, { kind, size, tone });
+}
+function Key({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "shrink-0 text-caption tabular-nums text-text-muted", children });
+}
+function ProgressRing({ done, total }) {
+  const size = 16;
+  const stroke = 2;
+  const r = (size - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-caption tabular-nums text-text-secondary", title: `${done} of ${total} done`, children: [
+    /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "shrink-0 -rotate-90", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx("circle", { cx: size / 2, cy: size / 2, r, fill: "none", strokeWidth: stroke, className: "stroke-border-default" }),
+      /* @__PURE__ */ jsx("circle", { cx: size / 2, cy: size / 2, r, fill: "none", strokeWidth: stroke, strokeLinecap: "round", strokeDasharray: `${c * done / total} ${c}`, className: "stroke-success-default" })
+    ] }),
+    done,
+    "/",
+    total
+  ] });
+}
+var CONVERSATION_HREF = "#conversation";
+function Comments({ count, unread = false, noun = "comments" }) {
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: CONVERSATION_HREF,
+      variant: "plain",
+      className: cn(
+        "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",
+        unread ? "font-medium text-text-primary" : "text-text-secondary"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(IconMessage2, { size: 14, stroke: 1.5, "aria-hidden": true }),
+        count,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: unread ? `${noun}, unread \u2014 open the conversation` : `${noun} \u2014 open the conversation` }),
+        unread && /* @__PURE__ */ jsx(UnreadDot, { className: "h-auto w-auto" })
+      ]
+    }
+  );
+}
+function Conversations({ thing }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-caption text-text-secondary", children: thing.updated }),
+    /* @__PURE__ */ jsx(Comments, { count: thing.conversations ?? 0, unread: thing.unread, noun: "conversations" })
+  ] });
+}
+var people = (names = []) => names.map((name) => ({ name }));
+function Pickers({ thing, readOnly = false }) {
+  if (!thing.status) return null;
+  if (readOnly) {
+    return /* @__PURE__ */ jsxs("span", { className: "flex h-6 min-w-0 items-center gap-3 text-caption text-text-secondary", children: [
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1", children: [
+        /* @__PURE__ */ jsx(StatusIcon, { status: thing.status }),
+        thing.status.label
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Avatar, { name: thing.assignee, size: 16 }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: thing.assignee ?? "Unassigned" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Select, { size: "small", className: "w-auto", value: "s", onChange: noop, ariaLabel: "Status", options: [{ value: "s", label: thing.status.label, leading: /* @__PURE__ */ jsx(StatusIcon, { status: thing.status }) }] }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        size: "small",
+        className: "w-auto",
+        value: "a",
+        onChange: noop,
+        ariaLabel: thing.kind === "project" ? "Lead" : "Assignee",
+        options: [{ value: "a", label: thing.assignee ?? "Unassigned", leading: /* @__PURE__ */ jsx(Avatar, { name: thing.assignee, size: 16 }) }]
+      }
+    )
+  ] });
+}
+function Lead({ thing, chip = false }) {
+  if (thing.kind === "message") return /* @__PURE__ */ jsx(Avatar, { name: thing.author, size: 16 });
+  return /* @__PURE__ */ jsx(ThingIcon, { kind: thing.kind, size: chip ? 14 : 16, tone: chip ? "inherit" : "secondary" });
+}
+function ReferenceChip({ thing, state = "ready", preview = false }) {
+  if (state === "loading") {
+    return /* @__PURE__ */ jsx(InlineChip, { icon: /* @__PURE__ */ jsx(ThingIcon, { kind: thing.kind, size: 14, tone: "inherit" }), children: /* @__PURE__ */ jsx(SkeletonBar, { className: "h-2.5 w-16" }) });
+  }
+  if (state === "unavailable") {
+    return /* @__PURE__ */ jsxs(InlineChip, { icon: /* @__PURE__ */ jsx(ThingIcon, { kind: thing.kind, size: 14, tone: "inherit" }), className: "text-text-muted", children: [
+      thing.noun,
+      ", not available"
+    ] });
+  }
+  const chip = /* @__PURE__ */ jsxs(InlineChip, { icon: /* @__PURE__ */ jsx(Lead, { thing, chip: true }), href: HREF, className: "max-w-[28ch]", children: [
+    thing.key && /* @__PURE__ */ jsx(Key, { children: thing.key }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: thing.kind === "message" ? `${thing.author}: ${thing.body}` : thing.title }),
+    thing.status && /* @__PURE__ */ jsx(StatusMark, { status: thing.status })
+  ] });
+  return preview ? /* @__PURE__ */ jsx(HoverPreview, { thing, children: chip }) : chip;
+}
+function CompactCard({ thing, preview = false }) {
+  const card = /* @__PURE__ */ jsxs(Card, { fill: "inset", hover: "hairline", className: "relative flex h-9 items-center gap-2 px-3", children: [
+    /* @__PURE__ */ jsx(Lead, { thing }),
+    thing.kind === "message" ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-2 text-body-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-body-2-strong text-text-primary", children: thing.author }),
+      /* @__PURE__ */ jsx(Link, { href: HREF, variant: "quiet", cover: true, truncate: true, className: "text-text-secondary", children: thing.body })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      thing.key && /* @__PURE__ */ jsx(Key, { children: thing.key }),
+      /* @__PURE__ */ jsx("span", { className: "contents text-body-2-strong text-text-primary", children: /* @__PURE__ */ jsx(Link, { href: HREF, variant: "quiet", cover: true, truncate: true, className: "min-w-0 flex-1", children: thing.title }) })
+    ] }),
+    thing.kind === "topic" && /* @__PURE__ */ jsx(Conversations, { thing }),
+    thing.kind === "page" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-caption text-text-secondary", children: thing.updated }),
+    thing.kind === "message" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-caption text-text-muted", children: thing.updated }),
+    thing.unread && thing.comments !== void 0 && /* @__PURE__ */ jsx(Comments, { count: thing.comments, unread: true }),
+    thing.status && thing.kind === "issue" && /* @__PURE__ */ jsx(StatusMark, { status: thing.status }),
+    thing.done && /* @__PURE__ */ jsx(ProgressRing, { done: thing.done.done, total: thing.done.total }),
+    thing.assignee && /* @__PURE__ */ jsx(Avatar, { name: thing.assignee, size: 16 }),
+    thing.members && /* @__PURE__ */ jsx(AvatarGroup, { members: people(thing.members), size: 16 }),
+    thing.authors && /* @__PURE__ */ jsx(AvatarGroup, { members: people(thing.authors), size: 16 })
+  ] });
+  return preview ? /* @__PURE__ */ jsx(HoverPreview, { thing, block: true, children: card }) : card;
+}
+function DetailedCard({ thing, bare = false, readOnly = bare }) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-[19.6px] items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Link, { href: HREF, variant: "quiet", className: "flex min-w-0 flex-1 items-center gap-2 text-body-2-strong text-text-primary", children: [
+        /* @__PURE__ */ jsx(ThingIcon, { kind: thing.kind }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: thing.title })
+      ] }),
+      thing.done && /* @__PURE__ */ jsx(ProgressRing, { done: thing.done.done, total: thing.done.total }),
+      thing.members && /* @__PURE__ */ jsx(AvatarGroup, { members: people(thing.members), size: 16 })
+    ] }),
+    (thing.key || thing.subtitle) && /* @__PURE__ */ jsx("p", { className: "-mt-1 pl-6 text-caption text-text-secondary", children: [thing.key, thing.subtitle].filter(Boolean).join(" \xB7 ") }),
+    thing.summary && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-body-2 text-text-secondary", children: thing.summary }),
+    thing.children && /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border-subtle rounded-md border border-border-subtle", children: thing.children.map((child) => /* @__PURE__ */ jsxs("div", { className: "relative flex h-8 items-center gap-2 px-2 hover:bg-bg-active", children: [
+      /* @__PURE__ */ jsx(StatusMark, { status: child.status }),
+      /* @__PURE__ */ jsx(Key, { children: child.key }),
+      /* @__PURE__ */ jsx("span", { className: "contents text-body-2 text-text-primary", children: /* @__PURE__ */ jsx(Link, { href: HREF, variant: "quiet", cover: true, truncate: true, className: "min-w-0 flex-1", children: child.title }) }),
+      child.assignee ? /* @__PURE__ */ jsx(Avatar, { name: child.assignee, size: 16 }) : /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0", "aria-hidden": true })
+    ] }, child.key)) }),
+    thing.latest && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-caption text-text-muted", children: "Latest conversation" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 rounded-md border border-border-subtle p-2", children: [
+        /* @__PURE__ */ jsx(Avatar, { name: thing.latest.author, size: 16 }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 text-caption", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-text-primary", children: thing.latest.author }),
+            /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: thing.latest.at })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-body-2 text-text-secondary", children: thing.latest.body })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-6 items-center gap-2 border-t border-border-subtle pt-2", children: [
+      (thing.kind === "issue" || thing.kind === "project") && /* @__PURE__ */ jsx(Pickers, { thing, readOnly }),
+      thing.kind === "topic" && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs("span", { className: "text-caption text-text-secondary", children: [
+        "Updated ",
+        thing.updated
+      ] }) }),
+      thing.authors && /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2 text-caption text-text-secondary", children: [
+        /* @__PURE__ */ jsx(AvatarGroup, { members: people(thing.authors), size: 16 }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: thing.updated })
+      ] }),
+      thing.kind === "topic" && /* @__PURE__ */ jsx("span", { className: "ml-auto flex", children: /* @__PURE__ */ jsx(Comments, { count: thing.conversations ?? 0, unread: thing.unread, noun: "conversations" }) }),
+      thing.comments !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto flex", children: /* @__PURE__ */ jsx(Comments, { count: thing.comments, unread: thing.unread }) })
+    ] })
+  ] });
+  if (bare) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-3", children: body });
+  return /* @__PURE__ */ jsx(Card, { fill: "inset", "data-card": "detailed", className: "flex flex-col gap-2 p-3", children: body });
+}
+function HoverPreview({ thing, block = false, children }) {
+  return /* @__PURE__ */ jsx(PreviewCard, { side: "bottom", content: /* @__PURE__ */ jsx(DetailedCard, { thing, bare: true }), wrapperClassName: block ? "grid w-full min-w-0 grid-cols-[minmax(0,1fr)]" : "max-w-full", children });
+}
+function HoverPreviewOpen({ thing }) {
+  return /* @__PURE__ */ jsx(MenuPanel, { className: "w-[360px] p-0", children: /* @__PURE__ */ jsx(DetailedCard, { thing, bare: true }) });
+}
+function MessageCard({ thing }) {
+  return /* @__PURE__ */ jsxs(Card, { fill: "inset", className: "flex flex-col gap-2 p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Avatar, { name: thing.author, size: 24 }),
+      /* @__PURE__ */ jsx("span", { className: "text-body-2-strong text-text-primary", children: thing.author }),
+      /* @__PURE__ */ jsx(Link, { href: HREF, variant: "quiet", className: "text-caption text-text-muted", children: thing.updated })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "line-clamp-4 text-body-2 text-text-primary", children: thing.body })
+  ] });
+}
+function loadingShapeOf(thing) {
+  return {
+    subtitle: !!(thing.subtitle || thing.key),
+    summary: !!thing.summary,
+    rows: thing.children?.length ?? 0,
+    preview: !!thing.latest,
+    ring: !!thing.done,
+    footer: thing.kind === "issue" || thing.kind === "project" ? "pickers" : thing.authors ? "people" : "line"
+  };
+}
+function Bar({ className }) {
+  return /* @__PURE__ */ jsx(SkeletonBar, { className: cn("bg-bg-active", className) });
+}
+function CardLoading({ kind, layout, shape = {} }) {
+  if (layout === "compact") {
+    return /* @__PURE__ */ jsxs(Card, { fill: "inset", "aria-hidden": true, "data-card": "loading", className: "flex h-9 items-center gap-2 px-3 animate-skeleton-in", children: [
+      /* @__PURE__ */ jsx(ThingIcon, { kind }),
+      /* @__PURE__ */ jsx(Bar, { className: "h-3 w-2/5" }),
+      /* @__PURE__ */ jsx(Bar, { className: "ml-auto size-4 rounded-full" })
+    ] });
+  }
+  const { subtitle = false, summary = true, rows = 0, preview = false, ring = false, footer = "line" } = shape;
+  return /* @__PURE__ */ jsxs(Card, { fill: "inset", "aria-hidden": true, "data-card": "loading", className: "flex flex-col gap-2 p-3 animate-skeleton-in", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-[19.6px] items-center gap-2", children: [
+      /* @__PURE__ */ jsx(ThingIcon, { kind }),
+      /* @__PURE__ */ jsx(Bar, { className: "h-3.5 w-1/2" }),
+      ring && /* @__PURE__ */ jsx(Bar, { className: "ml-auto size-4 rounded-full" })
+    ] }),
+    subtitle && /* @__PURE__ */ jsx("div", { className: "-mt-1 flex h-[14.4px] items-center pl-6", children: /* @__PURE__ */ jsx(Bar, { className: "h-2.5 w-20" }) }),
+    summary && /* @__PURE__ */ jsx("div", { className: "flex h-[19.6px] items-center", children: /* @__PURE__ */ jsx(Bar, { className: "h-3 w-4/5" }) }),
+    rows > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border-subtle rounded-md border border-border-subtle", children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx("div", { className: "flex h-8 items-center px-2", children: /* @__PURE__ */ jsx(Bar, { className: "h-3 w-1/3" }) }, i)) }),
+    preview && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-[14.4px] items-center", children: /* @__PURE__ */ jsx(Bar, { className: "h-2.5 w-28" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex h-[71.6px] flex-col justify-center gap-2 rounded-md border border-border-subtle p-2", children: [
+        /* @__PURE__ */ jsx(Bar, { className: "h-2.5 w-24" }),
+        /* @__PURE__ */ jsx(Bar, { className: "h-3 w-full" }),
+        /* @__PURE__ */ jsx(Bar, { className: "h-3 w-3/5" })
+      ] })
+    ] }),
+    footer !== "none" && /* @__PURE__ */ jsx("div", { className: "flex min-h-6 items-center gap-2 border-t border-border-subtle pt-2", children: footer === "pickers" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Bar, { className: "h-6 w-24 rounded-md" }),
+      /* @__PURE__ */ jsx(Bar, { className: "h-6 w-28 rounded-md" })
+    ] }) : footer === "people" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Bar, { className: "size-4 rounded-full" }),
+      /* @__PURE__ */ jsx(Bar, { className: "h-3 w-40" })
+    ] }) : /* @__PURE__ */ jsx(Bar, { className: "h-3 w-40" }) })
+  ] });
+}
+function CardUnavailable({ kind, noun, app }) {
+  return /* @__PURE__ */ jsxs(Card, { fill: "none", unreadable: true, className: "flex h-9 items-center gap-2 px-3", children: [
+    /* @__PURE__ */ jsx(ThingIcon, { kind }),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate text-body-2 text-text-muted", children: [
+      noun,
+      " \u2014 not available."
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-caption", children: /* @__PURE__ */ jsxs(Link, { href: HREF, variant: "quiet", external: true, className: "text-text-secondary", children: [
+      "Open in ",
+      app,
+      " \u2197"
+    ] }) })
+  ] });
+}
+function PartCard({ kind, heading, partKey, children, state = "ready", noun, app }) {
+  if (state === "loading") return /* @__PURE__ */ jsx(CardLoading, { kind, layout: "detailed", shape: { summary: true, rows: 0, footer: "none" } });
+  if (state === "unavailable") return /* @__PURE__ */ jsx(CardUnavailable, { kind, noun: `A part of this ${noun.toLowerCase()}`, app });
+  return /* @__PURE__ */ jsxs(Card, { fill: "inset", className: "flex flex-col gap-2 p-3", children: [
+    /* @__PURE__ */ jsxs(Link, { href: HREF, variant: "quiet", className: "flex min-w-0 items-center gap-2 text-body-2-strong text-text-primary", children: [
+      /* @__PURE__ */ jsx(ThingIcon, { kind }),
+      partKey && /* @__PURE__ */ jsx(Key, { children: partKey }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: heading })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-l-2 border-border-default pl-3", children })
+  ] });
+}
+function CommentAnchor({ text }) {
+  if (text === void 0) return /* @__PURE__ */ jsx("div", { className: "border-l-2 border-border-default pl-2 text-caption text-text-muted", children: "The part this is about was deleted." });
+  return /* @__PURE__ */ jsx("div", { className: "border-l-2 border-border-strong pl-2 text-caption text-text-muted", children: /* @__PURE__ */ jsx("span", { className: "line-clamp-2 italic", children: text }) });
+}
+function AttachmentChip({ name, state = "ready" }) {
+  if (state === "loading") {
+    return /* @__PURE__ */ jsx(InlineChip, { icon: /* @__PURE__ */ jsx(IconPaperclip, { size: 14, stroke: 1.5, "aria-hidden": true }), children: /* @__PURE__ */ jsx(SkeletonBar, { className: "h-2.5 w-16" }) });
+  }
+  if (state === "unavailable") {
+    return /* @__PURE__ */ jsx(InlineChip, { icon: /* @__PURE__ */ jsx(IconPaperclip, { size: 14, stroke: 1.5, "aria-hidden": true }), className: "text-text-muted", children: "File, not available" });
+  }
+  return /* @__PURE__ */ jsx(InlineChip, { icon: /* @__PURE__ */ jsx(IconPaperclip, { size: 14, stroke: 1.5, "aria-hidden": true }), href: HREF, className: "max-w-[24ch]", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: name }) });
+}
+
+// src/widgets-2/fixtures.ts
+var TODO = { label: "Todo", colour: "neutral" };
+var DOING = { label: "In progress", colour: "blue" };
+var DONE = { label: "Done", colour: "green" };
+var PARAGRAPH = "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.";
+var SUMMARY = "A one-sentence summary of what this is for.";
+var ISSUE = {
+  kind: "issue",
+  noun: "Issue",
+  app: "Ship",
+  title: "Item one, with a title long enough to be cut short",
+  key: "ABC-2",
+  subtitle: "Group one",
+  body: PARAGRAPH,
+  summary: SUMMARY,
+  status: DOING,
+  assignee: "Person One",
+  comments: 4,
+  unread: true
+};
+var PROJECT = {
+  kind: "project",
+  noun: "Project",
+  app: "Ship",
+  title: "Group one",
+  body: PARAGRAPH,
+  summary: SUMMARY,
+  status: DOING,
+  assignee: "Person Two",
+  progress: "3 of 8 done",
+  done: { done: 3, total: 8 },
+  comments: 6,
+  children: [
+    { title: "Item one", key: "ABC-1", status: DONE, assignee: "Person One" },
+    { title: "Item two", key: "ABC-2", status: DOING, assignee: "Person Two" },
+    { title: "Item three", key: "ABC-3", status: TODO }
+  ]
+};
+var TOPIC = {
+  kind: "topic",
+  noun: "Topic",
+  app: "Peek",
+  title: "Place one",
+  conversations: 12,
+  unread: true,
+  members: ["Person One", "Person Two", "Person Three"],
+  updated: "2h ago",
+  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" }
+};
+var MESSAGE = {
+  kind: "message",
+  noun: "Message",
+  app: "Peek",
+  title: "Person Two",
+  author: "Person Two",
+  body: "A message of two sentences, written by someone in a conversation. It is the words the link points to.",
+  updated: "10:42"
+};
+var PAGE = {
+  kind: "page",
+  noun: "Page",
+  app: "Leaf",
+  title: "Page one",
+  subtitle: "Folder one",
+  body: PARAGRAPH,
+  summary: SUMMARY,
+  author: "Person One",
+  authors: ["Person One", "Person Two"],
+  comments: 2,
+  updated: "Edited yesterday"
+};
+var PART = {
+  heading: "Item one",
+  noun: "Issue",
+  app: "Ship",
+  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"]
+};
+var ATTACHMENT = { name: "picture-one.png", size: 182400, contentType: "image/png" };
+var ATTACHMENT_FILE = { name: "document-one.pdf", size: 124e4, contentType: "application/pdf" };
+var UNREADABLE = { kind: "issue", noun: "Issue", app: "Ship", address: "naddr1qqjxgdmzxy6r2vfs95cryvmp956x2etp94sns" };
+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,
+  PART,
+  PICTURE,
+  PROJECT,
+  PartCard,
+  PlacedDocument,
+  PlacedLines,
+  PlacedMessage,
+  ProgressRing,
+  ReferenceChip,
+  SentMessage,
+  SlashMenuWithLink,
+  StatusMark,
+  TOPIC,
+  ThingIcon,
+  UNREADABLE,
+  cardFileOf,
+  isOnlyOneLink,
+  linksIn,
+  loadingShapeOf
+};
+//# sourceMappingURL=widgets-2.js.map