anentrypoint-design 0.0.237 → 0.0.239

package/src/kits/os/theme.css

@@ -132,6 +132,11 @@ html, body {
     flex-direction: column;
     gap: 2px;
     pointer-events: auto;
+    /* Long app registries must scroll, not extend past the viewport. */
+    max-height: calc(100vh - var(--os-bar-h) - 16px);
+    max-height: calc(100dvh - var(--os-bar-h) - env(safe-area-inset-top, 0px) - 16px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
 }
 .os-menu.open { display: flex; }
 .os-menu .os-btn {
@@ -181,7 +186,10 @@ html, body {
     text-overflow: ellipsis;
     text-transform: lowercase;
 }
+.os-task { min-height: 28px; }
 .os-task:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
+/* Empty taskbar reads as an intentional strip, not a stray blurred bar. */
+.os-task-empty { font-size: 11px; color: var(--os-fg-3); padding: 0 10px; font-family: var(--os-font); }
 .os-task.focused {
     background: var(--panel-select, var(--os-accent-soft));
     color: var(--os-fg);
@@ -258,7 +266,8 @@ html, body {
 .os-side-rail {
     position: fixed;
     left: 0; top: var(--os-bar-h); bottom: var(--os-bar-h);
-    width: var(--os-rail-w);
+    padding-left: env(safe-area-inset-left, 0px);
+    width: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px));
     background: var(--os-bg-2);
     border: none;
     display: none;
@@ -323,12 +332,16 @@ html, body {
 .os-drawer-close .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
 .os-drawer-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(clamp(92px, 24vw, 140px), 1fr));
     gap: var(--space-3, 16px);
     padding: var(--space-3, 16px);
     overflow-y: auto;
     flex: 1;
     align-content: start;
+    max-width: 720px;
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
 }
 .os-drawer-tile {
     display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2, 8px);
@@ -352,7 +365,7 @@ html, body {
 
 .os-spacer { flex: 1 1 auto; }
 .os-tray { display: flex; align-items: center; gap: 6px; }
-.os-instances { display: flex; gap: 4px; margin-left: 8px; max-width: 280px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0 4px; }
+.os-instances { display: flex; gap: 4px; margin-left: 8px; flex: 0 1 40vw; max-width: 40vw; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0 4px; -webkit-mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); }
 .os-instances::-webkit-scrollbar { height: 4px; }
 .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)); }
@@ -392,11 +405,11 @@ 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) + var(--space-2, 8px)); }
-    .os-taskbar { padding-left: calc(var(--os-rail-w) + var(--space-2, 8px)); }
+    .wm-root { left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px)) !important; }
+    .os-menubar { padding-left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px)); }
+    .os-taskbar { padding-left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px)); }
     .os-menubar .os-instances { display: flex; }
-    .os-menu { left: calc(var(--os-rail-w) + var(--space-2, 8px)); }
+    .os-menu { left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px)); }
 }
 
 @media (max-width: 767px) {
@@ -404,14 +417,14 @@ html, body {
     body { overscroll-behavior: none; }
     .os-menubar [data-role="home"] { display: inline-flex; min-width: var(--os-tap); min-height: var(--os-tap); padding: 0 12px; }
     .os-menubar [data-role="home"] .ic svg { width: 22px; height: 22px; }
-    .os-menubar { font-size: 14px; padding: 0 8px; padding-top: env(safe-area-inset-top, 0); height: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)); }
+    .os-menubar { font-size: 14px; padding: env(safe-area-inset-top, 0) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); height: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)); }
     .os-menubar [data-role="apps"] { display: none; }
     .os-menubar .os-brand { font-size: 13px; margin-right: 6px; }
     .os-menubar [data-role="add"] { display: none; }
     .os-menubar .os-instances { display: none; }
     .os-clock { display: none; }
     .os-taskbar {
-        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0));
+        padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0)) max(8px, env(safe-area-inset-left, 0px));
         gap: 6px;
         overflow-x: auto;
         overflow-y: hidden;
