@zubra/runtime 5.6.0 → 5.8.0

package/dist/production/react.js

@@ -16,9 +16,29 @@
 //   works the same way.
 import * as React from 'react';
 import { serverContent } from './server.js';
+import { outletsOf } from './outlet.js';
+import { routeLinks } from './navigation.js';
+import './context.js';
+import { subscribe, read } from './bridge.js';
 
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 
+// `renderRow` serves `<zb-outlet name="row">`, `renderDetailPanel` serves `detail-panel`.
+const outletName = (key) => key.slice(6).replace(/[A-Z]/g, (letter, at) => (at ? '-' : '') + letter.toLowerCase());
+const isRenderer = (key, value) => key.length > 6 && key.startsWith('render') && /[A-Z]/.test(key[6]) && typeof value === 'function';
+// react-dom's createPortal, loaded when an element first has an outlet to fill: a page that
+// uses no outlets (or maps only `react` in an import map) never imports react-dom from here.
+let createPortal = null;
+const portals = () => (createPortal ? Promise.resolve() : import('react-dom').then((dom) => { createPortal = dom.createPortal; }));
+
+// A stable key per outlet, for its portal.
+const outletKeys = new WeakMap();
+let nextOutlet = 0;
+const outletKey = (outlet) => {
+  if (!outletKeys.has(outlet)) outletKeys.set(outlet, `zb-outlet-${++nextOutlet}`);
+  return outletKeys.get(outlet);
+};
+
 const clone = (value) => (value && typeof value === 'object' ? structuredClone(value) : value);
 
 /** `zb-star-rating` → `ZbStarRating`. */
@@ -56,14 +76,69 @@ export function wrap(Element) {
     const values = {};
     const listeners = {};
     const rest = {};
+    const renderers = {};
     for (const key of Object.keys(all)) {
       if (key === 'children') continue;
       const event = key.length > 2 && key.startsWith('on') ? key.slice(2).toLowerCase() : null;
       if (Object.hasOwn(props, key)) values[key] = all[key];
       else if (event && events.includes(event)) listeners[event] = all[key];
+      else if (isRenderer(key, all[key])) renderers[outletName(key)] = all[key];
       else rest[key] = all[key];
     }
 
+    // Outlets (experimental, outlet.js): `render<Name>` fills each `<zb-outlet name>` the element
+    // renders, through a portal, so what's rendered there is part of this React tree (context,
+    // state, events). `outlets` maps each claimed outlet to its current item.
+    const served = React.useRef(renderers);
+    served.current = renderers;
+    const [outlets, setOutlets] = React.useState(() => new Map());
+    useIsomorphicLayoutEffect(() => {
+      const node = element.current;
+      const claimed = new Set();
+      const owner = {
+        change: (outlet) => setOutlets((map) => new Map(map).set(outlet, outlet.item)),
+        disconnect: (outlet) => {
+          claimed.delete(outlet);
+          setOutlets((map) => {
+            const next = new Map(map);
+            next.delete(outlet);
+            return next;
+          });
+        },
+      };
+      const take = (outlets) => {
+        if (!outlets.length) return;
+        for (const outlet of outlets) {
+          outlet.owner = owner;
+          claimed.add(outlet);
+        }
+        const add = () => setOutlets((map) => {
+          const next = new Map(map);
+          for (const outlet of outlets) if (claimed.has(outlet)) next.set(outlet, outlet.item);
+          return next;
+        });
+        if (createPortal) add();
+        else portals().then(add);
+      };
+      const connected = (event) => {
+        if (!Object.hasOwn(served.current, event.outlet.name)) return;
+        event.claim(owner);
+        take([event.outlet]);
+      };
+      node.addEventListener('outletconnect', connected);
+      // Outlets the element rendered before this listener existed.
+      take(outletsOf(node).filter((outlet) => Object.hasOwn(served.current, outlet.name)));
+      return () => {
+        node.removeEventListener('outletconnect', connected);
+        for (const outlet of claimed) outlet.owner = null;
+      };
+    }, []);
+    const filled = [];
+    for (const [outlet, item] of outlets) {
+      const render = renderers[outlet.name];
+      if (render && createPortal) filled.push(createPortal(render(item), outlet, outletKey(outlet)));
+    }
+
     // Subscribe once per event; always call the latest handler.
     const handlers = React.useRef(listeners);
     handlers.current = listeners;
@@ -115,11 +190,70 @@ export function wrap(Element) {
     // @zubra/server's injectShadowRoots; this works without one.)
     if (React.Children.count(all.children) === 0) {
       const html = typeof window === 'undefined' ? serverContent(Element, { props: json ? JSON.parse(json) : {}, name: rest.name }) : '';
-      return React.createElement(tag, { ...host, dangerouslySetInnerHTML: { __html: html }, suppressHydrationWarning: true });
+      return React.createElement(React.Fragment, null,
+        React.createElement(tag, { ...host, dangerouslySetInnerHTML: { __html: html }, suppressHydrationWarning: true }), filled);
     }
-    return React.createElement(tag, host, all.children);
+    return React.createElement(React.Fragment, null, React.createElement(tag, host, all.children), filled);
   });
   Component.displayName = pascal(tag);
   Component.element = Element;
   return Component;
 }
