@foldjs/svelte 0.2.0 → 0.3.1

package/README.md

@@ -3,17 +3,19 @@
 [![npm](https://img.shields.io/npm/v/foldjs?color=5b4bff)](https://www.npmjs.com/package/foldjs)
 [![gzip size](https://img.shields.io/bundlejs/size/foldjs?label=gzip)](https://bundlejs.com/?q=foldjs)
 [![license](https://img.shields.io/npm/l/foldjs)](LICENSE)
-[![demo](https://img.shields.io/badge/demo-live-5b4bff)](https://christophe77.github.io/foldjs/)
+[![demo](https://img.shields.io/badge/demo-live-5b4bff)](https://christophe77.github.io/fold.js/)
 
 **fold.js is an open-source JavaScript library that makes web apps work properly on foldable phones** such as the Samsung Galaxy Z Fold, Google Pixel Fold, Honor Magic V or Microsoft Surface Duo. It detects the hinge and the device posture (flat, book, tabletop), and gives you two-pane layouts that never put content under the hinge. It works with React, Vue, Svelte, Solid, Angular, Astro or plain HTML, weighs about 2 kB, and ships with a built-in foldable simulator so you can build without owning a device.
 
-### [▶ Try the live demo](https://christophe77.github.io/foldjs/) (works on desktop: the simulator is built in) · [See an existing site fixed in one line](https://christophe77.github.io/foldjs/legacy.html)
+> 📊 **New study:** [94% of popular websites split a button across a foldable's hinge](https://christophe77.github.io/fold.js/study.html) (79 sites audited on a Galaxy Z Fold, including Google, Amazon and Facebook, plus a run at the leaked iPhone Fold size: 88%).
+
+### [▶ Try the live demo](https://christophe77.github.io/fold.js/) (works on desktop: the simulator is built in) · [See an existing site fixed in one line](https://christophe77.github.io/fold.js/legacy.html)
 
 ```bash
 npx foldjs audit https://your-site.com   # how foldable-ready is your site? Score out of 100 + HTML report
 ```
 
-![fold.js demo switching a web app between flat, book and tabletop postures on a simulated foldable phone](https://raw.githubusercontent.com/christophe77/foldjs/main/docs/demo.gif)
+![fold.js demo: npx foldjs audit scores a mobile site 83/100, the HTML report outlines elements under the hinge, foldjs/auto fixes the site to 100/100, then a fold.js app switches between book and tabletop postures](https://raw.githubusercontent.com/christophe77/fold.js/main/docs/demo.gif)
 
 ## Why fold.js?
 
@@ -158,31 +160,33 @@ The panel also shows a live **foldable score** and outlines every element under
 ## Audit any website: `npx foldjs audit`
 
 ```bash
-npx foldjs audit https://your-site.com
+npx foldjs audit https://christophe77.github.io/fold.js/legacy.html
 ```
 
 ```
-  64  Samsung Galaxy Z Fold · book      2 critical, 6 warnings
+  70  Samsung Galaxy Z Fold · book      2 critical, 6 warnings
   94  Samsung Galaxy Z Fold · tabletop  0 critical, 2 warnings
-  67  Google Pixel Fold · book          3 critical, 5 warnings
-  88  Google Pixel Fold · tabletop      2 critical, 0 warnings
+  70  Google Pixel Fold · book          2 critical, 6 warnings
+  97  Google Pixel Fold · tabletop      0 critical, 1 warnings
 
   Top issues
-  ● Form field is split by the hinge #searchInput
-  ● Button is split by the hinge header > button.cta
+  ● Button is split by the hinge #book
+  ● Link is split by the hinge nav.bottom-nav > a:nth-of-type(3)
+  ● Text crosses the hinge main > article > p:nth-of-type(1)
 
-  Foldable score: 78/100
+  Foldable score: 83/100
   Report: ./foldjs-report/report.html
 ```
 
-It opens the page in headless Chrome at the real inner-screen sizes of the Samsung Galaxy Z Fold and Google Pixel Fold, in book and tabletop postures, and lists every element under the hinge. The HTML report shows annotated screenshots and a fix for each issue, plus a badge for your README: [![foldable-ready](https://img.shields.io/badge/foldable--ready-100%2F100-brightgreen)](https://github.com/christophe77/foldjs)
+It opens the page in headless Chrome at the real inner-screen sizes of the Samsung Galaxy Z Fold and Google Pixel Fold, in book and tabletop postures, and lists every element under the hinge. The HTML report shows annotated screenshots and a fix for each issue, plus a badge for your README: [![foldable-ready](https://img.shields.io/badge/foldable--ready-100%2F100-brightgreen)](https://github.com/christophe77/fold.js)
 
 | Option | Default | |
 |---|---|---|
-| `--device` | `all` | `galaxy-z-fold`, `pixel-fold` or `all` |
+| `--device` | `all` | `galaxy-z-fold`, `pixel-fold`, `iphone-fold` or `all`. `iphone-fold` uses leaked specs (904×640 CSS px, iPhone user agent) and is not part of `all`. |
 | `--posture` | `all` | `book`, `tabletop` or `all` |
 | `--out` | `foldjs-report` | Report folder (`report.html` + `report.json`) |
 | `--min-score` | | Exit with code 1 below this score, for CI |
+| `--dismiss-consent` | | Close cookie banners (rejecting when possible) before the audit |
 | `--json` | | Print the result as JSON |
 | `--browser` | auto | Chrome, Edge or Chromium path (or `CHROME_PATH`). No browser is downloaded. |
 
@@ -215,7 +219,22 @@ On a foldable (and in the simulator), it applies safe, reversible fixes as inlin
 | Any element is pushed off the hinge (titles, call-to-action buttons) | add `data-fold-avoid` | `avoid` |
 | An element and its children are never touched | add `data-fold-ignore` | |
 
-Turn a fix off with `autoFix({ bars: false })` or `<script src="…/auto.global.js" data-bars="false">`. [See it on a typical mobile site](https://christophe77.github.io/foldjs/legacy.html): the foldable score goes from 70 to 100 in book posture.
+Turn a fix off with `autoFix({ bars: false })` or `<script src="…/auto.global.js" data-bars="false">`. [See it on a typical mobile site](https://christophe77.github.io/fold.js/legacy.html): the foldable score goes from 70 to 100 in book posture.
+
+## iPhone Fold: the virtual fold
+
+Safari does not implement the foldable web APIs, so a page cannot know where the iPhone Fold folds. fold.js handles it anyway: when an Apple touch screen measures 600 to 720px on its short side (regular iPhones are under 450px, iPads at least 744px, so only an unfolded iPhone Fold fits) and is held in landscape, it splits the viewport at its center line. `<TwoPane>`, `use:twoPane`, `<fold-two-pane>` and the CSS layer then show list and detail side by side, like on an iPad. In portrait, nothing changes.
+
+It is on by default and only affects that case. `getFold().virtual` tells you when it is active. Change it with `configure()`:
+
+```js
+import { configure } from "foldjs"; // also exported by every adapter
+configure({ virtualFold: "auto" }); // default: unfolded iPhone Fold only
+configure({ virtualFold: true });   // any landscape screen at least 600px tall (tablets, desktop testing)
+configure({ virtualFold: false });  // never
+```
+
+The iPhone Fold crease is reportedly much shallower than on earlier foldables, so content on the fold stays readable. The virtual fold is about using the wide inner screen well, not about hiding a gap. Preview it in the [demo](https://christophe77.github.io/fold.js/?virtual=1), and audit a site at the leaked iPhone Fold size with `npx foldjs audit <url> --device iphone-fold`.
 
 ## Core API
 
@@ -263,6 +282,9 @@ Use the `fold-two-pane` class from `foldjs/css`, or the `--fold-hinge-*` and `--
 ### Can I build for foldables without owning one?
 Yes. The built-in simulator (`<FoldDevtools />`, `<FoldDevtools>` in Vue, or `mountDevtools()` anywhere) fakes the segments and posture on any desktop browser. Chrome DevTools device emulation (Galaxy Z Fold, Surface Duo) also works with fold.js.
 
+### Does fold.js work on the iPhone Fold?
+Yes, with a virtual fold. Safari exposes no foldable API, so fold.js detects an unfolded iPhone Fold from its screen size and splits the viewport at its center in landscape. Two-pane layouts work out of the box; posture detection (book or tabletop angle) is not possible on iOS until WebKit ships the Device Posture and Viewport Segments APIs.
+
 ### Which devices and browsers are supported?
 Chrome and Edge on Android foldables (Samsung Galaxy Z Fold, Google Pixel Fold, Honor, Oppo, Vivo, Surface Duo) support the native APIs. On every other browser, including Samsung Internet, Firefox and Safari on iOS, fold.js falls back to a normal single-screen layout and the simulator still works.
 

package/dist/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  configure: () => import_foldjs2.configure,
   fold: () => fold,
   foldWhen: () => foldWhen,
   mountDevtools: () => import_devtools.mountDevtools,
@@ -56,6 +57,7 @@ function foldWhen(node, posture) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  configure,
   fold,
   foldWhen,
   mountDevtools,

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import { Readable } from 'svelte/store';
 import { FoldState, Posture, TwoPaneOptions } from 'foldjs';
-export { FoldState, Posture, Rect, Spanning, simulate } from 'foldjs';
+export { FoldState, Posture, Rect, Spanning, configure, simulate } from 'foldjs';
 export { mountDevtools } from 'foldjs/devtools';
 
 /** Live foldable state: `$fold.posture`, `$fold.hinge`… */

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Readable } from 'svelte/store';
 import { FoldState, Posture, TwoPaneOptions } from 'foldjs';
-export { FoldState, Posture, Rect, Spanning, simulate } from 'foldjs';
+export { FoldState, Posture, Rect, Spanning, configure, simulate } from 'foldjs';
 export { mountDevtools } from 'foldjs/devtools';
 
 /** Live foldable state: `$fold.posture`, `$fold.hinge`… */

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/index.ts
 import { readable } from "svelte/store";
 import { bindTwoPane, getFold, subscribe } from "foldjs";
-import { simulate } from "foldjs";
+import { configure, simulate } from "foldjs";
 import { mountDevtools } from "foldjs/devtools";
 var fold = readable(getFold(), (set) => {
   set(getFold());
@@ -27,6 +27,7 @@ function foldWhen(node, posture) {
   };
 }
 export {
+  configure,
   fold,
   foldWhen,
   mountDevtools,

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@foldjs/svelte",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Svelte store and actions for foldable phones: $fold, use:twoPane, use:foldWhen and a built-in foldable simulator. Works with SvelteKit.",
   "license": "MIT",
   "author": "christophe77",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/christophe77/foldjs.git",
+    "url": "git+https://github.com/christophe77/fold.js.git",
     "directory": "packages/svelte"
   },
-  "homepage": "https://christophe77.github.io/foldjs/",
-  "bugs": "https://github.com/christophe77/foldjs/issues",
+  "homepage": "https://christophe77.github.io/fold.js/",
+  "bugs": "https://github.com/christophe77/fold.js/issues",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -48,10 +48,11 @@
     "responsive-design",
     "layout",
     "tabletop-mode",
-    "foldjs"
+    "foldjs",
+    "iphone-fold"
   ],
   "peerDependencies": {
-    "foldjs": "^0.2.0",
+    "foldjs": "^0.3.0",
     "svelte": ">=4"
   },
   "scripts": {