@foldjs/svelte 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 fold.js contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,191 @@
-# Temporary Holding Version
+# fold.js
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![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)
+
+**Make any web app foldable-ready.** Hinge-aware layouts for foldable phones — in React, Vue, Svelte, Solid, Angular… or plain HTML.
+
+### [▶ Live demo](https://christophe77.github.io/foldjs/) — no foldable needed, the simulator is built in.
+
+![fold.js switching between flat, book and tabletop postures](https://raw.githubusercontent.com/christophe77/foldjs/main/docs/demo.gif)
+
+- 🪟 **Two-pane layouts** that put each pane on its own side of the hinge
+- 📐 **Posture detection**: `flat`, `book`, `tabletop`, `folded`
+- 🧪 **Built-in foldable simulator** — no device, no DevTools setup
+- 🧩 **Works everywhere**: framework-agnostic core, thin adapters, Web Components, CSS-only layer
+- 🪶 **~2 kB** min+gzip core, zero dependencies, SSR-safe, TypeScript
+
+Built on the web standards shipping in Chromium: [CSS Viewport Segments](https://developer.mozilla.org/en-US/docs/Web/API/Viewport_segments_API) and the [Device Posture API](https://developer.mozilla.org/en-US/docs/Web/API/Device_Posture_API).
+
+---
+
+## Install
+
+```bash
+npm i foldjs            # core, CSS, Web Components, simulator
+npm i @foldjs/react     # or @foldjs/vue, @foldjs/svelte, @foldjs/solid
+```
+
+## React
+
+```tsx
+import { TwoPane, FoldWhen, FoldDevtools, useFold } from "@foldjs/react";
+
+export function Inbox() {
+  const { posture, hinge } = useFold();
+
+  return (
+    <>
+      <TwoPane
+        primary={<MailList />}
+        secondary={<MailDetail />}
+        fallback="stack" // single screen: "stack" | "primary" | "secondary"
+      />
+      <FoldWhen posture="tabletop">
+        <PlayerControls />
+      </FoldWhen>
+      {import.meta.env.DEV && <FoldDevtools initial="book" />}
+    </>
+  );
+}
+```
+
+## Vue
+
+```vue
+<script setup>
+import { TwoPane, FoldWhen, useFold } from "@foldjs/vue";
+const fold = useFold(); // fold.value.posture
+</script>
+
+<template>
+  <TwoPane fallback="stack">
+    <template #primary><MailList /></template>
+    <template #secondary><MailDetail /></template>
+  </TwoPane>
+</template>
+```
+
+## Svelte
+
+```svelte
+<script>
+  import { fold, twoPane, foldWhen } from "@foldjs/svelte";
+</script>
+
+<div use:twoPane={{ fallback: "stack" }}>
+  <div data-pane="primary"><MailList /></div>
+  <div data-pane="secondary"><MailDetail /></div>
+</div>
+
+<p>Posture: {$fold.posture}</p>
+<div use:foldWhen={"tabletop"}>Tabletop only</div>
+```
+
+## Solid
+
+```tsx
+import { createFold, twoPane } from "@foldjs/solid";
+
+const fold = createFold(); // fold().posture
+
+<div use:twoPane={{ fallback: "stack" }}>
+  <div data-pane="primary"><MailList /></div>
+  <div data-pane="secondary"><MailDetail /></div>
+</div>
+```
+
+## Web Components (Angular, Lit, Astro, htmx, plain HTML…)
+
+```html
+<script type="module">import "foldjs/elements";</script>
+
+<fold-two-pane fallback="stack">
+  <div slot="primary">List</div>
+  <div slot="secondary">Detail</div>
+</fold-two-pane>
+
+<fold-when posture="tabletop book">Only on a split screen</fold-when>
+```
+
+## CSS only
+
+```js
+import "foldjs/css";
+import { init } from "foldjs";
+init(); // optional: enables the simulator and non-native browsers
+```
+
+```html
+<div class="fold-two-pane">
+  <div class="fold-primary">List</div>
+  <div class="fold-secondary">Detail</div>
+</div>
+<div class="fold-only-tabletop">Tabletop only</div>
+```
+
+Variables available on `<html>`: `--fold-hinge-x|y|width|height`, `--fold-segment-0-width|height`, `--fold-segment-1-width|height`.
+Attributes: `data-fold-posture`, `data-fold-spanning`.
+
+## The simulator
+
+```js
+import { mountDevtools } from "foldjs/devtools";
+mountDevtools({ initial: "book", position: "bottom-right", hingeSize: 24 });
+```
+
+Switch between **Device / Flat / Book / Tabletop** from the floating panel, or press **Alt + Shift + F**.
+Or drive it from code (tests, demos, Storybook): `simulate({ posture: "tabletop" })`, `simulate(null)`.
+
+## Core API
+
+```ts
+import { getFold, subscribe, simulate, twoPaneLayout, bindTwoPane } from "foldjs";
+
+getFold();
+// {
+//   posture: "book",                 // "flat" | "book" | "tabletop" | "folded"
+//   spanning: "columns",             // "none" | "columns" | "rows"
+//   isSpanned: true,
+//   segments: [{ x, y, width, height }, …],
+//   hinge: { x, y, width, height },
+//   devicePosture: "folded",         // raw Device Posture API value
+//   viewport: { width, height },
+//   simulated: false
+// }
+
+const off = subscribe((state) => console.log(state.posture));
+```
+
+Writing an adapter for another framework? `subscribe` + `getFold` are all you need; `twoPaneLayout(state)` returns the styles every built-in adapter uses.
+
+## Browser support
+
+| | Native | With `foldjs` |
+|---|---|---|
+| Chrome / Edge on Android foldables | ✅ Viewport Segments + Device Posture | ✅ |
+| Samsung Internet, other browsers | — | ✅ Single-screen fallback, simulator |
+| Desktop | — | ✅ Simulator |
+
+## Repository
+
+```
+packages/core     foldjs           core, CSS, Web Components, simulator
+packages/react    @foldjs/react
+packages/vue      @foldjs/vue
+packages/svelte   @foldjs/svelte
+packages/solid    @foldjs/solid
+apps/demo         demo site (Vite + React)
+```
+
+```bash
+npm install
+npm run dev        # demo on http://localhost:5173
+npm test
+npm run build
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  fold: () => fold,
+  foldWhen: () => foldWhen,
+  mountDevtools: () => import_devtools.mountDevtools,
+  simulate: () => import_foldjs2.simulate,
+  twoPane: () => twoPane
+});
+module.exports = __toCommonJS(index_exports);
+var import_store = require("svelte/store");
+var import_foldjs = require("foldjs");
+var import_foldjs2 = require("foldjs");
+var import_devtools = require("foldjs/devtools");
+var fold = (0, import_store.readable)((0, import_foldjs.getFold)(), (set) => {
+  set((0, import_foldjs.getFold)());
+  return (0, import_foldjs.subscribe)(set);
+});
+function twoPane(node, options = {}) {
+  return (0, import_foldjs.bindTwoPane)(node, options);
+}
+function foldWhen(node, posture) {
+  let wanted = posture;
+  const paint = () => {
+    const list = Array.isArray(wanted) ? wanted : [wanted];
+    node.hidden = !list.includes((0, import_foldjs.getFold)().posture);
+  };
+  const unsubscribe = (0, import_foldjs.subscribe)(paint);
+  paint();
+  return {
+    update(next) {
+      wanted = next;
+      paint();
+    },
+    destroy: unsubscribe
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  fold,
+  foldWhen,
+  mountDevtools,
+  simulate,
+  twoPane
+});

package/dist/index.d.cts

@@ -0,0 +1,24 @@
+import { Readable } from 'svelte/store';
+import { FoldState, Posture, TwoPaneOptions } from 'foldjs';
+export { FoldState, Posture, Rect, Spanning, simulate } from 'foldjs';
+export { mountDevtools } from 'foldjs/devtools';
+
+/** Live foldable state: `$fold.posture`, `$fold.hinge`… */
+declare const fold: Readable<FoldState>;
+/**
+ * <div use:twoPane={{ fallback: "stack" }}>
+ *   <div data-pane="primary">…</div>
+ *   <div data-pane="secondary">…</div>
+ * </div>
+ */
+declare function twoPane(node: HTMLElement, options?: TwoPaneOptions): {
+    update(next?: TwoPaneOptions): void;
+    destroy: () => void;
+};
+/** <div use:foldWhen={"tabletop"}>…</div> — hidden unless the posture matches. */
+declare function foldWhen(node: HTMLElement, posture: Posture | Posture[]): {
+    update(next: Posture | Posture[]): void;
+    destroy: () => void;
+};
+
+export { fold, foldWhen, twoPane };

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import { Readable } from 'svelte/store';
+import { FoldState, Posture, TwoPaneOptions } from 'foldjs';
+export { FoldState, Posture, Rect, Spanning, simulate } from 'foldjs';
+export { mountDevtools } from 'foldjs/devtools';
+
+/** Live foldable state: `$fold.posture`, `$fold.hinge`… */
+declare const fold: Readable<FoldState>;
+/**
+ * <div use:twoPane={{ fallback: "stack" }}>
+ *   <div data-pane="primary">…</div>
+ *   <div data-pane="secondary">…</div>
+ * </div>
+ */
+declare function twoPane(node: HTMLElement, options?: TwoPaneOptions): {
+    update(next?: TwoPaneOptions): void;
+    destroy: () => void;
+};
+/** <div use:foldWhen={"tabletop"}>…</div> — hidden unless the posture matches. */
+declare function foldWhen(node: HTMLElement, posture: Posture | Posture[]): {
+    update(next: Posture | Posture[]): void;
+    destroy: () => void;
+};
+
+export { fold, foldWhen, twoPane };

package/dist/index.js

@@ -0,0 +1,35 @@
+// src/index.ts
+import { readable } from "svelte/store";
+import { bindTwoPane, getFold, subscribe } from "foldjs";
+import { simulate } from "foldjs";
+import { mountDevtools } from "foldjs/devtools";
+var fold = readable(getFold(), (set) => {
+  set(getFold());
+  return subscribe(set);
+});
+function twoPane(node, options = {}) {
+  return bindTwoPane(node, options);
+}
+function foldWhen(node, posture) {
+  let wanted = posture;
+  const paint = () => {
+    const list = Array.isArray(wanted) ? wanted : [wanted];
+    node.hidden = !list.includes(getFold().posture);
+  };
+  const unsubscribe = subscribe(paint);
+  paint();
+  return {
+    update(next) {
+      wanted = next;
+      paint();
+    },
+    destroy: unsubscribe
+  };
+}
+export {
+  fold,
+  foldWhen,
+  mountDevtools,
+  simulate,
+  twoPane
+};

package/package.json

@@ -1,6 +1,45 @@
 {
   "name": "@foldjs/svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Svelte bindings for Fold.js: a `fold` store and `use:twoPane` / `use:foldWhen` actions.",
+  "license": "MIT",
+  "author": "christophe77",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/christophe77/foldjs.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://christophe77.github.io/foldjs/",
+  "bugs": "https://github.com/christophe77/foldjs/issues",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "foldable",
+    "svelte",
+    "dual-screen",
+    "hinge",
+    "foldjs"
+  ],
+  "peerDependencies": {
+    "foldjs": "^0.1.0",
+    "svelte": ">=4"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --external svelte --external foldjs",
+    "prepack": "node -e \"require('fs').copyFileSync('../../README.md','README.md')\""
+  }
+}