@weasel-js/labkit 1.7.3 → 1.8.1

package/src/lab/openLab.ts

@@ -0,0 +1,119 @@
+import { stableStringify } from '@weasel-js/core';
+import type { InstrumentList } from '../instrument/types';
+import { defaultStorage, noneAdapter } from '../state/adapters';
+import { valueRecord } from '../state/labRecords';
+import { type OpenedLabStore, openLabStore } from '../state/openLabStore';
+import { createRecordCache, type RecordCache } from '../state/records';
+import { createLabStore, type LabStore } from '../state/store';
+import type { LabMode, StorageAdapter } from '../state/types';
+import { addTrial as addTrialOp } from '../trial/trialOps';
+
+export interface OpenedLab extends OpenedLabStore {
+  marks: ReadonlyMap<string, unknown>;
+}
+
+/** What opening a lab reads from `<Lab>`'s props. */
+export interface OpenLabOptions {
+  instruments: InstrumentList;
+  defaultInstrument: string;
+  mode?: LabMode | undefined;
+}
+
+/** The trial a presented lab opens on. `config` is overlaid on the
+ *  instrument's defaults the way `addTrial`'s is, so Reset returns to it;
+ *  `state` and `view` replace what that config would give. */
+export interface PresentationSeed<TC = Record<string, unknown>, TS = unknown, TV = unknown> {
+  /** Default: the lab's `defaultInstrument`. */
+  instrument?: string;
+  config?: Partial<TC>;
+  state?: TS;
+  view?: TV;
+}
+
+/** Where a lab stored under `storageKey` keeps its presentation, apart from
+ *  the full lab: an embed shares its origin's storage with the lab it shows. */
+export function presentStorageKey(storageKey: string): string {
+  return `${storageKey}:present`;
+}
+
+const SEED_RECORD = valueRecord(null, 'lk-present-seed');
+
+/** Open a presented lab's one trial on `seed`, unless the store already holds
+ *  a trial opened on this same seed — a returning visitor keeps theirs until
+ *  the seed itself changes. */
+function seedPresentedTrial(
+  store: LabStore,
+  records: RecordCache,
+  { instruments, defaultInstrument }: OpenLabOptions,
+  seed: PresentationSeed,
+): void {
+  const instrument = seed.instrument ?? defaultInstrument;
+  const fingerprint = stableStringify({ ...seed, instrument });
+  const trials = store.getState().trials;
+  if (trials.length > 0 && records.get(SEED_RECORD) === fingerprint) return;
+  const record = addTrialOp([], instruments, instrument, { config: seed.config })[0];
+  if (!record) return;
+  store.setState({ trials: [] });
+  store.getState().addTrial({
+    ...record,
+    ...('state' in seed ? { state: seed.state } : {}),
+    ...('view' in seed ? { view: seed.view } : {}),
+  });
+  records.set(SEED_RECORD, fingerprint);
+}
+
+function seedDefaultTrial(
+  store: LabStore,
+  instruments: InstrumentList,
+  defaultInstrument: string,
+): void {
+  if (store.getState().trials.length > 0) return;
+  const record = addTrialOp([], instruments, defaultInstrument)[0];
+  if (!record) return;
+  store.getState().addTrial(record);
+}
+
+/** A lab with nothing to load renders at once. Its records hold
+ *  `usePersistedState` values for the session and write nothing. With a
+ *  `seed`, the lab is presented and opens on it. */
+export function openUnstoredLab(options: OpenLabOptions, seed?: PresentationSeed): OpenedLab {
+  const { instruments, defaultInstrument, mode } = options;
+  const store = createLabStore({ initialMode: mode ?? 'auto', instruments });
+  const records = createRecordCache({ storage: noneAdapter, prefix: '', writable: false });
+  if (seed) seedPresentedTrial(store, records, options, seed);
+  else seedDefaultTrial(store, instruments, defaultInstrument);
+  return { store, records, close: () => records.close(), marks: new Map() };
+}
+
+export async function openStoredLab(
+  options: OpenLabOptions,
+  storageKey: string,
+  storage: StorageAdapter | undefined,
+  seed?: PresentationSeed,
+): Promise<OpenedLab> {
+  const { instruments, defaultInstrument, mode } = options;
+  // The store reads the instruments' serializers and defaults while it is being
+  // built, so they go in with it rather than being pushed onto it afterwards.
+  const opened = await openLabStore({
+    storageKey,
+    storage: storage ?? (await defaultStorage()),
+    initialMode: mode ?? 'auto',
+    instruments,
+  });
+  if (seed) seedPresentedTrial(opened.store, opened.records, options, seed);
+  else seedDefaultTrial(opened.store, instruments, defaultInstrument);
+  const marks = new Map<string, unknown>();
+  await Promise.all(
+    opened.store.getState().trials.map(async (trial) => {
+      const kept = instruments.find((i) => i.name === trial.instrumentName)?.annotations?.storage;
+      if (!kept) return;
+      try {
+        marks.set(trial.id, await kept.load());
+      } catch (error) {
+        console.warn(`[labkit] could not load the marks of trial "${trial.id}"`, error);
+        marks.set(trial.id, null);
+      }
+    }),
+  );
+  return { ...opened, marks };
+}