@@ -515,6 +528,19 @@ html, body {
 /* Bars overlay windows: .wm-root fills full viewport, menubar/taskbar paint on top.
  * Tilde key hides them via .bars-hidden on <html>. */
 .ds-247420 .wm-root { top: 0 !important; bottom: 0 !important; inset: 0 !important; }
+/* With bars overlaying the wm-root, a maximized window's 34px titlebar would
+ * sit exactly under the 34px menubar (untappable) and its body under the
+ * taskbar; keep maximized windows between the bars on desktop/tablet. The
+ * mobile band re-asserts its own contract in the responsive layer below. */
+@media (min-width: 768px) {
+  .ds-247420 .wm-win.wm-max {
+    top: var(--os-bar-h) !important;
+    height: calc(100% - (var(--os-bar-h) * 2)) !important;
+  }
+}
+/* Instance filtering hides off-instance windows via class, not inline style. */
+.ds-247420 .wm-win.wm-inst-hidden,
+.wm-win.wm-inst-hidden { display: none !important; }
 html.bars-hidden .os-menubar,
 html.bars-hidden .os-taskbar { display: none !important; }
 .ds-247420 .os-task { border-radius: var(--r-pill, 999px); }
@@ -813,7 +839,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .cc-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; padding: .35em .7em; color: var(--fg, inherit); opacity: .75; }
 .ds-247420 .cc-toggle:hover { opacity: 1; }
 .ds-247420 .cc-toggle.cc-open { opacity: 1; font-weight: 600; }
-.ds-247420 .cc-body { padding: .5em .7em .7em; display: flex; flex-direction: column; gap: .5em; max-height: 42vh; overflow: auto; }
+.ds-247420 .cc-body { padding: .5em .7em .7em; display: flex; flex-direction: column; gap: .5em; max-height: 42vh; max-height: 42dvh; overflow: auto; }
 .ds-247420 .cc-body[hidden] { display: none; }
 .ds-247420 .cc-row { display: flex; gap: .6em; flex-wrap: wrap; }
 .ds-247420 .cc-row > .cc-field { flex: 1 1 140px; min-width: 0; }
@@ -1482,7 +1508,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
            max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
 }
-.ds-247420 .tb-sess-modal { max-height: calc(100svh - 24px); display: flex; flex-direction: column; }
+.ds-247420 .tb-sess-modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
 .ds-247420 .tb-sess-modal-body { overflow-y: auto; min-height: 0; }
 
 /* --- browser-pane: the generic .app-pane 16px prose padding stranded the

package/src/kits/os/wm.css

@@ -15,6 +15,10 @@
     position: absolute;
     min-width: 200px;
     min-height: 120px;
+    /* Never exceed the .wm-root desktop area — a window sized on a large
+       monitor must stay recoverable when the viewport shrinks. */
+    max-width: 100%;
+    max-height: 100%;
     background: var(--os-bg-1);
     color: var(--os-fg);
     border: none;
@@ -35,6 +39,8 @@
 .wm-bar {
     display: flex;
     align-items: center;
+    min-height: 36px;
+    box-sizing: border-box;
     padding: 8px 12px;
     background: var(--os-bg-2);
     cursor: move;
@@ -70,6 +76,7 @@
     justify-content: center;
     border-radius: var(--os-radius-sm, var(--r-1, 6px));
     transition: background 100ms ease, color 100ms ease;
+    touch-action: manipulation;
 }
 .wm-btn:hover { background: var(--panel-hover, var(--os-bg-1)); color: var(--os-fg); }
 
@@ -135,7 +142,19 @@
     border-radius: 0;
 }
 
