@sweberdev/witness-react 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,321 @@
+"use client";
+
+// src/AiContent.tsx
+import {
+  createMarking,
+  markingAttributes
+} from "@sweberdev/witness";
+import { useMemo as useMemo3 } from "react";
+
+// src/AiLabel.tsx
+import { format } from "@sweberdev/witness";
+import { useEffect as useEffect2, useId as useId2, useRef as useRef2, useState as useState2 } from "react";
+
+// src/AiNotice.tsx
+import { useEffect, useId, useState } from "react";
+
+// src/context.tsx
+import {
+  getMessages,
+  resolveLocale
+} from "@sweberdev/witness";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var WitnessContext = createContext(null);
+function WitnessProvider({ locale, messages, children }) {
+  const value = useMemo(
+    () => ({ locale: resolveLocale(locale), messages: getMessages(locale, messages) }),
+    [locale, messages]
+  );
+  return /* @__PURE__ */ jsx(WitnessContext.Provider, { value, children });
+}
+function useWitnessMessages(locale) {
+  const context = useContext(WitnessContext);
+  return useMemo(() => {
+    if (locale) return { locale: resolveLocale(locale), messages: getMessages(locale) };
+    return context ?? { locale: "en", messages: getMessages("en") };
+  }, [context, locale]);
+}
+
+// src/useAiDisclosure.ts
+import { createDisclosure } from "@sweberdev/witness";
+import { useCallback, useMemo as useMemo2, useRef, useSyncExternalStore } from "react";
+function useAiDisclosure(options = {}) {
+  const onEvent = useRef(options.onEvent);
+  onEvent.current = options.onEvent;
+  const { id, kind, version, locale, storage } = options;
+  const disclosure = useMemo2(
+    () => createDisclosure({
+      ...id ? { id } : {},
+      ...kind ? { kind } : {},
+      ...version ? { version } : {},
+      ...locale ? { locale } : {},
+      ...storage ? { storage } : {},
+      onEvent: (event) => onEvent.current?.(event)
+    }),
+    [id, kind, version, locale, storage]
+  );
+  const subscribe = useCallback(
+    (listener) => {
+      const unsubscribe = disclosure.subscribe(listener);
+      const onStorage = (event) => {
+        if (event.key === null || event.key.startsWith("witness:ack:")) listener();
+      };
+      if (typeof window !== "undefined") window.addEventListener("storage", onStorage);
+      return () => {
+        unsubscribe();
+        if (typeof window !== "undefined") window.removeEventListener("storage", onStorage);
+      };
+    },
+    [disclosure]
+  );
+  const acknowledgedAt = useSyncExternalStore(
+    subscribe,
+    () => disclosure.acknowledgedAt(),
+    () => null
+  );
+  return {
+    needsAcknowledgement: acknowledgedAt === null,
+    acknowledgedAt,
+    acknowledge: disclosure.acknowledge,
+    markShown: disclosure.markShown,
+    reset: disclosure.reset,
+    disclosure
+  };
+}
+
+// src/AiNotice.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function AiNotice({
+  kind = "chatbot",
+  id,
+  version,
+  locale,
+  href,
+  storage,
+  onEvent,
+  children,
+  className
+}) {
+  const { locale: code, messages } = useWitnessMessages(locale);
+  const disclosure = useAiDisclosure({
+    kind,
+    locale: code,
+    ...id ? { id } : {},
+    ...version ? { version } : {},
+    ...storage ? { storage } : {},
+    ...onEvent ? { onEvent } : {}
+  });
+  const [reopened, setReopened] = useState(false);
+  const titleId = useId();
+  const text = messages.kinds[kind];
+  const full = reopened || disclosure.needsAcknowledgement;
+  const { markShown } = disclosure;
+  useEffect(() => {
+    if (full) markShown();
+  }, [full, markShown]);
+  if (!full) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cx("witness-notice--compact", className),
+        "aria-label": `${text.label}: ${messages.ui.details}`,
+        onClick: () => setReopened(true),
+        children: [
+          /* @__PURE__ */ jsx2("span", { className: "witness-label__icon", "aria-hidden": "true", children: "AI" }),
+          text.label
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("section", { className: cx("witness-notice", className), role: "note", "aria-labelledby": titleId, children: [
+    /* @__PURE__ */ jsx2("span", { className: "witness-label__icon", "aria-hidden": "true", children: "AI" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx2("h2", { id: titleId, className: "witness-notice__title", children: text.title }),
+      /* @__PURE__ */ jsx2("p", { className: "witness-notice__body", children: children ?? text.body }),
+      /* @__PURE__ */ jsxs("div", { className: "witness-notice__actions", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "witness-notice__ack",
+            onClick: () => {
+              setReopened(false);
+              disclosure.acknowledge();
+            },
+            children: messages.ui.acknowledge
+          }
+        ),
+        href ? /* @__PURE__ */ jsx2("a", { href, children: messages.ui.moreInfo }) : null
+      ] })
+    ] })
+  ] });
+}
+function cx(...names) {
+  return names.filter(Boolean).join(" ");
+}
+
+// src/AiLabel.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function AiLabel({
+  kind = "generated",
+  generator,
+  generatorVersion,
+  createdAt,
+  reviewed,
+  href,
+  locale,
+  variant = "inline",
+  className
+}) {
+  const { locale: code, messages } = useWitnessMessages(locale);
+  const [open, setOpen] = useState2(false);
+  const panelId = useId2();
+  const root = useRef2(null);
+  const button = useRef2(null);
+  const text = messages.kinds[kind];
+  const name = [generator, generatorVersion].filter(Boolean).join(" ");
+  useEffect2(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        button.current?.focus();
+      }
+    };
+    const onClick = (event) => {
+      if (root.current && !root.current.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("click", onClick);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("click", onClick);
+    };
+  }, [open]);
+  const facts = [];
+  if (name) facts.push(format(messages.ui.generatedWith, { generator: name }));
+  if (createdAt) facts.push(format(messages.ui.createdOn, { date: formatDate(createdAt, code) }));
+  if (reviewed) facts.push(messages.ui.humanReviewed);
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      ref: root,
+      className: cx("witness-badge", `witness-badge--${variant}`, className),
+      style: variant === "overlay" ? overlayStyle : inlineStyle,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            ref: button,
+            type: "button",
+            className: "witness-label",
+            style: { margin: 0, font: "inherit", cursor: "pointer" },
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            title: messages.ui.details,
+            onClick: () => setOpen((value) => !value),
+            children: [
+              /* @__PURE__ */ jsx3("span", { className: "witness-label__icon", "aria-hidden": "true", children: "AI" }),
+              /* @__PURE__ */ jsx3("span", { className: "witness-label__text", children: text.label })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            id: panelId,
+            role: "dialog",
+            "aria-label": text.title,
+            className: "witness-badge__panel",
+            hidden: !open,
+            style: variant === "overlay" ? { ...panelStyle, right: 0 } : { ...panelStyle, left: 0 },
+            children: [
+              /* @__PURE__ */ jsx3("strong", { style: { display: "block", marginBottom: "0.25em" }, children: text.title }),
+              /* @__PURE__ */ jsx3("span", { style: { display: "block" }, children: text.body }),
+              facts.length > 0 ? /* @__PURE__ */ jsx3("ul", { style: { margin: "0.4em 0", paddingInlineStart: "1.1em" }, children: facts.map((fact) => /* @__PURE__ */ jsx3("li", { children: fact }, fact)) }) : null,
+              href ? /* @__PURE__ */ jsx3("a", { href, children: messages.ui.moreInfo }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var inlineStyle = { position: "relative", display: "inline-block" };
+var overlayStyle = { position: "absolute", top: "0.5em", right: "0.5em", zIndex: 1 };
+var panelStyle = {
+  position: "absolute",
+  top: "calc(100% + 0.4em)",
+  zIndex: 10,
+  width: "max-content",
+  maxWidth: "min(22em, 80vw)",
+  padding: "0.75em 0.875em",
+  border: "1px solid var(--witness-border, #d7dbe3)",
+  borderRadius: "var(--witness-radius, 8px)",
+  background: "var(--witness-bg, #fff)",
+  color: "var(--witness-fg, #1a1a1a)",
+  boxShadow: "0 6px 24px rgb(0 0 0 / 0.15)",
+  lineHeight: 1.45,
+  fontSize: "0.875rem",
+  textAlign: "start"
+};
+function formatDate(value, locale) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
+  } catch {
+    return value;
+  }
+}
+
+// src/AiContent.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function AiContent({
+  marking,
+  as: Tag = "div",
+  labelPosition = "top",
+  locale,
+  className,
+  children
+}) {
+  const m = useMemo3(() => createMarking(marking), [marking]);
+  const label = labelPosition === "none" ? null : /* @__PURE__ */ jsx4(
+    AiLabel,
+    {
+      kind: m.kind,
+      variant: labelPosition === "overlay" ? "overlay" : "inline",
+      createdAt: m.createdAt,
+      reviewed: m.humanReviewed,
+      ...m.generator ? { generator: m.generator } : {},
+      ...m.generatorVersion ? { generatorVersion: m.generatorVersion } : {},
+      ...m.disclosureUrl ? { href: m.disclosureUrl } : {},
+      ...locale ? { locale } : {}
+    }
+  );
+  const labelBlock = label && labelPosition !== "overlay" ? /* @__PURE__ */ jsx4("div", { style: { marginBlock: "0.5em" }, children: label }) : label;
+  return /* @__PURE__ */ jsxs3(
+    Tag,
+    {
+      className: cx("witness-content", className),
+      style: labelPosition === "overlay" ? { position: "relative" } : void 0,
+      ...markingAttributes(m),
+      children: [
+        labelPosition === "bottom" ? null : labelBlock,
+        children,
+        labelPosition === "bottom" ? labelBlock : null
+      ]
+    }
+  );
+}
+export {
+  AiContent,
+  AiLabel,
+  AiNotice,
+  WitnessProvider,
+  useAiDisclosure,
+  useWitnessMessages
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AiContent.tsx","../src/AiLabel.tsx","../src/AiNotice.tsx","../src/context.tsx","../src/useAiDisclosure.ts"],"sourcesContent":["import {\n  createMarking,\n  type Marking,\n  type MarkingInput,\n  markingAttributes,\n} from \"@sweberdev/witness\";\nimport { type ElementType, type ReactNode, useMemo } from \"react\";\nimport { AiLabel } from \"./AiLabel.js\";\nimport { cx } from \"./AiNotice.js\";\n\nexport interface AiContentProps {\n  marking: Marking | MarkingInput;\n  /** Element that wraps label and content. Default `div`. */\n  as?: ElementType;\n  /** Text should be labelled at the top (default). Use `overlay` for images and video. */\n  labelPosition?: \"top\" | \"bottom\" | \"overlay\" | \"none\";\n  locale?: string | readonly string[];\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Wraps AI-generated content: adds the `data-ai-*` marking attributes and a visible label.\n * With `labelPosition=\"overlay\"` the wrapper becomes `position: relative`.\n */\nexport function AiContent({\n  marking,\n  as: Tag = \"div\",\n  labelPosition = \"top\",\n  locale,\n  className,\n  children,\n}: AiContentProps) {\n  const m = useMemo(() => createMarking(marking), [marking]);\n  const label =\n    labelPosition === \"none\" ? null : (\n      <AiLabel\n        kind={m.kind}\n        variant={labelPosition === \"overlay\" ? \"overlay\" : \"inline\"}\n        createdAt={m.createdAt}\n        reviewed={m.humanReviewed}\n        {...(m.generator ? { generator: m.generator } : {})}\n        {...(m.generatorVersion ? { generatorVersion: m.generatorVersion } : {})}\n        {...(m.disclosureUrl ? { href: m.disclosureUrl } : {})}\n        {...(locale ? { locale } : {})}\n      />\n    );\n  const labelBlock =\n    label && labelPosition !== \"overlay\" ? (\n      <div style={{ marginBlock: \"0.5em\" }}>{label}</div>\n    ) : (\n      label\n    );\n  return (\n    <Tag\n      className={cx(\"witness-content\", className)}\n      style={labelPosition === \"overlay\" ? { position: \"relative\" } : undefined}\n      {...markingAttributes(m)}\n    >\n      {labelPosition === \"bottom\" ? null : labelBlock}\n      {children}\n      {labelPosition === \"bottom\" ? labelBlock : null}\n    </Tag>\n  );\n}\n","import { type ContentKind, type DisclosureKind, format } from \"@sweberdev/witness\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { cx } from \"./AiNotice.js\";\nimport { useWitnessMessages } from \"./context.js\";\n\nexport interface AiLabelProps {\n  /** Default `generated`. */\n  kind?: ContentKind | DisclosureKind;\n  generator?: string;\n  generatorVersion?: string;\n  /** ISO date or timestamp. */\n  createdAt?: string;\n  /** A person reviewed the content and holds editorial responsibility. */\n  reviewed?: boolean;\n  /** Link to a page that explains how you use AI. */\n  href?: string;\n  locale?: string | readonly string[];\n  /** `overlay` places the label in the top corner of a positioned parent, e.g. over an image. */\n  variant?: \"inline\" | \"overlay\";\n  className?: string;\n}\n\n/** A badge for AI-generated or AI-edited content. Clicking it shows what the label means. */\nexport function AiLabel({\n  kind = \"generated\",\n  generator,\n  generatorVersion,\n  createdAt,\n  reviewed,\n  href,\n  locale,\n  variant = \"inline\",\n  className,\n}: AiLabelProps) {\n  const { locale: code, messages } = useWitnessMessages(locale);\n  const [open, setOpen] = useState(false);\n  const panelId = useId();\n  const root = useRef<HTMLSpanElement>(null);\n  const button = useRef<HTMLButtonElement>(null);\n  const text = messages.kinds[kind];\n  const name = [generator, generatorVersion].filter(Boolean).join(\" \");\n\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n        button.current?.focus();\n      }\n    };\n    const onClick = (event: MouseEvent) => {\n      if (root.current && !root.current.contains(event.target as Node)) setOpen(false);\n    };\n    document.addEventListener(\"keydown\", onKey);\n    document.addEventListener(\"click\", onClick);\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.removeEventListener(\"click\", onClick);\n    };\n  }, [open]);\n\n  const facts: string[] = [];\n  if (name) facts.push(format(messages.ui.generatedWith, { generator: name }));\n  if (createdAt) facts.push(format(messages.ui.createdOn, { date: formatDate(createdAt, code) }));\n  if (reviewed) facts.push(messages.ui.humanReviewed);\n\n  return (\n    <span\n      ref={root}\n      className={cx(\"witness-badge\", `witness-badge--${variant}`, className)}\n      style={variant === \"overlay\" ? overlayStyle : inlineStyle}\n    >\n      <button\n        ref={button}\n        type=\"button\"\n        className=\"witness-label\"\n        style={{ margin: 0, font: \"inherit\", cursor: \"pointer\" }}\n        aria-expanded={open}\n        aria-controls={panelId}\n        title={messages.ui.details}\n        onClick={() => setOpen((value) => !value)}\n      >\n        <span className=\"witness-label__icon\" aria-hidden=\"true\">\n          AI\n        </span>\n        <span className=\"witness-label__text\">{text.label}</span>\n      </button>\n      <span\n        id={panelId}\n        role=\"dialog\"\n        aria-label={text.title}\n        className=\"witness-badge__panel\"\n        hidden={!open}\n        style={variant === \"overlay\" ? { ...panelStyle, right: 0 } : { ...panelStyle, left: 0 }}\n      >\n        <strong style={{ display: \"block\", marginBottom: \"0.25em\" }}>{text.title}</strong>\n        <span style={{ display: \"block\" }}>{text.body}</span>\n        {facts.length > 0 ? (\n          <ul style={{ margin: \"0.4em 0\", paddingInlineStart: \"1.1em\" }}>\n            {facts.map((fact) => (\n              <li key={fact}>{fact}</li>\n            ))}\n          </ul>\n        ) : null}\n        {href ? <a href={href}>{messages.ui.moreInfo}</a> : null}\n      </span>\n    </span>\n  );\n}\n\nconst inlineStyle = { position: \"relative\", display: \"inline-block\" } as const;\nconst overlayStyle = { position: \"absolute\", top: \"0.5em\", right: \"0.5em\", zIndex: 1 } as const;\nconst panelStyle = {\n  position: \"absolute\",\n  top: \"calc(100% + 0.4em)\",\n  zIndex: 10,\n  width: \"max-content\",\n  maxWidth: \"min(22em, 80vw)\",\n  padding: \"0.75em 0.875em\",\n  border: \"1px solid var(--witness-border, #d7dbe3)\",\n  borderRadius: \"var(--witness-radius, 8px)\",\n  background: \"var(--witness-bg, #fff)\",\n  color: \"var(--witness-fg, #1a1a1a)\",\n  boxShadow: \"0 6px 24px rgb(0 0 0 / 0.15)\",\n  lineHeight: 1.45,\n  fontSize: \"0.875rem\",\n  textAlign: \"start\",\n} as const;\n\nfunction formatDate(value: string, locale: string): string {\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return value;\n  try {\n    return new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" }).format(date);\n  } catch {\n    return value;\n  }\n}\n","import type { DisclosureEvent, DisclosureKind } from \"@sweberdev/witness\";\nimport { type ReactNode, useEffect, useId, useState } from \"react\";\nimport { useWitnessMessages } from \"./context.js\";\nimport { useAiDisclosure } from \"./useAiDisclosure.js\";\n\nexport interface AiNoticeProps {\n  /** Default `chatbot`. Also fits `emotion-recognition` and `biometric-categorisation`. */\n  kind?: DisclosureKind;\n  /** Your id for this disclosure. Default: the kind. */\n  id?: string;\n  /** Bump when the wording changes, so people see it again. Default \"1\". */\n  version?: string;\n  locale?: string | readonly string[];\n  /** Link to a page that explains how you use AI. */\n  href?: string;\n  storage?: \"local\" | \"session\" | \"memory\";\n  /** Evidence hook: called when the notice is shown and acknowledged. */\n  onEvent?: (event: DisclosureEvent) => void;\n  /** Replaces the default body text. */\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * The AI notice for a chat (Art. 50(1)): expanded until acknowledged, then a compact label\n * that stays visible and can be reopened. Style it with `@sweberdev/witness/styles.css`.\n */\nexport function AiNotice({\n  kind = \"chatbot\",\n  id,\n  version,\n  locale,\n  href,\n  storage,\n  onEvent,\n  children,\n  className,\n}: AiNoticeProps) {\n  const { locale: code, messages } = useWitnessMessages(locale);\n  const disclosure = useAiDisclosure({\n    kind,\n    locale: code,\n    ...(id ? { id } : {}),\n    ...(version ? { version } : {}),\n    ...(storage ? { storage } : {}),\n    ...(onEvent ? { onEvent } : {}),\n  });\n  const [reopened, setReopened] = useState(false);\n  const titleId = useId();\n  const text = messages.kinds[kind];\n  const full = reopened || disclosure.needsAcknowledgement;\n  const { markShown } = disclosure;\n\n  useEffect(() => {\n    if (full) markShown();\n  }, [full, markShown]);\n\n  if (!full) {\n    return (\n      <button\n        type=\"button\"\n        className={cx(\"witness-notice--compact\", className)}\n        aria-label={`${text.label}: ${messages.ui.details}`}\n        onClick={() => setReopened(true)}\n      >\n        <span className=\"witness-label__icon\" aria-hidden=\"true\">\n          AI\n        </span>\n        {text.label}\n      </button>\n    );\n  }\n\n  return (\n    <section className={cx(\"witness-notice\", className)} role=\"note\" aria-labelledby={titleId}>\n      <span className=\"witness-label__icon\" aria-hidden=\"true\">\n        AI\n      </span>\n      <div>\n        <h2 id={titleId} className=\"witness-notice__title\">\n          {text.title}\n        </h2>\n        <p className=\"witness-notice__body\">{children ?? text.body}</p>\n        <div className=\"witness-notice__actions\">\n          <button\n            type=\"button\"\n            className=\"witness-notice__ack\"\n            onClick={() => {\n              setReopened(false);\n              disclosure.acknowledge();\n            }}\n          >\n            {messages.ui.acknowledge}\n          </button>\n          {href ? <a href={href}>{messages.ui.moreInfo}</a> : null}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport function cx(...names: Array<string | undefined | false>): string {\n  return names.filter(Boolean).join(\" \");\n}\n","import {\n  getMessages,\n  type LocaleMessages,\n  type LocaleOverride,\n  resolveLocale,\n} from \"@sweberdev/witness\";\nimport { createContext, type ReactNode, useContext, useMemo } from \"react\";\n\ninterface WitnessContextValue {\n  locale: string;\n  messages: LocaleMessages;\n}\n\nconst WitnessContext = createContext<WitnessContextValue | null>(null);\n\nexport interface WitnessProviderProps {\n  /** A locale tag such as \"de-CH\", or a list such as `navigator.languages`. Default \"en\". */\n  locale?: string | readonly string[];\n  /** Overrides for the wording, e.g. the informal \"du\" in German. */\n  messages?: LocaleOverride;\n  children: ReactNode;\n}\n\n/** Sets the language and wording for all Witness components below it. */\nexport function WitnessProvider({ locale, messages, children }: WitnessProviderProps) {\n  const value = useMemo(\n    () => ({ locale: resolveLocale(locale), messages: getMessages(locale, messages) }),\n    [locale, messages],\n  );\n  return <WitnessContext.Provider value={value}>{children}</WitnessContext.Provider>;\n}\n\n/** The active locale and messages. A `locale` prop on a component wins over the provider. */\nexport function useWitnessMessages(locale?: string | readonly string[]): WitnessContextValue {\n  const context = useContext(WitnessContext);\n  return useMemo(() => {\n    if (locale) return { locale: resolveLocale(locale), messages: getMessages(locale) };\n    return context ?? { locale: \"en\", messages: getMessages(\"en\") };\n  }, [context, locale]);\n}\n","import { createDisclosure, type Disclosure, type DisclosureOptions } from \"@sweberdev/witness\";\nimport { useCallback, useMemo, useRef, useSyncExternalStore } from \"react\";\n\nexport interface UseAiDisclosureResult {\n  /** True until the current version was acknowledged. Always true during server rendering. */\n  needsAcknowledgement: boolean;\n  acknowledgedAt: string | null;\n  acknowledge: () => void;\n  /** Records that the notice was rendered (emits a `shown` event once). */\n  markShown: () => void;\n  reset: () => void;\n  disclosure: Disclosure;\n}\n\n/**\n * State for a custom AI disclosure UI. The server snapshot always needs acknowledgement, so\n * the full notice is in the server HTML and collapses after hydration for people who already\n * acknowledged it.\n */\nexport function useAiDisclosure(options: DisclosureOptions = {}): UseAiDisclosureResult {\n  const onEvent = useRef(options.onEvent);\n  onEvent.current = options.onEvent;\n  const { id, kind, version, locale, storage } = options;\n\n  const disclosure = useMemo(\n    () =>\n      createDisclosure({\n        ...(id ? { id } : {}),\n        ...(kind ? { kind } : {}),\n        ...(version ? { version } : {}),\n        ...(locale ? { locale } : {}),\n        ...(storage ? { storage } : {}),\n        onEvent: (event) => onEvent.current?.(event),\n      }),\n    [id, kind, version, locale, storage],\n  );\n\n  const subscribe = useCallback(\n    (listener: () => void) => {\n      const unsubscribe = disclosure.subscribe(listener);\n      // Another tab acknowledged or reset: the browser tells us through a storage event.\n      const onStorage = (event: StorageEvent) => {\n        if (event.key === null || event.key.startsWith(\"witness:ack:\")) listener();\n      };\n      if (typeof window !== \"undefined\") window.addEventListener(\"storage\", onStorage);\n      return () => {\n        unsubscribe();\n        if (typeof window !== \"undefined\") window.removeEventListener(\"storage\", onStorage);\n      };\n    },\n    [disclosure],\n  );\n  const acknowledgedAt = useSyncExternalStore(\n    subscribe,\n    () => disclosure.acknowledgedAt(),\n    () => null,\n  );\n\n  return {\n    needsAcknowledgement: acknowledgedAt === null,\n    acknowledgedAt,\n    acknowledge: disclosure.acknowledge,\n    markShown: disclosure.markShown,\n    reset: disclosure.reset,\n    disclosure,\n  };\n}\n"],"mappings":"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","names":["useMemo","useEffect","useId","useRef","useState","useMemo","jsx","jsx","jsxs","useState","useId","useRef","useEffect","jsx","jsxs","useMemo"]}

