@qoretechnologies/qlip 0.1.0-beta.20260128131929

package/dist/runtime/screenshot.js

@@ -0,0 +1,443 @@
+import { resolveQlipOptions } from '../config/parameters.js';
+import { AUTO_ERROR_SCREENSHOT_BASE, buildAutoScreenshotPath, buildManualScreenshotPath, joinPath, sanitizeSegment, } from '../fs/output.js';
+import { initRuntimeState, markStorybookWarning, nextStepName, pushEntry, updateStats, } from './context.js';
+const ensureBrowserContext = async () => {
+    if (!globalThis.__vitest_browser__) {
+        throw new Error('[qlip] screenshot() can only be used in Vitest Browser Mode.');
+    }
+    const { page, commands } = await import('@vitest/browser/context');
+    if (!page || !commands) {
+        throw new Error('[qlip] Playwright page is unavailable. Ensure Storybook Vitest addon is enabled.');
+    }
+    return { page, commands };
+};
+const resolveStoryInfo = (ctx) => {
+    const storyId = ctx.id ? String(ctx.id) : '';
+    return {
+        id: storyId,
+        title: ctx.title,
+        name: ctx.name,
+        parameters: ctx.parameters?.qlip,
+    };
+};
+const readStoryFromStore = (storyId) => {
+    const globalAny = globalThis;
+    const store = globalAny.__STORYBOOK_PREVIEW__?.storyStore ??
+        globalAny.__STORYBOOK_STORY_STORE__;
+    const previewIndex = globalAny.__STORYBOOK_PREVIEW__?.storyIndex;
+    const rawIndex = store?.storyIndex?.v ??
+        store?.storyIndex ??
+        previewIndex?.v ??
+        previewIndex;
+    const entryMap = rawIndex?.entries ??
+        rawIndex;
+    const entry = entryMap?.[storyId];
+    if (!entry) {
+        return null;
+    }
+    return {
+        title: entry.title,
+        name: entry.name,
+    };
+};
+const shouldCaptureOnError = (defaults, story) => story?.captureOnError ?? defaults.captureOnError;
+const applyAnimationControl = ({ disableAnimations, pauseAnimationsAtEnd, }) => {
+    if (!globalThis.document) {
+        return;
+    }
+    const doc = globalThis.document;
+    const id = '__qlip-animation-control';
+    const existing = doc.getElementById(id);
+    if (!disableAnimations && !pauseAnimationsAtEnd) {
+        if (existing) {
+            existing.remove();
+        }
+        return;
+    }
+    const style = existing ?? doc.createElement('style');
+    style.id = id;
+    if (disableAnimations) {
+        style.textContent = `
+      *, *::before, *::after {
+        animation: none !important;
+        transition: none !important;
+        scroll-behavior: auto !important;
+      }
+    `;
+    }
+    else {
+        style.textContent = `
+      *, *::before, *::after {
+        animation-play-state: paused !important;
+        transition-duration: 0s !important;
+        transition-delay: 0s !important;
+      }
+    `;
+    }
+    if (!existing) {
+        doc.head.appendChild(style);
+    }
+    if (typeof doc.getAnimations === 'function') {
+        const animations = doc.getAnimations();
+        for (const animation of animations) {
+            if (disableAnimations && typeof animation.finish === 'function') {
+                animation.finish();
+            }
+            else if (pauseAnimationsAtEnd &&
+                typeof animation.pause === 'function') {
+                animation.pause();
+            }
+        }
+    }
+};
+const waitForDomIdle = async (idleMs, maxWaitMs) => {
+    if (idleMs <= 0) {
+        return;
+    }
+    const doc = globalThis.document;
+    if (!doc || typeof MutationObserver === 'undefined') {
+        await new Promise((resolve) => setTimeout(resolve, idleMs));
+        return;
+    }
+    await new Promise((resolve) => {
+        const start = Date.now();
+        const resolvedMaxWait = Math.max(idleMs, maxWaitMs);
+        let lastChange = Date.now();
+        let done = false;
+        const finish = () => {
+            if (done) {
+                return;
+            }
+            done = true;
+            observer.disconnect();
+            clearInterval(checkInterval);
+            resolve();
+        };
+        const observer = new MutationObserver(() => {
+            lastChange = Date.now();
+        });
+        observer.observe(doc.documentElement, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+            characterData: true,
+        });
+        const checkInterval = setInterval(() => {
+            const now = Date.now();
+            if (now - lastChange >= idleMs || now - start >= resolvedMaxWait) {
+                finish();
+            }
+        }, Math.min(50, idleMs));
+    });
+};
+const applyIgnoreMasks = (selectors) => {
+    if (!globalThis.document || selectors.length === 0) {
+        return () => undefined;
+    }
+    const doc = globalThis.document;
+    const masks = [];
+    for (const selector of selectors) {
+        const nodes = Array.from(doc.querySelectorAll(selector));
+        for (const node of nodes) {
+            const rect = node.getBoundingClientRect();
+            if (rect.width <= 0 || rect.height <= 0) {
+                continue;
+            }
+            const mask = doc.createElement('div');
+            mask.setAttribute('data-qlip-mask', selector);
+            mask.style.position = 'fixed';
+            mask.style.left = `${rect.left}px`;
+            mask.style.top = `${rect.top}px`;
+            mask.style.width = `${rect.width}px`;
+            mask.style.height = `${rect.height}px`;
+            mask.style.background = '#000';
+            mask.style.pointerEvents = 'none';
+            mask.style.zIndex = '2147483647';
+            doc.body.appendChild(mask);
+            masks.push(mask);
+        }
+    }
+    return () => {
+        for (const mask of masks) {
+            mask.remove();
+        }
+    };
+};
+const pickUniqueErrorName = (entries) => {
+    const reserved = new Set(entries
+        .filter((entry) => entry.screenshotName.startsWith(AUTO_ERROR_SCREENSHOT_BASE))
+        .map((entry) => entry.screenshotName));
+    if (!reserved.has(AUTO_ERROR_SCREENSHOT_BASE)) {
+        return AUTO_ERROR_SCREENSHOT_BASE;
+    }
+    let index = 2;
+    while (reserved.has(`${AUTO_ERROR_SCREENSHOT_BASE}-${index}`)) {
+        index += 1;
+    }
+    return `${AUTO_ERROR_SCREENSHOT_BASE}-${index}`;
+};
+const resolveManualArgs = (nameOrOptions, options) => {
+    if (typeof nameOrOptions === 'string') {
+        return { name: nameOrOptions, options };
+    }
+    return { name: nameOrOptions?.name, options: nameOrOptions };
+};
+const buildEntry = ({ kind, storyId, storyTitle, storyName, screenshotName, relativePath, viewport, status, error, timingsMs, }) => ({
+    kind,
+    storyId,
+    storyTitle,
+    storyName,
+    screenshotName,
+    path: relativePath,
+    viewport,
+    status,
+    error,
+    timings: { ms: timingsMs },
+});
+const captureScreenshot = async ({ kind, story, screenshotName, options, }) => {
+    const runtime = initRuntimeState();
+    if (!runtime) {
+        console.warn('[qlip] Runtime config is missing. screenshot() only works in Vitest with qlipVitestPlugin enabled.');
+        return;
+    }
+    const { page, commands } = await ensureBrowserContext();
+    if (!story.id) {
+        if (!runtime.warnedMissingStorybook) {
+            console.warn('[qlip] No story context detected. Qlip only captures Storybook Vitest stories.');
+            markStorybookWarning(runtime);
+        }
+        return;
+    }
+    const resolved = resolveQlipOptions({
+        defaults: runtime.config.defaults,
+        story: story.parameters,
+        override: options,
+    });
+    const name = kind === 'manual'
+        ? sanitizeSegment(screenshotName ?? nextStepName(runtime, story.id))
+        : 'auto';
+    const captureStart = Date.now();
+    if (resolved.skip) {
+        pushEntry(runtime, buildEntry({
+            kind,
+            storyId: story.id,
+            storyTitle: story.title,
+            storyName: story.name,
+            screenshotName: name,
+            relativePath: kind === 'manual'
+                ? buildManualScreenshotPath({
+                    buildDir: runtime.config.buildDir,
+                    storyId: story.id,
+                    storyTitle: story.title,
+                    storyName: story.name,
+                    screenshotName: name,
+                }).relativePath
+                : buildAutoScreenshotPath({
+                    buildDir: runtime.config.buildDir,
+                    storyId: story.id,
+                    storyTitle: story.title,
+                    storyName: story.name,
+                }).relativePath,
+            viewport: resolved.viewport,
+            status: 'skipped',
+            error: null,
+            timingsMs: Date.now() - captureStart,
+        }));
+        updateStats(runtime, {
+            storiesTotal: kind === 'auto'
+                ? runtime.manifest.stats.storiesTotal + 1
+                : runtime.manifest.stats.storiesTotal,
+            skipped: runtime.manifest.stats.skipped + 1,
+        });
+        await commands.writeFile(joinPath(runtime.config.buildDir, 'manifest.json'), JSON.stringify(runtime.manifest, null, 2), 'utf-8');
+        return;
+    }
+    let relativePath = '';
+    let absolutePath = '';
+    if (kind === 'manual') {
+        const pathInfo = buildManualScreenshotPath({
+            buildDir: runtime.config.buildDir,
+            storyId: story.id,
+            storyTitle: story.title,
+            storyName: story.name,
+            screenshotName: name,
+        });
+        relativePath = pathInfo.relativePath;
+        absolutePath = pathInfo.absolutePath;
+    }
+    else {
+        const pathInfo = buildAutoScreenshotPath({
+            buildDir: runtime.config.buildDir,
+            storyId: story.id,
+            storyTitle: story.title,
+            storyName: story.name,
+        });
+        relativePath = pathInfo.relativePath;
+        absolutePath = pathInfo.absolutePath;
+    }
+    let status = 'captured';
+    let error = null;
+    let cleanupMasks = null;
+    try {
+        await page.viewport(resolved.viewport.width, resolved.viewport.height);
+        applyAnimationControl({
+            disableAnimations: resolved.disableAnimations,
+            pauseAnimationsAtEnd: resolved.pauseAnimationsAtEnd,
+        });
+        await waitForDomIdle(resolved.waitForIdleMs, resolved.maxWaitForIdleMs);
+        cleanupMasks = applyIgnoreMasks(resolved.ignoreElements);
+        await page.screenshot({ path: absolutePath, save: true });
+    }
+    catch (err) {
+        status = 'failed';
+        const typedError = err;
+        error = {
+            message: typedError.message,
+            stack: typedError.stack,
+        };
+    }
+    finally {
+        if (cleanupMasks) {
+            cleanupMasks();
+        }
+    }
+    const entry = buildEntry({
+        kind,
+        storyId: story.id,
+        storyTitle: story.title,
+        storyName: story.name,
+        screenshotName: name,
+        relativePath,
+        viewport: resolved.viewport,
+        status,
+        error,
+        timingsMs: Date.now() - captureStart,
+    });
+    pushEntry(runtime, entry);
+    if (kind === 'auto') {
+        updateStats(runtime, {
+            storiesTotal: runtime.manifest.stats.storiesTotal + 1,
+            capturedAuto: status === 'captured'
+                ? runtime.manifest.stats.capturedAuto + 1
+                : runtime.manifest.stats.capturedAuto,
+            failed: status === 'failed'
+                ? runtime.manifest.stats.failed + 1
+                : runtime.manifest.stats.failed,
+        });
+    }
+    else {
+        updateStats(runtime, {
+            capturedManual: status === 'captured'
+                ? runtime.manifest.stats.capturedManual + 1
+                : runtime.manifest.stats.capturedManual,
+            failed: status === 'failed'
+                ? runtime.manifest.stats.failed + 1
+                : runtime.manifest.stats.failed,
+        });
+    }
+    await commands.writeFile(joinPath(runtime.config.buildDir, 'manifest.json'), JSON.stringify(runtime.manifest, null, 2), 'utf-8');
+};
+export const screenshot = async (ctx, nameOrOptions, options) => {
+    const runtime = initRuntimeState();
+    if (!runtime) {
+        return;
+    }
+    const { name, options: resolvedOptions } = resolveManualArgs(nameOrOptions, options);
+    const story = resolveStoryInfo(ctx);
+    const params = story.parameters;
+    const finalOptions = resolveQlipOptions({
+        defaults: runtime.config.defaults,
+        story: params,
+        override: resolvedOptions,
+    });
+    if (!finalOptions.manual) {
+        return;
+    }
+    await captureScreenshot({
+        kind: 'manual',
+        story,
+        screenshotName: name,
+        options: resolvedOptions,
+    });
+};
+export const captureAutoScreenshot = async (ctx) => {
+    const runtime = initRuntimeState();
+    if (!runtime) {
+        return;
+    }
+    const storyContext = ctx.story ?? {};
+    const story = resolveStoryInfo(storyContext);
+    const params = story.parameters;
+    const resolvedOptions = resolveQlipOptions({ defaults: runtime.config.defaults, story: params });
+    if (!resolvedOptions.auto) {
+        return;
+    }
+    const metaStoryId = ctx.task.meta
+        ?.storyId;
+    if (!story.id && typeof metaStoryId === 'string') {
+        story.id = metaStoryId;
+    }
+    if (story.id && (!story.title || !story.name)) {
+        const storeStory = readStoryFromStore(story.id);
+        if (storeStory?.title && !story.title) {
+            story.title = storeStory.title;
+        }
+        if (storeStory?.name && !story.name) {
+            story.name = storeStory.name;
+        }
+    }
+    if (!story.name && ctx.task.name) {
+        story.name = ctx.task.name;
+    }
+    if (!story.title && ctx.task.suite?.name) {
+        story.title = ctx.task.suite.name;
+    }
+    await captureScreenshot({
+        kind: 'auto',
+        story,
+    });
+};
+export const captureErrorScreenshot = async (ctx) => {
+    const runtime = initRuntimeState();
+    if (!runtime) {
+        return;
+    }
+    const storyContext = ctx.story ?? {};
+    const story = resolveStoryInfo(storyContext);
+    const errorMetaStoryId = ctx.task.meta
+        ?.storyId;
+    if (!story.id && typeof errorMetaStoryId === 'string') {
+        story.id = errorMetaStoryId;
+    }
+    const params = story.parameters;
+    const resolvedOptions = resolveQlipOptions({ defaults: runtime.config.defaults, story: params });
+    if (resolvedOptions.skip) {
+        return;
+    }
+    if (!resolvedOptions.error) {
+        return;
+    }
+    if (!shouldCaptureOnError(runtime.config.defaults, params)) {
+        return;
+    }
+    if (story.id && (!story.title || !story.name)) {
+        const storeStory = readStoryFromStore(story.id);
+        if (storeStory?.title && !story.title) {
+            story.title = storeStory.title;
+        }
+        if (storeStory?.name && !story.name) {
+            story.name = storeStory.name;
+        }
+    }
+    if (!story.name && ctx.task.name) {
+        story.name = ctx.task.name;
+    }
+    if (!story.title && ctx.task.suite?.name) {
+        story.title = ctx.task.suite.name;
+    }
+    await captureScreenshot({
+        kind: 'manual',
+        story,
+        screenshotName: pickUniqueErrorName(runtime.manifest.entries),
+    });
+};