+
+/**
+ * Route links inside Zubra components through the app's router while this component is mounted:
+ * `useRouteLinks(useNavigate())` (React Router), `useRouteLinks(useRouter().push)` (Next.js).
+ * The function can change between renders. Options as for `routeLinks` (`@zubra/runtime/navigation`).
+ */
+export function useRouteLinks(navigate, options) {
+  const latest = React.useRef(navigate);
+  latest.current = navigate;
+  React.useEffect(() => routeLinks((to, info) => latest.current(to, info), options), []);
+}
+
+/**
+ * Provide a Context Protocol value to every element inside: an app's theme, locale or current user,
+ * read by components with `inject(context)` (or Lit's `@consume`).
+ *
+ *   <ZubraContext context={theme} value={dark ? 'dark' : 'light'}>…</ZubraContext>
+ *
+ * `value` can also be a signal. It renders a `<zb-context>` element, which is `display: contents`.
+ */
+export function ZubraContext({ context, value, children }) {
+  const ref = React.useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    ref.current.context = context;
+    ref.current.value = value;
+  });
+  // React 19 sets these as properties when it creates the element, before the children are in
+  // the document, so they're answered on their first request; React 18 sets them in the effect,
+  // and the element's announcement makes the children ask again.
+  const early = legacy || typeof window === 'undefined' ? {} : { context, value };
+  return React.createElement('zb-context', { ...early, ref, style: { display: 'contents' } }, children);
+}
+
+/**
+ * Read a Zubra signal (or a function of signals) in a React component, re-rendering when it
+ * changes: a store shared with elements, a `computed`, a `@zubra/sync` field.
+ *
+ *   const items = useSignal(cart, { deep: true })   // write with cart.set(...) or cart.get().push(...)
+ *
+ * Built on `useSyncExternalStore`, so it's safe under concurrent rendering and on the server
+ * (where it reads the value once). With `deep: true` a mutation inside an array or object
+ * re-renders too; the value is the same object, so memoize on the returned value with care.
+ * Pass a stable source (module-level, or from `useMemo`): a new function each render
+ * re-subscribes each render.
+ */
+export function useSignal(source, { deep = false } = {}) {
+  const store = React.useMemo(() => {
+    let version = 0;
+    return {
+      subscribe: (notify) => subscribe(source, () => { version++; notify(); }, { deep }),
+      // Without `deep`, the value itself is the snapshot (React compares it with Object.is);
+      // with it, a counter that each notification moves, so a mutation counts as a change.
+      snapshot: deep ? () => version : () => read(source),
+    };
+  }, [source, deep]);
+  React.useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot);
+  return read(source);
+}

package/dist/production/testing.js

