@myna-sh/react 0.14.0 → 0.16.0

package/README.md

@@ -1,8 +1,13 @@
 # @myna-sh/react
 
-React hooks for reading [Myna](https://myna.sh) content.
+React bindings for [Myna](https://myna.sh): content hooks, and the reporter's side of Myna Feedback.
 
-A thin layer over [`@myna-sh/sdk`](https://www.npmjs.com/package/@myna-sh/sdk) with no dependencies of its own: request sharing, loading and error state, stale-while-revalidate, preview-token propagation, and Suspense support.
+A thin layer over [`@myna-sh/sdk`](https://www.npmjs.com/package/@myna-sh/sdk) with no dependencies of its own. Two entry points:
+
+| Import | What it is |
+| --- | --- |
+| `@myna-sh/react` | Content hooks: request sharing, stale-while-revalidate, preview propagation, Suspense |
+| `@myna-sh/react/feedback` | Unstyled components and hooks for filing a bug report and following the answer |
 
 ## Install
 
@@ -80,6 +85,32 @@ Each returns `{ data, error, isLoading, isValidating, refetch }` and accepts the
 
 If your app already uses TanStack Query or SWR, call `@myna-sh/sdk` from it directly rather than adding these hooks — two caches holding the same content will disagree.
 
+## Feedback
+
+`@myna-sh/react/feedback` renders the board's own intake form, the reports somebody has filed, and the thread where they read the answer and say whether it worked. It runs inside your product: Myna serves no reporter-facing page.
+
+```tsx
+import { FeedbackProvider, ReportForm, MyReports, ReportThread } from "@myna-sh/react/feedback";
+import "@myna-sh/react/feedback.css"; // optional
+
+<FeedbackProvider
+  ingestKey="myna_ik_…"
+  board="bugs"
+  identify={{ id: user.id, email: user.email, signature }}
+  context={() => ({ appVersion: BUILD.version, route: location.pathname })}
+>
+  <ReportForm onSubmitted={(r) => setOpen(r.number)} />
+  <MyReports onSelect={setOpen} />
+  {open ? <ReportThread number={open} /> : null}
+</FeedbackProvider>;
+```
+
+`signature` comes from your own server — `signIdentity` in `@myna-sh/sdk/feedback/server`. Without it a report can still be filed, but nothing can be read back: an unsigned claim about who somebody is would let any visitor read another person's reports.
+
+Headless hooks — `useFeedback`, `useBoardSchema`, `useSubmitReport`, `useMyReports`, `useReport` — are exported for anyone rendering their own.
+
+Every element is unstyled and carries a `data-myna` attribute. The optional stylesheet is a starting point driven by `--myna-accent`, `--myna-radius` and `--myna-font`; everything else inherits from the surface around it. See [React feedback components](https://docs.myna.sh/sdk/react-feedback).
+
 ## Links
 
 - [Myna](https://myna.sh)

package/dist/feedback/index.d.ts

@@ -0,0 +1,157 @@
+import { ReactNode } from 'react';
+import { IdentifyOptions, FeedbackOptions, FeedbackClient, SubmitInput, SubmitResult, BoardSchema, MyReportSummary, MyReport } from '@myna-sh/sdk/feedback';
+export { BoardFormField, BoardSchema, FeedbackClient, FeedbackError, IdentifyOptions, MyReport, MyReportSummary, SubmitInput, SubmitResult } from '@myna-sh/sdk/feedback';
+
+interface FeedbackProviderProps {
+    /** A publishable ingest key (`myna_ik_...`). Safe to ship in your bundle. */
+    ingestKey: string;
+    /** Override for self-hosted or staging deployments. */
+    apiUrl?: string;
+    /** Which board to file on. Required when the key is not bound to one. */
+    board?: string;
+    /**
+     * Who is using your application, signed by your own backend.
+     *
+     * Pass it once you know, and pass `undefined` when they sign out. Without it
+     * a report can still be filed (unless the board requires identity) but
+     * nothing can be read back — an unsigned claim about who somebody is would
+     * otherwise let any visitor read another person's reports.
+     */
+    identify?: IdentifyOptions;
+    /**
+     * Environment attached to every report — app version, commit, route.
+     * A function is re-read on each submission, so a single-page app can report
+     * the route the user is actually on.
+     */
+    context?: FeedbackOptions["context"];
+    children: ReactNode;
+}
+/**
+ * Provide a feedback client to the components and hooks below.
+ *
+ * The client is memoized on the values that change how it talks to Myna, and
+ * **not** on `identify` — a signature is refreshed by your backend more often
+ * than a key changes, and rebuilding the client on each one would discard
+ * nothing useful while making every child re-render. The identity is pushed
+ * into the existing client instead, in an effect, so signing in mid-session
+ * takes effect without a remount.
+ */
+declare function FeedbackProvider({ ingestKey, apiUrl, board, identify, context, children, }: FeedbackProviderProps): ReactNode;
+
+declare function useFeedback(): FeedbackClient;
+
+/**
+ * Headless hooks over the feedback client.
+ *
+ * Deliberately thinner than `useMyna*` on the content side. Content reads are
+ * shared, cached and revalidated because a page renders dozens of them; a
+ * feedback surface renders one form and one list, and a cache would mostly add
+ * a way for a reporter to see a stale answer to the question they just asked.
+ * So: a request, loading and error state, and an explicit `refresh`.
+ */
+interface AsyncResult<T> {
+    data: T | undefined;
+    error: Error | undefined;
+    isLoading: boolean;
+    refresh: () => void;
+}
+
+/**
+ * The board's intake form.
+ *
+ * Every question the board asks, in the order it asks them — including the ones
+ * that fill the report's own title, body and reply address. Render the list and
+ * you have rendered the whole form; there is no question you are expected to
+ * supply yourself.
+ */
+declare function useBoardSchema(board?: string): AsyncResult<BoardSchema>;
+interface SubmitState {
+    submit: (input: SubmitInput) => Promise<SubmitResult>;
+    isSubmitting: boolean;
+    error: Error | undefined;
+    /** The last successful submission, so a form can say which number it filed. */
+    result: SubmitResult | undefined;
+    reset: () => void;
+}
+/**
+ * File a report.
+ *
+ * `submit` resolves with the report number and rejects with the `FeedbackError`
+ * the API answered — its `fields` record is keyed by path, so validation
+ * messages bind straight back to your inputs.
+ */
+declare function useSubmitReport(): SubmitState;
+/**
+ * The reports this identity has filed.
+ *
+ * Empty until `FeedbackProvider` has an `identify`, because there is no such
+ * thing as an anonymous reporter's report list — the request would have nobody
+ * to be about.
+ */
+declare function useMyReports(): AsyncResult<MyReportSummary[]>;
+/** One of their reports, with the public conversation and the actions on it. */
+declare function useReport(number: number | undefined): AsyncResult<MyReport> & {
+    reply: (message: string) => Promise<void>;
+    confirm: (message?: string) => Promise<void>;
+    reopen: (reason?: string) => Promise<void>;
+    isActing: boolean;
+};
+
+interface ReportFormProps {
+    /** Which board to file on. Required when the ingest key is not bound to one. */
+    board?: string;
+    /** Called with the report number after a successful submission. */
+    onSubmitted?: (result: SubmitResult) => void;
+    /** Rendered instead of the form once something has been filed. */
+    success?: (result: SubmitResult) => ReactNode;
+    /** Text for the parts the board does not declare. */
+    labels?: Partial<Record<"submit" | "submitting" | "sent" | "loading" | "unavailable", string>>;
+}
+/**
+ * The board's own intake form.
+ *
+ * Every question comes from the board, in the order the board asks them,
+ * including the ones that produce the report's title, description and reply
+ * address. Nothing here is hardcoded, which is what stops this component and
+ * your own hand-written form from asking the same board two different things.
+ *
+ * The consequence is that the form arrives one round trip late, and this
+ * renders a status line until it does. A form that has to be corrected after it
+ * appears is worse than one that appears a moment later.
+ */
+declare function ReportForm({ board, onSubmitted, success, labels }: ReportFormProps): ReactNode;
+interface MyReportsProps {
+    /** Rendered for each report. Without it, each row is a plain button. */
+    children?: (report: {
+        number: number;
+        title: string;
+        status: string;
+        awaitingYou: boolean;
+    }) => ReactNode;
+    onSelect?: (number: number) => void;
+    empty?: ReactNode;
+}
+/**
+ * Everything this reporter has filed.
+ *
+ * Needs a signed identity on the provider. Without one it renders the empty
+ * state rather than an error, because "you have not reported anything" is what
+ * a signed-out visitor should see — not a sentence about HMAC.
+ */
+declare function MyReports({ children, onSelect, empty }: MyReportsProps): ReactNode;
+interface ReportThreadProps {
+    number: number;
+    /** Text for the parts of the thread the board does not declare. */
+    labels?: Partial<Record<"reply" | "sending" | "placeholder" | "worksNow" | "stillBroken" | "loading", string>>;
+}
+/**
+ * One report and its conversation, with the two buttons the product exists for.
+ *
+ * "It works now" and "Still broken" appear only while `awaitingYou` — the team
+ * has changed something and asked this person to check. Showing them all the
+ * time would invite a reporter to close a report nobody has looked at yet, and
+ * the confirmation would then mean nothing.
+ */
+declare function ReportThread({ number, labels }: ReportThreadProps): ReactNode;
+
+export { type AsyncResult, FeedbackProvider, type FeedbackProviderProps, MyReports, type MyReportsProps, ReportForm, type ReportFormProps, ReportThread, type ReportThreadProps, type SubmitState, useBoardSchema, useFeedback, useMyReports, useReport, useSubmitReport };

package/dist/feedback/index.js

@@ -0,0 +1,422 @@
+// src/feedback/provider.tsx
+import { useEffect, useMemo } from "react";
+import { createFeedback } from "@myna-sh/sdk/feedback";
+
+// src/feedback/context.ts
+import { createContext, useContext } from "react";
+var FeedbackContext = createContext(null);
+function useFeedback() {
+  const client = useContext(FeedbackContext);
+  if (!client) {
+    throw new Error(
+      'No Myna feedback client in context. Wrap this tree in <FeedbackProvider ingestKey="myna_ik_...">.'
+    );
+  }
+  return client;
+}
+
+// src/feedback/provider.tsx
+import { jsx } from "react/jsx-runtime";
+function FeedbackProvider({
+  ingestKey,
+  apiUrl,
+  board,
+  identify,
+  context,
+  children
+}) {
+  const client = useMemo(
+    () => createFeedback({ ingestKey, apiUrl, board, context, identify }),
+    // `context` is deliberately absent: it is usually an inline object or an
+    // arrow function, so including it would rebuild the client on every render.
+    // The client re-reads a function form on each submission anyway.
+    [ingestKey, apiUrl, board]
+  );
+  const identityKey = identify ? JSON.stringify(identify) : "";
+  useEffect(() => {
+    client.identify(identify ?? null);
+  }, [client, identityKey]);
+  return /* @__PURE__ */ jsx(FeedbackContext.Provider, { value: client, children });
+}
+
+// src/feedback/hooks.ts
+import { useCallback, useEffect as useEffect2, useRef, useState } from "react";
+function useAsync(run, deps, enabled = true) {
+  const [data, setData] = useState();
+  const [error, setError] = useState();
+  const [isLoading, setLoading] = useState(enabled);
+  const [nonce, setNonce] = useState(0);
+  const live = useRef(true);
+  useEffect2(() => {
+    live.current = true;
+    return () => {
+      live.current = false;
+    };
+  }, []);
+  useEffect2(() => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
+    let current = true;
+    setLoading(true);
+    run().then((value) => {
+      if (!current || !live.current) return;
+      setData(value);
+      setError(void 0);
+    }).catch((err) => {
+      if (!current || !live.current) return;
+      setError(err instanceof Error ? err : new Error(String(err)));
+    }).finally(() => {
+      if (current && live.current) setLoading(false);
+    });
+    return () => {
+      current = false;
+    };
+  }, [...deps, enabled, nonce]);
+  return { data, error, isLoading, refresh: useCallback(() => setNonce((n) => n + 1), []) };
+}
+function useBoardSchema(board) {
+  const client = useFeedback();
+  return useAsync(() => client.schema(board), [client, board]);
+}
+function useSubmitReport() {
+  const client = useFeedback();
+  const [isSubmitting, setSubmitting] = useState(false);
+  const [error, setError] = useState();
+  const [result, setResult] = useState();
+  const submit = useCallback(
+    async (input) => {
+      setSubmitting(true);
+      setError(void 0);
+      try {
+        const value = await client.submit(input);
+        setResult(value);
+        return value;
+      } catch (err) {
+        const wrapped = err instanceof Error ? err : new Error(String(err));
+        setError(wrapped);
+        throw wrapped;
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [client]
+  );
+  const reset = useCallback(() => {
+    setError(void 0);
+    setResult(void 0);
+  }, []);
+  return { submit, isSubmitting, error, result, reset };
+}
+function useMyReports() {
+  const client = useFeedback();
+  return useAsync(() => client.myReports(), [client]);
+}
+function useReport(number) {
+  const client = useFeedback();
+  const query = useAsync(
+    () => client.report(number),
+    [client, number],
+    number !== void 0
+  );
+  const [isActing, setActing] = useState(false);
+  const { refresh } = query;
+  const act = useCallback(
+    async (run) => {
+      if (number === void 0) return;
+      setActing(true);
+      try {
+        await run(client, number);
+        refresh();
+      } finally {
+        setActing(false);
+      }
+    },
+    [client, number, refresh]
+  );
+  return {
+    ...query,
+    isActing,
+    reply: (message) => act((c, n) => c.reply(n, message)),
+    confirm: (message) => act((c, n) => c.confirm(n, message)),
+    reopen: (reason) => act((c, n) => c.reopen(n, reason))
+  };
+}
+
+// src/feedback/components.tsx
+import { useMemo as useMemo2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function when(iso) {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString();
+}
+var EVENT_TEXT = {
+  created: "You reported this.",
+  status_changed: "We changed its status.",
+  retest_requested: "We think this is fixed \u2014 can you confirm?",
+  reopened: "Reopened.",
+  merged: "We linked this to another report of the same problem.",
+  link_added: "We linked a fix.",
+  attachment_added: "A file was attached."
+};
+function eventText(kind) {
+  return EVENT_TEXT[kind] ?? kind.replaceAll("_", " ");
+}
+function humanize(key) {
+  const words = key.replaceAll(/[_-]+/g, " ").trim();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+function labelOf(field) {
+  return field.label ?? humanize(field.key);
+}
+function inputType(field) {
+  switch (field.type) {
+    case "number":
+      return "number";
+    case "boolean":
+      return "checkbox";
+    case "date":
+      return "date";
+    case "email":
+      return "email";
+    default:
+      return "text";
+  }
+}
+var FORM_TEXT = {
+  submit: "Send report",
+  submitting: "Sending\u2026",
+  sent: "Thanks \u2014 your report was received.",
+  loading: "Loading the form\u2026",
+  unavailable: "This form could not be loaded. Try again shortly."
+};
+function ReportForm({ board, onSubmitted, success, labels }) {
+  const text = { ...FORM_TEXT, ...labels };
+  const schema = useBoardSchema(board);
+  const submission = useSubmitReport();
+  const [values, setValues] = useState2({});
+  const [files, setFiles] = useState2([]);
+  const fields = schema.data?.fields ?? [];
+  const fieldErrors = useMemo2(() => {
+    const error = submission.error;
+    return error?.fields ?? {};
+  }, [submission.error]);
+  if (schema.isLoading) {
+    return /* @__PURE__ */ jsx2("p", { "data-myna": "status", role: "status", children: text.loading });
+  }
+  if (schema.error || !schema.data) {
+    return /* @__PURE__ */ jsx2("p", { "data-myna": "status", "data-myna-state": "error", role: "status", children: text.unavailable });
+  }
+  if (submission.result) {
+    return /* @__PURE__ */ jsx2("div", { "data-myna": "sent", role: "status", children: success ? success(submission.result) : /* @__PURE__ */ jsx2("p", { children: text.sent }) });
+  }
+  const onSubmit = (event) => {
+    event.preventDefault();
+    let title = "";
+    let body;
+    let email;
+    const custom = {};
+    for (const field of fields) {
+      if (field.target === "attachments") continue;
+      const raw = values[field.key];
+      if (field.type === "boolean") {
+        custom[field.key] = raw === true;
+        continue;
+      }
+      const value = typeof raw === "string" ? raw.trim() : "";
+      if (field.target === "title") title = value;
+      else if (field.target === "body") body = value || void 0;
+      else if (field.target === "reporterEmail") email = value || void 0;
+      else if (value !== "") custom[field.key] = field.type === "number" ? Number(value) : value;
+    }
+    void submission.submit({
+      board,
+      title,
+      body,
+      reporter: email ? { email } : void 0,
+      fields: Object.keys(custom).length > 0 ? custom : void 0,
+      attachments: files.length > 0 ? files : void 0
+    }).then((result) => onSubmitted?.(result)).catch(() => void 0);
+  };
+  return /* @__PURE__ */ jsxs("form", { "data-myna": "form", onSubmit, noValidate: true, children: [
+    fields.map((field) => /* @__PURE__ */ jsx2(
+      Question,
+      {
+        field,
+        value: values[field.key],
+        error: fieldErrors[field.key] ?? fieldErrors[`fields.${field.key}`],
+        onChange: (v) => setValues((prev) => ({ ...prev, [field.key]: v })),
+        onFiles: setFiles
+      },
+      field.key
+    )),
+    submission.error && Object.keys(fieldErrors).length === 0 ? /* @__PURE__ */ jsx2("p", { "data-myna": "error", role: "alert", children: submission.error.message }) : null,
+    /* @__PURE__ */ jsx2("button", { "data-myna": "submit", type: "submit", disabled: submission.isSubmitting, children: submission.isSubmitting ? text.submitting : text.submit })
+  ] });
+}
+function Question({
+  field,
+  value,
+  error,
+  onChange,
+  onFiles
+}) {
+  const id = `myna-${field.key}`;
+  const label = labelOf(field);
+  const control = field.target === "attachments" ? /* @__PURE__ */ jsx2(
+    "input",
+    {
+      id,
+      "data-myna": "input",
+      type: "file",
+      multiple: field.max !== 1,
+      required: field.required,
+      onChange: (e) => onFiles(Array.from(e.target.files ?? []))
+    }
+  ) : field.type === "markdown" ? /* @__PURE__ */ jsx2(
+    "textarea",
+    {
+      id,
+      "data-myna": "input",
+      rows: 4,
+      required: field.required,
+      placeholder: field.placeholder,
+      value: typeof value === "string" ? value : "",
+      onChange: (e) => onChange(e.target.value)
+    }
+  ) : field.type === "boolean" ? /* @__PURE__ */ jsx2(
+    "input",
+    {
+      id,
+      "data-myna": "input",
+      type: "checkbox",
+      checked: value === true,
+      onChange: (e) => onChange(e.target.checked)
+    }
+  ) : /* @__PURE__ */ jsx2(
+    "input",
+    {
+      id,
+      "data-myna": "input",
+      type: inputType(field),
+      required: field.required,
+      placeholder: field.placeholder,
+      value: typeof value === "string" ? value : "",
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { "data-myna": "field", "data-myna-field": field.key, children: [
+    /* @__PURE__ */ jsx2("label", { "data-myna": "label", htmlFor: id, children: label }),
+    control,
+    field.help ? /* @__PURE__ */ jsx2("small", { "data-myna": "help", children: field.help }) : null,
+    error ? /* @__PURE__ */ jsx2("small", { "data-myna": "field-error", role: "alert", children: error }) : null
+  ] });
+}
+function MyReports({ children, onSelect, empty }) {
+  const { data, error, isLoading } = useMyReports();
+  if (isLoading) return /* @__PURE__ */ jsx2("p", { "data-myna": "status", role: "status", children: "Loading\u2026" });
+  if (error || !data || data.length === 0) {
+    return /* @__PURE__ */ jsx2("div", { "data-myna": "empty", children: empty ?? /* @__PURE__ */ jsx2("p", { children: "No reports yet." }) });
+  }
+  return /* @__PURE__ */ jsx2("ul", { "data-myna": "my-reports", children: data.map((report) => /* @__PURE__ */ jsxs("li", { "data-myna": "my-report", "data-myna-status": report.status, children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", "data-myna": "my-report-link", onClick: () => onSelect?.(report.number), children: children ? children(report) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { "data-myna": "my-report-number", children: [
+        "#",
+        report.number
+      ] }),
+      /* @__PURE__ */ jsx2("span", { "data-myna": "my-report-title", children: report.title }),
+      /* @__PURE__ */ jsx2("span", { "data-myna": "my-report-status", children: report.status.replaceAll("_", " ") })
+    ] }) }),
+    report.awaitingYou ? /* @__PURE__ */ jsx2("span", { "data-myna": "awaiting-you", children: "Waiting on you" }) : null
+  ] }, report.number)) });
+}
+var THREAD_TEXT = {
+  reply: "Send",
+  sending: "Sending\u2026",
+  placeholder: "Add a reply\u2026",
+  worksNow: "It works now",
+  stillBroken: "Still broken",
+  loading: "Loading\u2026"
+};
+function ReportThread({ number, labels }) {
+  const text = { ...THREAD_TEXT, ...labels };
+  const report = useReport(number);
+  const [draft, setDraft] = useState2("");
+  if (report.isLoading) return /* @__PURE__ */ jsx2("p", { "data-myna": "status", role: "status", children: text.loading });
+  if (report.error || !report.data) {
+    return /* @__PURE__ */ jsx2("p", { "data-myna": "status", "data-myna-state": "error", role: "status", children: report.error?.message ?? "That report is not available." });
+  }
+  const data = report.data;
+  const send = () => {
+    const message = draft.trim();
+    if (!message) return;
+    void report.reply(message).then(() => setDraft(""));
+  };
+  return /* @__PURE__ */ jsxs("article", { "data-myna": "thread", "data-myna-status": data.status, children: [
+    /* @__PURE__ */ jsxs("header", { "data-myna": "thread-header", children: [
+      /* @__PURE__ */ jsxs("span", { "data-myna": "thread-number", children: [
+        "#",
+        data.number
+      ] }),
+      /* @__PURE__ */ jsx2("h2", { "data-myna": "thread-title", children: data.title }),
+      /* @__PURE__ */ jsx2("span", { "data-myna": "thread-status", children: data.status.replaceAll("_", " ") })
+    ] }),
+    data.body ? /* @__PURE__ */ jsx2("p", { "data-myna": "thread-body", children: data.body }) : null,
+    /* @__PURE__ */ jsx2("ol", { "data-myna": "timeline", children: data.timeline.map((event, i) => /* @__PURE__ */ jsxs("li", { "data-myna": "event", "data-myna-author": event.author, "data-myna-kind": event.kind, children: [
+      event.body ? /* @__PURE__ */ jsx2("p", { "data-myna": "event-body", children: event.body }) : /* @__PURE__ */ jsx2("p", { "data-myna": "event-summary", children: eventText(event.kind) }),
+      /* @__PURE__ */ jsx2("time", { "data-myna": "event-time", dateTime: event.createdAt, children: when(event.createdAt) })
+    ] }, i)) }),
+    data.awaitingYou ? /* @__PURE__ */ jsxs("div", { "data-myna": "retest", children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          "data-myna": "confirm",
+          disabled: report.isActing,
+          onClick: () => void report.confirm(draft.trim() || void 0),
+          children: text.worksNow
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          "data-myna": "reopen",
+          disabled: report.isActing,
+          onClick: () => void report.reopen(draft.trim() || void 0),
+          children: text.stillBroken
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { "data-myna": "reply", children: [
+      /* @__PURE__ */ jsx2(
+        "textarea",
+        {
+          "data-myna": "reply-input",
+          rows: 3,
+          value: draft,
+          placeholder: text.placeholder,
+          onChange: (e) => setDraft(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx2("button", { type: "button", "data-myna": "reply-submit", disabled: report.isActing || !draft.trim(), onClick: send, children: report.isActing ? text.sending : text.reply })
+    ] })
+  ] });
+}
+
+// src/feedback/index.ts
+import { FeedbackError } from "@myna-sh/sdk/feedback";
+export {
+  FeedbackError,
+  FeedbackProvider,
+  MyReports,
+  ReportForm,
+  ReportThread,
+  useBoardSchema,
+  useFeedback,
+  useMyReports,
+  useReport,
+  useSubmitReport
+};
+//# sourceMappingURL=index.js.map

package/dist/feedback/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/provider.tsx","../../src/feedback/context.ts","../../src/feedback/hooks.ts","../../src/feedback/components.tsx","../../src/feedback/index.ts"],"sourcesContent":["import { useEffect, useMemo, type ReactNode } from \"react\";\nimport { createFeedback, type FeedbackOptions, type IdentifyOptions } from \"@myna-sh/sdk/feedback\";\nimport { FeedbackContext } from \"./context.js\";\n\nexport interface FeedbackProviderProps {\n  /** A publishable ingest key (`myna_ik_...`). Safe to ship in your bundle. */\n  ingestKey: string;\n  /** Override for self-hosted or staging deployments. */\n  apiUrl?: string;\n  /** Which board to file on. Required when the key is not bound to one. */\n  board?: string;\n  /**\n   * Who is using your application, signed by your own backend.\n   *\n   * Pass it once you know, and pass `undefined` when they sign out. Without it\n   * a report can still be filed (unless the board requires identity) but\n   * nothing can be read back — an unsigned claim about who somebody is would\n   * otherwise let any visitor read another person's reports.\n   */\n  identify?: IdentifyOptions;\n  /**\n   * Environment attached to every report — app version, commit, route.\n   * A function is re-read on each submission, so a single-page app can report\n   * the route the user is actually on.\n   */\n  context?: FeedbackOptions[\"context\"];\n  children: ReactNode;\n}\n\n/**\n * Provide a feedback client to the components and hooks below.\n *\n * The client is memoized on the values that change how it talks to Myna, and\n * **not** on `identify` — a signature is refreshed by your backend more often\n * than a key changes, and rebuilding the client on each one would discard\n * nothing useful while making every child re-render. The identity is pushed\n * into the existing client instead, in an effect, so signing in mid-session\n * takes effect without a remount.\n */\nexport function FeedbackProvider({\n  ingestKey,\n  apiUrl,\n  board,\n  identify,\n  context,\n  children,\n}: FeedbackProviderProps): ReactNode {\n  const client = useMemo(\n    () => createFeedback({ ingestKey, apiUrl, board, context, identify }),\n    // `context` is deliberately absent: it is usually an inline object or an\n    // arrow function, so including it would rebuild the client on every render.\n    // The client re-reads a function form on each submission anyway.\n    [ingestKey, apiUrl, board],\n  );\n\n  // Serialized rather than spread across a dependency list, because\n  // `properties` is a nested object and a shallow list would silently miss a\n  // change inside it.\n  const identityKey = identify ? JSON.stringify(identify) : \"\";\n  useEffect(() => {\n    // `?? null` rather than a conditional: signing out has to *clear* the\n    // identity, or the next person on a shared machine reads the last one's\n    // reports.\n    client.identify(identify ?? null);\n  }, [client, identityKey]);\n\n  return <FeedbackContext.Provider value={client}>{children}</FeedbackContext.Provider>;\n}\n","import { createContext, useContext } from \"react\";\nimport type { FeedbackClient } from \"@myna-sh/sdk/feedback\";\n\n/**\n * The feedback client every hook and component below reads from.\n *\n * Context rather than a prop for the same reason the content client is: a form\n * in a modal, a \"my reports\" list in an account page, and a thread on a\n * different route all need the same key, the same board and the same identity,\n * and threading those through each component by hand is how one of them ends up\n * unauthenticated.\n */\nexport const FeedbackContext = createContext<FeedbackClient | null>(null);\n\nexport function useFeedback(): FeedbackClient {\n  const client = useContext(FeedbackContext);\n  if (!client) {\n    throw new Error(\n      \"No Myna feedback client in context. Wrap this tree in <FeedbackProvider ingestKey=\\\"myna_ik_...\\\">.\",\n    );\n  }\n  return client;\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  BoardSchema,\n  FeedbackClient,\n  MyReport,\n  MyReportSummary,\n  SubmitInput,\n  SubmitResult,\n} from \"@myna-sh/sdk/feedback\";\nimport { useFeedback } from \"./context.js\";\n\n/**\n * Headless hooks over the feedback client.\n *\n * Deliberately thinner than `useMyna*` on the content side. Content reads are\n * shared, cached and revalidated because a page renders dozens of them; a\n * feedback surface renders one form and one list, and a cache would mostly add\n * a way for a reporter to see a stale answer to the question they just asked.\n * So: a request, loading and error state, and an explicit `refresh`.\n */\n\nexport interface AsyncResult<T> {\n  data: T | undefined;\n  error: Error | undefined;\n  isLoading: boolean;\n  refresh: () => void;\n}\n\n/** One request, cancelled on unmount, re-run when `deps` change or on refresh. */\nfunction useAsync<T>(run: () => Promise<T>, deps: unknown[], enabled = true): AsyncResult<T> {\n  const [data, setData] = useState<T>();\n  const [error, setError] = useState<Error>();\n  const [isLoading, setLoading] = useState(enabled);\n  const [nonce, setNonce] = useState(0);\n  // A guard rather than an AbortController: the client's methods do not take a\n  // signal, and what actually matters is not writing state after unmount.\n  const live = useRef(true);\n\n  useEffect(() => {\n    live.current = true;\n    return () => {\n      live.current = false;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!enabled) {\n      setLoading(false);\n      return;\n    }\n    let current = true;\n    setLoading(true);\n    run()\n      .then((value) => {\n        if (!current || !live.current) return;\n        setData(value);\n        setError(undefined);\n      })\n      .catch((err: unknown) => {\n        if (!current || !live.current) return;\n        setError(err instanceof Error ? err : new Error(String(err)));\n      })\n      .finally(() => {\n        if (current && live.current) setLoading(false);\n      });\n    return () => {\n      current = false;\n    };\n  }, [...deps, enabled, nonce]);\n\n  return { data, error, isLoading, refresh: useCallback(() => setNonce((n) => n + 1), []) };\n}\n\nexport { useFeedback };\n\n/**\n * The board's intake form.\n *\n * Every question the board asks, in the order it asks them — including the ones\n * that fill the report's own title, body and reply address. Render the list and\n * you have rendered the whole form; there is no question you are expected to\n * supply yourself.\n */\nexport function useBoardSchema(board?: string): AsyncResult<BoardSchema> {\n  const client = useFeedback();\n  return useAsync(() => client.schema(board), [client, board]);\n}\n\nexport interface SubmitState {\n  submit: (input: SubmitInput) => Promise<SubmitResult>;\n  isSubmitting: boolean;\n  error: Error | undefined;\n  /** The last successful submission, so a form can say which number it filed. */\n  result: SubmitResult | undefined;\n  reset: () => void;\n}\n\n/**\n * File a report.\n *\n * `submit` resolves with the report number and rejects with the `FeedbackError`\n * the API answered — its `fields` record is keyed by path, so validation\n * messages bind straight back to your inputs.\n */\nexport function useSubmitReport(): SubmitState {\n  const client = useFeedback();\n  const [isSubmitting, setSubmitting] = useState(false);\n  const [error, setError] = useState<Error>();\n  const [result, setResult] = useState<SubmitResult>();\n\n  const submit = useCallback(\n    async (input: SubmitInput) => {\n      setSubmitting(true);\n      setError(undefined);\n      try {\n        const value = await client.submit(input);\n        setResult(value);\n        return value;\n      } catch (err) {\n        const wrapped = err instanceof Error ? err : new Error(String(err));\n        setError(wrapped);\n        throw wrapped;\n      } finally {\n        setSubmitting(false);\n      }\n    },\n    [client],\n  );\n\n  const reset = useCallback(() => {\n    setError(undefined);\n    setResult(undefined);\n  }, []);\n\n  return { submit, isSubmitting, error, result, reset };\n}\n\n/**\n * The reports this identity has filed.\n *\n * Empty until `FeedbackProvider` has an `identify`, because there is no such\n * thing as an anonymous reporter's report list — the request would have nobody\n * to be about.\n */\nexport function useMyReports(): AsyncResult<MyReportSummary[]> {\n  const client = useFeedback();\n  return useAsync(() => client.myReports(), [client]);\n}\n\n/** One of their reports, with the public conversation and the actions on it. */\nexport function useReport(number: number | undefined): AsyncResult<MyReport> & {\n  reply: (message: string) => Promise<void>;\n  confirm: (message?: string) => Promise<void>;\n  reopen: (reason?: string) => Promise<void>;\n  isActing: boolean;\n} {\n  const client = useFeedback();\n  const query = useAsync(\n    () => client.report(number!),\n    [client, number],\n    number !== undefined,\n  );\n  const [isActing, setActing] = useState(false);\n  // `query.refresh` rather than `query`: the result object is new on every\n  // render, so depending on it would rebuild every action callback each time.\n  const { refresh } = query;\n\n  // Each action refetches, so the pane repaints from the server's answer rather\n  // than from a guess about what the action did.\n  const act = useCallback(\n    async (run: (c: FeedbackClient, n: number) => Promise<MyReport>) => {\n      if (number === undefined) return;\n      setActing(true);\n      try {\n        await run(client, number);\n        refresh();\n      } finally {\n        setActing(false);\n      }\n    },\n    [client, number, refresh],\n  );\n\n  return {\n    ...query,\n    isActing,\n    reply: (message) => act((c, n) => c.reply(n, message)),\n    confirm: (message) => act((c, n) => c.confirm(n, message)),\n    reopen: (reason) => act((c, n) => c.reopen(n, reason)),\n  };\n}\n","import { useMemo, useState, type FormEvent, type ReactNode } from \"react\";\nimport type { BoardFormField, MyReport, SubmitResult } from \"@myna-sh/sdk/feedback\";\nimport { useBoardSchema, useMyReports, useReport, useSubmitReport } from \"./hooks.js\";\n\n/**\n * Components for the reporter's side of Feedback.\n *\n * **Unstyled.** Every element carries a `data-myna` attribute and nothing else —\n * no class names, no inline styles, no CSS-in-JS, no framework. Style them with\n * your own CSS, or import `@myna-sh/react/feedback.css` for a plain starting\n * point driven by three custom properties.\n *\n * That is not minimalism for its own sake. A feedback form sits inside somebody\n * else's product, next to their buttons and their type; a component that\n * arrives with opinions is a component that has to be fought, and every widget\n * that ships a stylesheet ends up in a specificity war with the application\n * embedding it.\n */\n\n/**\n * A timestamp a person can read, in their own locale.\n *\n * The machine-readable value stays on the `<time dateTime>` attribute, so\n * nothing is lost — but a raw ISO string is not something to show the person\n * who reported a bug, and asking every embedder to reformat it would make the\n * first thing they do to these components a fix.\n */\nfunction when(iso: string): string {\n  const date = new Date(iso);\n  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString();\n}\n\n/**\n * What a timeline entry that carries no prose means.\n *\n * A report's timeline is the conversation *and* the state record, so a reporter\n * sees rows with no body — the report being filed, a retest being asked for.\n * Without a sentence each of those renders as a bare timestamp, which reads as\n * something failing to load.\n *\n * Worded from the reporter's side, and deliberately vague about who did it: the\n * team is \"we\", never a name. An unrecognised kind falls back to its own words\n * rather than disappearing, so a kind added later degrades to readable.\n */\nconst EVENT_TEXT: Record<string, string> = {\n  created: \"You reported this.\",\n  status_changed: \"We changed its status.\",\n  retest_requested: \"We think this is fixed — can you confirm?\",\n  reopened: \"Reopened.\",\n  merged: \"We linked this to another report of the same problem.\",\n  link_added: \"We linked a fix.\",\n  attachment_added: \"A file was attached.\",\n};\n\nfunction eventText(kind: string): string {\n  return EVENT_TEXT[kind] ?? kind.replaceAll(\"_\", \" \");\n}\n\n/** `browser_version` -> `Browser version`, for a field that declared no label. */\nfunction humanize(key: string): string {\n  const words = key.replaceAll(/[_-]+/g, \" \").trim();\n  return words.charAt(0).toUpperCase() + words.slice(1);\n}\n\nfunction labelOf(field: BoardFormField): string {\n  return field.label ?? humanize(field.key);\n}\n\n/** The input type one declared question renders as. */\nfunction inputType(field: BoardFormField): string {\n  switch (field.type) {\n    case \"number\":\n      return \"number\";\n    case \"boolean\":\n      return \"checkbox\";\n    case \"date\":\n      return \"date\";\n    case \"email\":\n      return \"email\";\n    default:\n      return \"text\";\n  }\n}\n\nexport interface ReportFormProps {\n  /** Which board to file on. Required when the ingest key is not bound to one. */\n  board?: string;\n  /** Called with the report number after a successful submission. */\n  onSubmitted?: (result: SubmitResult) => void;\n  /** Rendered instead of the form once something has been filed. */\n  success?: (result: SubmitResult) => ReactNode;\n  /** Text for the parts the board does not declare. */\n  labels?: Partial<Record<\"submit\" | \"submitting\" | \"sent\" | \"loading\" | \"unavailable\", string>>;\n}\n\nconst FORM_TEXT = {\n  submit: \"Send report\",\n  submitting: \"Sending…\",\n  sent: \"Thanks — your report was received.\",\n  loading: \"Loading the form…\",\n  unavailable: \"This form could not be loaded. Try again shortly.\",\n};\n\n/**\n * The board's own intake form.\n *\n * Every question comes from the board, in the order the board asks them,\n * including the ones that produce the report's title, description and reply\n * address. Nothing here is hardcoded, which is what stops this component and\n * your own hand-written form from asking the same board two different things.\n *\n * The consequence is that the form arrives one round trip late, and this\n * renders a status line until it does. A form that has to be corrected after it\n * appears is worse than one that appears a moment later.\n */\nexport function ReportForm({ board, onSubmitted, success, labels }: ReportFormProps): ReactNode {\n  const text = { ...FORM_TEXT, ...labels };\n  const schema = useBoardSchema(board);\n  const submission = useSubmitReport();\n  const [values, setValues] = useState<Record<string, string | boolean>>({});\n  const [files, setFiles] = useState<File[]>([]);\n\n  const fields = schema.data?.fields ?? [];\n  const fieldErrors = useMemo(() => {\n    const error = submission.error as { fields?: Record<string, string> } | undefined;\n    return error?.fields ?? {};\n  }, [submission.error]);\n\n  if (schema.isLoading) {\n    return (\n      <p data-myna=\"status\" role=\"status\">\n        {text.loading}\n      </p>\n    );\n  }\n  if (schema.error || !schema.data) {\n    return (\n      <p data-myna=\"status\" data-myna-state=\"error\" role=\"status\">\n        {text.unavailable}\n      </p>\n    );\n  }\n  if (submission.result) {\n    return (\n      <div data-myna=\"sent\" role=\"status\">\n        {success ? success(submission.result) : <p>{text.sent}</p>}\n      </div>\n    );\n  }\n\n  const onSubmit = (event: FormEvent) => {\n    event.preventDefault();\n    // The board says which answer fills which part of the report; everything it\n    // does not target is a custom field.\n    let title = \"\";\n    let body: string | undefined;\n    let email: string | undefined;\n    const custom: Record<string, unknown> = {};\n\n    for (const field of fields) {\n      if (field.target === \"attachments\") continue;\n      const raw = values[field.key];\n      if (field.type === \"boolean\") {\n        custom[field.key] = raw === true;\n        continue;\n      }\n      const value = typeof raw === \"string\" ? raw.trim() : \"\";\n      if (field.target === \"title\") title = value;\n      else if (field.target === \"body\") body = value || undefined;\n      else if (field.target === \"reporterEmail\") email = value || undefined;\n      else if (value !== \"\") custom[field.key] = field.type === \"number\" ? Number(value) : value;\n    }\n\n    void submission\n      .submit({\n        board,\n        title,\n        body,\n        reporter: email ? { email } : undefined,\n        fields: Object.keys(custom).length > 0 ? custom : undefined,\n        attachments: files.length > 0 ? files : undefined,\n      })\n      .then((result) => onSubmitted?.(result))\n      // The hook already holds the error and the form renders it; rethrowing\n      // here would surface an unhandled rejection for a state a user can see.\n      .catch(() => undefined);\n  };\n\n  return (\n    <form data-myna=\"form\" onSubmit={onSubmit} noValidate>\n      {fields.map((field) => (\n        <Question\n          key={field.key}\n          field={field}\n          value={values[field.key]}\n          error={fieldErrors[field.key] ?? fieldErrors[`fields.${field.key}`]}\n          onChange={(v) => setValues((prev) => ({ ...prev, [field.key]: v }))}\n          onFiles={setFiles}\n        />\n      ))}\n\n      {submission.error && Object.keys(fieldErrors).length === 0 ? (\n        <p data-myna=\"error\" role=\"alert\">\n          {submission.error.message}\n        </p>\n      ) : null}\n\n      <button data-myna=\"submit\" type=\"submit\" disabled={submission.isSubmitting}>\n        {submission.isSubmitting ? text.submitting : text.submit}\n      </button>\n    </form>\n  );\n}\n\nfunction Question({\n  field,\n  value,\n  error,\n  onChange,\n  onFiles,\n}: {\n  field: BoardFormField;\n  value: string | boolean | undefined;\n  error: string | undefined;\n  onChange: (value: string | boolean) => void;\n  onFiles: (files: File[]) => void;\n}): ReactNode {\n  const id = `myna-${field.key}`;\n  const label = labelOf(field);\n\n  // The board asks for files by declaring a question. A board that does not ask\n  // renders no file input, and the upload endpoint refuses one anyway.\n  const control =\n    field.target === \"attachments\" ? (\n      <input\n        id={id}\n        data-myna=\"input\"\n        type=\"file\"\n        multiple={field.max !== 1}\n        required={field.required}\n        onChange={(e) => onFiles(Array.from(e.target.files ?? []))}\n      />\n    ) : field.type === \"markdown\" ? (\n      <textarea\n        id={id}\n        data-myna=\"input\"\n        rows={4}\n        required={field.required}\n        placeholder={field.placeholder}\n        value={typeof value === \"string\" ? value : \"\"}\n        onChange={(e) => onChange(e.target.value)}\n      />\n    ) : field.type === \"boolean\" ? (\n      <input\n        id={id}\n        data-myna=\"input\"\n        type=\"checkbox\"\n        checked={value === true}\n        onChange={(e) => onChange(e.target.checked)}\n      />\n    ) : (\n      <input\n        id={id}\n        data-myna=\"input\"\n        type={inputType(field)}\n        required={field.required}\n        placeholder={field.placeholder}\n        value={typeof value === \"string\" ? value : \"\"}\n        onChange={(e) => onChange(e.target.value)}\n      />\n    );\n\n  return (\n    <div data-myna=\"field\" data-myna-field={field.key}>\n      <label data-myna=\"label\" htmlFor={id}>\n        {label}\n      </label>\n      {control}\n      {field.help ? <small data-myna=\"help\">{field.help}</small> : null}\n      {error ? (\n        <small data-myna=\"field-error\" role=\"alert\">\n          {error}\n        </small>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface MyReportsProps {\n  /** Rendered for each report. Without it, each row is a plain button. */\n  children?: (report: { number: number; title: string; status: string; awaitingYou: boolean }) => ReactNode;\n  onSelect?: (number: number) => void;\n  empty?: ReactNode;\n}\n\n/**\n * Everything this reporter has filed.\n *\n * Needs a signed identity on the provider. Without one it renders the empty\n * state rather than an error, because \"you have not reported anything\" is what\n * a signed-out visitor should see — not a sentence about HMAC.\n */\nexport function MyReports({ children, onSelect, empty }: MyReportsProps): ReactNode {\n  const { data, error, isLoading } = useMyReports();\n\n  if (isLoading) return <p data-myna=\"status\" role=\"status\">Loading…</p>;\n  if (error || !data || data.length === 0) {\n    return <div data-myna=\"empty\">{empty ?? <p>No reports yet.</p>}</div>;\n  }\n\n  return (\n    <ul data-myna=\"my-reports\">\n      {data.map((report) => (\n        <li key={report.number} data-myna=\"my-report\" data-myna-status={report.status}>\n          <button type=\"button\" data-myna=\"my-report-link\" onClick={() => onSelect?.(report.number)}>\n            {children ? (\n              children(report)\n            ) : (\n              <>\n                <span data-myna=\"my-report-number\">#{report.number}</span>\n                <span data-myna=\"my-report-title\">{report.title}</span>\n                <span data-myna=\"my-report-status\">{report.status.replaceAll(\"_\", \" \")}</span>\n              </>\n            )}\n          </button>\n          {report.awaitingYou ? <span data-myna=\"awaiting-you\">Waiting on you</span> : null}\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nexport interface ReportThreadProps {\n  number: number;\n  /** Text for the parts of the thread the board does not declare. */\n  labels?: Partial<\n    Record<\"reply\" | \"sending\" | \"placeholder\" | \"worksNow\" | \"stillBroken\" | \"loading\", string>\n  >;\n}\n\nconst THREAD_TEXT = {\n  reply: \"Send\",\n  sending: \"Sending…\",\n  placeholder: \"Add a reply…\",\n  worksNow: \"It works now\",\n  stillBroken: \"Still broken\",\n  loading: \"Loading…\",\n};\n\n/**\n * One report and its conversation, with the two buttons the product exists for.\n *\n * \"It works now\" and \"Still broken\" appear only while `awaitingYou` — the team\n * has changed something and asked this person to check. Showing them all the\n * time would invite a reporter to close a report nobody has looked at yet, and\n * the confirmation would then mean nothing.\n */\nexport function ReportThread({ number, labels }: ReportThreadProps): ReactNode {\n  const text = { ...THREAD_TEXT, ...labels };\n  const report = useReport(number);\n  const [draft, setDraft] = useState(\"\");\n\n  if (report.isLoading) return <p data-myna=\"status\" role=\"status\">{text.loading}</p>;\n  if (report.error || !report.data) {\n    return (\n      <p data-myna=\"status\" data-myna-state=\"error\" role=\"status\">\n        {report.error?.message ?? \"That report is not available.\"}\n      </p>\n    );\n  }\n\n  const data: MyReport = report.data;\n  const send = () => {\n    const message = draft.trim();\n    if (!message) return;\n    void report.reply(message).then(() => setDraft(\"\"));\n  };\n\n  return (\n    <article data-myna=\"thread\" data-myna-status={data.status}>\n      <header data-myna=\"thread-header\">\n        <span data-myna=\"thread-number\">#{data.number}</span>\n        <h2 data-myna=\"thread-title\">{data.title}</h2>\n        <span data-myna=\"thread-status\">{data.status.replaceAll(\"_\", \" \")}</span>\n      </header>\n\n      {data.body ? <p data-myna=\"thread-body\">{data.body}</p> : null}\n\n      <ol data-myna=\"timeline\">\n        {data.timeline.map((event, i) => (\n          <li key={i} data-myna=\"event\" data-myna-author={event.author} data-myna-kind={event.kind}>\n            {event.body ? (\n              <p data-myna=\"event-body\">{event.body}</p>\n            ) : (\n              <p data-myna=\"event-summary\">{eventText(event.kind)}</p>\n            )}\n            <time data-myna=\"event-time\" dateTime={event.createdAt}>\n              {when(event.createdAt)}\n            </time>\n          </li>\n        ))}\n      </ol>\n\n      {data.awaitingYou ? (\n        <div data-myna=\"retest\">\n          <button\n            type=\"button\"\n            data-myna=\"confirm\"\n            disabled={report.isActing}\n            onClick={() => void report.confirm(draft.trim() || undefined)}\n          >\n            {text.worksNow}\n          </button>\n          <button\n            type=\"button\"\n            data-myna=\"reopen\"\n            disabled={report.isActing}\n            onClick={() => void report.reopen(draft.trim() || undefined)}\n          >\n            {text.stillBroken}\n          </button>\n        </div>\n      ) : null}\n\n      <div data-myna=\"reply\">\n        <textarea\n          data-myna=\"reply-input\"\n          rows={3}\n          value={draft}\n          placeholder={text.placeholder}\n          onChange={(e) => setDraft(e.target.value)}\n        />\n        <button type=\"button\" data-myna=\"reply-submit\" disabled={report.isActing || !draft.trim()} onClick={send}>\n          {report.isActing ? text.sending : text.reply}\n        </button>\n      </div>\n    </article>\n  );\n}\n","/**\n * `@myna-sh/react/feedback` — file and follow bug reports from a React app.\n *\n * The reporter's side of Myna Feedback, as components and headless hooks over\n * `@myna-sh/sdk/feedback`. It runs inside **your** product, which is the point:\n * Myna serves no reporter-facing page, so the person who filed a bug reads the\n * answer where they already are and where they are already signed in.\n *\n * ```tsx\n * <FeedbackProvider ingestKey=\"myna_ik_...\" identify={{ id: user.id, signature }}>\n *   <ReportForm board=\"bugs\" />\n *   <MyReports onSelect={setOpen} />\n *   {open ? <ReportThread number={open} /> : null}\n * </FeedbackProvider>\n * ```\n *\n * `signature` comes from your own backend — `signIdentity` in\n * `@myna-sh/sdk/feedback/server`. Without it a report can still be filed, but\n * nothing can be read back: an unsigned claim about who somebody is would let\n * any visitor read another person's reports.\n *\n * Every element is unstyled and carries a `data-myna` attribute. Bring your own\n * CSS, or import `@myna-sh/react/feedback.css` for a starting point driven by\n * `--myna-accent`, `--myna-radius` and `--myna-font`.\n */\nexport { FeedbackProvider, type FeedbackProviderProps } from \"./provider.js\";\nexport {\n  useFeedback,\n  useBoardSchema,\n  useSubmitReport,\n  useMyReports,\n  useReport,\n  type AsyncResult,\n  type SubmitState,\n} from \"./hooks.js\";\nexport {\n  ReportForm,\n  MyReports,\n  ReportThread,\n  type ReportFormProps,\n  type MyReportsProps,\n  type ReportThreadProps,\n} from \"./components.js\";\nexport type {\n  BoardFormField,\n  BoardSchema,\n  FeedbackClient,\n  IdentifyOptions,\n  MyReport,\n  MyReportSummary,\n  SubmitInput,\n  SubmitResult,\n} from \"@myna-sh/sdk/feedback\";\nexport { FeedbackError } from \"@myna-sh/sdk/feedback\";\n"],"mappings":"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","names":["useEffect","useEffect","useMemo","useState","jsx","useState","useMemo"]}

package/dist/feedback.css

@@ -0,0 +1,286 @@
+/*
+ * `@myna-sh/react/feedback.css` — an optional starting point.
+ *
+ * Not a theme and not a design system: enough rules that the form looks
+ * deliberate before anyone has written CSS for it, and few enough that
+ * overriding one does not mean fighting five others. Everything selects on the
+ * `data-myna` attributes the components emit, so a plain class of your own wins
+ * on specificity without `!important`.
+ *
+ * Three custom properties, because those are the three things every embedding
+ * application actually wants to change:
+ *
+ *   --myna-accent   the button and focus colour        (default: currentColor)
+ *   --myna-radius   corner radius on inputs and buttons (default: 6px)
+ *   --myna-font     the type stack                      (default: inherit)
+ *
+ * Set them on any ancestor. Colours otherwise come from `currentColor` and
+ * `color-mix`, so the form inherits the surrounding light or dark surface
+ * instead of asserting one.
+ */
+
+[data-myna="form"],
+[data-myna="thread"],
+[data-myna="my-reports"] {
+  --_accent: var(--myna-accent, currentColor);
+  --_radius: var(--myna-radius, 6px);
+  --_line: color-mix(in srgb, currentColor 22%, transparent);
+  --_muted: color-mix(in srgb, currentColor 62%, transparent);
+  font-family: var(--myna-font, inherit);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* --- Form ---------------------------------------------------------------- */
+
+[data-myna="form"] {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+[data-myna="field"] {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+[data-myna="label"] {
+  font-weight: 500;
+}
+
+[data-myna="input"] {
+  font: inherit;
+  color: inherit;
+  padding: 8px 10px;
+  border: 1px solid var(--_line);
+  border-radius: var(--_radius);
+  background: transparent;
+}
+
+[data-myna="input"]:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 1px;
+}
+
+[data-myna="input"][type="checkbox"] {
+  width: 1em;
+  height: 1em;
+  padding: 0;
+  align-self: start;
+}
+
+[data-myna="input"][type="file"] {
+  padding: 6px;
+}
+
+textarea[data-myna="input"],
+[data-myna="reply-input"] {
+  resize: vertical;
+  min-height: 4.5em;
+}
+
+[data-myna="help"] {
+  color: var(--_muted);
+  font-size: 12px;
+}
+
+[data-myna="field-error"],
+[data-myna="error"] {
+  /* Red is the one colour worth asserting: an error the reader misses is the
+     failure this stylesheet exists to avoid. */
+  color: #c2410c;
+  font-size: 12px;
+}
+
+[data-myna="submit"],
+[data-myna="reply-submit"],
+[data-myna="confirm"],
+[data-myna="reopen"] {
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 8px 14px;
+  border-radius: var(--_radius);
+  border: 1px solid var(--_line);
+  background: transparent;
+  color: inherit;
+  align-self: flex-start;
+}
+
+/*
+ * The primary buttons are tinted, not filled.
+ *
+ * A filled button needs a text colour that contrasts with the fill, and this
+ * stylesheet does not know what the fill is: `--myna-accent` defaults to
+ * `currentColor`, so filling with it and writing on top produced white on
+ * white. Tinting keeps the label at `currentColor` — readable on whatever
+ * surface the host page has — and still reads as the primary action once an
+ * accent is set.
+ */
+[data-myna="submit"],
+[data-myna="confirm"] {
+  border-color: color-mix(in srgb, var(--_accent) 45%, transparent);
+  background: color-mix(in srgb, var(--_accent) 14%, transparent);
+  font-weight: 600;
+}
+
+[data-myna="submit"]:disabled,
+[data-myna="reply-submit"]:disabled,
+[data-myna="confirm"]:disabled,
+[data-myna="reopen"]:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+[data-myna="status"],
+[data-myna="empty"] {
+  color: var(--_muted);
+}
+
+[data-myna="status"][data-myna-state="error"] {
+  color: #c2410c;
+}
+
+/* --- The reporter's own reports ------------------------------------------ */
+
+[data-myna="my-reports"] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+[data-myna="my-report"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+[data-myna="my-report-link"] {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  flex: 1;
+  text-align: left;
+  padding: 9px 10px;
+  border: 0;
+  border-radius: var(--_radius);
+  background: transparent;
+}
+
+[data-myna="my-report-link"]:hover {
+  background: color-mix(in srgb, currentColor 7%, transparent);
+}
+
+[data-myna="my-report-number"],
+[data-myna="thread-number"] {
+  font-variant-numeric: tabular-nums;
+  color: var(--_muted);
+}
+
+[data-myna="my-report-title"] {
+  flex: 1;
+}
+
+[data-myna="my-report-status"],
+[data-myna="thread-status"],
+[data-myna="awaiting-you"] {
+  font-size: 12px;
+  color: var(--_muted);
+  text-transform: lowercase;
+}
+
+/* Weight as well as colour: the accent may be `currentColor`, and "the team is
+   waiting on you" is the one label in the list that has to be noticed. */
+[data-myna="awaiting-you"] {
+  color: var(--_accent);
+  font-weight: 600;
+}
+
+/* --- One report ---------------------------------------------------------- */
+
+[data-myna="thread"] {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+[data-myna="thread-header"] {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+[data-myna="thread-title"] {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  flex: 1;
+}
+
+[data-myna="thread-body"] {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+[data-myna="timeline"] {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 14px;
+  border-left: 1px solid var(--_line);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+[data-myna="event-body"] {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+/* A state change, not something anybody wrote — set back so the conversation
+   reads as the conversation. */
+[data-myna="event-summary"] {
+  margin: 0;
+  color: var(--_muted);
+}
+
+/* The reporter's own words, set apart from the team's, so a thread reads as a
+   conversation rather than a log. */
+[data-myna="event"][data-myna-author="you"] [data-myna="event-body"] {
+  color: var(--_muted);
+}
+
+[data-myna="event-time"] {
+  font-size: 12px;
+  color: var(--_muted);
+}
+
+[data-myna="retest"],
+[data-myna="reply"] {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+[data-myna="reply"] {
+  flex-direction: column;
+}
+
+[data-myna="reply-input"] {
+  font: inherit;
+  color: inherit;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  border: 1px solid var(--_line);
+  border-radius: var(--_radius);
+  background: transparent;
+}

package/dist/index.js

@@ -175,7 +175,7 @@ function useMynaSingleton(collection, options = {}) {
 }
 
 // src/version.ts
-var VERSION = true ? "0.14.0" : "0.0.0-dev";
+var VERSION = true ? "0.16.0" : "0.0.0-dev";
 export {
   MynaProvider,
   MynaStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myna-sh/react",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,12 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./feedback": {
+      "types": "./dist/feedback/index.d.ts",
+      "import": "./dist/feedback/index.js"
+    },
+    "./feedback.css": "./dist/feedback.css"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,9 +27,12 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@myna-sh/sdk": "^0.14.0",
+    "@myna-sh/sdk": "^0.16.0",
     "react": ">=18"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "devDependencies": {
     "@types/node": "24.13.3",
     "@types/react": "19.2.17",
@@ -32,7 +40,7 @@
     "react": "19.2.8",
     "typescript": "5.9.3",
     "@myna-sh/config": "0.0.0",
-    "@myna-sh/sdk": "0.14.0"
+    "@myna-sh/sdk": "0.16.0"
   },
   "scripts": {
     "build": "tsup",