package/package.json

@@ -1,6 +1,75 @@
 {
   "name": "@sweberdev/witness-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "React components for Witness: chatbot AI notice, AI labels and marked content blocks for Article 50 of the EU AI Act.",
+  "license": "MIT",
+  "author": "Seya Weber (https://github.com/sxwxbxr)",
+  "homepage": "https://packages.sweber.dev/witness/docs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Weber-Development/witness.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/Weber-Development/witness/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "ai-act",
+    "article-50",
+    "ai-label",
+    "ai-disclosure",
+    "react",
+    "chatbot"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@sweberdev/witness": "^0.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.20.5",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.3.0",
+    "jsdom": "^27.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.0",
+    "vitest": "^5.0.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json"
+  }
 }

package/src/AiContent.tsx

@@ -0,0 +1,65 @@
+import {
+  createMarking,
+  type Marking,
+  type MarkingInput,
+  markingAttributes,
+} from "@sweberdev/witness";
+import { type ElementType, type ReactNode, useMemo } from "react";
+import { AiLabel } from "./AiLabel.js";
+import { cx } from "./AiNotice.js";
+
+export interface AiContentProps {
+  marking: Marking | MarkingInput;
+  /** Element that wraps label and content. Default `div`. */
+  as?: ElementType;
+  /** Text should be labelled at the top (default). Use `overlay` for images and video. */
+  labelPosition?: "top" | "bottom" | "overlay" | "none";
+  locale?: string | readonly string[];
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * Wraps AI-generated content: adds the `data-ai-*` marking attributes and a visible label.
+ * With `labelPosition="overlay"` the wrapper becomes `position: relative`.
+ */
+export function AiContent({
+  marking,
+  as: Tag = "div",
+  labelPosition = "top",
+  locale,
+  className,
+  children,
+}: AiContentProps) {
+  const m = useMemo(() => createMarking(marking), [marking]);
+  const label =
+    labelPosition === "none" ? null : (
+      <AiLabel
+        kind={m.kind}
+        variant={labelPosition === "overlay" ? "overlay" : "inline"}
+        createdAt={m.createdAt}
+        reviewed={m.humanReviewed}
+        {...(m.generator ? { generator: m.generator } : {})}
+        {...(m.generatorVersion ? { generatorVersion: m.generatorVersion } : {})}
+        {...(m.disclosureUrl ? { href: m.disclosureUrl } : {})}
+        {...(locale ? { locale } : {})}
+      />
+    );
+  const labelBlock =
+    label && labelPosition !== "overlay" ? (
+      <div style={{ marginBlock: "0.5em" }}>{label}</div>
+    ) : (
+      label
+    );
+  return (
+    <Tag
+      className={cx("witness-content", className)}
+      style={labelPosition === "overlay" ? { position: "relative" } : undefined}
+      {...markingAttributes(m)}
+    >
+      {labelPosition === "bottom" ? null : labelBlock}
+      {children}
+      {labelPosition === "bottom" ? labelBlock : null}
+    </Tag>
+  );
+}

package/src/AiLabel.tsx

@@ -0,0 +1,138 @@
+import { type ContentKind, type DisclosureKind, format } from "@sweberdev/witness";
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "./AiNotice.js";
+import { useWitnessMessages } from "./context.js";
+
+export interface AiLabelProps {
+  /** Default `generated`. */
+  kind?: ContentKind | DisclosureKind;
+  generator?: string;
+  generatorVersion?: string;
+  /** ISO date or timestamp. */
+  createdAt?: string;
+  /** A person reviewed the content and holds editorial responsibility. */
+  reviewed?: boolean;
+  /** Link to a page that explains how you use AI. */
+  href?: string;
+  locale?: string | readonly string[];
+  /** `overlay` places the label in the top corner of a positioned parent, e.g. over an image. */
+  variant?: "inline" | "overlay";
+  className?: string;
+}
+
+/** A badge for AI-generated or AI-edited content. Clicking it shows what the label means. */
+export function AiLabel({
+  kind = "generated",
+  generator,
+  generatorVersion,
+  createdAt,
+  reviewed,
+  href,
+  locale,
+  variant = "inline",
+  className,
+}: AiLabelProps) {
+  const { locale: code, messages } = useWitnessMessages(locale);
+  const [open, setOpen] = useState(false);
+  const panelId = useId();
+  const root = useRef<HTMLSpanElement>(null);
+  const button = useRef<HTMLButtonElement>(null);
+  const text = messages.kinds[kind];
+  const name = [generator, generatorVersion].filter(Boolean).join(" ");
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        button.current?.focus();
+      }
+    };
+    const onClick = (event: MouseEvent) => {
+      if (root.current && !root.current.contains(event.target as Node)) setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("click", onClick);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("click", onClick);
+    };
+  }, [open]);
+
+  const facts: string[] = [];
+  if (name) facts.push(format(messages.ui.generatedWith, { generator: name }));
+  if (createdAt) facts.push(format(messages.ui.createdOn, { date: formatDate(createdAt, code) }));
+  if (reviewed) facts.push(messages.ui.humanReviewed);
+
+  return (
+    <span
+      ref={root}
+      className={cx("witness-badge", `witness-badge--${variant}`, className)}
+      style={variant === "overlay" ? overlayStyle : inlineStyle}
+    >
+      <button
+        ref={button}
+        type="button"
+        className="witness-label"
+        style={{ margin: 0, font: "inherit", cursor: "pointer" }}
+        aria-expanded={open}
+        aria-controls={panelId}
+        title={messages.ui.details}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <span className="witness-label__icon" aria-hidden="true">
+          AI
+        </span>
+        <span className="witness-label__text">{text.label}</span>
+      </button>
+      <span
+        id={panelId}
+        role="dialog"
+        aria-label={text.title}
+        className="witness-badge__panel"
+        hidden={!open}
+        style={variant === "overlay" ? { ...panelStyle, right: 0 } : { ...panelStyle, left: 0 }}
+      >
+        <strong style={{ display: "block", marginBottom: "0.25em" }}>{text.title}</strong>
+        <span style={{ display: "block" }}>{text.body}</span>
+        {facts.length > 0 ? (
+          <ul style={{ margin: "0.4em 0", paddingInlineStart: "1.1em" }}>
+            {facts.map((fact) => (
+              <li key={fact}>{fact}</li>
+            ))}
+          </ul>
+        ) : null}
+        {href ? <a href={href}>{messages.ui.moreInfo}</a> : null}
+      </span>
+    </span>
+  );
+}
+
+const inlineStyle = { position: "relative", display: "inline-block" } as const;
+const overlayStyle = { position: "absolute", top: "0.5em", right: "0.5em", zIndex: 1 } as const;
+const panelStyle = {
+  position: "absolute",
+  top: "calc(100% + 0.4em)",
+  zIndex: 10,
+  width: "max-content",
+  maxWidth: "min(22em, 80vw)",
+  padding: "0.75em 0.875em",
+  border: "1px solid var(--witness-border, #d7dbe3)",
+  borderRadius: "var(--witness-radius, 8px)",
+  background: "var(--witness-bg, #fff)",
+  color: "var(--witness-fg, #1a1a1a)",
+  boxShadow: "0 6px 24px rgb(0 0 0 / 0.15)",
+  lineHeight: 1.45,
+  fontSize: "0.875rem",
+  textAlign: "start",
+} as const;
+
+function formatDate(value: string, locale: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
+  } catch {
+    return value;
+  }
+}