From 807fd400c6c5d9004ac7560be642eda3a025d3c0 Mon Sep 17 00:00:00 2001
From: Roman Bruckner <bruckner.roman@gmail.com>
Date: Thu, 14 May 2026 22:12:18 +0200
Subject: [PATCH 1/3] =?UTF-8?q?refactor(joint-react):=20drop=20Paper=20wid?=
 =?UTF-8?q?th/height=20props=20=E2=80=94=20CSS-only=20sizing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`<Paper>` no longer accepts `width` / `height` props. These were a redundant
way to set inline CSS on the host (`dia.Paper.setDimensions` writes
`$el.css({ width, height })` at the end), conflicting with `style` /
`className` on the same element.

Now the host element is sized exclusively by CSS:
- `useCreatePortalPaper` forces `width: undefined, height: undefined` into
  the `dia.Paper` constructor options so prototype defaults (800/600) are
  clobbered → `paper.getComputedSize()` falls back to
  `el.clientWidth/clientHeight`.
- The dedicated `setDimensions` sync effect on prop change is gone.

All Paper callsites migrated from `<Paper width={N} height={M}>` to
`<Paper style={{ width: N, height: M }}>` (stories, tests, demos,
tutorials, the storybook decorator).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../decorators/with-simple-data.tsx           |  5 +--
 .../components/paper/__tests__/paper.test.tsx |  2 +-
 .../src/components/paper/paper.tsx            | 20 +--------
 .../src/components/paper/paper.types.ts       | 45 +++++--------------
 .../__tests__/paper-element-item.test.tsx     |  8 ++--
 .../__tests__/paper-html-overlay.test.tsx     |  8 +---
 .../__tests__/use-create-features.test.tsx    | 12 +++--
 .../use-create-portal-paper.test.tsx          | 32 ++++---------
 .../src/hooks/__tests__/use-markup.test.tsx   | 14 ++----
 .../hooks/__tests__/use-measure-node.test.tsx | 10 ++---
 .../hooks/__tests__/use-paper-events.test.tsx |  2 +-
 .../src/hooks/__tests__/use-paper.test.tsx    |  2 +-
 .../src/hooks/use-create-portal-paper.tsx     | 30 ++++---------
 .../demos/automatic-layout-storage/code.tsx   |  5 +--
 .../src/stories/demos/collaboration/code.tsx  |  5 +--
 .../src/stories/demos/flowchart/code.tsx      |  3 +-
 .../stories/demos/introduction-demo/code.tsx  |  5 +--
 .../demos/investment-calculator/code.tsx      |  5 +--
 .../src/stories/demos/link-arrows/code.tsx    |  4 +-
 .../src/stories/demos/pulsing-port/code.tsx   |  3 +-
 .../src/stories/demos/saasflow/code.tsx       |  5 +--
 .../src/stories/demos/user-flow/code.tsx      |  5 +--
 .../examples/markup-selectors-html/code.tsx   |  4 +-
 .../examples/markup-selectors/code.tsx        |  5 +--
 .../src/stories/examples/stress/code.tsx      |  2 +-
 .../examples/with-auto-layout/code.tsx        |  3 +-
 .../examples/with-build-in-shapes/code.tsx    |  2 +-
 .../src/stories/examples/with-card/code.tsx   |  2 +-
 .../examples/with-cell-actions/code.tsx       |  2 +-
 .../stories/examples/with-cell-json/code.tsx  |  4 +-
 .../with-collapsible-container/code.tsx       |  4 +-
 .../with-collapsible-subtrees/code.tsx        |  4 +-
 .../stories/examples/with-containers/code.tsx |  4 +-
 .../stories/examples/with-css-theme/code.tsx  |  4 +-
 .../code-with-create-links-classname.tsx      |  2 +-
 .../code-with-create-links.tsx                |  2 +-
 .../with-custom-link/code-with-dia-links.tsx  |  2 +-
 .../examples/with-custom-mapper/code.tsx      |  4 +-
 .../examples/with-data-defaults/code.tsx      |  4 +-
 .../examples/with-default-element/code.tsx    |  3 +-
 .../examples/with-default-link/code.tsx       |  3 +-
 .../with-dynamic-status-icons/code.tsx        |  4 +-
 .../examples/with-element-controls/code.tsx   |  5 +--
 .../examples/with-element-defaults/code.tsx   |  2 +-
 .../with-element-ports-groups/code.tsx        |  3 +-
 .../with-element-ports-native/code.tsx        |  4 +-
 .../examples/with-element-ports/code.tsx      |  3 +-
 .../with-fixed-connection-points/code.tsx     |  5 +--
 .../examples/with-graph-neighbors/code.tsx    |  5 +--
 .../examples/with-highlighter/code.tsx        |  3 +-
 .../examples/with-jointjs-api/code.tsx        |  2 +-
 .../src/stories/examples/with-layers/code.tsx |  4 +-
 .../examples/with-link-labels/code.tsx        |  4 +-
 .../examples/with-link-markers-named/code.tsx |  3 +-
 .../examples/with-link-markers/code.tsx       |  3 +-
 .../examples/with-link-routing/code.tsx       |  3 +-
 .../stories/examples/with-link-tools/code.tsx |  3 +-
 .../stories/examples/with-list-node/code.tsx  |  4 +-
 .../stories/examples/with-minimap/code.tsx    |  6 +--
 .../with-node-update/code-add-remove-node.tsx |  3 +-
 .../with-node-update/code-with-color.tsx      |  2 +-
 .../with-node-update/code-with-svg.tsx        |  2 +-
 .../examples/with-node-update/code.tsx        |  2 +-
 .../examples/with-portal-selector/code.tsx    |  8 +---
 .../examples/with-proximity-link/code.tsx     |  3 +-
 .../examples/with-render-link/code.tsx        |  3 +-
 .../examples/with-resizable-node/code.tsx     |  2 +-
 .../examples/with-rotable-node/code.tsx       |  2 +-
 .../examples/with-shape-animations/code.tsx   |  4 +-
 .../stories/examples/with-svg-node/code.tsx   |  2 +-
 .../examples/with-tailwind-theme/code.tsx     |  3 +-
 .../code-controlled-mode-jotai.tsx            |  2 +-
 .../code-controlled-mode-peerjs.tsx           |  2 +-
 .../code-controlled-mode-redux.tsx            |  2 +-
 .../code-controlled-mode-reset.tsx            |  2 +-
 .../code-controlled-mode-zustand.tsx          |  2 +-
 .../step-by-step/code-controlled-mode.tsx     |  2 +-
 .../step-by-step/code-html-renderer.tsx       |  3 +-
 .../tutorials/step-by-step/code-html.tsx      |  2 +-
 .../tutorials/step-by-step/code-svg.tsx       |  2 +-
 .../utils/joint-jsx/jsx-to-markup.stories.tsx |  2 +-
 .../joint-react/src/utils/test-wrappers.tsx   |  8 ++--
 82 files changed, 125 insertions(+), 296 deletions(-)

