+
- {
+ activePanel: DemoPanel;
+ onChangePanel: (panel: DemoPanel) => void;
+ panels: {
+ data: React.ReactNode;
+ next: React.ReactNode;
+ status: React.ReactNode;
+ };
+}
+
+const panelLabels: Record = {
+ data: "Data",
+ next: "Next action",
+ status: "Status",
+};
+
+export function CaptureDetailsPanel({
+ activePanel,
+ className,
+ onChangePanel,
+ panels,
+ ...props
+}: CaptureDetailsPanelProps) {
+ return (
+ {
+ accent: {
+ dot: string;
+ dotMuted: string;
+ text: string;
+ };
+ steps: CaptureStep[];
+ stepStates: Record;
+}
+
+function formatDuration(durationMs?: number) {
+ if (typeof durationMs !== "number") return null;
+ if (durationMs < 1000) return `${Math.round(durationMs)}ms`;
+ return `${(durationMs / 1000).toFixed(2)}s`;
+}
+
+export function CaptureWorkflowTimeline({
+ accent,
+ className,
+ steps,
+ stepStates,
+ ...props
+}: CaptureWorkflowTimelineProps) {
+ return (
+ ;
+ pageContext?: PageContext;
+ payload?: AnyclickPayload;
+ screenshots?: ScreenshotData | null;
+};
+
+const OFFSCREEN_POSITION = { x: -9999, y: -9999 };
+
+function nowMs() {
+ if (typeof performance !== "undefined" && typeof performance.now === "function")
+ return performance.now();
+ return Date.now();
+}
+
+async function sleep(ms: number) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function safeJson(value: unknown) {
+ try {
+ return JSON.stringify(value, null, 2);
+ } catch {
+ return JSON.stringify({ error: "Failed to serialize JSON" }, null, 2);
+ }
+}
+
+function summarizeScreenshotCapture(capture?: ScreenshotCapture) {
+ if (!capture) return null;
+ return {
+ height: capture.height,
+ sizeBytes: capture.sizeBytes,
+ sizeHuman: formatBytes(capture.sizeBytes),
+ width: capture.width,
+ };
+}
+
+function summarizeScreenshots(screenshots: ScreenshotData | null | undefined) {
+ if (!screenshots) return null;
+ return {
+ capturedAt: screenshots.capturedAt,
+ container: summarizeScreenshotCapture(screenshots.container),
+ element: summarizeScreenshotCapture(screenshots.element),
+ errors: screenshots.errors,
+ viewport: summarizeScreenshotCapture(screenshots.viewport),
+ };
+}
+
+function buildGitHubIssueMarkdown(input: {
+ element: ElementContext;
+ page: PageContext;
+ screenshots?: ScreenshotData | null;
+}) {
+ const { element, page } = input;
+ const screenshots = summarizeScreenshots(input.screenshots);
+
+ const lines: string[] = [
+ `## Summary`,
+ ``,
+ `Right-click capture on **${element.tag}** at \`${element.selector}\`.`,
+ ``,
+ `## Page`,
+ `- URL: ${page.url}`,
+ `- Title: ${page.title}`,
+ ``,
+ `## Element`,
+ `- Tag: \`${element.tag}\``,
+ element.id ? `- ID: \`${element.id}\`` : `- ID: _(none)_`,
+ element.classes.length
+ ? `- Classes: \`${element.classes.slice(0, 6).join(" ")}\``
+ : `- Classes: _(none)_`,
+ ``,
+ `## Context`,
+ `- Ancestors captured: ${element.ancestors.length}`,
+ `- data-* keys: ${Object.keys(element.dataAttributes).length}`,
+ ``,
+ `## Screenshots`,
+ ];
+
+ if (!screenshots) {
+ lines.push(`- Not captured`);
+ } else {
+ lines.push(
+ `- Element: ${screenshots.element ? screenshots.element.sizeHuman : "n/a"}`,
+ `- Container: ${
+ screenshots.container ? screenshots.container.sizeHuman : "n/a"
+ }`,
+ `- Viewport: ${
+ screenshots.viewport ? screenshots.viewport.sizeHuman : "n/a"
+ }`,
+ screenshots.errors
+ ? `- Errors: ${Object.keys(screenshots.errors).join(", ")}`
+ : `- Errors: none`,
+ );
+ }
+
+ lines.push(
+ ``,
+ `---`,
+ `_(This is a demo draft; no network calls are made.)_`,
+ );
+
+ return lines.join("\n");
+}
+
+function buildAgentInput(input: {
+ element: ElementContext;
+ page: PageContext;
+ screenshots?: ScreenshotData | null;
+}) {
+ const screenshots = summarizeScreenshots(input.screenshots);
+ return {
+ title: "Quick Ask Agent Input (demo)",
+ prompt:
+ "Explain what this element is, why it matters, and what the next debugging action should be.",
+ context: {
+ page: {
+ title: input.page.title,
+ url: input.page.url,
+ },
+ element: {
+ selector: input.element.selector,
+ tag: input.element.tag,
+ id: input.element.id ?? null,
+ classes: input.element.classes,
+ dataAttributes: input.element.dataAttributes,
+ ancestors: input.element.ancestors,
+ },
+ screenshots,
+ },
+ };
+}
+
+function buildIntegrationSnippet(mode: IntegrationMode) {
+ const scopeComment =
+ mode.scope === "scoped"
+ ? `// Scoped: only captures inside a subtree`
+ : `// Global: captures across the document`;
+
+ if (mode.framework === "react") {
+ return [
+ `import { AnyclickProvider } from "@ewjdev/anyclick-react";`,
+ `import { createHttpAdapter } from "@ewjdev/anyclick-github";`,
+ ``,
+ `const adapter = createHttpAdapter({ endpoint: "/api/feedback" });`,
+ ``,
+ scopeComment,
+ ``,
+ ` `,
+ ].join("\n");
+ }
+
+ return [
+ `import { createAnyclickClient } from "@ewjdev/anyclick-core";`,
+ ``,
+ `const client = createAnyclickClient({`,
+ ` adapter: { submitAnyclick: async (payload) => console.log(payload) },`,
+ ` // targetFilter: (event, el) => true,`,
+ `});`,
+ ``,
+ scopeComment,
+ `client.attach();`,
+ ].join("\n");
+}
+
+function buildZeroConfigSnippet() {
+ return [
+ `# install`,
+ `yarn add @ewjdev/anyclick-react @ewjdev/anyclick-github`,
+ ``,
+ `# wrap`,
+ `import { AnyclickProvider } from "@ewjdev/anyclick-react";`,
+ `import { createHttpAdapter } from "@ewjdev/anyclick-github";`,
+ ``,
+ `const adapter = createHttpAdapter({ endpoint: "/api/feedback" });`,
+ ``,
+ ``,
+ ` `,
+ ].join("\n");
+}
+
+function createInitialStepStates(): Record {
+ return {
+ connected: { status: "idle" },
+ container: { status: "idle" },
+ element: { status: "idle" },
+ metadata: { status: "idle" },
+ };
+}
+
+export interface FeatureCaptureDemoProps
+ extends React.HTMLAttributes {
+ feature: FeatureConfig;
+}
+
+export function FeatureCaptureDemo({
+ className,
+ feature,
+ ...props
+}: FeatureCaptureDemoProps) {
+ const [activePanel, setActivePanel] = React.useState(
+ feature.demo.defaultPanel,
+ );
+ const [runStatus, setRunStatus] = React.useState("idle");
+ const [stepStates, setStepStates] = React.useState<
+ Record
+ >(createInitialStepStates);
+ const [artifacts, setArtifacts] = React.useState({});
+
+ // Subtle interaction variants
+ const [isTargetPickerEnabled, setIsTargetPickerEnabled] = React.useState(false);
+ const [selectedTargetKey, setSelectedTargetKey] = React.useState("primary");
+ const [integrationMode, setIntegrationMode] = React.useState({
+ framework: "react",
+ scope: "global",
+ });
+
+ // Demo element refs
+ const containerRef = React.useRef(null);
+ const targetRefs = React.useRef>({});
+ const setTargetRef = React.useCallback(
+ (key: string) => (node: HTMLElement | null) => {
+ targetRefs.current[key] = node;
+ },
+ [],
+ );
+
+ // Right-click menu state (card-local)
+ const [menuVisible, setMenuVisible] = React.useState(false);
+ const [menuPosition, setMenuPosition] = React.useState(OFFSCREEN_POSITION);
+
+ const runTokenRef = React.useRef(0);
+
+ const steps: CaptureStep[] = React.useMemo(
+ () => [
+ { id: "element", label: "Capture element" },
+ { id: "container", label: "Capture container" },
+ { id: "connected", label: "Get connected data" },
+ { id: "metadata", label: "Shape anyclick metadata" },
+ ],
+ [],
+ );
+
+ const reset = React.useCallback(() => {
+ runTokenRef.current += 1;
+ setRunStatus("idle");
+ setStepStates(createInitialStepStates());
+ setArtifacts({});
+ setActivePanel(feature.demo.defaultPanel);
+ setMenuVisible(false);
+ setMenuPosition(OFFSCREEN_POSITION);
+ }, [feature.demo.defaultPanel]);
+
+ const updateStep = React.useCallback(
+ (stepId: CaptureStepId, patch: Partial) => {
+ setStepStates((prev) => ({
+ ...prev,
+ [stepId]: { ...prev[stepId], ...patch },
+ }));
+ },
+ [],
+ );
+
+ const getActiveTargetElement = React.useCallback((): HTMLElement | null => {
+ const explicit = targetRefs.current[selectedTargetKey];
+ if (explicit) return explicit;
+ return targetRefs.current.primary ?? null;
+ }, [selectedTargetKey]);
+
+ const copyToClipboard = React.useCallback(async (text: string) => {
+ try {
+ await navigator.clipboard.writeText(text);
+ showToast("Copied to clipboard", "success");
+ } catch {
+ showToast("Failed to copy", "error");
+ }
+ }, []);
+
+ const handleAction = React.useCallback(
+ async (action: FeatureDemoAction) => {
+ if (action.kind === "setPanel") {
+ setActivePanel(action.panel);
+ return;
+ }
+ if (action.kind === "reset") {
+ reset();
+ return;
+ }
+ if (action.kind === "toggleTargetPicker") {
+ setIsTargetPickerEnabled((prev) => !prev);
+ return;
+ }
+ if (action.kind === "toggleIntegrationMode") {
+ setIntegrationMode((prev) => ({
+ framework: prev.framework === "react" ? "vanilla" : "react",
+ scope: prev.scope === "global" ? "scoped" : "global",
+ }));
+ return;
+ }
+ if (action.kind === "retakeScreenshots") {
+ // Just re-run capture with screenshots enabled (if this card supports it)
+ // and keep the user on Data panel.
+ setActivePanel("data");
+ action = { kind: "startCapture", setActivePanel: "data" };
+ }
+ if (action.kind === "copy") {
+ const screenshotsSummary = summarizeScreenshots(artifacts.screenshots);
+ const payloadForCopy = artifacts.payload
+ ? {
+ ...artifacts.payload,
+ screenshots: artifacts.payload.screenshots
+ ? summarizeScreenshots(artifacts.payload.screenshots)
+ : screenshotsSummary ?? undefined,
+ }
+ : null;
+
+ if (action.target === "payloadJson") {
+ await copyToClipboard(payloadForCopy ? safeJson(payloadForCopy) : "{}");
+ return;
+ }
+ if (action.target === "issueMarkdown") {
+ await copyToClipboard(artifacts.issueMarkdown ?? "");
+ return;
+ }
+ if (action.target === "agentContext") {
+ await copyToClipboard(safeJson(artifacts.agentInput ?? {}));
+ return;
+ }
+ if (action.target === "snippet") {
+ const snippet =
+ feature.id === "framework-agnostic"
+ ? buildIntegrationSnippet(integrationMode)
+ : artifacts.integrationSnippet ?? "";
+ await copyToClipboard(snippet);
+ return;
+ }
+ if (action.target === "commands") {
+ await copyToClipboard(buildZeroConfigSnippet());
+ return;
+ }
+ if (action.target === "screenshotSummary") {
+ await copyToClipboard(safeJson(screenshotsSummary ?? {}));
+ return;
+ }
+ }
+
+ if (action.kind === "startCapture") {
+ const token = (runTokenRef.current += 1);
+ setRunStatus("running");
+ setStepStates(createInitialStepStates());
+ setArtifacts({});
+
+ const targetEl = getActiveTargetElement();
+ const containerEl = containerRef.current;
+
+ if (!targetEl || !containerEl) {
+ setRunStatus("idle");
+ updateStep("element", {
+ status: "error",
+ errorMessage: "Demo elements not ready",
+ });
+ return;
+ }
+
+ let elementContext: ElementContext | undefined;
+ let containerContext: ElementContext | undefined;
+ let inspectInfo: ElementInspectInfo | undefined;
+ let pageContext: PageContext | undefined;
+ let screenshots: ScreenshotData | null | undefined;
+ let connectedData: unknown;
+ let issueMarkdown: string | undefined;
+ let agentInput: unknown;
+ let integrationSnippet: string | undefined;
+
+ // Step 1: element
+ {
+ const start = nowMs();
+ updateStep("element", {
+ status: "running",
+ detail: "Building element selector + attributes…",
+ });
+ try {
+ elementContext = buildElementContext(targetEl);
+ inspectInfo = feature.demo.runner.includeInspectInfo
+ ? getElementInspectInfo(targetEl)
+ : undefined;
+
+ // ensure the UI updates even when capture is instant
+ await sleep(200);
+ if (runTokenRef.current !== token) return;
+
+ setArtifacts((prev) => ({
+ ...prev,
+ elementContext: elementContext!,
+ inspectInfo,
+ }));
+ updateStep("element", {
+ status: "success",
+ durationMs: nowMs() - start,
+ detail: `Selector: ${elementContext!.selector}`,
+ });
+ } catch (err) {
+ if (runTokenRef.current !== token) return;
+ updateStep("element", {
+ status: "error",
+ durationMs: nowMs() - start,
+ errorMessage: err instanceof Error ? err.message : String(err),
+ });
+ setRunStatus("idle");
+ return;
+ }
+ }
+
+ // Step 2: container
+ {
+ const start = nowMs();
+ updateStep("container", {
+ status: "running",
+ detail: "Capturing container context…",
+ });
+ try {
+ containerContext = buildElementContext(containerEl);
+ await sleep(200);
+ if (runTokenRef.current !== token) return;
+ setArtifacts((prev) => ({ ...prev, containerContext: containerContext! }));
+ updateStep("container", {
+ status: "success",
+ durationMs: nowMs() - start,
+ detail: `Selector: ${containerContext!.selector}`,
+ });
+ } catch (err) {
+ if (runTokenRef.current !== token) return;
+ // Fallback: simulate container
+ containerContext = elementContext;
+ setArtifacts((prev) => ({
+ ...prev,
+ containerContext: elementContext,
+ }));
+ updateStep("container", {
+ status: "simulated",
+ durationMs: nowMs() - start,
+ detail: "Using element context as container fallback",
+ });
+ }
+ }
+
+ // Step 3: connected data (screenshots, page context, feature-specific outputs)
+ {
+ const start = nowMs();
+ updateStep("connected", {
+ status: "running",
+ detail: "Collecting page + connected context…",
+ });
+
+ try {
+ pageContext = buildPageContext();
+ screenshots = undefined;
+
+ if (feature.demo.runner.enableScreenshots) {
+ updateStep("connected", {
+ status: "running",
+ detail: isScreenshotSupported()
+ ? "Capturing element/container/viewport…"
+ : "Screenshots unsupported; capturing errors…",
+ });
+ screenshots = await captureAllScreenshots(
+ targetEl,
+ containerEl,
+ // keep safe defaults for homepage demo; don’t show the preview UI
+ {
+ enabled: true,
+ showPreview: false,
+ },
+ );
+ }
+
+ // Feature-specific connected data + next action prep
+ connectedData =
+ feature.id === "github-integration"
+ ? {
+ issueTitle: `Issue: ${elementContext!.tag} @ ${elementContext!.selector}`,
+ labels: ["anyclick", "demo"],
+ }
+ : feature.id === "ai-agent"
+ ? {
+ intent: "Ask AI",
+ suggestedPrompts: [
+ "Why is this element here?",
+ "What should I debug next?",
+ ],
+ }
+ : feature.id === "visual-capture"
+ ? {
+ screenshots: summarizeScreenshots(screenshots),
+ masking: { sensitiveSelectors: "defaults" },
+ }
+ : feature.id === "framework-agnostic"
+ ? {
+ mode: integrationMode,
+ note: "Adapter + client wiring varies by environment",
+ }
+ : feature.id === "zero-config"
+ ? {
+ defaults: {
+ highlight: true,
+ screenshots: true,
+ menu: "preset",
+ },
+ }
+ : {
+ ancestors: elementContext!.ancestors.slice(0, 3),
+ dataAttributes: elementContext!.dataAttributes,
+ };
+
+ // Next action outputs
+ issueMarkdown =
+ feature.id === "github-integration"
+ ? buildGitHubIssueMarkdown({
+ element: elementContext!,
+ page: pageContext!,
+ screenshots: screenshots ?? null,
+ })
+ : undefined;
+
+ agentInput =
+ feature.id === "ai-agent"
+ ? buildAgentInput({
+ element: elementContext!,
+ page: pageContext!,
+ screenshots: screenshots ?? null,
+ })
+ : undefined;
+
+ integrationSnippet =
+ feature.id === "framework-agnostic"
+ ? buildIntegrationSnippet(integrationMode)
+ : undefined;
+
+ await sleep(250);
+ if (runTokenRef.current !== token) return;
+
+ setArtifacts((prev) => ({
+ ...prev,
+ agentInput,
+ connectedData,
+ integrationSnippet,
+ issueMarkdown,
+ pageContext,
+ screenshots: screenshots ?? null,
+ }));
+
+ updateStep("connected", {
+ status: "success",
+ durationMs: nowMs() - start,
+ detail:
+ feature.demo.runner.enableScreenshots && screenshots
+ ? `Screenshots: ${
+ summarizeScreenshots(screenshots)?.errors ? "partial" : "ok"
+ }`
+ : `Connected context captured`,
+ });
+ } catch (err) {
+ if (runTokenRef.current !== token) return;
+ updateStep("connected", {
+ status: "error",
+ durationMs: nowMs() - start,
+ errorMessage: err instanceof Error ? err.message : String(err),
+ });
+ setRunStatus("idle");
+ return;
+ }
+ }
+
+ // Step 4: shape metadata + payload
+ {
+ const start = nowMs();
+ updateStep("metadata", {
+ status: "running",
+ detail: "Shaping metadata + payload…",
+ });
+ try {
+ const screenshotSummary = summarizeScreenshots(screenshots ?? null);
+
+ const metadata: Record = {
+ demo: true,
+ featureId: feature.id,
+ selectedTargetKey,
+ containerContext: containerContext ?? null,
+ connectedData: connectedData ?? null,
+ screenshots: screenshotSummary,
+ integrationMode:
+ feature.id === "framework-agnostic" ? integrationMode : undefined,
+ };
+
+ const payload = buildAnyclickPayload(targetEl, feature.id, {
+ metadata,
+ });
+
+ // Attach screenshots for demo purposes (payload supports it)
+ if (screenshots) {
+ payload.screenshots = screenshots;
+ }
+
+ await sleep(200);
+ if (runTokenRef.current !== token) return;
+
+ setArtifacts((prev) => ({
+ ...prev,
+ metadata,
+ payload,
+ // Keep the page context captured in step 3 for display
+ pageContext: prev.pageContext ?? pageContext,
+ }));
+ updateStep("metadata", {
+ status: "success",
+ durationMs: nowMs() - start,
+ detail: `Payload type: ${payload.type}`,
+ });
+ setRunStatus("success");
+
+ if (action.setActivePanel) {
+ setActivePanel(action.setActivePanel);
+ }
+ } catch (err) {
+ if (runTokenRef.current !== token) return;
+ updateStep("metadata", {
+ status: "error",
+ durationMs: nowMs() - start,
+ errorMessage: err instanceof Error ? err.message : String(err),
+ });
+ setRunStatus("idle");
+ return;
+ }
+ }
+ }
+ },
+ [
+ artifacts,
+ copyToClipboard,
+ feature.demo.defaultPanel,
+ feature.demo.runner.enableScreenshots,
+ feature.demo.runner.includeInspectInfo,
+ feature.id,
+ getActiveTargetElement,
+ integrationMode,
+ reset,
+ selectedTargetKey,
+ updateStep,
+ ],
+ );
+
+ const handleTargetClick = React.useCallback(
+ (key: string) => {
+ if (!isTargetPickerEnabled) return;
+ setSelectedTargetKey(key);
+ setIsTargetPickerEnabled(false);
+ showToast(`Target selected: ${key}`, "info");
+ },
+ [isTargetPickerEnabled],
+ );
+
+ const menuItems: ContextMenuItem[] = React.useMemo(() => {
+ return feature.demo.menuItems.map((item) => ({
+ icon: item.icon,
+ label: item.label,
+ showComment: false,
+ type: `demo-${feature.id}-${item.id}`,
+ onClick: async ({ closeMenu }) => {
+ closeMenu();
+ await handleAction(item.action);
+ },
+ }));
+ }, [feature.demo.menuItems, feature.id, handleAction]);
+
+ const onOpenMenu = React.useCallback(
+ (e: React.MouseEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setMenuPosition({ x: e.clientX, y: e.clientY });
+ setMenuVisible(true);
+ },
+ [],
+ );
+
+ const onCloseMenu = React.useCallback(() => {
+ setMenuVisible(false);
+ setMenuPosition(OFFSCREEN_POSITION);
+ }, []);
+
+ const demoHeader = (
+
+
+ {!isExpanded ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ );
+}
+
diff --git a/apps/web/src/components/features/types.ts b/apps/web/src/components/features/types.ts
new file mode 100644
index 0000000..5be9e85
--- /dev/null
+++ b/apps/web/src/components/features/types.ts
@@ -0,0 +1,77 @@
+import type { ReactNode } from "react";
+
+export type DemoPanel = "data" | "next" | "status";
+
+export type FeatureDemoActionKind =
+ | "copy"
+ | "reset"
+ | "retakeScreenshots"
+ | "setPanel"
+ | "startCapture"
+ | "toggleIntegrationMode"
+ | "toggleTargetPicker";
+
+export type CopyTarget =
+ | "agentContext"
+ | "commands"
+ | "issueMarkdown"
+ | "payloadJson"
+ | "screenshotSummary"
+ | "snippet";
+
+export type FeatureDemoAction =
+ | {
+ kind: "startCapture";
+ /** Optional hint to switch panels after starting capture. */
+ setActivePanel?: DemoPanel;
+ }
+ | { kind: "reset" }
+ | { kind: "toggleTargetPicker" }
+ | { kind: "retakeScreenshots" }
+ | { kind: "toggleIntegrationMode" }
+ | { kind: "setPanel"; panel: DemoPanel }
+ | { kind: "copy"; target: CopyTarget };
+
+export interface FeatureDemoMenuItem {
+ action: FeatureDemoAction;
+ icon?: ReactNode;
+ id: string;
+ label: string;
+}
+
+export interface FeatureDemoConfig {
+ /** Default panel when the card expands (and after reset). */
+ defaultPanel: DemoPanel;
+ /** Primary CTA shown in the card. */
+ primaryCta: { action: FeatureDemoAction; label: string };
+ /** Optional secondary CTA shown in the card. */
+ secondaryCta?: { action: FeatureDemoAction; label: string };
+ /** Right-click menu items for the demo area. */
+ menuItems: FeatureDemoMenuItem[];
+ /** Capture runner options for this card. */
+ runner: {
+ enableScreenshots?: boolean;
+ includeInspectInfo?: boolean;
+ };
+}
+
+export interface FeatureConfig {
+ color: string;
+ colorClasses: {
+ bg: string;
+ border: string;
+ dot: string;
+ dotMuted: string;
+ iconBg: string;
+ text: string;
+ };
+ demo: FeatureDemoConfig;
+ description: string;
+ expandedDescription: string;
+ icon: ReactNode;
+ id: string;
+ linkHref: string;
+ linkText: string;
+ title: string;
+}
+
diff --git a/packages/anyclick-react/src/AnyclickProvider.tsx b/packages/anyclick-react/src/AnyclickProvider.tsx
index c577b07..657fde9 100644
--- a/packages/anyclick-react/src/AnyclickProvider.tsx
+++ b/packages/anyclick-react/src/AnyclickProvider.tsx
@@ -26,6 +26,7 @@ import type {
} from "@ewjdev/anyclick-core";
import { createAnyclickClient } from "@ewjdev/anyclick-core";
import { ContextMenu } from "./ContextMenu";
+import { ToastContainer, showToast } from "./Toast";
import { AnyclickContext, useAnyclick } from "./context";
import { findContainerParent } from "./highlight";
import { type ProviderInstance, useProviderStore } from "./store";
@@ -90,6 +91,7 @@ export function AnyclickProvider({
stripAttributes,
targetFilter,
theme,
+ toastConfig,
touchHoldDurationMs,
touchMoveThreshold,
}: AnyclickProviderProps) {
@@ -343,6 +345,21 @@ export function AnyclickProvider({
metadata,
screenshots,
});
+
+ // Show success toast if enabled (default: true)
+ if (toastConfig?.enabled !== false) {
+ showToast(toastConfig?.successMessage ?? "Feedback sent!", "success");
+ }
+ } catch (error) {
+ // Show error toast if enabled (default: true)
+ if (toastConfig?.enabled !== false) {
+ showToast(
+ toastConfig?.errorMessage ?? "Failed to send feedback",
+ "error",
+ );
+ }
+ // Re-throw so the client's onSubmitError callback can handle it
+ throw error;
} finally {
setIsSubmitting(false);
setMenuVisible(false);
@@ -351,7 +368,7 @@ export function AnyclickProvider({
setContainerElement(null);
}
},
- [metadata],
+ [metadata, toastConfig],
);
// Open menu programmatically
@@ -458,6 +475,9 @@ export function AnyclickProvider({
children
);
+ // Only render ToastContainer for non-scoped (root) providers to avoid duplicates
+ const shouldRenderToastContainer = !scoped && toastConfig?.enabled !== false;
+
return (
);
diff --git a/packages/anyclick-react/src/ContextMenu.tsx b/packages/anyclick-react/src/ContextMenu.tsx
index 8e6737d..97027ea 100644
--- a/packages/anyclick-react/src/ContextMenu.tsx
+++ b/packages/anyclick-react/src/ContextMenu.tsx
@@ -13,6 +13,7 @@ import {
ChevronRightIcon,
FlagIcon,
GripVertical,
+ Loader2,
PlusIcon,
Sparkles,
ThumbsUpIcon,
@@ -212,9 +213,20 @@ const CommentForm = React.memo(function CommentForm({
...menuStyles.button,
...menuStyles.submitButton,
...(isSubmitting ? menuStyles.submitButtonDisabled : {}),
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ gap: 6,
}}
>
- {isSubmitting ? "Sending..." : "Send"}
+ {isSubmitting ? (
+ <>
+
diff --git a/packages/anyclick-react/src/Toast/Toast.tsx b/packages/anyclick-react/src/Toast/Toast.tsx
new file mode 100644
index 0000000..57188ea
--- /dev/null
+++ b/packages/anyclick-react/src/Toast/Toast.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+/**
+ * Toast component for @ewjdev/anyclick-react
+ *
+ * Individual toast notification with animation support.
+ *
+ * @module Toast/Toast
+ * @since 1.6.0
+ */
+import React, { useCallback } from "react";
+import { X } from "lucide-react";
+import { motion } from "motion/react";
+import { TOAST_COLORS, closeButtonStyles, toastStyles } from "./styles";
+import type { Toast as ToastType } from "./types";
+
+export interface ToastProps {
+ /** Toast data */
+ toast: ToastType;
+ /** Callback when toast is dismissed */
+ onDismiss: (id: string) => void;
+}
+
+/**
+ * Individual toast notification component.
+ *
+ * Renders a toast with:
+ * - Colored background based on type
+ * - Message text
+ * - Dismiss button
+ * - Enter/exit animations
+ */
+export const Toast = React.memo(function Toast({
+ toast,
+ onDismiss,
+}: ToastProps) {
+ const { bg, border, text } = TOAST_COLORS[toast.type];
+
+ const handleDismiss = useCallback(() => {
+ onDismiss(toast.id);
+ }, [onDismiss, toast.id]);
+
+ return (
+ Everything you need for UI context @@ -20,84 +468,21 @@ const FeaturesSection = () => {
- {/* Feature 1 */}
-
);
-};
-
-export default FeaturesSection;
+}
diff --git a/apps/web/src/components/features/CaptureDetailsPanel.tsx b/apps/web/src/components/features/CaptureDetailsPanel.tsx
new file mode 100644
index 0000000..97e5312
--- /dev/null
+++ b/apps/web/src/components/features/CaptureDetailsPanel.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import type { DemoPanel } from "./types";
+
+export interface CaptureDetailsPanelProps
+ extends React.HTMLAttributes
-
+ ))}
+
-
+ {features.map((feature) => (
+
-
- {/* Feature 2 */}
-
+ handleToggle(feature.id)}
+ />
- Context-Aware Capture
-- Right-click any element to capture its full DOM context, including - selectors, data attributes, ancestors, and surrounding page - information. -
-
-
-
- {/* Feature 3 */}
-
-
- Visual Capture
-- Automatically capture screenshots of the target element, its - container, and the full page—all included in the feedback payload. -
-
-
-
- {/* Feature 4 */}
-
-
- - Code Source Integration -
-- Automatically create GitHub Issues with rich context, formatted - markdown, and embedded screenshots for seamless issue tracking. -
-
-
-
- {/* Feature 5 */}
-
-
- AI Agent
-- Launch Cursor's AI agent directly from feedback—locally during - development or via cloud agent for instant code fixes. -
-
-
-
- {/* Feature 6 */}
-
-
- Framework Agnostic
-- Core library works with any JavaScript framework. Use the React - provider for React apps, or build your own integration. -
-
-
-
-
- Zero Config
-- Works out of the box with sensible defaults. Right-click anywhere in - your app and start capturing feedback immediately. -
-
+
+ );
+}
+
diff --git a/apps/web/src/components/features/CaptureWorkflowTimeline.tsx b/apps/web/src/components/features/CaptureWorkflowTimeline.tsx
new file mode 100644
index 0000000..e510305
--- /dev/null
+++ b/apps/web/src/components/features/CaptureWorkflowTimeline.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import * as React from "react";
+import { Check, Loader2, TriangleAlert } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type CaptureStepId = "connected" | "container" | "element" | "metadata";
+export type CaptureStepStatus =
+ | "error"
+ | "idle"
+ | "running"
+ | "simulated"
+ | "success";
+
+export interface CaptureStep {
+ id: CaptureStepId;
+ label: string;
+}
+
+export interface CaptureStepState {
+ detail?: string;
+ durationMs?: number;
+ errorMessage?: string;
+ status: CaptureStepStatus;
+}
+
+export interface CaptureWorkflowTimelineProps
+ extends React.HTMLAttributes
+ {(Object.keys(panelLabels) as DemoPanel[]).map((panel) => (
+
+ ))}
+
+
+
+ {activePanel === "data"
+ ? panels.data
+ : activePanel === "status"
+ ? panels.status
+ : panels.next}
+
+
+ {/* Progress dots */}
+
+ );
+}
+
diff --git a/apps/web/src/components/features/FeatureCaptureDemo.tsx b/apps/web/src/components/features/FeatureCaptureDemo.tsx
new file mode 100644
index 0000000..d0042de
--- /dev/null
+++ b/apps/web/src/components/features/FeatureCaptureDemo.tsx
@@ -0,0 +1,1153 @@
+"use client";
+
+import * as React from "react";
+import type {
+ AnyclickPayload,
+ ElementContext,
+ ElementInspectInfo,
+ PageContext,
+ ScreenshotCapture,
+ ScreenshotData,
+} from "@ewjdev/anyclick-core";
+import {
+ buildAnyclickPayload,
+ buildElementContext,
+ buildPageContext,
+ captureAllScreenshots,
+ formatBytes,
+ getElementInspectInfo,
+ isScreenshotSupported,
+} from "@ewjdev/anyclick-core";
+import {
+ ContextMenu,
+ type ContextMenuItem,
+ showToast,
+} from "@ewjdev/anyclick-react";
+import {
+ Braces,
+ Clipboard,
+ Info,
+ RotateCcw,
+ Sparkles,
+ Target,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { CaptureDetailsPanel } from "./CaptureDetailsPanel";
+import {
+ CaptureWorkflowTimeline,
+ type CaptureStep,
+ type CaptureStepId,
+ type CaptureStepState,
+} from "./CaptureWorkflowTimeline";
+import type { DemoPanel, FeatureConfig, FeatureDemoAction } from "./types";
+
+type CaptureRunStatus = "idle" | "running" | "success";
+
+type IntegrationMode = {
+ framework: "react" | "vanilla";
+ scope: "global" | "scoped";
+};
+
+type CaptureArtifacts = {
+ agentInput?: unknown;
+ connectedData?: unknown;
+ containerContext?: ElementContext;
+ elementContext?: ElementContext;
+ inspectInfo?: ElementInspectInfo;
+ integrationSnippet?: string;
+ issueMarkdown?: string;
+ metadata?: Record
+ {steps.map((step) => {
+ const state = stepStates[step.id];
+ const dotClass =
+ state.status === "running"
+ ? `${accent.dot} scale-125`
+ : state.status === "success" || state.status === "simulated"
+ ? accent.dotMuted
+ : state.status === "error"
+ ? "bg-red-500"
+ : "bg-white/20";
+
+ return (
+
+ );
+ })}
+
+
+ {/* Step list */}
+
+ {steps.map((step) => {
+ const state = stepStates[step.id];
+ const durationLabel = formatDuration(state.durationMs);
+
+ return (
+
+
+
+ );
+ })}
+
+ {state.status === "running" ? (
+
+
+
+
+
+
+
+ {state.status === "error" && state.errorMessage ? (
+
+ {step.label}
+ {state.status === "simulated" ? (
+
+ simulated
+
+ ) : null}
+
+ {durationLabel ? (
+
+ {durationLabel}
+
+ ) : null}
+
+ {state.errorMessage}
+
+ ) : state.detail ? (
+
+ {state.detail}
+
+ ) : (
+
+ {state.status === "idle" ? "Waiting…" : ""}
+
+ )}
+
+
+ );
+
+ const screenshotsSummary = React.useMemo(
+ () => summarizeScreenshots(artifacts.screenshots),
+ [artifacts.screenshots],
+ );
+
+ const dataPanel = (
+
+ Right-click inside this demo for actions.
+
+
+ {runStatus === "running"
+ ? "Running…"
+ : runStatus === "success"
+ ? "Capture complete"
+ : "Idle"}
+
+
+
+ );
+
+ const statusPanel = (
+
+ {demoHeader}
+
+
+
+
+
+ {artifacts.inspectInfo ? (
+ + Element context +
+
+ {safeJson(artifacts.elementContext ?? null)}
+
+
+
+ ) : null}
+
+ + Inspect info +
+
+ {safeJson(artifacts.inspectInfo)}
+
+
+
+
+ + Container context +
+
+ {safeJson(artifacts.containerContext ?? null)}
+
+
+
+
+ + Page context +
+
+ {safeJson(artifacts.pageContext ?? null)}
+
+
+
+
+ + Connected data +
+
+ {safeJson(artifacts.connectedData ?? null)}
+
+
+
+
+ {feature.demo.runner.enableScreenshots ? (
+ + Metadata + payload (sanitized) +
+
+ {safeJson({
+ metadata: artifacts.metadata ?? null,
+ payload: artifacts.payload
+ ? {
+ ...artifacts.payload,
+ screenshots: artifacts.payload.screenshots
+ ? summarizeScreenshots(artifacts.payload.screenshots)
+ : undefined,
+ }
+ : null,
+ })}
+
+
+
+ ) : null}
+ + Screenshots +
+
+
+
+ {safeJson(screenshotsSummary)}
+
+
+ {(
+ [
+ ["element", artifacts.screenshots?.element?.dataUrl],
+ ["container", artifacts.screenshots?.container?.dataUrl],
+ ["viewport", artifacts.screenshots?.viewport?.dataUrl],
+ ] as const
+ ).map(([label, dataUrl]) => (
+
+
+ 
+ ) : (
+
+ ))}
+
+ {label}
+
+ {dataUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ n/a
+
+ )}
+
+
+ );
+
+ const nextPanel = (
+
+
+
+
+
+
+ Run status:{" "}
+ {runStatus}
+
+
+ Screenshot support:{" "}
+
+ {isScreenshotSupported() ? "yes" : "no"}
+
+
+
+ {safeJson({
+ steps: stepStates,
+ simulatedFallbacks: Object.entries(stepStates)
+ .filter(([, s]) => s.status === "simulated")
+ .map(([k]) => k),
+ screenshotErrors: screenshotsSummary?.errors ?? null,
+ })}
+
+
+ {feature.id === "github-integration" ? (
+
+ );
+
+ const primary = feature.demo.primaryCta;
+ const secondary = feature.demo.secondaryCta;
+
+ return (
+
+ {artifacts.issueMarkdown ?? "Run the capture to draft an issue…"}
+
+ ) : feature.id === "ai-agent" ? (
+
+ {safeJson(artifacts.agentInput ?? {})}
+
+ ) : feature.id === "framework-agnostic" ? (
+
+
+ ) : feature.id === "zero-config" ? (
+
+
+
+ Mode:{" "}
+
+ {integrationMode.framework} / {integrationMode.scope}
+
+
+
+ {buildIntegrationSnippet(integrationMode)}
+
+
+ {buildZeroConfigSnippet()}
+
+ ) : (
+
+ {safeJson({
+ metadata: artifacts.metadata ?? null,
+ payload: artifacts.payload
+ ? {
+ ...artifacts.payload,
+ screenshots: artifacts.payload.screenshots
+ ? summarizeScreenshots(artifacts.payload.screenshots)
+ : undefined,
+ }
+ : null,
+ })}
+
+ )}
+
+ {/* CTA row */}
+ }
+ highlightConfig={{ enabled: false }}
+ isSubmitting={false}
+ items={menuItems}
+ onClose={onCloseMenu}
+ onSelect={() => {
+ // no-op: all items are handled via onClick hooks
+ }}
+ position={menuPosition}
+ screenshotConfig={{ enabled: false, showPreview: false }}
+ targetElement={getActiveTargetElement() ?? containerRef.current}
+ visible={menuVisible}
+ />
+
+ );
+}
+
diff --git a/apps/web/src/components/features/FeatureCard.tsx b/apps/web/src/components/features/FeatureCard.tsx
new file mode 100644
index 0000000..858919b
--- /dev/null
+++ b/apps/web/src/components/features/FeatureCard.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { AnimatePresence, motion } from "motion/react";
+import { ArrowRight, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { FeatureCaptureDemo } from "./FeatureCaptureDemo";
+import type { FeatureConfig } from "./types";
+
+export interface FeatureCardProps {
+ className?: string;
+ feature: FeatureConfig;
+ isExpanded: boolean;
+ onToggle: () => void;
+}
+
+export function FeatureCard({
+ className,
+ feature,
+ isExpanded,
+ onToggle,
+}: FeatureCardProps) {
+ const handleClick = React.useCallback(() => {
+ if (!isExpanded) {
+ onToggle();
+ }
+ }, [isExpanded, onToggle]);
+
+ const handleClose = React.useCallback(
+ (e: React.MouseEvent) => {
+ e.stopPropagation();
+ onToggle();
+ },
+ [onToggle],
+ );
+
+ return (
+
+
+
+ {secondary ? (
+ (() => {
+ const isSecondaryDisabled =
+ runStatus === "running" ||
+ (secondary.action.kind === "retakeScreenshots" &&
+ runStatus !== "success");
+
+ return (
+
+ );
+ })()
+ ) : null}
+
+
+
+
+ {/* Demo sandbox (captures real DOM context from these elements) */}
+
+
+
+ {/* Workflow timeline */}
+
+
+
+
+ Demo sandbox
+
+ (selected:{" "}
+ {selectedTargetKey})
+
+
+
+ {isTargetPickerEnabled
+ ? "Click an element below to select it"
+ : "Click primary CTA to run capture"}
+
+
+
+
+
+
+
+ handleTargetClick("info")}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") handleTargetClick("info");
+ }}
+ className={cn(
+ "rounded-lg border px-3 py-2 text-sm transition-colors select-none",
+ selectedTargetKey === "info"
+ ? "border-white/25 bg-white/10"
+ : "border-white/10 bg-white/5 hover:bg-white/8",
+ )}
+ >
+
+
+ Info row
+
+
+ data-attrs, text, hierarchy
+
+
+ {feature.icon}
+
+ + {feature.title} +
++ {feature.description} +
+ + Learn more
+
+
+
+
+
+
+
+ {feature.icon}
+
+
+ + {feature.title} +
++ {feature.expandedDescription} +
+ +
@@ -478,6 +498,9 @@ export function AnyclickProvider({
targetElement={targetElement}
visible={menuVisible && !effectiveDisabled}
/>
+ {shouldRenderToastContainer && (
+
+
+ {toasts.map((toast) => (
+
+
+ );
+
+ // Render via portal to document body
+ return createPortal(container, document.body);
+}
diff --git a/packages/anyclick-react/src/Toast/index.ts b/packages/anyclick-react/src/Toast/index.ts
new file mode 100644
index 0000000..0e51409
--- /dev/null
+++ b/packages/anyclick-react/src/Toast/index.ts
@@ -0,0 +1,43 @@
+/**
+ * Toast module for @ewjdev/anyclick-react
+ *
+ * Provides toast notifications following the showToast pattern
+ * from anyclick-extension.
+ *
+ * @module Toast
+ * @since 1.6.0
+ */
+
+// Components
+export { Toast } from "./Toast";
+export type { ToastProps } from "./Toast";
+
+export { ToastContainer } from "./ToastContainer";
+export type { ToastContainerProps } from "./ToastContainer";
+
+// Store and imperative API
+export {
+ useToastStore,
+ showToast,
+ dismissToast,
+ clearToasts,
+} from "./toastStore";
+
+// Types
+export type {
+ Toast as ToastData,
+ ToastType,
+ ToastConfig,
+ ToastStore,
+} from "./types";
+
+// Styles (for advanced customization)
+export {
+ TOAST_COLORS,
+ DEFAULT_TOAST_DURATION,
+ DEFAULT_MAX_TOASTS,
+ POSITION_STYLES,
+ containerStyles,
+ toastStyles,
+ closeButtonStyles,
+} from "./styles";
diff --git a/packages/anyclick-react/src/Toast/styles.ts b/packages/anyclick-react/src/Toast/styles.ts
new file mode 100644
index 0000000..879ef53
--- /dev/null
+++ b/packages/anyclick-react/src/Toast/styles.ts
@@ -0,0 +1,117 @@
+/**
+ * Toast styles for @ewjdev/anyclick-react
+ *
+ * Uses the same color palette as anyclick-extension for consistency.
+ *
+ * @module Toast/styles
+ * @since 1.6.0
+ */
+import type { ToastType } from "./types";
+
+/**
+ * Standard toast colors matching the extension.
+ * - success: emerald
+ * - error: red
+ * - warning: amber
+ * - info: blue
+ */
+export const TOAST_COLORS: Record<
+ ToastType,
+ { bg: string; border: string; text: string }
+> = {
+ success: { bg: "#10b981", border: "#059669", text: "#ffffff" },
+ error: { bg: "#ef4444", border: "#dc2626", text: "#ffffff" },
+ warning: { bg: "#f59e0b", border: "#d97706", text: "#ffffff" },
+ info: { bg: "#3b82f6", border: "#2563eb", text: "#ffffff" },
+} as const;
+
+/**
+ * Default duration for toast auto-dismiss (4 seconds).
+ * Matches the extension's content.ts behavior.
+ */
+export const DEFAULT_TOAST_DURATION = 4000;
+
+/**
+ * Maximum number of toasts to show at once.
+ */
+export const DEFAULT_MAX_TOASTS = 3;
+
+/**
+ * Position styles for the toast container.
+ */
+export const POSITION_STYLES: Record<
+ "top-right" | "top-left" | "bottom-right" | "bottom-left",
+ React.CSSProperties
+> = {
+ "top-right": {
+ top: 20,
+ right: 20,
+ flexDirection: "column",
+ },
+ "top-left": {
+ top: 20,
+ left: 20,
+ flexDirection: "column",
+ },
+ "bottom-right": {
+ bottom: 20,
+ right: 20,
+ flexDirection: "column-reverse",
+ },
+ "bottom-left": {
+ bottom: 20,
+ left: 20,
+ flexDirection: "column-reverse",
+ },
+};
+
+/**
+ * Base container styles for the toast stack.
+ */
+export const containerStyles: React.CSSProperties = {
+ position: "fixed",
+ display: "flex",
+ gap: 8,
+ zIndex: 999999,
+ pointerEvents: "none",
+};
+
+/**
+ * Base toast styles.
+ */
+export const toastStyles: React.CSSProperties = {
+ display: "flex",
+ alignItems: "center",
+ gap: 8,
+ padding: "12px 16px",
+ borderRadius: 8,
+ fontSize: 14,
+ fontWeight: 500,
+ fontFamily:
+ '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+ boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1)",
+ backdropFilter: "blur(8px)",
+ pointerEvents: "auto",
+ maxWidth: 360,
+ minWidth: 200,
+};
+
+/**
+ * Close button styles.
+ */
+export const closeButtonStyles: React.CSSProperties = {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ width: 20,
+ height: 20,
+ padding: 0,
+ border: "none",
+ background: "transparent",
+ color: "inherit",
+ opacity: 0.7,
+ cursor: "pointer",
+ borderRadius: 4,
+ transition: "opacity 0.15s ease",
+ flexShrink: 0,
+};
diff --git a/packages/anyclick-react/src/Toast/toastStore.ts b/packages/anyclick-react/src/Toast/toastStore.ts
new file mode 100644
index 0000000..7ca8167
--- /dev/null
+++ b/packages/anyclick-react/src/Toast/toastStore.ts
@@ -0,0 +1,120 @@
+/**
+ * Toast store for @ewjdev/anyclick-react
+ *
+ * Uses Zustand for lightweight state management.
+ * Provides both hook-based and imperative API access.
+ *
+ * @module Toast/toastStore
+ * @since 1.6.0
+ */
+import { create } from "zustand";
+import { DEFAULT_MAX_TOASTS, DEFAULT_TOAST_DURATION } from "./styles";
+import type { Toast, ToastStore, ToastType } from "./types";
+
+/**
+ * Generate a unique ID for toasts.
+ */
+function generateId(): string {
+ return Math.random().toString(36).slice(2, 11);
+}
+
+/**
+ * Zustand store for managing toast state.
+ *
+ * @internal
+ */
+export const useToastStore = create