From c593cfc1f7cadebb3a728d4465327623a21b60db Mon Sep 17 00:00:00 2001
From: Seungwoo321 <seungwoo321@gmail.com>
Date: Mon, 9 Mar 2026 22:22:45 +0900
Subject: [PATCH 1/2] fix(renderer): move annotations outside viewport overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Annotation 컴포넌트가 viewport의 overflow: hidden에 의해 잘리는 문제를 수정했습니다. Page와 Annotations를 감싸는 wrapper div를 추가하여 annotations가 viewport 밖에서 렌더링되도록 구조를 변경했습니다.
---
 .../__snapshots__/render.test.ts.snap         | 70 +++++++++++++++++++
 src/renderer/html/index.ts                    | 17 ++++-
 src/renderer/styles/annotation.ts             |  7 ++
 3 files changed, 92 insertions(+), 2 deletions(-)

diff --git a/__tests__/snapshots/__snapshots__/render.test.ts.snap b/__tests__/snapshots/__snapshots__/render.test.ts.snap
index 0c570e9..f269357 100644
--- a/__tests__/snapshots/__snapshots__/render.test.ts.snap
+++ b/__tests__/snapshots/__snapshots__/render.test.ts.snap
@@ -1776,8 +1776,15 @@ svg.wf-icon-xl { width: 32px; height: 32px; }
   z-index: 10;
 }
 
+/* Page Wrapper - Contains page + annotations outside viewport overflow */
+.wf-page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Annotations Panel - Documentation container */
 .wf-annotations {
+  margin-top: 16px;
   background: #fafafa;
   border: 2px dashed #d1d5db;
   border-radius: 8px;
@@ -3631,8 +3638,15 @@ svg.wf-icon-xl { width: 32px; height: 32px; }
   z-index: 10;
 }
 
+/* Page Wrapper - Contains page + annotations outside viewport overflow */
+.wf-page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Annotations Panel - Documentation container */
 .wf-annotations {
+  margin-top: 16px;
   background: #fafafa;
   border: 2px dashed #d1d5db;
   border-radius: 8px;
@@ -5563,8 +5577,15 @@ svg.wf-icon-xl { width: 32px; height: 32px; }
   z-index: 10;
 }
 
+/* Page Wrapper - Contains page + annotations outside viewport overflow */
+.wf-page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Annotations Panel - Documentation container */
 .wf-annotations {
+  margin-top: 16px;
   background: #fafafa;
   border: 2px dashed #d1d5db;
   border-radius: 8px;
@@ -7448,8 +7469,15 @@ svg.wf-icon-xl { width: 32px; height: 32px; }
   z-index: 10;
 }
 
+/* Page Wrapper - Contains page + annotations outside viewport overflow */
+.wf-page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Annotations Panel - Documentation container */
 .wf-annotations {
+  margin-top: 16px;
   background: #fafafa;
   border: 2px dashed #d1d5db;
   border-radius: 8px;
@@ -9458,8 +9486,15 @@ svg.wf-icon-xl { width: 32px; height: 32px; }
   z-index: 10;
 }
 
+/* Page Wrapper - Contains page + annotations outside viewport overflow */
+.wf-page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Annotations Panel - Documentation container */
 .wf-annotations {
+  margin-top: 16px;
   background: #fafafa;
   border: 2px dashed #d1d5db;
   border-radius: 8px;
@@ -11337,8 +11372,15 @@ svg.wf-icon-xl { width: 32px; height: 32px; }
   z-index: 10;
 }
 
+/* Page Wrapper - Contains page + annotations outside viewport overflow */
+.wf-page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Annotations Panel - Documentation container */
 .wf-annotations {
+  margin-top: 16px;
   background: #fafafa;
   border: 2px dashed #d1d5db;
   border-radius: 8px;
@@ -13217,8 +13259,15 @@ svg.wf-icon-xl { width: 32px; height: 32px; }
   z-index: 10;
 }
 
+/* Page Wrapper - Contains page + annotations outside viewport overflow */
+.wf-page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Annotations Panel - Documentation container */
 .wf-annotations {
+  margin-top: 16px;
   background: #fafafa;
   border: 2px dashed #d1d5db;
   border-radius: 8px;
@@ -15098,8 +15147,15 @@ svg.wf-icon-xl { width: 32px; height: 32px; }
   z-index: 10;
 }
 
+/* Page Wrapper - Contains page + annotations outside viewport overflow */
+.wf-page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Annotations Panel - Documentation container */
 .wf-annotations {
+  margin-top: 16px;
   background: #fafafa;
   border: 2px dashed #d1d5db;
   border-radius: 8px;
@@ -16983,8 +17039,15 @@ svg.wf-icon-xl { width: 32px; height: 32px; }
   z-index: 10;
 }
 
