@qoretechnologies/qlip 0.1.3-pr.28.g211f2a4 → 0.1.3-pr.29.g497a7aa

package/dist/runtime/setup.d.ts

@@ -1,2 +1,5 @@
-export {};
+export declare const VIEWPORT_RESET_STYLE_ID = "__qlip-viewport-reset";
+export declare const VIEWPORT_RESET_CSS = "html, body, #storybook-root, body > div:not([class]):not([id]) { width: 100%; height: 100%; margin: 0; padding: 0; }";
+/** Exported for unit testing. */
+export declare const injectViewportStyles: () => void;
 //# sourceMappingURL=setup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/runtime/setup.ts"],"names":[],"mappings":""}
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/runtime/setup.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,uBAAuB,0BAA0B,CAAC;AAS/D,eAAO,MAAM,kBAAkB,yHACyF,CAAC;AAEzH,iCAAiC;AACjC,eAAO,MAAM,oBAAoB,YAOhC,CAAC"}

package/dist/runtime/setup.js

@@ -3,13 +3,23 @@ import { captureAutoScreenshot, captureErrorScreenshot } from './screenshot.js';
 import { flushConsoleLogs, getRuntimeState, initRuntimeState, pushConsoleLog } from './context.js';
 import { realDateNow } from './clock.js';
 const isBrowser = () => typeof globalThis.__vitest_browser__ !== 'undefined';
-const injectViewportStyles = () => {
+export const VIEWPORT_RESET_STYLE_ID = '__qlip-viewport-reset';
+// Storybook's portable stories mount every story into an anonymous <div>
+// (no id, no class) appended to <body>; it needs the full viewport for
+// height-filling stories. A bare `body > div` also matched everything React
+// portals into <body> (reqore's fixed-position floating-actions bar, popovers)
+// and stretched it to 100% x 100%, which captured as opaque black rectangles.
+// `:first-of-type` is no alternative: Storybook's hidden `sb-wrapper` divs
+// precede the canvas.
+export const VIEWPORT_RESET_CSS = 'html, body, #storybook-root, body > div:not([class]):not([id]) { width: 100%; height: 100%; margin: 0; padding: 0; }';
+/** Exported for unit testing. */
+export const injectViewportStyles = () => {
     const doc = globalThis.document;
     if (!doc)
         return;
     const style = doc.createElement('style');
-    style.id = '__qlip-viewport-reset';
-    style.textContent = `html, body, body > div, #storybook-root { width: 100%; height: 100%; margin: 0; padding: 0; }`;
+    style.id = VIEWPORT_RESET_STYLE_ID;
+    style.textContent = VIEWPORT_RESET_CSS;
     doc.head.appendChild(style);
 };
 const serializeArg = (arg) => {

package/dist/stories/BodyPortal.d.ts

@@ -0,0 +1,12 @@
+export interface IBodyPortalProps {
+    /** Label of the portalled toolbar; the toolbar sizes itself to it. */
+    label?: string;
+}
+/**
+ * Renders a fixed-position toolbar straight into <body>, the way UI
+ * libraries portal floating actions, popovers and dropdowns. Like those, it
+ * carries no explicit width/height and sizes itself to its content, so a
+ * capture-time rule that stretches <body> children would balloon it.
+ */
+export declare const BodyPortal: ({ label }: IBodyPortalProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BodyPortal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BodyPortal.d.ts","sourceRoot":"","sources":["../../src/stories/BodyPortal.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,WAAgC,gBAAgB,4CAuB1E,CAAC"}

package/dist/stories/BodyPortal.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+/**
+ * Renders a fixed-position toolbar straight into <body>, the way UI
+ * libraries portal floating actions, popovers and dropdowns. Like those, it
+ * carries no explicit width/height and sizes itself to its content, so a
+ * capture-time rule that stretches <body> children would balloon it.
+ */
+export const BodyPortal = ({ label = 'floating actions' }) => (_jsxs("div", { style: { height: '100%', padding: 16, boxSizing: 'border-box' }, children: [_jsx("h1", { children: "A toolbar portalled into body sits at the bottom right" }), createPortal(_jsx("div", { className: "body-portal-toolbar", "data-testid": "body-portal", style: {
+                position: 'fixed',
+                right: 16,
+                bottom: 16,
+                padding: '6px 12px',
+                background: '#1d4ed8',
+                color: '#fff',
+                borderRadius: 4,
+                whiteSpace: 'nowrap',
+            }, children: label }), document.body)] }));

package/dist/stories/BodyPortal.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ label }: import("./BodyPortal.js").IBodyPortalProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * The capture-time viewport reset sizes the story canvas to the viewport but
+ * must leave elements portalled into <body> alone. Before the fix the
+ * content-sized portal was stretched to 100% x 100% of the viewport.
+ */
+export declare const KeepsItsOwnSize: Story;
+//# sourceMappingURL=BodyPortal.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BodyPortal.stories.d.ts","sourceRoot":"","sources":["../../src/stories/BodyPortal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAK5D,QAAA,MAAM,IAAI;;;;;;CAMyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAC"}

package/dist/stories/BodyPortal.stories.js

@@ -0,0 +1,33 @@
+import { expect, within } from 'storybook/test';
+import { BodyPortal } from './BodyPortal.js';
+const meta = {
+    title: 'Example/BodyPortal',
+    component: BodyPortal,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+/**
+ * The capture-time viewport reset sizes the story canvas to the viewport but
+ * must leave elements portalled into <body> alone. Before the fix the
+ * content-sized portal was stretched to 100% x 100% of the viewport.
+ */
+export const KeepsItsOwnSize = {
+    args: { label: 'floating actions' },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText(/portalled into body/i)).toBeInTheDocument();
+        const portal = document.querySelector('[data-testid="body-portal"]');
+        if (!portal)
+            throw new Error('portal not rendered');
+        const rect = portal.getBoundingClientRect();
+        // Content-sized: a short label, one line. Stretched: the whole viewport.
+        await expect(rect.width).toBeLessThan(window.innerWidth / 2);
+        await expect(rect.height).toBeLessThan(60);
+        await expect(rect.right).toBeLessThanOrEqual(window.innerWidth);
+        await expect(rect.bottom).toBeLessThanOrEqual(window.innerHeight);
+        // The anonymous story canvas itself still fills the viewport.
+        await expect(canvasElement.getBoundingClientRect().height).toBe(window.innerHeight);
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/qlip",
-  "version": "0.1.3-pr.28.g211f2a4",
+  "version": "0.1.3-pr.29.g497a7aa",
   "description": "Storybook screenshot capture for the Vitest addon",
   "type": "module",
   "main": "./dist/index.js",
@@ -76,6 +76,7 @@
     "@storybook/addon-vitest": "^10.2.0",
     "@storybook/react-vite": "^10.2.0",
     "@types/node": "^20.10.0",
+    "@types/react-dom": "^19.2.7",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitest/browser-playwright": "^4.0.17",