package/dist/runtime/setup.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=setup.d.ts.map

package/dist/runtime/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/runtime/setup.ts"],"names":[],"mappings":""}

package/dist/runtime/setup.js

@@ -0,0 +1,15 @@
+import { afterEach } from 'vitest';
+import { captureAutoScreenshot, captureErrorScreenshot } from './screenshot.js';
+import { getRuntimeState, initRuntimeState } from './context.js';
+const isBrowser = () => typeof globalThis.__vitest_browser__ !== 'undefined';
+if (isBrowser()) {
+    initRuntimeState();
+    afterEach(async (context) => {
+        await captureAutoScreenshot(context);
+        const runtime = getRuntimeState();
+        if (runtime &&
+            context.task.result?.state === 'fail') {
+            await captureErrorScreenshot(context);
+        }
+    });
+}

package/dist/stories/AnimatedBox.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './animated-box.css';
+export declare const AnimatedBox: React.FC;
+//# sourceMappingURL=AnimatedBox.d.ts.map

package/dist/stories/AnimatedBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedBox.d.ts","sourceRoot":"","sources":["../../src/stories/AnimatedBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,oBAAoB,CAAC;AAE5B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAe/B,CAAC"}

package/dist/stories/AnimatedBox.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './animated-box.css';
+export const AnimatedBox = () => {
+    const [active, setActive] = React.useState(false);
+    return (_jsxs("div", { className: "qlip-anim-stage", children: [_jsx("button", { type: "button", className: "qlip-anim-trigger", onClick: () => setActive((prev) => !prev), children: "Toggle" }), _jsx("div", { className: `qlip-anim-box ${active ? 'is-active' : ''}` })] }));
+};