-@media (max-width: 767px) {
+/* Touch: lift resize hit-zones and window buttons toward the 44px floor
+   (wm.css must be self-sufficient; theme.css only covers .ds-247420). */
+@media (pointer: coarse) {
+    .wm-edge[data-dir='n'], .wm-edge[data-dir='s'] { height: 20px; }
+    .wm-edge[data-dir='e'], .wm-edge[data-dir='w'] { width: 20px; }
+    .wm-edge[data-dir='ne'], .wm-edge[data-dir='nw'], .wm-edge[data-dir='sw'] { width: 32px; height: 32px; }
+    .wm-resize { width: 32px; height: 32px; }
+    .wm-btn { min-width: 44px; min-height: 44px; }
+}
+
+/* Full-screen windows on phones AND short landscape phones — a width-only
+   query misses 812x375 landscape, which cannot host floating chrome. */
+@media (max-width: 767px), ((max-height: 500px) and (orientation: landscape) and (pointer: coarse)) {
     .wm-win {
         left: 0 !important;
         top: 0 !important;
@@ -145,4 +164,5 @@
         border: none;
     }
     .wm-resize { display: none; }
+    .wm-edge { display: none; }
 }

package/src/kits/os/wm.js

@@ -20,14 +20,34 @@ export function renderWindow(opts = {}) {
         callbacks = {},
     } = opts;
 
+    // Keep at least MIN px of the window horizontally inside the container and
+    // the titlebar (BAR px) vertically reachable, so a window can always be
+    // grabbed by pointer (persisted bounds from a larger viewport included).
+    const MIN_VISIBLE = 60;
+    const BAR_H = 36;
+    function clampBounds(b, p) {
+        const pw = p ? p.clientWidth : window.innerWidth;
+        const ph = p ? p.clientHeight : window.innerHeight;
+        const out = { ...b };
+        if (typeof out.w === 'number') out.w = Math.min(out.w, pw);
+        if (typeof out.h === 'number') out.h = Math.min(out.h, ph);
+        if (typeof out.x === 'number') {
+            const w = typeof out.w === 'number' ? out.w : MIN_VISIBLE;
+            out.x = Math.max(MIN_VISIBLE - w, Math.min(out.x, pw - MIN_VISIBLE));
+        }
+        if (typeof out.y === 'number') out.y = Math.max(0, Math.min(out.y, ph - BAR_H));
+        return out;
+    }
+
     const el = document.createElement('div');
     el.className = 'wm-win';
     el.dataset.kind = kind;
     if (instanceId) el.dataset.instanceId = instanceId;
-    el.style.left = bounds.x + 'px';
-    el.style.top = bounds.y + 'px';
-    el.style.width = bounds.w + 'px';
-    el.style.height = bounds.h + 'px';
+    const b0 = clampBounds(bounds, null);
+    el.style.left = b0.x + 'px';
+    el.style.top = b0.y + 'px';
+    el.style.width = b0.w + 'px';
+    el.style.height = b0.h + 'px';
 
     const bar = document.createElement('div');
     bar.className = 'wm-bar';
@@ -90,10 +110,14 @@ export function renderWindow(opts = {}) {
         setTitle(t) { titleEl.textContent = t; },
         setBody(b) { setBodyContent(bodyEl, b); },
         setBounds(b) {
-            if (typeof b.x === 'number') el.style.left = b.x + 'px';
-            if (typeof b.y === 'number') el.style.top = b.y + 'px';
-            if (typeof b.w === 'number') el.style.width = b.w + 'px';
-            if (typeof b.h === 'number') el.style.height = b.h + 'px';
+            const c = clampBounds({
+                ...b,
+                w: typeof b.w === 'number' ? b.w : el.offsetWidth,
+            }, el.offsetParent);
+            if (typeof c.x === 'number') el.style.left = c.x + 'px';
+            if (typeof c.y === 'number') el.style.top = c.y + 'px';
+            if (typeof b.w === 'number') el.style.width = c.w + 'px';
+            if (typeof b.h === 'number') el.style.height = c.h + 'px';
         },
         setFocused(v) { applyFocused(el, v); },
         setMaximized(v) { applyMaximized(el, v); },

package/src/kits/spoint/game-hud.css

@@ -12,8 +12,9 @@
 }
 .sp-hud-ammo {
   position: fixed;
-  bottom: 50px;
-  right: 20px;
+  /* Fixed chrome clears notch/home-indicator on cutout devices. */
+  bottom: calc(50px + env(safe-area-inset-bottom, 0px));
+  right: calc(20px + env(safe-area-inset-right, 0px));
   font-size: 24px;
   font-weight: bold;
   color: var(--fg);
@@ -22,7 +23,7 @@
 .sp-hud-ammo-reloading { color: var(--warn); }
 .sp-hud-health {
   position: fixed;
-  bottom: 20px;
+  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
   left: 50%;
   transform: translateX(-50%);
   width: 200px;
@@ -49,7 +50,7 @@
 .sp-hud-boost {
   position: fixed;
   top: 80px;
-  right: 20px;
+  right: calc(20px + env(safe-area-inset-right, 0px));
   padding: 8px 16px;
   background: var(--accent);
   color: var(--accent-fg);

package/src/kits/spoint/host-join-lobby.css

@@ -21,6 +21,11 @@
   border: 1px solid var(--bw-rule, var(--rule));
   border-radius: var(--r-2, 10px);
   color: var(--fg);
+  /* Short landscape phones: keep lower controls reachable inside the card. */
+  max-height: calc(100vh - 32px);
+  max-height: calc(100dvh - 32px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 .sp-lobby-title {
   margin: 0;