@foir/sdk 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -108,6 +108,46 @@ nobody asking for `@foir/sdk` gets it early. The push that carries the commit to
 
 Changes on `dev` that have not been published to npm.
 
+## [0.28.0] — 2026-10-20
+
+### Added
+
+- **`<FoirFeedback appearance>`** (`@foir/sdk/react`): the built-in styles'
+  colours, radius and type, as the new `FoirFeedbackAppearance`. Each token is
+  also a CSS custom property on the wrapper (`--foir-feedback-text`,
+  `--foir-feedback-radius`, …), so a stylesheet can set it from a design
+  system's own variables. Unset, the widget looks as it did.
+- **`<FoirFeedback layout="dialog">`**: the panel opens over the page in a
+  modal `<dialog>`, with a backdrop and a Close button, closed by Escape and
+  the backdrop too. `inline`, the default, is the panel under the button.
+- **`<FoirFeedback signIn={false}>`**: a site where nobody can sign in says so,
+  and a visitor the project takes no notes from reads "Feedback is not open
+  right now" rather than "Sign in to send feedback".
+
+### Changed
+
+- **Breaking: a visitor's thank-you shows no id.** Nothing opens a visitor's
+  note from its id, so `<FoirFeedback>` no longer renders the
+  `data-foir-feedback-receipt` line. The receipt, `{ id, createdAt }`, still
+  reaches `onVisitorSubmitted`.
+- **A visitor whose note is refused because the project stopped taking
+  visitors' notes is shown that**, as the panel would show it on opening,
+  rather than asked to try again. The widget asks `noteConfig` again after a
+  visitor's send fails for a reason it cannot name.
+- **The widget's smaller lines are sized relative to its font size**, so
+  `fontSize` scales them; they were fixed at 13 and 15px.
+
+## [0.27.1] — 2026-10-20
+
+### Fixed
+
+- **`<FoirFeedback>` takes a client made without a generated module**
+  (`@foir/sdk/react`). `createFoirClient({ apiUrl, apiKey })` with no
+  `generated` prints from the manifest it fetches, and the widget worked with
+  one, but `FoirFeedbackClient` refused it at compile time for lacking
+  `notes`. `FoirFeedbackClient` is now that client or a generated one; a
+  generated client whose module has no notes namespace is still refused.
+
 ## [0.27.0] — 2026-10-20
 
 ### Added

package/dist/data/builtins.d.ts

