@base44-preview/vite-plugin 1.0.24-pr.93.2320a2c → 1.0.24-pr.93.c15f29a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/injections/keyboard-viewport-bridge.js +19 -41
  2. package/dist/injections/keyboard-viewport-bridge.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/injections/keyboard-viewport-bridge.ts +19 -44
package/dist/injections/keyboard-viewport-bridge.js CHANGED
@@ -1,36 +1,19 @@
1
- /// <reference types="vite/client" />
2
- // keyboard-viewport-bridge — applies the parent-measured, keyboard-adjusted
3
- // visible height inside the preview iframe.
4
- //
5
- // The on-screen keyboard shrinks the builder's (top-level) visual viewport but
6
- // NOT the preview iframe's, so the app rendered inside the iframe can't tell it
7
- // has less room and leaves a blank gap above the keyboard (bottom-anchored
8
- // inputs end up behind it). The published app doesn't hit this — it's the
9
- // top-level document, so the browser reflows it for the keyboard.
10
- //
11
- // The builder is the only side that sees the keyboard, so it measures the
12
- // visible height and posts { type: "keyboard-viewport", height }. Here we cap
13
- // the app's full-height roots to that height while the keyboard is open, so a
14
- // flex column reflows its content (and its bottom input) above the keyboard.
15
- //
16
- // Inert until the parent posts; only runs inside the preview iframe.
1
+ // The keyboard shrinks the builder's top-level visual viewport, not the preview
2
+ // iframe's, so the app inside can't reflow above it and leaves a blank gap. The
3
+ // builder posts the visible height here; while the keyboard is open (height > 0)
4
+ // we cap the app's full-height roots to it so the layout fits above it, 0 releases.
17
5
  if (window.self !== window.top) {
18
- const MESSAGE_TYPE = "keyboard-viewport";
19
6
  const HEIGHT_VAR = "--base44-keyboard-viewport-height";
20
7
  const STYLE_ID = "base44-keyboard-viewport-style";
21
- // Treat the keyboard as open only when the reported height is meaningfully
22
- // below the layout height — filters out no-op / rounding resizes.
23
- const KEYBOARD_OPEN_MIN_DELTA_PX = 100;
24
- const ensureStyle = () => {
8
+ function ensureStyle() {
25
9
  if (document.getElementById(STYLE_ID))
26
10
  return;
27
11
  const style = document.createElement("style");
28
12
  style.id = STYLE_ID;
29
- // Active only while HEIGHT_VAR is set on <html> (keyboard open). Cap the
30
- // document, the mount node, and the app's full-height wrappers to the
31
- // visible height. `code_generator` guarantees the app root uses
32
- // `min-h-screen`/`h-screen`, so constraining those (plus 100vh/100dvh
33
- // inline styles) makes the layout fit above the keyboard.
13
+ // Applies only while HEIGHT_VAR is set on <html>. code_generator gives app roots
14
+ // min-h-screen/h-screen, so capping those (+ 100vh/100dvh, #root, the document).
15
+ // !important is required to override inline 100vh/100dvh styles and to win in
16
+ // apps that run Tailwind in important mode — we're overriding arbitrary user CSS.
34
17
  style.textContent = [
35
18
  `html[style*="${HEIGHT_VAR}"], html[style*="${HEIGHT_VAR}"] body {`,
36
19
  ` height: var(${HEIGHT_VAR}) !important;`,
@@ -49,24 +32,19 @@ if (window.self !== window.top) {
49
32
  `}`,
50
33
  ].join("\n");
51
34
  document.head.appendChild(style);
52
- };
53
- const apply = (height) => {
54
- const root = document.documentElement;
55
- const keyboardOpen = Number.isFinite(height) &&
56
- height > 0 &&
57
- window.innerHeight - height > KEYBOARD_OPEN_MIN_DELTA_PX;
58
- if (!keyboardOpen) {
59
- // Keyboard closed (or negligible delta) — release the cap so the app
60
- // returns to its natural full-height layout.
61
- root.style.removeProperty(HEIGHT_VAR);
62
- return;
35
+ }
36
+ function apply(height) {
37
+ if (height > 0) {
38
+ ensureStyle();
39
+ document.documentElement.style.setProperty(HEIGHT_VAR, `${Math.round(height)}px`);
40
+ }
41
+ else {
42
+ document.documentElement.style.removeProperty(HEIGHT_VAR);
63
43
  }
64
- ensureStyle();
65
- root.style.setProperty(HEIGHT_VAR, `${Math.round(height)}px`);
66
- };
44
+ }
67
45
  window.addEventListener("message", (event) => {
68
46
  const data = event.data;
69
- if (!data || data.type !== MESSAGE_TYPE || typeof data.height !== "number")
47
+ if (!data || data.type !== "keyboard-viewport" || typeof data.height !== "number")
70
48
  return;
71
49
  apply(data.height);
72
50
  });
package/dist/injections/keyboard-viewport-bridge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"keyboard-viewport-bridge.js","sourceRoot":"","sources":["../../src/injections/keyboard-viewport-bridge.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,4EAA4E;AAC5E,4CAA4C;AAC5C,EAAE;AACF,+EAA+E;AAC/E,gFAAgF;AAChF,2EAA2E;AAC3E,0EAA0E;AAC1E,kEAAkE;AAClE,EAAE;AACF,0EAA0E;AAC1E,8EAA8E;AAC9E,8EAA8E;AAC9E,6EAA6E;AAC7E,EAAE;AACF,qEAAqE;AAErE,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,GAAG,EAAE,CAAC;IAC/B,MAAM,YAAY,GAAG,mBAAmB,CAAC;IACzC,MAAM,UAAU,GAAG,mCAAmC,CAAC;IACvD,MAAM,QAAQ,GAAG,gCAAgC,CAAC;IAClD,2EAA2E;IAC3E,kEAAkE;IAClE,MAAM,0BAA0B,GAAG,GAAG,CAAC;IAEvC,MAAM,WAAW,GAAG,GAAS,EAAE;QAC7B,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;YAAE,OAAO;QAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;QACpB,yEAAyE;QACzE,sEAAsE;QACtE,gEAAgE;QAChE,sEAAsE;QACtE,0DAA0D;QAC1D,KAAK,CAAC,WAAW,GAAG;YAClB,gBAAgB,UAAU,oBAAoB,UAAU,WAAW;YACnE,iBAAiB,UAAU,eAAe;YAC1C,qBAAqB,UAAU,eAAe;YAC9C,GAAG;YACH,gBAAgB,UAAU,YAAY;YACtC,iBAAiB,UAAU,eAAe;YAC1C,qBAAqB,UAAU,eAAe;YAC9C,qBAAqB;YACrB,GAAG;YACH,gBAAgB,UAAU,mCAAmC;YAC7D,gBAAgB,UAAU,sBAAsB;YAChD,gBAAgB,UAAU,wBAAwB;YAClD,iBAAiB,UAAU,eAAe;YAC1C,qBAAqB,UAAU,eAAe;YAC9C,GAAG;SACJ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,CAAC,MAAc,EAAQ,EAAE;QACrC,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,MAAM,YAAY,GAChB,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;YACvB,MAAM,GAAG,CAAC;YACV,MAAM,CAAC,WAAW,GAAG,MAAM,GAAG,0BAA0B,CAAC;QAC3D,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,qEAAqE;YACrE,6CAA6C;YAC7C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;YACtC,OAAO;QACT,CAAC;QACD,WAAW,EAAE,CAAC;QACd,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAmB,EAAE,EAAE;QACzD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAiD,CAAC;QACrE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ;YAAE,OAAO;QACnF,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;AACL,CAAC"}
1
+ {"version":3,"file":"keyboard-viewport-bridge.js","sourceRoot":"","sources":["../../src/injections/keyboard-viewport-bridge.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,gFAAgF;AAChF,iFAAiF;AACjF,oFAAoF;AACpF,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,GAAG,EAAE,CAAC;IAC/B,MAAM,UAAU,GAAG,mCAAmC,CAAC;IACvD,MAAM,QAAQ,GAAG,gCAAgC,CAAC;IAElD,SAAS,WAAW;QAClB,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;YAAE,OAAO;QAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;QACpB,iFAAiF;QACjF,iFAAiF;QACjF,8EAA8E;QAC9E,kFAAkF;QAClF,KAAK,CAAC,WAAW,GAAG;YAClB,gBAAgB,UAAU,oBAAoB,UAAU,WAAW;YACnE,iBAAiB,UAAU,eAAe;YAC1C,qBAAqB,UAAU,eAAe;YAC9C,GAAG;YACH,gBAAgB,UAAU,YAAY;YACtC,iBAAiB,UAAU,eAAe;YAC1C,qBAAqB,UAAU,eAAe;YAC9C,qBAAqB;YACrB,GAAG;YACH,gBAAgB,UAAU,mCAAmC;YAC7D,gBAAgB,UAAU,sBAAsB;YAChD,gBAAgB,UAAU,wBAAwB;YAClD,iBAAiB,UAAU,eAAe;YAC1C,qBAAqB,UAAU,eAAe;YAC9C,GAAG;SACJ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,SAAS,KAAK,CAAC,MAAc;QAC3B,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;YACf,WAAW,EAAE,CAAC;YACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACpF,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC;IAED,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAmB,EAAE,EAAE;QACzD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,mBAAmB,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ;YAAE,OAAO;QAC1F,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;AACL,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@base44-preview/vite-plugin",
3
- "version": "1.0.24-pr.93.2320a2c",
3
+ "version": "1.0.24-pr.93.c15f29a",
4
4
  "description": "The Vite plugin for base44 based applications",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/src/injections/keyboard-viewport-bridge.ts CHANGED
@@ -1,37 +1,19 @@
1
- /// <reference types="vite/client" />
2
- // keyboard-viewport-bridge — applies the parent-measured, keyboard-adjusted
3
- // visible height inside the preview iframe.
4
- //
5
- // The on-screen keyboard shrinks the builder's (top-level) visual viewport but
6
- // NOT the preview iframe's, so the app rendered inside the iframe can't tell it
7
- // has less room and leaves a blank gap above the keyboard (bottom-anchored
8
- // inputs end up behind it). The published app doesn't hit this — it's the
9
- // top-level document, so the browser reflows it for the keyboard.
10
- //
11
- // The builder is the only side that sees the keyboard, so it measures the
12
- // visible height and posts { type: "keyboard-viewport", height }. Here we cap
13
- // the app's full-height roots to that height while the keyboard is open, so a
14
- // flex column reflows its content (and its bottom input) above the keyboard.
15
- //
16
- // Inert until the parent posts; only runs inside the preview iframe.
17
-
1
+ // The keyboard shrinks the builder's top-level visual viewport, not the preview
2
+ // iframe's, so the app inside can't reflow above it and leaves a blank gap. The
3
+ // builder posts the visible height here; while the keyboard is open (height > 0)
4
+ // we cap the app's full-height roots to it so the layout fits above it, 0 releases.
18
5
  if (window.self !== window.top) {
19
- const MESSAGE_TYPE = "keyboard-viewport";
20
6
  const HEIGHT_VAR = "--base44-keyboard-viewport-height";
21
7
  const STYLE_ID = "base44-keyboard-viewport-style";
22
- // Treat the keyboard as open only when the reported height is meaningfully
23
- // below the layout height — filters out no-op / rounding resizes.
24
- const KEYBOARD_OPEN_MIN_DELTA_PX = 100;
25
8
 
26
- const ensureStyle = (): void => {
9
+ function ensureStyle() {
27
10
  if (document.getElementById(STYLE_ID)) return;
28
11
  const style = document.createElement("style");
29
12
  style.id = STYLE_ID;
30
- // Active only while HEIGHT_VAR is set on <html> (keyboard open). Cap the
31
- // document, the mount node, and the app's full-height wrappers to the
32
- // visible height. `code_generator` guarantees the app root uses
33
- // `min-h-screen`/`h-screen`, so constraining those (plus 100vh/100dvh
34
- // inline styles) makes the layout fit above the keyboard.
13
+ // Applies only while HEIGHT_VAR is set on <html>. code_generator gives app roots
14
+ // min-h-screen/h-screen, so capping those (+ 100vh/100dvh, #root, the document).
15
+ // !important is required to override inline 100vh/100dvh styles and to win in
16
+ // apps that run Tailwind in important mode — we're overriding arbitrary user CSS.
35
17
  style.textContent = [
36
18
  `html[style*="${HEIGHT_VAR}"], html[style*="${HEIGHT_VAR}"] body {`,
37
19
  ` height: var(${HEIGHT_VAR}) !important;`,
@@ -50,27 +32,20 @@ if (window.self !== window.top) {
50
32
  `}`,
51
33
  ].join("\n");
52
34
  document.head.appendChild(style);
53
- };
35
+ }
54
36
 
55
- const apply = (height: number): void => {
56
- const root = document.documentElement;
57
- const keyboardOpen =
58
- Number.isFinite(height) &&
59
- height > 0 &&
60
- window.innerHeight - height > KEYBOARD_OPEN_MIN_DELTA_PX;
61
- if (!keyboardOpen) {
62
- // Keyboard closed (or negligible delta) — release the cap so the app
63
- // returns to its natural full-height layout.
64
- root.style.removeProperty(HEIGHT_VAR);
65
- return;
37
+ function apply(height: number) {
38
+ if (height > 0) {
39
+ ensureStyle();
40
+ document.documentElement.style.setProperty(HEIGHT_VAR, `${Math.round(height)}px`);
41
+ } else {
42
+ document.documentElement.style.removeProperty(HEIGHT_VAR);
66
43
  }
67
- ensureStyle();
68
- root.style.setProperty(HEIGHT_VAR, `${Math.round(height)}px`);
69
- };
44
+ }
70
45
 
71
46
  window.addEventListener("message", (event: MessageEvent) => {
72
- const data = event.data as { type?: string; height?: number } | null;
73
- if (!data || data.type !== MESSAGE_TYPE || typeof data.height !== "number") return;
47
+ const data = event.data;
48
+ if (!data || data.type !== "keyboard-viewport" || typeof data.height !== "number") return;
74
49
  apply(data.height);
75
50
  });
76
51
  }