package/src/lab/presentation.browser.test.less

@@ -0,0 +1,5 @@
+// Host page for presentation.browser.test: a lab with a definite box to fill.
+.lk-present-frame {
+  height: 480px;
+  width: 640px;
+}

package/src/lab/presentation.browser.test.tsx

@@ -0,0 +1,119 @@
+import '@weasel-js/theme/tokens.css';
+import 'windease/styles.css';
+import '../styles.less';
+import './presentation.browser.test.less';
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, expect, test } from 'vitest';
+import type { Instrument } from '../instrument/types';
+import { Lab } from './Lab';
+import { LabContext, type LabContextValue } from './LabContext';
+import { type Presentation, usePresentation } from './presentation';
+
+// What presenting hides and what it fills is layout, and what it hands the page
+// is a computed color-scheme: a browser's to answer.
+
+afterEach(cleanup);
+
+const Painted: Instrument = {
+  name: 'Painted',
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  canvas: {
+    layers: [
+      {
+        id: 'fill',
+        draw: (ctx) => {
+          ctx.fillStyle = 'rgb(0, 128, 255)';
+          ctx.fillRect(-1e5, -1e5, 2e5, 2e5);
+        },
+      },
+    ],
+  },
+  render: () => null,
+};
+
+let presentation: Presentation | null = null;
+let lab: LabContextValue | null = null;
+function Capture() {
+  presentation = usePresentation();
+  return (
+    <LabContext.Consumer>
+      {(value) => {
+        lab = value;
+        return null;
+      }}
+    </LabContext.Consumer>
+  );
+}
+
+function mount(present: boolean) {
+  return render(
+    <div className="lk-present-frame">
+      <Lab instruments={[Painted]} defaultInstrument="Painted" present={present}>
+        <Capture />
+      </Lab>
+    </div>,
+  );
+}
+
+const box = (el: Element | null) => el?.getBoundingClientRect();
+const hasBox = (el: Element | null) => !!el && el.getClientRects().length > 0;
+
+test('a presented trial fills the lab and nothing else has a box', async () => {
+  const { container } = mount(true);
+  await expect
+    .poll(() => box(container.querySelector('.lk-trial__stage'))?.width)
+    .toBeGreaterThan(0);
+  const labEl = container.querySelector('.lk-lab');
+  const trial = container.querySelector('.lk-trial[data-lk-presented]');
+  const stage = container.querySelector('.lk-trial__stage');
+
+  expect(box(trial)).toEqual(box(container.querySelector('.lk-lab__body')));
+  expect(box(stage)).toEqual(box(trial));
+  expect(box(labEl)?.height).toBe(480);
+  expect(box(stage)?.height).toBe(480);
+  expect(
+    getComputedStyle(container.querySelector('.lk-canvas-stack') as Element).backgroundColor,
+  ).toBe('rgba(0, 0, 0, 0)');
+  for (const hidden of ['.lk-viewport-controls', '.lk-shell-header', '.lk-trial__titlebar']) {
+    expect(container.querySelector(hidden), hidden).not.toBeNull();
+  }
+  for (const hidden of [
+    '.lk-viewport-controls',
+    '.lk-shell-header',
+    '.lk-trial__titlebar',
+    '.lk-trial__toolbar',
+    '.lk-trial__status',
+    '.lk-trial__sidebar',
+  ]) {
+    expect(hasBox(container.querySelector(hidden)), hidden).toBe(false);
+  }
+});
+
+test('a presenting lab hands the page back its own color-scheme and a clear ground', () => {
+  mount(true);
+  const root = getComputedStyle(document.documentElement);
+  expect(root.colorScheme).toBe('normal');
+  expect(root.backgroundColor).toBe('rgba(0, 0, 0, 0)');
+  expect(getComputedStyle(document.body).backgroundColor).toBe('rgba(0, 0, 0, 0)');
+  cleanup();
+  expect(getComputedStyle(document.documentElement).colorScheme).not.toBe('normal');
+});
+
+test('entering and leaving keeps every trial’s canvas element', async () => {
+  const { container } = mount(false);
+  await act(async () => lab?.addTrial('Painted'));
+  const canvases = () => [...container.querySelectorAll('.lk-canvas-stack__canvas')];
+  await expect.poll(() => canvases().length).toBe(2);
+  const before = canvases();
+
+  await act(async () => presentation?.enter());
+  const presented = container.querySelector('.lk-trial[data-lk-presented]');
+  expect(box(presented)).toEqual(box(container.querySelector('.lk-lab__body')));
+  expect(container.querySelectorAll('.lk-trial').length).toBe(2);
+  expect(canvases().filter(hasBox)).toHaveLength(1);
+
+  await act(async () => presentation?.exit());
+  expect(canvases()).toEqual(before);
+  expect(canvases().filter(hasBox)).toHaveLength(2);
+});

