@mrrocket/sdk 0.4.0 → 0.8.0

package/dist/feedback.js

@@ -1,14 +1,71 @@
 "use client";
 
 // src/feedback.tsx
-import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { useApi } from "./api.js";
-import { Chat, ChevronUp, Cross, Plus, Root, StatusPill, VoteButton, similarPosts, timeAgo, useEscape } from "./ui.js";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  createApi,
+  useApi
+} from "./api.js";
+import { useCtx } from "./context.js";
+import { Chat, ChevronUp, Cross, Moon, Plus, Root, Search, StatusPill, Sun, VoteButton, similarPosts, timeAgo, useEscape } from "./ui.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var useFeedbackList = (opts) => {
-  const api = useApi();
+var whoKey = (apiKey) => `ckw-board-who:${apiKey}`;
+var readWho = (apiKey) => {
+  try {
+    const raw = window.localStorage.getItem(whoKey(apiKey));
+    const w = raw ? JSON.parse(raw) : null;
+    return w && typeof w.id === "string" && typeof w.name === "string" && typeof w.email === "string" ? w : null;
+  } catch {
+    return null;
+  }
+};
+var newWhoId = () => {
+  try {
+    return `fb_${crypto.randomUUID()}`;
+  } catch {
+    return `fb_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`;
+  }
+};
+var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var useIdentity = () => {
+  const ctx = useCtx();
+  const [saved, setSaved] = useState(null);
+  const [asking, setAsking] = useState(null);
+  useEffect(() => setSaved(readWho(ctx.apiKey)), [ctx.apiKey]);
+  const fromApp = !!ctx.user && (!!ctx.user.email || !!ctx.user.name);
+  const writer = useMemo(
+    () => fromApp || !saved ? null : { distinctId: saved.id, user: { name: saved.name, email: saved.email } },
+    [fromApp, saved]
+  );
+  const api = useApi(writer);
+  const known = fromApp || !!saved;
+  const save = useCallback(
+    (name2, email) => {
+      const who = { id: saved?.id ?? newWhoId(), name: name2.trim(), email: email.trim().toLowerCase() };
+      try {
+        window.localStorage.setItem(whoKey(ctx.apiKey), JSON.stringify(who));
+      } catch {
+      }
+      setSaved(who);
+      return createApi({ apiKey: ctx.apiKey, host: ctx.host, distinctId: who.id, user: { name: who.name, email: who.email } });
+    },
+    [ctx.apiKey, ctx.host, saved]
+  );
+  const forget = useCallback(() => {
+    try {
+      window.localStorage.removeItem(whoKey(ctx.apiKey));
+    } catch {
+    }
+    setSaved(null);
+  }, [ctx.apiKey]);
+  const need = useCallback((fn) => known ? fn(api) : setAsking(() => fn), [known, api]);
+  const name = fromApp ? String(ctx.user?.name ?? ctx.user?.email ?? "") : saved?.name ?? "";
+  return { api, known, fromApp, name, save, forget, need, asking, cancel: () => setAsking(null) };
+};
+var useFeedbackList = (api, opts) => {
   const [posts, setPosts] = useState([]);
   const [boards, setBoards] = useState([]);
+  const [product, setProduct] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
   const [tick, setTick] = useState(0);
@@ -21,6 +78,7 @@ var useFeedbackList = (opts) => {
         api.list({ board, sort, q: q?.trim() || void 0 }, ctl.signal).then((r) => {
           setPosts(r.posts);
           setBoards(r.boards);
+          if (r.product) setProduct(r.product);
           setError("");
           setLoading(false);
         }).catch((e) => {
@@ -38,41 +96,124 @@ var useFeedbackList = (opts) => {
   }, [api, board, sort, q, tick]);
   const patch = useCallback((id, fn) => setPosts((all) => all.map((p) => p.id === id ? fn(p) : p)), []);
   const vote = useCallback(
-    (post) => {
+    (post, as = api) => {
       const flip = (p) => ({ ...p, voted: !p.voted, votes: p.votes + (p.voted ? -1 : 1) });
       patch(post.id, flip);
-      api.vote(post.id).then((r) => patch(post.id, (p) => ({ ...p, voted: r.voted, votes: r.votes }))).catch((e) => {
+      as.vote(post.id).then((r) => patch(post.id, (p) => ({ ...p, voted: r.voted, votes: r.votes }))).catch((e) => {
         patch(post.id, flip);
         setError(`Your vote was not saved. ${e.message}`);
       });
     },
     [api, patch]
   );
-  return { api, posts, setPosts, patch, boards, loading, error, setError, vote, reload: () => setTick((t) => t + 1) };
+  return { posts, setPosts, patch, boards, product, loading, error, setError, vote, reload: () => setTick((t) => t + 1) };
+};
+var BOARD_TONE = { feature: "blue", bug: "red", integration: "violet", improvement: "green" };
+var TypeChip = ({ board, boards }) => /* @__PURE__ */ jsx("span", { className: "ckw-type", "data-tone": BOARD_TONE[board] ?? "gray", children: boards.find((b) => b.id === board)?.label ?? board });
+var Avatar = ({ name, team }) => /* @__PURE__ */ jsx("span", { className: "ckw-av", "data-team": team || void 0, "aria-hidden": "true", children: (name.trim()[0] ?? "?").toUpperCase() });
+var Skeleton = ({ rows = 3 }) => /* @__PURE__ */ jsx("div", { "aria-hidden": "true", children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx("div", { className: "ckw-skel" }, i)) });
+var ErrorBar = ({ message, onRetry, onClose }) => /* @__PURE__ */ jsxs("div", { className: "ckw-error", role: "alert", children: [
+  /* @__PURE__ */ jsx("span", { children: message }),
+  onRetry ? /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-btn", onClick: onRetry, children: "Retry" }) : onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-btn ckw-btn-ghost", onClick: onClose, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx(Cross, {}) })
+] });
+var Modal = ({ title, onClose, children }) => {
+  const box = useRef(null);
+  const id = useId();
+  useEscape(onClose);
+  useEffect(() => {
+    const before = document.activeElement;
+    box.current?.querySelector("input, textarea, button")?.focus();
+    return () => before?.focus?.();
+  }, []);
+  const trap = (e) => {
+    if (e.key !== "Tab" || !box.current) return;
+    const f = [...box.current.querySelectorAll("a[href], button:not([disabled]), input, select, textarea")];
+    if (!f.length) return;
+    const first = f[0];
+    const last = f[f.length - 1];
+    if (e.shiftKey && document.activeElement === first) e.preventDefault(), last.focus();
+    else if (!e.shiftKey && document.activeElement === last) e.preventDefault(), first.focus();
+  };
+  return /* @__PURE__ */ jsx("div", { className: "ckw-scrim", onMouseDown: (e) => e.target === e.currentTarget && onClose(), children: /* @__PURE__ */ jsxs("div", { ref: box, className: "ckw-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": id, onKeyDown: trap, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ckw-modal-head", children: [
+      /* @__PURE__ */ jsx("h2", { id, children: title }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-icon-btn", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(Cross, {}) })
+    ] }),
+    children
+  ] }) });
+};
+var IdentityFields = ({ name, email, setName, setEmail }) => {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "ckw-pair", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ckw-field", children: [
+        /* @__PURE__ */ jsx("label", { className: "ckw-label", htmlFor: `${id}-n`, children: "Your name" }),
+        /* @__PURE__ */ jsx("input", { id: `${id}-n`, className: "ckw-input", value: name, maxLength: 80, required: true, autoComplete: "name", onChange: (e) => setName(e.target.value) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ckw-field", children: [
+        /* @__PURE__ */ jsx("label", { className: "ckw-label", htmlFor: `${id}-e`, children: "Email" }),
+        /* @__PURE__ */ jsx("input", { id: `${id}-e`, className: "ckw-input", type: "email", value: email, maxLength: 200, required: true, autoComplete: "email", onChange: (e) => setEmail(e.target.value) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "ckw-fine", children: "Others see your first name and last initial. Your email is only for updates on what you posted or voted for." })
+  ] });
+};
+var IdentityDialog = ({ identity }) => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const ok = name.trim().length > 0 && EMAIL.test(email.trim());
+  const run = identity.asking;
+  if (!run) return null;
+  return /* @__PURE__ */ jsx(Modal, { title: "Before you vote or comment", onClose: identity.cancel, children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: "ckw-modal-body",
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (!ok) return;
+        const api = identity.save(name, email);
+        identity.cancel();
+        run(api);
+      },
+      children: [
+        /* @__PURE__ */ jsx(IdentityFields, { name, email, setName, setEmail }),
+        /* @__PURE__ */ jsxs("div", { className: "ckw-actions", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-btn ckw-btn-ghost", onClick: identity.cancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx("button", { type: "submit", className: "ckw-btn ckw-btn-primary", disabled: !ok, children: "Continue" })
+        ] })
+      ]
+    }
+  ) });
 };
 var SubmitForm = ({
-  api,
+  identity,
   boards,
   posts,
   onCreated,
   onVote,
   onCancel,
-  compact
+  compact,
+  bare
 }) => {
   const id = useId();
   const [title, setTitle] = useState("");
   const [body, setBody] = useState("");
   const [board, setBoard] = useState("");
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
   const chosen = board || boards[0]?.id || "";
   const dupes = similarPosts(title, posts);
+  const ask = !identity.known;
+  const ready = title.trim().length >= 3 && (!ask || name.trim().length > 0 && EMAIL.test(email.trim()));
   const submit = async (e) => {
     e.preventDefault();
-    if (!title.trim() || busy) return;
+    if (!ready || busy) return;
     setBusy(true);
     setError("");
     try {
+      const api = ask ? identity.save(name, email) : identity.api;
       const created = await api.submit({ title: title.trim(), body: body.trim() || void 0, board: chosen });
       setTitle("");
       setBody("");
@@ -83,10 +224,10 @@ var SubmitForm = ({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsxs("form", { className: "ckw-form", onSubmit: submit, children: [
+  return /* @__PURE__ */ jsxs("form", { className: bare ? "ckw-modal-body" : "ckw-form", onSubmit: submit, children: [
     /* @__PURE__ */ jsxs("div", { className: "ckw-field", children: [
       /* @__PURE__ */ jsx("label", { className: "ckw-label", htmlFor: `${id}-t`, children: "Title" }),
-      /* @__PURE__ */ jsx("input", { id: `${id}-t`, className: "ckw-input", value: title, maxLength: 140, required: true, autoFocus: true, onChange: (e) => setTitle(e.target.value), placeholder: "Short, specific summary" })
+      /* @__PURE__ */ jsx("input", { id: `${id}-t`, className: "ckw-input", value: title, maxLength: 120, required: true, autoFocus: true, onChange: (e) => setTitle(e.target.value), placeholder: "Short, specific summary" })
     ] }),
     dupes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ckw-dupes", role: "status", children: [
       /* @__PURE__ */ jsx("p", { children: "Similar requests. Vote instead of adding a duplicate:" }),
@@ -96,116 +237,223 @@ var SubmitForm = ({
       ] }, d.id))
     ] }),
     !compact && /* @__PURE__ */ jsxs("div", { className: "ckw-field", children: [
-      /* @__PURE__ */ jsx("label", { className: "ckw-label", htmlFor: `${id}-b`, children: "Details (optional)" }),
-      /* @__PURE__ */ jsx("textarea", { id: `${id}-b`, className: "ckw-textarea", value: body, maxLength: 2e3, onChange: (e) => setBody(e.target.value), placeholder: "What are you trying to do?" })
+      /* @__PURE__ */ jsxs("label", { className: "ckw-label", htmlFor: `${id}-b`, children: [
+        "Details ",
+        /* @__PURE__ */ jsx("span", { className: "ckw-opt-l", children: "optional" })
+      ] }),
+      /* @__PURE__ */ jsx("textarea", { id: `${id}-b`, className: "ckw-textarea", value: body, maxLength: 2e3, onChange: (e) => setBody(e.target.value), placeholder: "What are you trying to do? What gets in the way?" })
     ] }),
     boards.length > 1 && /* @__PURE__ */ jsxs("div", { className: "ckw-field", children: [
-      /* @__PURE__ */ jsx("label", { className: "ckw-label", htmlFor: `${id}-c`, children: "Board" }),
-      /* @__PURE__ */ jsx("select", { id: `${id}-c`, className: "ckw-select", value: chosen, onChange: (e) => setBoard(e.target.value), children: boards.map((b) => /* @__PURE__ */ jsx("option", { value: b.id, children: b.label }, b.id)) })
+      /* @__PURE__ */ jsx("span", { className: "ckw-label", id: `${id}-c`, children: "Type" }),
+      /* @__PURE__ */ jsx("div", { className: "ckw-chips", role: "radiogroup", "aria-labelledby": `${id}-c`, style: { marginBottom: 0 }, children: boards.map((b) => /* @__PURE__ */ jsx("button", { type: "button", role: "radio", "aria-checked": chosen === b.id, className: "ckw-chip", onClick: () => setBoard(b.id), children: b.label }, b.id)) })
     ] }),
+    ask && /* @__PURE__ */ jsx(IdentityFields, { name, email, setName, setEmail }),
     error && /* @__PURE__ */ jsx("div", { className: "ckw-error", role: "alert", children: error }),
     /* @__PURE__ */ jsxs("div", { className: "ckw-actions", children: [
       onCancel && /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-btn ckw-btn-ghost", onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx("button", { type: "submit", className: "ckw-btn ckw-btn-primary", disabled: busy || !title.trim(), children: busy ? "Sending\u2026" : "Submit request" })
+      /* @__PURE__ */ jsx("button", { type: "submit", className: "ckw-btn ckw-btn-primary", disabled: busy || !ready, children: busy ? "Sending\u2026" : "Submit" })
     ] })
   ] });
 };
-var PostRow = ({ post, onOpen, onVote }) => /* @__PURE__ */ jsxs("li", { className: "ckw-row", children: [
+var PostCard = ({ post, boards, onOpen, onVote }) => /* @__PURE__ */ jsxs("li", { className: "ckw-post", children: [
   /* @__PURE__ */ jsx(VoteButton, { post, onVote }),
   /* @__PURE__ */ jsxs("div", { className: "ckw-main", children: [
-    /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-link", onClick: () => onOpen(post), children: post.title }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-link ckw-stretch", onClick: () => onOpen(post), children: post.title }),
     post.body && /* @__PURE__ */ jsx("p", { className: "ckw-excerpt", children: post.body }),
     /* @__PURE__ */ jsxs("div", { className: "ckw-meta", children: [
-      /* @__PURE__ */ jsx(StatusPill, { status: post.status }),
-      /* @__PURE__ */ jsxs("span", { className: "ckw-stat", children: [
+      /* @__PURE__ */ jsx(TypeChip, { board: post.board, boards }),
+      post.status !== "review" && /* @__PURE__ */ jsx(StatusPill, { status: post.status }),
+      /* @__PURE__ */ jsxs("span", { className: "ckw-stat", "aria-label": `${post.comments} comments`, children: [
         /* @__PURE__ */ jsx(Chat, {}),
         " ",
         post.comments
       ] }),
-      /* @__PURE__ */ jsx("span", { children: timeAgo(post.createdAt) })
+      /* @__PURE__ */ jsx("span", { className: "ckw-dot-sep", children: [post.author, timeAgo(post.createdAt)].filter(Boolean).join(" \xB7 ") })
     ] })
   ] })
 ] });
-var Skeleton = () => /* @__PURE__ */ jsx("div", { "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx("div", { className: "ckw-skel" }, i)) });
-var ErrorBar = ({ message, onRetry, onClose }) => /* @__PURE__ */ jsxs("div", { className: "ckw-error", role: "alert", children: [
-  /* @__PURE__ */ jsx("span", { children: message }),
-  onRetry ? /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-btn", onClick: onRetry, children: "Retry" }) : onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-btn ckw-btn-ghost", onClick: onClose, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx(Cross, {}) })
-] });
-var PostDetail = ({ post, onBack, onVote }) => {
-  const api = useApi();
+var Requests = ({
+  list,
+  sort,
+  setSort,
+  board,
+  setBoard,
+  q,
+  onOpen,
+  onVote,
+  onNew
+}) => {
+  const { posts, boards } = list;
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "ckw-tools", children: [
+      /* @__PURE__ */ jsx("div", { className: "ckw-seg", role: "group", "aria-label": "Sort", children: ["top", "new"].map((s) => /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": sort === s, onClick: () => setSort(s), children: s === "top" ? "Top" : "New" }, s)) }),
+      boards.length > 1 && /* @__PURE__ */ jsxs("div", { className: "ckw-chips ckw-chips-inline", role: "group", "aria-label": "Type", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-chip", "aria-pressed": !board, onClick: () => setBoard(void 0), children: "All" }),
+        boards.map((b) => /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-chip", "aria-pressed": board === b.id, onClick: () => setBoard(b.id), children: b.label }, b.id))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-busy": list.loading, children: list.loading && posts.length === 0 ? /* @__PURE__ */ jsx(Skeleton, {}) : posts.length === 0 && !list.error ? /* @__PURE__ */ jsxs("div", { className: "ckw-empty", children: [
+      /* @__PURE__ */ jsx("p", { children: q ? "No request matches your search." : board ? "Nothing of this type yet." : "No requests yet." }),
+      !q && /* @__PURE__ */ jsxs("button", { type: "button", className: "ckw-btn ckw-btn-primary", onClick: onNew, children: [
+        /* @__PURE__ */ jsx(Plus, {}),
+        " Suggest the first one"
+      ] })
+    ] }) : /* @__PURE__ */ jsx("ul", { className: "ckw-posts", children: posts.map((p) => /* @__PURE__ */ jsx(PostCard, { post: p, boards, onOpen, onVote }, p.id)) }) })
+  ] }) });
+};
+var PostDetail = ({
+  post,
+  boards,
+  identity,
+  onBack,
+  onVote,
+  backLabel
+}) => {
   const id = useId();
   const [comments, setComments] = useState(null);
   const [error, setError] = useState("");
   const [text, setText] = useState("");
   const [busy, setBusy] = useState(false);
   const [added, setAdded] = useState(0);
+  const { api } = identity;
   useEffect(() => {
     const ctl = new AbortController();
     api.comments(post.id, ctl.signal).then((r) => setComments(r.comments)).catch((e) => e.name !== "AbortError" && setError(e.message));
     return () => ctl.abort();
   }, [api, post.id]);
-  const send = async (e) => {
+  const send = (e) => {
     e.preventDefault();
     const body = text.trim();
     if (!body || busy) return;
-    setBusy(true);
-    setError("");
-    const temp = { id: `tmp-${Date.now()}`, body, author: "You", isTeam: false, postedAt: (/* @__PURE__ */ new Date()).toISOString() };
-    setComments((c) => [...c ?? [], temp]);
-    setText("");
-    try {
-      const real = await api.comment(post.id, body);
-      setComments((c) => (c ?? []).map((x) => x.id === temp.id ? real : x));
-      setAdded((n) => n + 1);
-    } catch (err) {
-      setComments((c) => (c ?? []).filter((x) => x.id !== temp.id));
-      setText(body);
-      setError(err.message);
-    } finally {
-      setBusy(false);
-    }
+    identity.need(async (as) => {
+      setBusy(true);
+      setError("");
+      const temp = { id: `tmp-${Date.now()}`, body, author: "You", isTeam: false, postedAt: (/* @__PURE__ */ new Date()).toISOString() };
+      setComments((c) => [...c ?? [], temp]);
+      setText("");
+      try {
+        const real = await as.comment(post.id, body);
+        setComments((c) => (c ?? []).map((x) => x.id === temp.id ? real : x));
+        setAdded((n) => n + 1);
+      } catch (err) {
+        setComments((c) => (c ?? []).filter((x) => x.id !== temp.id));
+        setText(body);
+        setError(err.message);
+      } finally {
+        setBusy(false);
+      }
+    });
   };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("button", { type: "button", className: "ckw-btn ckw-btn-ghost ckw-back", onClick: onBack, children: [
-      /* @__PURE__ */ jsx("span", { style: { display: "inline-block", transform: "rotate(-90deg)", lineHeight: 0 }, children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
-      "All requests"
+  const count = Math.max(post.comments + added, comments?.length ?? 0);
+  return /* @__PURE__ */ jsxs("article", { className: "ckw-detail", children: [
+    /* @__PURE__ */ jsxs("button", { type: "button", className: "ckw-back", onClick: onBack, children: [
+      /* @__PURE__ */ jsx("span", { className: "ckw-back-icon", children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
+      backLabel
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ckw-detail-head", children: [
-      /* @__PURE__ */ jsx(VoteButton, { post, onVote }),
-      /* @__PURE__ */ jsxs("div", { className: "ckw-main", children: [
-        /* @__PURE__ */ jsx("h2", { children: post.title }),
-        /* @__PURE__ */ jsxs("div", { className: "ckw-meta", style: { marginTop: 0 }, children: [
-          /* @__PURE__ */ jsx(StatusPill, { status: post.status }),
-          /* @__PURE__ */ jsx("span", { children: timeAgo(post.createdAt) })
+    /* @__PURE__ */ jsxs("div", { className: "ckw-detail-grid", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ckw-detail-main", children: [
+        /* @__PURE__ */ jsx("h2", { className: "ckw-detail-title", children: post.title }),
+        /* @__PURE__ */ jsxs("div", { className: "ckw-byline", children: [
+          /* @__PURE__ */ jsx(Avatar, { name: post.author ?? "?", team: post.author === "Team" }),
+          /* @__PURE__ */ jsx("span", { children: post.author ?? "Someone" }),
+          /* @__PURE__ */ jsx("span", { className: "ckw-dot-sep", children: timeAgo(post.createdAt) })
+        ] }),
+        post.body && /* @__PURE__ */ jsx("p", { className: "ckw-body", children: post.body }),
+        /* @__PURE__ */ jsxs("h3", { className: "ckw-h", children: [
+          "Comments ",
+          /* @__PURE__ */ jsx("span", { className: "ckw-count", children: count })
+        ] }),
+        /* @__PURE__ */ jsxs("form", { className: "ckw-composer", onSubmit: send, children: [
+          /* @__PURE__ */ jsx("label", { className: "ckw-sr", htmlFor: id, children: "Leave a comment" }),
+          /* @__PURE__ */ jsx("textarea", { id, className: "ckw-textarea", value: text, maxLength: 1e3, placeholder: "Leave a comment", onChange: (e) => setText(e.target.value) }),
+          /* @__PURE__ */ jsxs("div", { className: "ckw-actions", children: [
+            identity.known && identity.name && /* @__PURE__ */ jsxs("span", { className: "ckw-fine ckw-as", children: [
+              "Commenting as ",
+              identity.name
+            ] }),
+            /* @__PURE__ */ jsx("button", { type: "submit", className: "ckw-btn ckw-btn-primary", disabled: busy || !text.trim(), children: "Comment" })
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsx(ErrorBar, { message: error, onClose: () => setError("") }),
+        /* @__PURE__ */ jsxs("div", { "aria-live": "polite", children: [
+          comments === null && !error && /* @__PURE__ */ jsx(Skeleton, { rows: 2 }),
+          comments?.length === 0 && /* @__PURE__ */ jsx("p", { className: "ckw-sub", children: "No comments yet." }),
+          comments?.map((c) => /* @__PURE__ */ jsxs("div", { className: "ckw-comment", children: [
+            /* @__PURE__ */ jsx(Avatar, { name: c.author, team: c.isTeam }),
+            /* @__PURE__ */ jsxs("div", { className: "ckw-main", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("b", { children: c.author }),
+                c.isTeam && /* @__PURE__ */ jsx("span", { className: "ckw-team", children: "Team" }),
+                /* @__PURE__ */ jsx("span", { className: "ckw-time", children: timeAgo(c.postedAt) })
+              ] }),
+              /* @__PURE__ */ jsx("p", { children: c.body })
+            ] })
+          ] }, c.id))
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("aside", { className: "ckw-side", "aria-label": "About this request", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ckw-upvote",
+            "aria-pressed": post.voted,
+            "aria-label": `${post.voted ? "Remove your vote" : "Upvote"}. ${post.votes} votes`,
+            onClick: () => onVote(post),
+            children: [
+              /* @__PURE__ */ jsx(ChevronUp, {}),
+              /* @__PURE__ */ jsx("span", { children: post.voted ? "Upvoted" : "Upvote" }),
+              /* @__PURE__ */ jsx("b", { children: post.votes })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("dl", { className: "ckw-facts", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("dt", { children: "Status" }),
+            /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(StatusPill, { status: post.status }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("dt", { children: "Type" }),
+            /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(TypeChip, { board: post.board, boards }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("dt", { children: "Posted" }),
+            /* @__PURE__ */ jsx("dd", { children: new Date(post.createdAt).toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" }) })
+          ] })
         ] })
       ] })
-    ] }),
-    post.body && /* @__PURE__ */ jsx("p", { className: "ckw-body", children: post.body }),
-    /* @__PURE__ */ jsxs("h3", { className: "ckw-h", children: [
-      "Comments (",
-      Math.max(post.comments + added, comments?.length ?? 0),
-      ")"
-    ] }),
-    error && /* @__PURE__ */ jsx(ErrorBar, { message: error, onClose: () => setError("") }),
-    /* @__PURE__ */ jsxs("div", { "aria-live": "polite", children: [
-      comments === null && !error && /* @__PURE__ */ jsx(Skeleton, {}),
-      comments?.length === 0 && /* @__PURE__ */ jsx("p", { className: "ckw-sub", children: "No comments yet. Be the first." }),
-      comments?.map((c) => /* @__PURE__ */ jsxs("div", { className: "ckw-comment", children: [
-        /* @__PURE__ */ jsx("b", { children: c.author }),
-        c.isTeam && /* @__PURE__ */ jsx("span", { className: "ckw-team", children: "Team" }),
-        /* @__PURE__ */ jsx("span", { className: "ckw-time", children: timeAgo(c.postedAt) }),
-        /* @__PURE__ */ jsx("p", { children: c.body })
-      ] }, c.id))
-    ] }),
-    /* @__PURE__ */ jsxs("form", { className: "ckw-form", onSubmit: send, style: { marginTop: 12 }, children: [
-      /* @__PURE__ */ jsx("label", { className: "ckw-label", htmlFor: id, children: "Add a comment" }),
-      /* @__PURE__ */ jsx("textarea", { id, className: "ckw-textarea", value: text, maxLength: 2e3, onChange: (e) => setText(e.target.value) }),
-      /* @__PURE__ */ jsx("div", { className: "ckw-actions", children: /* @__PURE__ */ jsx("button", { type: "submit", className: "ckw-btn ckw-btn-primary", disabled: busy || !text.trim(), children: "Comment" }) })
     ] })
   ] });
 };
-var Roadmap = ({ onOpen }) => {
-  const api = useApi();
+var COLUMNS = [
+  { status: "review", label: "Backlog", note: "Under consideration" },
+  { status: "planned", label: "Next up", note: "Committed and queued" },
+  { status: "progress", label: "In progress", note: "Actively being built" },
+  { status: "shipped", label: "Done", note: "Recently shipped" }
+];
+var matchesQ = (q, ...texts) => {
+  const t = q.trim().toLowerCase();
+  return !t || texts.some((x) => x.toLowerCase().includes(t));
+};
+var RoadmapCard = ({ post, boards, onOpen, onVote }) => /* @__PURE__ */ jsxs("li", { className: "ckw-card", children: [
+  /* @__PURE__ */ jsx(TypeChip, { board: post.board, boards }),
+  /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-link ckw-stretch", onClick: () => onOpen(post), children: post.title }),
+  post.body && /* @__PURE__ */ jsx("p", { className: "ckw-excerpt", children: post.body }),
+  /* @__PURE__ */ jsxs("div", { className: "ckw-card-foot", children: [
+    /* @__PURE__ */ jsxs("span", { className: "ckw-who", children: [
+      /* @__PURE__ */ jsx(Avatar, { name: post.author ?? "?", team: post.author === "Team" }),
+      /* @__PURE__ */ jsx("span", { children: post.author ?? "" })
+    ] }),
+    /* @__PURE__ */ jsx(VoteButton, { post, onVote, small: true })
+  ] })
+] });
+var Roadmap = ({
+  api,
+  boards,
+  q,
+  onOpen,
+  voteRef
+}) => {
   const [data, setData] = useState(null);
   const [error, setError] = useState("");
   const [tick, setTick] = useState(0);
@@ -214,39 +462,34 @@ var Roadmap = ({ onOpen }) => {
     api.roadmap(ctl.signal).then((r) => (setData(r), setError(""))).catch((e) => e.name !== "AbortError" && setError(e.message));
     return () => ctl.abort();
   }, [api, tick]);
+  const patch = (id, fn) => setData((d) => {
+    if (!d) return d;
+    const columns = { ...d.columns };
+    for (const k of Object.keys(columns)) columns[k] = columns[k]?.map((p) => p.id === id ? fn(p) : p);
+    return { columns };
+  });
+  const vote = (post) => voteRef(post, (r) => {
+    if (r) patch(post.id, (p) => ({ ...p, ...r }));
+  });
   if (error) return /* @__PURE__ */ jsx(ErrorBar, { message: error, onRetry: () => setTick((t) => t + 1) });
-  if (!data) return /* @__PURE__ */ jsx(Skeleton, {});
-  const cols = [
-    ["planned", "Planned"],
-    ["progress", "In progress"],
-    ["shipped", "Shipped"]
-  ];
-  return /* @__PURE__ */ jsx("div", { className: "ckw-cols", children: cols.map(([k, label]) => /* @__PURE__ */ jsxs("section", { className: "ckw-col", "aria-label": label, children: [
-    /* @__PURE__ */ jsxs("h3", { children: [
-      label,
-      " ",
-      /* @__PURE__ */ jsx("span", { children: data.columns[k].length })
-    ] }),
-    data.columns[k].length === 0 && /* @__PURE__ */ jsx("p", { className: "ckw-sub", children: "Nothing here yet." }),
-    data.columns[k].map((p) => /* @__PURE__ */ jsxs("div", { className: "ckw-card", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-link", onClick: () => onOpen(p), children: p.title }),
-      /* @__PURE__ */ jsxs("div", { className: "ckw-meta", style: { marginTop: 0 }, children: [
-        /* @__PURE__ */ jsxs("span", { className: "ckw-stat", children: [
-          /* @__PURE__ */ jsx(ChevronUp, {}),
-          " ",
-          p.votes
+  if (!data)
+    return /* @__PURE__ */ jsx("div", { className: "ckw-cols", "aria-hidden": "true", children: COLUMNS.map((c) => /* @__PURE__ */ jsx("div", { className: "ckw-col", children: /* @__PURE__ */ jsx(Skeleton, { rows: 2 }) }, c.status)) });
+  return /* @__PURE__ */ jsx("div", { className: "ckw-cols", children: COLUMNS.map((c) => {
+    const cards = (data.columns[c.status] ?? []).filter((p) => matchesQ(q, p.title, p.body));
+    return /* @__PURE__ */ jsxs("section", { className: "ckw-col", "aria-label": c.label, children: [
+      /* @__PURE__ */ jsxs("header", { className: "ckw-col-head", children: [
+        /* @__PURE__ */ jsxs("h3", { children: [
+          /* @__PURE__ */ jsx("span", { className: "ckw-sdot", "data-s": c.status }),
+          c.label,
+          /* @__PURE__ */ jsx("span", { className: "ckw-count", children: cards.length })
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "ckw-stat", children: [
-          /* @__PURE__ */ jsx(Chat, {}),
-          " ",
-          p.comments
-        ] })
-      ] })
-    ] }, p.id))
-  ] }, k)) });
+        /* @__PURE__ */ jsx("p", { children: c.note })
+      ] }),
+      cards.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ckw-col-empty", children: q ? "No match" : "Nothing here yet" }) : /* @__PURE__ */ jsx("ul", { className: "ckw-col-list", children: cards.map((p) => /* @__PURE__ */ jsx(RoadmapCard, { post: p, boards, onOpen, onVote: vote }, p.id)) })
+    ] }, c.status);
+  }) });
 };
-var Changelog = () => {
-  const api = useApi();
+var Changelog = ({ api, q }) => {
   const [entries, setEntries] = useState(null);
   const [error, setError] = useState("");
   const [tick, setTick] = useState(0);
@@ -257,99 +500,290 @@ var Changelog = () => {
   }, [api, tick]);
   if (error) return /* @__PURE__ */ jsx(ErrorBar, { message: error, onRetry: () => setTick((t) => t + 1) });
   if (!entries) return /* @__PURE__ */ jsx(Skeleton, {});
-  if (entries.length === 0) return /* @__PURE__ */ jsx("div", { className: "ckw-empty", children: "No updates published yet." });
-  return /* @__PURE__ */ jsx("div", { children: entries.map((e) => /* @__PURE__ */ jsxs("article", { className: "ckw-entry", children: [
+  const shown = entries.filter((e) => matchesQ(q, e.title, e.body));
+  if (shown.length === 0) return /* @__PURE__ */ jsx("div", { className: "ckw-empty", children: q ? "No update matches your search." : "No updates published yet." });
+  return /* @__PURE__ */ jsx("div", { className: "ckw-log", children: shown.map((e) => /* @__PURE__ */ jsxs("article", { className: "ckw-entry", children: [
     /* @__PURE__ */ jsx("time", { dateTime: e.publishedAt, children: new Date(e.publishedAt).toLocaleDateString(void 0, { month: "long", day: "numeric", year: "numeric" }) }),
-    /* @__PURE__ */ jsx("h3", { children: e.title }),
-    /* @__PURE__ */ jsx("p", { children: e.body })
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { children: e.title }),
+      /* @__PURE__ */ jsx("p", { children: e.body })
+    ] })
   ] }, e.id)) });
 };
-var FeedbackBoard = ({ title = "Feedback", subtitle = "Tell us what to build next and vote on what matters to you.", theme, accent }) => {
-  const [tab, setTab] = useState("requests");
+var TABS = [
+  ["requests", "Feedback"],
+  ["roadmap", "Roadmap"],
+  ["changelog", "Changelog"]
+];
+var readUrl = () => {
+  const p = new URLSearchParams(window.location.search);
+  const v = p.get("view");
+  return { tab: v === "roadmap" || v === "changelog" ? v : "requests", post: p.get("post") };
+};
+var writeUrl = (tab, post, push) => {
+  const url = new URL(window.location.href);
+  if (tab === "requests") url.searchParams.delete("view");
+  else url.searchParams.set("view", tab);
+  if (post) url.searchParams.set("post", post);
+  else url.searchParams.delete("post");
+  if (url.href === window.location.href) return;
+  if (push) window.history.pushState(null, "", url);
+  else window.history.replaceState(null, "", url);
+};
+var THEME_KEY = "ckw-theme";
+var systemDark = () => typeof window !== "undefined" && !!window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+var FeedbackBoard = ({
+  title = "Feedback",
+  subtitle = "Tell us what to build next and vote on what matters to you.",
+  theme,
+  accent,
+  header = true,
+  syncUrl = false,
+  fullPage = false,
+  initialTab = "requests"
+}) => {
+  const { host } = useCtx();
+  const identity = useIdentity();
+  const [tab, setTab] = useState(initialTab);
   const [sort, setSort] = useState("top");
   const [board, setBoard] = useState();
   const [q, setQ] = useState("");
+  const [searching, setSearching] = useState(false);
   const [creating, setCreating] = useState(false);
   const [opened, setOpened] = useState(null);
-  const list = useFeedbackList({ board, sort, q });
+  const [openId, setOpenId] = useState(null);
+  const [mode, setMode] = useState(theme ?? "auto");
+  const [thanks, setThanks] = useState(false);
+  const list = useFeedbackList(identity.api, { board, sort, q: tab === "requests" ? q : "" });
   const { posts, setPosts, vote } = list;
+  const searchRef = useRef(null);
+  useEffect(() => {
+    if (!header) return;
+    try {
+      const t = window.localStorage.getItem(THEME_KEY);
+      if (t === "light" || t === "dark") setMode(t);
+    } catch {
+    }
+  }, [header]);
+  const dark = mode === "dark" || mode === "auto" && systemDark();
+  const flipTheme = () => {
+    const next = dark ? "light" : "dark";
+    setMode(next);
+    try {
+      window.localStorage.setItem(THEME_KEY, next);
+    } catch {
+    }
+  };
+  useEffect(() => {
+    if (!syncUrl) return;
+    const sync = () => {
+      const u = readUrl();
+      setTab(u.tab);
+      setOpenId(u.post);
+      if (!u.post) setOpened(null);
+    };
+    sync();
+    window.addEventListener("popstate", sync);
+    return () => window.removeEventListener("popstate", sync);
+  }, [syncUrl]);
+  const go = (next, post = null) => {
+    setTab(next);
+    setOpened(post);
+    setOpenId(post?.id ?? null);
+    if (syncUrl) writeUrl(next, post?.id ?? null, true);
+  };
+  useEffect(() => {
+    if (!openId || opened?.id === openId) return;
+    const inList = posts.find((p) => p.id === openId);
+    if (inList) return setOpened(inList);
+    if (list.loading) return;
+    const ctl = new AbortController();
+    identity.api.post(openId, ctl.signal).then(setOpened).catch((e) => {
+      if (e.name === "AbortError") return;
+      setOpenId(null);
+      if (syncUrl) writeUrl(tab, null, false);
+    });
+    return () => ctl.abort();
+  }, [openId, posts, list.loading]);
   const current = opened && (posts.find((p) => p.id === opened.id) ?? opened);
-  const voteOpened = (p) => {
-    if (!posts.some((x) => x.id === p.id)) {
-      setOpened((o) => o ? { ...o, voted: !o.voted, votes: o.votes + (o.voted ? -1 : 1) } : o);
-      list.api.vote(p.id).then((r) => setOpened((o) => o ? { ...o, voted: r.voted, votes: r.votes } : o)).catch((e) => {
-        setOpened((o) => o ? { ...o, voted: p.voted, votes: p.votes } : o);
-        list.setError(`Your vote was not saved. ${e.message}`);
-      });
+  const voteAny = (p, done) => identity.need((as) => {
+    const flip = (o) => o && o.id === p.id ? { ...o, voted: !p.voted, votes: p.votes + (p.voted ? -1 : 1) } : o;
+    const inList = posts.some((x) => x.id === p.id);
+    if (inList && !done) {
+      vote(p, as);
       return;
     }
-    vote(p);
-  };
-  const tabs = [
-    ["requests", "Requests"],
-    ["roadmap", "Roadmap"],
-    ["changelog", "Changelog"]
-  ];
+    setOpened(flip);
+    done?.({ voted: !p.voted, votes: p.votes + (p.voted ? -1 : 1) });
+    as.vote(p.id).then((r) => {
+      setOpened((o) => o && o.id === p.id ? { ...o, ...r } : o);
+      if (inList) list.patch(p.id, (x) => ({ ...x, ...r }));
+      done?.(r);
+    }).catch((e) => {
+      setOpened((o) => o && o.id === p.id ? { ...o, voted: p.voted, votes: p.votes } : o);
+      done?.({ voted: p.voted, votes: p.votes });
+      list.setError(`Your vote was not saved. ${e.message}`);
+    });
+  });
   const onTabKey = (e) => {
-    const i = tabs.findIndex(([k]) => k === tab);
+    const i = TABS.findIndex(([k]) => k === tab);
     const n = e.key === "ArrowRight" ? i + 1 : e.key === "ArrowLeft" ? i - 1 : null;
     if (n === null) return;
     e.preventDefault();
-    setTab(tabs[(n + tabs.length) % tabs.length][0]);
-    setOpened(null);
+    go(TABS[(n + TABS.length) % TABS.length][0]);
   };
-  return /* @__PURE__ */ jsxs(Root, { theme, accent, className: "ckw-board", children: [
-    /* @__PURE__ */ jsxs("div", { className: "ckw-head", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "ckw-title", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "ckw-sub", children: subtitle })
+  const product = list.product;
+  const logo = product?.logo ? product.logo.startsWith("/") ? `${host}${product.logo}` : product.logo : null;
+  const name = product?.name ?? title;
+  const newPost = () => (setThanks(false), setCreating(true));
+  const searchLabel = tab === "roadmap" ? "Search roadmap" : tab === "changelog" ? "Search updates" : "Search requests";
+  return /* @__PURE__ */ jsxs(Root, { theme: header ? dark ? "dark" : "light" : theme, accent, className: `ckw-board${fullPage ? " ckw-full" : ""}`, children: [
+    header ? /* @__PURE__ */ jsx("header", { className: "ckw-top", children: /* @__PURE__ */ jsxs("div", { className: "ckw-top-row", children: [
+      /* @__PURE__ */ jsxs("button", { type: "button", className: "ckw-brand", onClick: () => go("requests"), children: [
+        logo ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx("img", { src: logo, alt: "", width: 28, height: 28 })
+        ) : /* @__PURE__ */ jsx("span", { className: "ckw-brand-mark", "aria-hidden": "true", children: name.slice(0, 1).toUpperCase() }),
+        /* @__PURE__ */ jsx("span", { children: name })
       ] }),
-      /* @__PURE__ */ jsxs("button", { type: "button", className: "ckw-btn ckw-btn-primary", onClick: () => (setCreating((c) => !c), setOpened(null), setTab("requests")), "aria-expanded": creating, children: [
-        /* @__PURE__ */ jsx(Plus, {}),
-        " Request a feature"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "ckw-tabs", role: "tablist", "aria-label": "Feedback sections", onKeyDown: onTabKey, children: tabs.map(([k, label]) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        role: "tab",
-        id: `ckw-tab-${k}`,
-        "aria-selected": tab === k,
-        tabIndex: tab === k ? 0 : -1,
-        className: "ckw-tab",
-        onClick: () => (setTab(k), setOpened(null)),
-        children: label
-      },
-      k
-    )) }),
-    /* @__PURE__ */ jsxs("div", { role: "tabpanel", "aria-labelledby": `ckw-tab-${tab}`, children: [
-      list.error && /* @__PURE__ */ jsx(ErrorBar, { message: list.error, onRetry: tab === "requests" && !current ? list.reload : void 0, onClose: () => list.setError("") }),
-      current ? /* @__PURE__ */ jsx(PostDetail, { post: current, onBack: () => setOpened(null), onVote: voteOpened }) : tab === "requests" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        creating && /* @__PURE__ */ jsx(
-          SubmitForm,
-          {
-            api: list.api,
-            boards: list.boards,
-            posts,
-            onVote: vote,
-            onCancel: () => setCreating(false),
-            onCreated: (p) => {
-              setPosts((all) => [p, ...all]);
-              setCreating(false);
+      /* @__PURE__ */ jsx("nav", { className: "ckw-nav", role: "tablist", "aria-label": "Board sections", onKeyDown: onTabKey, children: TABS.map(([k, label]) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          id: `ckw-tab-${k}`,
+          "aria-selected": tab === k && !current,
+          tabIndex: tab === k ? 0 : -1,
+          className: "ckw-nav-tab",
+          onClick: () => go(k),
+          children: label
+        },
+        k
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "ckw-top-tools", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ckw-searchbox", "data-open": searching || !!q || void 0, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ckw-icon-btn",
+              "aria-label": searchLabel,
+              onClick: () => {
+                setSearching(true);
+                window.setTimeout(() => searchRef.current?.focus(), 0);
+              },
+              children: /* @__PURE__ */ jsx(Search, {})
             }
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "ckw-tools", children: [
-          /* @__PURE__ */ jsx("input", { className: "ckw-input ckw-search", type: "search", "aria-label": "Search requests", placeholder: "Search requests", value: q, onChange: (e) => setQ(e.target.value) }),
-          /* @__PURE__ */ jsx("div", { className: "ckw-seg", role: "group", "aria-label": "Sort", children: ["top", "new"].map((s) => /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": sort === s, onClick: () => setSort(s), children: s === "top" ? "Top" : "New" }, s)) })
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: searchRef,
+              type: "search",
+              className: "ckw-search-input",
+              "aria-label": searchLabel,
+              placeholder: "Search\u2026",
+              value: q,
+              onChange: (e) => {
+                setQ(e.target.value);
+                if (current) go(tab);
+              },
+              onBlur: () => setSearching(false),
+              onKeyDown: (e) => e.key === "Escape" && (setQ(""), e.target.blur())
+            }
+          )
         ] }),
-        list.boards.length > 1 && /* @__PURE__ */ jsxs("div", { className: "ckw-chips", role: "group", "aria-label": "Boards", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-chip", "aria-pressed": !board, onClick: () => setBoard(void 0), children: "All" }),
-          list.boards.map((b) => /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-chip", "aria-pressed": board === b.id, onClick: () => setBoard(b.id), children: b.label }, b.id))
+        /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-icon-btn", onClick: flipTheme, "aria-label": dark ? "Switch to light mode" : "Switch to dark mode", children: dark ? /* @__PURE__ */ jsx(Sun, {}) : /* @__PURE__ */ jsx(Moon, {}) }),
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "ckw-btn ckw-btn-primary ckw-submit", "aria-label": "Submit feedback", onClick: newPost, children: [
+          /* @__PURE__ */ jsx(Plus, {}),
+          " ",
+          /* @__PURE__ */ jsx("span", { children: "Submit feedback" })
+        ] })
+      ] })
+    ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "ckw-head", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "ckw-title", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "ckw-sub", children: subtitle })
         ] }),
-        /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-busy": list.loading, children: list.loading && posts.length === 0 ? /* @__PURE__ */ jsx(Skeleton, {}) : posts.length === 0 && !list.error ? /* @__PURE__ */ jsx("div", { className: "ckw-empty", children: q ? "No requests match your search." : "No requests yet. Be the first to suggest something." }) : /* @__PURE__ */ jsx("ul", { className: "ckw-list", children: posts.map((p) => /* @__PURE__ */ jsx(PostRow, { post: p, onOpen: setOpened, onVote: vote }, p.id)) }) })
-      ] }) : tab === "roadmap" ? /* @__PURE__ */ jsx(Roadmap, { onOpen: setOpened }) : /* @__PURE__ */ jsx(Changelog, {})
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "ckw-btn ckw-btn-primary", onClick: newPost, children: [
+          /* @__PURE__ */ jsx(Plus, {}),
+          " Request a feature"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ckw-tabs", role: "tablist", "aria-label": "Feedback sections", onKeyDown: onTabKey, children: TABS.map(([k, label]) => /* @__PURE__ */ jsx("button", { type: "button", role: "tab", id: `ckw-tab-${k}`, "aria-selected": tab === k, tabIndex: tab === k ? 0 : -1, className: "ckw-tab", onClick: () => go(k), children: k === "requests" ? "Requests" : label }, k)) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "ckw-input ckw-search",
+          type: "search",
+          "aria-label": searchLabel,
+          placeholder: searchLabel,
+          value: q,
+          onChange: (e) => setQ(e.target.value),
+          style: { marginBottom: 12 }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ckw-body-wrap", role: "tabpanel", "aria-labelledby": `ckw-tab-${tab}`, children: [
+      header && !current && /* @__PURE__ */ jsxs("div", { className: "ckw-intro", children: [
+        /* @__PURE__ */ jsx("h1", { children: tab === "roadmap" ? "Roadmap" : tab === "changelog" ? "Changelog" : "Feedback" }),
+        /* @__PURE__ */ jsx("p", { children: tab === "roadmap" ? "What we are considering, building next and shipped." : tab === "changelog" ? "New and improved, newest first." : subtitle })
+      ] }),
+      thanks && !current && /* @__PURE__ */ jsxs("div", { className: "ckw-note", role: "status", children: [
+        "Thanks, your request is in. You can follow it here.",
+        /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-icon-btn", "aria-label": "Dismiss", onClick: () => setThanks(false), children: /* @__PURE__ */ jsx(Cross, {}) })
+      ] }),
+      list.error && /* @__PURE__ */ jsx(ErrorBar, { message: list.error, onRetry: tab === "requests" && !current ? list.reload : void 0, onClose: () => list.setError("") }),
+      current ? /* @__PURE__ */ jsx(
+        PostDetail,
+        {
+          post: current,
+          boards: list.boards,
+          identity,
+          backLabel: tab === "roadmap" ? "Roadmap" : "All requests",
+          onBack: () => go(tab),
+          onVote: (p) => voteAny(p)
+        }
+      ) : tab === "requests" ? /* @__PURE__ */ jsx(
+        Requests,
+        {
+          list,
+          sort,
+          setSort,
+          board,
+          setBoard,
+          q,
+          onOpen: (p) => go("requests", p),
+          onVote: (p) => voteAny(p),
+          onNew: newPost
+        }
+      ) : tab === "roadmap" ? /* @__PURE__ */ jsx(Roadmap, { api: identity.api, boards: list.boards, q, onOpen: (p) => go("roadmap", p), voteRef: (p, done) => voteAny(p, done) }) : /* @__PURE__ */ jsx(Changelog, { api: identity.api, q })
+    ] }),
+    creating && /* @__PURE__ */ jsx(Modal, { title: "Submit feedback", onClose: () => setCreating(false), children: /* @__PURE__ */ jsx(
+      SubmitForm,
+      {
+        bare: true,
+        identity,
+        boards: list.boards,
+        posts,
+        onVote: (p) => voteAny(p),
+        onCancel: () => setCreating(false),
+        onCreated: (p) => {
+          setPosts((all) => [p, ...all.filter((x) => x.id !== p.id)]);
+          setCreating(false);
+          setThanks(true);
+          go("requests");
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(IdentityDialog, { identity }),
+    identity.known && !identity.fromApp && header && /* @__PURE__ */ jsxs("p", { className: "ckw-foot", children: [
+      "Posting as ",
+      identity.name,
+      ".",
+      " ",
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-linkish", onClick: identity.forget, children: "Not you?" })
     ] })
   ] });
 };
@@ -361,10 +795,12 @@ var setWidgetOpen = (v) => {
 };
 var useFeedback = () => ({ open: () => setWidgetOpen(true), close: () => setWidgetOpen(false) });
 var WidgetPanel = ({ boardUrl, onClose }) => {
+  const identity = useIdentity();
   const [suggesting, setSuggesting] = useState(false);
   const [thanks, setThanks] = useState(false);
-  const list = useFeedbackList({ sort: "top" });
+  const list = useFeedbackList(identity.api, { sort: "top" });
   const { posts, setPosts } = list;
+  const vote = (p) => identity.need((as) => list.vote(p, as));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "ckw-pop-head", children: [
       /* @__PURE__ */ jsx("span", { children: suggesting ? "Suggest something" : "Top requests" }),
@@ -372,14 +808,14 @@ var WidgetPanel = ({ boardUrl, onClose }) => {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ckw-pop-body", children: [
       list.error && /* @__PURE__ */ jsx(ErrorBar, { message: list.error, onClose: () => list.setError("") }),
-      thanks ? /* @__PURE__ */ jsx("div", { className: "ckw-empty", role: "status", children: "Thanks, your request is in." }) : suggesting ? /* @__PURE__ */ jsx(
+      identity.asking ? /* @__PURE__ */ jsx(WidgetIdentity, { identity }) : thanks ? /* @__PURE__ */ jsx("div", { className: "ckw-empty", role: "status", children: "Thanks, your request is in." }) : suggesting ? /* @__PURE__ */ jsx(
         SubmitForm,
         {
           compact: true,
-          api: list.api,
+          identity,
           boards: list.boards,
           posts,
-          onVote: list.vote,
+          onVote: vote,
           onCancel: () => setSuggesting(false),
           onCreated: (p) => {
             setPosts((all) => [p, ...all]);
@@ -388,7 +824,7 @@ var WidgetPanel = ({ boardUrl, onClose }) => {
           }
         }
       ) : list.loading && posts.length === 0 ? /* @__PURE__ */ jsx(Skeleton, {}) : posts.length === 0 && !list.error ? /* @__PURE__ */ jsx("div", { className: "ckw-empty", children: "No requests yet. Suggest the first one." }) : /* @__PURE__ */ jsx("ul", { className: "ckw-list", "aria-live": "polite", children: posts.slice(0, 5).map((p) => /* @__PURE__ */ jsxs("li", { className: "ckw-row", children: [
-        /* @__PURE__ */ jsx(VoteButton, { post: p, onVote: list.vote }),
+        /* @__PURE__ */ jsx(VoteButton, { post: p, onVote: vote }),
         /* @__PURE__ */ jsxs("div", { className: "ckw-main", children: [
           /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, overflowWrap: "anywhere" }, children: p.title }),
           /* @__PURE__ */ jsx("div", { className: "ckw-meta", children: /* @__PURE__ */ jsx(StatusPill, { status: p.status }) })
@@ -397,7 +833,7 @@ var WidgetPanel = ({ boardUrl, onClose }) => {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ckw-pop-foot", children: [
       boardUrl ? /* @__PURE__ */ jsx("a", { href: boardUrl, children: "See all" }) : /* @__PURE__ */ jsx("span", {}),
-      !suggesting && !thanks && /* @__PURE__ */ jsxs("button", { type: "button", className: "ckw-btn ckw-btn-primary", onClick: () => setSuggesting(true), children: [
+      !suggesting && !thanks && !identity.asking && /* @__PURE__ */ jsxs("button", { type: "button", className: "ckw-btn ckw-btn-primary", onClick: () => setSuggesting(true), children: [
         /* @__PURE__ */ jsx(Plus, {}),
         " Suggest something"
       ] }),
@@ -405,6 +841,32 @@ var WidgetPanel = ({ boardUrl, onClose }) => {
     ] })
   ] });
 };
+var WidgetIdentity = ({ identity }) => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const ok = name.trim().length > 0 && EMAIL.test(email.trim());
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: "ckw-form",
+      onSubmit: (e) => {
+        e.preventDefault();
+        const run = identity.asking;
+        if (!ok || !run) return;
+        const api = identity.save(name, email);
+        identity.cancel();
+        run(api);
+      },
+      children: [
+        /* @__PURE__ */ jsx(IdentityFields, { name, email, setName, setEmail }),
+        /* @__PURE__ */ jsxs("div", { className: "ckw-actions", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ckw-btn ckw-btn-ghost", onClick: identity.cancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx("button", { type: "submit", className: "ckw-btn ckw-btn-primary", disabled: !ok, children: "Continue" })
+        ] })
+      ]
+    }
+  );
+};
 var FeedbackWidget = ({ position = "bottom-right", label = "Feedback", boardUrl, theme, accent }) => {
   const [open, setOpen] = useState(false);
   const fab = useRef(null);