py-flowtoken 0.3.1__tar.gz

py_flowtoken-0.3.1/.github/workflows/publish.yml

@@ -0,0 +1,43 @@
+name: Publish to PyPI
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+permissions:
+  contents: read
+jobs:
+  build:
+    if: github.ref_type == 'tag'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+      - run: pip install '.[dev,fasthtml,flask,django]' twine
+      - name: Check release version
+        env:
+          RELEASE_TAG: ${{ github.ref_name }}
+        run: python -c "import os; from py_flowtoken import __version__; assert os.environ['RELEASE_TAG'] == 'v' + __version__"
+      - run: pytest -q
+      - run: python -m build --no-isolation
+      - run: twine check --strict dist/*
+      - uses: actions/upload-artifact@v4
+        with:
+          name: distributions
+          path: dist/*
+          if-no-files-found: error
+  publish:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: pypi
+      url: https://pypi.org/p/py-flowtoken
+    permissions:
+      id-token: write
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: distributions
+          path: dist/
+      - uses: pypa/gh-action-pypi-publish@release/v1

py_flowtoken-0.3.1/.github/workflows/tests.yml

@@ -0,0 +1,39 @@
+name: Test Python port and upstream parity
+on:
+  push:
+    branches: [main]
+  pull_request:
+jobs:
+  python:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python: ['3.10', '3.12']
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '${{ matrix.python }}'
+      - run: pip install '.[dev,fasthtml,flask,django]'
+      - run: pytest -q
+      - run: python -m build --no-isolation
+      - run: pip install --force-reinstall --no-deps dist/*.whl
+      - run: python -c "from py_flowtoken import AnimatedMarkdown, asset_path; assert 'data-ft-copy' in AnimatedMarkdown('    hello').render(); assert asset_path('flowtoken.js').is_file()"
+        working-directory: /tmp
+  browser:
+    runs-on: ubuntu-latest
+    env:
+      PYTHON: python
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+      - run: pip install '.[dev,fasthtml,flask,django]'
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - run: npm ci --ignore-scripts
+      - run: npx playwright install --with-deps chromium
+      - run: npm test
+      - run: git diff --exit-code -- src/py_flowtoken/static/py_flowtoken/flowtoken.js

py_flowtoken-0.3.1/.gitignore

@@ -0,0 +1,15 @@
+.venv/
+__pycache__/
+*.py[cod]
+.pytest_cache/
+node_modules/
+dist/
+.local/
+*.egg-info/
+.env
+.env.*
+.DS_Store
+
+.sesskey
+
+.static/

py_flowtoken-0.3.1/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 py-flowtoken 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.

py_flowtoken-0.3.1/NOTICE

@@ -0,0 +1,11 @@
+py-flowtoken is an independent Python adaptation of FlowToken by Ephibbs
+and contributors: https://github.com/Ephibbs/flowtoken
+
+The named animation effects and their keyframe definitions are adapted from
+FlowToken. The README demonstration GIF comes from the original FlowToken
+README: https://nextjs-omega-five-46.vercel.app/demo.gif
+
+Python rendering, framework adapters, streaming state, and the browser
+renderer are implemented in this repository. No upstream React runtime is
+included in the distribution. py-flowtoken is released under the MIT License
+in LICENSE.

py_flowtoken-0.3.1/PKG-INFO

@@ -0,0 +1,105 @@
+Metadata-Version: 2.5
+Name: py-flowtoken
+Version: 0.3.1
+Summary: A Python adaptation of FlowToken for animated text and Markdown streaming without React
+Project-URL: Repository, https://github.com/jcllobet/py-flowtoken
+Project-URL: Documentation, https://github.com/jcllobet/py-flowtoken#readme
+Project-URL: Issues, https://github.com/jcllobet/py-flowtoken/issues
+Project-URL: Upstream, https://github.com/Ephibbs/flowtoken
+Author: py-flowtoken contributors
+License-Expression: MIT
+License-File: LICENSE
+License-File: NOTICE
+Requires-Python: >=3.10
+Requires-Dist: linkify-it-py<3,>=2
+Requires-Dist: markdown-it-py<4,>=3
+Requires-Dist: mdit-py-plugins<0.5,>=0.4
+Requires-Dist: pygments<3,>=2.19
+Provides-Extra: dev
+Requires-Dist: build<2,>=1.2; extra == 'dev'
+Requires-Dist: hatchling<2,>=1.27; extra == 'dev'
+Requires-Dist: pytest<9,>=8; extra == 'dev'
+Provides-Extra: django
+Requires-Dist: django<5.3,>=5.2; extra == 'django'
+Provides-Extra: fasthtml
+Requires-Dist: python-fasthtml>=0.14.17; extra == 'fasthtml'
+Provides-Extra: flask
+Requires-Dist: flask<4,>=3.1; extra == 'flask'
+Description-Content-Type: text/markdown
+
+# py-flowtoken
+
+Smooth, word-by-word text and Markdown streaming for **FastHTML, Flask, and Django**. Python 3.10+. No React or Node runtime required.
+
+## Install
+
+```sh
+pip install py-flowtoken
+```
+
+Choose your framework to install its dependencies and follow the setup guide:
+
+| Framework | Install | Setup |
+| --- | --- | --- |
+| FastHTML | `pip install "py-flowtoken[fasthtml]"` | [FastHTML guide](https://github.com/jcllobet/py-flowtoken/blob/main/docs/fasthtml.md) |
+| Flask | `pip install "py-flowtoken[flask]"` | [Flask guide](https://github.com/jcllobet/py-flowtoken/blob/main/docs/flask.md) |
+| Django | `pip install "py-flowtoken[django]"` | [Django guide](https://github.com/jcllobet/py-flowtoken/blob/main/docs/django.md) |
+
+![FlowToken animation demo](https://nextjs-omega-five-46.vercel.app/demo.gif)
+
+*Demo from [FlowToken](https://github.com/Ephibbs/flowtoken), the original library this package adapts.*
+
+## Try it with FastHTML
+
+Install the FastHTML extra above, then save this as `demo.py`:
+
+```python
+from fasthtml.common import FastHTML
+from py_flowtoken import AnimatedText
+from py_flowtoken.adapters.fasthtml import asset_tags, mount_assets
+
+app = FastHTML(hdrs=asset_tags())
+mount_assets(app)
+
+@app.get('/')
+def home():
+    return AnimatedText('Hello from Python, one word at a time.', id='answer')
+```
+
+Run `uvicorn demo:app --reload` and open **http://127.0.0.1:8000**. The text animates as the page loads.
+
+## Stream updates
+
+Connect incoming text to the browser renderer:
+
+```javascript
+import {mount} from '/flowtoken/flowtoken.js';
+
+const view = mount(document.getElementById('answer'));
+view.setText('Hello');
+view.setText('Hello world');
+```
+
+Use `setText(snapshot)` for the full current text, or `append(chunk)` for new text only. Existing words stay in place; corrections update the changed portion. The [streaming guide](https://github.com/jcllobet/py-flowtoken/blob/main/docs/streaming.md) connects a Python generator to the browser with SSE.
+
+## Configure text or Markdown
+
+```python
+from py_flowtoken import AnimatedMarkdown
+
+answer = AnimatedMarkdown(
+    '**Hello**, world!',
+    id='answer',
+    sep='word',
+    animation='fadeIn',
+    animation_duration='0.25s',
+    interval_ms=35,
+    code_style='monokai',
+)
+```
+
+Use `sep='word'` for word-by-word animation, `'char'` for characters, or `'diff'` for appended chunks. Text defaults to word mode; Markdown defaults to diff mode. Set `animation=None` to disable animation. Reduced-motion preferences are respected automatically.
+
+Markdown includes tables, task lists, syntax highlighting, code-copy buttons, images, and Python custom tags. See the [API and configuration reference](https://github.com/jcllobet/py-flowtoken/blob/main/docs/api.md) for animation names, image sizing, custom components, and lifecycle methods.
+
+[MIT license](https://github.com/jcllobet/py-flowtoken/blob/main/LICENSE). An independent Python adaptation of [Ephibbs/flowtoken](https://github.com/Ephibbs/flowtoken), not an official release from its maintainers.

py_flowtoken-0.3.1/README.md

@@ -0,0 +1,76 @@
+# py-flowtoken
+
+Smooth, word-by-word text and Markdown streaming for **FastHTML, Flask, and Django**. Python 3.10+. No React or Node runtime required.
+
+## Install
+
+```sh
+pip install py-flowtoken
+```
+
+Choose your framework to install its dependencies and follow the setup guide:
+
+| Framework | Install | Setup |
+| --- | --- | --- |
+| FastHTML | `pip install "py-flowtoken[fasthtml]"` | [FastHTML guide](https://github.com/jcllobet/py-flowtoken/blob/main/docs/fasthtml.md) |
+| Flask | `pip install "py-flowtoken[flask]"` | [Flask guide](https://github.com/jcllobet/py-flowtoken/blob/main/docs/flask.md) |
+| Django | `pip install "py-flowtoken[django]"` | [Django guide](https://github.com/jcllobet/py-flowtoken/blob/main/docs/django.md) |
+
+![FlowToken animation demo](https://nextjs-omega-five-46.vercel.app/demo.gif)
+
+*Demo from [FlowToken](https://github.com/Ephibbs/flowtoken), the original library this package adapts.*
+
+## Try it with FastHTML
+
+Install the FastHTML extra above, then save this as `demo.py`:
+
+```python
+from fasthtml.common import FastHTML
+from py_flowtoken import AnimatedText
+from py_flowtoken.adapters.fasthtml import asset_tags, mount_assets
+
+app = FastHTML(hdrs=asset_tags())
+mount_assets(app)
+
+@app.get('/')
+def home():
+    return AnimatedText('Hello from Python, one word at a time.', id='answer')
+```
+
+Run `uvicorn demo:app --reload` and open **http://127.0.0.1:8000**. The text animates as the page loads.
+
+## Stream updates
+
+Connect incoming text to the browser renderer:
+
+```javascript
+import {mount} from '/flowtoken/flowtoken.js';
+
+const view = mount(document.getElementById('answer'));
+view.setText('Hello');
+view.setText('Hello world');
+```
+
+Use `setText(snapshot)` for the full current text, or `append(chunk)` for new text only. Existing words stay in place; corrections update the changed portion. The [streaming guide](https://github.com/jcllobet/py-flowtoken/blob/main/docs/streaming.md) connects a Python generator to the browser with SSE.
+
+## Configure text or Markdown
+
+```python
+from py_flowtoken import AnimatedMarkdown
+
+answer = AnimatedMarkdown(
+    '**Hello**, world!',
+    id='answer',
+    sep='word',
+    animation='fadeIn',
+    animation_duration='0.25s',
+    interval_ms=35,
+    code_style='monokai',
+)
+```
+
+Use `sep='word'` for word-by-word animation, `'char'` for characters, or `'diff'` for appended chunks. Text defaults to word mode; Markdown defaults to diff mode. Set `animation=None` to disable animation. Reduced-motion preferences are respected automatically.
+
+Markdown includes tables, task lists, syntax highlighting, code-copy buttons, images, and Python custom tags. See the [API and configuration reference](https://github.com/jcllobet/py-flowtoken/blob/main/docs/api.md) for animation names, image sizing, custom components, and lifecycle methods.
+
+[MIT license](https://github.com/jcllobet/py-flowtoken/blob/main/LICENSE). An independent Python adaptation of [Ephibbs/flowtoken](https://github.com/Ephibbs/flowtoken), not an official release from its maintainers.

py_flowtoken-0.3.1/browser/behaviors.js

@@ -0,0 +1,61 @@
+import {animate, settings} from './settings.js';
+
+export class Behaviors {
+  constructor(options) {this.options = options; this.bound = new Map();}
+
+  bind(element) {
+    if (element.hasAttribute('data-ft-copy')) this.copy(element);
+    if (element.tagName === 'IMG') this.image(element);
+  }
+
+  copy(button) {
+    if (this.bound.has(button)) return;
+    const state = {controller:new AbortController(),timer:null};
+    this.bound.set(button, state);
+    button.addEventListener('click', async () => {
+      const block = button.closest('[data-ft-code]');
+      try {
+        await navigator.clipboard.writeText(block?.dataset.ftSource ?? block?.querySelector('code')?.textContent ?? '');
+        if (state.controller.signal.aborted) return;
+        button.textContent = 'Copied!';button.setAttribute('aria-label','Copied!');
+      } catch {
+        if (state.controller.signal.aborted) return;
+        button.textContent = 'Copy failed';button.setAttribute('aria-label','Copy failed; try again');
+      }
+      clearTimeout(state.timer);
+      state.timer = setTimeout(() => {button.textContent='Copy code';button.setAttribute('aria-label','Copy code');},2000);
+    }, {signal:state.controller.signal});
+  }
+
+  image(image) {
+    const source = image.getAttribute('src');
+    const old = this.bound.get(image);
+    if (old?.source === source) return;
+    this.release(image);
+    const state = {source,controller:new AbortController()};
+    this.bound.set(image,state);
+    image.dataset.ftState = 'pending';
+    const loaded = () => {image.dataset.ftState='loaded';animate(image,settings(image,this.options));};
+    const failed = () => {image.dataset.ftState='error';image.style.animationName='none';};
+    image.addEventListener('load', loaded, {once:true,signal:state.controller.signal});
+    image.addEventListener('error', failed, {once:true,signal:state.controller.signal});
+    if (image.complete) {
+      if (image.naturalWidth) loaded();
+      else failed();
+    }
+  }
+
+  release(element) {
+    const state = this.bound.get(element);
+    if (state) {state.controller.abort();clearTimeout(state.timer);this.bound.delete(element);}
+  }
+
+  releaseTree(element) {
+    this.release(element);
+    for (const child of element.querySelectorAll?.('*') || []) this.release(child);
+  }
+
+  destroy() {
+    for (const element of [...this.bound.keys()]) this.release(element);
+  }
+}

py_flowtoken-0.3.1/browser/dom.js

@@ -0,0 +1,89 @@
+import {schema} from './settings.js';
+
+export function safeURL(value) {
+  try {
+    value = value.trim();
+    if (/[\u0000-\u0020\u007f]/u.test(value)) return null;
+    const parsed = new URL(value, 'https://flowtoken.invalid/');
+    return schema.protocols.includes(parsed.protocol.slice(0, -1)) ? value : null;
+  } catch {return null;}
+}
+
+export function safeStyle(value) {
+  return value.split(';').flatMap(declaration => {
+    const index = declaration.indexOf(':');
+    if (index < 0) return [];
+    const name = declaration.slice(0, index).trim().toLowerCase();
+    const content = declaration.slice(index + 1).trim();
+    if (!schema.styles.includes(name) || /url|expression|javascript/i.test(content) || !/^[\w\s#.,()%/-]+$/.test(content)) return [];
+    return [`${name}:${content}`];
+  }).join(';');
+}
+
+export function parseHTML(html) {
+  const document = new DOMParser().parseFromString(html, 'text/html');
+  const source = document.querySelector('[data-flowtoken="markdown"]');
+  if (!source) throw new Error('Expected AnimatedMarkdown.render() output');
+  for (const node of [...source.querySelectorAll('*')]) {
+    if (node.classList.contains('ft-token') || node.hasAttribute('data-ft-token')) {
+      node.replaceWith(document.createTextNode(node.textContent));
+      continue;
+    }
+    if (!schema.tags.includes(node.tagName.toLowerCase())) {
+      node.replaceWith(document.createTextNode(node.textContent));
+      continue;
+    }
+    for (const attr of [...node.attributes]) {
+      if (attr.name === 'style') {
+        const style = safeStyle(attr.value);
+        if (style) node.setAttribute('style', style); else node.removeAttribute('style');
+      } else if (!schema.attributes.includes(attr.name)) node.removeAttribute(attr.name);
+      else if (['href','src'].includes(attr.name) && safeURL(attr.value) === null) node.removeAttribute(attr.name);
+    }
+    if (node.tagName === 'INPUT') {node.type = 'checkbox'; node.disabled = true;}
+    if (node.tagName === 'BUTTON') node.type = 'button';
+    if (node.tagName === 'A' && node.target === '_blank') node.rel = 'noopener noreferrer';
+  }
+  source.normalize();
+  return source;
+}
+
+function key(node) {
+  if (node.nodeType !== Node.ELEMENT_NODE) return null;
+  return node.getAttribute('data-ft-key') || node.id || (node.tagName === 'IMG' ? `image:${node.getAttribute('src')}` : null);
+}
+
+function matches(current, desired, leaves) {
+  if (desired.nodeType === Node.TEXT_NODE) return leaves.has(current);
+  return !leaves.has(current) && current?.nodeType === desired.nodeType && current.nodeName === desired.nodeName && key(current) === key(desired);
+}
+
+export function reconcile(parent, desiredParent, owner) {
+  let cursor = parent.firstChild;
+  for (const desired of [...desiredParent.childNodes]) {
+    let current = cursor;
+    const identity = key(desired);
+    if (identity && !matches(current, desired, owner.leaves)) {
+      current = [...parent.childNodes].find(node => key(node) === identity && matches(node, desired, owner.leaves)) || cursor;
+    }
+    if (current && matches(current, desired, owner.leaves)) {
+      if (current !== cursor) parent.insertBefore(current, cursor);
+      if (desired.nodeType === Node.TEXT_NODE) owner.leaves.get(current).setText(desired.textContent);
+      else {
+        owner.attributes(current, desired);
+        if (!current.hasAttribute('data-ft-copy')) reconcile(current, desired, owner);
+        owner.behaviors.bind(current);
+      }
+      cursor = current.nextSibling;
+    } else {
+      const fresh = owner.hydrate(desired);
+      parent.insertBefore(fresh, cursor);
+    }
+  }
+  while (cursor) {
+    const next = cursor.nextSibling;
+    owner.remove(cursor);
+    cursor.remove();
+    cursor = next;
+  }
+}

py_flowtoken-0.3.1/browser/index.js

@@ -0,0 +1,30 @@
+export {animations,tokenize} from './settings.js';
+export {FlowToken,FlowMarkdown,FlowImage} from './renderers.js';
+import {FlowToken,FlowMarkdown,FlowImage} from './renderers.js';
+
+const mounted=new WeakMap();
+export function mount(element, options={}) {
+  if(!mounted.has(element)) {
+    const renderer=element.hasAttribute('data-ft-image')?new FlowImage(element,options):element.dataset.flowtoken==='markdown'?new FlowMarkdown(element,options):new FlowToken(element,options);
+    mounted.set(element,renderer);
+    element.addEventListener('flowtoken:destroy',()=>{if(mounted.get(element)===renderer)mounted.delete(element);},{once:true});
+  }
+  return mounted.get(element);
+}
+export function unmount(element) {
+  const renderer=mounted.get(element);
+  mounted.delete(element);
+  renderer?.destroy();
+}
+export function mountAll(root=document) {
+  if(root.matches?.('[data-flowtoken], [data-ft-image]'))mount(root);
+  for(const element of root.querySelectorAll('[data-flowtoken], [data-ft-image]')) {
+    if(element.hasAttribute('data-ft-image') && element.closest('[data-flowtoken="markdown"]'))continue;
+    mount(element);
+  }
+}
+if(typeof document!=='undefined') {
+  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',()=>mountAll(),{once:true});
+  else mountAll();
+  document.addEventListener('htmx:afterSwap',event=>mountAll(event.detail?.target||event.target));
+}

py_flowtoken-0.3.1/browser/renderers.js

@@ -0,0 +1,140 @@
+import {settings, schema} from './settings.js';
+import {TextRenderer} from './text.js';
+import {parseHTML,reconcile} from './dom.js';
+import {Behaviors} from './behaviors.js';
+
+class Renderer {
+  constructor(element, options) {
+    this.element=element;
+    this.overrides={...options};
+    this.options=settings(element,options);
+    this.disposed=false;
+  }
+
+  event(name) {
+    if (name==='before-render') this.element.setAttribute('aria-busy','true');
+    if (name==='idle') this.element.setAttribute('aria-busy','false');
+    this.element.dispatchEvent(new Event(`flowtoken:${name}`));
+  }
+
+  check() {if(this.disposed) throw new Error('FlowToken has been destroyed');}
+
+  configure(options) {
+    this.check();
+    const overrides={...this.overrides,...options};
+    const next=settings(this.element,overrides);
+    this.overrides=overrides;this.options=next;
+  }
+
+  finishDestroy() {
+    this.disposed=true;
+    this.element.setAttribute('aria-busy','false');
+    this.element.dispatchEvent(new Event('flowtoken:destroy'));
+  }
+}
+
+export class FlowToken extends Renderer {
+  constructor(element, options={}) {
+    super(element, options);
+    const initial=element.textContent || '';
+    element.replaceChildren();
+    this.renderer=new TextRenderer(element,this.options,name=>this.event(name));
+    this.renderer.seed(initial,this.options.animateInitial);
+  }
+
+  get text() {return this.renderer.target;}
+  setText(text) {this.check();this.renderer.setText(text);}
+  append(delta) {this.check();this.renderer.append(delta);}
+  flush() {this.check();this.renderer.flush();}
+  whenIdle() {return this.renderer.whenIdle();}
+  configure(options) {
+    super.configure(options);this.renderer.configure(this.options);
+  }
+  destroy() {if(!this.disposed){this.renderer.destroy();this.finishDestroy();}}
+}
+
+export class FlowMarkdown extends Renderer {
+  constructor(element, options={}) {
+    super(element,options);
+    this.leaves=new Map();
+    this.behaviors=new Behaviors(this.options);
+    const children=[...element.childNodes];
+    element.replaceChildren(...children.map(child=>this.hydrate(child)));
+    this.settle();
+  }
+
+  hydrate(node) {
+    if (node.nodeType===Node.TEXT_NODE) {
+      const leaf=document.createElement('span');leaf.className='ft-leaf';
+      const renderer=new TextRenderer(leaf,this.options,name=>{if(name!=='idle')this.event(name);else this.settle();});
+      this.leaves.set(leaf,renderer);
+      renderer.seed(node.textContent,this.options.animateInitial);
+      return leaf;
+    }
+    if (node.nodeType!==Node.ELEMENT_NODE) return node.cloneNode();
+    const element=node.cloneNode(false);
+    if (node.hasAttribute('data-ft-copy')) element.textContent=node.textContent;
+    else for(const child of node.childNodes) element.append(this.hydrate(child));
+    this.behaviors.bind(element);
+    return element;
+  }
+
+  attributes(current, desired) {
+    for(const attr of [...current.attributes]) {
+      if(attr.name!=='style'&&attr.name!=='data-ft-state'&&!desired.hasAttribute(attr.name)) current.removeAttribute(attr.name);
+    }
+    for(const attr of desired.attributes) {
+      if(attr.name!=='style'&&current.getAttribute(attr.name)!==attr.value) current.setAttribute(attr.name,attr.value);
+    }
+    for(const property of schema.styles) {
+      const value=desired.style.getPropertyValue(property);
+      if(value) current.style.setProperty(property,value);
+      else current.style.removeProperty(property);
+    }
+  }
+
+  remove(node) {
+    const elements=[node,...(node.querySelectorAll?.('.ft-leaf')||[])];
+    for(const element of elements) {
+      const renderer=this.leaves.get(element);
+      if(renderer){renderer.destroy();this.leaves.delete(element);}
+    }
+    this.behaviors.releaseTree(node);
+  }
+
+  setRenderedHTML(html) {
+    this.check();
+    const source=parseHTML(html);
+    this.options=settings(source,this.overrides);
+    this.behaviors.options=this.options;
+    for(const renderer of this.leaves.values()) renderer.configure(this.options);
+    this.event('before-render');
+    reconcile(this.element,source,this);
+    this.event('render');
+    this.settle();
+  }
+
+  settle() {
+    if(this.leaves&&[...this.leaves.values()].every(renderer=>renderer.nodes.length===renderer.parts.length)) this.event('idle');
+  }
+
+  whenIdle() {return Promise.all([...this.leaves.values()].map(renderer=>renderer.whenIdle()));}
+  flush() {this.check();for(const renderer of this.leaves.values())renderer.flush();this.settle();}
+  configure(options) {
+    super.configure(options);
+    this.behaviors.options=this.options;for(const renderer of this.leaves.values())renderer.configure(this.options);
+  }
+  destroy() {
+    if(this.disposed)return;
+    for(const renderer of this.leaves.values())renderer.destroy();
+    this.leaves.clear();this.behaviors.destroy();this.finishDestroy();
+  }
+}
+
+export class FlowImage extends Renderer {
+  constructor(element, options={}) {
+    super(element,options);this.behaviors=new Behaviors(this.options);this.behaviors.bind(element);
+  }
+  configure(options){super.configure(options);this.behaviors.options=this.options;}
+  destroy(){if(!this.disposed){this.behaviors.destroy();this.finishDestroy();}}
+}