package/src/lab/presentation.less

@@ -0,0 +1,64 @@
+// An iframe whose root color-scheme differs from its embedder's is painted
+// opaque, so a presenting lab hands the page back its own.
+:root:has(.lk-lab--present) {
+  color-scheme: normal;
+  background: transparent;
+
+  body {
+    background: transparent;
+  }
+}
+
+.lk-lab--present {
+  --wzl-backdrop: none;
+  background: transparent;
+
+  .lk-shell-header,
+  .lk-shell-footer,
+  .lk-lab__body > .lk-palette-region {
+    display: none;
+  }
+
+  // From the lab body down to the presented trial, and from that trial down to
+  // its stage, an element holding the next one lends it its box and whatever
+  // sits beside them has none. Hidden rather than unmounted, so every canvas
+  // keeps its context through a round trip.
+  .lk-lab__body *:has([data-lk-presented]),
+  [data-lk-presented] *:has(.lk-trial__stage) {
+    display: contents;
+  }
+
+  .lk-lab__body *:has([data-lk-presented]) > :not(:has([data-lk-presented]), [data-lk-presented]),
+  [data-lk-presented] > :not(:has(.lk-trial__stage)),
+  [data-lk-presented] *:has(.lk-trial__stage) > :not(:has(.lk-trial__stage), .lk-trial__stage) {
+    display: none;
+  }
+
+  [data-lk-presented] {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .lk-trial__stage {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    background: transparent;
+
+    // The well a canvas sits in is the lab's ground, not the figure's.
+    .lk-canvas-stack,
+    .lk-stage {
+      background: transparent;
+    }
+
+    // Trial chrome drawn over the content, like the rest of it.
+    .lk-viewport-controls {
+      display: none;
+    }
+  }
+}

package/src/lab/presentation.tsx

@@ -0,0 +1,47 @@
+import { createContext, useContext, useLayoutEffect, useState } from 'react';
+import { useSurfaceOptional } from '../surface/useSurfaceTile';
+
+/** A lab's presentation mode: one trial, without the lab's chrome or its own. */
+export interface Presentation {
+  active: boolean;
+  /** Present the focused trial. Escape returns to the workspace. */
+  enter(): void;
+  exit(): void;
+}
+
+interface PresentationContextValue extends Presentation {
+  /** The trial being presented, while one is. */
+  trialId: string | null;
+}
+
+export const PresentationContext = createContext<PresentationContextValue | null>(null);
+
+/** The presentation mode of the `<Lab>` around the caller. */
+export function usePresentation(): Presentation {
+  const value = useContext(PresentationContext);
+  if (!value) throw new Error('[labkit] usePresentation() must be called inside <Lab>');
+  return value;
+}
+
+/** Whether the trial `trialId` is the one its lab is presenting, and a ref for
+ *  its root: while presented, the lab's shared surface is scoped to it, so the
+ *  tiles hidden behind it stop painting. */
+export function usePresentedTrial(trialId: string): {
+  presented: boolean;
+  ref: (el: HTMLElement | null) => void;
+} {
+  const presented = useContext(PresentationContext)?.trialId === trialId;
+  const surface = useSurfaceOptional();
+  const [el, ref] = useState<HTMLElement | null>(null);
+  useLayoutEffect(() => {
+    if (!presented || !el || !surface) return;
+    surface.scope(el);
+    return () => surface.scope(null);
+  }, [presented, el, surface]);
+  return { presented, ref };
+}
+
+/** Whether the page's URL asks for presentation with `?present`. */
+export function hasPresentParam(): boolean {
+  return typeof location !== 'undefined' && new URLSearchParams(location.search).has('present');
+}

package/src/lab/useFocusPick.ts

@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+import type { LabStore } from '../state/store';
+
+/** Calls `pick` with the id of the trial input lands in — a press, focus
+ *  moving in, or focus moving into a frame — among the trials `store` owns. */
+export function useFocusPick(
+  labBody: HTMLElement | null,
+  store: LabStore,
+  pick: (trialId: string) => void,
+): void {
+  useEffect(() => {
+    if (!labBody) return;
+    const pickFrom = (node: unknown): void => {
+      const owned = new Set(store.getState().trials.map((t) => t.id));
+      const nearest = (from: Element | null | undefined) =>
+        from?.closest<HTMLElement>('.lk-trial[data-trial-id]') ?? null;
+      let trial =
+        typeof (node as Element | null)?.closest === 'function' ? nearest(node as Element) : null;
+      // A trial can hold a lab of its own, whose trials this lab does not own.
+      while (trial && !owned.has(trial.dataset.trialId ?? '')) trial = nearest(trial.parentElement);
+      if (trial?.dataset.trialId) pick(trial.dataset.trialId);
+    };
+    const onInput = (event: Event): void => pickFrom(event.target);
+    // Focus moving into a frame fires nothing in this document: the window
+    // blurs, and the frame is the active element once it has.
+    let pending: ReturnType<typeof setTimeout> | undefined;
+    const doc = labBody.ownerDocument;
+    const win = doc.defaultView;
+    const onBlur = (): void => {
+      clearTimeout(pending);
+      pending = setTimeout(() => pickFrom(doc.activeElement), 0);
+    };
+    labBody.addEventListener('pointerdown', onInput, true);
+    labBody.addEventListener('focusin', onInput, true);
+    win?.addEventListener('blur', onBlur);
+    return () => {
+      clearTimeout(pending);
+      labBody.removeEventListener('pointerdown', onInput, true);
+      labBody.removeEventListener('focusin', onInput, true);
+      win?.removeEventListener('blur', onBlur);
+    };
+  }, [labBody, store, pick]);
+}

package/src/lightbox/Lightbox.browser.test.less

@@ -0,0 +1,14 @@
+// A host that would trap a fixed-position child: a transform makes it the
+// containing block, and the clipping cuts off anything past its edge.
+.lk-lightbox-test-host {
+  width: 480px;
+  height: 320px;
+  overflow: hidden;
+  transform: translate(7px, 5px);
+}
+
+.lk-lightbox-test-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/src/lightbox/Lightbox.browser.test.tsx

@@ -0,0 +1,113 @@
+import '@weasel-js/theme/tokens.css';
+import '../styles.less';
+import './Lightbox.browser.test.less';
+import { cleanup, render } from '@testing-library/react';
+import { useEffect, useRef } from 'react';
+import { afterEach, expect, test } from 'vitest';
+import { userEvent } from 'vitest/browser';
+import { Workspace } from '../lab/Workspace';
+
+// The top layer, its escape from a transformed and clipping ancestor, and what
+// a ResizeObserver reports are all layout — only a real browser has them.
+
+afterEach(cleanup);
+
+interface Probe {
+  mounts: number;
+  sizes: Array<{ w: number; h: number }>;
+  gl: WebGLRenderingContext | null;
+}
+
+/** Stands in for a consumer's expensive tile: a WebGL context it creates once,
+ *  sized from a ResizeObserver. */
+function GlTile({ probe }: { probe: Probe }) {
+  const ref = useRef<HTMLCanvasElement | null>(null);
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    probe.mounts += 1;
+    probe.gl = canvas.getContext('webgl');
+    const ro = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      probe.sizes.push({ w: entry.contentRect.width, h: entry.contentRect.height });
+    });
+    ro.observe(canvas);
+    return () => ro.disconnect();
+  }, [probe]);
+  return <canvas ref={ref} className="lk-lightbox-test-canvas" data-testid="gl" />;
+}
+
+function mount(probe: Probe) {
+  return render(
+    <div className="lk-lightbox-test-host">
+      <Workspace ids={['gl', 'plain']} expandOnDoubleClick={(id) => id === 'gl'}>
+        <GlTile probe={probe} />
+        <div>plain</div>
+      </Workspace>
+    </div>,
+  );
+}
+
+test('a double-clicked tile fills the window from the top layer, on the same element and context', async () => {
+  const probe: Probe = { mounts: 0, sizes: [], gl: null };
+  const { getByTestId } = mount(probe);
+  await expect.poll(() => probe.sizes.length).toBeGreaterThan(0);
+  const canvas = getByTestId('gl') as HTMLCanvasElement;
+  const before = canvas.getBoundingClientRect();
+  const gl = probe.gl;
+  expect(gl).not.toBeNull();
+
+  await userEvent.dblClick(canvas);
+
+  const box = canvas.closest('.lk-lightbox') as HTMLElement;
+  expect(box.matches(':popover-open')).toBe(true);
+  const after = canvas.getBoundingClientRect();
+  // Most of the window, though the host is 480×320, clipped and transformed.
+  expect(after.width).toBeGreaterThan(window.innerWidth * 0.9);
+  expect(after.height).toBeGreaterThan(window.innerHeight * 0.8);
+  expect(after.width).toBeGreaterThan(before.width);
+  await expect.poll(() => probe.sizes.at(-1)?.w ?? 0).toBeCloseTo(after.width, 0);
+
+  // Not remounted: the same element, the same live context, one mount.
+  expect(getByTestId('gl')).toBe(canvas);
+  expect(canvas.getContext('webgl')).toBe(gl);
+  expect(gl?.isContextLost()).toBe(false);
+  expect(probe.mounts).toBe(1);
+});
+
+test('a click in the dimmed margin closes it, and the tile goes back to its rect', async () => {
+  const probe: Probe = { mounts: 0, sizes: [], gl: null };
+  const { getByTestId } = mount(probe);
+  await expect.poll(() => probe.sizes.length).toBeGreaterThan(0);
+  const canvas = getByTestId('gl');
+  const before = canvas.getBoundingClientRect();
+  await userEvent.dblClick(canvas);
+  const box = canvas.closest('.lk-lightbox') as HTMLElement;
+
+  // The margin hit-tests to the lifted element itself, nothing behind it.
+  expect(document.elementFromPoint(4, 4)).toBe(box);
+  await userEvent.click(box, { position: { x: 4, y: 4 } });
+
+  expect(box.matches(':popover-open')).toBe(false);
+  expect(box.hasAttribute('popover')).toBe(false);
+  const back = canvas.getBoundingClientRect();
+  expect(back.width).toBeCloseTo(before.width, 0);
+  expect(back.left).toBeCloseTo(before.left, 0);
+  expect(probe.mounts).toBe(1);
+});
+
+test('Escape closes it and focus returns to the expand button that opened it', async () => {
+  const probe: Probe = { mounts: 0, sizes: [], gl: null };
+  const { getByTestId, getAllByRole } = mount(probe);
+  await expect.poll(() => probe.sizes.length).toBeGreaterThan(0);
+  const box = getByTestId('gl').closest('.lk-lightbox') as HTMLElement;
+  const expand = getAllByRole('button', { name: 'Expand' })[0] as HTMLElement;
+
+  await userEvent.click(expand);
+  expect(box.matches(':popover-open')).toBe(true);
+  expect(document.activeElement?.getAttribute('aria-label')).toBe('Close expanded view');
+
+  await userEvent.keyboard('{Escape}');
+  expect(box.matches(':popover-open')).toBe(false);
+  expect(document.activeElement).toBe(expand);
+});