package/dist/stories/AnimatedBox.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ShouldFinishFullyAnimated: Story;
+//# sourceMappingURL=AnimatedBox.stories.d.ts.map

package/dist/stories/AnimatedBox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedBox.stories.d.ts","sourceRoot":"","sources":["../../src/stories/AnimatedBox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAK5D,QAAA,MAAM,IAAI;;;;;;CAM0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,yBAAyB,EAAE,KAUvC,CAAC"}

package/dist/stories/AnimatedBox.stories.js

@@ -0,0 +1,21 @@
+import { userEvent, within } from 'storybook/test';
+import { AnimatedBox } from './AnimatedBox.js';
+const meta = {
+    title: 'Example/ShouldFinishFullyAnimated',
+    component: AnimatedBox,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const ShouldFinishFullyAnimated = {
+    parameters: {
+        qlip: {
+            disableAnimations: true,
+        },
+    },
+    play: async (ctx) => {
+        const canvas = within(ctx.canvasElement);
+        await userEvent.click(canvas.getByRole('button', { name: /toggle/i }));
+    },
+};

package/dist/stories/Button.d.ts

@@ -0,0 +1,16 @@
+import './button.css';
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/stories/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/stories/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gDAAgD;AAChD,eAAO,MAAM,MAAM,GAAI,qDAMpB,WAAW,4CAYb,CAAC"}

package/dist/stories/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './button.css';
+/** Primary UI component for user interaction */
+export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }) => {
+    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    return (_jsx("button", { type: "button", className: ['storybook-button', `storybook-button--${size}`, mode].join(' '), style: { backgroundColor }, ...props, children: label }));
+};

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ primary, size, backgroundColor, label, ...props }: import("./Button.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+    };
+    args: {
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

package/dist/stories/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,QAAA,MAAM,IAAI;;;;;;;;;;;;CAWqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}

package/dist/stories/Button.stories.js

@@ -0,0 +1,40 @@
+import { fn } from 'storybook/test';
+import { Button } from './Button.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+    title: 'Example/Button',
+    component: Button,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+    args: { onClick: fn() },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {
+        primary: true,
+        label: 'Button',
+    },
+};
+export const Secondary = {
+    args: {
+        label: 'Button',
+    },
+};
+export const Large = {
+    args: {
+        size: 'large',
+        label: 'Button',
+    },
+};
+export const Small = {
+    args: {
+        size: 'small',
+        label: 'Button',
+    },
+};