@@ -554,8 +554,7 @@ export interface FoirNoteConfig {
  * and nothing else, because nobody is signed in to read the note back as. Ask
  * for more and the write is refused before anything is written.
  *
- * Show the `id` to the visitor so they can quote it. Nothing on the public
- * plane takes it to read the note.
+ * Nothing on the public plane takes the `id` to read the note.
  */
 export interface FoirNoteReceipt {
     id: string;

package/dist/react/FoirFeedback.d.ts

@@ -46,6 +46,25 @@ export interface FoirFeedbackProps {
      * button that calls it; given none, it says so and stops.
      */
     onSignIn?: () => void;
+    /**
+     * Whether a visitor can sign in on this site. Default true. `false` says
+     * they cannot, so where the project takes no notes from visitors who are not
+     * signed in, the widget says feedback is not open rather than asking them to
+     * sign in somewhere they cannot.
+     */
+    signIn?: boolean;
+    /**
+     * How the panel opens. `inline` (the default) opens it under the button, in
+     * the page's flow. `dialog` opens it over the page in a modal `<dialog>`,
+     * with a backdrop, closed by Escape, the backdrop or its Close button.
+     */
+    layout?: 'inline' | 'dialog';
+    /**
+     * The built-in styles' colours, radius and type. See
+     * `FoirFeedbackAppearance`: each is also a CSS custom property, so a
+     * stylesheet can set it instead. Ignored with `className`.
+     */
+    appearance?: FoirFeedbackAppearance;
     /** Called with a signed-in user's note once it is written. */
     onSubmitted?: (note: FoirUserNote) => void;
     /**
@@ -61,9 +80,45 @@ export interface FoirFeedbackProps {
     onError?: (error: unknown) => void;
     /**
      * Style it yourself. Passing a class turns OFF the built-in inline styles
-     * entirely, so the `data-foir-feedback-*` attributes below are yours to target
-     * without fighting anything.
+     * entirely, `appearance` with them, so the `data-foir-feedback-*` attributes
+     * are yours to target without fighting anything.
      */
     className?: string;
 }
-export declare function FoirFeedback({ client, subjects, subject, label, triggerLabel, title, placeholder, defaultOpen, onSignIn, onSubmitted, onVisitorSubmitted, onError, className, }: FoirFeedbackProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The built-in styles' tokens.
+ *
+ * Each is a CSS custom property on the wrapper, `--foir-feedback-<name>`, which
+ * the built-in styles read with today's look as the fallback. So a token can be
+ * set here, or from a stylesheet, where a design system's own variables can
+ * feed it:
+ *
+ * ```css
+ * [data-foir-feedback] { --foir-feedback-radius: var(--radius); }
+ * ```
+ *
+ * A value is any CSS value the property takes.
+ */
+export interface FoirFeedbackAppearance {
+    /** `--foir-feedback-text`. Default: inherited, or the browser's dialog text in a dialog. */
+    colorText?: string;
+    /** `--foir-feedback-muted`, the line naming what it is about. Default: the text at three quarters. */
+    colorMuted?: string;
+    /** `--foir-feedback-background`, the panel and its fields. Default: none, or the browser's dialog background in a dialog. */
+    colorBackground?: string;
+    /** `--foir-feedback-border`. Default `currentColor`. */
+    colorBorder?: string;
+    /** `--foir-feedback-primary`, the send button's fill and border. Default: no fill. */
+    colorPrimary?: string;
+    /** `--foir-feedback-primary-text`, the send button's text. Default: inherited. */
+    colorPrimaryText?: string;
+    /** `--foir-feedback-danger`, a failure. Default `#c0392b`. */
+    colorDanger?: string;
+    /** `--foir-feedback-radius`, the panel's corners; its controls take three quarters. Default `8px`. */
+    radius?: string;
+    /** `--foir-feedback-font-family`. Default: inherited. */
+    fontFamily?: string;
+    /** `--foir-feedback-font-size`. Default: inherited. */
+    fontSize?: string;
+}
+export declare function FoirFeedback({ client, subjects, subject, label, triggerLabel, title, placeholder, defaultOpen, onSignIn, signIn, layout, appearance, onSubmitted, onVisitorSubmitted, onError, className, }: FoirFeedbackProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/feedback-notes.d.ts

@@ -7,10 +7,22 @@
  * shape (see `data/selection.ts`) — so every response here has to be read rather
  * than cast, and reading is the part worth testing on its own.
  */
-import type { FoirUserNote, FoirNoteConfig, FoirNoteReceipt, FoirSubject } from '../data';
+import type { FoirClient, FoirSchemaDefinition, FoirUserNote, FoirNoteConfig, FoirNoteReceipt, FoirSubject } from '../data';
 import type { FoirScreenCapture } from '../media/screen-capture';
 /**
- * The client the widget needs, and no more of it.
+ * The client the widget writes through: a generated one whose module names the
+ * notes namespace, or one made without a generated module.
+ *
+ * A client made without a module prints from the manifest it fetches, so which
+ * namespaces it reaches is known only once it has asked, and its type names
+ * every namespace. The panel's first call is what finds out whether its
+ * credential reaches notes, as it is for a generated client whose key has lost
+ * the scope. A generated client whose module has no notes namespace is neither,
+ * and is refused here: it cannot send a note.
+ */
+export type FoirFeedbackClient = FoirGeneratedFeedbackClient | FoirClient<FoirSchemaDefinition>;
+/**
+ * A generated client, as far as the widget needs it.
  *
  * Structural rather than `FoirClient<S>`, for two reasons. `FoirClient` is
  * generic in the caller's generated schema, so naming it here would force the
@@ -23,7 +35,7 @@ import type { FoirScreenCapture } from '../media/screen-capture';
  * `Record<string, unknown>` in, `unknown` out — so a real generated client
  * assigns to this without a cast. `react/__tests__/feedback.test-d.ts` pins that.
  */
-export interface FoirFeedbackClient {
+interface FoirGeneratedFeedbackClient {
     readonly ns: {
         readonly notes: {
             noteConfig(args?: Record<string, unknown>): Promise<unknown>;
@@ -135,3 +147,4 @@ export interface FoirVisitorSubmission {
  * visitor's note cannot carry.
  */
 export declare function submitVisitorNote(client: FoirFeedbackClient, submission: FoirVisitorSubmission): Promise<FoirNoteReceipt>;
+export {};

package/dist/react/index.d.ts

@@ -20,7 +20,7 @@ export type { OAuthButtonsProps } from './OAuthButtons';
 export { UserButton } from './UserButton';
 export type { UserButtonProps } from './UserButton';
 export { FoirFeedback } from './FoirFeedback';
-export type { FoirFeedbackProps, FoirFeedbackClient } from './FoirFeedback';
+export type { FoirFeedbackAppearance, FoirFeedbackClient, FoirFeedbackProps, } from './FoirFeedback';
 export { createLocalStorageAdapter } from './localStorageAdapter';
 export type { FoirAccess, FoirUser, SessionAdapter, AuthProviderPublic } from '../auth';
 export type { FoirEnv } from '../graphql/foir-request';

package/dist/react.js

@@ -2393,16 +2393,29 @@ function screenshotFilename(mimeType) {
 
 // src/react/FoirFeedback.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var TOKENS = {
+  colorText: "--foir-feedback-text",
+  colorMuted: "--foir-feedback-muted",
+  colorBackground: "--foir-feedback-background",
+  colorBorder: "--foir-feedback-border",
+  colorPrimary: "--foir-feedback-primary",
+  colorPrimaryText: "--foir-feedback-primary-text",
+  colorDanger: "--foir-feedback-danger",
+  radius: "--foir-feedback-radius",
+  fontFamily: "--foir-feedback-font-family",
+  fontSize: "--foir-feedback-font-size"
+};
 var COPY = {
   signIn: "Sign in to send feedback.",
   signInAction: "Sign in",
+  closed: "Feedback is not open right now.",
+  close: "Close",
   notEnabled: "Feedback is not available on this account.",
   unavailable: "Feedback is unavailable right now. Please try again later.",
   noSubject: "There is nothing on this page to give feedback on.",
   loading: "One moment\u2026",
   sendFailed: "Your feedback could not be sent. Please try again.",
   sent: "Thanks. Your feedback has been sent.",
-  reference: "Reference",
   contactEmail: "Your email, if you would like a reply (optional)",
   send: "Send feedback",
   sending: "Sending\u2026",
@@ -2413,52 +2426,98 @@ var COPY = {
   removeScreenshot: "Remove screenshot",
   about: "About"
 };
+var border = "1px solid var(--foir-feedback-border, currentColor)";
+var radius = "var(--foir-feedback-radius, 8px)";
+var controlRadius = `calc(${radius} * 0.75)`;
+var background = "var(--foir-feedback-background, transparent)";
+function wrapperStyle(appearance) {
+  const style = {
+    color: "var(--foir-feedback-text)",
+    fontFamily: "var(--foir-feedback-font-family)",
+    fontSize: "var(--foir-feedback-font-size)"
+  };
+  for (const [name, value] of Object.entries(appearance ?? {})) {
+    const property = TOKENS[name];
+    if (property && typeof value === "string" && value !== "") style[property] = value;
+  }
+  return style;
+}
 var stackStyle = { display: "flex", flexDirection: "column", gap: 10 };
 var panelStyle = {
   ...stackStyle,
   maxWidth: 340,
+  marginTop: 8,
   padding: 16,
-  borderRadius: 8,
-  border: "1px solid currentColor",
+  borderRadius: radius,
+  border,
+  background,
   font: "inherit"
 };
+var dialogStyle = {
+  // The browser centres a modal dialog with its margin, and a CSS reset that
+  // zeroes every margin (Tailwind's preflight does) pins it to the corner.
+  margin: "auto",
+  width: "min(420px, calc(100vw - 32px))",
+  padding: 0,
+  borderRadius: radius,
+  border,
+  background: "var(--foir-feedback-background, Canvas)",
+  color: "var(--foir-feedback-text, CanvasText)",
+  font: "inherit"
+};
+var dialogPanelStyle = { ...stackStyle, padding: 20 };
+var headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 12
+};
 var buttonStyle = {
   padding: "8px 10px",
-  borderRadius: 6,
-  border: "1px solid currentColor",
+  borderRadius: controlRadius,
+  border,
   background: "transparent",
+  color: "inherit",
   font: "inherit",
   cursor: "pointer"
 };
-var submitStyle2 = { ...buttonStyle, fontWeight: 600 };
-var textareaStyle = {
-  padding: "8px 10px",
-  borderRadius: 6,
-  border: "1px solid currentColor",
-  background: "transparent",
-  font: "inherit",
-  minHeight: 96,
-  resize: "vertical"
+var closeStyle = { ...buttonStyle, padding: "4px 8px" };
+var submitStyle2 = {
+  ...buttonStyle,
+  border: "1px solid var(--foir-feedback-primary, var(--foir-feedback-border, currentColor))",
+  background: "var(--foir-feedback-primary, transparent)",
+  color: "var(--foir-feedback-primary-text)",
+  fontWeight: 600
 };
 var inputStyle2 = {
   padding: "8px 10px",
-  borderRadius: 6,
-  border: "1px solid currentColor",
-  background: "transparent",
+  borderRadius: controlRadius,
+  border,
+  background,
+  color: "inherit",
   font: "inherit"
 };
-var headingStyle = { margin: 0, fontSize: 15, fontWeight: 600 };
-var subjectStyle = { margin: 0, fontSize: 13, opacity: 0.75 };
-var noteStyle = { margin: 0, fontSize: 13 };
-var errorStyle2 = { margin: 0, fontSize: 13, color: "#c0392b" };
+var textareaStyle = { ...inputStyle2, minHeight: 96, resize: "vertical" };
+var headingStyle = { margin: 0, fontSize: "1.07em", fontWeight: 600 };
+var subjectStyle = {
+  margin: 0,
+  fontSize: "0.93em",
+  color: "var(--foir-feedback-muted, color-mix(in srgb, currentColor 75%, transparent))"
+};
+var noteStyle = { margin: 0, fontSize: "0.93em" };
+var errorStyle2 = {
+  margin: 0,
+  fontSize: "0.93em",
+  color: "var(--foir-feedback-danger, #c0392b)"
+};
 var previewStyle = {
   display: "block",
   width: "100%",
   height: 96,
   objectFit: "cover",
   objectPosition: "top",
-  borderRadius: 6,
-  border: "1px solid currentColor"
+  borderRadius: controlRadius,
+  border
 };
 function FoirFeedback({
   client,
@@ -2470,6 +2529,9 @@ function FoirFeedback({
   placeholder = "What would you like to tell us?",
   defaultOpen = false,
   onSignIn,
+  signIn = true,
+  layout = "inline",
+  appearance,
   onSubmitted,
   onVisitorSubmitted,
   onError,
@@ -2479,7 +2541,6 @@ function FoirFeedback({
   const [probe, setProbe] = useState4({ status: "loading" });
   const [body, setBody] = useState4("");
   const [contactEmail, setContactEmail] = useState4("");
-  const [receipt, setReceipt] = useState4(null);
   const [screenshot, setScreenshot] = useState4(null);
   const [capturing, setCapturing] = useState4(false);
   const [busy, setBusy] = useState4(false);
@@ -2508,6 +2569,7 @@ function FoirFeedback({
         if (cancelled) return;
         const fault = classifyNotesFault(err);
         reportFault(fault, err, "the notes surface could not be read");
+        announceClosed(fault, signIn);
         onErrorRef.current?.(err);
         setProbe({ status: "blocked", fault });
       }
@@ -2515,7 +2577,19 @@ function FoirFeedback({
     return () => {
       cancelled = true;
     };
-  }, [open, client]);
+  }, [open, client, signIn]);
+  const dialogRef = useRef2(null);
+  useEffect3(() => {
+    const dialog2 = dialogRef.current;
+    if (!dialog2) return;
+    if (open && !dialog2.open) {
+      if (typeof dialog2.showModal === "function") dialog2.showModal();
+      else dialog2.setAttribute("open", "");
+    } else if (!open && dialog2.open) {
+      if (typeof dialog2.close === "function") dialog2.close();
+      else dialog2.removeAttribute("open");
+    }
+  }, [open, layout]);
   const capture = useCallback2(async () => {
     setFailure(null);
     setCapturing(true);
@@ -2555,7 +2629,6 @@ function FoirFeedback({
         });
         setBody("");
         setContactEmail("");
-        setReceipt(written);
         setSent(true);
         onVisitorSubmitted?.(written);
       }
@@ -2563,7 +2636,15 @@ function FoirFeedback({
       const fault = classifyNotesFault(err);
       reportFault(fault, err, "sending feedback failed");
       onErrorRef.current?.(err);
-      setFailure(failureCopy(fault));
+      if (!probe.signedIn && fault.kind === "other") {
+        const now = await probeRefusal(client);
+        if (now) {
+          announceClosed(now, signIn);
+          setProbe({ status: "blocked", fault: now });
+          return;
+        }
+      }
+      setFailure(failureCopy(fault, signIn));
     } finally {
       setBusy(false);
     }
@@ -2574,157 +2655,214 @@ function FoirFeedback({
       return;
     }
     setSent(false);
-    setReceipt(null);
     setFailure(null);
     setOpen(true);
   };
   const subjectName = resolved ? label ?? resolved.label : void 0;
-  return /* @__PURE__ */ jsxs4("div", { className, "data-foir-feedback": true, children: [
-    /* @__PURE__ */ jsx5(
-      "button",
-      {
-        type: "button",
-        "data-foir-feedback-trigger": true,
-        "aria-expanded": open,
-        onClick: toggle,
-        style: styled ? buttonStyle : void 0,
-        children: triggerLabel
-      }
-    ),
-    open && /* @__PURE__ */ jsxs4(
-      "section",
-      {
-        "data-foir-feedback-panel": true,
-        "aria-label": title,
-        style: styled ? panelStyle : void 0,
-        children: [
-          /* @__PURE__ */ jsx5("h2", { "data-foir-feedback-title": true, style: styled ? headingStyle : void 0, children: title }),
-          subjectName && /* @__PURE__ */ jsxs4("p", { "data-foir-feedback-subject": true, style: styled ? subjectStyle : void 0, children: [
-            COPY.about,
-            ": ",
-            subjectName
-          ] }),
-          probe.status === "loading" && /* @__PURE__ */ jsx5(
-            "p",
+  const dialog = layout === "dialog";
+  const heading = /* @__PURE__ */ jsx5("h2", { "data-foir-feedback-title": true, style: styled ? headingStyle : void 0, children: title });
+  const panel = open && /* @__PURE__ */ jsxs4(
+    "section",
+    {
+      "data-foir-feedback-panel": true,
+      "aria-label": title,
+      style: styled ? dialog ? dialogPanelStyle : panelStyle : void 0,
+      children: [
+        dialog ? /* @__PURE__ */ jsxs4("div", { "data-foir-feedback-header": true, style: styled ? headerStyle : void 0, children: [
+          heading,
+          /* @__PURE__ */ jsx5(
+            "button",
             {
-              role: "status",
-              "data-foir-feedback-status": true,
-              style: styled ? noteStyle : void 0,
-              children: COPY.loading
+              type: "button",
+              "data-foir-feedback-close": true,
+              onClick: () => setOpen(false),
+              style: styled ? closeStyle : void 0,
+              children: COPY.close
+            }
+          )
+        ] }) : heading,
+        subjectName && /* @__PURE__ */ jsxs4("p", { "data-foir-feedback-subject": true, style: styled ? subjectStyle : void 0, children: [
+          COPY.about,
+          ": ",
+          subjectName
+        ] }),
+        probe.status === "loading" && /* @__PURE__ */ jsx5(
+          "p",
+          {
+            role: "status",
+            "data-foir-feedback-status": true,
+            style: styled ? noteStyle : void 0,
+            children: COPY.loading
+          }
+        ),
+        probe.status === "blocked" && /* @__PURE__ */ jsx5(
+          BlockedNotice,
+          {
+            fault: probe.fault,
+            onSignIn,
+            signIn,
+            styled
+          }
+        ),
+        probe.status === "ready" && !resolved && /* @__PURE__ */ jsx5(
+          "p",
+          {
+            role: "status",
+            "data-foir-feedback-status": true,
+            style: styled ? noteStyle : void 0,
+            children: COPY.noSubject
+          }
+        ),
+        probe.status === "ready" && resolved && /* @__PURE__ */ jsxs4("form", { onSubmit, style: styled ? stackStyle : void 0, children: [
+          /* @__PURE__ */ jsx5(
+            "textarea",
+            {
+              "data-foir-feedback-body": true,
+              "aria-label": placeholder,
+              placeholder,
+              required: true,
+              value: body,
+              disabled: busy,
+              onChange: (event) => {
+                setBody(event.target.value);
+                if (sent) setSent(false);
+              },
+              style: styled ? textareaStyle : void 0
             }
           ),
-          probe.status === "blocked" && /* @__PURE__ */ jsx5(BlockedNotice, { fault: probe.fault, onSignIn, styled }),
-          probe.status === "ready" && !resolved && /* @__PURE__ */ jsx5(
-            "p",
+          !probe.signedIn && /* @__PURE__ */ jsx5(
+            "input",
             {
-              role: "status",
-              "data-foir-feedback-status": true,
-              style: styled ? noteStyle : void 0,
-              children: COPY.noSubject
+              type: "email",
+              "data-foir-feedback-contact": true,
+              "aria-label": COPY.contactEmail,
+              placeholder: COPY.contactEmail,
+              autoComplete: "email",
+              value: contactEmail,
+              disabled: busy,
+              onChange: (event) => setContactEmail(event.target.value),
+              style: styled ? inputStyle2 : void 0
             }
           ),
-          probe.status === "ready" && resolved && /* @__PURE__ */ jsxs4("form", { onSubmit, style: styled ? stackStyle : void 0, children: [
+          probe.screenshotsEnabled && isFoirScreenCaptureSupported() && /* @__PURE__ */ jsx5(Fragment2, { children: screenshot ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
             /* @__PURE__ */ jsx5(
-              "textarea",
+              "img",
               {
-                "data-foir-feedback-body": true,
-                "aria-label": placeholder,
-                placeholder,
-                required: true,
-                value: body,
-                disabled: busy,
-                onChange: (event) => {
-                  setBody(event.target.value);
-                  if (sent) {
-                    setSent(false);
-                    setReceipt(null);
-                  }
-                },
-                style: styled ? textareaStyle : void 0
-              }
-            ),
-            !probe.signedIn && /* @__PURE__ */ jsx5(
-              "input",
-              {
-                type: "email",
-                "data-foir-feedback-contact": true,
-                "aria-label": COPY.contactEmail,
-                placeholder: COPY.contactEmail,
-                autoComplete: "email",
-                value: contactEmail,
-                disabled: busy,
-                onChange: (event) => setContactEmail(event.target.value),
-                style: styled ? inputStyle2 : void 0
+                "data-foir-feedback-screenshot": true,
+                src: screenshot.dataUrl,
+                alt: COPY.screenshotAlt,
+                style: styled ? previewStyle : void 0
               }
             ),
-            probe.screenshotsEnabled && isFoirScreenCaptureSupported() && /* @__PURE__ */ jsx5(Fragment2, { children: screenshot ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              /* @__PURE__ */ jsx5(
-                "img",
-                {
-                  "data-foir-feedback-screenshot": true,
-                  src: screenshot.dataUrl,
-                  alt: COPY.screenshotAlt,
-                  style: styled ? previewStyle : void 0
-                }
-              ),
-              /* @__PURE__ */ jsx5(
-                "button",
-                {
-                  type: "button",
-                  "data-foir-feedback-remove": true,
-                  onClick: () => setScreenshot(null),
-                  disabled: busy,
-                  style: styled ? buttonStyle : void 0,
-                  children: COPY.removeScreenshot
-                }
-              )
-            ] }) : /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx5(
               "button",
               {
                 type: "button",
-                "data-foir-feedback-capture": true,
-                onClick: () => void capture(),
-                disabled: busy || capturing,
+                "data-foir-feedback-remove": true,
+                onClick: () => setScreenshot(null),
+                disabled: busy,
                 style: styled ? buttonStyle : void 0,
-                children: capturing ? COPY.capturing : COPY.capture
-              }
-            ) }),
-            failure && /* @__PURE__ */ jsx5("p", { role: "alert", "data-foir-feedback-error": true, style: styled ? errorStyle2 : void 0, children: failure }),
-            sent && !failure && /* @__PURE__ */ jsx5(
-              "p",
-              {
-                role: "status",
-                "data-foir-feedback-status": true,
-                style: styled ? noteStyle : void 0,
-                children: COPY.sent
-              }
-            ),
-            sent && !failure && receipt && /* @__PURE__ */ jsxs4("p", { "data-foir-feedback-receipt": true, style: styled ? subjectStyle : void 0, children: [
-              COPY.reference,
-              ": ",
-              receipt.id
-            ] }),
-            /* @__PURE__ */ jsx5(
-              "button",
-              {
-                type: "submit",
-                "data-foir-feedback-submit": true,
-                disabled: busy || body.trim() === "",
-                style: styled ? submitStyle2 : void 0,
-                children: busy ? COPY.sending : COPY.send
+                children: COPY.removeScreenshot
               }
             )
-          ] })
-        ]
-      }
-    )
-  ] });
+          ] }) : /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              "data-foir-feedback-capture": true,
+              onClick: () => void capture(),
+              disabled: busy || capturing,
+              style: styled ? buttonStyle : void 0,
+              children: capturing ? COPY.capturing : COPY.capture
+            }
+          ) }),
+          failure && /* @__PURE__ */ jsx5("p", { role: "alert", "data-foir-feedback-error": true, style: styled ? errorStyle2 : void 0, children: failure }),
+          sent && !failure && /* @__PURE__ */ jsx5(
+            "p",
+            {
+              role: "status",
+              "data-foir-feedback-status": true,
+              style: styled ? noteStyle : void 0,
+              children: COPY.sent
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "submit",
+              "data-foir-feedback-submit": true,
+              disabled: busy || body.trim() === "",
+              style: styled ? submitStyle2 : void 0,
+              children: busy ? COPY.sending : COPY.send
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className,
+      "data-foir-feedback": true,
+      "data-foir-feedback-layout": layout,
+      style: styled ? wrapperStyle(appearance) : void 0,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            "data-foir-feedback-trigger": true,
+            "aria-expanded": open,
+            "aria-haspopup": dialog ? "dialog" : void 0,
+            onClick: toggle,
+            style: styled ? buttonStyle : void 0,
+            children: triggerLabel
+          }
+        ),
+        dialog ? /* @__PURE__ */ jsx5(
+          "dialog",
+          {
+            ref: dialogRef,
+            "data-foir-feedback-dialog": true,
+            "aria-label": title,
+            onClose: () => setOpen(false),
+            onClick: (event) => {
+              if (event.target === event.currentTarget) setOpen(false);
+            },
+            style: styled ? dialogStyle : void 0,
+            children: panel
+          }
+        ) : panel
+      ]
+    }
+  );
+}
+async function probeRefusal(client) {
+  try {
+    await readNoteConfig(client);
+    return null;
+  } catch (err) {
+    const fault = classifyNotesFault(err);
+    return fault.kind === "other" ? null : fault;
+  }
+}
+function announceClosed(fault, signIn) {
+  if (process.env.NODE_ENV === "production") return;
+  if (fault.kind !== "signIn" || signIn) return;
+  console.info(
+    `[foir] <FoirFeedback>: the project takes no notes from visitors who are not signed in, and signIn={false} says this site has no sign-in, so the widget says feedback is not open. Turn on "Accept anonymous notes" in the project's Notes settings to take them.`
+  );
 }
 function BlockedNotice({
   fault,
   onSignIn,
+  signIn,
   styled
 }) {
+  if (fault.kind === "signIn" && !signIn) {
+    return /* @__PURE__ */ jsx5("p", { role: "status", "data-foir-feedback-status": true, style: styled ? noteStyle : void 0, children: COPY.closed });
+  }
   if (fault.kind === "signIn") {
     return /* @__PURE__ */ jsxs4(Fragment2, { children: [
       /* @__PURE__ */ jsx5("p", { role: "status", "data-foir-feedback-status": true, style: styled ? noteStyle : void 0, children: COPY.signIn }),
@@ -2742,8 +2880,8 @@ function BlockedNotice({
   }
   return /* @__PURE__ */ jsx5("p", { role: "status", "data-foir-feedback-status": true, style: styled ? noteStyle : void 0, children: fault.kind === "scope" ? COPY.notEnabled : COPY.unavailable });
 }
-function failureCopy(fault) {
-  if (fault.kind === "signIn") return COPY.signIn;
+function failureCopy(fault, signIn) {
+  if (fault.kind === "signIn") return signIn ? COPY.signIn : COPY.closed;
   if (fault.kind === "scope") return COPY.notEnabled;
   return COPY.sendFailed;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foir/sdk",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "Official Foir SDK — editor iframe client + server-side platform helpers",
   "type": "module",
   "publishConfig": {
@@ -177,8 +177,8 @@
     "ws": "^8.18.0",
     "y-websocket": "^3.0.0",
     "yjs": "^13.6.30",
-    "@foir/access-vocab": "0.0.0",
-    "@foir/proto-ts": "0.109.0"
+    "@foir/proto-ts": "0.109.0",
+    "@foir/access-vocab": "0.0.0"
   },
   "engines": {
     "node": ">=18.0.0"