package/src/lightbox/Lightbox.less

@@ -0,0 +1,128 @@
+// Closed, the lightbox is a plain box filling whatever holds it, so the
+// content's own `height: 100%` chain keeps working.
+.lk-lightbox {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+}
+
+.lk-lightbox__frame {
+  height: 100%;
+  min-height: 0;
+}
+
+.lk-lightbox__button {
+  position: absolute;
+  top: var(--wzl-space-xs);
+  right: var(--wzl-space-xs);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: var(--wzl-border-w) solid var(--wzl-line-subtle);
+  border-radius: var(--wzl-radius-sm);
+  background: var(--wzl-surface);
+  color: var(--wzl-fg-muted);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--wzl-fg);
+  }
+}
+
+// Out of the way until the tile is hovered or the button has focus. A touch
+// screen has no hover, so there it always shows.
+.lk-lightbox__open {
+  opacity: 0;
+  transition: opacity var(--wzl-motion-fast);
+}
+
+.lk-lightbox:hover > .lk-lightbox__open,
+.lk-lightbox__open:focus-visible {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .lk-lightbox__open {
+    opacity: 1;
+  }
+}
+
+// The margin around an open lightbox's frame. The frame backing, drawn by
+// whichever element was lifted first, sits at the same inset.
+@lk-lightbox-margin: 44px 3vw 3vh;
+
+// Open, the same element covers the window, with its padding as the margin
+// and the frame inside holding the content. The declarations past `inset`
+// undo the user-agent popover rules, which are written for a small box.
+.lk-lightbox.lk-lightbox--expanded {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wzl-z-modal);
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  border: 0;
+  padding: @lk-lightbox-margin;
+  overflow: hidden;
+  color: inherit;
+  background: transparent;
+
+  // Positioned, so it paints over the backing the scrim draws.
+  > .lk-lightbox__frame {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--wzl-radius-md);
+  }
+}
+
+// A layer lifted with a lightbox — a shared buffer drawn for the content —
+// covers the window like it, and takes no input of its own.
+[data-lk-lightbox-layer]:popover-open {
+  position: fixed;
+  inset: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  overflow: visible;
+  color: inherit;
+  background: transparent;
+  pointer-events: none;
+}
+
+.lk-lightbox--expanded::backdrop,
+[data-lk-lightbox-layer]::backdrop {
+  background: transparent;
+}
+
+// The lowest lifted element dims the page and backs the frame, so a layer
+// lifted below the content still has something under it.
+[data-lk-lightbox-scrim]::backdrop {
+  background: rgb(0 0 0 / 55%);
+}
+
+[data-lk-lightbox-scrim]::before {
+  content: '';
+  position: fixed;
+  inset: @lk-lightbox-margin;
+  border-radius: var(--wzl-radius-md);
+  background: var(--wzl-surface);
+  box-shadow: 0 8px 32px rgb(0 0 0 / 45%);
+  pointer-events: none;
+}
+
+.lk-lightbox--expanded > .lk-lightbox__close {
+  top: 10px;
+  right: 3vw;
+}