From e71c71c6c26769954399e746a824d2409440edee Mon Sep 17 00:00:00 2001 From: Peter Steinberger Date: Sun, 21 Dec 2025 03:14:12 +0100 Subject: [PATCH] fix: add canvas gutter vars for A2UI --- src/canvas-host/a2ui/a2ui.bundle.js | 12 ++-- src/canvas-host/a2ui/index.html | 95 ++++++++++++++++++++++++++++- 2 files changed, 101 insertions(+), 6 deletions(-) diff --git a/src/canvas-host/a2ui/a2ui.bundle.js b/src/canvas-host/a2ui/a2ui.bundle.js index 89eec1995..7077c282b 100644 --- a/src/canvas-host/a2ui/a2ui.bundle.js +++ b/src/canvas-host/a2ui/a2ui.bundle.js @@ -17454,7 +17454,11 @@ var ClawdisA2UIHost = class extends i$6 { height: 100%; position: relative; box-sizing: border-box; - padding: 12px; + padding: + var(--clawdis-a2ui-inset-top, 0px) + var(--clawdis-a2ui-inset-right, 0px) + var(--clawdis-a2ui-inset-bottom, 0px) + var(--clawdis-a2ui-inset-left, 0px); } #surfaces { @@ -17463,14 +17467,14 @@ var ClawdisA2UIHost = class extends i$6 { gap: 12px; height: 100%; overflow: auto; - padding-bottom: 24px; + padding-bottom: var(--clawdis-a2ui-scroll-pad-bottom, 0px); } .status { position: absolute; left: 50%; transform: translateX(-50%); - top: 12px; + top: var(--clawdis-a2ui-status-top, 12px); display: inline-flex; align-items: center; gap: 8px; @@ -17491,7 +17495,7 @@ var ClawdisA2UIHost = class extends i$6 { position: absolute; left: 50%; transform: translateX(-50%); - bottom: 12px; + bottom: var(--clawdis-a2ui-toast-bottom, 12px); display: inline-flex; align-items: center; gap: 8px; diff --git a/src/canvas-host/a2ui/index.html b/src/canvas-host/a2ui/index.html index f1e48d761..120bb7e80 100644 --- a/src/canvas-host/a2ui/index.html +++ b/src/canvas-host/a2ui/index.html @@ -70,16 +70,107 @@ 50% { transform: translate3d( 14px,-10px, 0) scale(1.05); opacity: 0.52; } 100% { transform: translate3d(-10px, 8px, 0) scale(1.03); opacity: 0.43; } } + canvas { + position: fixed; + inset: 0; + display: block; + width: 100vw; + height: 100vh; + touch-action: none; + z-index: 1; + } + #clawdis-status { + position: fixed; + inset: 0; + display: grid; + place-items: center; + pointer-events: none; + z-index: 3; + } + #clawdis-status .card { + text-align: center; + padding: 16px 18px; + border-radius: 14px; + background: rgba(18, 18, 22, 0.42); + border: 1px solid rgba(255,255,255,0.08); + box-shadow: 0 18px 60px rgba(0,0,0,0.55); + -webkit-backdrop-filter: blur(14px); + backdrop-filter: blur(14px); + } + #clawdis-status .title { + font: 600 20px -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif; + letter-spacing: 0.2px; + color: rgba(255,255,255,0.92); + text-shadow: 0 0 22px rgba(42, 113, 255, 0.35); + } + #clawdis-status .subtitle { + margin-top: 6px; + font: 500 12px -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; + color: rgba(255,255,255,0.58); + } clawdis-a2ui-host { display: block; height: 100%; - position: relative; - z-index: 2; + position: fixed; + inset: 0; + z-index: 4; + --clawdis-a2ui-inset-top: 28px; + --clawdis-a2ui-inset-right: 0px; + --clawdis-a2ui-inset-bottom: 0px; + --clawdis-a2ui-inset-left: 0px; + --clawdis-a2ui-scroll-pad-bottom: 0px; } + +
+
+
Ready
+
Waiting for agent
+
+
+