) : (
diff --git a/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx b/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx
index d5f3d71..1208d4d 100644
--- a/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx
+++ b/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx
@@ -1,6 +1,6 @@
import { Badge, Card, CardSidebar, CardTitle, RichText } from '$shared/ui';
-type Props = {
+export interface Props {
/**
* Job title
*/
@@ -25,7 +25,7 @@ type Props = {
* Additional CSS classes forwarded to the card
*/
className?: string;
-};
+}
/**
* Work experience card with sidebar layout.
@@ -37,9 +37,9 @@ export function ExperienceCard({ title, company, period, description, stack, cla
+
{period}
-
{company}
+
{company}
{stack.length > 0 && (
{stack.map((tech) => (
diff --git a/src/entities/project/ui/DetailedProjectCard/DetailedProjectCard.tsx b/src/entities/project/ui/DetailedProjectCard/DetailedProjectCard.tsx
index f4365ef..fba5a5c 100644
--- a/src/entities/project/ui/DetailedProjectCard/DetailedProjectCard.tsx
+++ b/src/entities/project/ui/DetailedProjectCard/DetailedProjectCard.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
import { Card, RichText } from '$shared/ui';
import { ProjectMetadata } from '../ProjectMetadata/ProjectMetadata';
-type Props = {
+export interface Props {
/**
* Project name
*/
@@ -36,7 +36,7 @@ type Props = {
* @default false
*/
reverse?: boolean;
-};
+}
/**
* Full-width detailed project card with metadata sidebar.
diff --git a/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx b/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx
index 0d3cef8..9d3db95 100644
--- a/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx
+++ b/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx
@@ -124,5 +124,11 @@ describe('ProjectCard', () => {
const imgWrapper = container.querySelector('img')?.parentElement;
expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border');
});
+
+ it('image is wrapped in a lightbox button with cursor-zoom-in', () => {
+ render();
+ const btn = screen.getByRole('button', { name: DEFAULT_PROPS.title });
+ expect(btn).toHaveClass('cursor-zoom-in');
+ });
});
});
diff --git a/src/entities/project/ui/ProjectCard/ProjectCard.tsx b/src/entities/project/ui/ProjectCard/ProjectCard.tsx
index b1d7422..6a1cd63 100644
--- a/src/entities/project/ui/ProjectCard/ProjectCard.tsx
+++ b/src/entities/project/ui/ProjectCard/ProjectCard.tsx
@@ -1,8 +1,7 @@
-import Image from 'next/image';
import { cn } from '$shared/lib';
-import { Badge, Button, Card, CardSidebar, CardTitle, RichText } from '$shared/ui';
+import { Badge, Button, Card, CardSidebar, CardTitle, ImageLightbox, RichText } from '$shared/ui';
-type Props = {
+export interface Props {
/**
* Project name
*/
@@ -27,14 +26,20 @@ type Props = {
* Optional preview image URL
*/
imageUrl?: string;
-};
+ /**
+ * Skip lazy-loading the preview image. Set true for above-the-fold cards
+ * (typically the first card in the list) to improve LCP.
+ * @default false
+ */
+ priority?: boolean;
+}
/**
* Project card with sidebar layout.
* Sidebar: year badge, stack tags, View Project button.
* Main: title, optional image, description.
*/
-export function ProjectCard({ title, year, description, tags, url, imageUrl }: Props) {
+export function ProjectCard({ title, year, description, tags, url, imageUrl, priority = false }: Props) {
return (
)}
-
@@ -59,9 +64,7 @@ export function ProjectCard({ title, year, description, tags, url, imageUrl }: P
{title}
{imageUrl && (
-
-
-
+
)}
diff --git a/src/entities/project/ui/ProjectMetadata/ProjectMetadata.tsx b/src/entities/project/ui/ProjectMetadata/ProjectMetadata.tsx
index 9722b83..4cc58ec 100644
--- a/src/entities/project/ui/ProjectMetadata/ProjectMetadata.tsx
+++ b/src/entities/project/ui/ProjectMetadata/ProjectMetadata.tsx
@@ -1,6 +1,6 @@
import { cn } from '$shared/lib';
-type Props = {
+export interface Props {
/**
* Project year
*/
@@ -17,7 +17,7 @@ type Props = {
* Additional CSS classes
*/
className?: string;
-};
+}
/**
* Sidebar metadata display for a project: year, role, and stack.
diff --git a/src/shared/assets/icons/CloseIcon.tsx b/src/shared/assets/icons/CloseIcon.tsx
new file mode 100644
index 0000000..6a5ca73
--- /dev/null
+++ b/src/shared/assets/icons/CloseIcon.tsx
@@ -0,0 +1,30 @@
+export interface Props {
+ /**
+ * CSS classes on the svg element
+ */
+ className?: string;
+}
+
+/**
+ * Close / X icon (Lucide).
+ */
+export function CloseIcon({ className }: Props) {
+ return (
+
+ );
+}
diff --git a/src/shared/assets/icons/MagnifyIcon.tsx b/src/shared/assets/icons/MagnifyIcon.tsx
new file mode 100644
index 0000000..0491147
--- /dev/null
+++ b/src/shared/assets/icons/MagnifyIcon.tsx
@@ -0,0 +1,30 @@
+export interface Props {
+ /**
+ * CSS classes on the svg element
+ */
+ className?: string;
+}
+
+/**
+ * Magnify / search icon (Lucide).
+ */
+export function MagnifyIcon({ className }: Props) {
+ return (
+
+ );
+}
diff --git a/src/shared/assets/icons/index.ts b/src/shared/assets/icons/index.ts
new file mode 100644
index 0000000..21698bf
--- /dev/null
+++ b/src/shared/assets/icons/index.ts
@@ -0,0 +1,2 @@
+export { CloseIcon } from './CloseIcon';
+export { MagnifyIcon } from './MagnifyIcon';
diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css
index fbd5fec..df1a44b 100644
--- a/src/shared/styles/theme.css
+++ b/src/shared/styles/theme.css
@@ -96,7 +96,6 @@
--duration-spring: 220ms;
--delay-normal: 200ms;
--slide-section-body-in: clamp(1.25rem, 5vw, 3rem);
- --slide-section-body-out: clamp(0.5rem, 1.5vw, 0.75rem);
}
@theme inline {
@@ -154,6 +153,10 @@
html {
font-size: var(--font-size);
+ scroll-behavior: smooth;
+ /* Reserve scrollbar gutter so locking body scroll (e.g. when a modal
+ * opens) doesn't widen the viewport and shift fixed elements. */
+ scrollbar-gutter: stable;
}
body {
@@ -164,30 +167,16 @@
overflow-x: hidden;
}
- /* Subtle blue-tinted grain on parchment */
+ /* Page-wide blue dot grain overlay. z-index 100 puts it above the footer
+ * (z-50) so the grain reads as continuous across the entire viewport;
+ * pointer-events: none keeps everything clickable through it. */
body::before {
+ @apply grain-pattern;
content: "";
position: fixed;
inset: 0;
- background-image:
- repeating-linear-gradient(
- 0deg,
- transparent,
- transparent 2px,
- rgba(4, 28, 243, 0.015) 2px,
- rgba(4, 28, 243, 0.015) 4px
- ),
- repeating-linear-gradient(
- 90deg,
- transparent,
- transparent 2px,
- rgba(4, 28, 243, 0.015) 2px,
- rgba(4, 28, 243, 0.015) 4px
- );
- opacity: 0.6;
- display: block;
pointer-events: none;
- z-index: 1;
+ z-index: 100;
}
h1,
@@ -272,6 +261,18 @@
@utility brutal-border-right {
border-right: var(--border-width) solid var(--blue);
}
+/* Border drawn as an outline — painted after children, so an image's
+ * subpixel paint bleed can't cover it. Doesn't take layout space; the
+ * ancestor must not have overflow:hidden or the outline gets clipped. */
+@utility brutal-outline {
+ outline: var(--border-width) solid var(--blue);
+}
+/* Tiled blue dot pattern — applied to body::before (page-wide) and reusable
+ * on any surface that should share the same paper-grain texture. The SVG
+ * tile is rasterized once and composited cheaply via repeating background. */
+@utility grain-pattern {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23041cf3' opacity='0.10'/%3E%3C/svg%3E");
+}
/* Apply Fraunces variable axes to non-heading elements using the heading font */
.font-wonk {
font-variation-settings:
@@ -340,14 +341,14 @@
}
/* Cross-section view transition (navigation between sections) */
-::view-transition-old(section-content) {
+::view-transition-old(section-title) {
animation-name: section-fade-out;
animation-duration: var(--duration-normal);
animation-timing-function: var(--ease-default);
animation-fill-mode: both;
}
-::view-transition-new(section-content) {
+::view-transition-new(section-title) {
animation-name: section-fade-in;
animation-duration: var(--duration-spring);
animation-timing-function: var(--ease-spring);
@@ -376,12 +377,20 @@
}
}
-/* Section body slide-in from right */
+/* Disable group geometry interpolation — OLD and NEW live at different scroll
+ * positions, so morphing the container drags the slide-in across the viewport.
+ * Let old/new each animate at their own positions instead. */
+::view-transition-group(section-body) {
+ animation: none;
+}
+
+/* Section body — snap OLD out and slide NEW in. Running an explicit OLD
+ * animation left a visible ghost of the previous section's content sitting
+ * behind the incoming slide; hiding it immediately keeps the transition
+ * clean and prevents the two-content overlap. */
::view-transition-old(section-body) {
- animation-name: section-body-out;
- animation-duration: var(--duration-normal);
- animation-timing-function: var(--ease-default);
- animation-fill-mode: both;
+ animation: none;
+ opacity: 0;
}
::view-transition-new(section-body) {
@@ -389,20 +398,11 @@
animation-duration: var(--duration-spring);
animation-timing-function: var(--ease-spring);
animation-fill-mode: both;
+ /* Hold the start-state for this delay before the slide-in begins — gives
+ * the snap-out a beat to register visually before new content arrives. */
animation-delay: var(--delay-normal);
}
-@keyframes section-body-out {
- from {
- opacity: 1;
- transform: translateX(0) scale(1);
- }
- to {
- opacity: 0;
- transform: translateX(calc(-1 * var(--slide-section-body-out))) scale(0.98);
- }
-}
-
@keyframes section-body-in {
from {
opacity: 0;
@@ -414,11 +414,73 @@
}
}
-/* Keep footer above sliding section-body during view transitions */
+/* Page-load entry animation for the footer. Previously also carried
+ * `view-transition-name: site-footer` to layer above section-body's slide
+ * group, but the section-body group now has `animation: none` (purely
+ * horizontal slide of OLD/NEW snapshots), so the footer can live in the root
+ * snapshot during transitions — which also lets the lightbox dialog group
+ * stack cleanly above it. */
.footer-vt {
- view-transition-name: site-footer;
+ animation: footer-enter var(--duration-slow) var(--ease-spring) both;
}
-::view-transition-group(site-footer) {
- z-index: 10;
+@keyframes footer-enter {
+ from {
+ opacity: 0;
+ transform: translateY(100%);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Lightbox dialog backdrop — flat cream wash. No filter, no gradient.
+ * Cheapest possible; Firefox-friendly during view transitions. */
+dialog.lightbox::backdrop {
+ background-color: color-mix(in srgb, var(--cream) 80%, transparent);
+}
+
+/* Give the lightbox dialog its own view-transition group so it can stack
+ * above the footer's named group (z=10) during the open/close transition.
+ * Closed dialogs have `display: none` (UA) and don't get snapshotted, so
+ * sharing the name across all `.lightbox` dialogs at rest is harmless —
+ * only the open one participates in any given transition. */
+dialog.lightbox {
+ view-transition-name: lightbox-dialog;
+}
+
+::view-transition-group(lightbox-dialog) {
+ z-index: 20;
+}
+
+/* The image wrapper (and the thumb during the OLD snapshot of an open
+ * transition) shares this static name — imperatively assigned only during
+ * the morph, so there's never more than one element holding it at a time.
+ * z=30 keeps it above the dialog (z=20) and the footer (z=10) during VT. */
+::view-transition-group(lightbox-frame) {
+ z-index: 30;
+}
+
+/* Lightbox image sizing — leaves vertical headroom for the fixed close button
+ * (sits at top-3, ~2.5rem tall). 8rem total = ~4rem top/bottom after centering,
+ * so the button never overlaps the image.
+ * box-sizing: content-box so max-w/max-h apply to the image pixels and the
+ * 3px brutal-border sits outside them — avoids subpixel clipping of the
+ * border by the dialog's overflow:hidden when both have border-box. */
+@utility lightbox-image {
+ box-sizing: content-box;
+ max-width: calc(100vw - 2rem);
+ max-height: calc(100vh - 10rem);
+}
+
+/* Disable transition animation for Firefox
+ * since it isn't supported yet */
+@supports (-moz-appearance: none) {
+ ::view-transition-group(lightbox-frame),
+ ::view-transition-old(lightbox-frame),
+ ::view-transition-new(lightbox-frame) {
+ animation-duration: 0s !important;
+ animation-delay: 0s !important;
+ }
}
diff --git a/src/shared/ui/Button/ui/Button.test.tsx b/src/shared/ui/Button/ui/Button.test.tsx
index 388838f..78ee56b 100644
--- a/src/shared/ui/Button/ui/Button.test.tsx
+++ b/src/shared/ui/Button/ui/Button.test.tsx
@@ -24,11 +24,11 @@ describe('Button', () => {
});
it('applies outline variant', () => {
render();
- expect(screen.getByRole('button')).toHaveClass('bg-transparent');
+ expect(screen.getByRole('button')).toHaveClass('bg-cream');
});
it('applies ghost variant', () => {
render();
- expect(screen.getByRole('button')).toHaveClass('bg-cream');
+ expect(screen.getByRole('button')).toHaveClass('bg-transparent');
});
});
describe('sizes', () => {
diff --git a/src/shared/ui/Button/ui/Button.tsx b/src/shared/ui/Button/ui/Button.tsx
index 2a11e58..c3a8103 100644
--- a/src/shared/ui/Button/ui/Button.tsx
+++ b/src/shared/ui/Button/ui/Button.tsx
@@ -46,9 +46,9 @@ const VARIANTS = {
secondary:
'brutal-border bg-blue text-cream shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-md active:translate-x-0.5 active:translate-y-0.5 active:shadow-brutal-xs',
outline:
- 'brutal-border bg-transparent text-blue shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-md active:translate-x-0.5 active:translate-y-0.5 active:shadow-brutal-xs',
- ghost:
'brutal-border border-blue/35 bg-cream text-blue hover:border-blue hover:bg-blue/10 active:bg-blue active:text-cream',
+ ghost:
+ 'brutal-border bg-transparent text-blue hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-0.5 active:translate-y-0.5',
} as const satisfies Record;
const SIZES = {
diff --git a/src/shared/ui/ImageLightbox/index.ts b/src/shared/ui/ImageLightbox/index.ts
new file mode 100644
index 0000000..b43fbfb
--- /dev/null
+++ b/src/shared/ui/ImageLightbox/index.ts
@@ -0,0 +1 @@
+export { ImageLightbox } from './ui/ImageLightbox';
diff --git a/src/shared/ui/ImageLightbox/ui/ImageLightbox.stories.tsx b/src/shared/ui/ImageLightbox/ui/ImageLightbox.stories.tsx
new file mode 100644
index 0000000..8da395c
--- /dev/null
+++ b/src/shared/ui/ImageLightbox/ui/ImageLightbox.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { ImageLightbox } from './ImageLightbox';
+
+const meta: Meta = {
+ title: 'Shared/ImageLightbox',
+ component: ImageLightbox,
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ src: 'https://picsum.photos/800/450',
+ alt: 'Sample project image',
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
diff --git a/src/shared/ui/ImageLightbox/ui/ImageLightbox.test.tsx b/src/shared/ui/ImageLightbox/ui/ImageLightbox.test.tsx
new file mode 100644
index 0000000..2bf7a99
--- /dev/null
+++ b/src/shared/ui/ImageLightbox/ui/ImageLightbox.test.tsx
@@ -0,0 +1,90 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ImageLightbox } from './ImageLightbox';
+
+// jsdom does not implement dialog methods — mock them
+beforeAll(() => {
+ HTMLDialogElement.prototype.showModal = vi.fn();
+ HTMLDialogElement.prototype.close = vi.fn();
+});
+
+beforeEach(() => {
+ vi.clearAllMocks();
+ document.body.style.overflow = '';
+});
+
+const DEFAULT_PROPS = { src: '/project.jpg', alt: 'My Project' };
+
+describe('ImageLightbox', () => {
+ describe('thumbnail', () => {
+ it('renders a thumbnail image', () => {
+ render();
+ expect(screen.getByRole('img', { name: 'My Project' })).toBeInTheDocument();
+ });
+
+ it('thumbnail button has cursor-zoom-in', () => {
+ render();
+ const btn = screen.getByRole('button', { name: 'My Project' });
+ expect(btn).toHaveClass('cursor-zoom-in');
+ });
+
+ it('forwards className to the thumbnail button', () => {
+ render();
+ expect(screen.getByRole('button', { name: 'My Project' })).toHaveClass('extra-class');
+ });
+ });
+
+ describe('dialog', () => {
+ it('clicking the thumbnail opens the dialog', () => {
+ render();
+ fireEvent.click(screen.getByRole('button', { name: 'My Project' }));
+ expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledTimes(1);
+ });
+
+ it('clicking the close button closes the dialog', () => {
+ render();
+ fireEvent.click(screen.getByRole('button', { name: 'My Project' })); // open first
+ fireEvent.click(screen.getByRole('button', { name: /close/i, hidden: true }));
+ expect(HTMLDialogElement.prototype.close).toHaveBeenCalledTimes(1);
+ });
+
+ it('clicking the backdrop (dialog element itself) closes the dialog', () => {
+ render();
+ const dialog = document.querySelector('dialog') as HTMLDialogElement;
+ fireEvent.click(dialog, { target: dialog });
+ expect(HTMLDialogElement.prototype.close).toHaveBeenCalledTimes(1);
+ });
+
+ it('clicking inside the dialog (not backdrop) does not close', () => {
+ render();
+ const dialog = document.querySelector('dialog') as HTMLDialogElement;
+ const inner = dialog.querySelector('img') as HTMLImageElement;
+ fireEvent.click(inner);
+ expect(HTMLDialogElement.prototype.close).not.toHaveBeenCalled();
+ });
+
+ it('dialog has accessible label matching alt text', () => {
+ render();
+ expect(document.querySelector('dialog')).toHaveAttribute('aria-label', 'My Project');
+ });
+
+ it('opening the lightbox blocks body scroll', () => {
+ render();
+ fireEvent.click(screen.getByRole('button', { name: 'My Project' }));
+ expect(document.body.style.overflow).toBe('hidden');
+ });
+
+ it('closing the lightbox restores body scroll', () => {
+ render();
+ fireEvent.click(screen.getByRole('button', { name: 'My Project' }));
+ const dialog = document.querySelector('dialog') as HTMLDialogElement;
+ fireEvent(dialog, new Event('close'));
+ expect(document.body.style.overflow).toBe('');
+ });
+
+ it('close button is positioned fixed', () => {
+ render();
+ const closeBtn = screen.getByRole('button', { name: /close/i, hidden: true });
+ expect(closeBtn).toHaveClass('fixed');
+ });
+ });
+});
diff --git a/src/shared/ui/ImageLightbox/ui/ImageLightbox.tsx b/src/shared/ui/ImageLightbox/ui/ImageLightbox.tsx
new file mode 100644
index 0000000..02d9a38
--- /dev/null
+++ b/src/shared/ui/ImageLightbox/ui/ImageLightbox.tsx
@@ -0,0 +1,197 @@
+'use client';
+
+import Image from 'next/image';
+import { type SyntheticEvent, useRef } from 'react';
+import { CloseIcon } from '$shared/assets/icons';
+import { cn } from '$shared/lib';
+import { Button } from '$shared/ui/Button';
+import { Modal, type ModalHandle } from '$shared/ui/Modal';
+
+export interface Props {
+ /**
+ * Image source URL
+ */
+ src: string;
+ /**
+ * Image alt text, also used as the dialog accessible label
+ */
+ alt: string;
+ /**
+ * CSS classes forwarded to the thumbnail button wrapper
+ */
+ className?: string;
+ /**
+ * Skip lazy-loading and preload the thumbnail. Set true for above-the-fold
+ * images to improve LCP.
+ * @default false
+ */
+ priority?: boolean;
+ /**
+ * Responsive `sizes` attribute for the thumbnail. Without this, next/image
+ * `fill` defaults to `100vw` and the browser fetches the largest srcset
+ * variant. Tune to match the actual rendered width at each breakpoint.
+ * @default '(min-width: 1024px) 56rem, 100vw'
+ */
+ sizes?: string;
+}
+
+/**
+ * Clickable image thumbnail that opens a fullscreen brutalist dialog on click.
+ *
+ * Uses the View Transitions API to morph the thumbnail's rect into the dialog
+ * frame's rect (and back on close). The view-transition-name is seated
+ * just-in-time around each transition rather than living on the thumb at rest
+ * — a persistent name would isolate the thumb from any parent transition
+ * (e.g. the section-body slide-in), causing the image to snap into place
+ * while the rest of the section animates.
+ */
+export function ImageLightbox({
+ src,
+ alt,
+ className,
+ priority = false,
+ sizes = '(min-width: 1024px) 56rem, 100vw',
+}: Props) {
+ const modalRef = useRef(null);
+ const thumbRef = useRef(null);
+ const dialogFrameRef = useRef(null);
+ /* Shared static name across all instances. Only one dialog can be open at a
+ * time (showModal is browser-exclusive), and we set the name imperatively
+ * only during a transition — so at any snapshot, exactly one element has it. */
+ const vtName = 'lightbox-frame';
+
+ /**
+ * Drops the view-transition-name from both thumb and dialog frame. Called
+ * after the lightbox close transition settles (and as a safety net on any
+ * unexpected close path) so the thumb rejoins parent transitions.
+ */
+ function clearVtNames() {
+ if (thumbRef.current) {
+ thumbRef.current.style.viewTransitionName = '';
+ }
+ if (dialogFrameRef.current) {
+ dialogFrameRef.current.style.viewTransitionName = '';
+ }
+ }
+
+ /**
+ * Runs `mutate` inside a view transition when supported; falls back to a
+ * plain synchronous call otherwise (Firefox without VT support, jsdom).
+ * Returns the transition handle so callers can await `finished` for cleanup.
+ */
+ function withTransition(mutate: () => void): { finished: Promise } | null {
+ const doc = document as Document & {
+ startViewTransition?: (cb: () => void) => { finished: Promise };
+ };
+ if (typeof doc.startViewTransition === 'function') {
+ return doc.startViewTransition(mutate);
+ }
+ mutate();
+ return null;
+ }
+
+ function open() {
+ /* Seat the name on the thumb *before* startViewTransition so it's
+ * captured in the OLD snapshot. The thumb otherwise carries no vt-name. */
+ if (thumbRef.current) {
+ thumbRef.current.style.viewTransitionName = vtName;
+ }
+ withTransition(() => {
+ if (thumbRef.current) {
+ thumbRef.current.style.viewTransitionName = '';
+ }
+ if (dialogFrameRef.current) {
+ dialogFrameRef.current.style.viewTransitionName = vtName;
+ }
+ modalRef.current?.open();
+ });
+ }
+
+ function close() {
+ const transition = withTransition(() => {
+ if (dialogFrameRef.current) {
+ dialogFrameRef.current.style.viewTransitionName = '';
+ }
+ if (thumbRef.current) {
+ thumbRef.current.style.viewTransitionName = vtName;
+ }
+ modalRef.current?.close();
+ });
+ /* Drop the name from the thumb once the transition settles. Otherwise the
+ * thumb stays its own snapshot until the next open, isolated from any
+ * parent transition that runs in the meantime. */
+ if (transition) {
+ transition.finished.finally(clearVtNames);
+ } else {
+ clearVtNames();
+ }
+ }
+
+ /**
+ * Intercept ESC so it also runs through our view-transition-wrapped close.
+ * Without this, ESC would snap the dialog away without the morph.
+ */
+ function handleCancel(e: SyntheticEvent) {
+ e.preventDefault();
+ close();
+ }
+
+ return (
+ <>
+
+
+
+ {/* Wrapper carries the border as an `outline` (not `border`) — paint
+ * order is border→children→outline, so an `outline` is drawn ON TOP
+ * of any subpixel image bleed and stays fully visible. The dialog
+ * uses `overflow-visible` because outline can be clipped by an
+ * ancestor's overflow:hidden.
+ * The wrapper is the named VT element so the brutalist frame
+ * participates in the morph.
+ * aria-hidden: the dialog element itself carries the accessible label. */}
+
+ {/* Explicit width/height are placeholders next/image requires when not using `fill`; CSS
+ * (`lightbox-image` max-w/max-h + `w-auto h-auto`) drives the actual rendered size, so
+ * the dialog still hugs the image's intrinsic dimensions (capped at viewport bounds).
+ * `sizes="100vw"` hints the browser to fetch the srcset variant matching viewport width. */}
+
+
+
+
+
+ );
+}
diff --git a/src/shared/ui/InlineSvg/ui/InlineSvg.tsx b/src/shared/ui/InlineSvg/ui/InlineSvg.tsx
index 182dad4..a988764 100644
--- a/src/shared/ui/InlineSvg/ui/InlineSvg.tsx
+++ b/src/shared/ui/InlineSvg/ui/InlineSvg.tsx
@@ -1,7 +1,7 @@
import parse from 'html-react-parser';
import { cn } from '$shared/lib';
-type Props = {
+export interface Props {
/**
* SVG markup string to inline as React elements
*/
@@ -10,7 +10,7 @@ type Props = {
* Additional CSS classes on the wrapper span
*/
className?: string;
-};
+}
/**
* Parses an SVG markup string into React elements.
diff --git a/src/shared/ui/Modal/index.ts b/src/shared/ui/Modal/index.ts
new file mode 100644
index 0000000..506d976
--- /dev/null
+++ b/src/shared/ui/Modal/index.ts
@@ -0,0 +1 @@
+export { Modal, type ModalHandle } from './ui/Modal';
diff --git a/src/shared/ui/Modal/ui/Modal.stories.tsx b/src/shared/ui/Modal/ui/Modal.stories.tsx
new file mode 100644
index 0000000..e5364c4
--- /dev/null
+++ b/src/shared/ui/Modal/ui/Modal.stories.tsx
@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useRef } from 'react';
+import { Button } from '../../Button';
+import { Modal, type ModalHandle } from './Modal';
+
+const meta: Meta = {
+ title: 'Shared/Modal',
+ component: Modal,
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+/**
+ * Imperative trigger — Storybook can't drive a ref-based API directly, so each
+ * story renders its own trigger button that calls `modalRef.current?.open()`.
+ */
+function TriggerWrapper({ className, children }: { className?: string; children: React.ReactNode }) {
+ const modalRef = useRef(null);
+ return (
+