@@ -0,0 +1,154 @@
+// Generated by scripts/build-production.js from src/testing.js: the runtime without hot reloading or the DevTools hook. Do not edit.
+// Testing helpers: mount a Zubra component the way each framework's consumers do, so a library
+// author can run one test through plain HTML, React and Vue, in any browser test runner (Vitest
+// browser mode, Web Test Runner, Playwright's own).
+//
+//   import { frameworks, mount } from '@zubra/runtime/testing';
+//   import StarRating from './star-rating.zb';
+//
+//   for (const framework of await frameworks()) {
+//     test(`${framework}: a click sets the value and fires valuechange`, async () => {
+//       const view = await mount(StarRating, { framework, props: { value: 2 } });
+//       view.element.querySelector('button:nth-of-type(4)').click();
+//       expect(view.events('valuechange')).toEqual([4]);
+//       await view.set({ value: 1 });                 // through the framework, as an app would
+//       expect(view.element.value).toBe(1);
+//       view.unmount();
+//     });
+//   }
+//
+// A `<prop>change` event updates the prop the framework passes, as an app binding it two-way
+// would (`v-model`, React's controlled pattern). React and Vue are imported only when asked for, through the same adapters apps use
+// (`@zubra/runtime/react`, `@zubra/runtime/vue`), so events reach the framework's own handlers,
+// props are set the framework's way, and slots are the framework's children.
+
+const ALL = ['html', 'react', 'vue'];
+
+/** The frameworks that can be mounted here: plain HTML always, React and Vue when installed. */
+export async function frameworks() {
+  const found = ['html'];
+  for (const name of ['react', 'vue']) {
+    try {
+      await load(name);
+      found.push(name);
+    } catch {
+      // not installed: skipped
+    }
+  }
+  return found;
+}
+
+const loaded = {};
+function load(framework) {
+  if (framework === 'react') {
+    loaded.react ??= Promise.all([import('react'), import('react-dom'), import('react-dom/client'), import('./react.js')])
+      .then(([React, ReactDOM, client, adapter]) => ({ React, flushSync: ReactDOM.flushSync, createRoot: client.createRoot, wrap: adapter.wrap }));
+    return loaded.react;
+  }
+  if (framework === 'vue') {
+    loaded.vue ??= Promise.all([import('vue'), import('./vue.js')]).then(([Vue, adapter]) => ({ Vue, wrap: adapter.wrap }));
+    return loaded.vue;
+  }
+  return Promise.resolve(null);
+}
+
+// What the element is doing once a change has landed: its own render, and the framework's.
+const settle = async (element) => {
+  await new Promise((resolve) => setTimeout(resolve));
+  await element?.updateComplete;
+};
+
+/**
+ * Mount `Element` (a compiled component's default export) through `framework` (`html`, `react` or
+ * `vue`), with `props` and `slots` (`{ default: 'text', title: 'Heading' }`: text for each slot).
+ * Resolves once it has rendered, to:
+ * - `element`: the component's host element;
+ * - `events(name)`: the `detail` of each `name` event so far, as the framework's handler got it
+ *   (`events()`: every event as `[name, detail]`);
+ * - `set(props)`: change props through the framework (merged with the current ones), and settle;
+ * - `unmount()`: remove it the framework's way.
+ */
+export async function mount(Element, { framework = 'html', props = {}, slots = {}, container } = {}) {
+  const meta = Element?.zubra;
+  if (!meta) throw new TypeError('zubra: mount() needs a compiled zubra element (the default export of a .zb module)');
+  if (!ALL.includes(framework)) throw new TypeError(`zubra: mount() knows ${ALL.join(', ')}, not "${framework}"`);
+  if (!customElements.get(meta.tag)) customElements.define(meta.tag, Element);
+  const host = container ?? document.body.appendChild(document.createElement('div'));
+  const log = [];
+  // Like an app that binds the component two-way (`v-model`, React's controlled pattern): a
+  // `<prop>change` event updates the prop the framework passes back, so its next render doesn't
+  // put the old value back.
+  const models = Object.fromEntries(Object.keys(meta.props).filter((name) => meta.events.includes(`${name.toLowerCase()}change`)).map((name) => [`${name.toLowerCase()}change`, name]));
+  let model = () => {};
+  const record = (name) => (event) => {
+    log.push([name, event.detail]);
+    if (models[name]) model(models[name], event.detail);
+  };
+  let current = { ...props };
+  let view;
+
+  if (framework === 'html') {
+    const element = document.createElement(meta.tag);
+    for (const [name, value] of Object.entries(current)) element[name] = value;
+    for (const name of meta.events) element.addEventListener(name, record(name));
+    for (const [name, text] of Object.entries(slots)) {
+      if (name === 'default') element.append(text);
+      else element.append(Object.assign(document.createElement('span'), { slot: name, textContent: text }));
+    }
+    host.append(element);
+    view = {
+      element,
+      set: async (next) => { Object.assign(current, next); for (const [name, value] of Object.entries(next)) element[name] = value; },
+      unmount: () => element.remove(),
+    };
+  } else if (framework === 'react') {
+    const { React, flushSync, createRoot, wrap } = await load('react');
+    const Component = wrap(Element);
+    const handlers = Object.fromEntries(meta.events.map((name) => [`on${name}`, record(name)]));
+    const children = Object.entries(slots).map(([name, text]) =>
+      name === 'default' ? text : React.createElement('span', { key: name, slot: name }, text));
+    let element = null;
+    const ref = (node) => { if (node) element = node; };
+    const root = createRoot(host);
+    const render = () => flushSync(() => root.render(React.createElement(Component, { ...current, ...handlers, ref }, ...children)));
+    model = (name, value) => { current[name] = value; queueMicrotask(render); };
+    render();
+    view = {
+      get element() { return element; },
+      set: async (next) => { Object.assign(current, next); render(); },
+      unmount: () => root.unmount(),
+    };
+  } else {
+    const { Vue, wrap } = await load('vue');
+    const Component = wrap(Element);
+    const state = Vue.reactive({ ...current });
+    model = (name, value) => { current[name] = value; state[name] = value; };
+    const handlers = Object.fromEntries(meta.events.map((name) => [`on${name[0].toUpperCase()}${name.slice(1)}`, record(name)]));
+    const slotFunctions = Object.fromEntries(Object.entries(slots).map(([name, text]) => [name, () => (name === 'default' ? text : Vue.h('span', text))]));
+    const component = Vue.ref(null);
+    const app = Vue.createApp({ render: () => Vue.h(Component, { ...state, ...handlers, ref: component }, slotFunctions) });
+    app.mount(host);
+    view = {
+      get element() { return component.value?.element ?? null; },
+      set: async (next) => { Object.assign(current, next); Object.assign(state, next); await Vue.nextTick(); },
+      unmount: () => app.unmount(),
+    };
+  }
+
+  await settle(view.element);
+  const element = () => view.element;
+  return {
+    framework,
+    host,
+    get element() { return element(); },
+    events: (name) => (name === undefined ? log.slice() : log.filter(([event]) => event === name).map(([, detail]) => detail)),
+    async set(next) {
+      await view.set(next);
+      await settle(element());
+    },
+    unmount() {
+      view.unmount();
+      if (!container) host.remove();
+    },
+  };
+}

