@djangocfg/ui-core 2.1.608 → 2.1.610

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.608",
+  "version": "2.1.610",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -133,8 +133,8 @@
     "check:docs": "node scripts/check-docs.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.608",
-    "@djangocfg/i18n": "^2.1.608",
+    "@djangocfg/api": "^2.1.610",
+    "@djangocfg/i18n": "^2.1.610",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -210,10 +210,10 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.608",
-    "@djangocfg/eslint-config": "^2.1.608",
-    "@djangocfg/i18n": "^2.1.608",
-    "@djangocfg/typescript-config": "^2.1.608",
+    "@djangocfg/api": "^2.1.610",
+    "@djangocfg/eslint-config": "^2.1.610",
+    "@djangocfg/i18n": "^2.1.610",
+    "@djangocfg/typescript-config": "^2.1.610",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",

package/src/components/navigation/sidebar/sidebar.tsx

@@ -131,7 +131,7 @@ const SidebarProvider = React.forwardRef<
               } as React.CSSProperties
             }
             className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[&_[data-variant=inset]]:bg-sidebar",
+              "group/sidebar-wrapper flex min-h-[var(--app-height,100svh)] w-full has-[&_[data-variant=inset]]:bg-sidebar",
               className
             )}
             ref={ref}
@@ -262,7 +262,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex",
+            "fixed inset-y-0 z-10 hidden h-[var(--app-height,100svh)] transition-[left,right,width] duration-200 ease-linear md:flex",
             side === "left"
               ? state === "collapsed" && collapsible === "offcanvas"
                 ? "left-[calc(var(--sidebar-width)*-1)]"

package/src/hooks/media/appHeight.ts

@@ -0,0 +1,69 @@
+/**
+ * `--app-height`: the real height of the app viewport, kept on `<html>`.
+ *
+ * Why it is measured: in an installed iOS app with `viewport-fit=cover` + a translucent status bar, WebKit reports
+ * `100%`, `100svh` and `100dvh` as the screen height MINUS the top inset, so a shell sized from them stops short and
+ * leaves a dead band at the bottom (and `overflow: hidden` clips the rest). `100lvh` and `window.innerHeight` are not
+ * always right either, across iOS versions. So in an installed mode we take the largest of the candidates, capped at
+ * the physical screen, and publish it as `--app-height`. In a browser tab the property is removed and the CSS default
+ * (`100dvh`, see base.css) applies. The shell paints under the status bar and pads by `--safe-top` itself.
+ */
+
+import { detectDisplayMode, isInstalledMode, subscribeDisplayMode } from './displayMode';
+
+const PROP = '--app-height';
+
+function probeHeight(unit: 'lvh' | 'dvh'): number {
+  if (typeof CSS !== 'undefined' && CSS.supports && !CSS.supports('height', `100${unit}`)) return 0;
+  const el = document.createElement('div');
+  el.style.cssText = `position:fixed;top:0;left:0;width:0;height:100${unit};visibility:hidden;pointer-events:none`;
+  document.body.appendChild(el);
+  const h = el.getBoundingClientRect().height;
+  el.remove();
+  return h;
+}
+
+/** Largest plausible app height in px, or 0 when nothing could be measured. */
+export function measureAppHeight(): number {
+  if (typeof document === 'undefined' || !document.body) return 0;
+  const screenMax = Math.max(window.screen?.height || 0, window.screen?.width || 0);
+  const candidates = [probeHeight('lvh'), probeHeight('dvh'), window.innerHeight].filter((n) => n > 0);
+  if (!candidates.length) return 0;
+  const best = Math.max(...candidates);
+  return screenMax > 0 ? Math.min(best, screenMax) : best;
+}
+
+/** Keeps `--app-height` in step with the installed viewport. Returns a cleanup. */
+export function syncAppHeight(): () => void {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return () => {};
+  const root = document.documentElement;
+  const timers: number[] = [];
+
+  const apply = () => {
+    if (!isInstalledMode(detectDisplayMode())) {
+      root.style.removeProperty(PROP);
+      return;
+    }
+    const h = measureAppHeight();
+    if (h > 0) root.style.setProperty(PROP, `${Math.round(h)}px`);
+  };
+  // iOS reports the new size a beat after `orientationchange`; re-measure once it settled.
+  const applyLater = () => {
+    apply();
+    timers.push(window.setTimeout(apply, 120), window.setTimeout(apply, 400));
+  };
+
+  apply();
+  window.addEventListener('resize', apply);
+  window.addEventListener('orientationchange', applyLater);
+  window.addEventListener('pageshow', apply);
+  const unsubscribe = subscribeDisplayMode(apply);
+  return () => {
+    window.removeEventListener('resize', apply);
+    window.removeEventListener('orientationchange', applyLater);
+    window.removeEventListener('pageshow', apply);
+    unsubscribe();
+    timers.forEach((t) => window.clearTimeout(t));
+    root.style.removeProperty(PROP);
+  };
+}

