@fest-lib/fl-ui 0.1.11 → 0.1.13

package/package.json

@@ -1,10 +1,13 @@
 {
     "name": "@fest-lib/fl-ui",
-    "description": "FL-UI components and services (fest-lib). Dev HTTPS: npm run dev → https://localhost:8434/?suite=explorer (OPFS). HTTP-only: npm run dev:http.",
-    "version": "0.1.11",
+    "description": "fest-lib FL.UI: windows, taskbar, app menu, Speed Dial (shapeless tiles). Dev: npm run dev",
+    "version": "0.1.13",
     "license": "MIT",
     "type": "module",
     "sideEffects": true,
+    "imports": {
+        "#fl-ui/*": "./src/ui/*.ts"
+    },
     "engines": {
         "node": ">=20"
     },

package/src/styles/layers.scss

@@ -1 +1,43 @@
-@layer tokens, base, layout, utilities, shells, shell, views, view, viewer, components, ux-layer, markdown, essentials, print, print-breaks, overrides;
+/*
+ * Filename: layers.scss
+ * FullPath: modules/projects/fl.ui/src/styles/layers.scss
+ * Change date and time: 15.10.00_22.08.2026
+ * Reason for changes: Match veela `_layers.scss` so fl.ui never establishes a shorter competing prelude.
+ */
+
+/*
+ * INVARIANT: Copy of `modules/projects/veela.css/src/scss/_layers.scss`.
+ * Change the veela file first, then keep this list identical.
+ * Hosts `@use` this file; they must not declare a second `@layer a, b, …` prelude.
+ */
+@layer
+    ux-normalize,
+    tokens,
+    ux-tokens,
+    base,
+    ux-base,
+    layout,
+    ux-layout,
+    shells,
+    shell,
+    views,
+    view,
+    viewer,
+    components,
+    ux-components,
+    ux-layer,
+    ui-icon,
+    ui-icon-reset,
+    ux-file-manager,
+    ux-file-manager-content,
+    utilities,
+    ux-utilities,
+    theme,
+    ux-theme,
+    markdown,
+    essentials,
+    print,
+    print-breaks,
+    view-transitions,
+    overrides,
+    ux-overrides;

package/src/styles/patch-global-native-controls.scss

@@ -1,8 +1,7 @@
 // Incremental sheet: legacy host-wide native `button` + bare `input`/`select`/`textarea`.
 @use "./ui/native-host-button-chrome" as host;
 @use "./ui/forms-bare-host-elements" as bare;
-
-@layer tokens, base, layout, utilities, shells, shell, views, view, viewer, components, ux-layer, markdown, essentials, print, print-breaks, overrides;
+@use "./layers";
 
 @layer components {
     button {

package/src/styles/ui/_buttons.scss

@@ -123,8 +123,8 @@
     $state-var: if(sass($variant == tonal): color.md3-var($state-role); else: color.md3-var($role));
 
     // Common CSS variable setup
-    --md-button-bg: color-mix(in oklch, var(--surface-color, transparent) 90%, var(--on-surface-color, transparent));
-    --md-button-on: var(--on-surface-color, currentColor);
+    --md-button-bg: color-mix(in oklch, var(--color-surface, var(--surface-color, transparent)) 90%, var(--color-on-surface, var(--on-surface-color, transparent)));
+    --md-button-on: var(--color-on-surface, var(--on-surface-color, currentColor));
     --md-button-outline-color: var(--border-color, transparent);
 
     // Variant-specific styles
@@ -138,8 +138,8 @@
         border: none;
     } @else {
         // filled, elevated, tonal
-        background-color: var(--surface-color, var(--surface-color, transparent));
-        color: var(--md-button-on, var(--on-surface-color, currentColor));
+        background-color: var(--color-surface, var(--surface-color, transparent));
+        color: var(--md-button-on, var(--color-on-surface, currentColor));
         border: none;
     }
 

package/src/styles/ui/_essentials.scss

@@ -6,8 +6,7 @@
 // Default off; opt in via `patch-global-native-controls.scss` / `loadFlUIGlobalNativeControlStyles()`.
 @use "./essentials-options" as eo;
 @use "./native-host-button-chrome" as hostbtn;
-
-@layer tokens, base, layout, utilities, shells, shell, views, view, viewer, components, ux-layer, markdown, essentials, print, print-breaks, overrides;
+@use "../layers";
 
 @layer components {
     @if eo.$include-native-button-styles {
@@ -328,7 +327,7 @@
      * WHY: Launcher caption rows use `[data-layer="labels"]`; a global `span { aspect-ratio: 1/1 }` makes each pill as tall as its width (“box” tiles).
      * Square helpers apply only outside label captions (icon/grid tiles still use spans elsewhere).
      */
-    .ui-ws-item:not([data-layer="labels"]) span {
+    .ui-ws-item:not([data-layer="labels"]) span:not(.ui-ws-item-caption) {
         pointer-events: none;
         aspect-ratio: 1 / 1;
         inline-size: fit-content;
@@ -374,7 +373,10 @@
     }
 
     @media screen {
-        :root, :host, :scope {
+        ui-window-frame,
+        ui-modal,
+        .ui-grid-item,
+        .ctx-menu {
             --font-family: "InterVariable", "Inter", "Helvetica Neue", "Helvetica", "Calibri", "Roboto", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
         }
 

package/src/styles/ui/_explorer-content.scss

@@ -3,8 +3,8 @@
 //
 @layer ux-file-manager-content {
     /* Tighter actions track + explicit parent columns so subgrid rows align with the header */
-    $row-grid:        [icon] minmax(0px, 2.5rem) [name] minmax(0px, 1fr) [size] minmax(4.5rem, 6rem) [date] minmax(0px, 7.5rem) [actions] minmax(6.75rem, max-content);
-    $row-grid-mobile: [icon] minmax(0px, 2.5rem) [name] minmax(0px, 1fr) [size] minmax(4.5rem, 6rem) [date] minmax(0px, 0px)  [actions] minmax(6.75rem, max-content);
+    $row-grid:        [icon] var(--ui-explorer-icon-track, 2rem) [name] minmax(0px, 1fr) [size] minmax(4.5rem, 6rem) [date] minmax(0px, 7.5rem) [actions] minmax(6.75rem, max-content);
+    $row-grid-mobile: [icon] var(--ui-explorer-icon-track, 2rem) [name] minmax(0px, 1fr) [size] minmax(4.5rem, 6rem) [date] minmax(0px, 0px)  [actions] minmax(6.75rem, max-content);
 
     :host(ui-file-manager-content) {
         &, :where(*) {
@@ -76,7 +76,7 @@
         .fm-grid-rows {
             display: grid;
             grid-template-columns: subgrid;
-            grid-auto-rows: 2.625rem;
+            grid-auto-rows: var(--ui-explorer-row-height, 2.625rem);
             grid-column: 1 / -1;
             align-content: start;
 
@@ -94,7 +94,7 @@
             z-index: 1;
 
             content-visibility: visible;
-            contain-intrinsic-size: 1px 2.625rem;
+            contain-intrinsic-size: 1px var(--ui-explorer-row-height, 2.625rem);
             contain: none;
 
             //
@@ -110,7 +110,7 @@
             color: var(--color-on-surface);
 
             display: grid;
-            grid-template-rows: minmax(0, 2.625rem) !important;
+            grid-template-rows: minmax(0, var(--ui-explorer-row-height, 2.625rem)) !important;
             grid-column: 1 / -1;
             order: var(--order, 1) !important;
             min-block-size: 0;
@@ -126,7 +126,7 @@
             cursor: pointer;
             pointer-events: auto;
             touch-action: manipulation;
-            block-size: 2.625rem;
+            block-size: var(--ui-explorer-row-height, 2.625rem);
             user-drag: none;
             -webkit-user-drag: none;
 
@@ -146,8 +146,12 @@
             }
 
             ui-icon {
-                inline-size: 1.25rem;
-                block-size: 1.25rem;
+                --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
+                --ui-icon-padding: 0px;
+                inline-size: var(--ui-icon-size);
+                block-size: var(--ui-icon-size);
+                min-inline-size: var(--ui-icon-size);
+                min-block-size: var(--ui-icon-size);
                 flex-shrink: 0;
                 place-content: center;
                 place-items: center;
@@ -172,12 +176,12 @@
                 background-color: color-mix(in oklab, var(--color-on-surface) 11%, transparent);
             }
             &:focus-visible {
-                outline: 2px solid var(--color-primary, #3794ff);
+                outline: 2px solid var(--color-primary, #5a7fff);
                 outline-offset: -2px;
             }
         }
 
-        .c {
+        .c:not(.icon) {
             min-inline-size: 0;
             display: flex;
             flex-direction: row;
@@ -195,7 +199,33 @@
             block-size: auto;
         }
 
-        .icon { grid-column: icon; place-content: center; place-items: center; }
+        .icon {
+            display: flex;
+            grid-column: icon;
+            place-content: center;
+            place-items: center;
+            overflow: visible;
+            flex-shrink: 0;
+            inline-size: 1.5rem;
+            block-size: 1.5rem;
+            min-inline-size: 1.5rem;
+            min-block-size: 1.5rem;
+            aspect-ratio: 1;
+
+            ui-icon,
+            img {
+                --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
+                --ui-icon-padding: 0px;
+                inline-size: var(--ui-icon-size) !important;
+                block-size: var(--ui-icon-size) !important;
+                min-inline-size: var(--ui-icon-size) !important;
+                min-block-size: var(--ui-icon-size) !important;
+                max-inline-size: var(--ui-icon-size) !important;
+                max-block-size: var(--ui-icon-size) !important;
+                flex-shrink: 0;
+                object-fit: contain;
+            }
+        }
         .name { grid-column: name; inline-size: stretch; }
         .size {
             grid-column: size;
@@ -276,15 +306,19 @@
             }
 
             &:focus-visible {
-                outline: 2px solid color-mix(in oklab, var(--color-primary, #3794ff) 55%, transparent);
+                outline: 2px solid color-mix(in oklab, var(--color-primary, #5a7fff) 55%, transparent);
                 outline-offset: 1px;
             }
 
             ui-icon {
-                inline-size: 1.0625rem;
-                block-size: 1.0625rem;
-                min-inline-size: 1.0625rem;
-                min-block-size: 1.0625rem;
+                --ui-icon-size: var(--ui-explorer-action-icon-size, 1.15rem);
+                --ui-icon-padding: 0px;
+                inline-size: var(--ui-icon-size) !important;
+                block-size: var(--ui-icon-size) !important;
+                min-inline-size: var(--ui-icon-size) !important;
+                min-block-size: var(--ui-icon-size) !important;
+                max-inline-size: var(--ui-icon-size) !important;
+                max-block-size: var(--ui-icon-size) !important;
             }
         }
 

package/src/styles/ui/_explorer.scss

@@ -31,9 +31,13 @@
 
             background-color: var(--color-surface);
             color: var(--color-on-surface);
+            --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
+            --ui-icon-padding: 0px;
+            --icon-color: var(--color-on-surface);
         }
 
         .fm-root {
+            position: relative;
             gap: 0;
             display: grid;
             grid-template-columns: [content-col] minmax(0px, 1fr);
@@ -79,7 +83,7 @@
             }
 
             input:focus-visible {
-                box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary, #3794ff) 45%, transparent);
+                box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary, #5a7fff) 45%, transparent);
             }
 
             .btn {
@@ -98,8 +102,14 @@
                 background: transparent;
 
                 ui-icon {
-                    inline-size: 1.25rem;
-                    block-size: 1.25rem;
+                    --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
+                    --ui-icon-padding: 0px;
+                    inline-size: var(--ui-icon-size) !important;
+                    block-size: var(--ui-icon-size) !important;
+                    min-inline-size: var(--ui-icon-size) !important;
+                    min-block-size: var(--ui-icon-size) !important;
+                    max-inline-size: var(--ui-icon-size) !important;
+                    max-block-size: var(--ui-icon-size) !important;
                     flex-shrink: 0;
                 }
             }
@@ -113,7 +123,7 @@
             }
 
             .btn:focus-visible {
-                outline: 2px solid color-mix(in oklab, var(--color-primary, #3794ff) 55%, transparent);
+                outline: 2px solid color-mix(in oklab, var(--color-primary, #5a7fff) 55%, transparent);
                 outline-offset: 1px;
             }
 

package/src/styles/ui/_gridbox.scss

@@ -78,7 +78,7 @@
 
         //
         /* WHY: Exclude launcher label captions (`[data-layer="labels"]`) — `aspect-ratio: 1/1` on `span` mis-sizes ellipsis pills. */
-        .ui-ws-item:not([data-layer="labels"]) span {
+        .ui-ws-item:not([data-layer="labels"]) span:not(.ui-ws-item-caption) {
             pointer-events: none;
             aspect-ratio: 1 / 1;
             inline-size: fit-content;

package/src/styles/ui/_home-host.scss

@@ -2,21 +2,28 @@
 // Loaded via adopted SpeedDial.scss — no dependency on `environment-shell/scss/*`.
 //
 // WHY: Shared demo mounts into `#app` with no intrinsic height; `%` + `min-block-size: 0` + abs
-// `.speed-dial-root` collapses the grid. Use `min-block-size: 100dvb` unless flex-mounted (`.wf-mounted-view`).
+// `.speed-dial-root` collapses the grid. Use layout viewport (`100lvb` / `--lv-height`) so the
+// Android IME overlays instead of squashing wallpaper + Speed Dial.
 
 $bp-desktop-min: 641px;
 
 @mixin home-view-host-styles {
-    :where(body):has([data-view="home"]) {
+    :where(html):has(.speed-dial-root),
+    :where(html[data-cwsp-shell-role="launcher"]),
+    :where(body):has([data-view="home"]),
+    :where(body):has(.speed-dial-root) {
         margin: 0;
-        min-block-size: 100dvb;
+        overflow: hidden;
+        min-block-size: var(--lv-height, 100lvb);
+        block-size: var(--lv-height, 100lvb);
+        max-block-size: var(--lv-height, 100lvb);
     }
 
     /* Typical view demo: `<main id="app">` + direct home root */
     :where(main, [role="main"]):has(> .view-home.env-home-workspace) {
         display: flex;
         flex-direction: column;
-        min-block-size: 100dvb;
+        min-block-size: var(--lv-height, 100lvb);
         box-sizing: border-box;
         border: none;
         outline: none;
@@ -34,7 +41,7 @@ $bp-desktop-min: 641px;
         ) {
         display: flex;
         flex-direction: column;
-        min-block-size: 100dvb;
+        min-block-size: var(--lv-height, 100lvb);
         box-sizing: border-box;
         border: none;
         outline: none;
@@ -72,21 +79,23 @@ $bp-desktop-min: 641px;
         justify-items: stretch;
         inline-size: 100%;
         min-inline-size: 0;
-        min-block-size: 100dvb;
+        min-block-size: var(--lv-height, 100lvb);
         padding: 0;
         overflow: visible;
         background: transparent;
         box-sizing: border-box;
+        /* WHY: host stays non-hit for chrome stacking; #home must still receive paste/drop. */
         pointer-events: none;
 
         & > .speed-dial-root {
             position: absolute;
-            inset: 0;
-            inline-size: 100%;
-            block-size: 100%;
-            max-inline-size: 100%;
-            max-block-size: 100%;
-            pointer-events: none;
+            inset: 0 auto auto 0;
+            inline-size: var(--lv-width, 100%);
+            block-size: var(--lv-height, 100%);
+            max-inline-size: var(--lv-width, 100%);
+            max-block-size: var(--lv-height, 100%);
+            /* INVARIANT: desktop root must accept link drop/paste — do not leave pointer-events:none. */
+            pointer-events: auto;
         }
     }
 
@@ -120,9 +129,10 @@ $bp-desktop-min: 641px;
     .env-shell-workspace > .env-shell-home-mount > .view-home.env-home-workspace.wf-mounted-view > .speed-dial-root,
     .wf-view-host > .view-home.env-home-workspace.wf-mounted-view > .speed-dial-root {
         flex: 1 1 auto;
-        min-block-size: 0;
-        block-size: 100%;
-        inline-size: 100%;
+        min-block-size: var(--lv-height, 100lvb);
+        block-size: var(--lv-height, 100lvb);
+        inline-size: var(--lv-width, 100%);
+        max-block-size: var(--lv-height, 100lvb);
         border-radius: 0 !important;
         outline: none !important;
         border: none !important;
@@ -174,6 +184,6 @@ $bp-desktop-min: 641px;
         background: transparent !important;
         backdrop-filter: none !important;
         -webkit-backdrop-filter: none !important;
-        min-block-size: 100dvb;
+        min-block-size: var(--lv-height, 100lvb);
     }
 }

package/src/styles/ui/_index.scss

@@ -10,7 +10,7 @@
 @use "./shared" as *;
 @use "./states" as *;
 @use "./normalize" as *;
-
+@use "./modal" as modal;
 
 @forward "./scrollbar";
 @forward "./layers";
@@ -20,3 +20,5 @@
 @forward "./bar";
 @forward "./home-host";
 @forward "./launcher-typography";
+
+@include modal.transient-modal;

package/src/styles/ui/_markdown.scss

@@ -5,8 +5,7 @@
  * markdown-viewer.scss — optimized/refactored
  *
  * Стратегия:
- *  - @layer: tokens → markdown → overrides → print → print-breaks
- *    (каждый следующий слой побеждает предыдущий без !important)
+ *  - @layer order: veela / fl.ui `layers.scss` SoT (do not declare a shorter prelude)
  *  - light-dark() + color-scheme: inherit — вместо двух @media prefers-color-scheme
  *  - @each по SCSS-map для heading-размеров (одно место правды)
  *  - %img-align placeholder — устраняет 7-кратный повтор [align] / [width] / [height]
@@ -18,14 +17,14 @@
  *  - !important только там, где реально нужно бороться с внешним JS-стилем
  */
 
+@use "sass:map";
+@use "sass:list";
+@use "../layers";
 @use "../../../../veela.css/src/scss/core/misc/config" as config;
 @use "../../../../veela.css/src/scss/core/misc/tokens" as tokens;
 @use "../../../../veela.css/src/scss/core/misc/mixins" as mixins;
 
-@use "sass:map";
-@use "sass:list";
 @import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
-@layer tokens, markdown, overrides, print, print-breaks;
 
 /* ─── Animations ──────────────────────────────────────────────────────────── */
 

package/src/styles/ui/_modal.scss

@@ -12,7 +12,7 @@
         place-content: center;
         place-items: center;
         padding: var(--space-xl);
-        z-index: 9999;
+        z-index: var(--z-modal-backdrop, 400);
         line-height: normal;
         box-sizing: border-box;
         max-inline-size: min(100cqi, 100dvi);
@@ -41,8 +41,8 @@
         max-block-size: max(95dvb, 50rem);
 
         line-height: normal;
-        background-color: var(--surface-color);
-        color: var(--on-surface-color);
+        background-color: var(--color-surface, var(--surface-color));
+        color: var(--color-on-surface, var(--on-surface-color));
         padding: var(--padding-lg);
         padding-block-end: var(--space-md);
         border-radius: var(--radius-lg);
@@ -188,6 +188,7 @@
             background: transparent;
             border: none 0px transparent;
             outline: none 0px transparent;
+            flex-wrap: nowrap;
 
             //
             .modal-actions-right {
@@ -256,3 +257,53 @@
         }
     }
 }
+
+/**
+ * Native-first helper styles. Kept separate from `modal()` because legacy
+ * `ui-modal` rules use containment that is unsafe for focusable dialog content.
+ */
+@mixin transient-modal {
+    dialog.ui-modal-dialog {
+        inline-size: min(100% - 2rem, 36rem);
+        max-inline-size: calc(100dvi - 2rem);
+        max-block-size: calc(100dvb - 2rem);
+        margin: auto;
+        padding: 0;
+        border: 1px solid color-mix(in oklab, CanvasText 18%, transparent);
+        border-radius: var(--radius-lg, 1rem);
+        background: var(--modal-bg, Canvas);
+        color: var(--modal-fg, CanvasText);
+        box-shadow: var(--modal-shadow, 0 20px 60px rgb(0 0 0 / 0.42));
+        overflow: visible;
+
+        &::backdrop {
+            background: var(--modal-backdrop-bg, rgb(0 0 0 / 0.58));
+            backdrop-filter: blur(4px);
+        }
+    }
+
+    .ui-modal-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: var(--ui-modal-fallback-z, 2147483646);
+        display: grid;
+        place-items: center;
+        padding: 1rem;
+        background: var(--modal-backdrop-bg, rgb(0 0 0 / 0.58));
+        backdrop-filter: blur(4px);
+        pointer-events: auto;
+    }
+
+    .ui-modal-panel {
+        inline-size: min(100%, 36rem);
+        max-block-size: calc(100dvb - 2rem);
+        overflow: auto;
+        box-sizing: border-box;
+        padding: var(--modal-padding, 1.25rem);
+        border-radius: var(--modal-radius, var(--radius-lg, 1rem));
+        background: var(--modal-bg, Canvas);
+        color: var(--modal-fg, CanvasText);
+        box-shadow: var(--modal-shadow, 0 20px 60px rgb(0 0 0 / 0.42));
+        pointer-events: auto;
+    }
+}

package/src/styles/ui/_orientbox.scss

@@ -48,9 +48,9 @@
             direction: ltr !important;
 
             //
-            // Cap by dynamic viewport and by JS visual viewport (--vv-* from fest/dom updateVP) for mobile browser chrome / keyboard.
-            max-inline-size: min(100%, min(100cqi, 100dvi), var(--vv-width, 100dvi)) !important;
-            max-block-size: min(100%, min(100cqb, 100dvb), var(--vv-height, 100dvb)) !important;
+            /* WHY: IME must overlay — do not cap to shrinking `--vv-height` / `100dvb`. */
+            max-inline-size: min(100%, min(100cqi, 100lvi), var(--lv-width, 100lvi)) !important;
+            max-block-size: min(100%, min(100cqb, 100lvb), var(--lv-height, 100lvb)) !important;
 
             //
             /*outline-color: oklch(from var(--on-surface-color) l c h / 0.1);

package/src/styles/ui/_variables.scss

@@ -1,8 +1,8 @@
 /*
  * Filename: _variables.scss
  * FullPath: modules/projects/fl.ui/src/styles/ui/_variables.scss
- * Change date and time: 16.25.00_31.07.2026
- * Reason for changes: Fallback --color-* via --u2-color-mod (token names kept).
+ * Change date and time: 15.16.00_22.08.2026
+ * Reason for changes: Fallback seed matches veela; emit inside @layer tokens so unlayered :root cannot beat SoT.
  */
 
 // Design tokens for fl.ui when veela is not loaded (minimal fallback).
@@ -26,20 +26,38 @@
     );
 }
 
+@layer tokens {
 :root {
-    --fl-ui-radius: 0.5rem;
-    --fl-ui-gap: 0.75rem;
+    --fl-ui-radius: var(--radius-md, 0.5rem);
+    --fl-ui-gap: var(--space-md, 0.75rem);
 
     /*
-     * NOTE: Standalone fl.ui fallback (used by _explorer.scss, _explorer-content.scss).
-     * Canonical color-token source of truth is veela `core/misc/_tokens.scss`.
-     * When veela is loaded, its `:root` `--color-*` / `--error-color` win by source
-     * order; these remain as fallbacks for standalone fl.ui without veela.
+     * NOTE: Standalone fallback only. Same seed as veela SoT (`#5a9ec8`).
+     * INVARIANT: stay inside `@layer tokens` — unlayered :root would beat veela.
      */
-    --color-primary: #2e3a64;
+    --color-primary: #5a9ec8;
     --base-color: var(--color-primary);
     --color-surface: --u2-color-mod(var(--base-color), 920);
     --color-on-surface: --u2-color-mod(var(--base-color), 100);
     --color-on-surface-variant: --u2-color-mod(var(--base-color), 280);
-    --error-color: #f87171;
+    --error-color: var(--color-error, #f87171);
+    --surface-color: var(--color-surface);
+    --on-surface-color: var(--color-on-surface);
+    --fl-surface: var(--color-surface);
+    --fl-on-surface: var(--color-on-surface);
+
+    /*
+     * COMPAT: same names as veela `@layer tokens`. Component styles consume
+     * these namespaced values; generic `--icon-*` variables stay local to
+     * the ui-icon shadow contract.
+     */
+    --ui-icon-size: 1.25rem;
+    --ui-icon-padding: 0px;
+    --ui-icon-tile-padding: 0.45rem;
+    --ui-window-icon-size: 0.95rem;
+    --ui-explorer-icon-size: 1.5rem;
+    --ui-explorer-icon-track: 2rem;
+    --ui-explorer-action-icon-size: 1.15rem;
+    --ui-explorer-row-height: 2.875rem;
+}
 }

package/src/styles/ui/_viewport.scss

@@ -465,5 +465,6 @@
     }
 }
 
-// :root `--vv-width`, `--vv-height`, `--vv-offset-left`, `--vv-offset-top`, `--vv-scale`
-// are set by fest/dom `getAvailSize()` / `updateVP()` (see `whenAnyScreenChanges`).
+// :root `--vv-*` is the visual viewport (IME may shrink it).
+// `--lv-width` / `--lv-height` / `--view-height` stay on the layout viewport
+// (fest/dom `getAvailSize()` / `updateVP()` — see `whenAnyScreenChanges`).

package/src/styles/ui/_window-frame.scss

@@ -503,10 +503,10 @@
 
 @mixin window-frame-variables {
     // Window frame CSS custom properties — prefer veela/MD tokens over raw hex
-    --ui-window-frame-bg: var(--fl-surface, var(--color-surface, --u2-color-mod(var(--base-color, #5a7fff), 40)));
-    --ui-window-frame-color: var(--fl-on-surface, var(--color-on-surface, --u2-color-mod(var(--base-color, #5a7fff), 900)));
-    --ui-window-frame-border-radius: var(--fl-radius-lg, 0.85rem);
-    --ui-window-frame-shadow: var(--fl-shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1));
+    --ui-window-frame-bg: var(--color-surface, var(--fl-surface, --u2-color-mod(var(--base-color, #5a7fff), 40)));
+    --ui-window-frame-color: var(--color-on-surface, var(--fl-on-surface, --u2-color-mod(var(--base-color, #5a7fff), 900)));
+    --ui-window-frame-border-radius: var(--radius-lg, 0.75rem);
+    --ui-window-frame-shadow: var(--shadow-xl, var(--fl-shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1)));
     --ui-window-frame-titlebar-height: 2.5rem;
     --ui-window-frame-resize-handle-size: 8px;
     --ui-window-frame-min-width: 200px;