package/dist/production/vue.js

@@ -13,8 +13,11 @@
 //   `v-model:<prop>`, and `v-model` binds the `value` pair (or the only pair, if there's one).
 // - Other attributes and listeners (class, style, @click, …) go to the element; slots become its
 //   children, named slots with `slot="name"`.
-import { defineComponent, h, withDirectives, Text, Comment, Fragment } from 'vue';
+import { defineComponent, h, withDirectives, Text, Comment, Fragment, customRef, getCurrentScope, onScopeDispose } from 'vue';
 import { serverContent } from './server.js';
+import { routeLinks } from './navigation.js';
+import './context.js';
+import { subscribe, read, writable } from './bridge.js';
 
 const clone = (value) => (value && typeof value === 'object' ? structuredClone(value) : value);
 const pascal = (tag) => tag.split(/[-.]/).filter(Boolean).map((part) => part[0].toUpperCase() + part.slice(1)).join('');
@@ -124,3 +127,66 @@ export function wrap(Element) {
     },
   });
 }
+
+/**
+ * Route links inside Zubra components through Vue Router (or any `push`) until the current effect
+ * scope ends: `useRouteLinks((to) => router.push(to))` in a component's `setup`. Returns the
+ * function that stops it.
+ */
+export function useRouteLinks(navigate, options) {
+  const stop = routeLinks(navigate, options);
+  if (getCurrentScope()) onScopeDispose(stop);
+  return stop;
+}
+
+/**
+ * Provide a Context Protocol value to every element inside: an app's theme, locale or current user,
+ * read by components with `inject(context)` (or Lit's `@consume`).
+ *
+ *   <ZubraContext :context="theme" :value="dark ? 'dark' : 'light'">…</ZubraContext>
+ *
+ * `value` can also be a signal. It renders a `<zb-context>` element, which is `display: contents`.
+ */
+export const ZubraContext = defineComponent({
+  name: 'ZubraContext',
+  props: { context: { default: undefined }, value: { default: undefined } },
+  setup(given, { slots }) {
+    // Set as DOM properties when the element is created, before its children are inserted.
+    return () => h('zb-context', { '.context': given.context, '.value': given.value, style: 'display: contents' }, slots.default?.());
+  },
+});
+
+/**
+ * A Zubra signal (or a function of signals) as a Vue ref: reading `.value` tracks it in
+ * templates, computeds and watchers, and assigning `.value` writes the signal when it's writable
+ * (a `Signal.State`, `state()`, `from()`), so `v-model="cart"` works on one.
+ *
+ *   const items = useSignal(cart, { deep: true })
+ *
+ * The subscription ends with the effect scope it was created in (the component's `setup`); outside
+ * one, call `stop()` on the ref when done. With `deep: true` a mutation inside an array or object
+ * triggers too.
+ */
+export function useSignal(source, { deep = false } = {}) {
+  let stop = () => {};
+  const ref = customRef((track, trigger) => {
+    let first = true;
+    stop = subscribe(source, () => {
+      if (first) first = false;
+      else trigger();
+    }, { deep });
+    return {
+      get() {
+        track();
+        return read(source);
+      },
+      set(value) {
+        if (!writable(source)) throw new TypeError('zubra: useSignal(): this signal is read-only (a computed); write the state it reads');
+        source.set(value);
+      },
+    };
+  });
+  Object.defineProperty(ref, 'stop', { value: () => stop() });
+  if (getCurrentScope()) onScopeDispose(() => stop());
+  return ref;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubra/runtime",
-  "version": "5.6.0",
+  "version": "5.8.0",
   "description": "Browser runtime for Zubra compiled components, built on the TC39 Signals API",
   "license": "ISC",
   "repository": {
@@ -45,6 +45,36 @@
       "production": "./dist/production/motion.js",
       "default": "./src/motion.js"
     },
+    "./bridge": {
+      "types": "./types/bridge.d.ts",
+      "production": "./dist/production/bridge.js",
+      "default": "./src/bridge.js"
+    },
+    "./context": {
+      "types": "./types/context.d.ts",
+      "production": "./dist/production/context.js",
+      "default": "./src/context.js"
+    },
+    "./forms": {
+      "types": "./types/forms.d.ts",
+      "production": "./dist/production/forms.js",
+      "default": "./src/forms.js"
+    },
+    "./navigation": {
+      "types": "./types/navigation.d.ts",
+      "production": "./dist/production/navigation.js",
+      "default": "./src/navigation.js"
+    },
+    "./outlet": {
+      "types": "./types/outlet.d.ts",
+      "production": "./dist/production/outlet.js",
+      "default": "./src/outlet.js"
+    },
+    "./testing": {
+      "types": "./types/testing.d.ts",
+      "production": "./dist/production/testing.js",
+      "default": "./src/testing.js"
+    },
     "./react": {
       "types": "./types/react.d.ts",
       "production": "./dist/production/react.js",
@@ -79,7 +109,8 @@
     "@angular/forms": ">=16",
     "@zag-js/vanilla": ">=1.47",
     "react": ">=18",
-    "vue": "^3.3"
+    "vue": "^3.3",
+    "react-dom": ">=18"
   },
   "peerDependenciesMeta": {
     "@angular/core": {
@@ -96,6 +127,9 @@
     },
     "vue": {
       "optional": true
+    },
+    "react-dom": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -106,6 +140,8 @@
     "@angular/forms": "22.2.5",
     "@angular/platform-browser": "22.2.5",
     "@babel/core": "8.1.0",
+    "@felte/vanilla": "0.3.14",
+    "@tanstack/react-form": "1.33.5",
     "@types/react": "19.3.0",
     "@zag-js/combobox": "1.47.0",
     "@zag-js/vanilla": "1.47.0",
@@ -116,13 +152,17 @@
     "react": "19.3.1",
     "react-dom": "19.3.1",
     "react-dom18": "npm:react-dom@18.3.1",
+    "react-hook-form": "7.92.0",
+    "react-router": "8.5.1",
     "react18": "npm:react@18.3.1",
     "rxjs": "7.8.2",
     "signal-polyfill": "0.2.2",
     "typescript": "^7.0.2",
+    "vee-validate": "4.15.1",
     "vscode-html-languageservice": "5.6.2",
     "vscode-languageserver-textdocument": "1.0.16",
-    "vue": "3.5.45"
+    "vue": "3.5.45",
+    "vue-router": "5.5.0"
   },
   "files": [
     "src",

package/src/bridge.js

@@ -0,0 +1,96 @@
+// Signal bridges: read (and write) a Zubra signal from a framework's own code.
+//
+//   import { shared } from './cart-state.js'               // export const shared = state([])
+//   import { toStore } from '@zubra/runtime/bridge'
+//   const cart = toStore(shared, { deep: true })
+//
+//   Svelte:   {$cart.length}                               (the store contract)
+//   Solid:    const items = from(cart)                     (solid-js `from`)
+//   Angular:  items = toSignal(cart, { requireSync: true })  (a Subscribable)
+//   RxJS:     from(cart)                                   (Symbol.observable)
+//   React:    useSignal(shared) from '@zubra/runtime/react'
+//   Vue:      useSignal(shared) from '@zubra/runtime/vue'
+//
+// The adapters carry props, events and two-way bindings across the element boundary; this
+// carries state: a signal that elements and the app's code both read, without copying it into
+// the framework's state and back. Any `Signal.State` or `Signal.Computed` works (`state()`,
+// `computed()`, `from()`, a `@zubra/sync` field, a native `Signal` once browsers ship one), as
+// does a function that reads signals (it's tracked like a computed).
+//
+// `deep: true` also tracks what's inside an array or plain object, so `items.push(x)` notifies
+// as `items = [...items, x]` does. Without it a mutation inside the value isn't a change.
+import { Signal } from './signal.js';
+import { effect, root } from './effect.js';
+
+const isSignal = (value) => value instanceof Signal.State || value instanceof Signal.Computed;
+
+function check(source, name) {
+  if (typeof source !== 'function' && !isSignal(source)) {
+    throw new TypeError(`zubra: ${name}() needs a signal (state(), computed(), a Signal.State or Signal.Computed) or a function that reads signals`);
+  }
+}
+
+/** The source's current value: a signal's `get()`, or the function's result. */
+export const read = (source) => (typeof source === 'function' ? source() : source.get());
+
+/** Whether the source can be written: a `Signal.State`, or a signal with its own `set` (`from()`). */
+export const writable = (source) => typeof source?.set === 'function';
+
+// Read every property of an array or plain object (through state's proxy, each read is tracked),
+// so a change anywhere inside notifies.
+function touch(value, seen = new Set()) {
+  if (value === null || typeof value !== 'object' || seen.has(value)) return;
+  if (!Array.isArray(value)) {
+    const proto = Object.getPrototypeOf(value);
+    if (proto !== Object.prototype && proto !== null) return;
+  }
+  seen.add(value);
+  if (Array.isArray(value)) for (let index = 0; index < value.length; index++) touch(value[index], seen);
+  else for (const key of Object.keys(value)) touch(value[key], seen);
+}
+
+/**
+ * Call `callback(value)` now and whenever `source` changes, until the returned function is
+ * called. Changes are batched like the runtime's own effects: one call per microtask, with the
+ * latest value. Not owned by any component, so it lives until it's unsubscribed.
+ */
+export function subscribe(source, callback, { deep = false } = {}) {
+  check(source, 'subscribe');
+  const owner = root(() => {
+    effect(() => {
+      const value = read(source);
+      if (deep) touch(value);
+      Signal.subtle.untrack(() => callback(value));
+    });
+  });
+  return () => owner.dispose();
+}
+
+/**
+ * The source as a store: the Svelte store contract (`subscribe(run)` calls `run` now and on each
+ * change, returning the unsubscribe function), which is also an RxJS-style Subscribable
+ * (`subscribe({ next })` returns something with `unsubscribe()`), so Angular's `toSignal`, Solid's
+ * `from` and RxJS's `from` take it as it is. `set` and `update` are there when the source is
+ * writable (a Svelte writable store, so `bind:value={$store}` works).
+ */
+export function toStore(source, options = {}) {
+  check(source, 'toStore');
+  const store = {
+    get: () => read(source),
+    subscribe(run) {
+      const next = typeof run === 'function' ? run : (value) => run?.next?.(value);
+      const stop = subscribe(source, next, options);
+      const unsubscribe = () => stop();
+      unsubscribe.unsubscribe = unsubscribe;
+      return unsubscribe;
+    },
+    [Symbol.observable ?? '@@observable']() {
+      return this;
+    },
+  };
+  if (writable(source)) {
+    store.set = (value) => source.set(value);
+    store.update = (fn) => source.set(fn(Signal.subtle.untrack(() => read(source))));
+  }
+  return store;
+}