+/* Page Wrapper - Contains page + annotations outside viewport overflow */
+.wf-page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Annotations Panel - Documentation container */
 .wf-annotations {
+  margin-top: 16px;
   background: #fafafa;
   border: 2px dashed #d1d5db;
   border-radius: 8px;
@@ -18860,8 +18923,15 @@ svg.wf-icon-xl { width: 32px; height: 32px; }
   z-index: 10;
 }
 
+/* Page Wrapper - Contains page + annotations outside viewport overflow */
+.wf-page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Annotations Panel - Documentation container */
 .wf-annotations {
+  margin-top: 16px;
   background: #fafafa;
   border: 2px dashed #d1d5db;
   border-radius: 8px;
diff --git a/src/renderer/html/index.ts b/src/renderer/html/index.ts
index e39aebe..8e43e04 100644
--- a/src/renderer/html/index.ts
+++ b/src/renderer/html/index.ts
@@ -322,7 +322,12 @@ export class HtmlRenderer extends BaseRenderer {
       ...this.getCommonClasses(node),
     ]);
 
-    const children = this.renderChildren(node.children);
+    // Separate UI children from annotation children
+    // Annotations render outside the viewport container to avoid overflow: hidden clipping
+    const uiChildren = node.children.filter(child => child.type !== 'Annotations');
+    const annotationChildren = node.children.filter(child => child.type === 'Annotations');
+
+    const uiContent = this.renderChildren(uiChildren);
     const title = node.title ? `<title>${this.escapeHtml(node.title)}</title>\n` : '';
 
     // Build common styles (padding, margin, etc.) and combine with viewport dimensions
@@ -341,7 +346,15 @@ export class HtmlRenderer extends BaseRenderer {
     // Add data attributes for viewport info
     const dataAttrs = `data-viewport-width="${viewport.width}" data-viewport-height="${viewport.height}" data-viewport-label="${viewport.label}"`;
 
-    return `<div class="${classes}" style="${combinedStyle}" ${dataAttrs}>\n${title}${children}\n</div>`;
+    const pageDiv = `<div class="${classes}" style="${combinedStyle}" ${dataAttrs}>\n${title}${uiContent}\n</div>`;
+
+    // If there are annotations, wrap page + annotations in a wrapper div
+    if (annotationChildren.length > 0) {
+      const annotationsContent = this.renderChildren(annotationChildren);
+      return `<div class="${this.prefix}-page-wrapper" style="width: ${viewport.width}px">\n${pageDiv}\n${annotationsContent}\n</div>`;
+    }
+
+    return pageDiv;
   }
 
   /**
diff --git a/src/renderer/styles/annotation.ts b/src/renderer/styles/annotation.ts
index 8ecd499..846a91e 100644
--- a/src/renderer/styles/annotation.ts
+++ b/src/renderer/styles/annotation.ts
@@ -27,8 +27,15 @@ export function generateAnnotationStyles(_theme: ThemeConfig, prefix: string): s
   z-index: 10;
 }
 
+/* Page Wrapper - Contains page + annotations outside viewport overflow */
+.${prefix}-page-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 /* Annotations Panel - Documentation container */
 .${prefix}-annotations {
+  margin-top: 16px;
   background: #fafafa;
   border: 2px dashed #d1d5db;
   border-radius: 8px;

From f4f00fdde5a8050e4887b0118fa01b403b09598e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 9 Mar 2026 13:23:29 +0000
Subject: [PATCH 2/2] chore: release v2.6.2-beta.0

---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c70a4d6..847b0e6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.6.2-beta.0](https://github.com/wireweave/core/compare/v2.6.1...v2.6.2-beta.0) (2026-03-09)
+
+### Bug Fixes
+
+* **renderer:** move annotations outside viewport overflow ([c593cfc](https://github.com/wireweave/core/commit/c593cfc1f7cadebb3a728d4465327623a21b60db))
+
 ## [2.6.1](https://github.com/wireweave/core/compare/v2.6.1-beta.2...v2.6.1) (2026-03-09)
 
 ## [2.6.1-beta.2](https://github.com/wireweave/core/compare/v2.6.1-beta.1...v2.6.1-beta.2) (2026-03-09)
diff --git a/package.json b/package.json
index 22d1ed0..639ebc2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wireweave/core",
-  "version": "2.6.1",
+  "version": "2.6.2-beta.0",
   "description": "Core parser and renderer for wireweave",
   "type": "module",
   "main": "dist/index.js",