diff --git a/packages/joint-react/.storybook/decorators/with-simple-data.tsx b/packages/joint-react/.storybook/decorators/with-simple-data.tsx
index 5f8f2db505..86640b6427 100644
--- a/packages/joint-react/.storybook/decorators/with-simple-data.tsx
+++ b/packages/joint-react/.storybook/decorators/with-simple-data.tsx
@@ -84,8 +84,7 @@ export function RenderItemDecorator(
   return (
     <div style={{ width: '100%', height: 450 }}>
       <GraphProvider initialCells={properties.cells ?? testCells}>
-        <Paper
-          height={450}
+        <Paper style={{ height: 450 }}
           className={PAPER_CLASSNAME}
           renderElement={properties.renderElement}
           renderLink={properties.renderLink}
@@ -105,7 +104,7 @@ export function RenderGraphViewWithChildren(properties: Readonly<{ children: JSX
   return (
     <div style={{ width: '100%', height: 350 }}>
       <SimpleGraphProviderDecorator>
-        <Paper height={350} className={PAPER_CLASSNAME} renderElement={RenderSimpleRectElement}>
+        <Paper style={{ height: 350 }} className={PAPER_CLASSNAME} renderElement={RenderSimpleRectElement}>
           {properties.children}
         </Paper>
       </SimpleGraphProviderDecorator>
diff --git a/packages/joint-react/src/components/paper/__tests__/paper.test.tsx b/packages/joint-react/src/components/paper/__tests__/paper.test.tsx
index 25cf913866..566f058858 100644
--- a/packages/joint-react/src/components/paper/__tests__/paper.test.tsx
+++ b/packages/joint-react/src/components/paper/__tests__/paper.test.tsx
@@ -56,7 +56,7 @@ describe('Paper', () => {
       });
       return (
         <GraphProvider initialCells={CELLS}>
-          <Paper ref={ref} width={100} height={100} renderElement={renderRectElement} />
+          <Paper style={{ width: 100, height: 100 }} ref={ref} renderElement={renderRectElement} />
         </GraphProvider>
       );
     }
diff --git a/packages/joint-react/src/components/paper/paper.tsx b/packages/joint-react/src/components/paper/paper.tsx
index d9fae05dbc..3fe32d3fc6 100644
--- a/packages/joint-react/src/components/paper/paper.tsx
+++ b/packages/joint-react/src/components/paper/paper.tsx
@@ -5,20 +5,6 @@ import { PaperStoreContext } from '../../context';
 import { useCreatePortalPaper } from '../../hooks/use-create-portal-paper';
 import type { PaperProps } from './paper.types';
 
-/**
- * Resolves a CSS dimension value to a JointJS Paper dimension.
- * @param dimension - The CSS width or height value.
- * @returns The resolved dimension or undefined.
- */
-function resolveStyleDimension(
-  dimension: React.CSSProperties['width'] | React.CSSProperties['height']
-): dia.Paper.Dimension | undefined {
-  if (dimension === undefined) {
-    return undefined;
-  }
-  return dimension;
-}
-
 /**
  * Internal Paper implementation used by forwarded `Paper` component.
  * @param props - Paper component props.
@@ -29,17 +15,13 @@ function PaperBase(
   props: Readonly<PaperProps>,
   forwardedRef: React.ForwardedRef<dia.Paper | null>
 ) {
-  const { className, style, children, width, height, paper: externalPaper } = props;
-  const resolvedWidth = width ?? resolveStyleDimension(style?.width);
-  const resolvedHeight = height ?? resolveStyleDimension(style?.height);
+  const { className, style, children, paper: externalPaper } = props;
   const paperHTMLElementRef = useRef<HTMLDivElement | null>(null);
   const reactId = useId();
   const id = props.id ?? `paper-${reactId}`;
   const isExternalPaper = !!externalPaper;
   const { paperRef, paperStore, isReady, content } = useCreatePortalPaper({
     ...props,
-    width: resolvedWidth,
-    height: resolvedHeight,
     elementRef: isExternalPaper ? undefined : paperHTMLElementRef,
     id,
     style,
diff --git a/packages/joint-react/src/components/paper/paper.types.ts b/packages/joint-react/src/components/paper/paper.types.ts
index bb61eb14ca..55d1d15af3 100644
--- a/packages/joint-react/src/components/paper/paper.types.ts
+++ b/packages/joint-react/src/components/paper/paper.types.ts
@@ -88,9 +88,11 @@ export interface PortalPaperOptions {
   /** Unique identifier used by joint-react to track the paper instance. */
   readonly id?: string;
 
-  // ── Sizing & appearance ──────────────────────────────────────────────────
-  readonly width?: dia.Paper.Options['width'];
-  readonly height?: dia.Paper.Options['height'];
+  // ── Appearance ───────────────────────────────────────────────────────────
+  // Note: sizing is intentionally NOT exposed. Paper is sized exclusively
+  // by host CSS (`className` / `style`); `paper.getComputedSize()` falls
+  // back to `el.clientWidth/clientHeight` when `options.width/height` are
+  // not numeric (see `dia.Paper.getComputedSize`).
   readonly drawGrid?: dia.Paper.Options['drawGrid'];
   readonly drawGridSize?: dia.Paper.Options['drawGridSize'];
   readonly gridSize?: dia.Paper.Options['gridSize'];
@@ -213,30 +215,6 @@ export type RenderLink<LinkData = unknown> = (data: LinkData) => ReactNode;
  * @see https://docs.jointjs.com/api/dia/Paper
  */
 export interface PaperProps extends PortalPaperOptions, PropsWithChildren {
-  /**
-   * Width of the paper host element.
-   *
-   * Precedence for width is:
-   * 1. `width` prop
-   * 2. `style.width`
-   * 3. CSS width from `className`
-   *
-   * When this prop is omitted, the Paper component falls back to `style.width`.
-   * If both are omitted, width is left unset so host CSS can size the paper.
-   */
-  readonly width?: dia.Paper.Dimension;
-  /**
-   * Height of the paper host element.
-   *
-   * Precedence for height is:
-   * 1. `height` prop
-   * 2. `style.height`
-   * 3. CSS height from `className`
-   *
-   * When this prop is omitted, the Paper component falls back to `style.height`.
-   * If both are omitted, height is left unset so host CSS can size the paper.
-   */
-  readonly height?: dia.Paper.Dimension;
   /**
    * A function that renders the element.
    *
@@ -292,17 +270,14 @@ export interface PaperProps extends PortalPaperOptions, PropsWithChildren {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   readonly renderLink?: RenderLink<any>;
   /**
-   * Inline styles applied to the paper host element.
-   *
-   * For sizing, `style.width` and `style.height` are used only when the matching
-   * `width` / `height` props are not provided.
+   * Inline styles applied to the paper host element. Use `style.width` and
+   * `style.height` (or CSS via `className`) to size the paper — Paper does
+   * not expose dedicated width/height props.
    */
   readonly style?: CSSProperties;
   /**
-   * CSS classes applied to the paper host element.
-   *
-   * Class-based sizing is lowest priority and is used only when the matching
-   * `width` / `height` prop and `style.width` / `style.height` are omitted.
+   * CSS classes applied to the paper host element. Combine with width /
+   * height rules to size the paper.
    */
   readonly className?: string;
   /**
diff --git a/packages/joint-react/src/components/paper/render-element/__tests__/paper-element-item.test.tsx b/packages/joint-react/src/components/paper/render-element/__tests__/paper-element-item.test.tsx
index 9b17364a32..7a8c0612b8 100644
--- a/packages/joint-react/src/components/paper/render-element/__tests__/paper-element-item.test.tsx
+++ b/packages/joint-react/src/components/paper/render-element/__tests__/paper-element-item.test.tsx
@@ -39,7 +39,7 @@ describe('paper-element-item exports', () => {
     let capturedPaper: unknown = null;
     const { rerender, container } = render(
       <GraphProvider initialCells={CELLS}>
-        <Paper width={100} height={100} renderElement={() => <rect />}>
+        <Paper style={{ width: 100, height: 100 }} renderElement={() => <rect />}>
           <StoreCapture
             onCapture={(graph, paper) => {
               capturedGraph = graph;
@@ -79,7 +79,7 @@ describe('paper-element-item exports', () => {
     let capturedPaper: unknown = null;
     const { rerender, container } = render(
       <GraphProvider initialCells={CELLS}>
-        <Paper width={100} height={100} useHTMLOverlay renderElement={() => <rect />}>
+        <Paper style={{ width: 100, height: 100 }} useHTMLOverlay renderElement={() => <rect />}>
           <StoreCapture
             onCapture={(graph, paper) => {
               capturedGraph = graph;
@@ -117,7 +117,7 @@ describe('paper-element-item exports', () => {
     let capturedPaper: unknown = null;
     const { rerender, container } = render(
       <GraphProvider initialCells={CELLS}>
-        <Paper width={100} height={100} useHTMLOverlay renderElement={() => <rect />}>
+        <Paper style={{ width: 100, height: 100 }} useHTMLOverlay renderElement={() => <rect />}>
           <StoreCapture
             onCapture={(graph, paper) => {
               capturedGraph = graph;
@@ -167,7 +167,7 @@ describe('paper-element-item exports', () => {
     let capturedPaper: unknown = null;
     const { rerender, container } = render(
       <GraphProvider initialCells={CELLS}>
-        <Paper width={100} height={100} renderElement={() => <rect />}>
+        <Paper style={{ width: 100, height: 100 }} renderElement={() => <rect />}>
           <StoreCapture
             onCapture={(graph, paper) => {
               capturedGraph = graph;
diff --git a/packages/joint-react/src/components/paper/render-element/__tests__/paper-html-overlay.test.tsx b/packages/joint-react/src/components/paper/render-element/__tests__/paper-html-overlay.test.tsx
index d3dff82e81..5b00373ef0 100644
--- a/packages/joint-react/src/components/paper/render-element/__tests__/paper-html-overlay.test.tsx
+++ b/packages/joint-react/src/components/paper/render-element/__tests__/paper-html-overlay.test.tsx
@@ -27,9 +27,7 @@ describe('Paper with useHTMLOverlay', () => {
   it('renders elements through the HTML overlay container with positioned wrappers', async () => {
     const { container } = render(
       <GraphProvider initialCells={HTML_CELLS}>
-        <Paper
-          width={300}
-          height={300}
+        <Paper style={{ width: 300, height: 300 }}
           useHTMLOverlay
           renderElement={({ label }: { label: string }) => (
             <div data-testid={`label-${label}`}>{label}</div>
@@ -63,9 +61,7 @@ describe('Paper with useHTMLOverlay', () => {
   it('keeps the HTML overlay positioned correctly while paper is mounted', async () => {
     const { container } = render(
       <GraphProvider initialCells={HTML_CELLS}>
-        <Paper
-          width={200}
-          height={200}
+        <Paper style={{ width: 200, height: 200 }}
           useHTMLOverlay
           renderElement={() => <span>x</span>}
         />
diff --git a/packages/joint-react/src/hooks/__tests__/use-create-features.test.tsx b/packages/joint-react/src/hooks/__tests__/use-create-features.test.tsx
index 1c90986d76..71840c7289 100644
--- a/packages/joint-react/src/hooks/__tests__/use-create-features.test.tsx
+++ b/packages/joint-react/src/hooks/__tests__/use-create-features.test.tsx
@@ -29,7 +29,7 @@ describe('useCreateFeature — paper target lifecycle', () => {
     }));
     render(
       <GraphProvider initialCells={initialCells}>
-        <Paper id="features-paper" width={100} height={100} renderElement={noopRender}>
+        <Paper style={{ width: 100, height: 100 }} id="features-paper" renderElement={noopRender}>
           <FeaturesProvider target="paper" id="paper-feat-1" onAddFeature={onAdd}>
             <div>paper-child</div>
           </FeaturesProvider>
@@ -55,7 +55,7 @@ describe('useCreateFeature — paper target lifecycle', () => {
     }));
     const { unmount } = render(
       <GraphProvider initialCells={initialCells}>
-        <Paper id="features-cleanup-paper" width={100} height={100} renderElement={noopRender}>
+        <Paper style={{ width: 100, height: 100 }} id="features-cleanup-paper" renderElement={noopRender}>
           <FeaturesProvider target="paper" id="paper-feat-cleanup" onAddFeature={onAdd}>
             <div>cleanup-child</div>
           </FeaturesProvider>
@@ -76,7 +76,7 @@ describe('useCreateFeature — paper target lifecycle', () => {
     }));
     render(
       <GraphProvider initialCells={initialCells}>
-        <Paper id="features-onload-paper" width={100} height={100} renderElement={noopRender}>
+        <Paper style={{ width: 100, height: 100 }} id="features-onload-paper" renderElement={noopRender}>
           <FeaturesProvider
             target="paper"
             id="paper-feat-onload"
@@ -106,7 +106,7 @@ describe('useCreateFeature — paper target lifecycle', () => {
     function App({ value }: Readonly<{ value: number }>) {
       return (
         <GraphProvider initialCells={initialCells}>
-          <Paper id="features-update-paper" width={100} height={100} renderElement={noopRender}>
+          <Paper style={{ width: 100, height: 100 }} id="features-update-paper" renderElement={noopRender}>
             <FeaturesProvider
               target="paper"
               id="paper-feat-update"
@@ -144,10 +144,8 @@ describe('useCreateFeature — paper target lifecycle', () => {
     render(
       <GraphProvider initialCells={initialCells}>
         <FeaturesProvider target="paper" id="paper-feat-deferred" onAddFeature={onAdd}>
-          <Paper
+          <Paper style={{ width: 100, height: 100 }}
             id="features-deferred-paper"
-            width={100}
-            height={100}
             renderElement={noopRender}
           >
             <div>deferred-child</div>
diff --git a/packages/joint-react/src/hooks/__tests__/use-create-portal-paper.test.tsx b/packages/joint-react/src/hooks/__tests__/use-create-portal-paper.test.tsx
index 430c4ebd32..4da8e87170 100644
--- a/packages/joint-react/src/hooks/__tests__/use-create-portal-paper.test.tsx
+++ b/packages/joint-react/src/hooks/__tests__/use-create-portal-paper.test.tsx
@@ -85,8 +85,6 @@ describe('useCreatePortalPaper — error and edge cases', () => {
       () =>
         useCreatePortalPaper({
           id: 'on-ready-paper',
-          width: 100,
-          height: 100,
           renderElement: () => <rect />,
           onReady,
           isExternalPaper: false,
@@ -110,11 +108,9 @@ describe('Paper — defaultLink prop variants (lines 100–124)', () => {
       const paperRef = useRef<dia.Paper | null>(null);
       return (
         <>
-          <Paper
+          <Paper style={{ width: 100, height: 100 }}
             ref={paperRef}
             id="default-link-static"
-            width={100}
-            height={100}
             renderElement={() => <rect />}
             defaultLink={
               {
@@ -150,11 +146,9 @@ describe('Paper — defaultLink prop variants (lines 100–124)', () => {
       const paperRef = useRef<dia.Paper | null>(null);
       return (
         <>
-          <Paper
+          <Paper style={{ width: 100, height: 100 }}
             ref={paperRef}
             id="default-link-factory"
-            width={100}
-            height={100}
             renderElement={() => <rect />}
             defaultLink={factory as never}
           />
@@ -186,11 +180,9 @@ describe('Paper — defaultLink prop variants (lines 100–124)', () => {
       const paperRef = useRef<dia.Paper | null>(null);
       return (
         <>
-          <Paper
+          <Paper style={{ width: 100, height: 100 }}
             ref={paperRef}
             id="default-link-instance-factory"
-            width={100}
-            height={100}
             renderElement={() => <rect />}
             defaultLink={factory as never}
           />
@@ -216,11 +208,9 @@ describe('Paper — defaultLink prop variants (lines 100–124)', () => {
       const paperRef = useRef<dia.Paper | null>(null);
       return (
         <>
-          <Paper
+          <Paper style={{ width: 100, height: 100 }}
             ref={paperRef}
             id="default-link-instance-static"
-            width={100}
-            height={100}
             renderElement={() => <rect />}
             defaultLink={staticLink as unknown as Parameters<typeof Paper>[0]['defaultLink']}
           />
@@ -247,11 +237,9 @@ describe('Paper — defaultLink prop variants (lines 100–124)', () => {
       const paperRef = useRef<dia.Paper | null>(null);
       return (
         <>
-          <Paper
+          <Paper style={{ width: 100, height: 100 }}
             ref={paperRef}
             id="default-link-null-factory"
-            width={100}
-            height={100}
             renderElement={() => <rect />}
             defaultLink={factory as never}
           />
@@ -280,10 +268,8 @@ interface GridAppProps {
 function GridApp({ drawGrid, gridSize, transform }: Readonly<GridAppProps>) {
   return (
     <GraphProvider initialCells={initialCells}>
-      <Paper
+      <Paper style={{ width: 100, height: 100 }}
         id="grid-paper"
-        width={100}
-        height={100}
         renderElement={() => <rect />}
         drawGrid={drawGrid}
         gridSize={gridSize}
@@ -317,7 +303,7 @@ describe('Paper — defaultRenderElement fallback (line 174)', () => {
   it('renders cell.data.label inside a default HTML host when renderElement is omitted', async () => {
     const { container } = render(
       <GraphProvider initialCells={DEFAULT_RENDER_CELLS}>
-        <Paper id="default-render-paper" width={120} height={120} />
+        <Paper style={{ width: 120, height: 120 }} id="default-render-paper" />
       </GraphProvider>
     );
     await waitFor(() => {
@@ -345,10 +331,8 @@ describe('Paper — renderLink integration (LinkItem render, line 161)', () => {
     ));
     render(
       <GraphProvider initialCells={RENDER_LINK_CELLS}>
-        <Paper
+        <Paper style={{ width: 100, height: 100 }}
           id="link-paper"
-          width={100}
-          height={100}
           renderElement={() => <rect />}
           renderLink={renderLink}
         />
diff --git a/packages/joint-react/src/hooks/__tests__/use-markup.test.tsx b/packages/joint-react/src/hooks/__tests__/use-markup.test.tsx
index 8689bc1c0f..7be95224d0 100644
--- a/packages/joint-react/src/hooks/__tests__/use-markup.test.tsx
+++ b/packages/joint-react/src/hooks/__tests__/use-markup.test.tsx
@@ -67,7 +67,7 @@ function renderInPaper(options?: Readonly<RenderInPaperOptions>) {
     ));
   return render(
     <GraphProvider initialCells={initialCells}>
-      <Paper id="markup-paper" width={100} height={100} renderElement={renderElement} />
+      <Paper style={{ width: 100, height: 100 }} id="markup-paper" renderElement={renderElement} />
     </GraphProvider>
   );
 }
@@ -160,10 +160,8 @@ describe('useMarkup', () => {
     cleanupUtilities = undefined;
     render(
       <GraphProvider initialCells={initialCells}>
-        <Paper
+        <Paper style={{ width: 100, height: 100 }}
           id="markup-cleanup-paper"
-          width={100}
-          height={100}
           renderElement={renderCleanupProbe}
         />
       </GraphProvider>
@@ -178,10 +176,8 @@ describe('useMarkup', () => {
     reservedUtilities = undefined;
     render(
       <GraphProvider initialCells={initialCells}>
-        <Paper
+        <Paper style={{ width: 100, height: 100 }}
           id="markup-reserved-paper"
-          width={100}
-          height={100}
           renderElement={renderReservedProbe}
         />
       </GraphProvider>
@@ -202,10 +198,8 @@ describe('useMarkup', () => {
     emptyCaptured = undefined;
     render(
       <GraphProvider initialCells={initialCells}>
-        <Paper
+        <Paper style={{ width: 100, height: 100 }}
           id="markup-empty-paper"
-          width={100}
-          height={100}
           renderElement={renderEmptyMarkupProbe}
         />
       </GraphProvider>
diff --git a/packages/joint-react/src/hooks/__tests__/use-measure-node.test.tsx b/packages/joint-react/src/hooks/__tests__/use-measure-node.test.tsx
index f69f6db587..bfb6823bbc 100644
--- a/packages/joint-react/src/hooks/__tests__/use-measure-node.test.tsx
+++ b/packages/joint-react/src/hooks/__tests__/use-measure-node.test.tsx
@@ -79,7 +79,7 @@ function renderProbe(visibility?: Visibility) {
   const function_ = pickRenderProbe(visibility);
   return render(
     <GraphProvider initialCells={initialCells}>
-      <Paper id="measure-paper" width={200} height={200} renderElement={function_} />
+      <Paper style={{ width: 200, height: 200 }} id="measure-paper" renderElement={function_} />
     </GraphProvider>
   );
 }
@@ -136,10 +136,8 @@ describe('useMeasureNode', () => {
     expect(() =>
       render(
         <GraphProvider initialCells={initialCells}>
-          <Paper
+          <Paper style={{ width: 100, height: 100 }}
             id="measure-throw-paper"
-            width={100}
-            height={100}
             renderElement={renderNullElement}
           >
             <NoCellProbe />
@@ -175,7 +173,7 @@ describe('useMeasureNode', () => {
     }
     render(
       <GraphProvider initialCells={initialCells}>
-        <Paper id="measure-link-paper" width={100} height={100} renderElement={renderLinkProbe} />
+        <Paper style={{ width: 100, height: 100 }} id="measure-link-paper" renderElement={renderLinkProbe} />
       </GraphProvider>
     );
     await new Promise((resolve) => setTimeout(resolve, 50));
@@ -187,7 +185,7 @@ describe('useMeasureNode', () => {
   it('returns size record without registering when ref.current is null at mount', async () => {
     const { container } = render(
       <GraphProvider initialCells={initialCells}>
-        <Paper id="measure-null-paper" width={100} height={100} renderElement={renderNoNodeProbe} />
+        <Paper style={{ width: 100, height: 100 }} id="measure-null-paper" renderElement={renderNoNodeProbe} />
       </GraphProvider>
     );
     await waitFor(() => {
diff --git a/packages/joint-react/src/hooks/__tests__/use-paper-events.test.tsx b/packages/joint-react/src/hooks/__tests__/use-paper-events.test.tsx
index a20e90aecb..ef60fb6278 100644
--- a/packages/joint-react/src/hooks/__tests__/use-paper-events.test.tsx
+++ b/packages/joint-react/src/hooks/__tests__/use-paper-events.test.tsx
@@ -129,7 +129,7 @@ describe('usePaperEvents (hook integration)', () => {
     }
     render(
       <GraphProvider initialCells={initialCells}>
-        <Paper id="events-paper" width={100} height={100} renderElement={renderRectElement}>
+        <Paper style={{ width: 100, height: 100 }} id="events-paper" renderElement={renderRectElement}>
           <Probe />
         </Paper>
       </GraphProvider>
diff --git a/packages/joint-react/src/hooks/__tests__/use-paper.test.tsx b/packages/joint-react/src/hooks/__tests__/use-paper.test.tsx
index 67fdd113ec..b3e0ec5316 100644
--- a/packages/joint-react/src/hooks/__tests__/use-paper.test.tsx
+++ b/packages/joint-react/src/hooks/__tests__/use-paper.test.tsx
@@ -70,7 +70,7 @@ describe('useResolvePaperId', () => {
       const paperRef = useRef<dia.Paper | null>(null);
       return (
         <>
-          <Paper ref={paperRef} id="late-ref-paper" width={10} height={10} />
+          <Paper style={{ width: 10, height: 10 }} ref={paperRef} id="late-ref-paper" />
           <Probe paperRef={paperRef} />
         </>
       );
diff --git a/packages/joint-react/src/hooks/use-create-portal-paper.tsx b/packages/joint-react/src/hooks/use-create-portal-paper.tsx
index 0036602e94..d21078ae1d 100644
--- a/packages/joint-react/src/hooks/use-create-portal-paper.tsx
+++ b/packages/joint-react/src/hooks/use-create-portal-paper.tsx
@@ -305,6 +305,13 @@ export function useCreatePortalPaper(
         ...paperOptions,
         id,
         el: hostElementForCreation,
+        // Force undefined so the prototype `width`/`height` (800/600) get
+        // clobbered — `paper.getComputedSize()` then falls back to
+        // `el.clientWidth/clientHeight`, i.e. the host CSS size. Features
+        // that need a finite sheet size (e.g. <PaperScroller>) must set
+        // `paper.options.width/height` explicitly themselves.
+        width: undefined,
+        height: undefined,
         defaultLink: defaultLinkCallback,
         validateConnection: validateConnectionCallback,
         connectionStrategy: connectionStrategyCallback,
@@ -358,13 +365,6 @@ export function useCreatePortalPaper(
     if (!paperStore) return;
     if (!paper) return;
 
-    // `width` and `height` are managed by `paper.setDimensions()` only —
-    // see the dedicated useEffect below. They must NOT go through
-    // `assignOptions` (that would write `paper.options.width` directly,
-    // bypassing the DOM update and tripping `setDimensions`'s early-exit
-    // guard the next time it's called).
-    const { width: _w, height: _h, ...paperOptionsWithoutDimensions } = paperOptions;
-
     assignOptions(paper.options, {
       defaultLink: defaultLinkCallback,
       validateConnection: validateConnectionCallback,
@@ -373,7 +373,7 @@ export function useCreatePortalPaper(
       validateUnembedding: validateUnembeddingCallback,
       cellVisibility: cellVisibilityCallback,
       interactive: interactiveValue,
-      ...paperOptionsWithoutDimensions,
+      ...paperOptions,
       ...linkRouting,
       ...escapeHatchOptions,
     });
@@ -405,20 +405,6 @@ export function useCreatePortalPaper(
     transform,
   ]);
 
-  // Sync paper dimensions when the `width` / `height` props on `<Paper>`
-  // change. Going through `setDimensions` (rather than mutating
-  // `paper.options.width/height` directly via assignOptions) keeps DOM CSS
-  // in lockstep with `paper.options` — features like `<PaperScroller>`
-  // that mutate `paper.options.width` via `setDimensions(...)` later won't
-  // hit the early-exit guard because of a stale options value.
-  const paperWidthProp = paperOptions.width;
-  const paperHeightProp = paperOptions.height;
-  useEffect(() => {
-    if (!paper) return;
-    if (paperWidthProp === undefined && paperHeightProp === undefined) return;
-    paper.setDimensions(paperWidthProp, paperHeightProp);
-  }, [paper, paperWidthProp, paperHeightProp]);
-
   const elements = useMemo(() => {
     if (!hasRenderElement) {
       return null;
diff --git a/packages/joint-react/src/stories/demos/automatic-layout-storage/code.tsx b/packages/joint-react/src/stories/demos/automatic-layout-storage/code.tsx
index 78c37e693e..224f03906c 100644
--- a/packages/joint-react/src/stories/demos/automatic-layout-storage/code.tsx
+++ b/packages/joint-react/src/stories/demos/automatic-layout-storage/code.tsx
@@ -487,11 +487,8 @@ function InnerShell({ onLoadFile }: Readonly<InnerShellProps>) {
 
       <div className="flex-1 flex min-h-0">
         <div className="flex-1 relative bg-[radial-gradient(rgba(28,36,52,0.12)_1px,transparent_1px)] bg-[length:20px_20px] [background-position:12px_12px]">
-          <Paper
+          <Paper style={{ backgroundColor: 'transparent', width: "100%", height: "100%" }}
             id={PAPER_ID}
-            width="100%"
-            height="100%"
-            style={{ backgroundColor: 'transparent' }}
             linkRouting={linkRoutingOrthogonal({
               sourceOffset: 6,
               targetOffset: 6,
diff --git a/packages/joint-react/src/stories/demos/collaboration/code.tsx b/packages/joint-react/src/stories/demos/collaboration/code.tsx
index af2490a215..90594209a1 100644
--- a/packages/joint-react/src/stories/demos/collaboration/code.tsx
+++ b/packages/joint-react/src/stories/demos/collaboration/code.tsx
@@ -914,10 +914,8 @@ function GraphWithRedux() {
           initialCells={themedCells}
           onIncrementalCellsChange={handleIncrementalChange}
         >
-          <Paper
+          <Paper style={{ backgroundColor: theme.canvas, width: "100%", height: "100%" }}
             id={PAPER_ID}
-            height="100%"
-            width="100%"
             gridSize={1}
             overflow
             linkPinning={false}
@@ -928,7 +926,6 @@ function GraphWithRedux() {
             defaultLink={{ style: { color: theme.link, width: 1.5, targetMarker: 'none' } }}
             validateConnection={({ target }) => target.port === 'in'}
             renderElement={RenderAgentNode}
-            style={{ backgroundColor: theme.canvas }}
           />
           <ConnectionPanel
             peerId={peerId}
diff --git a/packages/joint-react/src/stories/demos/flowchart/code.tsx b/packages/joint-react/src/stories/demos/flowchart/code.tsx
index 6c7e44a626..bda43b64c8 100644
--- a/packages/joint-react/src/stories/demos/flowchart/code.tsx
+++ b/packages/joint-react/src/stories/demos/flowchart/code.tsx
@@ -506,11 +506,10 @@ function Main() {
   });
 
   return (
-    <Paper
+    <Paper style={{ height: 600 }}
       ref={paperRef}
       id={paperId}
       gridSize={5}
-      height={600}
       overflow
       snapLabels
       className={`${PAPER_CLASSNAME} flowchart-paper w-[200px]`}
diff --git a/packages/joint-react/src/stories/demos/introduction-demo/code.tsx b/packages/joint-react/src/stories/demos/introduction-demo/code.tsx
index eac4990917..2f37f9119a 100644
--- a/packages/joint-react/src/stories/demos/introduction-demo/code.tsx
+++ b/packages/joint-react/src/stories/demos/introduction-demo/code.tsx
@@ -73,7 +73,6 @@ const PAPER_PROPS: PaperProps = {
   linkRouting: linkRoutingOrthogonal({ cornerType: 'line', margin: 25 }),
   snapLinks: { radius: 25 },
   linkPinning: false,
-  width: '100%',
 };
 
 // Create initial cells with typing support.
@@ -286,13 +285,11 @@ function MiniMap() {
 
   return (
     <div className="absolute bottom-6 right-6 w-[200px] h-[150px] border border-[#dde6ed] rounded-lg overflow-hidden">
-      <Paper
+      <Paper style={{ width: '100%', height: '100%' }}
         id={minimapId}
         {...PAPER_PROPS}
         interactive={false}
-        width={'100%'}
         className={`${PAPER_CLASSNAME} h-full bg-gray-900 shadow-md`}
-        height={'100%'}
         renderElement={MinimapRenderElement}
         drawGrid={false}
       />
diff --git a/packages/joint-react/src/stories/demos/investment-calculator/code.tsx b/packages/joint-react/src/stories/demos/investment-calculator/code.tsx
index 52b6946dc0..6774484d22 100644
--- a/packages/joint-react/src/stories/demos/investment-calculator/code.tsx
+++ b/packages/joint-react/src/stories/demos/investment-calculator/code.tsx
@@ -686,14 +686,11 @@ function Main() {
   }, [graph]);
 
   return (
-    <Paper
+    <Paper style={{ backgroundColor: '#0f172a', width: "100%", height: 800 }}
       ref={paperRef}
-      width="100%"
-      height={800}
       className={PAPER_CLASSNAME}
       renderElement={RenderElement}
       linkRouting={SMOOTH_LINKS}
-      style={{ backgroundColor: '#0f172a' }}
       interactive={{ stopDelegation: false }}
     />
   );
diff --git a/packages/joint-react/src/stories/demos/link-arrows/code.tsx b/packages/joint-react/src/stories/demos/link-arrows/code.tsx
index 38da4e6160..c9cbc0e98c 100644
--- a/packages/joint-react/src/stories/demos/link-arrows/code.tsx
+++ b/packages/joint-react/src/stories/demos/link-arrows/code.tsx
@@ -497,12 +497,10 @@ function Main() {
   });
 
   return (
-    <Paper
+    <Paper style={{ background: BG_COLOR, width: "100%" }}
       id={paperId}
       className={`${PAPER_CLASSNAME} h-150`}
-      width="100%"
       interactive={false}
-      style={{ background: BG_COLOR }}
       drawGrid={false}
     />
   );
diff --git a/packages/joint-react/src/stories/demos/pulsing-port/code.tsx b/packages/joint-react/src/stories/demos/pulsing-port/code.tsx
index 4f45895022..114081f733 100644
--- a/packages/joint-react/src/stories/demos/pulsing-port/code.tsx
+++ b/packages/joint-react/src/stories/demos/pulsing-port/code.tsx
@@ -125,12 +125,11 @@ function Main() {
   });
 
   return (
-    <Paper
+    <Paper style={{ width: "100%" }}
       id={paperId}
       defaultLink={{
         style: { color: PRIMARY, targetMarker: 'arrow' },
       }}
-      width="100%"
       renderElement={NodeElement}
       className={`${PAPER_CLASSNAME} h-[400px]`}
       linkPinning={false}
diff --git a/packages/joint-react/src/stories/demos/saasflow/code.tsx b/packages/joint-react/src/stories/demos/saasflow/code.tsx
index 9da3d6a059..d7a311ee47 100644
--- a/packages/joint-react/src/stories/demos/saasflow/code.tsx
+++ b/packages/joint-react/src/stories/demos/saasflow/code.tsx
@@ -490,12 +490,9 @@ function Main() {
 
   return (
     <GraphProvider initialCells={initialCells}>
-      <Paper
+      <Paper style={{ backgroundColor: 'transparent', width: "100%", height: "100%" }}
         ref={paperRef}
         id={PAPER_ID}
-        height="100%"
-        width="100%"
-        style={{ backgroundColor: 'transparent' }}
         gridSize={5}
         drawGrid={false}
         overflow
diff --git a/packages/joint-react/src/stories/demos/user-flow/code.tsx b/packages/joint-react/src/stories/demos/user-flow/code.tsx
index 44e70d6ec5..3e9c8b6e50 100644
--- a/packages/joint-react/src/stories/demos/user-flow/code.tsx
+++ b/packages/joint-react/src/stories/demos/user-flow/code.tsx
@@ -354,15 +354,12 @@ function Main() {
 
   return (
     <GraphProvider cells={themedCells} onCellsChange={setCells}>
-      <Paper
+      <Paper style={{ backgroundColor: 'transparent', width: '100%', height: '100%' }}
         gridSize={5}
         drawGrid={false}
-        style={{ backgroundColor: 'transparent' }}
-        height={'100%'}
         defaultLink={{
           style: { color: isDark ? 'rgba(255,255,255,0.35)' : '#000000' },
         }}
-        width={'100%'}
         renderElement={renderElement}
         clickThreshold={10}
         magnetThreshold={'onleave'}
diff --git a/packages/joint-react/src/stories/examples/markup-selectors-html/code.tsx b/packages/joint-react/src/stories/examples/markup-selectors-html/code.tsx
index d46b5072c5..d4d615e436 100644
--- a/packages/joint-react/src/stories/examples/markup-selectors-html/code.tsx
+++ b/packages/joint-react/src/stories/examples/markup-selectors-html/code.tsx
@@ -142,9 +142,7 @@ function Main() {
   }, []);
 
   return (
-    <Paper
-      width="100%"
-      height={280}
+    <Paper style={{ width: "100%", height: 280 }}
       renderElement={renderElement}
       magnetThreshold="onleave"
       linkPinning={false}
diff --git a/packages/joint-react/src/stories/examples/markup-selectors/code.tsx b/packages/joint-react/src/stories/examples/markup-selectors/code.tsx
index e30ea63f2f..ac5e19e0a6 100644
--- a/packages/joint-react/src/stories/examples/markup-selectors/code.tsx
+++ b/packages/joint-react/src/stories/examples/markup-selectors/code.tsx
@@ -159,10 +159,8 @@ function Main() {
   }, []);
 
   return (
-    <Paper
-      width="100%"
+    <Paper style={{ ...PAPER_STYLE, width: "100%", height: 250 }}
       className={PAPER_CLASSNAME}
-      height={250}
       renderElement={renderElement}
       magnetThreshold={'onleave'}
       linkPinning={false}
@@ -185,7 +183,6 @@ function Main() {
       validateConnection={{
         allowRootConnection: false,
       }}
-      style={PAPER_STYLE}
       drawGrid={false}
     />
   );
diff --git a/packages/joint-react/src/stories/examples/stress/code.tsx b/packages/joint-react/src/stories/examples/stress/code.tsx
index aec3565022..d156e57051 100644
--- a/packages/joint-react/src/stories/examples/stress/code.tsx
+++ b/packages/joint-react/src/stories/examples/stress/code.tsx
@@ -82,7 +82,7 @@ function Main({
 
   return (
     <div className="flex flex-row relative">
-      <Paper id="main-view" className={PAPER_CLASSNAME} height={600} renderElement={RenderElement}/>
+      <Paper style={{ height: 600 }} id="main-view" className={PAPER_CLASSNAME} renderElement={RenderElement}/>
       <div className="absolute top-4 right-4">
         <button
           type="button"
diff --git a/packages/joint-react/src/stories/examples/with-auto-layout/code.tsx b/packages/joint-react/src/stories/examples/with-auto-layout/code.tsx
index 6d1a632d6b..03444df687 100644
--- a/packages/joint-react/src/stories/examples/with-auto-layout/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-auto-layout/code.tsx
@@ -109,11 +109,10 @@ function Main() {
           Add Node
         </button>
       </div>
-      <Paper
+      <Paper style={{ height: 450 }}
         ref={paperRef}
         id={paperId}
         className={PAPER_CLASSNAME}
-        height={450}
         renderElement={renderElement}
       />
     </div>
diff --git a/packages/joint-react/src/stories/examples/with-build-in-shapes/code.tsx b/packages/joint-react/src/stories/examples/with-build-in-shapes/code.tsx
index 448846047f..84420305d7 100644
--- a/packages/joint-react/src/stories/examples/with-build-in-shapes/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-build-in-shapes/code.tsx
@@ -210,7 +210,7 @@ const initialCells: ReadonlyArray<CellRecord<unknown, unknown, ElementType, Link
 function Main() {
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper className={PAPER_CLASSNAME} height={500} interactive={true} />
+      <Paper style={{ height: 500 }} className={PAPER_CLASSNAME} interactive={true} />
     </div>
   );
 }
diff --git a/packages/joint-react/src/stories/examples/with-card/code.tsx b/packages/joint-react/src/stories/examples/with-card/code.tsx
index 8420e5217a..421f8c4dd9 100644
--- a/packages/joint-react/src/stories/examples/with-card/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-card/code.tsx
@@ -80,7 +80,7 @@ function CardRenderer(data: Readonly<Data>) {
 
 function Main() {
   const renderElement: RenderElement<Data> = useCallback((data) => <CardRenderer {...data} />, []);
-  return <Paper className={PAPER_CLASSNAME} height={280} renderElement={renderElement} />;
+  return <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} renderElement={renderElement} />;
 }
 
 export default function App() {
diff --git a/packages/joint-react/src/stories/examples/with-cell-actions/code.tsx b/packages/joint-react/src/stories/examples/with-cell-actions/code.tsx
index ef4e85d742..59bfbf5a2c 100644
--- a/packages/joint-react/src/stories/examples/with-cell-actions/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-cell-actions/code.tsx
@@ -564,7 +564,7 @@ function Main() {
   return (
     <div style={{ display: 'flex', flexDirection: 'row', height: 500, position: 'relative' }}>
       {/* Canvas */}
-      <Paper className={PAPER_CLASSNAME} height={500} renderElement={RenderElement} />
+      <Paper style={{ height: 500 }} className={PAPER_CLASSNAME} renderElement={RenderElement} />
 
       {/* Control Panel - Glassmorphism Style */}
       <div
diff --git a/packages/joint-react/src/stories/examples/with-cell-json/code.tsx b/packages/joint-react/src/stories/examples/with-cell-json/code.tsx
index 58c6d98d1d..a6d1556e77 100644
--- a/packages/joint-react/src/stories/examples/with-cell-json/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-cell-json/code.tsx
@@ -164,11 +164,9 @@ function Main() {
   );
   return (
     <div className="flex w-full h-full">
-      <Paper
+      <Paper style={{ ...PAPER_STYLE, height: 400 }}
         className={PAPER_CLASSNAME}
-        height={400}
         renderElement={renderElement}
-        style={PAPER_STYLE}
       />
       <DataPanel />
     </div>
diff --git a/packages/joint-react/src/stories/examples/with-collapsible-container/code.tsx b/packages/joint-react/src/stories/examples/with-collapsible-container/code.tsx
index a95c274020..6f71612449 100644
--- a/packages/joint-react/src/stories/examples/with-collapsible-container/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-collapsible-container/code.tsx
@@ -437,13 +437,11 @@ function Main() {
   );
 
   return (
-    <Paper
+    <Paper style={{ backgroundColor: '#F3F7F6', height: 500 }}
       id={paperId}
-      height={500}
       className={PAPER_CLASSNAME}
       renderElement={renderElement}
       cellVisibility={cellVisibility}
-      style={{ backgroundColor: '#F3F7F6' }}
     />
   );
 }
diff --git a/packages/joint-react/src/stories/examples/with-collapsible-subtrees/code.tsx b/packages/joint-react/src/stories/examples/with-collapsible-subtrees/code.tsx
index fde4226718..065fdeb2c7 100644
--- a/packages/joint-react/src/stories/examples/with-collapsible-subtrees/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-collapsible-subtrees/code.tsx
@@ -754,16 +754,14 @@ function Main() {
   const renderElement = useCallback((data: FTAData) => RenderFTAElement(data), []);
 
   return (
-    <Paper
+    <Paper style={{ ...PAPER_STYLE, height: 600 }}
       ref={paperRef}
       id={paperId}
-      height={600}
       className={PAPER_CLASSNAME}
       renderElement={renderElement}
       cellVisibility={cellVisibilityCallback}
       linkRouting={ORTHOGONAL_LINKS}
       interactive={false}
-      style={PAPER_STYLE}
       drawGrid={false}
     />
   );
diff --git a/packages/joint-react/src/stories/examples/with-containers/code.tsx b/packages/joint-react/src/stories/examples/with-containers/code.tsx
index 7d1ebd4d95..d497f6a487 100644
--- a/packages/joint-react/src/stories/examples/with-containers/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-containers/code.tsx
@@ -101,8 +101,7 @@ function validateParentChildRelationship({ parent }: ValidateEmbeddingContext):
 
 function Main() {
   return (
-    <Paper
-      height={350}
+    <Paper style={{ ...PAPER_STYLE, height: 350 }}
       className={PAPER_CLASSNAME}
       renderElement={RenderElement}
       embeddingMode
@@ -120,7 +119,6 @@ function Main() {
           },
         },
       }}
-      style={PAPER_STYLE}
       drawGrid={false}
     />
   );
diff --git a/packages/joint-react/src/stories/examples/with-css-theme/code.tsx b/packages/joint-react/src/stories/examples/with-css-theme/code.tsx
index c3e1202a78..d65f8800ba 100644
--- a/packages/joint-react/src/stories/examples/with-css-theme/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-css-theme/code.tsx
@@ -163,10 +163,8 @@ function Diagram() {
         </span>
       </div>
       <GraphProvider cells={cells} onCellsChange={setCells}>
-        <Paper
+        <Paper style={{ background: 'var(--paper-bg)', height: 240 }}
           className={PAPER_CLASSNAME}
-          style={{ background: 'var(--paper-bg)' }}
-          height={240}
           renderElement={renderElement}
         />
       </GraphProvider>
diff --git a/packages/joint-react/src/stories/examples/with-custom-link/code-with-create-links-classname.tsx b/packages/joint-react/src/stories/examples/with-custom-link/code-with-create-links-classname.tsx
index 2bf9ec55ff..f779928a82 100644
--- a/packages/joint-react/src/stories/examples/with-custom-link/code-with-create-links-classname.tsx
+++ b/packages/joint-react/src/stories/examples/with-custom-link/code-with-create-links-classname.tsx
@@ -21,7 +21,7 @@ const initialCells: ReadonlyArray<CellRecord<ElementData>> = [
 function Main() {
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper className={PAPER_CLASSNAME} height={280} />
+      <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} />
     </div>
   );
 }
diff --git a/packages/joint-react/src/stories/examples/with-custom-link/code-with-create-links.tsx b/packages/joint-react/src/stories/examples/with-custom-link/code-with-create-links.tsx
index 47f0990c67..387556e761 100644
--- a/packages/joint-react/src/stories/examples/with-custom-link/code-with-create-links.tsx
+++ b/packages/joint-react/src/stories/examples/with-custom-link/code-with-create-links.tsx
@@ -27,7 +27,7 @@ const initialCells: ReadonlyArray<CellRecord<ElementData>> = [
 function Main() {
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper className={PAPER_CLASSNAME} height={280} />
+      <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} />
     </div>
   );
 }
diff --git a/packages/joint-react/src/stories/examples/with-custom-link/code-with-dia-links.tsx b/packages/joint-react/src/stories/examples/with-custom-link/code-with-dia-links.tsx
index ff8f9a1c9a..d6c5f65e72 100644
--- a/packages/joint-react/src/stories/examples/with-custom-link/code-with-dia-links.tsx
+++ b/packages/joint-react/src/stories/examples/with-custom-link/code-with-dia-links.tsx
@@ -68,7 +68,7 @@ const initialCells: ReadonlyArray<CellRecord<ElementData>> = [
 function Main() {
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper className={PAPER_CLASSNAME} height={280} />
+      <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} />
     </div>
   );
 }
diff --git a/packages/joint-react/src/stories/examples/with-custom-mapper/code.tsx b/packages/joint-react/src/stories/examples/with-custom-mapper/code.tsx
index aac29ca8fe..8e723338c2 100644
--- a/packages/joint-react/src/stories/examples/with-custom-mapper/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-custom-mapper/code.tsx
@@ -102,12 +102,12 @@ function DataPanel() {
 // Main
 // ============================================================================
 
-const PAPER_STYLE = { flex: 1 };
+const PAPER_STYLE = { flex: 1, height: 400 };
 
 function Main() {
   return (
     <div className="flex w-full h-full">
-      <Paper className={PAPER_CLASSNAME} height={400} style={PAPER_STYLE} />
+      <Paper className={PAPER_CLASSNAME} style={PAPER_STYLE} />
       <DataPanel />
     </div>
   );
diff --git a/packages/joint-react/src/stories/examples/with-data-defaults/code.tsx b/packages/joint-react/src/stories/examples/with-data-defaults/code.tsx
index 9b92710f26..c2339b069a 100644
--- a/packages/joint-react/src/stories/examples/with-data-defaults/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-data-defaults/code.tsx
@@ -161,11 +161,9 @@ function Diagram() {
       </button>
       <GraphProvider initialCells={initialCells}>
         <ThemeUpdater color={color} portShape={portShape} />
-        <Paper
+        <Paper style={{ ...PAPER_STYLE, height: 340 }}
           className={PAPER_CLASSNAME}
-          height={340}
           renderElement={renderElement}
-          style={PAPER_STYLE}
           defaultLink={getDefaultLink(color)}
         />
       </GraphProvider>
diff --git a/packages/joint-react/src/stories/examples/with-default-element/code.tsx b/packages/joint-react/src/stories/examples/with-default-element/code.tsx
index 26fd987a2c..362c1c3ff4 100644
--- a/packages/joint-react/src/stories/examples/with-default-element/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-default-element/code.tsx
@@ -144,9 +144,8 @@ export default function App() {
         </button>
       </div>
       <GraphProvider initialCells={initialCells}>
-        <Paper
+        <Paper style={{ height: 240 }}
           className={PAPER_CLASSNAME}
-          height={240}
           renderElement={renderElement}
           defaultLink={DEFAULT_LINK}
         />
diff --git a/packages/joint-react/src/stories/examples/with-default-link/code.tsx b/packages/joint-react/src/stories/examples/with-default-link/code.tsx
index f9f01f8111..a61b638773 100644
--- a/packages/joint-react/src/stories/examples/with-default-link/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-default-link/code.tsx
@@ -65,10 +65,9 @@ function RenderElement({ label }: Readonly<NodeData>) {
 export default function App() {
   return (
     <GraphProvider initialCells={initialCells}>
-      <Paper
+      <Paper style={{ height: 300 }}
         renderElement={RenderElement}
         className={PAPER_CLASSNAME}
-        height={300}
         defaultLink={defaultLink}
         snapLinks
         linkPinning={false}
diff --git a/packages/joint-react/src/stories/examples/with-dynamic-status-icons/code.tsx b/packages/joint-react/src/stories/examples/with-dynamic-status-icons/code.tsx
index 6b2e82a9d2..1ac03f8c0e 100644
--- a/packages/joint-react/src/stories/examples/with-dynamic-status-icons/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-dynamic-status-icons/code.tsx
@@ -241,15 +241,13 @@ function Main() {
   });
 
   return (
-    <Paper
+    <Paper style={{ ...PAPER_STYLE, height: 500 }}
       ref={paperRef}
       id={paperId}
-      height={500}
       className={PAPER_CLASSNAME}
       renderElement={RenderElement}
       gridSize={20}
       drawGrid={{ name: 'mesh' }}
-      style={PAPER_STYLE}
     />
   );
 }
diff --git a/packages/joint-react/src/stories/examples/with-element-controls/code.tsx b/packages/joint-react/src/stories/examples/with-element-controls/code.tsx
index 3d324aef7a..0c3a18942a 100644
--- a/packages/joint-react/src/stories/examples/with-element-controls/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-element-controls/code.tsx
@@ -745,13 +745,10 @@ function Main() {
   useNodesMeasuredEffect(paperId, handleElementsMeasured);
 
   return (
-    <Paper
+    <Paper style={{ ...PAPER_STYLE, width: "100%", height: 600 }}
       id={paperId}
-      width="100%"
-      height={600}
       className={PAPER_CLASSNAME}
       renderElement={renderElement}
-      style={PAPER_STYLE}
       drawGrid={false}
     />
   );
diff --git a/packages/joint-react/src/stories/examples/with-element-defaults/code.tsx b/packages/joint-react/src/stories/examples/with-element-defaults/code.tsx
index 87df9590c8..32a41ce300 100644
--- a/packages/joint-react/src/stories/examples/with-element-defaults/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-element-defaults/code.tsx
@@ -165,7 +165,7 @@ function JSONViewer() {
 export default function App() {
   return (
     <GraphProvider initialCells={initialCells} cellNamespace={CELL_NAMESPACE}>
-      <Paper className={PAPER_CLASSNAME} height={300} renderElement={renderElement} />
+      <Paper style={{ height: 300 }} className={PAPER_CLASSNAME} renderElement={renderElement} />
       <JSONViewer />
     </GraphProvider>
   );
diff --git a/packages/joint-react/src/stories/examples/with-element-ports-groups/code.tsx b/packages/joint-react/src/stories/examples/with-element-ports-groups/code.tsx
index 5520dc2346..08f6a209fd 100644
--- a/packages/joint-react/src/stories/examples/with-element-ports-groups/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-element-ports-groups/code.tsx
@@ -89,9 +89,8 @@ function RenderElement({ label }: Readonly<NodeData>) {
 export default function App() {
   return (
     <GraphProvider initialCells={initialCells}>
-      <Paper
+      <Paper style={{ height: 380 }}
         className={PAPER_CLASSNAME}
-        height={380}
         renderElement={RenderElement}
       />
     </GraphProvider>
diff --git a/packages/joint-react/src/stories/examples/with-element-ports-native/code.tsx b/packages/joint-react/src/stories/examples/with-element-ports-native/code.tsx
index 6fa8ecb891..f51caa580d 100644
--- a/packages/joint-react/src/stories/examples/with-element-ports-native/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-element-ports-native/code.tsx
@@ -203,12 +203,10 @@ function Main() {
   );
 
   return (
-    <Paper
+    <Paper style={{ ...PAPER_STYLE, height: 420 }}
       className={PAPER_CLASSNAME}
-      height={420}
       renderElement={renderElement}
       linkPinning={false}
-      style={PAPER_STYLE}
       drawGrid={false}
     />
   );
diff --git a/packages/joint-react/src/stories/examples/with-element-ports/code.tsx b/packages/joint-react/src/stories/examples/with-element-ports/code.tsx
index db59dfdff9..613863c046 100644
--- a/packages/joint-react/src/stories/examples/with-element-ports/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-element-ports/code.tsx
@@ -387,10 +387,9 @@ function Main() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'row', height: 400, position: 'relative' }}>
-      <Paper
+      <Paper style={{ height: 400 }}
         renderElement={RenderElement}
         className={PAPER_CLASSNAME}
-        height={400}
         snapLinks={true}
         linkPinning={false}
         linkRouting={SMOOTH_LINKS}
diff --git a/packages/joint-react/src/stories/examples/with-fixed-connection-points/code.tsx b/packages/joint-react/src/stories/examples/with-fixed-connection-points/code.tsx
index 13a877ada8..5b468067af 100644
--- a/packages/joint-react/src/stories/examples/with-fixed-connection-points/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-fixed-connection-points/code.tsx
@@ -409,15 +409,12 @@ function Main() {
   });
 
   return (
-    <Paper
+    <Paper style={{ ...PAPER_STYLE, width: "100%", height: 650 }}
       id={paperId}
-      width="100%"
-      height={650}
       className={PAPER_CLASSNAME}
       renderElement={RenderElement}
       gridSize={20}
       drawGrid={{ name: 'mesh', args: { color: GRID_COLOR } }}
-      style={PAPER_STYLE}
       linkPinning={false}
       linkRouting={ORTHOGONAL_LINKS}
       // Connection strategy - find closest anchor point
diff --git a/packages/joint-react/src/stories/examples/with-graph-neighbors/code.tsx b/packages/joint-react/src/stories/examples/with-graph-neighbors/code.tsx
index 95f6849d07..85389f28b2 100644
--- a/packages/joint-react/src/stories/examples/with-graph-neighbors/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-graph-neighbors/code.tsx
@@ -218,14 +218,11 @@ function Main() {
   );
 
   return (
-    <Paper
+    <Paper style={{ ...PAPER_STYLE, width: "100%", height: 500 }}
       ref={paperRef}
       id={paperId}
-      width="100%"
       className={PAPER_CLASSNAME}
-      height={500}
       renderElement={renderElement}
-      style={PAPER_STYLE}
       drawGrid={false}
     />
   );
diff --git a/packages/joint-react/src/stories/examples/with-highlighter/code.tsx b/packages/joint-react/src/stories/examples/with-highlighter/code.tsx
index 9c993d7fd6..67e2495f07 100644
--- a/packages/joint-react/src/stories/examples/with-highlighter/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-highlighter/code.tsx
@@ -111,11 +111,10 @@ function Main({ variant }: Readonly<MainProps>) {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper
+      <Paper style={{ height: 280 }}
         id={paperId}
         ref={paperRef}
         className={PAPER_CLASSNAME}
-        height={280}
         renderElement={RenderElement}
       />
     </div>
diff --git a/packages/joint-react/src/stories/examples/with-jointjs-api/code.tsx b/packages/joint-react/src/stories/examples/with-jointjs-api/code.tsx
index abd5c4004c..1d77692227 100644
--- a/packages/joint-react/src/stories/examples/with-jointjs-api/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-jointjs-api/code.tsx
@@ -152,7 +152,7 @@ function Main() {
   const renderElement = (data: ElementData) => <Node label={data.label} color={data.color} />;
 
   return (
-    <Paper id="my-paper" className={PAPER_CLASSNAME} height={380} renderElement={renderElement} />
+    <Paper style={{ height: 380 }} id="my-paper" className={PAPER_CLASSNAME} renderElement={renderElement} />
   );
 }
 
diff --git a/packages/joint-react/src/stories/examples/with-layers/code.tsx b/packages/joint-react/src/stories/examples/with-layers/code.tsx
index ba81e4233c..d348ff67b2 100644
--- a/packages/joint-react/src/stories/examples/with-layers/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-layers/code.tsx
@@ -159,16 +159,14 @@ function Main({ hiddenLayers, toggleLayer }: Readonly<MainProps>) {
           </button>
         ))}
       </div>
-      <Paper
+      <Paper style={{ ...PAPER_STYLE, height: 300 }}
         id="layers-paper"
-        height={300}
         className={PAPER_CLASSNAME}
         renderElement={RenderElement}
         cellVisibility={({ model }) => {
           const cellLayer = model.layer();
           return !cellLayer || !hiddenLayers.has(cellLayer);
         }}
-        style={PAPER_STYLE}
         drawGrid={false}
       />
     </div>
diff --git a/packages/joint-react/src/stories/examples/with-link-labels/code.tsx b/packages/joint-react/src/stories/examples/with-link-labels/code.tsx
index 31189e7324..56e456e80b 100644
--- a/packages/joint-react/src/stories/examples/with-link-labels/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-link-labels/code.tsx
@@ -79,9 +79,7 @@ const initialCells: ReadonlyArray<CellRecord<ShapeData>> = [
 
 function Main() {
   return (
-    <Paper
-      width="100%"
-      height={350}
+    <Paper style={{ width: "100%", height: 350 }}
       className={PAPER_CLASSNAME}
       interactive={INTERACTIVE_OPTIONS}
     />
diff --git a/packages/joint-react/src/stories/examples/with-link-markers-named/code.tsx b/packages/joint-react/src/stories/examples/with-link-markers-named/code.tsx
index 95c1177a5e..c2cc3c9ccc 100644
--- a/packages/joint-react/src/stories/examples/with-link-markers-named/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-link-markers-named/code.tsx
@@ -51,10 +51,9 @@ const initialCells = buildCells();
 export default function App() {
   return (
     <GraphProvider initialCells={initialCells}>
-      <Paper
+      <Paper style={{ width: "100%" }}
         transform={'scale(2)'}
         className={`${PAPER_CLASSNAME} h-[800px]`}
-        width="100%"
         interactive={false}
         drawGrid={false}
       />
diff --git a/packages/joint-react/src/stories/examples/with-link-markers/code.tsx b/packages/joint-react/src/stories/examples/with-link-markers/code.tsx
index 9edbcc4d1d..0e0ac176da 100644
--- a/packages/joint-react/src/stories/examples/with-link-markers/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-link-markers/code.tsx
@@ -143,10 +143,9 @@ export default function App() {
         </label>
       </div>
       <GraphProvider cells={cells}>
-        <Paper
+        <Paper style={{ width: "100%" }}
           transform={'scale(1.7)'}
           className={`${PAPER_CLASSNAME} h-[1400px]`}
-          width="100%"
           drawGrid={false}
           renderElement={RenderElement}
           linkRouting={SMOOTH_LINKS}
diff --git a/packages/joint-react/src/stories/examples/with-link-routing/code.tsx b/packages/joint-react/src/stories/examples/with-link-routing/code.tsx
index 1e58f4b582..9b6bfc62ad 100644
--- a/packages/joint-react/src/stories/examples/with-link-routing/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-link-routing/code.tsx
@@ -252,10 +252,9 @@ function PresetPicker() {
 
   return (
     <>
-      <Paper
+      <Paper style={{ height: 500 }}
         id="main-paper"
         className={PAPER_CLASSNAME}
-        height={500}
         renderElement={RenderElement}
         gridSize={1}
         drawGridSize={20}
diff --git a/packages/joint-react/src/stories/examples/with-link-tools/code.tsx b/packages/joint-react/src/stories/examples/with-link-tools/code.tsx
index be936531af..e5d75a6e8c 100644
--- a/packages/joint-react/src/stories/examples/with-link-tools/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-link-tools/code.tsx
@@ -102,10 +102,9 @@ function Main() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'row', position: 'relative' }}>
-      <Paper
+      <Paper style={{ height: 280 }}
         id={paperId}
         className={PAPER_CLASSNAME}
-        height={280}
         linkRouting={ORTHOGONAL_LINKS}
       />
       <div
diff --git a/packages/joint-react/src/stories/examples/with-list-node/code.tsx b/packages/joint-react/src/stories/examples/with-list-node/code.tsx
index 597ceb685a..85d98b3b19 100644
--- a/packages/joint-react/src/stories/examples/with-list-node/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-list-node/code.tsx
@@ -140,11 +140,9 @@ function Main() {
     );
   }, []);
   return (
-    <Paper
+    <Paper style={{ ...PAPER_STYLE, height: 500 }}
       className={PAPER_CLASSNAME}
-      height={500}
       renderElement={renderElement}
-      style={PAPER_STYLE}
       drawGrid={false}
     />
   );
diff --git a/packages/joint-react/src/stories/examples/with-minimap/code.tsx b/packages/joint-react/src/stories/examples/with-minimap/code.tsx
index b9304c7114..49b651ebfa 100644
--- a/packages/joint-react/src/stories/examples/with-minimap/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-minimap/code.tsx
@@ -47,12 +47,11 @@ function MiniMap() {
 
   return (
     <div className="absolute bottom-4 right-6 w-[200px] h-[150px] border border-[#dde6ed] rounded-lg overflow-hidden">
-      <Paper
+      <Paper style={{ height: "100%" }}
         id="minimap"
         interactive={false}
         transform={'scale(0.4)'}
         className={PAPER_CLASSNAME}
-        height="100%"
         renderElement={renderElement}
       />
     </div>
@@ -75,10 +74,9 @@ function Main() {
   );
   return (
     <div className="flex flex-row relative">
-      <Paper
+      <Paper style={{ height: 280 }}
         id="main-view"
         className={PAPER_CLASSNAME}
-        height={280}
         renderElement={renderElement}
       />
       <MiniMap />
diff --git a/packages/joint-react/src/stories/examples/with-node-update/code-add-remove-node.tsx b/packages/joint-react/src/stories/examples/with-node-update/code-add-remove-node.tsx
index f97ee96407..e2d3134f36 100644
--- a/packages/joint-react/src/stories/examples/with-node-update/code-add-remove-node.tsx
+++ b/packages/joint-react/src/stories/examples/with-node-update/code-add-remove-node.tsx
@@ -106,11 +106,10 @@ function Main() {
   >((cells) => cells.filter((cell) => isElement(cell)) as ReadonlyArray<ElementRecord<NodeData>>);
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper
+      <Paper style={{ height: 380 }}
         className={PAPER_CLASSNAME}
         clickThreshold={10}
         linkRouting={ORTHOGONAL_LINKS}
-        height={380}
         renderElement={RenderElement}
       />
       <div style={{ display: 'flex', flexDirection: 'column' }}>
diff --git a/packages/joint-react/src/stories/examples/with-node-update/code-with-color.tsx b/packages/joint-react/src/stories/examples/with-node-update/code-with-color.tsx
index 6fab861462..9e497b519a 100644
--- a/packages/joint-react/src/stories/examples/with-node-update/code-with-color.tsx
+++ b/packages/joint-react/src/stories/examples/with-node-update/code-with-color.tsx
@@ -63,7 +63,7 @@ function RenderElement({ color }: Readonly<NodeData>) {
 function Main() {
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper className={PAPER_CLASSNAME} height={280} renderElement={RenderElement} />
+      <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} renderElement={RenderElement} />
     </div>
   );
 }
diff --git a/packages/joint-react/src/stories/examples/with-node-update/code-with-svg.tsx b/packages/joint-react/src/stories/examples/with-node-update/code-with-svg.tsx
index 49994da7be..c22a760f70 100644
--- a/packages/joint-react/src/stories/examples/with-node-update/code-with-svg.tsx
+++ b/packages/joint-react/src/stories/examples/with-node-update/code-with-svg.tsx
@@ -51,7 +51,7 @@ function RenderElement() {
 function Main() {
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper className={PAPER_CLASSNAME} height={280} renderElement={RenderElement} />
+      <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} renderElement={RenderElement} />
     </div>
   );
 }
diff --git a/packages/joint-react/src/stories/examples/with-node-update/code.tsx b/packages/joint-react/src/stories/examples/with-node-update/code.tsx
index 4f7add53a0..ae355d1ae8 100644
--- a/packages/joint-react/src/stories/examples/with-node-update/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-node-update/code.tsx
@@ -71,7 +71,7 @@ function Main() {
   );
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper className={PAPER_CLASSNAME} height={280} />
+      <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} />
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         {elements.map((element) => (
           <LabelEditor
diff --git a/packages/joint-react/src/stories/examples/with-portal-selector/code.tsx b/packages/joint-react/src/stories/examples/with-portal-selector/code.tsx
index b4fd4a403f..3158d3aa02 100644
--- a/packages/joint-react/src/stories/examples/with-portal-selector/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-portal-selector/code.tsx
@@ -191,13 +191,11 @@ function MiniMap({ paper }: Readonly<{ paper: dia.Paper }>) {
       className="absolute bg-black bottom-6 right-6 border border-[#dde6ed] rounded-lg overflow-hidden"
       style={{ width: MINIMAP_WIDTH, height: MINIMAP_HEIGHT }}
     >
-      <Paper
+      <Paper style={{ backgroundColor: LIGHT, height: "100%" }}
         {...PAPER_PROPS}
         interactive={false}
-        height="100%"
         transform={`scale(${scale})`}
         renderElement={renderElement}
-        style={{ backgroundColor: LIGHT }}
         drawGrid={false}
       />
     </div>
@@ -306,12 +304,11 @@ function Main() {
 
   return (
     <div className="flex flex-col relative w-full h-full">
-      <Paper
+      <Paper style={{ ...PAPER_STYLE, height: "calc(100vh - 100px)" }}
         id={paperId}
         {...PAPER_PROPS}
         ref={setPaper}
         className={PAPER_CLASSNAME}
-        height="calc(100vh - 100px)"
         snapLinks={{ radius: 25 }}
         renderElement={renderElement}
         linkPinning={false}
@@ -319,7 +316,6 @@ function Main() {
           if (model.get('type') !== ELEMENT_MODEL_TYPE) return 'root';
           // implicit: use the default selector for ElementModel cells
         }}
-        style={PAPER_STYLE}
         drawGrid={false}
       >
         <Selection selectedId={selectedElement} />
diff --git a/packages/joint-react/src/stories/examples/with-proximity-link/code.tsx b/packages/joint-react/src/stories/examples/with-proximity-link/code.tsx
index c10ae36b6f..1b4a236fc7 100644
--- a/packages/joint-react/src/stories/examples/with-proximity-link/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-proximity-link/code.tsx
@@ -102,9 +102,8 @@ function ResizableNode() {
 function Main() {
   return (
     <div style={{ display: 'flex', flexDirection: 'row', position: 'relative' }}>
-      <Paper
+      <Paper style={{ height: 280 }}
         className={PAPER_CLASSNAME}
-        height={280}
         renderElement={ResizableNode}
         linkRouting={STRAIGHT_LINKS}
       />
diff --git a/packages/joint-react/src/stories/examples/with-render-link/code.tsx b/packages/joint-react/src/stories/examples/with-render-link/code.tsx
index b2d6325e91..8f029eb15a 100644
--- a/packages/joint-react/src/stories/examples/with-render-link/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-render-link/code.tsx
@@ -77,9 +77,8 @@ function Main({ useLinkModels }: Readonly<{ useLinkModels: boolean }>) {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper
+      <Paper style={{ height: 280 }}
         className={PAPER_CLASSNAME}
-        height={280}
         renderLink={useLinkModels ? renderLink : undefined}
       />
     </div>
diff --git a/packages/joint-react/src/stories/examples/with-resizable-node/code.tsx b/packages/joint-react/src/stories/examples/with-resizable-node/code.tsx
index ef9d2ad754..a748067097 100644
--- a/packages/joint-react/src/stories/examples/with-resizable-node/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-resizable-node/code.tsx
@@ -83,7 +83,7 @@ function ResizableNode() {
 function Main() {
   return (
     <div style={{ display: 'flex', flexDirection: 'row', position: 'relative' }}>
-      <Paper className={PAPER_CLASSNAME} height={280} renderElement={ResizableNode} />
+      <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} renderElement={ResizableNode} />
     </div>
   );
 }
diff --git a/packages/joint-react/src/stories/examples/with-rotable-node/code.tsx b/packages/joint-react/src/stories/examples/with-rotable-node/code.tsx
index 107b04fa6a..a64e1b5b89 100644
--- a/packages/joint-react/src/stories/examples/with-rotable-node/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-rotable-node/code.tsx
@@ -104,7 +104,7 @@ function Main() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'row', position: 'relative' }}>
-      <Paper className={PAPER_CLASSNAME} height={280} renderElement={RotatableNode} />
+      <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} renderElement={RotatableNode} />
       <div>
         <u>angle</u>
         {elementRotation.map((rotation, index) => (
diff --git a/packages/joint-react/src/stories/examples/with-shape-animations/code.tsx b/packages/joint-react/src/stories/examples/with-shape-animations/code.tsx
index c93af41b54..bad413698e 100644
--- a/packages/joint-react/src/stories/examples/with-shape-animations/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-shape-animations/code.tsx
@@ -420,9 +420,7 @@ function PowerControl() {
 function Main() {
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <Paper
-        width="100%"
-        height={500}
+      <Paper style={{ width: "100%", height: 500 }}
         className={PAPER_CLASSNAME}
         renderElement={RenderShapeElement}
         transform={'scale(3)'}
diff --git a/packages/joint-react/src/stories/examples/with-svg-node/code.tsx b/packages/joint-react/src/stories/examples/with-svg-node/code.tsx
index 858ab09e20..dc5e306f12 100644
--- a/packages/joint-react/src/stories/examples/with-svg-node/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-svg-node/code.tsx
@@ -77,7 +77,7 @@ function Main() {
   );
   return (
     <div style={{ display: 'flex', flexDirection: 'row', position: 'relative' }}>
-      <Paper className={PAPER_CLASSNAME} height={280} renderElement={renderElement} />
+      <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} renderElement={renderElement} />
       <div
         style={{
           position: 'absolute',
diff --git a/packages/joint-react/src/stories/examples/with-tailwind-theme/code.tsx b/packages/joint-react/src/stories/examples/with-tailwind-theme/code.tsx
index ab2160169c..77f4f25091 100644
--- a/packages/joint-react/src/stories/examples/with-tailwind-theme/code.tsx
+++ b/packages/joint-react/src/stories/examples/with-tailwind-theme/code.tsx
@@ -253,9 +253,8 @@ function Diagram() {
         ))}
       </fieldset>
       <GraphProvider cells={cells} onCellsChange={setCells}>
-        <Paper
+        <Paper style={{ height: 240 }}
           className={PAPER_CLASSNAME}
-          height={240}
           renderElement={Node}
           defaultLink={() => DEFAULT_LINK}
         />
diff --git a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-jotai.tsx b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-jotai.tsx
index 229c4504af..7f7f6328b2 100644
--- a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-jotai.tsx
+++ b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-jotai.tsx
@@ -111,7 +111,7 @@ function PaperApp() {
 
   return (
     <div className="flex flex-col gap-4">
-      <Paper className={PAPER_CLASSNAME} height={400} renderElement={RenderItem} />
+      <Paper style={{ height: 400 }} className={PAPER_CLASSNAME} renderElement={RenderItem} />
       {/* Dark-themed controls */}
       <div className="flex flex-wrap gap-2 justify-start p-4 bg-gray-800 rounded-lg border border-gray-700">
         <button
diff --git a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-peerjs.tsx b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-peerjs.tsx
index 8eff7285ba..4fc3d62979 100644
--- a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-peerjs.tsx
+++ b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-peerjs.tsx
@@ -283,7 +283,7 @@ interface PaperAppProps {
 function PaperApp({ onAddElement, onRemoveLast }: Readonly<PaperAppProps>) {
   return (
     <div className="flex flex-col gap-4">
-      <Paper className={PAPER_CLASSNAME} height={400} renderElement={RenderItem} />
+      <Paper style={{ height: 400 }} className={PAPER_CLASSNAME} renderElement={RenderItem} />
       {/* Dark-themed controls matching the connection panel */}
       <div className="flex flex-wrap gap-2 justify-start p-4 bg-gray-800 rounded-lg border border-gray-700">
         <button
diff --git a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-redux.tsx b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-redux.tsx
index bb53ed2951..344bc107ae 100644
--- a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-redux.tsx
+++ b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-redux.tsx
@@ -301,7 +301,7 @@ function ReduxConnectedPaperApp() {
 
   return (
     <div className="flex flex-col gap-4">
-      <Paper className={PAPER_CLASSNAME} height={400} renderElement={RenderItem} />
+      <Paper style={{ height: 400 }} className={PAPER_CLASSNAME} renderElement={RenderItem} />
       <div className="flex flex-wrap gap-2 justify-start p-4 bg-gray-800 rounded-lg border border-gray-700">
         <button
           type="button"
diff --git a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-reset.tsx b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-reset.tsx
index f954c06ffe..e01b4e6faa 100644
--- a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-reset.tsx
+++ b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-reset.tsx
@@ -151,7 +151,7 @@ export default function App() {
             Reset
           </button>
         </div>
-        <Paper className={PAPER_CLASSNAME} height={400} renderElement={renderWorkflowNode} />
+        <Paper style={{ height: 400 }} className={PAPER_CLASSNAME} renderElement={renderWorkflowNode} />
       </div>
     </GraphProvider>
   );
diff --git a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-zustand.tsx b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-zustand.tsx
index 780ccf5692..43d3a2848a 100644
--- a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-zustand.tsx
+++ b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode-zustand.tsx
@@ -166,7 +166,7 @@ function PaperApp() {
 
   return (
     <div className="flex flex-col gap-4">
-      <Paper className={PAPER_CLASSNAME} height={400} renderElement={RenderItem} />
+      <Paper style={{ height: 400 }} className={PAPER_CLASSNAME} renderElement={RenderItem} />
       {/* Dark-themed controls */}
       <div className="flex flex-wrap gap-2 justify-start p-4 bg-gray-800 rounded-lg border border-gray-700">
         <button
diff --git a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode.tsx b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode.tsx
index cd89031d5d..3013b00839 100644
--- a/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode.tsx
+++ b/packages/joint-react/src/stories/tutorials/step-by-step/code-controlled-mode.tsx
@@ -137,7 +137,7 @@ function PaperApp({ onCellsChange }: Readonly<PaperAppProps>) {
         - renderElement: custom renderer for elements (defined above)
         - Paper automatically reads cells from GraphProvider's context
       */}
-      <Paper className={PAPER_CLASSNAME} height={400} renderElement={RenderItem} />
+      <Paper style={{ height: 400 }} className={PAPER_CLASSNAME} renderElement={RenderItem} />
 
       {/*
         ======================================================================
diff --git a/packages/joint-react/src/stories/tutorials/step-by-step/code-html-renderer.tsx b/packages/joint-react/src/stories/tutorials/step-by-step/code-html-renderer.tsx
index a0139fbb00..5fc780afa4 100644
--- a/packages/joint-react/src/stories/tutorials/step-by-step/code-html-renderer.tsx
+++ b/packages/joint-react/src/stories/tutorials/step-by-step/code-html-renderer.tsx
@@ -99,9 +99,8 @@ function Main() {
   );
 
   return (
-    <Paper
+    <Paper style={{ height: 400 }}
       useHTMLOverlay={isHTMLEnabled}
-      height={400}
       renderElement={renderItem}
       className={PAPER_CLASSNAME}
     >
diff --git a/packages/joint-react/src/stories/tutorials/step-by-step/code-html.tsx b/packages/joint-react/src/stories/tutorials/step-by-step/code-html.tsx
index 22d6b3da85..6308f61259 100644
--- a/packages/joint-react/src/stories/tutorials/step-by-step/code-html.tsx
+++ b/packages/joint-react/src/stories/tutorials/step-by-step/code-html.tsx
@@ -40,7 +40,7 @@ function RenderItem({ label }: Readonly<ElementData>) {
 function Main() {
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper className={PAPER_CLASSNAME} height={280} renderElement={RenderItem} />
+      <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} renderElement={RenderItem} />
     </div>
   );
 }
diff --git a/packages/joint-react/src/stories/tutorials/step-by-step/code-svg.tsx b/packages/joint-react/src/stories/tutorials/step-by-step/code-svg.tsx
index 6819996e3e..365649b16c 100644
--- a/packages/joint-react/src/stories/tutorials/step-by-step/code-svg.tsx
+++ b/packages/joint-react/src/stories/tutorials/step-by-step/code-svg.tsx
@@ -51,7 +51,7 @@ function Main() {
   );
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <Paper className={PAPER_CLASSNAME} height={280} renderElement={renderElement} />
+      <Paper style={{ height: 280 }} className={PAPER_CLASSNAME} renderElement={renderElement} />
     </div>
   );
 }
diff --git a/packages/joint-react/src/utils/joint-jsx/jsx-to-markup.stories.tsx b/packages/joint-react/src/utils/joint-jsx/jsx-to-markup.stories.tsx
index 1138e82396..129ad5c5b8 100644
--- a/packages/joint-react/src/utils/joint-jsx/jsx-to-markup.stories.tsx
+++ b/packages/joint-react/src/utils/joint-jsx/jsx-to-markup.stories.tsx
@@ -54,7 +54,7 @@ function App() {
   const graph = useMemo(() => createGraph(), []);
   return (
     <GraphProvider graph={graph}>
-      <Paper width={320} height={220} className={PAPER_CLASSNAME} />
+      <Paper style={{ width: 320, height: 220 }} className={PAPER_CLASSNAME} />
     </GraphProvider>
   );
 }
diff --git a/packages/joint-react/src/utils/test-wrappers.tsx b/packages/joint-react/src/utils/test-wrappers.tsx
index 554be4fbb6..2ff83b10aa 100644
--- a/packages/joint-react/src/utils/test-wrappers.tsx
+++ b/packages/joint-react/src/utils/test-wrappers.tsx
@@ -53,7 +53,7 @@ export function paperRenderElementWrapper(options: Options): React.JSXElementCon
     }, [children]);
     return (
       <GraphProvider {...graphProviderProps}>
-        <Paper {...paperProps} width={100} height={100} renderElement={renderElement}></Paper>
+        <Paper style={{ width: 100, height: 100 }} {...paperProps} renderElement={renderElement}></Paper>
       </GraphProvider>
     );
   };
@@ -101,13 +101,11 @@ export function paperRenderLinkWrapper(options: Options): React.JSXElementConstr
     }, [children]);
     return (
       <GraphProvider {...graphProviderProps}>
-        <Paper
+        <Paper style={{ width: 100, height: 100 }}
           {...paperProps}
-          width={100}
-          height={100}
           renderLink={renderLink}
           // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop
-          renderElement={() => <rect width={100} height={100} />}
+          renderElement={() => <rect />}
         ></Paper>
       </GraphProvider>
     );

From 21d2d7fade8a69559e9728ed27edf9ea32cf34cb Mon Sep 17 00:00:00 2001
From: Roman Bruckner <bruckner.roman@gmail.com>
Date: Fri, 15 May 2026 00:28:08 +0200
Subject: [PATCH 2/3] update

---
 packages/joint-react/src/css/styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/joint-react/src/css/styles.css b/packages/joint-react/src/css/styles.css
index 3348a664cb..1ef357c88b 100644
--- a/packages/joint-react/src/css/styles.css
+++ b/packages/joint-react/src/css/styles.css
@@ -174,6 +174,7 @@
 
   .jj-paper {
     background-color: var(--jj-paper-color);
+    height: stretch;
   }
 
   /* ── Elements ────────────────────────────────────────────────────────── */

From 5bcbd5608b413a48596eacc0da566bdb14f7b488 Mon Sep 17 00:00:00 2001
From: Roman Bruckner <bruckner.roman@gmail.com>
Date: Fri, 15 May 2026 11:21:28 +0200
Subject: [PATCH 3/3] feat(joint-core): originX/originY options for
 getFitToContentArea
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`getFitToContentArea` previously hard-anchored its grid at (0, 0): grid
lines fell at `0, gridWidth, 2*gridWidth, …`. New `originX` / `originY`
options (default `0`, paper-local coords) shift the anchor so grid
lines land at `originX + n*gridWidth, originY + m*gridHeight` instead.

Backward compatible — omitting the new opts reproduces today's behavior
exactly. `paper.fitToContent` already forwards `opt` through, so it
inherits the feature automatically.

Tested via `paper.fitToContent()` with a few combinations of
`allowNewOrigin` × non-zero origin.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/joint-core/src/dia/Paper.mjs         | 12 ++++-
 packages/joint-core/test/jointjs/dia/Paper.js | 49 +++++++++++++++++++
 packages/joint-core/types/dia.d.ts            |  6 +++
 3 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/packages/joint-core/src/dia/Paper.mjs b/packages/joint-core/src/dia/Paper.mjs
index e7f497aa8a..bc1d54bae3 100644
--- a/packages/joint-core/src/dia/Paper.mjs
+++ b/packages/joint-core/src/dia/Paper.mjs
@@ -2329,6 +2329,10 @@ export const Paper = View.extend({
         const maxWidth = opt.maxWidth || Number.MAX_VALUE;
         const maxHeight = opt.maxHeight || Number.MAX_VALUE;
         const newOrigin = opt.allowNewOrigin;
+        // Shift the grid anchor so the first cell starts at (originX, originY)
+        // in paper-local coords. Default 0 reproduces the prior behavior.
+        const originX = opt.originX || 0;
+        const originY = opt.originY || 0;
 
         const area = ('contentArea' in opt) ? new Rect(opt.contentArea) : this.getContentArea(opt);
         const { sx, sy } = this.scale();
@@ -2336,6 +2340,10 @@ export const Paper = View.extend({
         area.y *= sy;
         area.width *= sx;
         area.height *= sy;
+        // Move the area into the origin-relative coordinate system.
+        // All grid math below then operates relative to (originX, originY).
+        area.x -= originX * sx;
+        area.y -= originY * sy;
 
         let calcWidth = Math.ceil((area.width + area.x) / gridWidth);
         let calcHeight = Math.ceil((area.height + area.y) / gridHeight);
@@ -2371,7 +2379,9 @@ export const Paper = View.extend({
         calcWidth = Math.min(calcWidth, maxWidth);
         calcHeight = Math.min(calcHeight, maxHeight);
 
-        return new Rect(-tx / sx, -ty / sy, calcWidth / sx, calcHeight / sy);
+        // Translate the returned rect back into the absolute coordinate
+        // system (undo the origin-relative shift applied to area.x/y).
+        return new Rect(-tx / sx + originX, -ty / sy + originY, calcWidth / sx, calcHeight / sy);
     },
 
     transformToFitContent: function(opt) {
diff --git a/packages/joint-core/test/jointjs/dia/Paper.js b/packages/joint-core/test/jointjs/dia/Paper.js
index e7eff8bd30..f5b43a1aa4 100644
--- a/packages/joint-core/test/jointjs/dia/Paper.js
+++ b/packages/joint-core/test/jointjs/dia/Paper.js
@@ -885,6 +885,55 @@ QUnit.module('joint.dia.Paper', function(hooks) {
             });
         });
 
+        QUnit.module('fitToContent() > options > originX / originY', function() {
+
+            QUnit.test('default origin (0, 0) — backward compatible', function(assert) {
+                addCells(graph);
+                var area = paper.fitToContent({
+                    useModelGeometry: true,
+                    gridWidth: 100,
+                    gridHeight: 100,
+                    allowNewOrigin: 'any'
+                });
+                // Content spans (-100, -100) → (200, 300). Grid at 0:
+                //   Right edge rounds to 200, Bottom to 300.
+                //   New origin shifts negative content into view.
+                assert.deepEqual(area.toJSON(), { x: -100, y: -100, width: 300, height: 400 });
+            });
+
+            QUnit.test('non-zero origin shifts the grid anchor', function(assert) {
+                addCells(graph);
+                var area = paper.fitToContent({
+                    useModelGeometry: true,
+                    gridWidth: 100,
+                    gridHeight: 100,
+                    allowNewOrigin: 'any',
+                    originX: 50,
+                    originY: 25
+                });
+                // Origin shifted by (50, 25): the returned rect's
+                // top-left moves by the same amount; dimensions are
+                // unchanged because content/grid relationship hasn't
+                // changed in origin-relative space.
+                assert.deepEqual(area.toJSON(), { x: -50, y: -75, width: 300, height: 400 });
+            });
+
+            QUnit.test('origin without allowNewOrigin still offsets the rect', function(assert) {
+                addCells(graph);
+                var area = paper.fitToContent({
+                    useModelGeometry: true,
+                    gridWidth: 100,
+                    gridHeight: 100,
+                    originX: 50,
+                    originY: 25
+                });
+                // Without allowNewOrigin the negative content is
+                // ignored; rect origin = (originX, originY).
+                assert.deepEqual(area.x, 50);
+                assert.deepEqual(area.y, 25);
+            });
+        });
+
         QUnit.module('fitToContent() > options > useModelGeometry', function() {
 
             [0.5, 1, 2].forEach(function(scale) {
diff --git a/packages/joint-core/types/dia.d.ts b/packages/joint-core/types/dia.d.ts
index 70ef032c01..b6b517858d 100644
--- a/packages/joint-core/types/dia.d.ts
+++ b/packages/joint-core/types/dia.d.ts
@@ -1840,6 +1840,12 @@ export namespace Paper {
         maxHeight?: number;
         useModelGeometry?: boolean;
         contentArea?: BBox;
+        /**
+         * Shifts the grid anchor so the first cell starts at
+         * (`originX`, `originY`) in paper-local coordinates. Default `0`.
+         */
+        originX?: number;
+        originY?: number;
     }
 
     interface EventMap {