package/src/hooks/media/index.ts

@@ -7,4 +7,5 @@ export { useIsTouch } from './useIsTouch';
 export { useDisplayMode, useIsPwa } from './useDisplayMode';
 export { detectDisplayMode, syncDisplayModeAttribute } from './displayMode';
 export type { DisplayMode } from './displayMode';
+export { syncAppHeight, measureAppHeight } from './appHeight';
 export { useBlockGestureZoom } from './useBlockGestureZoom';

package/src/providers/UiProviders.tsx

@@ -7,6 +7,7 @@ import { TooltipProvider } from '../components/overlay/tooltip';
 import { Toaster } from '../components/feedback/sonner';
 import { Boundary, type BoundaryProps } from '../components/boundary';
 import { syncDisplayModeAttribute } from '../hooks/media/displayMode';
+import { syncAppHeight } from '../hooks/media/appHeight';
 import { installChunkReloadListeners } from '../lib/chunk-reload';
 import { DialogProvider } from '../lib/dialog-service/DialogProvider';
 
@@ -88,6 +89,8 @@ export function UiProviders({
   React.useEffect(() => installChunkReloadListeners(), []);
   // `<html data-display-mode="browser|standalone|...">` for CSS (see styles/css/base.css tokens).
   React.useEffect(() => syncDisplayModeAttribute(), []);
+  // `--app-height` measured in an installed app (iOS standalone reports dvh/100% short; see hooks/media/appHeight).
+  React.useEffect(() => syncAppHeight(), []);
   // No SSR-skip on purpose: any nested library component that renders
   // `<Tooltip>` on its first paint expects to find `<TooltipProvider>`
   // already in the tree. Skipping the provider during SSR caused

package/src/styles/css/base.css

@@ -145,6 +145,15 @@ html {
   }
 }
 
+/* Installed app, first paint: iOS reports 100dvh short by the top inset with viewport-fit=cover, 100lvh is the full
+ * screen. `syncAppHeight()` (UiProviders) then replaces this with the measured px value on <html>. */
+@supports (height: 100lvh) {
+  @media (display-mode: standalone), (display-mode: fullscreen) {
+    :root { --app-height: 100lvh; }
+  }
+  :root:is([data-display-mode="standalone"], [data-display-mode="fullscreen"]) { --app-height: 100lvh; }
+}
+
 /* Installed app (any display mode the display-mode hook treats as a PWA): behave like a native shell.
  * `data-display-mode` is set on <html> by UiProviders. */
 :root:is([data-display-mode="standalone"], [data-display-mode="fullscreen"], [data-display-mode="minimal-ui"], [data-display-mode="window-controls-overlay"]),
@@ -158,7 +167,8 @@ html {
  * attribute and stay scrollable. */
 :root[data-private-shell]:is([data-display-mode="standalone"], [data-display-mode="fullscreen"], [data-display-mode="minimal-ui"], [data-display-mode="window-controls-overlay"]),
 :root[data-private-shell]:is([data-display-mode="standalone"], [data-display-mode="fullscreen"], [data-display-mode="minimal-ui"], [data-display-mode="window-controls-overlay"]) body {
-  height: 100%;
+  /* Not `100%`: in an installed iOS app with viewport-fit=cover it resolves short by the top inset. */
+  height: var(--app-height, 100dvh);
   overflow: hidden;
 }