package/dist/stories/FailOnPurpose.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CaptureOnTestFailure: Story;
+//# sourceMappingURL=FailOnPurpose.stories.d.ts.map

package/dist/stories/FailOnPurpose.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FailOnPurpose.stories.d.ts","sourceRoot":"","sources":["../../src/stories/FailOnPurpose.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,IAAI;;;;;;CAM0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,oBAAoB,EAAE,KAyBlC,CAAC"}

package/dist/stories/FailOnPurpose.stories.js

@@ -0,0 +1,32 @@
+import { userEvent, within } from 'storybook/test';
+import { AnimatedBox } from './AnimatedBox.js';
+const meta = {
+    title: 'Example/Capture on Test Failure',
+    component: AnimatedBox,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const CaptureOnTestFailure = {
+    parameters: {
+        qlip: {
+            captureOnError: true,
+            // To test error screenshot capture, temporarily set skip to false
+            skip: true,
+        },
+    },
+    play: async (ctx) => {
+        // Check if this story should be skipped (to prevent CI failures)
+        // The skip parameter prevents screenshot capture, but we also need to skip the test
+        const qlipParams = ctx.parameters?.qlip;
+        if (qlipParams?.skip) {
+            console.log('FailOnPurpose test skipped - set qlip.skip to false to test error screenshots');
+            return;
+        }
+        const canvas = within(ctx.canvasElement);
+        // This will intentionally fail - clicking a non-existent button
+        // An error screenshot will be captured due to captureOnError: true
+        await userEvent.click(canvas.getByRole('button', { name: /missingButton/i }));
+    },
+};