let5see/clawdbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add canvas gutter vars for A2UI

Browse Source
This commit is contained in:
Peter Steinberger
2025-12-21 03:14:12 +01:00
parent 0197fb35fe
commit e71c71c6c2
2 changed files with 101 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/canvas-host/a2ui/a2ui.bundle.js
View File

@@ -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;

95
src/canvas-host/a2ui/index.html
View File

@@ -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;
}
</style>
</head>
<body>
<canvas id="clawdis-canvas"></canvas>
<div id="clawdis-status">
<div class="card">
<div class="title" id="clawdis-status-title">Ready</div>
<div class="subtitle" id="clawdis-status-subtitle">Waiting for agent</div>
</div>
</div>
<clawdis-a2ui-host></clawdis-a2ui-host>
<script src="a2ui.bundle.js"></script>
<script>
(() => {
const canvas = document.getElementById('clawdis-canvas');
const ctx = canvas.getContext('2d');
const statusEl = document.getElementById('clawdis-status');
const titleEl = document.getElementById('clawdis-status-title');
const subtitleEl = document.getElementById('clawdis-status-subtitle');
function resize() {
const dpr = window.devicePixelRatio || 1;
const w = Math.max(1, Math.floor(window.innerWidth * dpr));
const h = Math.max(1, Math.floor(window.innerHeight * dpr));
canvas.width = w;
canvas.height = h;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
window.addEventListener('resize', resize);
resize();
window.__clawdis = {
canvas,
ctx,
setStatus: (title, subtitle) => {
if (!statusEl) return;
if (!title && !subtitle) {
statusEl.style.display = 'none';
return;
}
statusEl.style.display = 'grid';
if (titleEl && typeof title === 'string') titleEl.textContent = title;
if (subtitleEl && typeof subtitle === 'string') subtitleEl.textContent = subtitle;
clearTimeout(window.__statusTimeout);
window.__statusTimeout = setTimeout(() => {
statusEl.style.display = 'none';
}, 3000);
}
};
})();
</script>
</body>
</html>