anentrypoint-design 0.0.143 → 0.0.145

package/src/kits/os/app-panes.css

@@ -14,7 +14,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 4px 10px;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-2);
     background: var(--os-bg-2);
     font-family: var(--os-mono);
     font-size: 11px;
@@ -22,14 +23,30 @@
     text-transform: lowercase;
     flex: 0 0 auto;
 }
-.terminal-app-title { font-family: var(--os-mono); }
-.terminal-app-status { font-family: var(--os-mono); color: var(--os-fg-3); }
+.terminal-app-title {
+    font-family: var(--os-mono);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.terminal-app-status {
+    font-family: var(--os-mono);
+    color: var(--os-fg-3);
+    flex: 0 0 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .terminal-app-slot {
     flex: 1 1 auto;
+    min-width: 0;
     min-height: 0;
     overflow: hidden;
     background: var(--os-bg-0);
+    position: relative;
 }
+.terminal-app-slot > * { width: 100%; height: 100%; }
 
 /* ── browser-app ────────────────────────────────────────────────────── */
 .browser-app {
@@ -43,15 +60,15 @@
 .browser-app-bar {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding: 6px 8px;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
     background: var(--os-bg-2);
     flex: 0 0 auto;
 }
 .browser-app-btn {
     height: 28px;
     min-width: 28px;
-    padding: 0 8px;
+    padding: 0 var(--space-2);
     background: var(--os-bg-3);
     color: var(--os-fg);
     border: none;
@@ -61,10 +78,12 @@
     outline: none;
 }
 .browser-app-btn:hover { background: var(--os-accent-soft); }
+.browser-app-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--os-accent); }
 .browser-app-url {
     flex: 1 1 auto;
+    min-width: 0;
     height: 28px;
-    padding: 0 10px;
+    padding: 0 var(--space-2);
     background: var(--os-bg-0);
     color: var(--os-fg);
     border: none;
@@ -75,15 +94,16 @@
 .browser-app-url:focus { box-shadow: inset 4px 0 0 var(--os-accent); }
 .browser-app-slot {
     flex: 1 1 auto;
+    min-width: 0;
     min-height: 0;
     overflow: hidden;
     background: var(--os-bg-0);
-    display: flex;
+    position: relative;
 }
-.browser-app-slot > * { flex: 1 1 auto; min-width: 0; min-height: 0; }
+.browser-app-slot > * { width: 100%; height: 100%; }
 .browser-app-status {
     flex: 0 0 auto;
-    padding: 2px 10px;
+    padding: var(--space-1) var(--space-2);
     background: var(--os-bg-2);
     font: 11px var(--os-mono);
     color: var(--os-fg-3);
@@ -103,29 +123,33 @@
 .validator-app-head {
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 6px 10px;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-2);
     background: var(--os-bg-2);
     flex: 0 0 auto;
 }
 .validator-app-banner {
-    padding: 2px 10px;
+    flex: 0 0 auto;
+    padding: 2px var(--space-2);
     border-radius: 999px;
     font: 11px var(--os-mono);
     text-transform: lowercase;
     background: var(--os-bg-3);
     color: var(--os-fg-2);
 }
-.validator-app-banner[data-state="pass"] { background: var(--os-accent-soft); color: var(--os-fg); }
+.validator-app-banner[data-state="pending"] { background: var(--os-amber); color: var(--os-bg-0); }
+.validator-app-banner[data-state="pass"] { background: var(--os-accent); color: var(--os-bg-0); }
 .validator-app-banner[data-state="fail"] { background: var(--os-red); color: var(--os-bg-0); }
 .validator-app-counts {
+    flex: 0 0 auto;
     font: 11px var(--os-mono);
     color: var(--os-fg-2);
 }
 .validator-app-rerun {
     margin-left: auto;
-    height: 24px;
-    padding: 0 10px;
+    flex: 0 0 auto;
+    height: var(--space-4);
+    padding: 0 var(--space-2);
     background: var(--os-bg-3);
     color: var(--os-fg);
     border: none;
@@ -138,9 +162,11 @@
 .validator-app-rerun:hover { background: var(--os-accent-soft); }
 .validator-app-slot {
     flex: 1 1 auto;
+    min-width: 0;
     min-height: 0;
     overflow: hidden;
     display: flex;
+    position: relative;
     background: var(--os-bg-0);
 }
 .validator-app-slot > * { flex: 1 1 auto; min-width: 0; min-height: 0; }

package/src/kits/os/files-app.js

@@ -10,8 +10,11 @@ export function renderFilesApp(opts = {}) {
     node.dataset.component = 'files-app';
 
     let preview = null;
+    let selected = null;
     async function refresh() {
         const items = await list();
+        preview = null;
+        selected = null;
         node.innerHTML = '';
         const head = document.createElement('div');
         head.className = 'head';
@@ -21,7 +24,11 @@ export function renderFilesApp(opts = {}) {
             const row = document.createElement('div');
             row.className = 'row';
             row.textContent = p;
+            row.title = p;
             row.addEventListener('click', async () => {
+                if (selected) selected.classList.remove('selected');
+                selected = row;
+                row.classList.add('selected');
                 const body = await readFile(p);
                 if (preview) preview.remove();
                 preview = document.createElement('pre');

package/src/kits/os/freddie-dashboard.css

@@ -3,49 +3,52 @@
    Table/Receipt/Hero/Row/EmptyState/Chip) that ship their own classes via
    247420.css. This file holds the freddie-specific chrome that AGENTS.md's
    inline-styles ban pushed out of freddie-dashboard.js and the freddie/* page
-   modules. */
+   modules. Tokens follow the kit --os-* namespace plus the base --space-*/
+   --fs-* 8pt scale, with the var(--token, fallback) idiom so the kit's
+   standalone theme.css resolves cleanly. */
 
 .app-fd .fd-pre {
-    font-family: var(--ff-mono, JetBrains Mono, monospace);
-    font-size: 12px;
+    font-family: var(--os-mono, JetBrains Mono, monospace);
+    font-size: var(--fs-tiny, 12px);
     white-space: pre-wrap;
     word-break: break-all;
     margin: 0;
     max-height: 320px;
     overflow: auto;
-    background: var(--panel-2, #DDD3BC);
-    padding: 8px 10px;
-    border-radius: var(--r-1, 6px);
+    background: var(--os-bg-2, #F0E9DA);
+    padding: var(--space-2, 8px) var(--space-3, 16px);
+    border-radius: var(--os-radius-sm, 6px);
 }
 
 .fd-root { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
 
-.fd-btn-mini { padding: 2px 10px; font-size: 0.8em; }
+.fd-btn-mini { padding: var(--space-1, 4px) var(--space-2, 8px); font-size: var(--fs-tiny, 12px); }
 
 /* chat composer fields */
-.fd-chat-form { display: flex; flex-direction: column; gap: var(--tool-gutter, 16px); }
-.fd-chat-row  { display: flex; gap: var(--tool-gutter, 16px); flex-wrap: wrap; }
-.fd-chat-field { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
+.fd-chat-form { display: flex; flex-direction: column; gap: var(--space-3, 16px); }
+.fd-chat-row  { display: flex; gap: var(--space-3, 16px); flex-wrap: wrap; }
+.fd-chat-field { display: flex; flex-direction: column; gap: var(--space-1, 4px); min-width: 120px; }
 .fd-chat-field-grow { flex: 2; min-width: 140px; }
-.fd-chat-field > label { font-size: 0.75em; opacity: 0.7; letter-spacing: 0.05em; }
+.fd-chat-field > label { font-family: var(--os-mono, JetBrains Mono, monospace); font-size: var(--fs-micro, 11px); color: var(--os-fg-3, #857B6C); letter-spacing: var(--tr-label, 0.10em); text-transform: uppercase; }
 .fd-chat-field > input { width: 100%; box-sizing: border-box; }
-.fd-chat-submit { display: flex; gap: var(--tool-gutter, 16px); align-items: flex-end; }
+.fd-chat-submit { display: flex; gap: var(--space-3, 16px); align-items: flex-end; }
 .fd-chat-submit textarea { flex: 1; resize: none; min-height: 80px; }
 .fd-chat-submit > button { align-self: flex-end; }
 
 /* chatlog (legacy fd-chat-msgs container) */
 .fd-chatlog {
     max-height: 420px; overflow-y: auto;
-    background: var(--panel-2, #DDD3BC);
-    border-radius: 4px; padding: 4px; margin-top: 8px;
+    background: var(--os-bg-2, #F0E9DA);
+    border-radius: var(--os-radius-sm, 6px);
+    padding: var(--space-1, 4px); margin-top: var(--space-2, 8px);
 }
-.fd-chatlog-msg { padding: 6px 10px; background: var(--panel-2, #DDD3BC); white-space: pre-wrap; word-break: break-word; }
-.fd-chatlog-assistant { color: var(--panel-accent, #3F8A4A); }
-.fd-chatlog-tool { margin: 4px 0; padding: 4px 8px; background: var(--panel-3, #C9BDA0); border-radius: 4px; font-family: var(--ff-mono, JetBrains Mono, monospace); font-size: 0.85em; }
-.fd-chatlog-tool-sum { cursor: pointer; color: var(--warn, #FF6B4A); padding: 2px 0; }
-.fd-chatlog-tool-body { margin: 4px 0 0; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; }
+.fd-chatlog-msg { padding: var(--space-1, 4px) var(--space-3, 16px); background: var(--os-bg-2, #F0E9DA); white-space: pre-wrap; word-break: break-word; }
+.fd-chatlog-assistant { color: var(--os-accent, #3F8A4A); }
+.fd-chatlog-tool { margin: var(--space-1, 4px) 0; padding: var(--space-1, 4px) var(--space-2, 8px); background: var(--os-bg-3, #E3DAC7); border-radius: var(--os-radius-sm, 6px); font-family: var(--os-mono, JetBrains Mono, monospace); font-size: var(--fs-tiny, 12px); }
+.fd-chatlog-tool-sum { cursor: pointer; color: var(--os-red, #FF6B4A); padding: var(--space-1, 4px) 0; }
+.fd-chatlog-tool-body { margin: var(--space-1, 4px) 0 0; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; }
 
 /* chip wraps (providers, env) */
-.fd-chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
-.fd-chip-wrap-padded { padding: 8px 4px; }
+.fd-chip-wrap { display: flex; flex-wrap: wrap; gap: var(--space-1, 4px); }
+.fd-chip-wrap-padded { padding: var(--space-2, 8px) var(--space-1, 4px); }
 .fd-env-chip { cursor: pointer; }

package/src/kits/os/launcher.css

@@ -6,24 +6,25 @@
 .launcher-dock {
     position: fixed;
     left: 0; top: 0; bottom: 0;
-    width: 56px;
+    width: var(--os-rail-w, 56px);
     background: var(--os-bg-2);
     border: none;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 8px 0;
-    gap: 8px;
+    padding: var(--space-2, 8px) 0;
+    gap: var(--space-2, 8px);
     z-index: 10000;
     pointer-events: auto;
     font: 11px var(--os-mono);
     color: var(--os-fg);
+    overflow: hidden;
 }
 
 .launcher-btn {
     width: 40px; height: 40px;
     background: transparent;
-    color: inherit;
+    color: var(--os-fg-2);
     cursor: pointer;
     border-radius: var(--os-radius-sm);
     display: flex;
@@ -31,31 +32,39 @@
     justify-content: center;
     padding: 0;
     font: inherit;
+    text-transform: lowercase;
     transition: background 80ms ease, color 80ms ease, box-shadow 80ms ease;
 }
 .launcher-btn:hover { background: var(--panel-hover, var(--os-bg-1)); color: var(--os-fg); }
+.launcher-btn:active { background: var(--panel-select); }
 .launcher-btn.active {
     background: var(--panel-select, var(--os-accent-soft));
     color: var(--os-fg);
     box-shadow: inset 4px 0 0 var(--os-accent);
 }
-.launcher-add { font-size: 20px; }
+.launcher-add { font-size: 20px; color: var(--os-fg-2); }
+.launcher-add:hover { color: var(--os-accent); }
 
 .launcher-instances {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
 }
 
 .launcher-row {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 2px;
+    gap: var(--space-1, 4px);
 }
 
-.launcher-close { font-size: 11px; opacity: 0.7; width: 20px; height: 20px; }
-.launcher-close:hover { opacity: 1; }
+.launcher-close { font-size: 11px; opacity: 0.7; width: 20px; height: 20px; color: var(--os-fg-3); }
+.launcher-close:hover { opacity: 1; color: var(--os-red); }
 
-.launcher-dock + .wm-root { left: 56px !important; }
+.launcher-dock + .wm-root { left: var(--os-rail-w, 56px) !important; }

package/src/kits/os/theme.css

@@ -104,10 +104,10 @@ html, body {
     background: var(--os-bg-1);
     border: none;
     border-radius: var(--r-3, 18px);
-    padding: 8px;
+    padding: var(--space-2, 8px);
     min-width: 220px;
-    top: calc(var(--os-bar-h) + 4px);
-    left: 8px;
+    top: calc(var(--os-bar-h) + var(--space-1, 4px));
+    left: var(--space-2, 8px);
     z-index: 9500;
     display: none;
     flex-direction: column;
@@ -220,15 +220,15 @@ html, body {
 
 .os-side-rail {
     position: fixed;
-    left: 0; top: 0; bottom: 0;
+    left: 0; top: var(--os-bar-h); bottom: var(--os-bar-h);
     width: var(--os-rail-w);
     background: var(--os-bg-2);
     border: none;
     display: none;
     flex-direction: column;
     align-items: center;
-    padding: 12px 0;
-    gap: 6px;
+    padding: var(--space-2, 8px) 0;
+    gap: var(--space-1, 4px);
     z-index: 9100;
     pointer-events: auto;
 }
@@ -266,7 +266,7 @@ html, body {
 .os-drawer.open { display: flex; opacity: 1; transform: translateY(0); }
 .os-drawer-head {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 12px 16px;
+    padding: var(--space-2, 8px) var(--space-3, 16px);
     border: none;
     height: 56px;
     box-sizing: border-box;
@@ -287,15 +287,15 @@ html, body {
 .os-drawer-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
-    padding: 16px;
+    gap: var(--space-3, 16px);
+    padding: var(--space-3, 16px);
     overflow-y: auto;
     flex: 1;
     align-content: start;
 }
 .os-drawer-tile {
-    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
-    padding: 18px 8px;
+    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2, 8px);
+    padding: var(--space-3, 16px) var(--space-2, 8px);
     background: var(--os-bg-1);
     border: none;
     color: var(--os-fg);
@@ -320,24 +320,26 @@ html, body {
 .os-instances .os-btn { flex: 0 0 auto; min-width: 36px; padding: 2px 8px; font-family: var(--os-mono); font-size: 11px; }
 .os-instances .os-btn.active { background: var(--panel-select, var(--os-accent-soft)); color: var(--os-fg); border-color: var(--panel-accent, var(--os-accent)); box-shadow: inset 0 0 0 1px var(--panel-accent, var(--os-accent)); }
 .os-menubar [data-role="home"] { display: none; }
-.os-root { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: 8000; }
+.os-root { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: 9300; }
 .os-menubar, .os-taskbar { pointer-events: auto; flex: 0 0 auto; }
 .os-taskbar { margin-top: auto; }
 .wm-root { top: var(--os-bar-h) !important; bottom: var(--os-bar-h) !important; inset: var(--os-bar-h) 0 var(--os-bar-h) 0 !important; }
 
-.app-pane { padding: 16px 18px; font: 14px var(--os-font); color: var(--os-fg); line-height: 1.55; overflow: auto; height: 100%; box-sizing: border-box; background: var(--os-bg-1); }
-.app-pane h2 { margin: 0 0 10px 0; color: var(--os-fg); font-family: var(--os-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
-.app-pane p { margin: 0 0 10px 0; color: var(--os-fg-2); }
-.app-pane ul { padding-left: 18px; margin: 6px 0 12px; color: var(--os-fg-2); }
-.app-pane li { padding: 2px 0; }
-.app-pane code { font: 12px var(--os-mono); background: var(--os-bg-2); padding: 1px 6px; border-radius: var(--r-1, 6px); color: var(--os-fg); }
+.app-pane { padding: var(--space-3, 16px); font: var(--fs-sm, 14px) var(--os-font); color: var(--os-fg); line-height: var(--lh-base, 1.55); overflow: auto; height: 100%; box-sizing: border-box; background: var(--os-bg-1); }
+.app-pane h2 { margin: 0 0 var(--space-2, 8px) 0; color: var(--os-fg); font-family: var(--os-display); font-size: var(--fs-xl, 21px); font-weight: 700; letter-spacing: -0.01em; line-height: var(--lh-snug, 1.2); }
+.app-pane p { margin: 0 0 var(--space-2, 8px) 0; color: var(--os-fg-2); }
+.app-pane ul { padding-left: var(--space-3, 16px); margin: var(--space-1, 4px) 0 var(--space-3, 16px); color: var(--os-fg-2); }
+.app-pane li { padding: var(--space-1, 4px) 0; }
+.app-pane code { font: var(--fs-tiny, 12px) var(--os-mono); background: var(--os-bg-2); padding: 1px 6px; border-radius: var(--r-1, 6px); color: var(--os-fg); }
 .app-pane a { color: var(--os-accent); text-decoration: none; }
 .app-pane a:hover { text-decoration: underline; text-underline-offset: 2px; }
-.app-pane .meta { color: var(--os-fg-3); font-size: 12px; }
-.app-pane.mono { font: 12.5px var(--os-mono); padding: 12px; background: var(--os-bg-1); }
-.app-pane.mono .row { padding: 5px 8px; cursor: pointer; border-radius: var(--r-1, 6px); }
+.app-pane .meta { color: var(--os-fg-3); font-size: var(--fs-tiny, 12px); }
+.app-pane.mono { font: var(--fs-tiny, 12px) var(--os-mono); padding: var(--space-2, 8px); background: var(--os-bg-1); }
+.app-pane.mono[data-component="monitor-app"] { white-space: pre-wrap; line-height: 1.7; }
+.app-pane.mono .row { padding: 4px 8px; cursor: pointer; border-radius: var(--r-1, 6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .app-pane.mono .row:hover { background: var(--panel-hover, var(--os-bg-2)); }
-.app-pane.mono .head { color: var(--os-accent); margin-bottom: 8px; padding-bottom: 6px; font-weight: 600; letter-spacing: 0.02em; }
+.app-pane.mono .row.selected { background: var(--panel-select, var(--os-accent-soft)); box-shadow: inset 4px 0 0 var(--os-accent); }
+.app-pane.mono .head { color: var(--os-accent); margin-bottom: 8px; padding-bottom: 8px; font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid var(--os-bg-3); }
 .app-pane.mono pre { background: var(--os-bg-2); padding: 10px 12px; margin: 8px 0 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: 11.5px var(--os-mono); border-radius: var(--r-1, 6px); color: var(--os-fg); border: none; }
 .app-shell-pane { margin: 0; padding: 8px; font: 12px var(--os-mono); color: var(--os-fg); background: var(--os-bg-0); height: 100%; overflow: auto; white-space: pre-wrap; box-sizing: border-box; }
 .app-canvas { width: 100%; height: 100%; background: var(--os-bg-0); display: block; cursor: default; }
@@ -354,10 +356,10 @@ html, body {
 @media (max-width: 1023px) and (min-width: 768px) {
     .os-side-rail { display: flex; }
     .wm-root { left: var(--os-rail-w) !important; }
-    .os-menubar { padding-left: calc(var(--os-rail-w) + 8px); }
-    .os-taskbar { padding-left: calc(var(--os-rail-w) + 8px); }
+    .os-menubar { padding-left: calc(var(--os-rail-w) + var(--space-2, 8px)); }
+    .os-taskbar { padding-left: calc(var(--os-rail-w) + var(--space-2, 8px)); }
     .os-menubar .os-instances { display: flex; }
-    .os-menu { left: calc(var(--os-rail-w) + 8px); }
+    .os-menu { left: calc(var(--os-rail-w) + var(--space-2, 8px)); }
 }
 
 @media (max-width: 767px) {

package/src/kits/os/wm.css

@@ -18,7 +18,7 @@
     background: var(--os-bg-1);
     color: var(--os-fg);
     border: none;
-    border-radius: var(--r-3, 18px);
+    border-radius: var(--os-radius, var(--r-2, 10px));
     display: flex;
     flex-direction: column;
     pointer-events: auto;
@@ -29,7 +29,7 @@
 .wm-bar {
     display: flex;
     align-items: center;
-    padding: 6px 10px;
+    padding: 8px 12px;
     background: var(--os-bg-2);
     cursor: move;
     user-select: none;
@@ -39,14 +39,16 @@
 }
 .wm-title {
     flex: 1;
+    min-width: 0;
     font: 12px var(--os-font);
+    color: var(--os-fg-2);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     text-transform: lowercase;
 }
 
-.wm-btns { display: flex; gap: 4px; }
+.wm-btns { display: flex; gap: 6px; }
 .wm-btn {
     width: 22px;
     height: 22px;
@@ -60,10 +62,10 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--r-1, 6px);
+    border-radius: var(--os-radius-sm, var(--r-1, 6px));
     transition: background 100ms ease, color 100ms ease;
 }
-.wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
+.wm-btn:hover { background: var(--panel-hover, var(--os-bg-1)); color: var(--os-fg); }
 
 .wm-body {
     flex: 1;
@@ -76,8 +78,10 @@
     position: absolute;
     right: 0;
     bottom: 0;
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
+    padding: 2px;
+    box-sizing: border-box;
     cursor: nwse-resize;
     background: transparent;
     color: var(--os-fg-3);
@@ -89,6 +93,7 @@
     justify-content: flex-end;
     touch-action: none;
 }
+.wm-resize:hover { opacity: 0.7; }
 .wm-resize::after { content: '\25E2'; }
 
 .wm-win.wm-min .wm-body,

package/src/kits/os/wm.js

@@ -55,16 +55,20 @@ export function renderWindow(opts = {}) {
     maxBtn.addEventListener('click', e => { e.stopPropagation(); callbacks.onMaximize && callbacks.onMaximize(); });
     closeBtn.addEventListener('click', e => { e.stopPropagation(); callbacks.onClose && callbacks.onClose(); });
 
-    el.addEventListener('pointerdown', () => callbacks.onFocus && callbacks.onFocus());
+    const focus = () => callbacks.onFocus && callbacks.onFocus();
+
+    el.addEventListener('pointerdown', () => focus());
 
     bar.addEventListener('pointerdown', e => {
         if (e.target.closest('.wm-btn')) return;
-        callbacks.onFocus && callbacks.onFocus();
+        e.stopPropagation();
+        focus();
         if (callbacks.onDragStart) callbacks.onDragStart(e, { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight });
     });
 
     resize.addEventListener('pointerdown', e => {
-        callbacks.onFocus && callbacks.onFocus();
+        e.stopPropagation();
+        focus();
         if (callbacks.onResizeStart) callbacks.onResizeStart(e, { x: el.offsetLeft, y: el.offsetTop, w: el.offsetWidth, h: el.offsetHeight });
     });
 

package/vendor/webjsx/attributes.js

@@ -24,11 +24,28 @@ function updateEventListener(el, eventName, newHandler, oldHandler) {
  * @param key Property or attribute name
  * @param value New value to set
  */
+function setPropOrFallback(el, key, value) {
+    // Some IDL attributes (e.g. <input>.list, .form, .labels, .validity) are
+    // read-only getters: assigning to them throws TypeError and aborts the diff.
+    // Fall back to setAttribute so the render survives.
+    try {
+        el[key] = value;
+    }
+    catch {
+        try {
+            if (value == null || value === false)
+                el.removeAttribute(key);
+            else
+                el.setAttribute(key, value === true ? "" : `${value}`);
+        }
+        catch { /* give up silently rather than break the whole tree */ }
+    }
+}
 function updatePropOrAttr(el, key, value) {
     if (el instanceof HTMLElement) {
         if (key in el) {
             // Fast path: property exists on HTMLElement
-            el[key] = value;
+            setPropOrFallback(el, key, value);
             return;
         }
         if (typeof value === "string") {
@@ -36,7 +53,7 @@ function updatePropOrAttr(el, key, value) {
             return;
         }
         // Fallback for non-string values on HTMLElement
-        el[key] = value;
+        setPropOrFallback(el, key, value);
         return;
     }
     // SVG/Other namespace elements
@@ -55,7 +72,7 @@ function updatePropOrAttr(el, key, value) {
         el.setAttribute(key, value);
     }
     else {
-        el[key] = value;
+        setPropOrFallback(el, key, value);
     }
 }
 /**