@youasked/react 0.0.0-stage → 0.4.1

package/dist/index.js

@@ -0,0 +1,2062 @@
+"use client";
+
+// src/YouAsked.tsx
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+
+// src/client.ts
+var YouAskedError = class extends Error {
+  constructor(code) {
+    super(code);
+    this.code = code;
+  }
+};
+var ANON_KEY = "youasked:anon";
+var memoryAnon = null;
+function randomId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
+  return Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+}
+function anonId() {
+  try {
+    let id = localStorage.getItem(ANON_KEY);
+    if (!id) {
+      id = randomId();
+      localStorage.setItem(ANON_KEY, id);
+    }
+    return id;
+  } catch {
+    return memoryAnon ?? (memoryAnon = randomId());
+  }
+}
+function base64Url(text) {
+  const bytes = new TextEncoder().encode(text);
+  let bin = "";
+  for (const b of bytes) bin += String.fromCharCode(b);
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function createClient({ appKey, apiUrl, user, signature }) {
+  const base2 = apiUrl.replace(/\/$/, "") + "/v1";
+  function headers(json) {
+    const h = { "x-youasked-key": appKey, "x-youasked-anon": anonId() };
+    if (user && user.id !== void 0 && user.id !== null && user.id !== "") {
+      h["x-youasked-user"] = base64Url(
+        JSON.stringify({ id: String(user.id), email: user.email ?? void 0, name: user.name ?? void 0 })
+      );
+      if (signature) h["x-youasked-sig"] = signature;
+    }
+    if (json) h["content-type"] = "application/json";
+    return h;
+  }
+  async function call(path, body, raw) {
+    const res = await fetch(base2 + path, {
+      method: body === void 0 && !raw ? "GET" : "POST",
+      headers: raw ? { ...headers(false), "content-type": raw.type } : headers(body !== void 0),
+      body: raw ?? (body === void 0 ? void 0 : JSON.stringify(body))
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new YouAskedError(data.error ?? `http_${res.status}`);
+    return data;
+  }
+  return {
+    config: () => call("/config"),
+    list: (sort, status) => call(`/requests?sort=${sort}&status=${status}`).then((d) => d.requests),
+    similar: (q) => call(`/requests/similar?q=${encodeURIComponent(q)}`).then((d) => d.requests),
+    get: (id) => call(`/requests/${encodeURIComponent(id)}`),
+    create: (input) => call("/requests", input).then((d) => ({
+      ...d.request,
+      attachments: d.attachments ?? []
+    })),
+    upload: (image) => call("/uploads", void 0, image),
+    earlyAccess: (id) => call(`/requests/${encodeURIComponent(id)}/early-access`, {}),
+    whatsNewSeen: () => call("/whats-new/seen", {}),
+    vote: (id) => call(`/requests/${encodeURIComponent(id)}/vote`, {}),
+    comment: (id, body) => call(`/requests/${encodeURIComponent(id)}/comments`, { body }).then((d) => d.comment),
+    mine: () => call("/me/requests").then((d) => d.requests),
+    seen: (ids) => call("/notifications/seen", { ids })
+  };
+}
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var QUIET_TOPICS = /* @__PURE__ */ new Set(["search", "locked"]);
+function toRoute(o = {}) {
+  if (o.requestId) return { view: "detail", id: o.requestId };
+  const topic = o.topic?.trim() || void 0;
+  const placeholder = o.placeholder ?? (topic && !o.draft && !QUIET_TOPICS.has(topic) ? `What would make ${topic} better?` : void 0);
+  const scope = { topic, placeholder };
+  switch (o.view) {
+    case "new":
+      return { view: "home", draft: o.draft, focus: true, ...scope };
+    case "board":
+      return { view: "board" };
+    case "shipped":
+      return { view: "board", tab: "shipped" };
+    case "mine":
+      return { view: "mine" };
+    default:
+      return { view: "home", draft: o.draft, focus: Boolean(o.draft || topic), ...scope };
+  }
+}
+var YouAskedContext = createContext(null);
+function useInternal() {
+  const ctx = useContext(YouAskedContext);
+  if (!ctx) throw new Error("YouAsked components must be rendered inside <YouAsked>\u2026</YouAsked>");
+  return ctx;
+}
+function useYouAsked() {
+  const { open, close, isOpen, unseenCount } = useInternal();
+  return { open, close, isOpen, unseenCount };
+}
+function openYouAsked(options) {
+  window.dispatchEvent(new CustomEvent("youasked:open", { detail: options ?? {} }));
+}
+
+// src/demo.ts
+var MIN = 6e4;
+var DAY = 24 * 60 * MIN;
+var uploads = /* @__PURE__ */ new Map();
+var wait = (ms = 380) => new Promise((r) => setTimeout(r, ms + Math.random() * ms * 0.5));
+var WORDS = (s) => new Set(s.toLowerCase().split(/[^a-z0-9]+/).filter((w) => w.length > 2));
+function createDemoClient(appName = "Acme") {
+  const t0 = Date.now();
+  let seq = 100;
+  const listeners = /* @__PURE__ */ new Set();
+  const answered = /* @__PURE__ */ new Set();
+  const seed = (n, title, body, votes, status, extra = {}) => ({
+    id: `demo_${n}`,
+    number: n,
+    title,
+    body,
+    status,
+    votes,
+    comments: extra.comments_?.length ?? 0,
+    shipNote: null,
+    shippedAt: null,
+    context: null,
+    creditName: null,
+    createdAt: t0 - (20 - n) * DAY,
+    voted: false,
+    mine: false,
+    comments_: [],
+    attachments_: [],
+    early: false,
+    ...extra
+  });
+  const team = (id, body, ago2) => ({ id, body, team: true, author: null, mine: false, createdAt: t0 - ago2 });
+  const store = [
+    seed(12, "Split a bill with my partner", "We share groceries and rent. Would love to tag an expense as 50/50 and see who owes who.", 14, "planned", {
+      comments_: [
+        { id: "c1", body: "Yes! Even just splitting one expense would help.", team: false, author: "Raj", mine: false, createdAt: t0 - 3 * DAY },
+        team("c2", "On the list for December. Would a simple \u201Cwho owes who\u201D total be enough to start?", 2 * DAY)
+      ]
+    }),
+    seed(13, "Monthly budget per category", "Set $400 for food and get a heads-up when I'm close.", 11, "in_progress"),
+    seed(7, "Dark mode for the charts", "", 8, "shipped", {
+      shipNote: "Charts now follow your theme. Settings \u2192 Appearance.",
+      shippedAt: t0 - 2 * DAY,
+      creditName: "Sam"
+    }),
+    seed(14, "Import my bank statement PDF", "Some of my older expenses never came through email.", 6, "open"),
+    seed(15, "Recurring expenses (Netflix, rent)", "", 4, "open"),
+    seed(16, "Widget for the home screen", "Just today's total would be enough.", 3, "open"),
+    seed(9, "Show which card I paid with", "", 5, "shipped", {
+      shipNote: "Each expense now shows the card's last 4 digits.",
+      shippedAt: t0 - 4 * 60 * MIN,
+      mine: true,
+      voted: true
+    }),
+    seed(17, "Export expenses to Excel", "For my accountant at tax time.", 2, "open", {
+      mine: true,
+      voted: true,
+      comments_: [team("c3", "Good one. Would a CSV that opens in Excel work, or do you need .xlsx?", 3 * 60 * MIN)]
+    })
+  ];
+  const find = (id) => store.find((r) => r.id === id);
+  const view = (r) => {
+    const { comments_, attachments_, early, ...rest } = r;
+    void comments_, attachments_, early;
+    return { ...rest, comments: r.comments_.length };
+  };
+  const notify = (n) => listeners.forEach((fn) => fn(n));
+  const teamReplies = [
+    "Thanks, this is useful. We've added it to the board. Roughly how often would you use it?",
+    "Love this one. Can you tell us what you do today instead?",
+    "Noted! The more votes it gets, the sooner it moves up."
+  ];
+  const scheduleReply = (r, delay) => {
+    if (answered.has(r.id)) return;
+    answered.add(r.id);
+    setTimeout(() => {
+      const c = team(`demo_c${++seq}`, teamReplies[seq % teamReplies.length], 0);
+      c.createdAt = Date.now();
+      r.comments_.push(c);
+      notify({ id: `demo_n${++seq}`, kind: "reply", requestId: r.id, title: r.title, shipNote: null, reply: c.body });
+    }, delay);
+  };
+  const shippedMine = store.filter((r) => r.status === "shipped");
+  const config = {
+    app: { name: appName },
+    watermark: false,
+    identified: true,
+    canCredit: true,
+    unseen: [],
+    whatsNew: {
+      total: shippedMine.length,
+      items: [...shippedMine].sort((a, b) => Number(b.mine) - Number(a.mine) || (b.shippedAt ?? 0) - (a.shippedAt ?? 0)).map((r) => ({ id: r.id, title: r.title, shipNote: r.shipNote, shippedAt: r.shippedAt ?? t0, mine: r.mine }))
+    }
+  };
+  return {
+    onNotice(fn) {
+      listeners.add(fn);
+      return () => listeners.delete(fn);
+    },
+    async config() {
+      await wait(200);
+      return config;
+    },
+    async list(sort, status) {
+      await wait();
+      const active = ["open", "planned", "in_progress"];
+      const rows = store.filter((r) => status === "all" ? true : status === "shipped" ? r.status === "shipped" : active.includes(r.status));
+      rows.sort(
+        (a, b) => status === "shipped" ? (b.shippedAt ?? 0) - (a.shippedAt ?? 0) : sort === "new" ? b.createdAt - a.createdAt : b.votes - a.votes || b.createdAt - a.createdAt
+      );
+      return rows.map(view);
+    },
+    async similar(q) {
+      await wait(250);
+      const words = WORDS(q);
+      if (!words.size) return [];
+      return store.filter((r) => r.status !== "declined").map((r) => ({ r, hits: [...WORDS(r.title)].filter((w) => words.has(w)).length })).filter((x) => x.hits >= 2 || x.hits === 1 && WORDS(x.r.title).size <= 2).sort((a, b) => b.hits - a.hits).slice(0, 3).map((x) => view(x.r));
+    },
+    async get(id) {
+      await wait();
+      const r = find(id);
+      if (!r) throw new YouAskedError("not_found");
+      return { request: view(r), comments: [...r.comments_], attachments: [...r.attachments_], earlyAccess: r.early };
+    },
+    async create(input) {
+      await wait(650);
+      const r = {
+        id: `demo_${++seq}`,
+        number: 20 + store.length,
+        title: input.title,
+        body: input.body === input.title ? "" : input.body,
+        status: "open",
+        votes: 1,
+        comments: 0,
+        shipNote: null,
+        shippedAt: null,
+        context: input.context ?? null,
+        creditName: null,
+        createdAt: Date.now(),
+        voted: true,
+        mine: true,
+        comments_: [],
+        attachments_: (input.attachments ?? []).map((id) => uploads.get(id)).filter(Boolean),
+        early: false
+      };
+      store.unshift(r);
+      scheduleReply(r, 5200);
+      return { ...view(r), attachments: r.attachments_ };
+    },
+    async upload(image) {
+      await wait(300);
+      const id = `demo_up${++seq}`;
+      const a = { id, url: URL.createObjectURL(image) };
+      uploads.set(id, a);
+      return a;
+    },
+    async vote(id) {
+      await wait(180);
+      const r = find(id);
+      r.voted = !r.voted;
+      r.votes += r.voted ? 1 : -1;
+      return { voted: r.voted, votes: r.votes };
+    },
+    async comment(id, body) {
+      await wait(300);
+      const r = find(id);
+      const c = { id: `demo_c${++seq}`, body, team: false, author: "You", mine: true, createdAt: Date.now() };
+      r.comments_.push(c);
+      if (r.mine) scheduleReply(r, 3800);
+      return c;
+    },
+    async earlyAccess(id) {
+      await wait(200);
+      const r = find(id);
+      r.early = !r.early;
+      return { earlyAccess: r.early };
+    },
+    async mine() {
+      await wait();
+      return store.filter((r) => r.mine || r.voted).map(view);
+    },
+    async seen() {
+      return { ok: true };
+    },
+    async whatsNewSeen() {
+      return { ok: true };
+    }
+  };
+}
+
+// src/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var base = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2.2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true
+};
+var IconUp = () => /* @__PURE__ */ jsx("svg", { ...base, strokeWidth: 2.6, children: /* @__PURE__ */ jsx("path", { d: "m6 15 6-6 6 6" }) });
+var IconClose = () => /* @__PURE__ */ jsx("svg", { ...base, width: 20, height: 20, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+var IconBack = () => /* @__PURE__ */ jsx("svg", { ...base, width: 20, height: 20, children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" }) });
+var IconChevron = () => /* @__PURE__ */ jsx("svg", { ...base, width: 18, height: 18, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
+var IconPlus = () => /* @__PURE__ */ jsx("svg", { ...base, children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) });
+var IconCheck = () => /* @__PURE__ */ jsx("svg", { ...base, width: 13, height: 13, strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+var IconChat = () => /* @__PURE__ */ jsx("svg", { ...base, children: /* @__PURE__ */ jsx("path", { d: "M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z" }) });
+var IconSend = () => /* @__PURE__ */ jsx("svg", { ...base, strokeWidth: 2.6, children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
+var IconFrame = () => /* @__PURE__ */ jsxs("svg", { ...base, children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 9V6a2 2 0 0 1 2-2h3M15 4h3a2 2 0 0 1 2 2v3M20 15v3a2 2 0 0 1-2 2h-3M9 20H6a2 2 0 0 1-2-2v-3" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2.2", fill: "currentColor", strokeWidth: 1 })
+] });
+var IconSpark = () => /* @__PURE__ */ jsxs("svg", { ...base, children: [
+  /* @__PURE__ */ jsx("path", { d: "m12 3 1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 16v4M17 18h4" })
+] });
+var IconIdea = () => /* @__PURE__ */ jsxs("svg", { ...base, children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 3.5c-4.97 0-9 3.47-9 7.75 0 2.3 1.17 4.37 3.03 5.8L5.2 20.5l4.1-2.06c.86.2 1.76.31 2.7.31 4.97 0 9-3.47 9-7.75S16.97 3.5 12 3.5Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M8.2 13.2 12 9.4l3.8 3.8", strokeWidth: 2.6 })
+] });
+
+// src/styles.ts
+var css = `
+.ya-scope{--_bg:var(--ya-bg);--_fg:var(--ya-fg);--_accent:var(--ya-accent);--_accent-fg:var(--ya-accent-fg);
+--_muted:var(--ya-muted,color-mix(in srgb,var(--ya-fg) 58%,var(--ya-bg)));
+--_surface:var(--ya-surface,color-mix(in srgb,var(--ya-fg) 5%,var(--ya-bg)));
+--_border:var(--ya-border,color-mix(in srgb,var(--ya-fg) 11%,var(--ya-bg)));
+--_tint:color-mix(in srgb,var(--_accent) 12%,transparent);
+--_radius:var(--ya-radius,14px);--_offset:var(--ya-offset,20px);--_green:#16a34a;--_amber:#c26a04;
+font-family:var(--ya-font,inherit);color:var(--_fg);font-size:15px;line-height:1.45;letter-spacing:normal;text-align:left;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
+.ya-scope[data-ya-mode=dark]{--_green:#3fd07f;--_amber:#f2a93b}
+.ya-scope :where(*,*::before,*::after){box-sizing:border-box}
+/* :where() keeps the reset at class-level specificity, so component rules below win. */
+.ya-scope :where(button){font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-align:inherit;letter-spacing:inherit}
+.ya-scope :where(button:disabled){cursor:default}
+.ya-scope :where(h2,h3,p,ul){margin:0;padding:0}
+.ya-scope :focus-visible{outline:2px solid var(--_accent);outline-offset:2px}
+.ya-scope :where(svg){display:block;flex:none}
+.ya-inline{display:block}
+.ya-overlay[hidden]{display:none}
+span.ya-inline{display:inline-block}
+
+/* ---------- overlay: bottom sheet on phones */
+.ya-overlay{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:flex-end;justify-content:center}
+.ya-backdrop{position:absolute;inset:0;background:rgba(8,10,20,.42);animation:ya-fade .25s ease-out}
+.ya-panel{position:relative;width:100%;max-width:520px;height:min(90vh,760px);height:min(90dvh,760px);background:var(--_bg);color:var(--_fg);
+border-radius:calc(var(--_radius) + 10px) calc(var(--_radius) + 10px) 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.18);
+display:flex;flex-direction:column;overflow:hidden;animation:ya-sheet-in .42s cubic-bezier(.2,.9,.25,1);padding-bottom:env(safe-area-inset-bottom)}
+.ya-panel:focus{outline:none}
+.ya-grab-zone{flex:none;padding:7px 0 0;cursor:grab;touch-action:none}
+.ya-grab{width:38px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--_fg) 20%,var(--_bg));margin:0 auto}
+.ya-overlay[data-closing] .ya-panel{animation:ya-sheet-out .2s ease-in forwards}
+.ya-overlay[data-closing] .ya-backdrop{animation:ya-fade-out .2s ease-in forwards}
+
+/* ---------- desktop: a panel anchored to the corner, like a chat window */
+@media (min-width:640px){
+.ya-overlay{align-items:flex-end;justify-content:flex-end;padding:0 20px calc(var(--_offset) + env(safe-area-inset-bottom))}
+.ya-overlay[data-launcher]{padding-bottom:calc(var(--_offset) + 68px + env(safe-area-inset-bottom))}
+.ya-overlay[data-pos=bottom-left]{justify-content:flex-start}
+.ya-backdrop{background:transparent;animation:none}
+.ya-panel{width:400px;max-width:calc(100vw - 40px);height:min(680px,calc(100vh - var(--_offset) - 110px));border-radius:calc(var(--_radius) + 8px);
+box-shadow:0 0 0 1px var(--_border),0 24px 70px rgba(0,0,0,.22);padding-bottom:0;transform-origin:bottom right;animation:ya-pop-in .28s cubic-bezier(.16,1,.3,1)}
+.ya-overlay[data-pos=bottom-left] .ya-panel{transform-origin:bottom left}
+.ya-overlay[data-closing] .ya-panel{animation:ya-pop-out .18s ease-in forwards}
+.ya-grab-zone{display:none}
+}
+
+/* ---------- header */
+.ya-head{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 18px;flex:none;touch-action:none}
+.ya-head-back{padding-left:8px}
+.ya-head-text{flex:1;min-width:0}
+.ya-h{font-size:17px;font-weight:700;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
+.ya-sub{font-size:12.5px;color:var(--_muted);margin-top:1px}
+.ya-icon-btn{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;color:var(--_muted);flex:none;background:var(--_surface)}
+.ya-icon-btn:hover{color:var(--_fg)}
+.ya-head-back .ya-icon-btn:first-child{background:none}
+.ya-link{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:600;color:var(--_accent);padding:6px 8px;border-radius:10px;flex:none}
+.ya-link svg{width:15px;height:15px}
+.ya-link:hover{background:var(--_tint)}
+.ya-avatar{display:block;flex:none;border-radius:24%;object-fit:cover;background:var(--_surface)}
+
+/* ---------- body, lists */
+.ya-body{flex:1;min-height:0;overflow-y:auto;padding:6px 16px 18px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
+.ya-list{list-style:none;display:flex;flex-direction:column;gap:8px}
+.ya-row{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--_radius);background:var(--_surface)}
+.ya-row-sm{padding:8px 10px;gap:10px}
+.ya-row-main{flex:1;min-width:0;display:block;padding:2px 0}
+.ya-row-title{font-weight:600;font-size:15px;line-height:1.35;overflow-wrap:anywhere;display:block}
+.ya-row-sm .ya-row-title{font-size:14.5px}
+.ya-meta{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:12.5px;color:var(--_muted);flex-wrap:wrap}
+.ya-meta svg{width:13px;height:13px}
+.ya-meta span{display:inline-flex;align-items:center;gap:4px}
+
+.ya-vote{flex:none;width:46px;padding:6px 0 5px;border-radius:calc(var(--_radius) - 4px);background:var(--_bg);border:1px solid var(--_border);display:flex;flex-direction:column;align-items:center;font-weight:700;font-size:14px;line-height:1.2;color:var(--_fg);transition:transform .12s,background .15s,border-color .15s,color .15s;font-variant-numeric:tabular-nums}
+.ya-vote-sm{width:40px;padding:4px 0 3px;font-size:13px}
+.ya-vote svg{width:16px;height:16px}
+.ya-vote-sm svg{width:14px;height:14px}
+.ya-vote:hover{border-color:var(--_accent)}
+.ya-vote[aria-pressed=true]{background:var(--_accent);border-color:var(--_accent);color:var(--_accent-fg)}
+.ya-vote:active,.ya-bigvote:active,.ya-btn:active,.ya-fab:active,.ya-send:active,.ya-askbar:active,.ya-pillbtn:active,.ya-iconbtn:active{transform:scale(.95)}
+
+.ya-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:650;background:var(--_bg);color:var(--_muted);white-space:nowrap}
+.ya-pill[data-s=planned]{background:var(--_tint);color:var(--_accent)}
+.ya-pill[data-s=in_progress]{background:color-mix(in srgb,var(--_amber) 16%,transparent);color:var(--_amber)}
+.ya-pill[data-s=shipped]{background:color-mix(in srgb,var(--_green) 15%,transparent);color:var(--_green)}
+
+/* ---------- home: chat */
+.ya-chat{display:flex;flex-direction:column;gap:10px;padding-top:4px}
+.ya-bubble{max-width:86%;padding:10px 14px;border-radius:20px;font-size:15px;line-height:1.4;overflow-wrap:anywhere;animation:ya-bubble .3s cubic-bezier(.2,.9,.3,1.2);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
+.ya-bubble b{font-weight:650}
+.ya-bubble-in{align-self:flex-start;background:var(--_surface);border-bottom-left-radius:6px}
+.ya-bubble-out{align-self:flex-end;background:var(--_accent);color:var(--_accent-fg);border-bottom-right-radius:6px;white-space:pre-wrap}
+.ya-bubble-win{background:color-mix(in srgb,var(--_green) 12%,var(--_bg))}
+.ya-bubble-error{background:color-mix(in srgb,#e5484d 12%,var(--_bg))}
+.ya-bubble-link{font-size:14px;font-weight:650;color:var(--_accent);padding:2px 0}
+.ya-bubble-img{display:block;width:100%;max-width:220px;border-radius:12px;margin-bottom:2px;box-shadow:0 0 0 1px color-mix(in srgb,var(--_accent-fg) 25%,transparent)}
+.ya-bubble-news{position:relative;align-self:stretch;max-width:100%;gap:8px}
+.ya-news{list-style:none;width:100%;display:flex;flex-direction:column}
+.ya-news button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--_fg) 9%,transparent);text-align:left}
+.ya-news li:first-child button{border-top:0}
+.ya-news > li > button > svg:last-child{color:var(--_muted);width:16px;height:16px}
+.ya-news-text{flex:1;min-width:0;display:flex;flex-direction:column}
+.ya-news-title{font-size:14.5px;font-weight:600;line-height:1.3}
+.ya-news-you{font-size:12px;font-weight:650;color:var(--_green)}
+/* A short burst from the corner. Hidden by default, so reduced motion (animation off) shows nothing. */
+.ya-confetti{position:absolute;top:14px;right:18px;width:0;height:0;pointer-events:none}
+.ya-confetti i{position:absolute;left:-3px;top:-3px;width:6px;height:9px;border-radius:2px;opacity:0;animation:ya-confetti .95s cubic-bezier(.2,.7,.3,1) both}
+.ya-typing{flex-direction:row;gap:4px;padding:14px 16px}
+.ya-typing span{width:7px;height:7px;border-radius:50%;background:var(--_muted);animation:ya-dot 1s infinite ease-in-out}
+.ya-typing span:nth-child(2){animation-delay:.15s}
+.ya-typing span:nth-child(3){animation-delay:.3s}
+.ya-chip{align-self:center;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--_accent);padding:8px 14px;border-radius:999px;background:var(--_tint)}
+.ya-section{margin-top:12px}
+.ya-section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
+.ya-section-head h3{font-size:13px;font-weight:650;color:var(--_muted)}
+.ya-shipped{list-style:none;display:flex;flex-direction:column}
+.ya-shipped button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 2px;border-bottom:1px solid var(--_border)}
+.ya-shipped li:last-child button{border-bottom:0}
+.ya-shipped-dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--_green) 16%,transparent);color:var(--_green);flex:none}
+.ya-shipped-title{flex:1;min-width:0;font-size:14.5px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ya-shipped-when{font-size:12.5px;color:var(--_muted);flex:none}
+.ya-note{font-size:13.5px;color:var(--_muted);margin-top:10px}
+
+.ya-composer-wrap{flex:none;padding:8px 12px 12px;background:var(--_bg);border-top:1px solid var(--_border)}
+.ya-tray{padding:10px;margin-bottom:8px;border-radius:calc(var(--_radius) + 2px);background:var(--_tint);animation:ya-tray .22s cubic-bezier(.2,.9,.3,1)}
+.ya-tray-h{font-size:13px;font-weight:650;margin:0 2px 8px}
+.ya-tray .ya-row{background:var(--_bg)}
+.ya-composer{display:flex;align-items:flex-end;gap:8px;padding:5px 5px 5px 16px;border-radius:24px;background:var(--_surface);border:1.5px solid transparent;transition:border-color .15s}
+.ya-composer:focus-within{border-color:color-mix(in srgb,var(--_accent) 55%,transparent)}
+.ya-composer-bar{flex:none;margin:8px 12px 12px}
+.ya-composer-input{flex:1;min-width:0;border:0;outline:none;background:none;resize:none;font:inherit;font-size:16px;line-height:1.4;color:var(--_fg);padding:7px 0;margin:0;min-height:calc(1.4em + 14px);max-height:132px;overflow-y:auto}
+.ya-composer-input::placeholder{color:var(--_muted);opacity:1}
+.ya-composer-input:focus-visible{outline:none}
+.ya-send{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--_accent);color:var(--_accent-fg);flex:none;transition:opacity .15s,transform .12s}
+.ya-send svg{width:18px;height:18px}
+.ya-send:disabled{opacity:.3}
+.ya-shots{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;animation:ya-tray .22s cubic-bezier(.2,.9,.3,1)}
+.ya-shot{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 4px;border-radius:14px;background:var(--_surface);font-size:13px;font-weight:600;max-width:100%}
+.ya-shot img{display:block;width:40px;height:40px;border-radius:10px;object-fit:cover;object-position:top;flex:none;box-shadow:0 0 0 1px var(--_border)}
+.ya-shot span{padding-right:2px}
+.ya-shot-x{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--_muted);flex:none}
+.ya-shot-x:hover{color:var(--_fg);background:var(--_border)}
+.ya-shot-x svg{width:13px;height:13px}
+.ya-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;min-height:32px}
+.ya-tool{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 9px;border-radius:999px;background:var(--_tint);color:var(--_accent);font-size:13.5px;font-weight:650;transition:transform .12s,opacity .15s;flex:none}
+.ya-tool svg{width:16px;height:16px}
+.ya-tool:disabled{opacity:.4}
+.ya-tool:active{transform:scale(.96)}
+.ya-switch-row{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--_muted);padding:4px 0 4px 8px;min-width:0;animation:ya-tray .2s ease-out}
+.ya-switch-row[aria-checked=true]{color:var(--_fg)}
+.ya-switch{position:relative;width:34px;height:20px;border-radius:999px;background:color-mix(in srgb,var(--_fg) 18%,var(--_bg));flex:none;transition:background .18s}
+.ya-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s cubic-bezier(.3,1.3,.5,1)}
+[aria-checked=true] > .ya-switch{background:var(--_accent)}
+[aria-checked=true] > .ya-switch::after{transform:translateX(14px)}
+.ya-mark{text-align:center;font-size:11.5px;color:var(--_muted);margin-top:8px}
+
+
+.ya-bubble-kicker{font-size:12.5px;font-weight:650;color:var(--_muted)}
+.ya-detail-meta{display:flex;align-items:center;gap:8px}
+.ya-ref{font-size:12px;font-weight:650;color:var(--_muted);font-variant-numeric:tabular-nums;letter-spacing:.02em}
+.ya-thread{display:flex;flex-direction:column;gap:12px;margin-top:8px}
+.ya-msg{display:flex;gap:8px;align-items:flex-end;max-width:92%}
+.ya-msg .ya-avatar{border-radius:50%;margin-bottom:2px}
+.ya-msg-body{display:flex;flex-direction:column;gap:3px;min-width:0}
+.ya-msg-body .ya-bubble{max-width:100%;animation:none}
+.ya-msg-out{align-self:flex-end;flex-direction:column;align-items:flex-end;gap:3px}
+.ya-msg-out .ya-bubble{max-width:100%;animation:none}
+.ya-msg-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--_muted);padding:0 4px}
+.ya-msg-meta b{color:var(--_fg);font-weight:650}
+/* ---------- board, detail */
+.ya-tabs{display:flex;gap:2px;margin:0 16px 8px;padding:3px;background:var(--_surface);border-radius:calc(var(--_radius) - 2px);flex:none}
+.ya-tab{flex:1;padding:7px 0;border-radius:calc(var(--_radius) - 5px);font-size:14px;font-weight:600;color:var(--_muted);text-align:center;transition:background .15s,color .15s}
+.ya-tab[aria-selected=true]{background:var(--_bg);color:var(--_fg);box-shadow:0 1px 3px rgba(0,0,0,.1)}
+.ya-foot{padding:12px 16px 14px;border-top:1px solid var(--_border);display:flex;flex-direction:column;gap:9px;flex:none;background:var(--_bg)}
+.ya-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 18px;border-radius:var(--_radius);background:var(--_accent);color:var(--_accent-fg);font-weight:650;font-size:15px;width:100%;transition:opacity .15s,transform .12s;white-space:nowrap}
+.ya-btn svg{width:18px;height:18px}
+.ya-btn:disabled{opacity:.4}
+.ya-btn-sm{height:38px;width:auto;padding:0 14px;font-size:14px;border-radius:calc(var(--_radius) - 3px)}
+.ya-btn-ghost{background:var(--_surface);color:var(--_fg)}
+.ya-callout{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--_radius);font-size:14px;margin-top:14px;line-height:1.4;background:color-mix(in srgb,var(--_green) 12%,var(--_bg))}
+.ya-callout svg{width:18px;height:18px;margin-top:1px;color:var(--_green)}
+.ya-callout b{font-weight:650}
+.ya-detail-title{font-size:21px;font-weight:700;letter-spacing:-.015em;margin:10px 0 8px;overflow-wrap:anywhere;line-height:1.28}
+.ya-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;color:var(--_fg)}
+.ya-text-muted{color:var(--_muted)}
+.ya-bigvote{margin-top:16px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--_border);font-weight:650;font-size:14.5px;transition:transform .12s,background .15s,color .15s;font-variant-numeric:tabular-nums}
+.ya-bigvote svg{width:17px;height:17px}
+.ya-bigvote[aria-pressed=true]{background:var(--_accent);border-color:var(--_accent);color:var(--_accent-fg)}
+.ya-attachments{display:flex;flex-direction:column;gap:8px;margin-top:12px}
+.ya-attachments a{display:block;border-radius:var(--_radius);overflow:hidden;box-shadow:0 0 0 1px var(--_border)}
+.ya-attachments img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover;object-position:top}
+.ya-early{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:10px 14px 10px 12px;border-radius:var(--_radius);background:var(--_surface);animation:ya-tray .22s cubic-bezier(.2,.9,.3,1)}
+.ya-early .ya-card-icon{width:32px;height:32px}
+.ya-early[aria-checked=true] .ya-card-icon{background:var(--_accent);color:var(--_accent-fg)}
+.ya-credit{display:block;margin-top:2px;color:var(--_muted)}
+.ya-section-h{font-size:13px;font-weight:650;color:var(--_muted);margin:26px 0 4px}
+.ya-comment{padding:11px 0;border-bottom:1px solid var(--_border)}
+.ya-comment:last-child{border-bottom:0}
+.ya-comment-who{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;margin-bottom:3px}
+.ya-comment-who time{font-weight:400;color:var(--_muted)}
+.ya-team{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--_accent);color:var(--_accent-fg)}
+.ya-empty{text-align:center;padding:44px 16px;color:var(--_muted)}
+.ya-empty b{display:block;color:var(--_fg);font-size:16px;margin-bottom:4px}
+.ya-skel{height:58px;border-radius:var(--_radius);background:var(--_surface);animation:ya-pulse 1.3s ease-in-out infinite}
+
+/* ---------- launcher, toast */
+.ya-fab{position:fixed;z-index:2147483650;bottom:calc(var(--_offset) + env(safe-area-inset-bottom));right:20px;height:56px;min-width:56px;padding:0;border-radius:999px;background:var(--_accent);color:var(--_accent-fg);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:650;font-size:15px;box-shadow:0 10px 30px color-mix(in srgb,var(--_accent) 35%,rgba(0,0,0,.25));transition:transform .15s}
+.ya-fab-label{padding:0 20px 0 16px}
+.ya-fab-icon{display:grid;place-items:center}
+.ya-fab svg{width:26px;height:26px}
+.ya-fab[data-open] svg{width:22px;height:22px}
+.ya-fab[data-pos=bottom-left]{right:auto;left:20px}
+.ya-fab .ya-dot{position:absolute;top:4px;right:4px}
+.ya-fab-label .ya-dot{position:static}
+@media (max-width:639px){.ya-fab[data-open]{display:none}}
+.ya-dot{width:10px;height:10px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 2px var(--_bg)}
+
+.ya-toast{position:fixed;z-index:2147483550;right:20px;bottom:calc(var(--_offset) + 68px + env(safe-area-inset-bottom));width:min(370px,calc(100vw - 32px));background:var(--_bg);color:var(--_fg);border:1px solid var(--_border);border-radius:calc(var(--_radius) + 6px);box-shadow:0 20px 60px rgba(0,0,0,.25);padding:16px 16px 14px;animation:ya-pop .45s cubic-bezier(.34,1.36,.64,1)}
+.ya-toast[data-pos=bottom-left]{right:auto;left:20px}
+.ya-toast[data-trigger=none]{bottom:calc(var(--_offset) + env(safe-area-inset-bottom))}
+@media (max-width:480px){.ya-toast,.ya-toast[data-pos=bottom-left]{left:16px;right:16px;width:auto}}
+.ya-toast-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.ya-toast-kicker{font-size:12.5px;font-weight:650;color:var(--_muted)}
+.ya-toast-title{font-size:17px;font-weight:750;letter-spacing:-.01em;margin-top:3px;overflow-wrap:anywhere;line-height:1.3}
+.ya-live{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--_green)}
+.ya-toast .ya-live{margin-top:8px}
+.ya-live svg{width:15px;height:15px}
+.ya-toast-note{font-size:13.5px;color:var(--_muted);margin-top:6px;overflow-wrap:anywhere}
+.ya-toast-actions{display:flex;gap:8px;margin-top:12px}
+.ya-toast-quote{color:var(--_fg);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+.ya-toast .ya-icon-btn{width:30px;height:30px;margin:-6px -6px 0 0;background:none}
+
+/* ---------- inline entry points */
+.ya-askbar{display:flex;align-items:center;gap:12px;width:100%;padding:8px 8px 8px 10px;border-radius:999px;background:var(--_bg);border:1px solid var(--_border);color:var(--_muted);font-size:15.5px;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,transform .12s}
+.ya-askbar:hover{border-color:color-mix(in srgb,var(--_accent) 50%,var(--_border))}
+.ya-askbar .ya-avatar{border-radius:30%}
+.ya-askbar-glyph{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--_tint);color:var(--_accent);flex:none}
+.ya-askbar-glyph svg{width:18px;height:18px}
+.ya-askbar-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ya-askbar-send{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--_accent);color:var(--_accent-fg);flex:none}
+.ya-askbar-send svg{width:17px;height:17px}
+.ya-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ff3b30;color:#fff;font-size:12px;font-weight:700;display:inline-grid;place-items:center;flex:none}
+
+.ya-card{background:var(--_bg);border-radius:calc(var(--_radius) + 6px);padding:16px;display:flex;flex-direction:column;gap:12px}
+.ya-card-head{display:flex;align-items:center;gap:12px}
+.ya-card-icon{width:36px;height:36px;border-radius:30%;display:grid;place-items:center;background:var(--_tint);color:var(--_accent);flex:none}
+.ya-card-icon svg{width:19px;height:19px}
+.ya-card-title{font-size:16px;font-weight:700;letter-spacing:-.01em}
+.ya-card-sub{font-size:13px;color:var(--_muted);margin-top:1px}
+.ya-card-win{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--_radius);background:color-mix(in srgb,var(--_green) 12%,var(--_bg));font-size:14px;text-align:left}
+.ya-card-win > span:nth-child(2){flex:1;min-width:0}
+.ya-card-win b{font-weight:650}
+.ya-card-actions{display:flex;gap:8px}
+.ya-card-actions .ya-btn{flex:1}
+
+.ya-pillbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 13px;border-radius:999px;background:var(--_tint);color:var(--_accent);font-weight:650;font-size:14.5px;transition:transform .12s}
+.ya-pillbtn svg{width:18px;height:18px}
+.ya-pillbtn .ya-badge{margin-right:-6px}
+.ya-iconbtn{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--_surface);color:var(--_fg);transition:transform .12s}
+.ya-iconbtn svg{width:21px;height:21px}
+.ya-iconbtn .ya-dot{position:absolute;top:1px;right:1px;width:9px;height:9px}
+.ya-menurow{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:var(--_radius);background:var(--_bg);text-align:left;color:var(--_fg)}
+.ya-menurow > svg{color:var(--_muted);width:17px;height:17px}
+.ya-menurow .ya-card-icon{width:32px;height:32px}
+.ya-menurow-text{flex:1;min-width:0;display:flex;flex-direction:column}
+.ya-menurow-label{font-size:15.5px;font-weight:600}
+.ya-menurow-sub{font-size:13px;color:var(--_muted)}
+
+.ya-askabout{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;line-height:1.3;color:var(--_muted);padding:2px 0;border-radius:6px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
+.ya-askabout svg{width:14px;height:14px;color:var(--_accent)}
+.ya-askabout:hover{color:var(--_fg);text-decoration-color:currentColor}
+.ya-askforit{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:14.5px;color:var(--_muted);padding:4px 0;text-align:left}
+.ya-askforit b{white-space:nowrap;display:inline-flex;align-items:center;gap:1px;font-weight:650;color:var(--_accent);padding:3px 6px 3px 12px;border-radius:999px;background:var(--_tint);transition:transform .12s}
+.ya-askforit b svg{width:15px;height:15px}
+.ya-askforit:active b{transform:scale(.96)}
+
+/* ---------- show us: draw on the page */
+.ya-capture{position:fixed;inset:0;z-index:2147483640;animation:ya-fade .18s ease-out}
+.ya-capture-sample{position:absolute;color:var(--_accent);width:0;height:0;overflow:hidden}
+.ya-capture-surface{position:absolute;inset:0;background:rgba(8,10,20,.2);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}
+.ya-capture-box{position:absolute;border:3px solid var(--_accent);border-radius:8px;background:var(--_tint);box-shadow:0 0 0 2px rgba(255,255,255,.92);pointer-events:none}
+.ya-capture-hint{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);white-space:nowrap;padding:9px 16px;border-radius:999px;background:var(--_bg);color:var(--_fg);font-size:14px;font-weight:650;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.25);pointer-events:none;animation:ya-pop .35s cubic-bezier(.34,1.36,.64,1)}
+.ya-capture-bar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom));display:flex;gap:8px;padding:8px;border-radius:calc(var(--_radius) + 8px);background:var(--_bg);box-shadow:0 10px 40px rgba(0,0,0,.3),0 0 0 1px var(--_border)}
+.ya-capture-bar .ya-btn{min-width:84px}
+.ya-capture[data-busy] .ya-capture-surface{cursor:progress}
+
+.ya-embed{position:relative;display:flex;flex-direction:column;background:var(--_bg);border-radius:calc(var(--_radius) + 6px);overflow:hidden;border:1px solid var(--_border)}
+
+.ya-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+
+@keyframes ya-sheet-in{from{transform:translateY(100%)}}
+@keyframes ya-sheet-out{to{transform:translateY(100%)}}
+@keyframes ya-pop-in{from{transform:translateY(12px) scale(.96);opacity:0}}
+@keyframes ya-pop-out{to{transform:translateY(8px) scale(.97);opacity:0}}
+@keyframes ya-fade{from{opacity:0}}
+@keyframes ya-fade-out{to{opacity:0}}
+@keyframes ya-pop{from{transform:translateY(14px) scale(.96);opacity:0}}
+@keyframes ya-bubble{from{transform:translateY(8px) scale(.97);opacity:0}}
+@keyframes ya-tray{from{transform:translateY(6px);opacity:0}}
+@keyframes ya-dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
+@keyframes ya-confetti{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.6)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}}
+@keyframes ya-pulse{50%{opacity:.5}}
+@media (prefers-reduced-motion:reduce){.ya-scope *{animation:none!important;transition:none!important}}
+`;
+function injectStyles() {
+  if (typeof document === "undefined") return;
+  let el = document.getElementById("youasked-styles");
+  if (!el) {
+    el = document.createElement("style");
+    el.id = "youasked-styles";
+    document.head.appendChild(el);
+  }
+  if (el.textContent !== css) el.textContent = css;
+}
+
+// src/theme.ts
+var DEFAULTS = {
+  light: { accent: "#2B4BEE", background: "#ffffff", foreground: "#141B2D", radius: "14px", fontFamily: "inherit" },
+  dark: { accent: "#7d93ff", background: "#161d31", foreground: "#F4F6FA", radius: "14px", fontFamily: "inherit" }
+};
+var probe = null;
+function computeColor(value) {
+  if (typeof document === "undefined") return null;
+  if (!probe) {
+    probe = document.createElement("span");
+    probe.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;";
+    probe.setAttribute("aria-hidden", "true");
+  }
+  if (!probe.isConnected) document.body.appendChild(probe);
+  probe.style.color = "";
+  probe.style.color = value;
+  if (!probe.style.color) return null;
+  return getComputedStyle(probe).color;
+}
+function luminance(rgb) {
+  const m = rgb?.match(/rgba?\(([\d.]+)[ ,]+([\d.]+)[ ,]+([\d.]+)(?:[ ,/]+([\d.]+%?))?/);
+  if (!m) return null;
+  if (m[4] !== void 0 && parseFloat(m[4]) === 0) return null;
+  const [r, g, b] = [m[1], m[2], m[3]].map((v) => {
+    const c = parseFloat(v) / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function cssColor(raw) {
+  const v = raw.trim();
+  if (!v || typeof CSS === "undefined") return void 0;
+  if (CSS.supports("color", v)) return v;
+  if (CSS.supports("color", `hsl(${v})`)) return `hsl(${v})`;
+  return void 0;
+}
+function hostIsDark() {
+  const html = document.documentElement;
+  if (html.classList.contains("dark") || html.dataset.theme === "dark") return true;
+  if (html.classList.contains("light") || html.dataset.theme === "light") return false;
+  const lum = luminance(getComputedStyle(document.body).backgroundColor) ?? luminance(getComputedStyle(html).backgroundColor);
+  if (lum !== null) return lum < 0.35;
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
+}
+function readHost() {
+  const root = getComputedStyle(document.documentElement);
+  const v = (name) => cssColor(root.getPropertyValue(name));
+  const radius = root.getPropertyValue("--radius").trim();
+  return {
+    accent: v("--primary"),
+    accentForeground: v("--primary-foreground"),
+    background: v("--popover") ?? v("--card") ?? v("--background"),
+    foreground: v("--popover-foreground") ?? v("--card-foreground") ?? v("--foreground"),
+    muted: v("--muted-foreground"),
+    surface: v("--muted") ?? v("--secondary"),
+    border: v("--border"),
+    radius: radius && CSS.supports("border-radius", radius) ? radius : void 0,
+    fontFamily: getComputedStyle(document.body).fontFamily || void 0
+  };
+}
+function defined(obj) {
+  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== void 0 && v !== ""));
+}
+function resolveTokens(appearance = {}) {
+  const mode = appearance.mode === "dark" || appearance.mode !== "light" && hostIsDark() ? "dark" : "light";
+  const host = appearance.inherit === false ? {} : readHost();
+  const { mode: _m, inherit: _i, radius, ...colours } = appearance;
+  const merged = {
+    ...DEFAULTS[mode],
+    ...defined(host),
+    ...defined(colours),
+    ...radius !== void 0 ? { radius: typeof radius === "number" ? `${radius}px` : radius } : {},
+    mode
+  };
+  if (!merged.accentForeground) {
+    const lum = luminance(computeColor(merged.accent));
+    const onWhite = lum === null ? Infinity : 1.05 / (lum + 0.05);
+    const onDark = lum === null ? 0 : (lum + 0.05) / 0.056;
+    merged.accentForeground = onDark > onWhite ? "#0d1220" : "#ffffff";
+  }
+  return merged;
+}
+function tokenStyle(t) {
+  const style = {
+    "--ya-accent": t.accent,
+    "--ya-accent-fg": t.accentForeground ?? "#fff",
+    "--ya-bg": t.background,
+    "--ya-fg": t.foreground,
+    "--ya-radius": t.radius
+  };
+  if (t.fontFamily && t.fontFamily !== "inherit") style["--ya-font"] = t.fontFamily;
+  if (t.muted) style["--ya-muted"] = t.muted;
+  if (t.surface) style["--ya-surface"] = t.surface;
+  if (t.border) style["--ya-border"] = t.border;
+  return style;
+}
+
+// src/shared.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function useVote(client, initial) {
+  const [state, setState] = useState({ voted: initial.voted, votes: initial.votes });
+  const busy = useRef(false);
+  useEffect(() => setState({ voted: initial.voted, votes: initial.votes }), [initial.voted, initial.votes]);
+  const toggle = useCallback(async () => {
+    if (busy.current) return;
+    busy.current = true;
+    const before = state;
+    setState({ voted: !before.voted, votes: before.votes + (before.voted ? -1 : 1) });
+    try {
+      setState(await client.vote(initial.id));
+    } catch {
+      setState(before);
+    } finally {
+      busy.current = false;
+    }
+  }, [client, initial.id, state]);
+  return { ...state, toggle };
+}
+function VoteButton({ client, request, compact }) {
+  const { voted, votes, toggle } = useVote(client, request);
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: compact ? "ya-vote ya-vote-sm" : "ya-vote",
+      "aria-pressed": voted,
+      "aria-label": `${voted ? "Remove vote" : "Upvote"}: ${request.title}. ${votes} ${votes === 1 ? "vote" : "votes"}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        toggle();
+      },
+      children: [
+        /* @__PURE__ */ jsx2(IconUp, {}),
+        votes
+      ]
+    }
+  );
+}
+function BigVote({
+  client,
+  request,
+  onChange
+}) {
+  const { voted, votes, toggle } = useVote(client, request);
+  useEffect(() => onChange?.(voted), [voted, onChange]);
+  return /* @__PURE__ */ jsxs2("button", { type: "button", className: "ya-bigvote", "aria-pressed": voted, onClick: toggle, children: [
+    /* @__PURE__ */ jsx2(IconUp, {}),
+    voted ? "Voted" : "Upvote",
+    " \xB7 ",
+    votes
+  ] });
+}
+var STATUS_LABEL = {
+  open: "Open",
+  planned: "Planned",
+  in_progress: "In progress",
+  shipped: "Shipped",
+  declined: "Not planned"
+};
+function StatusPill({ status }) {
+  return /* @__PURE__ */ jsxs2("span", { className: "ya-pill", "data-s": status, children: [
+    status === "shipped" && /* @__PURE__ */ jsx2(IconCheck, {}),
+    STATUS_LABEL[status]
+  ] });
+}
+function RequestRow({
+  client,
+  request,
+  onOpen,
+  compact
+}) {
+  return /* @__PURE__ */ jsxs2("li", { className: compact ? "ya-row ya-row-sm" : "ya-row", children: [
+    /* @__PURE__ */ jsx2(VoteButton, { client, request, compact }),
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "ya-row-main", onClick: onOpen, children: [
+      /* @__PURE__ */ jsx2("span", { className: "ya-row-title", children: request.title }),
+      (request.status !== "open" || request.comments > 0 || request.mine) && /* @__PURE__ */ jsxs2("span", { className: "ya-meta", children: [
+        request.status !== "open" && /* @__PURE__ */ jsx2(StatusPill, { status: request.status }),
+        request.comments > 0 && /* @__PURE__ */ jsxs2("span", { children: [
+          /* @__PURE__ */ jsx2(IconChat, {}),
+          request.comments
+        ] }),
+        request.mine && /* @__PURE__ */ jsx2("span", { children: "You asked" })
+      ] })
+    ] })
+  ] });
+}
+function Skeleton({ rows = 3 }) {
+  return /* @__PURE__ */ jsx2("div", { className: "ya-list", "aria-label": "Loading", role: "status", children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx2("div", { className: "ya-skel" }, i)) });
+}
+function useLoad(load, deps) {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let alive = true;
+    setData(null);
+    setError(null);
+    load().then((d) => alive && setData(d)).catch((e) => alive && setError(e instanceof YouAskedError ? e.code : "network"));
+    return () => {
+      alive = false;
+    };
+  }, deps);
+  return { data, error, setData };
+}
+function errorText(code) {
+  switch (code) {
+    case "signature_required":
+    case "bad_signature":
+      return "We couldn't confirm who you are. Refresh the page and try again.";
+    case "slow_down":
+      return "That's a lot of requests in an hour. Try again a bit later.";
+    case "title_too_short":
+      return "Add a few more words so others know what you mean.";
+    case "network":
+      return "Couldn't reach the server. Check your connection and try again.";
+    default:
+      return "Something went wrong. Try again.";
+  }
+}
+function whatsNewHeading(total) {
+  return `${total} ${total === 1 ? "thing" : "things"} shipped since your last visit`;
+}
+function ago(t) {
+  const s = Math.max(0, Math.round((Date.now() - t) / 1e3));
+  if (s < 60) return "just now";
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.round(h / 24);
+  if (d < 30) return `${d}d ago`;
+  return new Date(t).toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+function AppAvatar({ icon, size = 36 }) {
+  const [failed, setFailed] = useState(false);
+  if (!icon || failed) return null;
+  return /* @__PURE__ */ jsx2(
+    "img",
+    {
+      className: "ya-avatar",
+      src: icon,
+      alt: "",
+      width: size,
+      height: size,
+      style: { width: size, height: size },
+      onError: () => setFailed(true)
+    }
+  );
+}
+function Header({
+  title,
+  subtitle,
+  leading,
+  onBack,
+  onClose,
+  right
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: onBack ? "ya-head ya-head-back" : "ya-head", children: [
+    onBack && /* @__PURE__ */ jsx2("button", { type: "button", className: "ya-icon-btn", onClick: onBack, "aria-label": "Back", children: /* @__PURE__ */ jsx2(IconBack, {}) }),
+    leading,
+    /* @__PURE__ */ jsxs2("div", { className: "ya-head-text", children: [
+      /* @__PURE__ */ jsx2("h2", { className: "ya-h", children: title }),
+      subtitle && /* @__PURE__ */ jsx2("p", { className: "ya-sub", children: subtitle })
+    ] }),
+    right,
+    onClose && /* @__PURE__ */ jsx2("button", { type: "button", className: "ya-icon-btn", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx2(IconClose, {}) })
+  ] });
+}
+
+// src/views.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Navigator({ route, setRoute, onClose }) {
+  switch (route.view) {
+    case "home":
+      return /* @__PURE__ */ jsx3(Home, { route, setRoute, onClose }, `${route.draft ?? ""}${route.focus ? "f" : ""}${route.topic ?? ""}`);
+    case "board":
+      return /* @__PURE__ */ jsx3(Board, { initialTab: route.tab, setRoute, onClose });
+    case "detail":
+      return /* @__PURE__ */ jsx3(Detail, { id: route.id, setRoute, onClose }, route.id);
+    case "mine":
+      return /* @__PURE__ */ jsx3(Mine, { setRoute, onClose });
+  }
+}
+function splitMessage(text) {
+  const t = text.trim();
+  if (t.length <= 120 && !t.includes("\n")) return { title: t, body: "" };
+  const first = t.split("\n")[0];
+  const sentence = first.match(/^(.{12,120}?[.!?])\s/)?.[1];
+  const title = (sentence ?? first).slice(0, 120).trim();
+  return { title, body: t };
+}
+function ReplyBubble({ notice, appName, onOpen }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "ya-bubble ya-bubble-in", children: [
+    /* @__PURE__ */ jsxs3("span", { className: "ya-bubble-kicker", children: [
+      appName,
+      " replied about ",
+      notice.title
+    ] }),
+    /* @__PURE__ */ jsx3("span", { children: notice.reply }),
+    /* @__PURE__ */ jsx3("button", { type: "button", className: "ya-bubble-link", onClick: onOpen, children: "Reply" })
+  ] });
+}
+var MAX_SHOTS = 3;
+function Confetti() {
+  const colors = ["var(--_accent)", "var(--_green)", "var(--_amber)", "#ff7eb3"];
+  return /* @__PURE__ */ jsx3("span", { className: "ya-confetti", "aria-hidden": "true", children: Array.from({ length: 14 }, (_, i) => {
+    const angle = Math.PI * (0.15 + i / 13 * 0.7) % Math.PI;
+    const dist = 38 + i % 4 * 14;
+    return /* @__PURE__ */ jsx3(
+      "i",
+      {
+        style: {
+          "--x": `${Math.round(Math.cos(angle) * dist * (i % 2 ? -1 : 1))}px`,
+          "--y": `${Math.round(-Math.sin(angle) * dist)}px`,
+          "--r": `${i * 67 % 360}deg`,
+          background: colors[i % colors.length],
+          animationDelay: `${i % 5 * 40}ms`
+        }
+      },
+      i
+    );
+  }) });
+}
+function Home({ route, setRoute, onClose }) {
+  const { client, config, appName, appIcon, greeting, markSeen, whatsNew, dismissWhatsNew, pointAtIt } = useInternal();
+  const top = useLoad(() => client.list("top", "active"), [client]);
+  const shipped = useLoad(() => client.list("new", "shipped"), [client]);
+  const [text, setText] = useState2(route.draft ?? "");
+  const [thread, setThread] = useState2([]);
+  const [similar, setSimilar] = useState2([]);
+  const [notices] = useState2(() => config?.unseen ?? []);
+  const [news] = useState2(() => whatsNew);
+  const [shots, setShots] = useState2([]);
+  const [shotError, setShotError] = useState2(null);
+  const [credit, setCredit] = useState2(false);
+  const urls = useRef2([]);
+  const inputRef = useRef2(null);
+  const bodyRef = useRef2(null);
+  const sending = thread.some((t) => t.kind === "typing");
+  useEffect2(() => {
+    if (notices.length) markSeen(notices.map((n) => n.id));
+  }, [notices, markSeen]);
+  useEffect2(() => {
+    if (news) dismissWhatsNew();
+  }, [news, dismissWhatsNew]);
+  const arrived = config?.unseen.filter((n) => n.kind === "reply" && !notices.some((o) => o.id === n.id)) ?? [];
+  const arrivedKey = arrived.map((n) => n.id).join(",");
+  useEffect2(() => {
+    if (!arrived.length) return;
+    setThread((th) => [...th, ...arrived.map((notice) => ({ kind: "reply", notice }))]);
+    markSeen(arrived.map((n) => n.id));
+  }, [arrivedKey]);
+  useEffect2(() => () => urls.current.forEach((u) => URL.revokeObjectURL(u)), []);
+  useEffect2(() => {
+    if (!route.focus) return;
+    const t = setTimeout(() => {
+      const el = inputRef.current;
+      if (!el) return;
+      el.focus();
+      el.setSelectionRange(el.value.length, el.value.length);
+    }, 60);
+    return () => clearTimeout(t);
+  }, [route.focus]);
+  useEffect2(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.style.height = "";
+    if (text.includes("\n") || el.scrollHeight > el.clientHeight + 2) el.style.height = `${Math.min(el.scrollHeight, 132)}px`;
+  }, [text]);
+  useEffect2(() => {
+    if (thread.length) bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight, behavior: "smooth" });
+  }, [thread]);
+  useEffect2(() => {
+    const q = text.trim();
+    if (q.length < 4) {
+      setSimilar([]);
+      return;
+    }
+    let alive = true;
+    const t = setTimeout(() => {
+      client.similar(q).then((r) => alive && setSimilar(r.slice(0, 3))).catch(() => {
+      });
+    }, 350);
+    return () => {
+      alive = false;
+      clearTimeout(t);
+    };
+  }, [client, text]);
+  const point = async () => {
+    setShotError(null);
+    try {
+      const blob = await pointAtIt();
+      if (blob) {
+        const url = URL.createObjectURL(blob);
+        urls.current.push(url);
+        setShots((s) => [...s, { blob, url }]);
+      }
+    } catch {
+      setShotError("Couldn't capture this page. You can still describe it in words.");
+    }
+    inputRef.current?.focus({ preventScroll: true });
+  };
+  const send = async () => {
+    const message = text.trim();
+    if (message.length < 3 || sending) return;
+    const attached = shots;
+    const credited = credit && Boolean(config?.canCredit);
+    setText("");
+    setSimilar([]);
+    setShots([]);
+    setShotError(null);
+    setCredit(false);
+    setThread((th) => [...th, { kind: "out", text: message, images: attached.map((s) => s.url) }, { kind: "typing" }]);
+    const { title, body } = splitMessage(message);
+    try {
+      const attachments = await Promise.all(attached.map((s) => client.upload(s.blob).then((a) => a.id)));
+      const context = { path: location.pathname, topic: route.topic };
+      const [request] = await Promise.all([
+        client.create({ title, body, attachments, context, credit: credited }),
+        new Promise((r) => setTimeout(r, 650))
+      ]);
+      setThread((th) => [...th.filter((t) => t.kind !== "typing"), { kind: "posted", request }]);
+    } catch (err) {
+      setThread((th) => [
+        ...th.filter((t) => t.kind !== "typing" && !(t.kind === "out" && t.text === message)),
+        { kind: "error", text: errorText(err instanceof YouAskedError ? err.code : "network") }
+      ]);
+      setText(message);
+      setShots(attached);
+      setCredit(credited);
+    }
+  };
+  const chatting = thread.length > 0;
+  const openRequest = (id) => setRoute({ view: "detail", id });
+  const asking = route.topic && route.placeholder ? route.topic : null;
+  const placeholder = route.placeholder ?? "Ask for a feature\u2026";
+  const yours = news?.items.find((i) => i.mine);
+  const listed = new Set(news?.items.map((i) => i.id));
+  const shownNotices = notices.filter((n) => !(n.kind === "shipped" && listed.has(n.requestId)));
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      Header,
+      {
+        leading: /* @__PURE__ */ jsx3(AppAvatar, { icon: appIcon }),
+        title: appName,
+        subtitle: "Ideas, votes and what's new",
+        onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "ya-body ya-chat", ref: bodyRef, children: [
+      /* @__PURE__ */ jsx3("div", { className: "ya-bubble ya-bubble-in", children: asking ? `Let's talk about ${asking}. What's missing, or what bugs you?` : greeting ?? `Hey! What would make ${appName} better for you?` }),
+      news && /* @__PURE__ */ jsxs3("div", { className: yours ? "ya-bubble ya-bubble-in ya-bubble-win ya-bubble-news" : "ya-bubble ya-bubble-in ya-bubble-news", children: [
+        yours && /* @__PURE__ */ jsx3(Confetti, {}),
+        /* @__PURE__ */ jsx3("span", { className: "ya-bubble-kicker", children: whatsNewHeading(news.total) }),
+        /* @__PURE__ */ jsx3("ul", { className: "ya-news", children: news.items.map((i) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsxs3("button", { type: "button", onClick: () => openRequest(i.id), children: [
+          /* @__PURE__ */ jsx3("span", { className: "ya-shipped-dot", children: /* @__PURE__ */ jsx3(IconCheck, {}) }),
+          /* @__PURE__ */ jsxs3("span", { className: "ya-news-text", children: [
+            /* @__PURE__ */ jsx3("span", { className: "ya-news-title", children: i.title }),
+            i.mine && /* @__PURE__ */ jsx3("span", { className: "ya-news-you", children: "You asked for this" })
+          ] }),
+          /* @__PURE__ */ jsx3(IconChevron, {})
+        ] }) }, i.id)) }),
+        yours && /* @__PURE__ */ jsx3("span", { children: "That one was yours. Thanks for asking." }),
+        news.total > news.items.length && /* @__PURE__ */ jsxs3("button", { type: "button", className: "ya-bubble-link", onClick: () => setRoute({ view: "board", tab: "shipped" }), children: [
+          "See all ",
+          news.total
+        ] })
+      ] }),
+      shownNotices.map(
+        (n) => n.kind === "reply" ? /* @__PURE__ */ jsx3(ReplyBubble, { notice: n, appName, onOpen: () => openRequest(n.requestId) }, n.id) : /* @__PURE__ */ jsxs3("div", { className: "ya-bubble ya-bubble-in ya-bubble-win", children: [
+          /* @__PURE__ */ jsxs3("span", { className: "ya-live", children: [
+            /* @__PURE__ */ jsx3(IconCheck, {}),
+            "It's live"
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { children: [
+            "You asked for ",
+            /* @__PURE__ */ jsx3("b", { children: n.title }),
+            ". ",
+            n.shipNote ?? "Thanks for asking."
+          ] }),
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "ya-bubble-link", onClick: () => openRequest(n.requestId), children: "See it" })
+        ] }, n.id)
+      ),
+      !chatting && /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx3(Section, { title: "Popular right now", action: "See all", onAction: () => setRoute({ view: "board" }), children: top.error ? /* @__PURE__ */ jsx3("p", { className: "ya-note", children: errorText(top.error) }) : !top.data ? /* @__PURE__ */ jsx3(Skeleton, { rows: 2 }) : top.data.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "ya-note", children: "No requests yet. Yours could be the first." }) : /* @__PURE__ */ jsx3("ul", { className: "ya-list", children: top.data.slice(0, 3).map((r) => /* @__PURE__ */ jsx3(RequestRow, { client, request: r, compact: true, onOpen: () => openRequest(r.id) }, r.id)) }) }),
+        shipped.data && shipped.data.length > 0 && /* @__PURE__ */ jsx3(Section, { title: "Recently shipped", action: "All", onAction: () => setRoute({ view: "board", tab: "shipped" }), children: /* @__PURE__ */ jsx3("ul", { className: "ya-shipped", children: shipped.data.slice(0, 3).map((r) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsxs3("button", { type: "button", onClick: () => openRequest(r.id), children: [
+          /* @__PURE__ */ jsx3("span", { className: "ya-shipped-dot", children: /* @__PURE__ */ jsx3(IconCheck, {}) }),
+          /* @__PURE__ */ jsx3("span", { className: "ya-shipped-title", children: r.title }),
+          /* @__PURE__ */ jsx3("span", { className: "ya-shipped-when", children: r.shippedAt ? ago(r.shippedAt) : "" })
+        ] }) }, r.id)) }) })
+      ] }),
+      thread.map(
+        (t, i) => t.kind === "out" ? /* @__PURE__ */ jsxs3("div", { className: "ya-bubble ya-bubble-out", children: [
+          t.images?.map((src) => /* @__PURE__ */ jsx3("img", { className: "ya-bubble-img", src, alt: "Your screenshot" }, src)),
+          t.text
+        ] }, i) : t.kind === "typing" ? /* @__PURE__ */ jsxs3("div", { className: "ya-bubble ya-bubble-in ya-typing", "aria-label": "Posting", children: [
+          /* @__PURE__ */ jsx3("span", {}),
+          /* @__PURE__ */ jsx3("span", {}),
+          /* @__PURE__ */ jsx3("span", {})
+        ] }, i) : t.kind === "reply" ? /* @__PURE__ */ jsx3(ReplyBubble, { notice: t.notice, appName, onOpen: () => openRequest(t.notice.requestId) }, i) : t.kind === "posted" ? /* @__PURE__ */ jsxs3("div", { className: "ya-bubble ya-bubble-in", children: [
+          /* @__PURE__ */ jsxs3("span", { children: [
+            "Got it. ",
+            /* @__PURE__ */ jsx3("b", { children: t.request.title }),
+            " is on the board, and we'll tell you right here when it ships."
+          ] }),
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "ya-bubble-link", onClick: () => openRequest(t.request.id), children: "View request" })
+        ] }, i) : /* @__PURE__ */ jsx3("div", { className: "ya-bubble ya-bubble-in ya-bubble-error", role: "alert", children: t.text }, i)
+      ),
+      chatting && !sending && /* @__PURE__ */ jsx3("button", { type: "button", className: "ya-chip", onClick: () => setRoute({ view: "board" }), children: "See what others asked for" })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "ya-composer-wrap", children: [
+      similar.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "ya-tray", "aria-live": "polite", children: [
+        /* @__PURE__ */ jsx3("p", { className: "ya-tray-h", children: "Sounds like one of these. Vote instead?" }),
+        /* @__PURE__ */ jsx3("ul", { className: "ya-list", children: similar.map((r) => /* @__PURE__ */ jsx3(RequestRow, { client, request: r, compact: true, onOpen: () => openRequest(r.id) }, r.id)) })
+      ] }),
+      shots.length > 0 && /* @__PURE__ */ jsx3("ul", { className: "ya-shots", "aria-label": "Screenshots", children: shots.map((s, i) => /* @__PURE__ */ jsxs3("li", { className: "ya-shot", children: [
+        /* @__PURE__ */ jsx3("img", { src: s.url, alt: "" }),
+        /* @__PURE__ */ jsxs3("span", { children: [
+          "Screenshot",
+          shots.length > 1 ? ` ${i + 1}` : ""
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "ya-shot-x",
+            "aria-label": `Remove screenshot${shots.length > 1 ? ` ${i + 1}` : ""}`,
+            onClick: () => setShots((all) => all.filter((x) => x !== s)),
+            children: /* @__PURE__ */ jsx3(IconClose, {})
+          }
+        )
+      ] }, s.url)) }),
+      /* @__PURE__ */ jsxs3(
+        "form",
+        {
+          className: "ya-composer",
+          onSubmit: (e) => {
+            e.preventDefault();
+            send();
+          },
+          children: [
+            /* @__PURE__ */ jsx3(
+              "textarea",
+              {
+                ref: inputRef,
+                className: "ya-composer-input",
+                rows: 1,
+                value: text,
+                onChange: (e) => setText(e.target.value),
+                placeholder,
+                "aria-label": asking ? placeholder : "Ask for a feature",
+                maxLength: 2e3,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    send();
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx3("button", { type: "submit", className: "ya-send", disabled: text.trim().length < 3 || sending, "aria-label": "Send", children: /* @__PURE__ */ jsx3(IconSend, {}) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs3("div", { className: "ya-tools", children: [
+        /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            className: "ya-tool",
+            onClick: point,
+            onPointerEnter: () => void import("./capture-FYZGL54F.js"),
+            onFocus: () => void import("./capture-FYZGL54F.js"),
+            disabled: sending || shots.length >= MAX_SHOTS,
+            children: [
+              /* @__PURE__ */ jsx3(IconFrame, {}),
+              "Show us"
+            ]
+          }
+        ),
+        config?.canCredit && text.trim().length > 0 && /* @__PURE__ */ jsxs3("button", { type: "button", className: "ya-switch-row", role: "switch", "aria-checked": credit, onClick: () => setCredit((c) => !c), children: [
+          "Credit me when it ships",
+          /* @__PURE__ */ jsx3("span", { className: "ya-switch", "aria-hidden": "true" })
+        ] })
+      ] }),
+      shotError && /* @__PURE__ */ jsx3("p", { className: "ya-note", role: "alert", children: shotError }),
+      config?.watermark && /* @__PURE__ */ jsx3("p", { className: "ya-mark", children: "Feedback by YouAsked" })
+    ] })
+  ] });
+}
+function Section({
+  title,
+  action,
+  onAction,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3("section", { className: "ya-section", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "ya-section-head", children: [
+      /* @__PURE__ */ jsx3("h3", { children: title }),
+      action && /* @__PURE__ */ jsxs3("button", { type: "button", className: "ya-link", onClick: onAction, children: [
+        action,
+        /* @__PURE__ */ jsx3(IconChevron, {})
+      ] })
+    ] }),
+    children
+  ] });
+}
+var TABS = [
+  { key: "top", label: "Top", sort: "top", status: "active" },
+  { key: "new", label: "New", sort: "new", status: "active" },
+  { key: "shipped", label: "Shipped", sort: "new", status: "shipped" }
+];
+function Board({
+  initialTab,
+  setRoute,
+  onClose
+}) {
+  const { client, title } = useInternal();
+  const [tab, setTab] = useState2(TABS.find((t) => t.key === initialTab) ?? TABS[0]);
+  const { data, error } = useLoad(() => client.list(tab.sort, tab.status), [client, tab.key]);
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      Header,
+      {
+        title,
+        onBack: () => setRoute({ view: "home" }),
+        onClose,
+        right: /* @__PURE__ */ jsx3("button", { type: "button", className: "ya-link", onClick: () => setRoute({ view: "mine" }), children: "Yours" })
+      }
+    ),
+    /* @__PURE__ */ jsx3("div", { className: "ya-tabs", role: "tablist", "aria-label": "Sort requests", children: TABS.map((t) => /* @__PURE__ */ jsx3("button", { type: "button", role: "tab", className: "ya-tab", "aria-selected": tab.key === t.key, onClick: () => setTab(t), children: t.label }, t.key)) }),
+    /* @__PURE__ */ jsx3("div", { className: "ya-body", children: error ? /* @__PURE__ */ jsx3("p", { className: "ya-empty", children: errorText(error) }) : !data ? /* @__PURE__ */ jsx3(Skeleton, {}) : data.length === 0 ? /* @__PURE__ */ jsxs3("div", { className: "ya-empty", children: [
+      /* @__PURE__ */ jsx3("b", { children: tab.key === "shipped" ? "Nothing shipped yet" : "No requests yet" }),
+      tab.key === "shipped" ? "Requests show up here once they're live." : "Tell us what you'd like next. Others can vote on it."
+    ] }) : /* @__PURE__ */ jsx3("ul", { className: "ya-list", children: data.map((r) => /* @__PURE__ */ jsx3(RequestRow, { client, request: r, onOpen: () => setRoute({ view: "detail", id: r.id }) }, r.id)) }) }),
+    /* @__PURE__ */ jsx3("div", { className: "ya-foot", children: /* @__PURE__ */ jsxs3("button", { type: "button", className: "ya-btn", onClick: () => setRoute({ view: "home", focus: true }), children: [
+      /* @__PURE__ */ jsx3(IconPlus, {}),
+      "Request a feature"
+    ] }) })
+  ] });
+}
+function Detail({ id, setRoute, onClose }) {
+  const { client, config, markSeen, appName, appIcon } = useInternal();
+  const { data, error, setData } = useLoad(() => client.get(id), [client, id]);
+  const unseenHere = config?.unseen.filter((n) => n.requestId === id).map((n) => n.id).join(",") ?? "";
+  const loaded = useRef2(false);
+  loaded.current = Boolean(data);
+  useEffect2(() => {
+    if (!unseenHere) return;
+    markSeen(unseenHere.split(","));
+    if (loaded.current) {
+      client.get(id).then((d) => setData(d)).catch(() => {
+      });
+    }
+  }, [unseenHere, markSeen]);
+  const [reply, setReply] = useState2("");
+  const [sending, setSending] = useState2(false);
+  const [replyError, setReplyError] = useState2(null);
+  const [voted, setVoted] = useState2(null);
+  const [early, setEarly] = useState2(false);
+  useEffect2(() => setEarly(Boolean(data?.earlyAccess)), [data?.earlyAccess]);
+  const toggleEarly = async () => {
+    if (!data?.request) return;
+    const before = early;
+    setEarly(!before);
+    try {
+      setEarly((await client.earlyAccess(data.request.id)).earlyAccess);
+    } catch {
+      setEarly(before);
+    }
+  };
+  useEffect2(() => {
+    if (data?.redirect) setRoute({ view: "detail", id: data.redirect });
+  }, [data?.redirect, setRoute]);
+  const request = data?.request;
+  const comments = data?.comments ?? [];
+  const send = async (e) => {
+    e.preventDefault();
+    if (!reply.trim() || sending || !request) return;
+    setSending(true);
+    setReplyError(null);
+    try {
+      const c = await client.comment(request.id, reply);
+      setData({ ...data, comments: [...comments, c], request: { ...request, comments: request.comments + 1 } });
+      setReply("");
+    } catch (err) {
+      setReplyError(errorText(err instanceof YouAskedError ? err.code : "network"));
+    } finally {
+      setSending(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(Header, { title: "", onBack: () => setRoute({ view: "board" }), onClose }),
+    /* @__PURE__ */ jsx3("div", { className: "ya-body", children: error ? /* @__PURE__ */ jsx3("p", { className: "ya-empty", children: error === "not_found" ? "This request was removed." : errorText(error) }) : !request ? /* @__PURE__ */ jsx3(Skeleton, {}) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsxs3("div", { className: "ya-detail-meta", children: [
+        request.status !== "open" && /* @__PURE__ */ jsx3(StatusPill, { status: request.status }),
+        /* @__PURE__ */ jsxs3("span", { className: "ya-ref", children: [
+          "YA-",
+          request.number
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3("h3", { className: "ya-detail-title", children: request.title }),
+      request.body && request.body !== request.title && /* @__PURE__ */ jsx3("p", { className: "ya-text", children: request.body }),
+      data?.attachments && data.attachments.length > 0 && /* @__PURE__ */ jsx3("div", { className: "ya-attachments", children: data.attachments.map((a) => /* @__PURE__ */ jsx3("a", { href: a.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx3("img", { src: a.url, alt: "Screenshot attached to this request", loading: "lazy" }) }, a.id)) }),
+      /* @__PURE__ */ jsx3(BigVote, { client, request, onChange: setVoted }),
+      (request.status === "planned" || request.status === "in_progress") && (voted ?? request.voted) && /* @__PURE__ */ jsxs3("button", { type: "button", className: "ya-early", role: "switch", "aria-checked": early, onClick: toggleEarly, children: [
+        /* @__PURE__ */ jsx3("span", { className: "ya-card-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(IconSpark, {}) }),
+        /* @__PURE__ */ jsxs3("span", { className: "ya-menurow-text", children: [
+          /* @__PURE__ */ jsx3("span", { className: "ya-menurow-label", children: "Try it early" }),
+          /* @__PURE__ */ jsx3("span", { className: "ya-menurow-sub", children: early ? "You're on the list. We'll let you in first." : "Get access before everyone else" })
+        ] }),
+        /* @__PURE__ */ jsx3("span", { className: "ya-switch", "aria-hidden": "true" })
+      ] }),
+      request.mine && request.status !== "shipped" && /* @__PURE__ */ jsx3("p", { className: "ya-note", children: "You asked for this. We'll tell you here when it ships." }),
+      request.status === "shipped" && /* @__PURE__ */ jsxs3("div", { className: "ya-callout", "data-tone": "success", children: [
+        /* @__PURE__ */ jsx3(IconCheck, {}),
+        /* @__PURE__ */ jsxs3("span", { children: [
+          /* @__PURE__ */ jsx3("b", { children: "It's live." }),
+          request.shipNote ? ` ${request.shipNote}` : " Thanks for asking.",
+          request.creditName && /* @__PURE__ */ jsxs3("span", { className: "ya-credit", children: [
+            "Thanks to ",
+            request.creditName,
+            " for asking."
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3("p", { className: "ya-section-h", children: "Conversation" }),
+      comments.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "ya-text ya-text-muted", children: "No messages yet. Add details or ask a question below." }) : /* @__PURE__ */ jsx3("div", { className: "ya-thread", children: comments.map((c) => /* @__PURE__ */ jsx3(Message, { comment: c, appName, appIcon }, c.id)) })
+    ] }) }),
+    request && /* @__PURE__ */ jsxs3("form", { className: "ya-composer ya-composer-bar", onSubmit: send, children: [
+      /* @__PURE__ */ jsx3(
+        "textarea",
+        {
+          className: "ya-composer-input",
+          rows: 1,
+          value: reply,
+          onChange: (e) => setReply(e.target.value),
+          placeholder: "Message",
+          "aria-label": "Message",
+          maxLength: 1e3,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              e.currentTarget.form?.requestSubmit();
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx3("button", { type: "submit", className: "ya-send", disabled: !reply.trim() || sending, "aria-label": "Send comment", children: /* @__PURE__ */ jsx3(IconSend, {}) }),
+      replyError && /* @__PURE__ */ jsx3("span", { className: "ya-sr", role: "alert", children: replyError })
+    ] })
+  ] });
+}
+function Message({ comment, appName, appIcon }) {
+  const when = /* @__PURE__ */ jsx3("time", { dateTime: new Date(comment.createdAt).toISOString(), children: ago(comment.createdAt) });
+  if (comment.mine) {
+    return /* @__PURE__ */ jsxs3("div", { className: "ya-msg ya-msg-out", children: [
+      /* @__PURE__ */ jsx3("div", { className: "ya-bubble ya-bubble-out", children: comment.body }),
+      /* @__PURE__ */ jsx3("span", { className: "ya-msg-meta", children: when })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "ya-msg", children: [
+    comment.team && appIcon ? /* @__PURE__ */ jsx3(AppAvatar, { icon: appIcon, size: 26 }) : null,
+    /* @__PURE__ */ jsxs3("div", { className: "ya-msg-body", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "ya-msg-meta", children: [
+        /* @__PURE__ */ jsx3("b", { children: comment.team ? appName : comment.author || "Someone" }),
+        comment.team && /* @__PURE__ */ jsx3("span", { className: "ya-team", children: "Team" }),
+        when
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "ya-bubble ya-bubble-in", children: comment.body })
+    ] })
+  ] });
+}
+function Mine({ setRoute, onClose }) {
+  const { client } = useInternal();
+  const { data, error } = useLoad(() => client.mine(), [client]);
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(Header, { title: "Your requests", onBack: () => setRoute({ view: "board" }), onClose }),
+    /* @__PURE__ */ jsx3("div", { className: "ya-body", children: error ? /* @__PURE__ */ jsx3("p", { className: "ya-empty", children: errorText(error) }) : !data ? /* @__PURE__ */ jsx3(Skeleton, {}) : data.length === 0 ? /* @__PURE__ */ jsxs3("div", { className: "ya-empty", children: [
+      /* @__PURE__ */ jsx3("b", { children: "Nothing yet" }),
+      "Requests you post or vote on show up here, with their status."
+    ] }) : /* @__PURE__ */ jsx3("ul", { className: "ya-list", children: data.map((r) => /* @__PURE__ */ jsx3(RequestRow, { client, request: r, onOpen: () => setRoute({ view: "detail", id: r.id }) }, r.id)) }) }),
+    /* @__PURE__ */ jsx3("div", { className: "ya-foot", children: /* @__PURE__ */ jsxs3("button", { type: "button", className: "ya-btn", onClick: () => setRoute({ view: "home", focus: true }), children: [
+      /* @__PURE__ */ jsx3(IconPlus, {}),
+      "Request a feature"
+    ] }) })
+  ] });
+}
+
+// src/YouAsked.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_API_URL = "https://youasked-api.adenteo.workers.dev";
+function lastWhatsNew(key) {
+  try {
+    return key ? Number(localStorage.getItem(key)) || 0 : 0;
+  } catch {
+    return 0;
+  }
+}
+function coveredBy(news, n) {
+  return n.kind === "shipped" && Boolean(news?.items.some((i) => i.id === n.requestId));
+}
+function YouAsked({
+  appKey = "",
+  demo = false,
+  cards = true,
+  user,
+  signature,
+  ready = true,
+  appearance,
+  trigger = "floating",
+  position = "bottom-right",
+  label,
+  appName,
+  appIcon,
+  greeting,
+  title = "Feature requests",
+  offset,
+  apiUrl = DEFAULT_API_URL,
+  children
+}) {
+  const userId = user?.id;
+  const userEmail = user?.email;
+  const userName = user?.name;
+  const client = useMemo(
+    () => demo ? createDemoClient(appName) : createClient({ appKey, apiUrl, user: userId == null ? null : { id: userId, email: userEmail, name: userName }, signature }),
+    [demo, appName, appKey, apiUrl, userId, userEmail, userName, signature]
+  );
+  const whatsNewKey = demo ? null : `youasked:whats-new:${appKey}:${userId ?? "anon"}`;
+  const [mounted, setMounted] = useState3(false);
+  const [route, setRoute] = useState3(null);
+  const [config, setConfig] = useState3(null);
+  const [whatsNew, setWhatsNew] = useState3(null);
+  const [whatsNewToast, setWhatsNewToast] = useState3(false);
+  const [capture, setCapture] = useState3(null);
+  const tokens = useTokens(appearance, mounted);
+  const openerRef = useRef3(null);
+  const [detectedIcon, setDetectedIcon] = useState3(null);
+  useEffect3(() => {
+    if (appIcon === void 0) setDetectedIcon(findPageIcon());
+  }, [appIcon]);
+  useEffect3(() => {
+    injectStyles();
+    setMounted(true);
+  }, []);
+  useEffect3(() => {
+    if (!ready) return;
+    let alive = true;
+    client.config().then((c) => {
+      if (!alive) return;
+      const seenAt = lastWhatsNew(whatsNewKey);
+      const items = c.whatsNew?.items.filter((i) => i.shippedAt > seenAt) ?? [];
+      const news = c.whatsNew && items.length ? { ...c.whatsNew, items } : null;
+      setConfig(c);
+      setWhatsNew(news);
+      setWhatsNewToast(Boolean(news) && c.unseen.filter((n) => !coveredBy(news, n)).length === 0);
+    }).catch(() => {
+    });
+    return () => {
+      alive = false;
+    };
+  }, [client, ready]);
+  useEffect3(() => {
+    if (!("onNotice" in client)) return;
+    return client.onNotice(
+      (n) => setConfig((c) => c ? { ...c, unseen: [...c.unseen, n] } : c)
+    );
+  }, [client]);
+  const dismissWhatsNew = useCallback2(() => {
+    setWhatsNew(null);
+    setWhatsNewToast(false);
+    try {
+      if (whatsNewKey) localStorage.setItem(whatsNewKey, String(Date.now()));
+    } catch {
+    }
+    client.whatsNewSeen().catch(() => {
+    });
+  }, [client, whatsNewKey]);
+  const pointAtIt = useCallback2(
+    () => new Promise((resolve, reject) => {
+      import("./capture-FYZGL54F.js").then(
+        (m) => setCapture({ Layer: m.default, resolve }),
+        (err) => reject(err)
+      );
+    }),
+    []
+  );
+  const open = useCallback2((options) => {
+    openerRef.current = document.activeElement;
+    setRoute(toRoute(options));
+  }, []);
+  const close = useCallback2(() => {
+    setRoute(null);
+    openerRef.current?.focus?.({ preventScroll: true });
+  }, []);
+  useEffect3(() => {
+    const onOpen = (e) => open(e.detail);
+    window.addEventListener("youasked:open", onOpen);
+    return () => window.removeEventListener("youasked:open", onOpen);
+  }, [open]);
+  const markSeen = useCallback2(
+    (ids) => {
+      if (!ids.length) return;
+      setConfig((c) => c ? { ...c, unseen: c.unseen.filter((n) => !ids.includes(n.id)) } : c);
+      client.seen(ids).catch(() => {
+      });
+    },
+    [client]
+  );
+  const scopeStyle = useMemo(
+    () => ({
+      ...tokens ? tokenStyle(tokens) : {},
+      ...offset !== void 0 ? { "--ya-offset": `${offset}px` } : {}
+    }),
+    [tokens, offset]
+  );
+  const unseen = config?.unseen ?? [];
+  const value = useMemo(
+    () => ({
+      open,
+      close,
+      isOpen: route !== null,
+      unseenCount: unseen.length,
+      client,
+      config,
+      markSeen,
+      whatsNew,
+      dismissWhatsNew,
+      pointAtIt,
+      scope: { className: "ya-scope", style: scopeStyle, "data-ya-mode": tokens?.mode },
+      appName: appName ?? config?.app.name ?? "us",
+      appIcon: appIcon === false ? null : appIcon ?? detectedIcon,
+      title,
+      greeting
+    }),
+    [open, close, route, unseen.length, client, config, markSeen, whatsNew, dismissWhatsNew, pointAtIt, scopeStyle, tokens?.mode, appName, appIcon, detectedIcon, title, greeting]
+  );
+  const standing = unseen.filter((n) => !coveredBy(whatsNew, n));
+  const notice = standing.find((n) => n.kind === "shipped") ?? standing.find((n) => n.kind === "reply");
+  return /* @__PURE__ */ jsxs4(YouAskedContext.Provider, { value, children: [
+    children,
+    mounted && createPortal(
+      /* @__PURE__ */ jsxs4("div", { className: "ya-scope", "data-ya-mode": tokens?.mode, "data-ya-skip": "", style: scopeStyle, children: [
+        trigger === "floating" && !capture && /* @__PURE__ */ jsx4(
+          Launcher,
+          {
+            position,
+            label,
+            isOpen: route !== null,
+            badge: unseen.length > 0,
+            onClick: () => route ? close() : open()
+          }
+        ),
+        cards && !notice && whatsNewToast && whatsNew && route === null && /* @__PURE__ */ jsx4(
+          WhatsNewToast,
+          {
+            news: whatsNew,
+            position,
+            trigger,
+            onOpen: () => open(),
+            onDismiss: dismissWhatsNew
+          }
+        ),
+        cards && notice && route === null && /* @__PURE__ */ jsx4(
+          ShippedToast,
+          {
+            notice,
+            position,
+            trigger,
+            onOpen: () => {
+              markSeen([notice.id]);
+              open({ requestId: notice.requestId });
+            },
+            onDismiss: () => markSeen([notice.id])
+          }
+        ),
+        route && /* @__PURE__ */ jsx4(
+          Panel,
+          {
+            route,
+            setRoute,
+            onClose: close,
+            position,
+            hasLauncher: trigger === "floating",
+            hidden: capture !== null
+          }
+        ),
+        capture && /* @__PURE__ */ jsx4(
+          capture.Layer,
+          {
+            onDone: (image) => {
+              capture.resolve(image);
+              setCapture(null);
+            },
+            onCancel: () => {
+              capture.resolve(null);
+              setCapture(null);
+            }
+          }
+        )
+      ] }),
+      document.body
+    )
+  ] });
+}
+function findPageIcon() {
+  const links = Array.from(document.querySelectorAll("link[rel~='icon'], link[rel~='apple-touch-icon']"));
+  const touch = links.find((l) => l.rel.includes("apple-touch-icon") && l.href);
+  if (touch) return touch.href;
+  const large = links.filter((l) => l.href && !/\.svg(\?|$)/i.test(l.href) && !/\.ico(\?|$)/i.test(l.href)).map((l) => ({ l, size: Math.max(0, ...(l.sizes?.value ?? "").split(/\s+/).map((v) => parseInt(v, 10) || 0)) })).filter((x) => x.size >= 96).sort((a, b) => b.size - a.size)[0];
+  return large?.l.href ?? null;
+}
+function useTokens(appearance, mounted) {
+  const key = JSON.stringify(appearance ?? {});
+  const [tokens, setTokens] = useState3(null);
+  useEffect3(() => {
+    if (!mounted) return;
+    const parsed = JSON.parse(key);
+    const update = () => setTokens(resolveTokens(parsed));
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "style"] });
+    const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+    media?.addEventListener?.("change", update);
+    return () => {
+      observer.disconnect();
+      media?.removeEventListener?.("change", update);
+    };
+  }, [key, mounted]);
+  return tokens;
+}
+function useMedia(query) {
+  const [matches, setMatches] = useState3(() => typeof window !== "undefined" && window.matchMedia(query).matches);
+  useEffect3(() => {
+    const m = window.matchMedia(query);
+    const on = () => setMatches(m.matches);
+    on();
+    m.addEventListener("change", on);
+    return () => m.removeEventListener("change", on);
+  }, [query]);
+  return matches;
+}
+function Panel({
+  route,
+  setRoute,
+  onClose,
+  position,
+  hasLauncher,
+  hidden
+}) {
+  const panelRef = useRef3(null);
+  const backdropRef = useRef3(null);
+  const [closing, setClosing] = useState3(false);
+  const isSheet = useMedia("(max-width: 639px)");
+  const reduceMotion = useMedia("(prefers-reduced-motion: reduce)");
+  const hiddenRef = useRef3(hidden);
+  hiddenRef.current = hidden;
+  const drag = useRef3(null);
+  const requestClose = useCallback2(() => {
+    if (reduceMotion) return onClose();
+    setClosing(true);
+    setTimeout(onClose, 200);
+  }, [onClose, reduceMotion]);
+  useEffect3(() => {
+    if (!isSheet) return;
+    const html = document.documentElement;
+    const previous = html.style.overflow;
+    html.style.overflow = "hidden";
+    return () => {
+      html.style.overflow = previous;
+    };
+  }, [isSheet]);
+  useEffect3(() => {
+    panelRef.current?.focus({ preventScroll: true });
+  }, []);
+  useEffect3(() => {
+    const onKey = (e) => {
+      if (hiddenRef.current) return;
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        requestClose();
+      }
+      if (e.key === "Tab" && panelRef.current) trapFocus(e, panelRef.current);
+    };
+    document.addEventListener("keydown", onKey, true);
+    return () => document.removeEventListener("keydown", onKey, true);
+  }, [requestClose]);
+  const onPointerDown = (e) => {
+    if (!isSheet || e.button !== 0) return;
+    const target = e.target;
+    if (!target.closest(".ya-grab-zone, .ya-head") || target.closest("button, input, textarea, a")) return;
+    const panel = panelRef.current;
+    drag.current = { startY: e.clientY, lastY: e.clientY, lastT: performance.now(), v: 0, dy: 0 };
+    panel.setPointerCapture(e.pointerId);
+    panel.style.transition = "none";
+    panel.style.animation = "none";
+  };
+  const onPointerMove = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    const panel = panelRef.current;
+    const raw = e.clientY - d.startY;
+    const dy = raw < 0 ? Math.max(-18, raw * 0.2) : raw;
+    const now = performance.now();
+    d.v = (e.clientY - d.lastY) / Math.max(1, now - d.lastT);
+    d.lastY = e.clientY;
+    d.lastT = now;
+    d.dy = dy;
+    panel.style.transform = `translateY(${dy}px)`;
+    if (backdropRef.current) backdropRef.current.style.opacity = String(1 - Math.max(0, dy) / panel.offsetHeight);
+  };
+  const onPointerUp = () => {
+    const d = drag.current;
+    if (!d) return;
+    drag.current = null;
+    const panel = panelRef.current;
+    const backdrop = backdropRef.current;
+    const h = panel.offsetHeight;
+    panel.style.transition = "transform .3s cubic-bezier(.2,.9,.3,1)";
+    if (backdrop) backdrop.style.transition = "opacity .3s";
+    if (d.dy > h * 0.25 || d.v > 0.5) {
+      panel.style.transform = `translateY(${h}px)`;
+      if (backdrop) backdrop.style.opacity = "0";
+      setTimeout(onClose, 260);
+    } else {
+      panel.style.transform = "";
+      if (backdrop) backdrop.style.opacity = "";
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "ya-overlay",
+      "data-pos": position,
+      "data-launcher": hasLauncher || void 0,
+      "data-closing": closing || void 0,
+      hidden,
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "ya-backdrop", ref: backdropRef, onClick: requestClose, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "ya-panel",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Feature requests",
+            tabIndex: -1,
+            ref: panelRef,
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: onPointerUp,
+            children: [
+              /* @__PURE__ */ jsx4("div", { className: "ya-grab-zone", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("div", { className: "ya-grab" }) }),
+              /* @__PURE__ */ jsx4(Navigator, { route, setRoute, onClose: requestClose })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function trapFocus(e, root) {
+  const items = Array.from(
+    root.querySelectorAll('button:not([disabled]), input, textarea, a[href], [tabindex]:not([tabindex="-1"])')
+  ).filter((el) => el.offsetParent !== null);
+  if (!items.length) return;
+  const first = items[0];
+  const last = items[items.length - 1];
+  if (e.shiftKey && (document.activeElement === first || document.activeElement === root)) {
+    e.preventDefault();
+    last.focus();
+  } else if (!e.shiftKey && document.activeElement === last) {
+    e.preventDefault();
+    first.focus();
+  }
+}
+function Launcher({
+  position,
+  label,
+  isOpen,
+  badge,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "button",
+    {
+      type: "button",
+      className: label && !isOpen ? "ya-fab ya-fab-label" : "ya-fab",
+      "data-pos": position,
+      "data-open": isOpen || void 0,
+      onClick,
+      "aria-label": isOpen ? "Close feature requests" : label || "Feature requests",
+      "aria-expanded": isOpen,
+      children: [
+        /* @__PURE__ */ jsx4("span", { className: "ya-fab-icon", children: isOpen ? /* @__PURE__ */ jsx4(IconClose, {}) : /* @__PURE__ */ jsx4(IconIdea, {}) }),
+        label && !isOpen && /* @__PURE__ */ jsx4("span", { children: label }),
+        badge && !isOpen && /* @__PURE__ */ jsx4("span", { className: "ya-dot", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+function ShippedToast({
+  notice,
+  position,
+  trigger,
+  onOpen,
+  onDismiss
+}) {
+  return /* @__PURE__ */ jsx4("div", { className: "ya-toast", role: "status", "data-pos": position, "data-trigger": trigger, children: notice.kind === "reply" ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4("div", { className: "ya-toast-top", children: [
+      /* @__PURE__ */ jsx4("p", { className: "ya-toast-kicker", children: "New reply about" }),
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "ya-icon-btn", onClick: onDismiss, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx4(IconClose, {}) })
+    ] }),
+    /* @__PURE__ */ jsx4("p", { className: "ya-toast-title", children: notice.title }),
+    /* @__PURE__ */ jsx4("p", { className: "ya-toast-note ya-toast-quote", children: notice.reply }),
+    /* @__PURE__ */ jsxs4("div", { className: "ya-toast-actions", children: [
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "ya-btn ya-btn-sm", onClick: onOpen, children: "Reply" }),
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "ya-btn ya-btn-sm ya-btn-ghost", onClick: onDismiss, children: "Later" })
+    ] })
+  ] }) : /* @__PURE__ */ jsx4(ShippedBody, { notice, onOpen, onDismiss }) });
+}
+function WhatsNewToast({
+  news,
+  position,
+  trigger,
+  onOpen,
+  onDismiss
+}) {
+  const mine = news.items.some((i) => i.mine);
+  return /* @__PURE__ */ jsxs4("div", { className: "ya-toast", role: "status", "data-pos": position, "data-trigger": trigger, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "ya-toast-top", children: [
+      /* @__PURE__ */ jsx4("p", { className: "ya-toast-kicker", children: "What's new" }),
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "ya-icon-btn", onClick: onDismiss, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx4(IconClose, {}) })
+    ] }),
+    /* @__PURE__ */ jsx4("p", { className: "ya-toast-title", children: whatsNewHeading(news.total) }),
+    mine && /* @__PURE__ */ jsxs4("div", { className: "ya-live", children: [
+      /* @__PURE__ */ jsx4(IconCheck, {}),
+      "Including something you asked for"
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "ya-toast-actions", children: [
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "ya-btn ya-btn-sm", onClick: onOpen, children: "See what's new" }),
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "ya-btn ya-btn-sm ya-btn-ghost", onClick: onDismiss, children: "Not now" })
+    ] })
+  ] });
+}
+function ShippedBody({ notice, onOpen, onDismiss }) {
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4("div", { className: "ya-toast-top", children: [
+      /* @__PURE__ */ jsx4("p", { className: "ya-toast-kicker", children: "You asked for" }),
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "ya-icon-btn", onClick: onDismiss, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx4(IconClose, {}) })
+    ] }),
+    /* @__PURE__ */ jsx4("p", { className: "ya-toast-title", children: notice.title }),
+    /* @__PURE__ */ jsxs4("div", { className: "ya-live", children: [
+      /* @__PURE__ */ jsx4(IconCheck, {}),
+      "It's live"
+    ] }),
+    notice.shipNote && /* @__PURE__ */ jsx4("p", { className: "ya-toast-note", children: notice.shipNote }),
+    /* @__PURE__ */ jsxs4("div", { className: "ya-toast-actions", children: [
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "ya-btn ya-btn-sm", onClick: onOpen, children: "See it" }),
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "ya-btn ya-btn-sm ya-btn-ghost", onClick: onDismiss, children: "Nice" })
+    ] })
+  ] });
+}
+
+// src/entries.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function useScope(className, style) {
+  const { scope } = useInternal();
+  return {
+    className: `${scope.className} ya-inline${className ? ` ${className}` : ""}`,
+    style: { ...scope.style, ...style },
+    "data-ya-mode": scope["data-ya-mode"]
+  };
+}
+function AskBar({ placeholder = "Ask for a feature\u2026", className, style }) {
+  const { open, appIcon, unseenCount } = useInternal();
+  return /* @__PURE__ */ jsx5("div", { ...useScope(className, style), children: /* @__PURE__ */ jsxs5("button", { type: "button", className: "ya-askbar", onClick: () => open({ view: "new" }), children: [
+    appIcon ? /* @__PURE__ */ jsx5(AppAvatar, { icon: appIcon, size: 30 }) : /* @__PURE__ */ jsx5("span", { className: "ya-askbar-glyph", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(IconIdea, {}) }),
+    /* @__PURE__ */ jsx5("span", { className: "ya-askbar-text", children: placeholder }),
+    unseenCount > 0 && /* @__PURE__ */ jsx5("span", { className: "ya-badge", children: unseenCount }),
+    /* @__PURE__ */ jsx5("span", { className: "ya-askbar-send", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(IconSend, {}) })
+  ] }) });
+}
+function FeatureCard({
+  heading = "Shape what's next",
+  description = "Vote on ideas or suggest your own",
+  limit = 3,
+  className,
+  style
+}) {
+  const { client, open, config, markSeen } = useInternal();
+  const { data } = useLoad(() => client.list("top", "active"), [client]);
+  const notice = config?.unseen.find((n) => n.kind === "shipped");
+  return /* @__PURE__ */ jsx5("div", { ...useScope(className, style), children: /* @__PURE__ */ jsxs5("section", { className: "ya-card", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "ya-card-head", children: [
+      /* @__PURE__ */ jsx5("span", { className: "ya-card-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(IconIdea, {}) }),
+      /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx5("h3", { className: "ya-card-title", children: heading }),
+        /* @__PURE__ */ jsx5("p", { className: "ya-card-sub", children: description })
+      ] })
+    ] }),
+    notice && /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        className: "ya-card-win",
+        onClick: () => {
+          markSeen([notice.id]);
+          open({ requestId: notice.requestId });
+        },
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: "ya-shipped-dot", children: /* @__PURE__ */ jsx5(IconCheck, {}) }),
+          /* @__PURE__ */ jsxs5("span", { children: [
+            "You asked for ",
+            /* @__PURE__ */ jsx5("b", { children: notice.title }),
+            ". It's live."
+          ] }),
+          /* @__PURE__ */ jsx5(IconChevron, {})
+        ]
+      }
+    ),
+    !data ? /* @__PURE__ */ jsx5(Skeleton, { rows: 2 }) : data.length > 0 ? /* @__PURE__ */ jsx5("ul", { className: "ya-list", children: data.slice(0, limit).map((r) => /* @__PURE__ */ jsx5(RequestRow, { client, request: r, compact: true, onOpen: () => open({ requestId: r.id }) }, r.id)) }) : null,
+    /* @__PURE__ */ jsxs5("div", { className: "ya-card-actions", children: [
+      /* @__PURE__ */ jsx5("button", { type: "button", className: "ya-btn ya-btn-sm", onClick: () => open({ view: "new" }), children: "Suggest an idea" }),
+      data && data.length > limit && /* @__PURE__ */ jsxs5("button", { type: "button", className: "ya-btn ya-btn-sm ya-btn-ghost", onClick: () => open({ view: "board" }), children: [
+        "See all ",
+        data.length
+      ] })
+    ] })
+  ] }) });
+}
+function RequestButton({
+  variant = "pill",
+  label = "Request a feature",
+  sublabel = "Vote on what we build next",
+  className,
+  style
+}) {
+  const { open, unseenCount } = useInternal();
+  const scope = useScope(className, style);
+  const badge = unseenCount > 0 && (variant === "icon" ? /* @__PURE__ */ jsx5("span", { className: "ya-dot", "aria-hidden": "true" }) : /* @__PURE__ */ jsx5("span", { className: "ya-badge", children: unseenCount }));
+  if (variant === "icon") {
+    return /* @__PURE__ */ jsx5("span", { ...scope, children: /* @__PURE__ */ jsxs5("button", { type: "button", className: "ya-iconbtn", onClick: () => open(), "aria-label": label, children: [
+      /* @__PURE__ */ jsx5(IconIdea, {}),
+      badge
+    ] }) });
+  }
+  if (variant === "row") {
+    return /* @__PURE__ */ jsx5("div", { ...scope, children: /* @__PURE__ */ jsxs5("button", { type: "button", className: "ya-menurow", onClick: () => open(), children: [
+      /* @__PURE__ */ jsx5("span", { className: "ya-card-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(IconIdea, {}) }),
+      /* @__PURE__ */ jsxs5("span", { className: "ya-menurow-text", children: [
+        /* @__PURE__ */ jsx5("span", { className: "ya-menurow-label", children: label }),
+        sublabel && /* @__PURE__ */ jsx5("span", { className: "ya-menurow-sub", children: sublabel })
+      ] }),
+      badge,
+      /* @__PURE__ */ jsx5(IconChevron, {})
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx5("span", { ...scope, children: /* @__PURE__ */ jsxs5("button", { type: "button", className: "ya-pillbtn", onClick: () => open(), children: [
+    /* @__PURE__ */ jsx5(IconIdea, {}),
+    label,
+    badge
+  ] }) });
+}
+function AskAbout({
+  topic,
+  prompt,
+  className,
+  style
+}) {
+  const { open } = useInternal();
+  return /* @__PURE__ */ jsx5("span", { ...useScope(className, style), children: /* @__PURE__ */ jsxs5("button", { type: "button", className: "ya-askabout", onClick: () => open({ view: "new", topic }), children: [
+    /* @__PURE__ */ jsx5(IconIdea, {}),
+    prompt ?? `Want more from ${topic}?`
+  ] }) });
+}
+function AskForIt({ query, className, style }) {
+  const { open } = useInternal();
+  const q = query.trim();
+  const shown = q.length > 40 ? `${q.slice(0, 39).trimEnd()}\u2026` : q;
+  return /* @__PURE__ */ jsx5("span", { ...useScope(className, style), children: /* @__PURE__ */ jsxs5("button", { type: "button", className: "ya-askforit", onClick: () => open({ view: "new", draft: q, topic: "search" }), children: [
+    /* @__PURE__ */ jsx5("span", { children: shown ? `Can't find \u201C${shown}\u201D?` : "Can't find it?" }),
+    /* @__PURE__ */ jsxs5("b", { children: [
+      "Ask for it",
+      /* @__PURE__ */ jsx5(IconChevron, {})
+    ] })
+  ] }) });
+}
+function FeatureBoard({
+  start = "home",
+  height = "min(720px, 80vh)",
+  className,
+  style
+}) {
+  const [route, setRoute] = useState4(start === "board" ? { view: "board" } : { view: "home" });
+  return /* @__PURE__ */ jsx5("div", { ...useScope(className, style), children: /* @__PURE__ */ jsx5("div", { className: "ya-embed", style: { height }, children: /* @__PURE__ */ jsx5(Navigator, { route, setRoute }) }) });
+}
+export {
+  AskAbout,
+  AskBar,
+  AskForIt,
+  DEFAULT_API_URL,
+  FeatureBoard,
+  FeatureCard,
+  RequestButton,
+  YouAsked,
+  openYouAsked,
+  useYouAsked
+};