From 6b44a1822048d442b56c1794d7d407e6b5e9b153 Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Mon, 26 Aug 2024 14:48:53 +0200
Subject: [PATCH 001/164] Improve ESM layout how-to guide (#7088)

---
 .../custom_components/esm/custom_layout.md    | 543 ++++++++++--------
 panel/models/react_component.ts               |   2 +-
 panel/styles/models/esm.less                  |   4 +
 3 files changed, 306 insertions(+), 243 deletions(-)

diff --git a/doc/how_to/custom_components/esm/custom_layout.md b/doc/how_to/custom_components/esm/custom_layout.md
index 112148636a..c8c9ccd080 100644
--- a/doc/how_to/custom_components/esm/custom_layout.md
+++ b/doc/how_to/custom_components/esm/custom_layout.md
@@ -1,108 +1,94 @@
 # Create Custom Layouts
 
-In this guide we will show you how to build custom, reusable layouts using `Viewer`, `JSComponent` or `ReactComponent`.
+In this guide, we will demonstrate how to build custom, reusable layouts using [`JSComponent`](../../reference/panes/JSComponent.md) or [`ReactComponent`](../../reference/panes/ReactComponent.md).
 
-## Layout a single Panel Component
+Please note that it is currently not possible to create layouts using the [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md), as the underlying [`AnyWidget`](https://anywidget.dev/) API does not support this.
 
-You can layout a single `object` as follows.
+## Layout Two Objects
+
+This example will show you how to create a *split* layout containing two objects. We will be using the [Split.js](https://split.js.org/) library.
 
 ::::{tab-set}
 
-:::{tab-item} `Viewer`
+:::{tab-item} `JSComponent`
 
 ```{pyodide}
 import panel as pn
-from panel.custom import Child
-from panel.viewable import Viewer, Layoutable
-
-pn.extension()
-
 
-class SingleObjectLayout(Viewer, Layoutable):
-    object = Child(allow_refs=False)
+from panel.custom import Child, JSComponent
 
-    def __init__(self, **params):
-        super().__init__(**params)
+CSS = """
+.split {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+}
 
-        header = """
-# Temperature
-## A Measurement from the Sensor
-        """
+.gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
 
-        layoutable_params = {name: self.param[name] for name in Layoutable.param}
-        self._layout = pn.Column(
-            pn.pane.Markdown(header, height=100, sizing_mode="stretch_width"),
-            self._object,
-            **layoutable_params,
-        )
+.gutter.gutter-horizontal {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+    cursor: col-resize;
+}
+"""
 
-    def __panel__(self):
-        return self._layout
 
-    @pn.depends("object")
-    def _object(self):
-        return self.object
+class SplitJS(JSComponent):
 
+    left = Child()
+    right = Child()
 
-dial = pn.widgets.Dial(
-    name="°C",
-    value=37,
-    format="{value}",
-    colors=[(0.40, "green"), (1, "red")],
-    bounds=(0, 100),
-)
-py_layout = SingleObjectLayout(
-    object=dial,
-    name="Temperature",
-    styles={"border": "2px solid lightgray"},
-    sizing_mode="stretch_width",
-)
-py_layout.servable()
-```
+    _esm = """
+    import Split from 'https://esm.sh/split.js@1.6.5'
 
-:::
+    export function render({ model }) {
+      const splitDiv = document.createElement('div');
+      splitDiv.className = 'split';
 
-:::{tab-item} `JSComponent`
+      const split0 = document.createElement('div');
+      splitDiv.appendChild(split0);
 
-```{pyodide}
-import panel as pn
-from panel.custom import JSComponent, Child
+      const split1 = document.createElement('div');
+      splitDiv.appendChild(split1);
 
-pn.extension()
+      const split = Split([split0, split1])
 
-class SingleObjectLayout(JSComponent):
-    object = Child(allow_refs=False)
+      model.on('remove', () => split.destroy())
 
-    _esm = """
-export function render({ model }) {
-    const containerID = `id-${crypto.randomUUID()}`;;
-    const div = document.createElement("div");
-    div.innerHTML = `
-    <div>
-        <h1>Temperature</h1>
-        <h2>A measurement from the sensor</h2>
-        <div id="${containerID}">...</div>
-    </div>`;
-    const container = div.querySelector(`#${containerID}`);
-    container.appendChild(model.get_child("object"))
-    return div;
-}
-"""
+      split0.append(model.get_child("left"))
+      split1.append(model.get_child("right"))
+      return splitDiv
+    }"""
 
-dial = pn.widgets.Dial(
-    name="°C",
-    value=37,
-    format="{value}",
-    colors=[(0.40, "green"), (1, "red")],
-    bounds=(0, 100),
-)
-js_layout = SingleObjectLayout(
-    object=dial,
-    name="Temperature",
-    styles={"border": "2px solid lightgray"},
+    _stylesheets = [CSS]
+
+
+pn.extension("codeeditor")
+
+split_js = SplitJS(
+    left=pn.widgets.CodeEditor(
+        value="Left!",
+        sizing_mode="stretch_both",
+        margin=0,
+        theme="monokai",
+        language="python",
+    ),
+    right=pn.widgets.CodeEditor(
+        value="Right",
+        sizing_mode="stretch_both",
+        margin=0,
+        theme="monokai",
+        language="python",
+    ),
+    height=500,
     sizing_mode="stretch_width",
 )
-js_layout.servable()
+split_js.servable()
 ```
 
 :::
@@ -114,91 +100,111 @@ import panel as pn
 
 from panel.custom import Child, ReactComponent
 
-pn.extension()
+CSS = """
+.split {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+}
 
-class SingleObjectLayout(ReactComponent):
-    object = Child(allow_refs=False)
+.gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
 
-    _esm = """
-export function render({ model }) {
-    return (
-        <div>
-            <h1>Temperature</h1>
-            <h2>A measurement from the sensor</h2>
-            <div>
-                {model.get_child("object")}
-            </div>
-        </div>
-    );
+.gutter.gutter-horizontal {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+    cursor: col-resize;
 }
 """
 
-dial = pn.widgets.Dial(
-    name="°C",
-    value=37,
-    format="{value}",
-    colors=[(0.40, "green"), (1, "red")],
-    bounds=(0, 100),
-)
-react_layout = SingleObjectLayout(
-    object=dial,
-    name="Temperature",
-    styles={"border": "2px solid lightgray"},
+
+class SplitReact(ReactComponent):
+
+    left = Child()
+    right = Child()
+
+    _esm = """
+    import Split from 'https://esm.sh/react-split@2.0.14'
+
+    export function render({ model }) {
+      return (
+        <Split className="split">
+          {model.get_child("left")}
+          {model.get_child("right")}
+        </Split>
+      )
+    }
+    """
+
+    _stylesheets = [CSS]
+
+
+pn.extension("codeeditor")
+
+split_react = SplitReact(
+    left=pn.widgets.CodeEditor(
+        value="Left!",
+        sizing_mode="stretch_both",
+        margin=0,
+        theme="monokai",
+        language="python",
+    ),
+    right=pn.widgets.CodeEditor(
+        value="Right",
+        sizing_mode="stretch_both",
+        margin=0,
+        theme="monokai",
+        language="python",
+    ),
+    height=500,
     sizing_mode="stretch_width",
 )
-react_layout.servable()
+split_react.servable()
 ```
 
 :::
 
 ::::
 
-Lets verify the layout will automatically update when the `object` is changed.
+Let's verify that the layout will automatically update when the `object` is changed.
 
 ::::{tab-set}
 
-:::{tab-item} `Viewer`
+:::{tab-item} `JSComponent`
 
 ```{pyodide}
-html = pn.pane.Markdown("A **markdown** pane!", name="Markdown")
-radio_button_group = pn.widgets.RadioButtonGroup(
-    options=["Dial", "Markdown"],
-    value="Dial",
-    name="Select the object to display",
-    button_type="success", button_style="outline"
-)
+split_js.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
+```
+
+:::
 
-@pn.depends(radio_button_group, watch=True)
-def update(value):
-    if value == "Dial":
-        py_layout.object = dial
-    else:
-        py_layout.object = html
+:::{tab-item} `ReactComponent`
 
-radio_button_group.servable()
+```{pyodide}
+split_react.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
 ```
 
 :::
 
+::::
+
+Now, let's change it back:
+
+::::{tab-set}
+
 :::{tab-item} `JSComponent`
 
 ```{pyodide}
-html = pn.pane.Markdown("A **markdown** pane!", name="Markdown")
-radio_button_group = pn.widgets.RadioButtonGroup(
-    options=["Dial", "Markdown"],
-    value="Dial",
-    name="Select the object to display",
-    button_type="success", button_style="outline"
+split_js.right=pn.widgets.CodeEditor(
+    value="Right",
+    sizing_mode="stretch_both",
+    margin=0,
+    theme="monokai",
+    language="python",
 )
-
-@pn.depends(radio_button_group, watch=True)
-def update(value):
-    if value == "Dial":
-        js_layout.object = dial
-    else:
-        js_layout.object = html
-
-radio_button_group.servable()
 ```
 
 :::
@@ -206,22 +212,13 @@ radio_button_group.servable()
 :::{tab-item} `ReactComponent`
 
 ```{pyodide}
-html = pn.pane.Markdown("A **markdown** pane!", name="Markdown")
-radio_button_group = pn.widgets.RadioButtonGroup(
-    options=["Dial", "Markdown"],
-    value="Dial",
-    name="Select the object to display",
-    button_type="success", button_style="outline"
+split_react.right=pn.widgets.CodeEditor(
+    value="Right",
+    sizing_mode="stretch_both",
+    margin=0,
+    theme="monokai",
+    language="python",
 )
-
-@pn.depends(radio_button_group, watch=True)
-def update(value):
-    if value == "Dial":
-        react_layout.object = dial
-    else:
-        react_layout.object = html
-
-radio_button_group.servable()
 ```
 
 :::
@@ -230,153 +227,215 @@ radio_button_group.servable()
 
 ## Layout a List of Objects
 
-A Panel `Column` or `Row` works as a list of objects. It is *list-like*. In this section will show you how to create your own *list-like* layout using Panels `NamedListLike` class.
+A Panel `Column` or `Row` works as a list of objects. It is *list-like*. In this section, we will show you how to create your own *list-like* layout using Panel's `NamedListLike` class.
 
 ::::{tab-set}
 
-:::{tab-item} `Viewer`
+:::{tab-item} `JSComponent`
 
 ```{pyodide}
 import panel as pn
-from panel.viewable import Viewer, Layoutable
-from panel.custom import Children
-from panel.layout.base import NamedListLike
+import param
+
+from panel.custom import JSComponent
+
+from panel.layout.base import ListLike
+
+CSS = """
+.gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+.gutter.gutter-vertical {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+    cursor: row-resize;
+}
+"""
+
+
+class GridJS(ListLike, JSComponent):
 
-pn.extension()
+    _esm = """
+    import Split from 'https://esm.sh/split.js@1.6.5'
+
+    export function render({ model}) {
+      const objects = model.get_child("objects")
 
+      const splitDiv = document.createElement('div');
+      splitDiv.className = 'split';
+      splitDiv.style.height = `calc(100% - ${(objects.length - 1) * 10}px)`;
 
-class ListLikeLayout(NamedListLike, Layoutable, Viewer):
-    objects = Children()
+      let splits = [];
 
-    def __init__(self, *args, **params):
-        super().__init__(*args, **params)
+      objects.forEach((object, index) => {
+        const split = document.createElement('div');
+        splits.push(split)
 
-        layoutable_params = {name: self.param[name] for name in Layoutable.param}
-        self._layout = pn.Column(
-            **layoutable_params,
-        )
-        self._objects()
+        splitDiv.appendChild(split);
+        split.appendChild(object);
+      })
 
-    def __panel__(self):
-        return self._layout
+      Split(splits, {direction: 'vertical'})
 
-    @pn.depends("objects", watch=True)
-    def _objects(self):
-        objects = []
-        for object in self.objects:
-            objects.append(object)
-            objects.append(
-                pn.pane.HTML(
-                    styles={"width": "calc(100% - 15px)", "border-top": "3px dotted #bbb"},
-                    height=10,
-                )
-            )
+      return splitDiv
+    }"""
 
-        self._layout[:] = objects
+    _stylesheets = [CSS]
 
 
-ListLikeLayout(
-    "I love beat boxing",
-    "https://upload.wikimedia.org/wikipedia/commons/d/d3/Beatboxset1_pepouni.ogg",
-    "Yes I do!",
+pn.extension("codeeditor")
+
+grid_js = GridJS(
+    pn.widgets.CodeEditor(
+        value="I love beatboxing\n" * 10, theme="monokai", sizing_mode="stretch_both"
+    ),
+    pn.panel(
+        "https://upload.wikimedia.org/wikipedia/commons/d/d3/Beatboxset1_pepouni.ogg",
+        sizing_mode="stretch_width",
+        height=100,
+    ),
+    pn.widgets.CodeEditor(
+        value="Yes, I do!\n" * 10, theme="monokai", sizing_mode="stretch_both"
+    ),
     styles={"border": "2px solid lightgray"},
+    height=800,
+    width=500,
+    sizing_mode="fixed",
 ).servable()
 ```
 
-You must list `NamedListLike, Layoutable, Viewer` in exactly that order when you define the class! Other combinations might not work.
+You must list `ListLike, JSComponent` in exactly that order when you define the class! Reversing the order to `JSComponent, ListLike` will not work.
 
 :::
 
-:::{tab-item} `JSComponent`
+:::{tab-item} `ReactComponent`
 
 ```{pyodide}
 import panel as pn
 import param
-from panel.custom import JSComponent
-from panel.layout.base import NamedListLike
 
-pn.extension()
+from panel.custom import ReactComponent
+from panel.layout.base import ListLike
 
+CSS = """
+.gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+.gutter.gutter-vertical {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
 
-class ListLikeLayout(NamedListLike, JSComponent):
-    objects = param.List()
 
-    _esm = """
-    export function render({ model }) {
-      const div = document.createElement('div')
-      let objects = model.get_child("objects")
+ cursor: row-resize;
+}
+"""
 
-      objects.forEach((object, index) => {
-        div.appendChild(object);
-
-        // If it's not the last object, add a divider
-        if (index < objects.length - 1) {
-            const divider = document.createElement("div");
-            divider.className = "divider";
-            div.appendChild(divider);
-        }
-        });
-      return div
+
+class GridReact(ListLike, ReactComponent):
+
+    _esm = """
+    import Split from 'https://esm.sh/react-split@2.0.14'
+
+    export function render({ model}) {
+      const objects = model.get_child("objects")
+      const calculatedHeight = `calc( 100% - ${(objects.length - 1) * 10}px )`;
+
+      return (
+        <Split
+            className="split"
+            direction="vertical"
+            style={{ height: "100%" }}
+        >{...objects}</Split>
+      )
     }"""
 
-    _stylesheets = [
-        """
-.divider {border-top: 3px dotted #bbb};
-"""
-    ]
+    _stylesheets = [CSS]
+
 
+pn.extension("codeeditor")
 
-ListLikeLayout(
-    "I love beat boxing",
-    "https://upload.wikimedia.org/wikipedia/commons/d/d3/Beatboxset1_pepouni.ogg",
-    "Yes I do!",
+grid_react = GridReact(
+    pn.widgets.CodeEditor(
+        value="I love beatboxing\n" * 10, theme="monokai", sizing_mode="stretch_both"
+    ),
+    pn.panel(
+        "https://upload.wikimedia.org/wikipedia/commons/d/d3/Beatboxset1_pepouni.ogg",
+        sizing_mode="stretch_width",
+        height=100,
+    ),
+    pn.widgets.CodeEditor(
+        value="Yes, I do!\n" * 10, theme="monokai", sizing_mode="stretch_both"
+    ),
     styles={"border": "2px solid lightgray"},
-).servable()
+    height=800,
+    width=500,
+    sizing_mode="fixed",
+)
+grid_react.servable()
 ```
 
-You must list `NamedListLike, JSComponent` in exactly that order when you define the class! The other
-way around `JSComponent, NamedListLike` will not work.
+:::
+
+::::
+
+:::{note}
+You must list `ListLike, ReactComponent` in exactly that order when you define the class! Reversing the order to `ReactComponent, ListLike` will not work.
+:::
+
+You can now use `[...]` indexing and methods like `.append`, `.insert`, `pop`, etc., as you would expect:
+
+::::{tab-set}
+
+:::{tab-item} `JSComponent`
+
+```{pyodide}
+grid_js.append(
+    pn.widgets.CodeEditor(
+        value="Another one bites the dust\n" * 10,
+        theme="monokai",
+        sizing_mode="stretch_both",
+    )
+)
+```
 
 :::
 
 :::{tab-item} `ReactComponent`
 
 ```{pyodide}
-import panel as pn
+grid_react.append(
+    pn.widgets.CodeEditor(
+        value="Another one bites the dust\n" * 10,
+        theme="monokai",
+        sizing_mode="stretch_both",
+    )
+)
+```
 
-from panel.custom import Children, ReactComponent
+:::
 
-class Example(ReactComponent):
+::::
 
-    objects = Children()
+Let's remove it again:
 
-    _esm = """
-    export function render({ model }) {
-        let objects = model.get_child("objects")
-        return (
-            <div>
-                {objects.map((object, index) => (
-                    <React.Fragment key={index}>
-                        {object}
-                        {index < objects.length - 1 && <div className="divider"></div>}
-                    </React.Fragment>
-                ))}
-            </div>
-        );
-    }"""
+::::{tab-set}
 
+:::{tab-item} `JSComponent`
 
-Example(
-    objects=[pn.panel("A **Markdown** pane!"), pn.widgets.Button(name="Click me!"), {"text": "I'm shown as a JSON Pane"}]
-).servable()
+```{pyodide}
+grid_js.pop(-1)
 ```
 
 :::
 
-::::
+:::{tab-item} `ReactComponent`
+
+```{pyodide}
+grid_react.pop(-1)
+```
 
-:::{note}
-You must list `ListLike, ReactComponent` in exactly that order when you define the class! The other way around `ReactComponent, ListLike` will not work.
 :::
 
-You can now use `[...]` indexing and the `.append`, `.insert`, `pop`, ... methods that you would expect.
+::::
diff --git a/panel/models/react_component.ts b/panel/models/react_component.ts
index ca16b90373..89a8d123c0 100644
--- a/panel/models/react_component.ts
+++ b/panel/models/react_component.ts
@@ -178,7 +178,7 @@ class ErrorBoundary extends React.Component {
     if (this.state.hasError) {
       return React.createElement('div')
     }
-    return React.createElement('div', {}, this.props.children);
+    return React.createElement('div', {className: "error-wrapper"}, this.props.children);
   }
 }
 
diff --git a/panel/styles/models/esm.less b/panel/styles/models/esm.less
index 41f1739dfa..03a614c0e7 100644
--- a/panel/styles/models/esm.less
+++ b/panel/styles/models/esm.less
@@ -1,3 +1,7 @@
+.error-wrapper {
+  display: contents;
+}
+
 .error {
   padding: 0.75rem 1.25rem;
   border: 1px solid transparent;

From 577f8d94210dd2cef909144f0153b20930dd6043 Mon Sep 17 00:00:00 2001
From: Andrew <15331990+ahuang11@users.noreply.github.com>
Date: Mon, 26 Aug 2024 05:57:36 -0700
Subject: [PATCH 002/164] Add TimePicker from Bokeh (#7013)

---
 examples/reference/widgets/TimePicker.ipynb | 104 ++++++++++++++++++++
 panel/models/__init__.py                    |   1 +
 panel/models/index.ts                       |   1 +
 panel/models/time_picker.py                 |   7 ++
 panel/models/time_picker.ts                 |  67 +++++++++++++
 panel/tests/ui/widgets/test_time_picker.py  |  58 +++++++++++
 panel/tests/widgets/test_input.py           |  20 +++-
 panel/widgets/__init__.py                   |   2 +
 panel/widgets/input.py                      |  75 +++++++++++++-
 9 files changed, 331 insertions(+), 4 deletions(-)
 create mode 100644 examples/reference/widgets/TimePicker.ipynb
 create mode 100644 panel/models/time_picker.py
 create mode 100644 panel/models/time_picker.ts
 create mode 100644 panel/tests/ui/widgets/test_time_picker.py

diff --git a/examples/reference/widgets/TimePicker.ipynb b/examples/reference/widgets/TimePicker.ipynb
new file mode 100644
index 0000000000..b4d0f66a14
--- /dev/null
+++ b/examples/reference/widgets/TimePicker.ipynb
@@ -0,0 +1,104 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import datetime as dt\n",
+    "import panel as pn\n",
+    "\n",
+    "pn.extension()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The ``TimePicker`` widget allows entering a time value as text or `datetime.time`. \n",
+    "\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "\n",
+    "#### Parameters:\n",
+    "\n",
+    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
+    "\n",
+    "##### Core\n",
+    "\n",
+    "* **``value``** (str | datetime.time): The current value\n",
+    "* **``start``** (str | datetime.time): Inclusive lower bound of the allowed time selection\n",
+    "* **``end``** (str | datetime.time): Inclusive upper bound of the allowed time selection\n",
+    "\n",
+    "    ```\n",
+    "    +---+------------------------------------+------------+\n",
+    "    | H | Hours (24 hours)                   | 00 to 23   |\n",
+    "    | h | Hours                              | 1 to 12    |\n",
+    "    | G | Hours, 2 digits with leading zeros | 1 to 12    |\n",
+    "    | i | Minutes                            | 00 to 59   |\n",
+    "    | S | Seconds, 2 digits                  | 00 to 59   |\n",
+    "    | s | Seconds                            | 0, 1 to 59 |\n",
+    "    | K | AM/PM                              | AM or PM   |\n",
+    "    +---+------------------------------------+------------+\n",
+    "    ```\n",
+    "    See also https://flatpickr.js.org/formatting/#date-formatting-tokens.\n",
+    "\n",
+    "\n",
+    "\n",
+    "##### Display\n",
+    "\n",
+    "* **``disabled``** (boolean): Whether the widget is editable\n",
+    "* **``name``** (str): The title of the widget\n",
+    "* **``format``** (str): Formatting specification for the display of the picked date.\n",
+    "* **``hour_increment``** (int): Defines the granularity of hour value increments in the UI. Default is 1.\n",
+    "* **``minute_increment``** (int): Defines the granularity of minute value increments in the UI. Default is 1.\n",
+    "* **``second_increment``** (int): Defines the granularity of second value increments in the UI. Default is 1.\n",
+    "* **``seconds``** (bool): Allows to select seconds. By default, only hours and minutes are selectable, and AM/PM depending on the `clock` option. Default is False.\n",
+    "* **``clock``** (bool): Whether to use 12 hour or 24 hour clock.\n",
+    "___"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The `TimePicker` widget allows selecting a time of day."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "time_picker = pn.widgets.TimePicker(name='Time Picker', value=dt.datetime.now().time(), format='H:i K')\n",
+    "time_picker"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Either `datetime.time` or `str` can be used as input and `TimePicker` can be bounded by a start and end time."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "time_picker = pn.widgets.TimePicker(name='Time Picker', value=\"08:28\", start='00:00', end='12:00')\n",
+    "time_picker"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python",
+   "pygments_lexer": "ipython3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
diff --git a/panel/models/__init__.py b/panel/models/__init__.py
index c00045f5bd..a5616ffbfb 100644
--- a/panel/models/__init__.py
+++ b/panel/models/__init__.py
@@ -15,6 +15,7 @@
 from .markup import HTML, JSON, PDF  # noqa
 from .reactive_html import ReactiveHTML  # noqa
 from .state import State  # noqa
+from .time_picker import TimePicker  # noqa
 from .trend import TrendIndicator  # noqa
 from .widgets import (  # noqa
     Audio, Button, CheckboxButtonGroup, CustomMultiSelect, CustomSelect,
diff --git a/panel/models/index.ts b/panel/models/index.ts
index ba9cf6e1fd..013635d924 100644
--- a/panel/models/index.ts
+++ b/panel/models/index.ts
@@ -45,6 +45,7 @@ export {Terminal} from "./terminal"
 export {TextAreaInput} from "./textarea_input"
 export {TextInput} from "./text_input"
 export {TextToSpeech} from "./text_to_speech"
+export {TimePicker} from "./time_picker"
 export {ToggleIcon} from "./toggle_icon"
 export {TooltipIcon} from "./tooltip_icon"
 export {TrendIndicator} from "./trend"
diff --git a/panel/models/time_picker.py b/panel/models/time_picker.py
new file mode 100644
index 0000000000..d211dc5e61
--- /dev/null
+++ b/panel/models/time_picker.py
@@ -0,0 +1,7 @@
+from bokeh.models import TimePicker as BkTimePicker
+
+
+class TimePicker(BkTimePicker):
+    """
+    A custom Panel version of the Bokeh TimePicker model which fixes timezones.
+    """
diff --git a/panel/models/time_picker.ts b/panel/models/time_picker.ts
new file mode 100644
index 0000000000..3ee91e473c
--- /dev/null
+++ b/panel/models/time_picker.ts
@@ -0,0 +1,67 @@
+import {TimePicker as BkTimePicker, TimePickerView as BkTimePickerView} from "@bokehjs/models/widgets/time_picker"
+import type * as p from "@bokehjs/core/properties"
+import type flatpickr from "flatpickr"
+
+export class TimePickerView extends BkTimePickerView {
+  declare model: TimePicker
+
+  private _offset_time(value: string | number): number {
+    const baseDate = new Date(value)
+    const timeZoneOffset = baseDate.getTimezoneOffset() * 60 * 1000
+    return baseDate.getTime() + timeZoneOffset
+  }
+
+  private _setDate(date: string | number): void {
+    date = this._offset_time(date)
+    this.picker.setDate(date)
+  }
+
+  protected override get flatpickr_options(): flatpickr.Options.Options {
+    // on init
+    const options = super.flatpickr_options
+    if (options.defaultDate != null) { options.defaultDate = this._offset_time(options.defaultDate as string) }
+    return options
+  }
+
+  override connect_signals(): void {
+    super.connect_signals()
+
+    const {value} = this.model.properties
+    this.connect(value.change, () => {
+      const {value} = this.model
+      if (value != null && typeof value === "number") {
+        // we need to handle it when programmatically changed thru Python, e.g.
+        // time_picker.value = "4:08" or time_picker.value = "datetime.time(4, 8)"
+        // else, when changed in the UI, e.g. by typing in the input field
+        // no special handling is needed
+        this._setDate(value)
+      }
+    })
+  }
+
+}
+
+export namespace TimePicker {
+  export type Attrs = p.AttrsOf<Props>
+  export type Props = BkTimePicker.Props & {
+  }
+}
+
+export interface TimePicker extends TimePicker.Attrs { }
+
+export class TimePicker extends BkTimePicker {
+  declare properties: TimePicker.Props
+
+  constructor(attrs?: Partial<TimePicker.Attrs>) {
+    super(attrs)
+  }
+
+  static override __module__ = "panel.models.time_picker"
+
+  static {
+    this.prototype.default_view = TimePickerView
+
+    this.define<TimePicker.Props>(({ }) => ({
+    }))
+  }
+}
diff --git a/panel/tests/ui/widgets/test_time_picker.py b/panel/tests/ui/widgets/test_time_picker.py
new file mode 100644
index 0000000000..b8688958ae
--- /dev/null
+++ b/panel/tests/ui/widgets/test_time_picker.py
@@ -0,0 +1,58 @@
+import datetime
+
+import pytest
+
+from panel.tests.util import serve_component, wait_until
+from panel.widgets import TimePicker
+
+pytestmark = pytest.mark.ui
+
+
+def test_time_picker(page):
+
+    time_picker = TimePicker(value="18:08", format="H:i")
+
+    serve_component(page, time_picker)
+
+    # test init corrected timezone
+    locator = page.locator("#input")
+    assert locator.get_attribute("value") == "18:08:00"
+
+    # test UI change
+    locator = page.locator("input.bk-input.form-control.input")
+    locator.click()
+    wait_until(lambda: page.locator("input.numInput.flatpickr-hour").is_visible())
+    locator = page.locator("input.numInput.flatpickr-hour")
+    locator.press("ArrowDown")
+    locator.press("Enter")
+    wait_until(lambda: time_picker.value == datetime.time(17, 8))
+
+    # test str value change
+    time_picker.value = "04:08"
+    wait_until(lambda: time_picker.value == "04:08")
+    locator = page.locator("#input")
+    assert locator.get_attribute("value") == "04:08:00"
+
+    # test datetime.time value change
+    time_picker.value = datetime.time(18, 8)
+    wait_until(lambda: time_picker.value == datetime.time(18, 8))
+    locator = page.locator("#input")
+    assert locator.get_attribute("value") == "18:08:00"
+
+
+@pytest.mark.parametrize("timezone_id", [
+    "America/New_York",
+    "Europe/Berlin",
+    "UTC",
+])
+def test_time_picker_timezone_different(page, timezone_id):
+    context = page.context.browser.new_context(
+        timezone_id=timezone_id,
+    )
+    page = context.new_page()
+
+    time_picker = TimePicker(value="18:08", format="H:i")
+    serve_component(page, time_picker)
+
+    locator = page.locator("#input")
+    assert locator.get_attribute("value") == "18:08:00"
diff --git a/panel/tests/widgets/test_input.py b/panel/tests/widgets/test_input.py
index c36b0d03d3..54e1d9ebbe 100644
--- a/panel/tests/widgets/test_input.py
+++ b/panel/tests/widgets/test_input.py
@@ -1,4 +1,4 @@
-from datetime import date, datetime
+from datetime import date, datetime, time as dt_time
 from pathlib import Path
 
 import numpy as np
@@ -10,7 +10,7 @@
 from panel.widgets import (
     ArrayInput, Checkbox, DatePicker, DateRangePicker, DatetimeInput,
     DatetimePicker, DatetimeRangeInput, DatetimeRangePicker, FileInput,
-    FloatInput, IntInput, LiteralInput, StaticText, TextInput,
+    FloatInput, IntInput, LiteralInput, StaticText, TextInput, TimePicker,
 )
 
 
@@ -185,6 +185,22 @@ def test_datetime_range_picker(document, comm):
         datetime_range_picker._process_events({'value': '2018-09-10 00:00:01'})
 
 
+def test_time_picker(document, comm):
+    time_picker = TimePicker(name='Time Picker', value=dt_time(hour=18), format='H:i K')
+    assert time_picker.value == dt_time(hour=18)
+    assert time_picker.format == 'H:i K'
+    assert time_picker.start is None
+    assert time_picker.end is None
+
+
+def test_time_picker_str(document, comm):
+    time_picker = TimePicker(name='Time Picker', value="08:28", start='00:00', end='12:00')
+    assert time_picker.value == "08:28"
+    assert time_picker.format == 'H:i'
+    assert time_picker.start == "00:00"
+    assert time_picker.end == "12:00"
+
+
 def test_file_input(document, comm):
     file_input = FileInput(accept='.txt')
 
diff --git a/panel/widgets/__init__.py b/panel/widgets/__init__.py
index 5a8c08d459..02d8180038 100644
--- a/panel/widgets/__init__.py
+++ b/panel/widgets/__init__.py
@@ -47,6 +47,7 @@
     DatetimeInput, DatetimePicker, DatetimeRangeInput, DatetimeRangePicker,
     FileDropper, FileInput, FloatInput, IntInput, LiteralInput, NumberInput,
     PasswordInput, Spinner, StaticText, Switch, TextAreaInput, TextInput,
+    TimePicker,
 )
 from .misc import FileDownload, JSONEditor, VideoStream  # noqa
 from .player import DiscretePlayer, Player  # noqa
@@ -136,6 +137,7 @@
     "TextEditor",
     "TextInput",
     "TextToSpeech",
+    "TimePicker",
     "Toggle",
     "ToggleGroup",
     "ToggleIcon",
diff --git a/panel/widgets/input.py b/panel/widgets/input.py
index 625decae03..d8addf1620 100644
--- a/panel/widgets/input.py
+++ b/panel/widgets/input.py
@@ -8,7 +8,7 @@
 import json
 
 from base64 import b64decode
-from datetime import date, datetime
+from datetime import date, datetime, time as dt_time
 from typing import (
     TYPE_CHECKING, Any, ClassVar, Iterable, Mapping, Optional,
 )
@@ -31,7 +31,7 @@
 from ..layout import Column, Panel
 from ..models import (
     DatetimePicker as _bkDatetimePicker, TextAreaInput as _bkTextAreaInput,
-    TextInput as _BkTextInput,
+    TextInput as _BkTextInput, TimePicker as _BkTimePicker,
 )
 from ..util import (
     escape, lazy_load, param_reprs, try_datetime64_to_datetime,
@@ -808,6 +808,77 @@ def _deserialize_value(self, value):
         return value
 
 
+class _TimeCommon(Widget):
+
+    hour_increment = param.Integer(default=1, doc="""
+    Defines the granularity of hour value increments in the UI.
+    """)
+
+    minute_increment = param.Integer(default=1, doc="""
+    Defines the granularity of minute value increments in the UI.
+    """)
+
+    second_increment = param.Integer(default=1, doc="""
+    Defines the granularity of second value increments in the UI.
+    """)
+
+    seconds = param.Boolean(default=False, doc="""
+    Allows to select seconds. By default only hours and minutes are
+    selectable, and AM/PM depending on the `clock` option.
+    """)
+
+    clock = param.String(default='12h', doc="""
+        Whether to use 12 hour or 24 hour clock.""")
+
+    __abstract = True
+
+
+class TimePicker(_TimeCommon):
+    """
+    The `TimePicker` allows selecting a `time` value using a text box
+    and a time-picking utility.
+
+    Reference: https://panel.holoviz.org/reference/widgets/TimePicker.html
+
+    :Example:
+
+    >>> TimePicker(
+    ...     value="12:59:31", start="09:00:00", end="18:00:00", name="Time"
+    ... )
+    """
+
+    value = param.ClassSelector(default=None, class_=(dt_time, str), doc="""
+        The current value""")
+
+    start = param.ClassSelector(default=None, class_=(dt_time, str), doc="""
+        Inclusive lower bound of the allowed time selection""")
+
+    end = param.ClassSelector(default=None, class_=(dt_time, str), doc="""
+        Inclusive upper bound of the allowed time selection""")
+
+    format = param.String(default='H:i', doc="""
+        Formatting specification for the display of the picked date.
+
+        +---+------------------------------------+------------+
+        | H | Hours (24 hours)                   | 00 to 23   |
+        | h | Hours                              | 1 to 12    |
+        | G | Hours, 2 digits with leading zeros | 1 to 12    |
+        | i | Minutes                            | 00 to 59   |
+        | S | Seconds, 2 digits                  | 00 to 59   |
+        | s | Seconds                            | 0, 1 to 59 |
+        | K | AM/PM                              | AM or PM   |
+        +---+------------------------------------+------------+
+
+        See also https://flatpickr.js.org/formatting/#date-formatting-tokens.
+    """)
+
+    _rename: ClassVar[Mapping[str, str | None]] = {
+        'start': 'min_time', 'end': 'max_time', 'format': 'time_format'
+    }
+
+    _widget_type: ClassVar[type[Model]] = _BkTimePicker
+
+
 class ColorPicker(Widget):
     """
     The `ColorPicker` widget allows selecting a hexadecimal RGB color value

From 0eea037d569aca0eb8197f6c9db4ff5ca93de248 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 26 Aug 2024 14:58:07 +0200
Subject: [PATCH 003/164] Detect WebGL support on BrowserInfo (#6931)

---
 panel/io/browser.py     |  3 +++
 panel/models/browser.py |  2 ++
 panel/models/browser.ts | 23 +++++++++++++++++------
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/panel/io/browser.py b/panel/io/browser.py
index 2f22bed1d4..66fad402aa 100644
--- a/panel/io/browser.py
+++ b/panel/io/browser.py
@@ -46,6 +46,9 @@ class BrowserInfo(Syncable):
     webdriver = param.Boolean(default=None, doc="""
         Indicates whether the user agent is controlled by automation.""")
 
+    webgl = param.Boolean(default=None, doc="""
+        Indicates whether the browser has WebGL support.""")
+
     # Mapping from parameter name to bokeh model property name
     _rename: ClassVar[Mapping[str, str | None]] = {"name": None}
 
diff --git a/panel/models/browser.py b/panel/models/browser.py
index 2709ab283c..c4f970e858 100644
--- a/panel/models/browser.py
+++ b/panel/models/browser.py
@@ -24,3 +24,5 @@ class BrowserInfo(Model):
     timezone_offset = Nullable(Float())
 
     webdriver = Nullable(Bool())
+
+    webgl = Nullable(Bool())
diff --git a/panel/models/browser.ts b/panel/models/browser.ts
index 311830c5d7..8aa69ccb81 100644
--- a/panel/models/browser.ts
+++ b/panel/models/browser.ts
@@ -24,6 +24,15 @@ export class BrowserInfoView extends View {
     if (timezone_offset != null) {
       this.model.timezone_offset = timezone_offset
     }
+    try {
+      const canvas = document.createElement("canvas")
+      this.model.webgl = !!(
+        window.WebGLRenderingContext &&
+          (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
+      )
+    } catch (e) {
+      this.model.webgl = false
+    }
     this._has_finished = true
     this.notify_finished()
   }
@@ -38,6 +47,7 @@ export namespace BrowserInfo {
     timezone: p.Property<string | null>
     timezone_offset: p.Property<number | null>
     webdriver: p.Property<boolean | null>
+    webgl: p.Property<boolean | null>
   }
 }
 
@@ -56,12 +66,13 @@ export class BrowserInfo extends Model {
     this.prototype.default_view = BrowserInfoView
 
     this.define<BrowserInfo.Props>(({Bool, Nullable, Float, Str}) => ({
-      dark_mode:          [ Nullable(Bool), null ],
-      device_pixel_ratio: [ Nullable(Float),  null ],
-      language:           [ Nullable(Str),  null ],
-      timezone:           [ Nullable(Str),  null ],
-      timezone_offset:    [ Nullable(Float),  null ],
-      webdriver:          [ Nullable(Bool), null ],
+      dark_mode:          [ Nullable(Bool),  null ],
+      device_pixel_ratio: [ Nullable(Float), null ],
+      language:           [ Nullable(Str),   null ],
+      timezone:           [ Nullable(Str),   null ],
+      timezone_offset:    [ Nullable(Float), null ],
+      webdriver:          [ Nullable(Bool),  null ],
+      webgl:              [ Nullable(Bool),  null ],
     }))
   }
 }

From 625d955abb052544e7bb01634f23919c879baedf Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Mon, 26 Aug 2024 16:12:25 +0200
Subject: [PATCH 004/164] Document esm panes (#7029)

---
 .../custom_components/esm/custom_panes.md     | 537 ++++++++++++++++++
 doc/how_to/custom_components/index.md         |   1 +
 .../custom_components/JSComponent.ipynb       |  11 +-
 .../custom_components/ReactComponent.ipynb    |  13 +-
 panel/models/react_component.ts               |   8 +-
 panel/models/reactive_esm.ts                  |  19 +-
 panel/tests/ui/test_custom.py                 |  37 +-
 7 files changed, 612 insertions(+), 14 deletions(-)
 create mode 100644 doc/how_to/custom_components/esm/custom_panes.md

diff --git a/doc/how_to/custom_components/esm/custom_panes.md b/doc/how_to/custom_components/esm/custom_panes.md
new file mode 100644
index 0000000000..a4192b2599
--- /dev/null
+++ b/doc/how_to/custom_components/esm/custom_panes.md
@@ -0,0 +1,537 @@
+# Create Panes with ReactiveHTML
+
+In this guide we will show you how to efficiently implement custom panes using `JSComponent`, `ReactComponent` and `AnyWidgetComponent` to get input from the user.
+
+## Creating a ChartJS Pane
+
+This example will show you the basics of creating a [ChartJS](https://www.chartjs.org/docs/latest/) pane.
+
+::::{tab-set}
+
+:::{tab-item} `JSComponent`
+
+```{pyodide}
+import panel as pn
+import param
+from panel.custom import JSComponent
+
+
+class ChartJSComponent(JSComponent):
+    object = param.Dict()
+
+    _esm = """
+import { Chart } from "https://esm.sh/chart.js/auto"
+
+export function render({ model, el }) {
+  const canvasEl = document.createElement('canvas')
+  // Add DOM node before creating the chart
+  el.append(canvasEl)
+  const create_chart = () => new Chart(canvasEl.getContext('2d'), model.object)
+  let chart = create_chart()
+  model.on("object", () => {
+     chart.destroy()
+     chart = create_chart()
+   })
+  model.on('remove', () => chart.destroy());
+}
+"""
+
+
+def plot(chart_type="line"):
+    return {
+        "type": chart_type,
+        "data": {
+            "labels": ["January", "February", "March", "April", "May", "June", "July"],
+            "datasets": [
+                {
+                    "label": "Data",
+                    "backgroundColor": "rgb(255, 99, 132)",
+                    "borderColor": "rgb(255, 99, 132)",
+                    "data": [0, 10, 5, 2, 20, 30, 45],
+                }
+            ],
+        },
+        "options": {
+            "responsive": True,
+            "maintainAspectRatio": False,
+        },
+    }
+
+
+chart_type = pn.widgets.RadioBoxGroup(
+    name="Chart Type", options=["bar", "line"], inline=True
+)
+chart = ChartJSComponent(
+    object=pn.bind(plot, chart_type), height=400, sizing_mode="stretch_width"
+)
+pn.Column(chart_type, chart).servable()
+```
+
+Note how we had to add the `canvasEl` to the `el` before we could render the chart. Some libraries will require the element to be attached to the DOM before we could render it. Dealing with layout issues like this sometimes requires a bit of iteration. If you get stuck, share your question and minimum, reproducible code example on [Discourse](https://discourse.holoviz.org/).
+
+:::
+
+::: {tab-item} `ReactComponent`
+
+```{pyodide}
+import panel as pn
+import param
+
+from panel.custom import ReactComponent
+
+
+class ChartReactComponent(ReactComponent):
+
+    object = param.Dict()
+
+    _esm = """
+import { Chart } from 'https://esm.sh/react-chartjs-2@4.3.1';
+import { Chart as ChartJS, registerables } from "https://esm.sh/chart.js@3.9.1";
+
+ChartJS.register(...registerables);
+
+export function render({ model }) {
+  const [plot] = model.useState('object')
+  return <Chart {...plot}></Chart>
+};
+"""
+
+
+def data(chart_type="line"):
+    return {
+        "type": chart_type,
+        "data": {
+            "labels": ["January", "February", "March", "April", "May", "June", "July"],
+            "datasets": [
+                {
+                    "label": "Data",
+                    "backgroundColor": "rgb(255, 99, 132)",
+                    "borderColor": "rgb(255, 99, 132)",
+                    "data": [0, 10, 5, 2, 20, 30, 45],
+                }
+            ],
+        },
+        "options": {
+            "responsive": True,
+            "maintainAspectRatio": False,
+        },
+    }
+
+
+chart_type = pn.widgets.RadioBoxGroup(
+    name="Chart Type", options=["bar", "line"], inline=True
+)
+chart = ChartReactComponent(
+    object=pn.bind(data, chart_type), height=600, sizing_mode="stretch_width"
+)
+pn.Column(chart_type, chart).servable()
+```
+
+:::
+
+::: {tab-item} `AnyWidgetComponent`
+
+```{pyodide}
+import panel as pn
+import param
+from panel.custom import AnyWidgetComponent
+
+
+class AnyWidgetComponent(AnyWidgetComponent):
+    object = param.Dict()
+
+    _esm = """
+import { Chart } from "https://esm.sh/chart.js/auto"
+
+function render({ model, el }) {
+  const canvasEl = document.createElement('canvas')
+  // Add DOM node before creating the chart
+  el.append(canvasEl)
+  const create_chart = () => new Chart(canvasEl.getContext('2d'), model.object)
+  let chart = create_chart()
+  model.on("object", () => {
+     chart.destroy()
+     chart = create_chart()
+   })
+}
+
+export default { render };
+"""
+
+def data(chart_type="line"):
+    return {
+        "type": chart_type,
+        "data": {
+            "labels": ["January", "February", "March", "April", "May", "June", "July"],
+            "datasets": [
+                {
+                    "label": "Data",
+                    "backgroundColor": "rgb(255, 99, 132)",
+                    "borderColor": "rgb(255, 99, 132)",
+                    "data": [0, 10, 5, 2, 20, 30, 45],
+                }
+            ],
+        },
+        "options": {
+            "responsive": True,
+            "maintainAspectRatio": False,
+        },
+    }
+
+
+chart_type = pn.widgets.RadioBoxGroup(
+    name="Chart Type", options=["bar", "line"], inline=True
+)
+chart = AnyWidgetComponent(
+    object=pn.bind(data, chart_type), height=400, sizing_mode="stretch_width"
+)
+pn.Column(chart_type, chart).servable()
+```
+
+Note, again, that we have to append the `canvasEl` to the `el` before we create the chart.
+:::
+
+::::
+
+## Creating a Cytoscape Pane
+
+This example will show you how to build a more advanced [CytoscapeJS](https://js.cytoscape.org/) pane.
+
+::::{tab-set}
+
+:::{tab-item} `JSComponent`
+
+```{pyodide}
+import param
+import panel as pn
+
+from panel.custom import JSComponent
+
+
+class CytoscapeJS(JSComponent):
+
+    object = param.List()
+
+    layout = param.Selector(
+        default="cose",
+        objects=[
+            "breadthfirst",
+            "circle",
+            "concentric",
+            "cose",
+            "grid",
+            "preset",
+            "random",
+        ],
+    )
+    style = param.String("", doc="Use to set the styles of the nodes/edges")
+
+    zoom = param.Number(1, bounds=(1, 100))
+    pan = param.Dict({"x": 0, "y": 0})
+
+    data = param.List(doc="Use to send node's data/attributes to Cytoscape")
+
+    selected_nodes = param.List()
+    selected_edges = param.List()
+
+    _esm = """
+import { default as cytoscape} from "https://esm.sh/cytoscape"
+let cy = null;
+
+function removeCy() {
+    if (cy) { cy.destroy() }
+}
+
+export function render({ model }) {
+    removeCy();
+
+    const div = document.createElement('div');
+    div.style.width = "100%";
+    div.style.height = "100%";
+    // Cytoscape raises warning of position is static
+    div.style.position = "relative";
+
+    model.on('after_render', () => {
+        cy = cytoscape({
+            container: div,
+            layout: {name: model.layout},
+            elements: model.object,
+            zoom: model.zoom,
+            pan: model.pan
+        })
+        cy.style().resetToDefault().append(model.style).update()
+        cy.on('select unselect', function (evt) {
+            model.selected_nodes = cy.elements('node:selected').map(el => el.id())
+            model.selected_edges = cy.elements('edge:selected').map(el => el.id())
+        });
+
+        model.on('object', () => {cy.json({elements: model.object});cy.resize().fit()})
+        model.on('layout', () => {cy.layout({name: model.layout}).run()})
+        model.on('zoom', () => {cy.zoom(model.zoom)})
+        model.on('pan', () => {cy.pan(model.pan)})
+        model.on('style', () => {cy.style().resetToDefault().append(model.style).update()})
+
+        window.addEventListener('resize', function(event){
+            cy.center();
+            cy.resize().fit();
+        });
+        model.on('remove', removeCy)
+    })
+
+    return div
+}
+"""
+
+
+pn.extension(sizing_mode="stretch_width")
+
+elements = [
+    {"data": {"id": "A", "label": "A"}},
+    {"data": {"id": "B", "label": "B"}},
+    {"data": {"id": "A-B", "source": "A", "target": "B"}},
+]
+graph = CytoscapeJS(
+    object=elements,
+    sizing_mode="stretch_width",
+    height=600,
+    styles={"border": "1px solid black"},
+)
+pn.Row(
+    pn.Param(
+        graph,
+        parameters=[
+            "object",
+            "zoom",
+            "pan",
+            "layout",
+            "style",
+            "selected_nodes",
+            "selected_edges",
+        ],
+        sizing_mode="fixed",
+        width=300,
+    ),
+    graph,
+).servable()
+```
+
+:::
+
+:::{tab-item} `ReactComponent`
+
+```{pyodide}
+import param
+import panel as pn
+
+from panel.custom import ReactComponent
+
+
+class CytoscapeReact(ReactComponent):
+
+    object = param.List()
+
+    layout = param.Selector(
+        default="cose",
+        objects=[
+            "breadthfirst",
+            "circle",
+            "concentric",
+            "cose",
+            "grid",
+            "preset",
+            "random",
+        ],
+    )
+    style = param.String("", doc="Use to set the styles of the nodes/edges")
+
+    zoom = param.Number(1, bounds=(1, 100))
+    pan = param.Dict({"x": 0, "y": 0})
+
+    data = param.List(doc="Use to send node's data/attributes to Cytoscape")
+
+    selected_nodes = param.List()
+    selected_edges = param.List()
+
+    _esm = """
+import CytoscapeComponent from 'https://esm.sh/react-cytoscapejs';
+
+export function render({ model }) {
+  function configure(cy){
+    cy.on('select unselect', function (evt) {
+      model.selected_nodes = cy.elements('node:selected').map(el => el.id())
+      model.selected_edges = cy.elements('edge:selected').map(el => el.id())
+    });
+  }
+
+
+  const [layout] = model.useState('layout')
+  const [object] = model.useState('object')
+  const [pan] = model.useState('pan')
+  const [style] = model.useState('style')
+  const [zoom] = model.useState('zoom')
+
+  return (
+    <CytoscapeComponent
+        elements={object}
+        //layout={ { 'name': layout} }
+        zoom={zoom}
+        pan={pan}
+        stylesheet={style}
+        style={{ width: '100%', height: model.height, position: 'relative' }}
+        cy={configure}
+    />
+  );
+}
+"""
+
+pn.extension(sizing_mode="stretch_width")
+
+elements = [
+    {"data": {"id": "A", "label": "A"}},
+    {"data": {"id": "B", "label": "B"}},
+    {"data": {"id": "A-B", "source": "A", "target": "B"}},
+]
+graph = CytoscapeReact(
+    object=elements,
+    sizing_mode="stretch_width",
+    height=600,
+    styles={"border": "1px solid black"},
+)
+pn.Row(
+    pn.Param(
+        graph,
+        parameters=[
+            "object",
+            "zoom",
+            "pan",
+            "layout",
+            "style",
+            "selected_nodes",
+            "selected_edges",
+            "height",
+        ],
+        sizing_mode="fixed",
+        width=300,
+    ),
+    graph,
+).servable()
+```
+
+:::
+
+::: `AnyWidgetComponent`
+
+```{pyodide}
+import param
+import panel as pn
+
+from panel.custom import AnyWidgetComponent
+
+
+class CytoscapeAnyWidget(AnyWidgetComponent):
+
+    object = param.List()
+
+    layout = param.Selector(
+        default="cose",
+        objects=[
+            "breadthfirst",
+            "circle",
+            "concentric",
+            "cose",
+            "grid",
+            "preset",
+            "random",
+        ],
+    )
+    style = param.String("", doc="Use to set the styles of the nodes/edges")
+
+    zoom = param.Number(1, bounds=(1, 100))
+    pan = param.Dict({"x": 0, "y": 0})
+
+    data = param.List(doc="Use to send node's data/attributes to Cytoscape")
+
+    selected_nodes = param.List()
+    selected_edges = param.List()
+
+    _esm = """
+import { default as cytoscape} from "https://esm.sh/cytoscape"
+let cy = null;
+
+function removeCy() {
+    if (cy) { cy.destroy() }
+}
+
+function render({ model, el }) {
+    removeCy();
+
+    cy = cytoscape({
+        container: el,
+        layout: {name: model.get('layout')},
+        elements: model.get('object'),
+        zoom: model.get('zoom'),
+        pan: model.get('pan')
+    })
+    cy.style().resetToDefault().append(model.get('style')).update()
+    cy.on('select unselect', function (evt) {
+        model.set("selected_nodes", cy.elements('node:selected').map(el => el.id()))
+        model.set("selected_edges", cy.elements('edge:selected').map(el => el.id()))
+        model.save_changes()
+    });
+
+    model.on('change:object', () => {cy.json({elements: model.get('object')});cy.resize().fit()})
+    model.on('change:layout', () => {cy.layout({name: model.get('layout')}).run()})
+    model.on('change:zoom', () => {cy.zoom(model.get('zoom'))})
+    model.on('change:pan', () => {cy.pan(model.get('pan'))})
+    model.on('change:style', () => {cy.style().resetToDefault().append(model.get('style')).update()})
+
+    window.addEventListener('resize', function(event){
+        cy.center();
+        cy.resize().fit();
+    });
+}
+
+export default { render };
+"""
+    _stylesheets=["""
+.__________cytoscape_container {
+    position: relative;
+}
+"""]
+
+
+pn.extension("cytoscape", sizing_mode="stretch_width")
+
+elements = [
+    {"data": {"id": "A", "label": "A"}},
+    {"data": {"id": "B", "label": "B"}},
+    {"data": {"id": "A-B", "source": "A", "target": "B"}},
+]
+graph = CytoscapeAnyWidget(
+    object=elements,
+    sizing_mode="stretch_width",
+    height=600,
+    styles={"border": "1px solid black"},
+)
+pn.Row(
+    pn.Param(
+        graph,
+        parameters=[
+            "object",
+            "zoom",
+            "pan",
+            "layout",
+            "style",
+            "selected_nodes",
+            "selected_edges",
+        ],
+        sizing_mode="fixed",
+        width=300,
+    ),
+    graph,
+).servable()
+```
+
+:::
+
+::::
diff --git a/doc/how_to/custom_components/index.md b/doc/how_to/custom_components/index.md
index 9c284a099d..081ecd7588 100644
--- a/doc/how_to/custom_components/index.md
+++ b/doc/how_to/custom_components/index.md
@@ -134,6 +134,7 @@ Build custom components wrapping Material UI using `ReactComponent`.
 
 esm/build
 esm/callbacks
+esm/custom_panes
 esm/custom_widgets
 esm/custom_layout
 esm/dataframe
diff --git a/examples/reference/custom_components/JSComponent.ipynb b/examples/reference/custom_components/JSComponent.ipynb
index fc87414d43..fcbdc4eb67 100644
--- a/examples/reference/custom_components/JSComponent.ipynb
+++ b/examples/reference/custom_components/JSComponent.ipynb
@@ -103,11 +103,16 @@
     "- `.on(['<parameter>', ...], callback)`: Allows adding an event handler for multiple parameters at once.\n",
     "- `.on('change:<parameter>', callback)`: The `change:` prefix allows disambiguating change events from lifecycle hooks should a parameter name and lifecycle hook overlap.\n",
     "\n",
+    "The `change:` prefix allows disambiguating change events from lifecycle hooks should a parameter name and lifecycle hook overlap.\n",
+    "\n",
     "#### Lifecycle Hooks\n",
     "\n",
-    "- `after_render`: Called once after the component has been fully rendered.\n",
-    "- `after_resize`: Called after the component has been resized.\n",
-    "- `remove`: Called when the component view is being removed from the DOM.\n",
+    "- `.on('after_layout', callback)`: Called whenever the layout around the component is changed.\n",
+    "- `.on('after_render', callback)`: Called once after the component has been fully rendered.\n",
+    "- `.on('resize', callback)`: Called after the component has been resized.\n",
+    "- `.on('remove', callback)`: Called when the component view is being removed from the DOM.\n",
+    "\n",
+    "The `lifecycle:` prefix allows disambiguating lifecycle hooks from change events should a parameter name and lifecycle hook overlap.\n",
     "\n",
     "## Usage\n",
     "\n",
diff --git a/examples/reference/custom_components/ReactComponent.ipynb b/examples/reference/custom_components/ReactComponent.ipynb
index ca5648b2fc..f774dd8e0c 100644
--- a/examples/reference/custom_components/ReactComponent.ipynb
+++ b/examples/reference/custom_components/ReactComponent.ipynb
@@ -73,9 +73,7 @@
     "- **`_stylesheets`** (List[str | PurePath] | None): This optional attribute accepts a list of CSS strings or paths to CSS files. It supports automatic reloading in development environments.\n",
     "\n",
     ":::note\n",
-    "\n",
     "You may specify a path to a file as a string instead of a PurePath. The path should be specified relative to the file its specified in.\n",
-    "\n",
     ":::\n",
     "\n",
     "#### `render` Function\n",
@@ -109,11 +107,16 @@
     "- `.on(['<parameter>', ...], callback)`: Allows adding an event handler for multiple parameters at once.\n",
     "- `.on('change:<parameter>', callback)`: The `change:` prefix allows disambiguating change events from lifecycle hooks should a parameter name and lifecycle hook overlap.\n",
     "\n",
+    "The `change:` prefix allows disambiguating change events from lifecycle hooks should a parameter name and lifecycle hook overlap.\n",
+    "\n",
     "#### Lifecycle Hooks\n",
     "\n",
-    "- `after_render`: Called once after the component has been fully rendered.\n",
-    "- `after_resize`: Called after the component has been resized.\n",
-    "- `remove`: Called when the component view is being removed from the DOM.\n",
+    "- `.on('after_layout', callback)`: Called whenever the layout around the component is changed.\n",
+    "- `.on('after_render', callback)`: Called once after the component has been fully rendered.\n",
+    "- `.on('resize', callback)`: Called after the component has been resized.\n",
+    "- `.on('remove', callback)`: Called when the component view is being removed from the DOM.\n",
+    "\n",
+    "The `lifecycle:` prefix allows disambiguating lifecycle hooks from change events should a parameter name and lifecycle hook overlap.\n",
     "\n",
     "## Usage\n",
     "\n",
diff --git a/panel/models/react_component.ts b/panel/models/react_component.ts
index 89a8d123c0..6909cc64c6 100644
--- a/panel/models/react_component.ts
+++ b/panel/models/react_component.ts
@@ -24,6 +24,11 @@ export class ReactComponentView extends ReactiveESMView {
     for (const cb of handlers) {
       cb()
     }
+    if (!this._rendered) {
+      for (const cb of (this._lifecycle_handlers.get("after_layout") || [])) {
+        cb()
+      }
+    }
     this._rendered = true
   }
 
@@ -37,8 +42,6 @@ export class ReactComponentView extends ReactiveESMView {
     } catch(e) {
       view.render_error(e)
     }
-    view._changing = false
-    view.after_rendered()
   }`
     let import_code = `
 import * as React from "react"
@@ -185,6 +188,7 @@ class ErrorBoundary extends React.Component {
 class Component extends React.Component {
 
   componentDidMount() {
+    this.props.view._changing = false
     this.props.view.after_rendered()
   }
 
diff --git a/panel/models/reactive_esm.ts b/panel/models/reactive_esm.ts
index e600a6d884..f20e790368 100644
--- a/panel/models/reactive_esm.ts
+++ b/panel/models/reactive_esm.ts
@@ -152,8 +152,9 @@ export class ReactiveESMView extends HTMLBoxView {
   _child_rendered: Map<UIElementView, boolean> = new Map()
   _event_handlers: ((event: ESMEvent) => void)[] = []
   _lifecycle_handlers: Map<string, (() => void)[]> =  new Map([
+    ["after_layout", []],
     ["after_render", []],
-    ["after_resize", []],
+    ["resize", []],
     ["remove", []],
   ])
   _rendered: boolean = false
@@ -306,6 +307,11 @@ export default {render}`
     }
     this.render_children()
     this.model_proxy.on(this.accessed_children, () => { this._stale_children = true })
+    if (!this._rendered) {
+      for (const cb of (this._lifecycle_handlers.get("after_layout") || [])) {
+        cb()
+      }
+    }
     this._rendered = true
   }
 
@@ -352,7 +358,16 @@ export default {render}`
   override after_resize(): void {
     super.after_resize()
     if (this._rendered && !this._changing) {
-      for (const cb of (this._lifecycle_handlers.get("after_resize") || [])) {
+      for (const cb of (this._lifecycle_handlers.get("resize") || [])) {
+        cb()
+      }
+    }
+  }
+
+  override after_layout(): void {
+    super.after_layout()
+    if (this._rendered && !this._changing) {
+      for (const cb of (this._lifecycle_handlers.get("after_layout") || [])) {
         cb()
       }
     }
diff --git a/panel/tests/ui/test_custom.py b/panel/tests/ui/test_custom.py
index 81769b321f..241fc56eef 100644
--- a/panel/tests/ui/test_custom.py
+++ b/panel/tests/ui/test_custom.py
@@ -489,6 +489,39 @@ def test_after_render_lifecycle_hooks(page, component):
     expect(page.locator('h1')).to_have_text("rendered")
 
 
+class JSLifecycleAfterLayout(JSComponent):
+
+    _esm = """
+    export function render({ model }) {
+      const h1 = document.createElement('h1')
+      model.on('after_layout', () => { h1.textContent = 'layouted' })
+      return h1
+    }"""
+
+
+class ReactLifecycleAfterLayout(ReactComponent):
+
+    _esm = """
+    import {useState} from "react"
+
+    export function render({ model }) {
+      const [text, setText] = useState("")
+      model.on('after_layout', () => { setText('layouted') })
+      return <h1>{text}</h1>
+    }"""
+
+
+@pytest.mark.parametrize('component', [JSLifecycleAfterLayout, ReactLifecycleAfterLayout])
+def test_after_layout_lifecycle_hooks(page, component):
+    example = component()
+
+    serve_component(page, example)
+
+    expect(page.locator('h1')).to_have_count(1)
+
+    expect(page.locator('h1')).to_have_text("layouted")
+
+
 class JSLifecycleAfterResize(JSComponent):
 
     _esm = """
@@ -496,7 +529,7 @@ class JSLifecycleAfterResize(JSComponent):
       const h1 = document.createElement('h1')
       h1.textContent = "0"
       let count = 0
-      model.on('after_resize', () => { count += 1; h1.textContent = `${count}`; })
+      model.on('resize', () => { count += 1; h1.textContent = `${count}`; })
       return h1
     }"""
 
@@ -507,7 +540,7 @@ class ReactLifecycleAfterResize(ReactComponent):
 
     export function render({ model }) {
       const [count, setCount] = useState(0)
-      model.on('after_resize', () => { setCount(count+1); })
+      model.on('resize', () => { setCount(count+1); })
       return <h1>{count}</h1>
     }"""
 

From 3697335ec3659bed9e26bcf32d0cb9c08d0f8ea7 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 26 Aug 2024 16:57:03 +0200
Subject: [PATCH 005/164] Bump panel.js version to 1.5.0-b.6

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index 3b49cf4b41..e449d83c1a 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-b.5",
+  "version": "1.5.0-b.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.0-b.5",
+      "version": "1.5.0-b.6",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.5.1",
diff --git a/panel/package.json b/panel/package.json
index a3e45944e4..108a36611e 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-b.5",
+  "version": "1.5.0-b.6",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From 09efaddeda5f9f6d9802a89cc464e07120ad9e9a Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 10:49:29 +0200
Subject: [PATCH 006/164] Fix tabs issues in ESM custom pane docs (#7187)

---
 doc/how_to/custom_components/esm/custom_panes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/how_to/custom_components/esm/custom_panes.md b/doc/how_to/custom_components/esm/custom_panes.md
index a4192b2599..988d048024 100644
--- a/doc/how_to/custom_components/esm/custom_panes.md
+++ b/doc/how_to/custom_components/esm/custom_panes.md
@@ -71,7 +71,7 @@ Note how we had to add the `canvasEl` to the `el` before we could render the cha
 
 :::
 
-::: {tab-item} `ReactComponent`
+:::{tab-item} `ReactComponent`
 
 ```{pyodide}
 import panel as pn

From fb5ef8f219a9491f7a663cc4a10459123f341d23 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 10:56:45 +0200
Subject: [PATCH 007/164] Fix issue with template variables when saving
 Template (#7189)

---
 panel/io/save.py            |  2 ++
 panel/tests/io/test_save.py | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/panel/io/save.py b/panel/io/save.py
index dd51985feb..79b81f6f46 100644
--- a/panel/io/save.py
+++ b/panel/io/save.py
@@ -248,6 +248,7 @@ def save(
     elif isinstance(resources, BkResources):
         mode = resources.mode
 
+    template_variables = dict(template_variables) if template_variables else {}
     comm = Comm()
     with config.set(embed=embed):
         if isinstance(panel, Document):
@@ -255,6 +256,7 @@ def save(
         elif isinstance(panel, BaseTemplate):
             with set_resource_mode(mode):
                 panel._init_doc(doc, title=title)
+                template_variables.update(doc._template_variables)
             model = doc
         else:
             model = panel.get_root(doc, comm)
diff --git a/panel/tests/io/test_save.py b/panel/tests/io/test_save.py
index 1256aaf385..dff455b72e 100644
--- a/panel/tests/io/test_save.py
+++ b/panel/tests/io/test_save.py
@@ -11,6 +11,7 @@
 from panel.io.resources import CDN_DIST
 from panel.models.vega import VegaPlot
 from panel.pane import Alert, Vega
+from panel.template import BootstrapTemplate
 from panel.tests.util import hv_available
 
 vega_example = {
@@ -72,3 +73,21 @@ def test_static_path_in_holoviews_save(tmpdir):
     content = out_file.read_text()
 
     assert 'src="/static/js/bokeh' in content and 'src="static/js/bokeh' not in content
+
+
+def test_save_template():
+    template = BootstrapTemplate(
+        title="Hello World",
+        sidebar=["# Hello Sidebar"],
+        main=['# Hello Main'],
+    )
+
+    sio = StringIO()
+    template.save(sio)
+
+    sio.seek(0)
+    html = sio.read()
+
+    for doc in template._documents:
+        for root in doc.roots:
+            assert f"data-root-id=\"{root.ref['id']}\"" in html

From 9c95e58a72a3d46815f60c6b959d54f97357bfe9 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 11:05:42 +0200
Subject: [PATCH 008/164] Fix LaTeX pane MathJax rendering (#7188)

* Fix LaTeX pane MathJax rendering

* Update test
---
 panel/models/mathjax.py              | 17 ++---------------
 panel/models/mathjax.ts              | 16 +++++++++++++++-
 panel/pane/equation.py               | 25 ++++---------------------
 panel/tests/pane/test_equation.py    |  2 +-
 panel/tests/ui/pane/test_equation.py | 24 ++++++++++++++++++++++++
 5 files changed, 46 insertions(+), 38 deletions(-)
 create mode 100644 panel/tests/ui/pane/test_equation.py

diff --git a/panel/models/mathjax.py b/panel/models/mathjax.py
index cec8bbb490..a448ed315c 100644
--- a/panel/models/mathjax.py
+++ b/panel/models/mathjax.py
@@ -1,23 +1,10 @@
 """
 Defines a custom MathJax bokeh model to render text using MathJax.
 """
-from bokeh.models import Markup
+from bokeh.models import Div
 
 
-class MathJax(Markup):
+class MathJax(Div):
     """
     A bokeh model that renders text using MathJax.
     """
-
-    __javascript__ = [
-        "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"
-    ]
-
-    __js_skip__ = {'MathJax': __javascript__}
-
-    __js_require__ = {
-        'paths': {
-            'mathjax': "//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML"
-        },
-        'shim': {'mathjax': {'exports': "MathJax"}}
-    }
diff --git a/panel/models/mathjax.ts b/panel/models/mathjax.ts
index 027e9a0c2a..cd300f5897 100644
--- a/panel/models/mathjax.ts
+++ b/panel/models/mathjax.ts
@@ -14,7 +14,21 @@ export class MathJaxView extends PanelMarkupView {
 
   override render(): void {
     super.render()
-    this.container.innerHTML = this.has_math_disabled() ? this.model.text : this.process_tex(this.model.text)
+    const text = this.model.text
+    const tex_parts = this.provider.MathJax.find_tex(text)
+    const processed_text: string[] = []
+
+    let last_index: number | undefined = 0
+    for (const part of tex_parts) {
+      processed_text.push(text.slice(last_index, part.start.n))
+      processed_text.push(this.provider.MathJax.tex2svg(part.math, {display: part.display}).outerHTML)
+      last_index = part.end.n
+    }
+    if (last_index! < text.length) {
+      processed_text.push(text.slice(last_index))
+    }
+
+    this.container.innerHTML = processed_text.join("")
   }
 }
 
diff --git a/panel/pane/equation.py b/panel/pane/equation.py
index afcd59f6e3..d988415ead 100644
--- a/panel/pane/equation.py
+++ b/panel/pane/equation.py
@@ -4,7 +4,6 @@
 """
 from __future__ import annotations
 
-import re
 import sys
 
 from typing import (
@@ -24,15 +23,6 @@
     from bokeh.model import Model
 
 
-def is_sympy_expr(obj: Any) -> bool:
-    """Test for sympy.Expr types without usually needing to import sympy"""
-    if 'sympy' in sys.modules and 'sympy' in str(type(obj).__class__):
-        import sympy  # type: ignore
-        if isinstance(obj, sympy.Expr):
-            return True
-    return False
-
-
 class LaTeX(ModelPane):
     r"""
     The `LaTeX` pane allows rendering LaTeX equations. It uses either
@@ -71,20 +61,13 @@ class LaTeX(ModelPane):
 
     @classmethod
     def applies(cls, obj: Any) -> float | bool | None:
-        if is_sympy_expr(obj) or hasattr(obj, '_repr_latex_'):
+        if hasattr(obj, '_repr_latex_'):
             return 0.05
         elif isinstance(obj, str):
             return None
         else:
             return False
 
-    def _process_param_change(self, params) -> dict[str, Any]:
-        if self.renderer == "mathjax":
-            # Replace $$math$$ with \[math\] and $math$ with \(math\)
-            msg = re.sub(r"(\$\$)(.*?)(\$\$)", r"\[\2\]", params["object"])
-            params["object"] = re.sub(r"(\$)(.*?)(\$)", r"\(\2\)", msg)
-        return super()._process_param_change(params)
-
     def _get_model_type(self, root: Model, comm: Comm | None) -> type[Model]:
         module = self.renderer
         if module is None:
@@ -92,6 +75,7 @@ def _get_model_type(self, root: Model, comm: Comm | None) -> type[Model]:
                 module = 'mathjax'
             else:
                 module = 'katex'
+            self.renderer = module
         model = 'KaTeX' if module == 'katex' else 'MathJax'
         return lazy_load(f'panel.models.{module}', model, isinstance(comm, JupyterComm), root)
 
@@ -110,7 +94,6 @@ def _transform_object(self, obj: Any) -> dict[str, Any]:
             obj = ''
         elif hasattr(obj, '_repr_latex_'):
             obj = obj._repr_latex_()
-        elif is_sympy_expr(obj):
-            import sympy
-            obj = r'$'+sympy.latex(obj)+'$'
+        if self.renderer == 'mathjax' and obj.startswith('$') and not obj.startswith('$$'):
+            obj = f'${obj}$'
         return dict(object=obj)
diff --git a/panel/tests/pane/test_equation.py b/panel/tests/pane/test_equation.py
index 54c2bd5b80..e1468566b8 100644
--- a/panel/tests/pane/test_equation.py
+++ b/panel/tests/pane/test_equation.py
@@ -24,7 +24,7 @@ def test_latex_mathjax_pane(document, comm):
     assert pane._models[model.ref['id']][0] is model
     assert type(model).__name__ == 'MathJax'
     # assert model.text == r"$\frac{p^3}{q}$"
-    assert model.text == r"\(\frac{p^3}{q}\)"
+    assert model.text == r"$$\frac{p^3}{q}$$"
 
     # Cleanup
     pane._cleanup(model)
diff --git a/panel/tests/ui/pane/test_equation.py b/panel/tests/ui/pane/test_equation.py
new file mode 100644
index 0000000000..e31dd53e00
--- /dev/null
+++ b/panel/tests/ui/pane/test_equation.py
@@ -0,0 +1,24 @@
+import pytest
+
+pytest.importorskip("playwright")
+
+from playwright.sync_api import expect
+
+from panel.pane import LaTeX
+from panel.tests.util import serve_component
+
+pytestmark = pytest.mark.ui
+
+def test_latex_mathjax_renderer(page):
+    ltx = LaTeX('$1+1$', renderer='mathjax')
+
+    serve_component(page, ltx)
+
+    expect(page.locator('mjx-container')).to_have_count(1)
+
+def test_latex_katex_renderer(page):
+    ltx = LaTeX('$1+1$', renderer='katex')
+
+    serve_component(page, ltx)
+
+    expect(page.locator('.katex-html')).to_have_count(1)

From 1f81c71490c0a2603419f3b4ced4bdcf5a36c97b Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 11:49:46 +0200
Subject: [PATCH 009/164] Add panel.custom to default namespace (#7193)

---
 panel/__init__.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/panel/__init__.py b/panel/__init__.py
index 0d9006e8c8..f07dd0e957 100644
--- a/panel/__init__.py
+++ b/panel/__init__.py
@@ -71,6 +71,7 @@
 from .template import Template  # noqa
 from .widgets import indicators, widget  # noqa
 
+from . import custom  # isort:skip noqa has to be after widgets
 from . import chat  # isort:skip noqa has to be after widgets
 
 __all__ = (
@@ -79,6 +80,7 @@
     "Card",
     "chat",
     "Column",
+    "custom",
     "Feed",
     "FlexBox",
     "FloatPanel",

From 49070119275b8b1fd9a626834a68a61d69d84f64 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 13:10:52 +0200
Subject: [PATCH 010/164] Ensure OAuth expiry is numeric and can be compared
 (#7191)

---
 panel/auth.py | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/panel/auth.py b/panel/auth.py
index a68a50c41a..28c206c11a 100644
--- a/panel/auth.py
+++ b/panel/auth.py
@@ -1026,6 +1026,12 @@ async def get_user(handler):
             except Exception:
                 pass
 
+            # Try casting expiry to float as it may be stored as bytes
+            try:
+                expiry = float(expiry)
+            except Exception:
+                expiry = None
+
             if expiry is None:
                 expiry = handler.get_secure_cookie('oauth_expiry', max_age_days=config.oauth_expiry)
                 if expiry is None:

From da83299450fa3cfc6fd4507f259eb928cd505ac8 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 15:20:30 +0200
Subject: [PATCH 011/164] Ensure DiscretePlayer handles dict options (#7192)

---
 panel/widgets/player.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/panel/widgets/player.py b/panel/widgets/player.py
index 86a60dc74f..93d94b656a 100644
--- a/panel/widgets/player.py
+++ b/panel/widgets/player.py
@@ -168,6 +168,9 @@ class DiscretePlayer(PlayerBase, SelectBase):
 
     interval = param.Integer(default=500, doc="Interval between updates")
 
+    show_value = param.Boolean(default=True, doc="""
+        Whether to show the widget value""")
+
     value = param.Parameter(doc="Current player value")
 
     value_throttled = param.Parameter(constant=True, doc="Current player value")
@@ -185,6 +188,7 @@ def _process_param_change(self, msg):
             msg['end'] = len(values) - 1
             if values and not isIn(self.value, values):
                 self.value = values[0]
+            msg['options'] = self.labels
         if 'value' in msg:
             value = msg['value']
             if isIn(value, values):

From 0ca1a86b5552320da9794ae8b0ea2cb8bb05d90c Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 15:41:08 +0200
Subject: [PATCH 012/164] Documentation fixes for 1.5.0b7 (#7195)

* Load pyodide wheels from CDN root wheels directory

* Update gallery links

* Clean up tabs
---
 doc/conf.py                                   |  6 ++--
 doc/gallery/index.md                          | 30 +++++++++----------
 .../custom_components/esm/custom_layout.md    | 21 -------------
 .../custom_components/esm/custom_panes.md     | 13 +-------
 .../custom_components/esm/custom_widgets.md   |  6 ----
 5 files changed, 19 insertions(+), 57 deletions(-)

diff --git a/doc/conf.py b/doc/conf.py
index 185ebc643b..cbdfa33cb7 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -21,7 +21,7 @@
     BOKEH_VERSION, MINIMUM_VERSIONS, PY_VERSION, PYODIDE_VERSION,
     PYSCRIPT_VERSION,
 )
-from panel.io.resources import CDN_DIST
+from panel.io.resources import CDN_ROOT
 
 PANEL_ROOT = pathlib.Path(panel.__file__).parent
 
@@ -150,8 +150,8 @@
     panel_req = f'./wheels/panel-{py_version}-py3-none-any.whl'
     bokeh_req = f'./wheels/bokeh-{BOKEH_VERSION}-py3-none-any.whl'
 else:
-    panel_req = f'{CDN_DIST}wheels/panel-{PY_VERSION}-py3-none-any.whl'
-    bokeh_req = f'{CDN_DIST}wheels/bokeh-{BOKEH_VERSION}-py3-none-any.whl'
+    panel_req = f'{CDN_ROOT}wheels/panel-{PY_VERSION}-py3-none-any.whl'
+    bokeh_req = f'{CDN_ROOT}wheels/bokeh-{BOKEH_VERSION}-py3-none-any.whl'
 
 def get_requirements():
     with open('pyodide_dependencies.json') as deps:
diff --git a/doc/gallery/index.md b/doc/gallery/index.md
index 6f85075392..1051277d95 100644
--- a/doc/gallery/index.md
+++ b/doc/gallery/index.md
@@ -8,7 +8,7 @@ These Panel applications demonstrate what you can build with Panel and how to do
 :::{grid-item-card} Portfolio Optimizer
 
 ```{image} https://assets.holoviz.org/panel/gallery/portfolio_optimizer.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/portfolio_optimizer
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/portfolio_optimizer
 :width: 100%
 ```
 
@@ -20,7 +20,7 @@ Stock portfolio optimization by exploring the efficient frontier and optimizing
 :::{grid-item-card} Streaming Videostream
 
 ```{image} https://assets.holoviz.org/panel/gallery/streaming_videostream.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/streaming_videostream
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/streaming_videostream
 :width: 100%
 ```
 
@@ -32,7 +32,7 @@ Applying face detection and other image transforms on your webcam input using sc
 :::{grid-item-card} Windturbines Explorer
 
 ```{image} https://assets.holoviz.org/panel/gallery/windturbines.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/windturbines
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/windturbines
 :width: 100%
 ```
 
@@ -44,7 +44,7 @@ Visually explore a dataset of US Windturbines.
 :::{grid-item-card} Portfolio Analyzer
 
 ```{image} https://assets.holoviz.org/panel/gallery/portfolio_analyzer.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/portfolio_analyzer
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/portfolio_analyzer
 :width: 100%
 ```
 
@@ -56,7 +56,7 @@ Analyze a stock portfolio using Plotly and Tabulator components.
 :::{grid-item-card} OGGM Glaciers
 
 ```{image} https://assets.holoviz.org/panel/gallery/glaciers.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/glaciers
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/glaciers
 :width: 100%
 ```
 
@@ -68,7 +68,7 @@ Visually explore the worlds glaciers in this application built in collaboration
 :::{grid-item-card} VTK Slicer
 
 ```{image} https://assets.holoviz.org/panel/gallery/vtk_slicer.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/vtk_slicer
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/vtk_slicer
 :width: 100%
 ```
 
@@ -80,7 +80,7 @@ Visualizing MRI brain scans and their cross-sections using a VTK volume and link
 :::{grid-item-card} Deck.GL: NYC Taxi
 
 ```{image} https://assets.holoviz.org/panel/gallery/nyc_deckgl.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/nyc_deckgl
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/nyc_deckgl
 :width: 100%
 ```
 
@@ -92,7 +92,7 @@ NYC Taxi trips visualized and animated using Deck.GL.
 :::{grid-item-card} Gapminders
 
 ```{image} https://assets.holoviz.org/panel/gallery/gapminders.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/gapminders
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/gapminders
 :width: 100%
 ```
 
@@ -104,7 +104,7 @@ Visualizing the Gapminders data using the most common Python plotting libraries.
 :::{grid-item-card} VTK: St. Helens
 
 ```{image} https://assets.holoviz.org/panel/gallery/vtk_interactive.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/vtk_interactive
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/vtk_interactive
 :width: 100%
 ```
 
@@ -116,7 +116,7 @@ Visualizing the surface of Mount St. Helens using VTK and linked widgets to cont
 :::{grid-item-card} Penguin Crossfiltering
 
 ```{image} https://assets.holoviz.org/panel/gallery/penguin_crossfilter.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/penguin_crossfilter
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/penguin_crossfilter
 :width: 100%
 ```
 
@@ -128,7 +128,7 @@ Palmer Penguins data visualized using a set of linked cross-filtering plots.
 :::{grid-item-card} Deck.GL: Game of Life
 
 ```{image} https://assets.holoviz.org/panel/gallery/deckgl_game_of_life.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/deckgl_game_of_life
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/deckgl_game_of_life
 :width: 100%
 ```
 
@@ -140,7 +140,7 @@ Game of Life simulation rendered on a 3D plane using Deck.gl.
 :::{grid-item-card} hvPlot Explorer
 
 ```{image} https://assets.holoviz.org/panel/gallery/hvplot_explorer.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/hvplot_explorer
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/hvplot_explorer
 :width: 100%
 ```
 
@@ -152,7 +152,7 @@ Use the hvPlot explorer to interactive visualize your dataset.
 :::{grid-item-card} Iris KMeans Clustering
 
 ```{image} https://assets.holoviz.org/panel/gallery/iris_kmeans.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/iris_kmeans
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/iris_kmeans
 :width: 100%
 ```
 
@@ -164,7 +164,7 @@ Interactively apply KMeans clustering on the Iris dataset.
 :::{grid-item-card} XGBoost Classifier
 
 ```{image} https://assets.holoviz.org/panel/gallery/xgboost_classifier.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/xgboost_classifier
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/xgboost_classifier
 :width: 100%
 ```
 
@@ -176,7 +176,7 @@ Interactively apply a XGBoost classifier on the Iris dataset.
 :::{grid-item-card} Altair Brushing
 
 ```{image} https://assets.holoviz.org/panel/gallery/altair_brushing.png
-:target: https://|gallery-endpoint|.holoviz.dsp.anaconda.com/altair_brushing
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/altair_brushing
 :width: 100%
 ```
 
diff --git a/doc/how_to/custom_components/esm/custom_layout.md b/doc/how_to/custom_components/esm/custom_layout.md
index c8c9ccd080..6ce1f71b5d 100644
--- a/doc/how_to/custom_components/esm/custom_layout.md
+++ b/doc/how_to/custom_components/esm/custom_layout.md
@@ -11,7 +11,6 @@ This example will show you how to create a *split* layout containing two objects
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 import panel as pn
 
@@ -164,7 +163,6 @@ split_react = SplitReact(
 )
 split_react.servable()
 ```
-
 :::
 
 ::::
@@ -174,19 +172,15 @@ Let's verify that the layout will automatically update when the `object` is chan
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 split_js.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 split_react.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
 ```
-
 :::
 
 ::::
@@ -196,7 +190,6 @@ Now, let's change it back:
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 split_js.right=pn.widgets.CodeEditor(
     value="Right",
@@ -206,11 +199,9 @@ split_js.right=pn.widgets.CodeEditor(
     language="python",
 )
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 split_react.right=pn.widgets.CodeEditor(
     value="Right",
@@ -220,7 +211,6 @@ split_react.right=pn.widgets.CodeEditor(
     language="python",
 )
 ```
-
 :::
 
 ::::
@@ -232,7 +222,6 @@ A Panel `Column` or `Row` works as a list of objects. It is *list-like*. In this
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 import panel as pn
 import param
@@ -306,11 +295,9 @@ grid_js = GridJS(
 ```
 
 You must list `ListLike, JSComponent` in exactly that order when you define the class! Reversing the order to `JSComponent, ListLike` will not work.
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 import panel as pn
 import param
@@ -375,7 +362,6 @@ grid_react = GridReact(
 )
 grid_react.servable()
 ```
-
 :::
 
 ::::
@@ -399,11 +385,9 @@ grid_js.append(
     )
 )
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 grid_react.append(
     pn.widgets.CodeEditor(
@@ -413,7 +397,6 @@ grid_react.append(
     )
 )
 ```
-
 :::
 
 ::::
@@ -423,19 +406,15 @@ Let's remove it again:
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 grid_js.pop(-1)
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 grid_react.pop(-1)
 ```
-
 :::
 
 ::::
diff --git a/doc/how_to/custom_components/esm/custom_panes.md b/doc/how_to/custom_components/esm/custom_panes.md
index 988d048024..167c4e93ee 100644
--- a/doc/how_to/custom_components/esm/custom_panes.md
+++ b/doc/how_to/custom_components/esm/custom_panes.md
@@ -9,7 +9,6 @@ This example will show you the basics of creating a [ChartJS](https://www.chartj
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 import panel as pn
 import param
@@ -68,11 +67,9 @@ pn.Column(chart_type, chart).servable()
 ```
 
 Note how we had to add the `canvasEl` to the `el` before we could render the chart. Some libraries will require the element to be attached to the DOM before we could render it. Dealing with layout issues like this sometimes requires a bit of iteration. If you get stuck, share your question and minimum, reproducible code example on [Discourse](https://discourse.holoviz.org/).
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 import panel as pn
 import param
@@ -126,11 +123,9 @@ chart = ChartReactComponent(
 )
 pn.Column(chart_type, chart).servable()
 ```
-
 :::
 
 ::: {tab-item} `AnyWidgetComponent`
-
 ```{pyodide}
 import panel as pn
 import param
@@ -200,7 +195,6 @@ This example will show you how to build a more advanced [CytoscapeJS](https://js
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 import param
 import panel as pn
@@ -314,11 +308,9 @@ pn.Row(
     graph,
 ).servable()
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 import param
 import panel as pn
@@ -416,11 +408,9 @@ pn.Row(
     graph,
 ).servable()
 ```
-
 :::
 
-::: `AnyWidgetComponent`
-
+:::{tab-item} `AnyWidgetComponent`
 ```{pyodide}
 import param
 import panel as pn
@@ -531,7 +521,6 @@ pn.Row(
     graph,
 ).servable()
 ```
-
 :::
 
 ::::
diff --git a/doc/how_to/custom_components/esm/custom_widgets.md b/doc/how_to/custom_components/esm/custom_widgets.md
index 4a94389259..a8db677078 100644
--- a/doc/how_to/custom_components/esm/custom_widgets.md
+++ b/doc/how_to/custom_components/esm/custom_widgets.md
@@ -9,7 +9,6 @@ This example we will show you to create an `ImageButton`.
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 import panel as pn
 import param
@@ -74,11 +73,9 @@ button = ImageButton(
 )
 pn.Column(button, button.param.clicks,).servable()
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 import panel as pn
 import param
@@ -136,11 +133,9 @@ button = ImageButton(
 )
 pn.Column(button, button.param.clicks).servable()
 ```
-
 :::
 
 :::{tab-item} `AnyWidgetComponent`
-
 ```{pyodide}
 import panel as pn
 import param
@@ -207,7 +202,6 @@ button = ImageButton(
 
 pn.Column(button, button.param.clicks).servable()
 ```
-
 :::
 
 ::::

From 40b942ecf2a3157fc8735cc7eb5c6a04f25c4188 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 16:18:42 +0200
Subject: [PATCH 013/164] Bump panel.js version to 1.5.0-b.7

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index e449d83c1a..3a5793421c 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-b.6",
+  "version": "1.5.0-b.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.0-b.6",
+      "version": "1.5.0-b.7",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.5.1",
diff --git a/panel/package.json b/panel/package.json
index 108a36611e..4e050919f5 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-b.6",
+  "version": "1.5.0-b.7",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From d0976d87b2578032305fd0eb542665854d665c92 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 16:28:57 +0200
Subject: [PATCH 014/164] Correctly detect max depth of NestedSelect if level
 is empty (#7194)

---
 panel/tests/widgets/test_select.py | 11 ++++++++++-
 panel/widgets/select.py            | 14 +++-----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/panel/tests/widgets/test_select.py b/panel/tests/widgets/test_select.py
index 603791f7f2..51e78cb5e2 100644
--- a/panel/tests/widgets/test_select.py
+++ b/panel/tests/widgets/test_select.py
@@ -300,6 +300,15 @@ def test_nested_select_init_empty(document, comm):
     assert select.options is None
     assert select.levels == []
 
+def test_nested_select_max_depth_empty_first_sublevel(document, comm):
+    select = NestedSelect(options={'foo': ['a', 'b'], 'bar': []})
+
+    assert select._max_depth == 2
+
+def test_nested_select_max_depth_empty_second_sublevel(document, comm):
+    select = NestedSelect(options={'foo': {'0': ['a', 'b'], '1': []}, 'bar': {'0': []}})
+
+    assert select._max_depth == 3
 
 def test_nested_select_init_levels(document, comm):
     options = {
@@ -500,7 +509,7 @@ def test_nested_select_partial_options_set(document, comm):
     select.options = {"Ben": []}
     assert select._widgets[0].value == 'Ben'
     assert select._widgets[0].visible
-    assert select.value == {0: 'Ben'}
+    assert select.value == {0: 'Ben', 1: None}
 
 
 def test_nested_select_partial_value_init(document, comm):
diff --git a/panel/widgets/select.py b/panel/widgets/select.py
index d3bda7ddd8..bbccae86b5 100644
--- a/panel/widgets/select.py
+++ b/panel/widgets/select.py
@@ -422,19 +422,11 @@ def _uses_callable(self, d):
         return False
 
     def _find_max_depth(self, d, depth=1):
-        if d is None or len(d) == 0:
-            return 0
-        elif not isinstance(d, dict):
-            return depth
-
+        if isinstance(d, list) or d is None:
+            return depth-1
         max_depth = depth
         for value in d.values():
-            if isinstance(value, dict):
-                max_depth = max(max_depth, self._find_max_depth(value, depth + 1))
-            # dict means it's a level, so it's not the last level
-            # list means it's a leaf, so it's the last level
-            if isinstance(value, list) and len(value) == 0 and max_depth > 0:
-                max_depth -= 1
+            max_depth = max(max_depth, self._find_max_depth(value, depth + 1))
         return max_depth
 
     def _resolve_callable_options(self, i, options) -> dict | list:

From 1335db57cedd6e888adf16b1ae249d3eb5d11a22 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 16:54:49 +0200
Subject: [PATCH 015/164] Fix BootstrapTemplate header_color issue (#7196)

---
 panel/template/bootstrap/bootstrap.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/template/bootstrap/bootstrap.css b/panel/template/bootstrap/bootstrap.css
index 4fcff5ca93..64babe8f96 100644
--- a/panel/template/bootstrap/bootstrap.css
+++ b/panel/template/bootstrap/bootstrap.css
@@ -91,7 +91,7 @@ a.navbar-brand {
 }
 
 #header .title {
-  color: var(--bs-primary-color);
+  color: var(--header-color);
   text-decoration: none;
   text-decoration-line: none;
   text-decoration-style: initial;

From f2e3e5fd4ff636367f0743385aa4cc5a3dcf32e7 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 18:40:10 +0200
Subject: [PATCH 016/164] Various improvements for ESM components (#7197)

* Various improvements for ESM components

* Small fixes

* Further typing fix
---
 .../custom_components/esm/custom_layout.md    |  2 +-
 .../custom_components/esm/custom_panes.md     | 13 ++--
 .../custom_components/esm/custom_widgets.md   |  2 +-
 panel/custom.py                               |  2 +
 panel/models/anywidget_component.ts           | 14 ++--
 panel/models/esm.py                           |  2 +
 panel/models/reactive_esm.ts                  | 64 +++++++++++--------
 panel/util/__init__.py                        |  8 +++
 8 files changed, 68 insertions(+), 39 deletions(-)

diff --git a/doc/how_to/custom_components/esm/custom_layout.md b/doc/how_to/custom_components/esm/custom_layout.md
index 6ce1f71b5d..d5ad7bc692 100644
--- a/doc/how_to/custom_components/esm/custom_layout.md
+++ b/doc/how_to/custom_components/esm/custom_layout.md
@@ -1,4 +1,4 @@
-# Create Custom Layouts
+# Create Custom Layouts using ESM Components
 
 In this guide, we will demonstrate how to build custom, reusable layouts using [`JSComponent`](../../reference/panes/JSComponent.md) or [`ReactComponent`](../../reference/panes/ReactComponent.md).
 
diff --git a/doc/how_to/custom_components/esm/custom_panes.md b/doc/how_to/custom_components/esm/custom_panes.md
index 167c4e93ee..c03e2b267b 100644
--- a/doc/how_to/custom_components/esm/custom_panes.md
+++ b/doc/how_to/custom_components/esm/custom_panes.md
@@ -1,4 +1,4 @@
-# Create Panes with ReactiveHTML
+# Create Panes using ESM Components
 
 In this guide we will show you how to efficiently implement custom panes using `JSComponent`, `ReactComponent` and `AnyWidgetComponent` to get input from the user.
 
@@ -142,12 +142,13 @@ function render({ model, el }) {
   const canvasEl = document.createElement('canvas')
   // Add DOM node before creating the chart
   el.append(canvasEl)
-  const create_chart = () => new Chart(canvasEl.getContext('2d'), model.object)
+  const create_chart = () => new Chart(canvasEl.getContext('2d'), model.get("object"))
   let chart = create_chart()
   model.on("object", () => {
-     chart.destroy()
-     chart = create_chart()
-   })
+    chart.destroy()
+    chart = create_chart()
+  })
+  return () => chart.destroy()
 }
 
 export default { render };
@@ -490,7 +491,7 @@ export default { render };
 """]
 
 
-pn.extension("cytoscape", sizing_mode="stretch_width")
+pn.extension(sizing_mode="stretch_width")
 
 elements = [
     {"data": {"id": "A", "label": "A"}},
diff --git a/doc/how_to/custom_components/esm/custom_widgets.md b/doc/how_to/custom_components/esm/custom_widgets.md
index a8db677078..279b77662a 100644
--- a/doc/how_to/custom_components/esm/custom_widgets.md
+++ b/doc/how_to/custom_components/esm/custom_widgets.md
@@ -1,4 +1,4 @@
-# Custom Widgets
+# Create Custom Widgets using ESM Components
 
 In this guide we will show you how to efficiently implement custom widgets using `JSComponent`, `ReactComponent` and `AnyWidgetComponent` to get input from the user.
 
diff --git a/panel/custom.py b/panel/custom.py
index f606854484..4e0ad40b22 100644
--- a/panel/custom.py
+++ b/panel/custom.py
@@ -28,6 +28,7 @@
 from .reactive import (  # noqa
     Reactive, ReactiveCustomBase, ReactiveHTML, ReactiveMetaBase,
 )
+from .util import camel_to_kebab
 from .util.checks import import_available
 from .viewable import (  # noqa
     Child, Children, Layoutable, Viewable, is_viewable_param,
@@ -182,6 +183,7 @@ def _init_params(self) -> dict[str, Any]:
             data_params[k] = v
         data_props = self._process_param_change(data_params)
         params.update({
+            'class_name': camel_to_kebab(cls.__name__),
             'data': self._data_model(**{p: v for p, v in data_props.items() if p not in ignored}),
             'dev': config.autoreload or getattr(self, '_debug', False),
             'esm': self._render_esm(),
diff --git a/panel/models/anywidget_component.ts b/panel/models/anywidget_component.ts
index 796a2aea8b..47ddd7b452 100644
--- a/panel/models/anywidget_component.ts
+++ b/panel/models/anywidget_component.ts
@@ -94,7 +94,7 @@ class AnyWidgetAdapter extends AnyWidgetModelAdapter {
 export class AnyWidgetComponentView extends ReactComponentView {
   declare model: AnyWidgetComponent
   adapter: AnyWidgetAdapter
-  destroyer: ((props: any) => void) | null
+  destroyer: Promise<((props: any) => void) | null>
 
   override initialize(): void {
     super.initialize()
@@ -104,7 +104,7 @@ export class AnyWidgetComponentView extends ReactComponentView {
   override remove(): void {
     super.remove()
     if (this.destroyer) {
-      this.destroyer({model: this.adapter, el: this.container})
+      this.destroyer.then((d: any) => d({model: this.adapter, el: this.container}))
     }
   }
 
@@ -112,9 +112,15 @@ export class AnyWidgetComponentView extends ReactComponentView {
     return `
 const view = Bokeh.index.find_one_by_id('${this.model.id}')
 
-let props = {view, model: view.adapter, data: view.model.data, el: view.container}
+function render() {
+  const out = Promise.resolve(view.render_fn({
+    view, model: view.adapter, data: view.model.data, el: view.container
+  }) || null)
+  view.destroyer = out
+  out.then(() => view.after_rendered())
+}
 
-view.destroyer = view.render_fn(props) || null`
+export default {render}`
   }
 
   override after_rendered(): void {
diff --git a/panel/models/esm.py b/panel/models/esm.py
index 5308c55feb..d24bcfc932 100644
--- a/panel/models/esm.py
+++ b/panel/models/esm.py
@@ -27,6 +27,8 @@ def event_values(self) -> dict[str, Any]:
 
 class ReactiveESM(HTMLBox):
 
+    class_name = bp.String()
+
     children = bp.List(bp.String)
 
     data = bp.Instance(DataModel)
diff --git a/panel/models/reactive_esm.ts b/panel/models/reactive_esm.ts
index f20e790368..e3a839ee8b 100644
--- a/panel/models/reactive_esm.ts
+++ b/panel/models/reactive_esm.ts
@@ -183,11 +183,14 @@ export class ReactiveESMView extends HTMLBoxView {
 
   override connect_signals(): void {
     super.connect_signals()
-    const {esm, importmap} = this.model.properties
+    const {esm, importmap, class_name} = this.model.properties
     this.on_change([esm, importmap], async () => {
       this.compiled_module = await this.model.compiled_module
       this.invalidate_render()
     })
+    this.on_change(class_name, () => {
+      this.container.className = this.model.class_name
+    })
     const child_props = this.model.children.map((child: string) => this.model.data.properties[child])
     this.on_change(child_props, () => {
       this.update_children()
@@ -265,6 +268,7 @@ export class ReactiveESMView extends HTMLBoxView {
     this._rendered = false
     set_size(this.el, this.model)
     this.container = div()
+    this.container.className = this.model.class_name
     set_size(this.container, this.model, false)
     this.shadow_el.append(this.container)
     if (this.model.compile_error) {
@@ -450,6 +454,7 @@ export namespace ReactiveESM {
 
   export type Props = HTMLBox.Props & {
     children: p.Property<any>
+    class_name: p.Property<string>
     data: p.Property<any>
     dev: p.Property<boolean>
     esm: p.Property<string>
@@ -588,7 +593,7 @@ export class ReactiveESM extends HTMLBox {
     this.compile_error = null
     const compiled = this.compile()
     if (compiled === null) {
-      this.compiled_module = null
+      this.compiled_module = Promise.resolve(null)
       return
     }
     this.compiled = compiled
@@ -596,27 +601,31 @@ export class ReactiveESM extends HTMLBox {
     const url = URL.createObjectURL(
       new Blob([this.compiled], {type: "text/javascript"}),
     )
-    try {
-      // @ts-ignore
-      this.compiled_module = importShim(url)
-      const mod = await this.compiled_module
-      let initialize
-      if (mod.initialize) {
-        initialize = mod.initialize
-      } else if (mod.default && mod.default.initialize) {
-        initialize = mod.default.initialize
-      }
-      if (initialize) {
-        this._run_initializer(initialize)
-      }
-    } catch (e: any) {
-      this.compiled_module = null
-      if (this.dev) {
-        this.compile_error = e
-      } else {
-        throw e
+    // @ts-ignore
+    this.compiled_module = importShim(url).then((mod: any) => {
+      try {
+        let initialize
+        if (mod.initialize) {
+          initialize = mod.initialize
+        } else if (mod.default && mod.default.initialize) {
+          initialize = mod.default.initialize
+        } else if (typeof mod.default === "function") {
+          const initialized = mod.default()
+          mod = {default: initialized}
+          initialize = initialized.initialize
+        }
+        if (initialize) {
+          this._run_initializer(initialize)
+        }
+        return mod
+      } catch (e: any) {
+        if (this.dev) {
+          this.compile_error = e
+        }
+        console.error(`Could not initialize module due to error: ${e}`)
+        return null
       }
-    }
+    })
   }
 
   static override __module__ = "panel.models.esm"
@@ -624,11 +633,12 @@ export class ReactiveESM extends HTMLBox {
   static {
     this.prototype.default_view = ReactiveESMView
     this.define<ReactiveESM.Props>(({Any, Array, Bool, String}) => ({
-      children:  [ Array(String),       [] ],
-      data:      [ Any                     ],
-      dev:       [ Bool,             false ],
-      esm:       [ String,              "" ],
-      importmap: [ Any,                 {} ],
+      children:   [ Array(String),       [] ],
+      class_name: [ String,              "" ],
+      data:       [ Any                     ],
+      dev:        [ Bool,             false ],
+      esm:        [ String,              "" ],
+      importmap:  [ Any,                 {} ],
     }))
   }
 }
diff --git a/panel/util/__init__.py b/panel/util/__init__.py
index 0a074121cd..9fdaaaabdb 100644
--- a/panel/util/__init__.py
+++ b/panel/util/__init__.py
@@ -521,3 +521,11 @@ def prefix_length(a: str, b: str) -> int:
         else:
             right = mid - 1
     return left
+
+
+def camel_to_kebab(name):
+    # Use regular expressions to insert a hyphen before each uppercase letter not at the start,
+    # and between a lowercase and uppercase letter.
+    kebab_case = re.sub(r'([a-z0-9])([A-Z])', r'\1-\2', name)
+    kebab_case = re.sub(r'([A-Z]+)([A-Z][a-z0-9])', r'\1-\2', kebab_case)
+    return kebab_case.lower()

From a87f80883369b36fe5d15a41b46428db459df444 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 27 Aug 2024 18:40:45 +0200
Subject: [PATCH 017/164] Bump panel.js version to 1.5.0-b.8

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index 3a5793421c..948a319ddf 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-b.7",
+  "version": "1.5.0-b.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.0-b.7",
+      "version": "1.5.0-b.8",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.5.1",
diff --git a/panel/package.json b/panel/package.json
index 4e050919f5..bfebaf6c85 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-b.7",
+  "version": "1.5.0-b.8",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From 7b8fa405186abddc3dabb9669cea53efaf9cb455 Mon Sep 17 00:00:00 2001
From: Andrew <15331990+ahuang11@users.noreply.github.com>
Date: Tue, 27 Aug 2024 14:31:31 -0700
Subject: [PATCH 018/164] revert input color (#7199)

---
 panel/theme/css/fast.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/theme/css/fast.css b/panel/theme/css/fast.css
index d41f103dc0..232d482b2d 100644
--- a/panel/theme/css/fast.css
+++ b/panel/theme/css/fast.css
@@ -307,7 +307,7 @@ table.panel-df {
   background-color: var(--neutral-fill-input-rest);
   border: 1px solid var(--accent-fill-rest);
   border-radius: calc(var(--control-corner-radius) * 1px);
-  color: var(--foreground-on-accent-rest);
+  color: var(--neutral-foreground-rest);
   font-size: var(--type-ramp-base-font-size);
   height: calc(
     (var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px

From 764a4d9c14a7f8100cb6a93dd4d428ff32c811bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Wed, 28 Aug 2024 11:24:51 +0200
Subject: [PATCH 019/164] Add internet marker (#7201)

---
 panel/io/state.py                  |  6 +++--
 panel/tests/chat/test_interface.py |  1 +
 panel/tests/chat/test_message.py   |  1 +
 panel/tests/conftest.py            | 18 +++++++++++++++
 panel/tests/pane/test_image.py     | 37 +++++++++++++++++++-----------
 5 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/panel/io/state.py b/panel/io/state.py
index dbd71ec148..8beb3c9dd9 100644
--- a/panel/io/state.py
+++ b/panel/io/state.py
@@ -14,7 +14,7 @@
 
 from collections import Counter, defaultdict
 from collections.abc import Iterator
-from contextlib import contextmanager
+from contextlib import contextmanager, suppress
 from contextvars import ContextVar
 from functools import partial, wraps
 from typing import (
@@ -65,7 +65,9 @@ def set_curdoc(doc: Document):
     try:
         yield
     finally:
-        state._curdoc.reset(token)
+        # If _curdoc has been reset it will raise a ValueError
+        with suppress(ValueError):
+            state._curdoc.reset(token)
 
 def curdoc_locked() -> Document:
     try:
diff --git a/panel/tests/chat/test_interface.py b/panel/tests/chat/test_interface.py
index 3d53964eae..86e2809b51 100644
--- a/panel/tests/chat/test_interface.py
+++ b/panel/tests/chat/test_interface.py
@@ -42,6 +42,7 @@ def test_init_avatar_image(self, chat_interface):
         chat_interface.avatar = Image("https://panel.holoviz.org/_static/logo_horizontal.png")
         assert chat_interface.avatar.object == "https://panel.holoviz.org/_static/logo_horizontal.png"
 
+    @pytest.mark.internet
     @pytest.mark.parametrize("type_", [bytes, BytesIO])
     def test_init_avatar_bytes(self, type_, chat_interface):
         with requests.get("https://panel.holoviz.org/_static/logo_horizontal.png") as resp:
diff --git a/panel/tests/chat/test_message.py b/panel/tests/chat/test_message.py
index e3b694e56c..8bbb04d2eb 100644
--- a/panel/tests/chat/test_message.py
+++ b/panel/tests/chat/test_message.py
@@ -371,6 +371,7 @@ def test_serialize_png_url(self):
         message = ChatMessage(PNG(PNG_FILE))
         assert message.serialize() == "PNG='https://assets.holoviz.org/panel/samples/png_sample.png'"
 
+    @pytest.mark.internet
     def test_serialize_svg_embed(self):
         svg = SVG(SVG_FILE, embed=True, alt_text="abc")
         with BytesIO(svg._data(SVG_FILE)) as buf:
diff --git a/panel/tests/conftest.py b/panel/tests/conftest.py
index 1a0042ae68..1d57365aa2 100644
--- a/panel/tests/conftest.py
+++ b/panel/tests/conftest.py
@@ -15,6 +15,7 @@
 import unittest
 
 from contextlib import contextmanager
+from functools import cache
 from subprocess import PIPE, Popen
 
 import pandas as pd
@@ -58,6 +59,16 @@
 except (RuntimeError, DeprecationWarning):
     asyncio.set_event_loop(asyncio.new_event_loop())
 
+@cache
+def internet_available(host="8.8.8.8", port=53, timeout=3):
+    """Check if the internet connection is available."""
+    try:
+        socket.setdefaulttimeout(timeout)
+        with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as conn:
+            conn.connect((host, port))
+        return True
+    except socket.error:
+        return False
 
 def port_open(port):
     sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
@@ -141,6 +152,8 @@ def pytest_configure(config):
     if config.option.jupyter and not port_open(JUPYTER_PORT):
         start_jupyter()
 
+    config.addinivalue_line("markers", "internet: mark test as requiring an internet connection")
+
 
 def pytest_collection_modifyitems(config, items):
     skipped, selected = [], []
@@ -160,6 +173,11 @@ def pytest_collection_modifyitems(config, items):
     items[:] = selected
 
 
+def pytest_runtest_setup(item):
+    if "internet" in item.keywords and not internet_available():
+        pytest.skip("Skipping test: No internet connection")
+
+
 @pytest.fixture
 def context(context):
     # Set the default timeout to 20 secs
diff --git a/panel/tests/pane/test_image.py b/panel/tests/pane/test_image.py
index 25eb240d0c..506e8874f7 100644
--- a/panel/tests/pane/test_image.py
+++ b/panel/tests/pane/test_image.py
@@ -19,6 +19,10 @@
 SVG_FILE = 'https://assets.holoviz.org/panel/samples/svg_sample.svg'
 WEBP_FILE = 'https://assets.holoviz.org/panel/samples/webp_sample.webp'
 
+embed_parametrize = pytest.mark.parametrize(
+    'embed', [False, pytest.param(True, marks=pytest.mark.internet)]
+)
+
 def test_jpeg_applies():
     assert JPG.applies(JPEG_FILE)
     assert JPG.applies(JPG_FILE)
@@ -105,6 +109,7 @@ def test_load_from_stringio():
     image_data = image_pane._data(memory)
     assert 'PNG' in image_data
 
+@pytest.mark.internet
 def test_loading_a_image_from_url():
     """Tests the loading of a image from a url"""
     url = 'https://raw.githubusercontent.com/holoviz/panel/main/doc/_static/logo.png'
@@ -171,12 +176,14 @@ def test_png_native_size(document, comm):
     assert 'width: auto' in model.text
     assert 'height: auto' in model.text
 
+@pytest.mark.internet
 def test_png_native_size_embed(document, comm):
     png = PNG(PNG_FILE, embed=True)
     model = png.get_root(document, comm)
     assert 'width: 800px' in model.text
     assert 'height: 600px' in model.text
 
+@pytest.mark.internet
 def test_png_native_size_embed_with_width(document, comm):
     png = PNG(PNG_FILE, embed=True, width=200)
     model = png.get_root(document, comm)
@@ -189,6 +196,7 @@ def test_png_native_size_with_width(document, comm):
     assert 'width: 200px' in model.text
     assert 'height: auto' in model.text
 
+@pytest.mark.internet
 def test_png_native_size_embed_with_height(document, comm):
     png = PNG(PNG_FILE, embed=True, height=200)
     model = png.get_root(document, comm)
@@ -201,6 +209,7 @@ def test_png_native_size_with_height(document, comm):
     assert 'width: auto' in model.text
     assert 'height: 200px' in model.text
 
+@pytest.mark.internet
 def test_png_embed_scaled_fixed_size(document, comm):
     png = PNG(PNG_FILE, width=400, embed=True)
     model = png.get_root(document, comm)
@@ -214,7 +223,7 @@ def test_png_scaled_fixed_size(document, comm):
     assert 'height: auto' in model.text
 
 @pytest.mark.parametrize('sizing_mode', ['scale_width', 'stretch_width', 'stretch_both', 'scale_both'])
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_png_scale_width(sizing_mode, embed, document, comm):
     png = PNG(PNG_FILE, sizing_mode=sizing_mode, fixed_aspect=True, embed=embed)
     model = png.get_root(document, comm)
@@ -222,56 +231,56 @@ def test_png_scale_width(sizing_mode, embed, document, comm):
     assert 'height: auto' in model.text
 
 @pytest.mark.parametrize('sizing_mode', ['scale_height', 'stretch_height'])
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_png_scale_height(sizing_mode, embed, document, comm):
     png = PNG(PNG_FILE, sizing_mode=sizing_mode, fixed_aspect=True, embed=embed)
     model = png.get_root(document, comm)
     assert 'width: auto' in model.text
     assert 'height: 100%' in model.text
 
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_png_stretch_width(embed, document, comm):
     png = PNG(PNG_FILE, sizing_mode='stretch_width', fixed_aspect=False, embed=embed, height=500)
     model = png.get_root(document, comm)
     assert 'width: 100%' in model.text
     assert 'height: 500px' in model.text
 
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_png_stretch_height(embed, document, comm):
     png = PNG(PNG_FILE, sizing_mode='stretch_height', fixed_aspect=False, width=500, embed=embed)
     model = png.get_root(document, comm)
     assert 'width: 500px' in model.text
     assert 'height: 100%' in model.text
 
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_png_stretch_both(embed, document, comm):
     png = PNG(PNG_FILE, sizing_mode='stretch_both', fixed_aspect=False, embed=embed)
     model = png.get_root(document, comm)
     assert 'width: 100%' in model.text
     assert 'height: 100%' in model.text
 
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_svg_native_size(embed, document, comm):
     svg = SVG(SVG_FILE, embed=embed)
     model = svg.get_root(document, comm)
     assert 'width: auto' in model.text
     assert 'height: auto' in model.text
 
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_svg_native_size_with_width(embed, document, comm):
     svg = SVG(SVG_FILE, embed=embed, width=200)
     model = svg.get_root(document, comm)
     assert 'width: 200px' in model.text
     assert 'height: auto' in model.text
 
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_svg_native_size_with_height(embed, document, comm):
     svg = SVG(SVG_FILE, embed=embed, height=200)
     model = svg.get_root(document, comm)
     assert 'width: auto' in model.text
     assert 'height: 200px' in model.text
 
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_svg_scaled_fixed_size(embed, document, comm):
     svg = SVG(SVG_FILE, width=400, embed=embed)
     model = svg.get_root(document, comm)
@@ -279,7 +288,7 @@ def test_svg_scaled_fixed_size(embed, document, comm):
     assert 'height: auto' in model.text
 
 @pytest.mark.parametrize('sizing_mode', ['scale_width', 'stretch_width', 'stretch_both', 'scale_both'])
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_svg_scale_width(sizing_mode, embed, document, comm):
     svg = SVG(SVG_FILE, sizing_mode=sizing_mode, fixed_aspect=True, embed=embed)
     model = svg.get_root(document, comm)
@@ -287,28 +296,28 @@ def test_svg_scale_width(sizing_mode, embed, document, comm):
     assert 'height: auto' in model.text
 
 @pytest.mark.parametrize('sizing_mode', ['scale_height', 'stretch_height'])
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_svg_scale_height(sizing_mode, embed, document, comm):
     svg = SVG(SVG_FILE, sizing_mode=sizing_mode, fixed_aspect=True, embed=embed)
     model = svg.get_root(document, comm)
     assert 'width: auto' in model.text
     assert 'height: 100%' in model.text
 
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_svg_stretch_width(embed, document, comm):
     svg = SVG(SVG_FILE, sizing_mode='stretch_width', fixed_aspect=False, embed=embed, height=500)
     model = svg.get_root(document, comm)
     assert 'width: 100%' in model.text
     assert 'height: 500px' in model.text
 
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_svg_stretch_height(embed, document, comm):
     svg = SVG(SVG_FILE, sizing_mode='stretch_height', fixed_aspect=False, width=500, embed=embed)
     model = svg.get_root(document, comm)
     assert 'width: 500px' in model.text
     assert 'height: 100%' in model.text
 
-@pytest.mark.parametrize('embed', [False, True])
+@embed_parametrize
 def test_svg_stretch_both(embed, document, comm):
     svg = SVG(SVG_FILE, sizing_mode='stretch_both', fixed_aspect=False, embed=embed)
     model = svg.get_root(document, comm)

From 3c2cc392b702dd020e23b7b7175985d824a88b14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Wed, 28 Aug 2024 20:10:26 +0200
Subject: [PATCH 020/164] Make `--setup`/`--autoreload`/`--warm` work with
 `--num-procs` (#6913)

---
 panel/command/serve.py            | 18 +++++++----------
 panel/io/server.py                | 11 +++++++++++
 panel/io/state.py                 |  2 ++
 panel/tests/command/test_serve.py | 33 ++++++++++++++++++++++++++++++-
 panel/tests/util.py               | 18 +++++++++++------
 5 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/panel/command/serve.py b/panel/command/serve.py
index cbd19b7eb8..67d44659f2 100644
--- a/panel/command/serve.py
+++ b/panel/command/serve.py
@@ -9,6 +9,7 @@
 import logging
 import os
 import pathlib
+import sys
 
 from glob import glob
 from types import ModuleType
@@ -280,11 +281,11 @@ def customize_applications(self, args, applications):
                 applications['/'] = applications[f'/{index}']
         return super().customize_applications(args, applications)
 
-    def warm_applications(self, applications, reuse_sessions, error=True):
+    def warm_applications(self, applications, reuse_sessions, error=True, initialize_session=True):
         from ..io.session import generate_session
         for path, app in applications.items():
             try:
-                session = generate_session(app)
+                session = generate_session(app, initialize=initialize_session)
             except Exception as e:
                 if error:
                     raise e
@@ -358,27 +359,22 @@ def customize_kwargs(self, args, server_kwargs):
                 watch(f)
 
         if args.setup:
-            setup_path = args.setup
-            with open(setup_path) as f:
-                setup_source = f.read()
-            nodes = ast.parse(setup_source, os.fspath(setup_path))
-            code = compile(nodes, filename=setup_path, mode='exec', dont_inherit=True)
             module_name = 'panel_setup_module'
             module = ModuleType(module_name)
-            module.__dict__['__file__'] = fullpath(setup_path)
-            exec(code, module.__dict__)
+            module.__dict__['__file__'] = fullpath(args.setup)
             state._setup_module = module
 
         if args.warm or args.autoreload:
             argvs = {f: args.args for f in files}
             applications = build_single_handler_applications(files, argvs)
+            initialize_session = not (args.num_procs and sys.version_info < (3, 12))
             if args.autoreload:
                 with record_modules(list(applications.values())):
                     self.warm_applications(
-                        applications, args.reuse_sessions, error=False
+                        applications, args.reuse_sessions, error=False, initialize_session=initialize_session
                     )
             else:
-                self.warm_applications(applications, args.reuse_sessions)
+                self.warm_applications(applications, args.reuse_sessions, initialize_session=initialize_session)
 
         if args.liveness:
             argvs = {f: args.args for f in files}
diff --git a/panel/io/server.py b/panel/io/server.py
index 5c90065982..e11812a610 100644
--- a/panel/io/server.py
+++ b/panel/io/server.py
@@ -3,6 +3,7 @@
 """
 from __future__ import annotations
 
+import ast
 import asyncio
 import datetime as dt
 import importlib
@@ -335,10 +336,20 @@ def __init__(self, *args, **kwargs):
         if state._admin_context:
             state._admin_context._loop = self._loop
 
+    def setup_file(self):
+        setup_path = state._setup_module.__dict__['__file__']
+        with open(setup_path) as f:
+            setup_source = f.read()
+        nodes = ast.parse(setup_source, os.fspath(setup_path))
+        code = compile(nodes, filename=setup_path, mode='exec', dont_inherit=True)
+        exec(code, state._setup_module.__dict__)
+
     def start(self) -> None:
         super().start()
         if state._admin_context:
             self._loop.add_callback(state._admin_context.run_load_hook)
+        if state._setup_module:
+            self._loop.add_callback(self.setup_file)
         if config.autoreload:
             from .reload import setup_autoreload_watcher
             self._autoreload_stop_event = stop_event = asyncio.Event()
diff --git a/panel/io/state.py b/panel/io/state.py
index 8beb3c9dd9..876304bd71 100644
--- a/panel/io/state.py
+++ b/panel/io/state.py
@@ -7,6 +7,7 @@
 import datetime as dt
 import inspect
 import logging
+import os
 import shutil
 import sys
 import threading
@@ -846,6 +847,7 @@ def schedule_task(
           Whether the callback should be run on a thread (requires
           config.nthreads to be set).
         """
+        name = f"{os.getpid()}_{name}"
         if name in self._scheduled:
             if callback is not self._scheduled[name][1]:
                 self.param.warning(
diff --git a/panel/tests/command/test_serve.py b/panel/tests/command/test_serve.py
index fbeedfaf36..0100c0a55b 100644
--- a/panel/tests/command/test_serve.py
+++ b/panel/tests/command/test_serve.py
@@ -1,11 +1,13 @@
 import os
+import re
 import tempfile
 
 import pytest
 import requests
 
 from panel.tests.util import (
-    linux_only, run_panel_serve, wait_for_port, write_file,
+    linux_only, run_panel_serve, unix_only, wait_for_port, wait_for_regex,
+    write_file,
 )
 
 
@@ -103,3 +105,32 @@ def test_serve_markdown():
         r = requests.get(f"http://localhost:{port}/")
         assert r.status_code == 200
         assert '<title>My app</title>' in r.content.decode('utf-8')
+
+
+@unix_only
+@pytest.mark.parametrize("arg", ["--warm", "--autoreload"])
+def test_serve_num_procs(arg, tmp_path):
+    app = "import panel as pn; pn.panel('Hello').servable()"
+    py = tmp_path / "app.py"
+    py.write_text(app)
+
+    regex = re.compile(r'Starting Bokeh server with process id: (\d+)')
+    with run_panel_serve(["--port", "0", py, "--num-procs", 2, arg], cwd=tmp_path) as p:
+        pid1, pid2 = wait_for_regex(p.stdout, regex=regex, count=2)
+        assert pid1 != pid2
+
+
+@unix_only
+def test_serve_num_procs_setup(tmp_path):
+    app = "import panel as pn; pn.panel('Hello').servable()"
+    py = tmp_path / "app.py"
+    py.write_text(app)
+
+    setup_app = 'import os; print(f"Setup PID {os.getpid()}", flush=True)'
+    setup_py = tmp_path / "setup.py"
+    setup_py.write_text(setup_app)
+
+    regex = re.compile(r'Setup PID (\d+)')
+    with run_panel_serve(["--port", "0", py, "--num-procs", 2, "--setup", setup_py], cwd=tmp_path) as p:
+        pid1, pid2 = wait_for_regex(p.stdout, regex=regex, count=2)
+        assert pid1 != pid2
diff --git a/panel/tests/util.py b/panel/tests/util.py
index a6e2e45a74..8b8bc59ac8 100644
--- a/panel/tests/util.py
+++ b/panel/tests/util.py
@@ -59,6 +59,7 @@
 ON_POSIX = 'posix' in sys.builtin_module_names
 
 linux_only = pytest.mark.skipif(platform.system() != 'Linux', reason="Only supported on Linux")
+unix_only = pytest.mark.skipif(platform.system() == 'Windows', reason="Only supported on unix-like systems")
 
 from panel.pane.alert import Alert
 from panel.pane.markup import Markdown
@@ -317,7 +318,7 @@ def wait_for_server(port, prefix=None, timeout=3):
 
 @contextlib.contextmanager
 def run_panel_serve(args, cwd=None):
-    cmd = [sys.executable, "-m", "panel", "serve"] + args
+    cmd = [sys.executable, "-m", "panel", "serve", *map(str, args)]
     p = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.STDOUT, shell=False, cwd=cwd, close_fds=ON_POSIX)
     try:
         yield p
@@ -371,26 +372,31 @@ def readline(self, timeout=None):
         except Empty:
             return None
 
-def wait_for_port(stdout):
+def wait_for_regex(stdout, regex, count=1):
     nbsr = NBSR(stdout)
     m = None
-    output = []
+    output, found = [], []
     for _ in range(20):
         o = nbsr.readline(0.5)
         if not o:
             continue
         out = o.decode('utf-8')
         output.append(out)
-        m = APP_PATTERN.search(out)
+        m = regex.search(out)
         if m is not None:
+            found.append(m.group(1))
+        if len(found) == count:
             break
-    if m is None:
+    if len(found) < count:
         output = '\n    '.join(output)
         pytest.fail(
             "No matching log line in process output, following output "
             f"was captured:\n\n   {output}"
         )
-    return int(m.group(1))
+    return found
+
+def wait_for_port(stdout):
+    return int(wait_for_regex(stdout, APP_PATTERN)[0])
 
 def write_file(content, file_obj):
     file_obj.write(content)

From 647db1ab876d7c8ae31eb7d099efe0bb3d6d0499 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Thu, 29 Aug 2024 13:30:05 +0200
Subject: [PATCH 021/164] Remove deprecated function (#7202)

* Remove deprecated function

* Update import
---
 panel/depends.py            | 12 ------------
 panel/tests/test_depends.py |  4 +++-
 panel/widgets/tables.py     |  2 +-
 3 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/panel/depends.py b/panel/depends.py
index 4b6a156f01..430b5c61f9 100644
--- a/panel/depends.py
+++ b/panel/depends.py
@@ -1,16 +1,4 @@
-from packaging.version import Version
 from param.depends import depends
-from param.parameterized import transform_reference
 from param.reactive import bind
 
-from .config import __version__
-from .util.warnings import deprecated
-
-
-# Alias for backward compatibility
-def param_value_if_widget(*args, **kwargs):
-    if Version(Version(__version__).base_version) > Version('1.2'):
-        deprecated("1.5", "param_value_if_widget", "transform_reference")
-    return transform_reference(*args, **kwargs)
-
 __all__ = ["bind", "depends"]
diff --git a/panel/tests/test_depends.py b/panel/tests/test_depends.py
index ae8e7d5360..8488f534b2 100644
--- a/panel/tests/test_depends.py
+++ b/panel/tests/test_depends.py
@@ -1,6 +1,8 @@
 import pytest
 
-from panel.depends import bind, transform_reference
+from param.parameterized import transform_reference
+
+from panel.depends import bind
 from panel.pane import panel
 from panel.param import ParamFunction
 from panel.widgets import IntSlider
diff --git a/panel/widgets/tables.py b/panel/widgets/tables.py
index 77fa7e5245..0c4e400613 100644
--- a/panel/widgets/tables.py
+++ b/panel/widgets/tables.py
@@ -21,9 +21,9 @@
     StringEditor, StringFormatter, SumAggregator, TableColumn,
 )
 from bokeh.util.serialization import convert_datetime_array
+from param.parameterized import transform_reference
 from pyviz_comms import JupyterComm
 
-from ..depends import transform_reference
 from ..io.resources import CDN_DIST, CSS_URLS
 from ..io.state import state
 from ..reactive import Reactive, ReactiveData

From 06ed9458f9cdd1d32f09995d8726a478ab1dc776 Mon Sep 17 00:00:00 2001
From: Coderambling <159031875+Coderambling@users.noreply.github.com>
Date: Sat, 31 Aug 2024 23:32:40 +0200
Subject: [PATCH 022/164] Update FileInput.ipynb (#7216)

---
 examples/reference/widgets/FileInput.ipynb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/reference/widgets/FileInput.ipynb b/examples/reference/widgets/FileInput.ipynb
index 43c360cb10..0467dd802a 100644
--- a/examples/reference/widgets/FileInput.ipynb
+++ b/examples/reference/widgets/FileInput.ipynb
@@ -15,7 +15,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "The ``FileInput`` widget allows uploading one or more file from the frontend and makes the filename, file data and [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) available in Python.\n",
+    "The ``FileInput`` widget allows uploading one or more file from the frontend and makes the filename, file data and [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) available in Python. To upload large files, use the ``FileDropper`` widget.\n",
     "\n",
     "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
     "\n",

From b0ed7c641111ecb19153c3f7fd9a7c273b34829e Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Sun, 1 Sep 2024 00:07:29 +0200
Subject: [PATCH 023/164] Ensure ReactiveESM components call initialize handler
 (#7210)

* Ensure ReactiveESM components call initialize handler

* Fix lint

* Fix test
---
 panel/models/reactive_esm.ts  |  14 ++-
 panel/tests/ui/test_custom.py | 174 ++++++++++++++++++++++++++++++----
 2 files changed, 169 insertions(+), 19 deletions(-)

diff --git a/panel/models/reactive_esm.ts b/panel/models/reactive_esm.ts
index e3a839ee8b..4e6e3f036f 100644
--- a/panel/models/reactive_esm.ts
+++ b/panel/models/reactive_esm.ts
@@ -139,6 +139,15 @@ function init_model_getter(target: ReactiveESM, name: string) {
   }
 }
 
+function init_model_setter(target: ReactiveESM, name: string, value: any): boolean {
+  if (Reflect.has(target.data, name)) {
+    return Reflect.set(target.data, name, value)
+  } else if (Reflect.has(target, name)) {
+    return Reflect.set(target, name, value)
+  }
+  return false
+}
+
 export class ReactiveESMView extends HTMLBoxView {
   declare model: ReactiveESM
   container: HTMLDivElement
@@ -480,7 +489,10 @@ export class ReactiveESM extends HTMLBox {
 
   override initialize(): void {
     super.initialize()
-    this.model_proxy = new Proxy(this, {get: init_model_getter})
+    this.model_proxy = new Proxy(this, {
+      get: init_model_getter,
+      set: init_model_setter,
+    })
     this.recompile()
   }
 
diff --git a/panel/tests/ui/test_custom.py b/panel/tests/ui/test_custom.py
index 241fc56eef..f98c5fe375 100644
--- a/panel/tests/ui/test_custom.py
+++ b/panel/tests/ui/test_custom.py
@@ -59,7 +59,6 @@ class AnyWidgetUpdate(AnyWidgetComponent):
     }
     """
 
-
 @pytest.mark.parametrize('component', [JSUpdate, ReactUpdate, AnyWidgetUpdate])
 def test_update(page, component):
     example = component(text='Hello World!')
@@ -73,6 +72,67 @@ def test_update(page, component):
     expect(page.locator('h1')).to_have_text('Foo!')
 
 
+class AnyWidgetInitialize(AnyWidgetComponent):
+
+    count = param.Integer(default=0)
+
+    _esm = """
+    export function initialize({ model }) {
+      model.set('count', 1)
+      model.save_changes()
+    }
+
+    export function render({ model, el }) {
+      const h1 = document.createElement('h1')
+      h1.textContent = `${model.get('count')}`
+      el.append(h1)
+    }
+    """
+
+class JSInitialize(JSComponent):
+
+    count = param.Integer(default=0)
+
+    _esm = """
+    export function initialize({ model }) {
+      model.count = 1
+    }
+
+    export function render({ model }) {
+      const h1 = document.createElement('h1')
+      h1.textContent = `${model.count}`
+      return h1
+    }
+    """
+
+class ReactInitialize(ReactComponent):
+
+    count = param.Integer(default=0)
+
+    _esm = """
+    export function initialize({ model }) {
+      model.count = 1
+    }
+
+    export function render({ model }) {
+      const [count] = model.useState('count')
+      return <h1>{count}</h1>
+    }
+    """
+
+@pytest.mark.parametrize('component', [AnyWidgetInitialize, JSInitialize, ReactInitialize])
+def test_initialize(page, component):
+    example = Row(component())
+
+    serve_component(page, example)
+
+    expect(page.locator('h1')).to_have_text('1')
+
+    example[0] = component()
+
+    expect(page.locator('h1')).to_have_text('1')
+
+
 class JSUnwatch(JSComponent):
 
     text = param.String()
@@ -155,7 +215,6 @@ class JSInput(JSComponent):
     }
     """
 
-
 class ReactInput(ReactComponent):
 
     text = param.String()
@@ -173,7 +232,6 @@ class ReactInput(ReactComponent):
     }
     """
 
-
 @pytest.mark.parametrize('component', [JSInput, ReactInput])
 def test_gather_input(page, component):
     example = component(text='Hello World!')
@@ -207,7 +265,6 @@ class JSSendEvent(JSComponent):
     def _handle_click(self, event):
         self.clicks += 1
 
-
 class ReactSendEvent(ReactComponent):
 
     clicks = param.Integer(default=0)
@@ -221,7 +278,6 @@ class ReactSendEvent(ReactComponent):
     def _handle_click(self, event):
         self.clicks += 1
 
-
 @pytest.mark.parametrize('component', [JSSendEvent, ReactSendEvent])
 def test_send_event(page, component):
     button = component()
@@ -247,7 +303,6 @@ class JSChild(JSComponent):
       return button
     }"""
 
-
 class ReactChild(ReactComponent):
 
     child = Child()
@@ -260,7 +315,6 @@ class ReactChild(ReactComponent):
       return <button>{model.get_child('child')}</button>
     }"""
 
-
 @pytest.mark.parametrize('component', [JSChild, ReactChild])
 def test_child(page, component):
     example = component(child='A Markdown pane!')
@@ -291,7 +345,6 @@ class JSChildren(ListLike, JSComponent):
       return div
     }"""
 
-
 class JSChildrenNoReturn(JSChildren):
 
     _esm = """
@@ -303,7 +356,6 @@ class JSChildrenNoReturn(JSChildren):
       model.render_count += 1
     }"""
 
-
 class ReactChildren(ListLike, ReactComponent):
 
     objects = Children()
@@ -316,7 +368,6 @@ class ReactChildren(ListLike, ReactComponent):
       return <div id="container">{model.get_child("objects")}</div>
     }"""
 
-
 @pytest.mark.parametrize('component', [JSChildren, JSChildrenNoReturn, ReactChildren])
 def test_children(page, component):
     example = component(objects=['A Markdown pane!'])
@@ -338,7 +389,6 @@ def test_children(page, component):
 
     assert example.render_count == (3 if issubclass(component, JSChildren) else 2)
 
-
 @pytest.mark.parametrize('component', [JSChildren, JSChildrenNoReturn, ReactChildren])
 def test_children_add_and_remove_without_error(page, component):
     example = component(objects=['A Markdown pane!'])
@@ -358,7 +408,6 @@ def test_children_add_and_remove_without_error(page, component):
 
     assert [msg for msg in msgs if msg.type == 'error' and 'favicon' not in msg.location['url']] == []
 
-
 @pytest.mark.parametrize('component', [JSChildren, JSChildrenNoReturn, ReactChildren])
 def test_children_append_without_rerender(page, component):
     child = JSChild(child=Markdown(
@@ -384,7 +433,6 @@ def test_children_append_without_rerender(page, component):
     assert example.render_count == 2
 
 
-
 JS_CODE_BEFORE = """
 export function render() {
   const h1 = document.createElement('h1')
@@ -465,7 +513,6 @@ class JSLifecycleAfterRender(JSComponent):
       return h1
     }"""
 
-
 class ReactLifecycleAfterRender(ReactComponent):
 
     _esm = """
@@ -477,7 +524,6 @@ class ReactLifecycleAfterRender(ReactComponent):
       return <h1>{text}</h1>
     }"""
 
-
 @pytest.mark.parametrize('component', [JSLifecycleAfterRender, ReactLifecycleAfterRender])
 def test_after_render_lifecycle_hooks(page, component):
     example = component()
@@ -498,7 +544,6 @@ class JSLifecycleAfterLayout(JSComponent):
       return h1
     }"""
 
-
 class ReactLifecycleAfterLayout(ReactComponent):
 
     _esm = """
@@ -510,7 +555,6 @@ class ReactLifecycleAfterLayout(ReactComponent):
       return <h1>{text}</h1>
     }"""
 
-
 @pytest.mark.parametrize('component', [JSLifecycleAfterLayout, ReactLifecycleAfterLayout])
 def test_after_layout_lifecycle_hooks(page, component):
     example = component()
@@ -544,7 +588,6 @@ class ReactLifecycleAfterResize(ReactComponent):
       return <h1>{count}</h1>
     }"""
 
-
 @pytest.mark.parametrize('component', [JSLifecycleAfterResize, ReactLifecycleAfterResize])
 def test_after_resize_lifecycle_hooks(page, component):
     example = component(sizing_mode='stretch_width')
@@ -596,3 +639,98 @@ def test_remove_lifecycle_hooks(page, component):
         example.clear()
 
     wait_until(lambda: msg_info.value.args[0].json_value() == "Removed", page)
+
+
+class JSDefaultExport(JSComponent):
+
+    _esm = """
+    function render({ model }) {
+      const h1 = document.createElement('h1')
+      h1.textContent = 'Hello'
+      return h1
+    }
+
+    export default {render}
+    """
+
+class AnyWidgetDefaultExport(AnyWidgetComponent):
+
+    _esm = """
+    function render({ model, el }) {
+      const h1 = document.createElement('h1')
+      h1.textContent = 'Hello'
+      el.append(h1)
+    }
+
+    export default {render}
+    """
+
+class ReactDefaultExport(ReactComponent):
+
+    _esm = """
+    function render({ model }) {
+      return <h1>Hello</h1>
+    }
+
+    export default { render }
+    """
+
+@pytest.mark.parametrize('component', [AnyWidgetDefaultExport, JSDefaultExport, ReactDefaultExport])
+def test_esm_component_default_export(page, component):
+    example = Row(component(sizing_mode='stretch_width'))
+
+    serve_component(page, example)
+
+    expect(page.locator('h1')).to_have_count(1)
+
+    expect(page.locator('h1')).to_have_text("Hello")
+
+
+class JSDefaultFunctionExport(JSComponent):
+
+    _esm = """
+    export default () => {
+      function render({ model }) {
+        const h1 = document.createElement('h1')
+        h1.textContent = 'Hello'
+        return h1
+      }
+
+      return {render}
+    }
+    """
+
+class AnyWidgetDefaultFunctionExport(AnyWidgetComponent):
+
+    _esm = """
+    export default () => {
+      function render({ model, el }) {
+        const h1 = document.createElement('h1')
+        h1.textContent = 'Hello'
+        el.append(h1)
+      }
+
+      return {render}
+    }
+    """
+
+class ReactDefaultFunctionExport(ReactComponent):
+
+    _esm = """
+    export default () => {
+      function render({ model }) {
+        return <h1>Hello</h1>
+      }
+      return {render}
+    }
+    """
+
+@pytest.mark.parametrize('component', [AnyWidgetDefaultFunctionExport, JSDefaultExport, ReactDefaultExport])
+def test_esm_component_default_function_export(page, component):
+    example = Row(component(sizing_mode='stretch_width'))
+
+    serve_component(page, example)
+
+    expect(page.locator('h1')).to_have_count(1)
+
+    expect(page.locator('h1')).to_have_text("Hello")

From 82dcddd7623c4e7a1faa70c353ce267088c9902b Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Sun, 1 Sep 2024 04:36:41 +0200
Subject: [PATCH 024/164] Describe usage of pyscript editor (#7017)

---
 doc/how_to/wasm/convert.md    |   7 +-
 doc/how_to/wasm/standalone.md | 123 +++++++++++++++++++++++++---------
 panel/command/convert.py      |   2 +-
 3 files changed, 97 insertions(+), 35 deletions(-)

diff --git a/doc/how_to/wasm/convert.md b/doc/how_to/wasm/convert.md
index cbe1807cea..83bf87a117 100644
--- a/doc/how_to/wasm/convert.md
+++ b/doc/how_to/wasm/convert.md
@@ -4,12 +4,13 @@ Writing an HTML file from scratch with all the Javascript and Python dependencie
 
 The ``panel convert`` command has the following options:
 
+```bash
     positional arguments:
     DIRECTORY-OR-SCRIPT   The app directories or scripts to serve (serve empty document if not specified)
 
     options:
     -h, --help            show this help message and exit
-    --to TO               The format to convert to, one of 'pyodide' (default), 'pyodide-worker' or 'pyscript'
+    --to TO               The format to convert to, one of 'pyodide' (default), 'pyodide-worker', 'pyscript' or 'pyscript-worker'
     --compiled            Whether to use the compiled and faster version of Pyodide.
     --out OUT             The directory to write the file to.
     --title TITLE         A custom title for the application(s).
@@ -17,11 +18,13 @@ The ``panel convert`` command has the following options:
     --index               Whether to create an index if multiple files are served.
     --pwa                 Whether to add files to serve applications as a Progressive Web App.
     --requirements REQUIREMENTS [REQUIREMENTS ...]
-                            Explicit requirements to add to the converted file, a single requirements.txt file or a JSON file containing requirements per app. By default requirements are inferred from the code.
+                            Explicit requirements to add to the converted file, a single requirements.txt file or a JSON file containing requirements per app. By default requirements
+                            are inferred from the code.
     --disable-http-patch  Whether to disable patching http requests using the pyodide-http library.
     --watch               Watch the files
     --num-procs NUM_PROCS
                             The number of processes to start in parallel to convert the apps.
+```
 
 ## Example
 
diff --git a/doc/how_to/wasm/standalone.md b/doc/how_to/wasm/standalone.md
index 6d917d63cc..078f89fae0 100644
--- a/doc/how_to/wasm/standalone.md
+++ b/doc/how_to/wasm/standalone.md
@@ -1,14 +1,10 @@
 # Using Panel in Pyodide & PyScript
 
-## Installing Panel in the browser
+## Pyodide
 
-To install Panel in the browser you merely have to use the installation mechanism provided by each supported runtime:
+### Creating a Basic Panel Pyodide Application
 
-### Pyodide
-
-Currently, the best supported mechanism for installing packages in Pyodide is `micropip`.
-
-To get started with Pyodide simply follow their [Getting started guide](https://pyodide.org/en/stable/usage/quickstart.html). Note that if you want to render Panel output you will also have to load [Bokeh.js](https://docs.bokeh.org/en/2.4.1/docs/first_steps/installation.html#install-bokehjs:~:text=Installing%20standalone%20BokehJS%C2%B6) and Panel.js from CDN. The most basic pyodide application therefore looks like this:
+Create a file called **script.html** with the following content:
 
 ```html
 <!DOCTYPE html>
@@ -16,32 +12,27 @@ To get started with Pyodide simply follow their [Getting started guide](https://
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <script src="https://cdn.jsdelivr.net/pyodide/v{{PYODIDE_VERSION}}/full/pyodide.js"></script>
-
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/pyodide/v{{PYODIDE_VERSION}}/full/pyodide.js"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-{{BOKEH_VERSION}}.js"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-{{BOKEH_VERSION}}.min.js"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-{{BOKEH_VERSION}}.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@{{PANEL_VERSION}}/dist/panel.min.js"></script>
-
   </head>
   <body>
     <div id="simple_app"></div>
     <script type="text/javascript">
-      async function main(){
+      async function main() {
         let pyodide = await loadPyodide();
         await pyodide.loadPackage("micropip");
         const micropip = pyodide.pyimport("micropip");
         await micropip.install([
           "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/bokeh-{{BOKEH_VERSION}}-py3-none-any.whl",
-          "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/panel-{{PANEL_VERSION}}-py3-none-any.whl"]
-        )
+          "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/panel-{{PANEL_VERSION}}-py3-none-any.whl"
+        ]);
         pyodide.runPython(`
           import panel as pn
-
           pn.extension(sizing_mode="stretch_width")
-
           slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')
-
           def callback(new):
               return f'Amplitude is: {new}'
 
@@ -54,24 +45,79 @@ To get started with Pyodide simply follow their [Getting started guide](https://
 </html>
 ```
 
-The app should look like this
+Serve the app with:
+
+```bash
+python -m http.server
+```
+
+Open the app in your browser at [http://localhost:8000/script.html](http://localhost:8000/script.html).
+
+The app should look like this:
 
 ![Panel Pyodide App](../../_static/images/pyodide_app_simple.png)
 
 :::{admonition} warn
-The default bokeh and panel packages are very large, therefore we recommend you pip install specialized wheels:
+The default Bokeh and Panel packages are very large. Therefore we recommend installing specialized wheels:
 
 ```javascript
-const bk_whl = "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/bokeh-{{BOKEH_VERSION}}-py3-none-any.whl"
-const pn_whl = "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/panel-{{PANEL_VERSION}}-py3-none-any.whl"
-await micropip.install(bk_whl, pn_whl)
+const bk_whl = "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/bokeh-{{BOKEH_VERSION}}-py3-none-any.whl";
+const pn_whl = "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/panel-{{PANEL_VERSION}}-py3-none-any.whl";
+await micropip.install(bk_whl, pn_whl);
 ```
 
 :::
 
-### PyScript
+## PyScript
+
+### Creating a Basic Panel PyScript Application
+
+Create a file called **script.html** with the following content:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-{{BOKEH_VERSION}}.js"></script>
+    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-{{BOKEH_VERSION}}.min.js"></script>
+    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-{{BOKEH_VERSION}}.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@{{PANEL_VERSION}}/dist/panel.min.js"></script>
+    <link rel="stylesheet" href="https://pyscript.net/releases/{{PYSCRIPT_VERSION}}/core.css">
+    <script type="module" src="https://pyscript.net/releases/{{PYSCRIPT_VERSION}}/core.js"></script>
+  </head>
+  <body>
+    <div id="simple_app"></div>
+    <script type="py" config='{"packages": ["https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/bokeh-{{BOKEH_VERSION}}-py3-none-any.whl", "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/panel-{{PANEL_VERSION}}-py3-none-any.whl"]}'>
+      import panel as pn
+      pn.extension(sizing_mode="stretch_width")
+      slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')
+      def callback(new):
+         return f'Amplitude is: {new}'
+      pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app')
+    </script>
+  </body>
+</html>
+```
+
+Serve the app with:
+
+```bash
+python -m http.server
+```
+
+Open the app in your browser at [http://localhost:8000/script.html](http://localhost:8000/script.html).
 
-A basic, single file pyscript example looks like
+The app should look like this:
+
+![Panel Pyodide App](../../_static/images/pyodide_app_simple.png)
+
+The [PyScript](https://docs.pyscript.net) documentation recommends separating your configuration and Python code into different files. Examples can be found in the [PyScript Examples Gallery](https://pyscript.com/@examples?q=panel).
+
+### Creating a Basic `py-editor` Example
+
+Create a file called **script.html** with the following content:
 
 ```html
 <!DOCTYPE html>
@@ -79,6 +125,7 @@ A basic, single file pyscript example looks like
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <script src="./mini-coi.js" scope="./"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-{{BOKEH_VERSION}}.js"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-{{BOKEH_VERSION}}.min.js"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-{{BOKEH_VERSION}}.min.js"></script>
@@ -88,8 +135,7 @@ A basic, single file pyscript example looks like
     <script type="module" src="https://pyscript.net/releases/{{PYSCRIPT_VERSION}}/core.js"></script>
   </head>
   <body>
-    <div id="simple_app"></div>
-    <script type="py" config='{"packages": ["https://cdn.holoviz.org/panel/wheels/bokeh-{{BOKEH_VERSION}}-py3-none-any.whl", "https://cdn.holoviz.org/panel/wheels/panel-{{PANEL_VERSION}}-py3-none-any.whl"]}'>
+    <script type="py-editor" config='{"packages": ["https://cdn.holoviz.org/panel/wheels/bokeh-{{BOKEH_VERSION}}-py3-none-any.whl", "https://cdn.holoviz.org/panel/{{PANEL_VERSION}}/dist/wheels/{{PANEL_VERSION}}-py3-none-any.whl"]}'>
       import panel as pn
 
       pn.extension(sizing_mode="stretch_width")
@@ -101,17 +147,30 @@ A basic, single file pyscript example looks like
 
       pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app');
     </script>
+    <div id="simple_app"></div>
   </body>
 </html>
 ```
 
-The app should look identical to the one above.
+Create a file called **mini-coi.js** with the content from [mini-coi.js](https://github.com/WebReflection/mini-coi/blob/main/mini-coi.js).
 
-The [PyScript](https://docs.pyscript.net) documentation recommends you put your configuration and python code into separate files. You can find such examples in the [PyScript Examples Gallery](https://pyscript.com/@examples?q=panel).
+Serve the app with:
+
+```bash
+python -m http.server
+```
+
+Open the app in your browser at [http://localhost:8000/script.html](http://localhost:8000/script.html).
+
+Click the green *run* button that appears when you hover over the lower-right corner of the editor to see the application.
+
+:::note
+In the example, we included **mini-coi.js**. This is not necessary if the [appropriate HTTP headers](https://docs.pyscript.net/2024.7.1/user-guide/workers/) are set on your server, such as on [pyscript.com](pyscript.com) or in Github pages.
+:::
 
-## Rendering Panel components in Pyodide or Pyscript
+## Rendering Panel Components in Pyodide or PyScript
 
-Rendering Panel components into the DOM is quite straightforward. You can simply use the `.servable()` method on any component and provide a target that should match the `id` of a DOM node:
+Rendering Panel components into the DOM is straightforward. Use the `.servable()` method on any component and provide a target that matches the `id` of a DOM node:
 
 ```python
 import panel as pn
@@ -121,16 +180,16 @@ slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')
 def callback(new):
     return f'Amplitude is: {new}'
 
-pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app');
+pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app')
 ```
 
-This code will render this simple application into the `simple_app` DOM node:
+This code will render the application into the `simple_app` DOM node:
 
 ```html
 <div id="simple_app"></div>
 ```
 
-Alternatively you can also use the `panel.io.pyodide.write` function to write into a particular DOM node:
+Alternatively, you can use the `panel.io.pyodide.write` function to write into a specific DOM node:
 
 ```python
 await pn.io.pyodide.write('simple_app', component)
diff --git a/panel/command/convert.py b/panel/command/convert.py
index 58cbae7525..1af9e4309b 100644
--- a/panel/command/convert.py
+++ b/panel/command/convert.py
@@ -28,7 +28,7 @@ class Convert(Subcommand):
         ('--to', dict(
             action  = 'store',
             type    = str,
-            help    = "The format to convert to, one of 'pyodide' (default), 'pyodide-worker' or 'pyscript'",
+            help    = "The format to convert to, one of 'pyodide' (default), 'pyodide-worker', 'pyscript' or 'pyscript-worker'",
             default = 'pyodide'
         )),
         ('--compiled', dict(

From 0274f69179ae5fb103cd032785ebd9c5f5bc2e7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Sun, 1 Sep 2024 16:59:05 +0200
Subject: [PATCH 025/164] Continue if session crashes (#7223)

---
 panel/command/serve.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/panel/command/serve.py b/panel/command/serve.py
index 67d44659f2..d2f8f04842 100644
--- a/panel/command/serve.py
+++ b/panel/command/serve.py
@@ -289,6 +289,8 @@ def warm_applications(self, applications, reuse_sessions, error=True, initialize
             except Exception as e:
                 if error:
                     raise e
+                else:
+                    continue
             with set_curdoc(session.document):
                 if config.session_key_func:
                     reuse_sessions = False

From cf8fd2e4c9a521c981d65048d543339bb68329c3 Mon Sep 17 00:00:00 2001
From: Andrew <15331990+ahuang11@users.noreply.github.com>
Date: Sun, 1 Sep 2024 09:40:58 -0700
Subject: [PATCH 026/164] Tweak ChatMessage layout (#7209)

---
 panel/chat/icon.py                     |  7 +++++-
 panel/chat/message.py                  | 18 ++++++++++++----
 panel/dist/css/chat_copy_icon.css      |  2 +-
 panel/dist/css/chat_message.css        |  7 +++---
 panel/dist/css/chat_reaction_icons.css |  4 ++++
 panel/dist/css/icon.css                |  1 -
 panel/tests/chat/test_message.py       | 30 +++++++++++++++++---------
 7 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/panel/chat/icon.py b/panel/chat/icon.py
index cb91895dfb..c9aea8cbda 100644
--- a/panel/chat/icon.py
+++ b/panel/chat/icon.py
@@ -72,7 +72,12 @@ def _render_icons(self):
             icon._reaction = option
             icon.param.watch(self._update_value, "value")
             self._rendered_icons[option] = icon
-        self._composite[:] = [self.default_layout(*list(self._rendered_icons.values()))]
+        self._composite[:] = [
+            self.default_layout(
+                *list(self._rendered_icons.values()),
+                sizing_mode=self.param.sizing_mode,
+                stylesheets=self._stylesheets + self.param.stylesheets.rx(),
+            )]
 
     @param.depends("value", watch=True)
     def _update_icons(self):
diff --git a/panel/chat/message.py b/panel/chat/message.py
index 67d8cc5c71..d761a166c5 100644
--- a/panel/chat/message.py
+++ b/panel/chat/message.py
@@ -254,7 +254,7 @@ def __init__(self, object=None, **params):
 
         reaction_icons = params.get("reaction_icons", {"favorite": "heart"})
         if isinstance(reaction_icons, dict):
-            params["reaction_icons"] = ChatReactionIcons(options=reaction_icons, default_layout=Row)
+            params["reaction_icons"] = ChatReactionIcons(options=reaction_icons, default_layout=Row, sizing_mode=None)
         self._internal = True
         super().__init__(object=object, **params)
         self.chat_copy_icon = ChatCopyIcon(
@@ -294,18 +294,20 @@ def _build_layout(self):
             self.param.user, height=20,
             css_classes=["name"],
             visible=self.param.show_user,
+            sizing_mode=None,
         )
 
         self._activity_dot = HTML(
             "●",
             css_classes=["activity-dot"],
+            margin=(5, 0),
+            sizing_mode=None,
             visible=self.param.show_activity_dot,
         )
 
         meta_row = Row(
             self._user_html,
             self._activity_dot,
-            sizing_mode="stretch_width",
             css_classes=["meta"],
             stylesheets=self._stylesheets + self.param.stylesheets.rx(),
         )
@@ -344,8 +346,8 @@ def _build_layout(self):
             header_col,
             self._center_row,
             footer_col,
-            self._timestamp_html,
             self._icons_row,
+            self._timestamp_html,
             css_classes=["right"],
             sizing_mode=None,
             stylesheets=self._stylesheets + self.param.stylesheets.rx(),
@@ -556,6 +558,11 @@ def _render_reaction_icons(self):
 
     def _update_reaction_icons(self, _):
         self._icons_row[-1] = self._render_reaction_icons()
+        self._icon_divider.visible = (
+            len(self.reaction_icons.options) > 0 and
+            self.show_reaction_icons and
+            self.chat_copy_icon.visible
+        )
 
     def _update(self, ref, old_models):
         """
@@ -598,7 +605,10 @@ def _update_chat_copy_icon(self):
         if isinstance(object_panel, str) and self.show_copy_icon:
             self.chat_copy_icon.value = object_panel
             self.chat_copy_icon.visible = True
-            self._icon_divider.visible = True
+            self._icon_divider.visible = (
+                len(self.reaction_icons.options) > 0 and
+                self.show_reaction_icons
+            )
         else:
             self.chat_copy_icon.value = ""
             self.chat_copy_icon.visible = False
diff --git a/panel/dist/css/chat_copy_icon.css b/panel/dist/css/chat_copy_icon.css
index a03a6a1605..6af21dc4ca 100644
--- a/panel/dist/css/chat_copy_icon.css
+++ b/panel/dist/css/chat_copy_icon.css
@@ -1,3 +1,3 @@
 :host {
-  margin-top: 5px;
+  margin-top: 8px;
 }
diff --git a/panel/dist/css/chat_message.css b/panel/dist/css/chat_message.css
index 4d75872094..06ea28cbf7 100644
--- a/panel/dist/css/chat_message.css
+++ b/panel/dist/css/chat_message.css
@@ -59,6 +59,7 @@
 
 .name {
   font-size: 1em;
+  width: fit-content;
 }
 
 .center {
@@ -141,11 +142,9 @@
   display: inline-block;
   animation: fadeOut 2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
   color: #32cd32;
-  /* since 1.25em, fix margins to everything is perceived to be more aligned */
+  /* since 1.25em, adjust line-height */
   font-size: 1.25em;
-  margin-left: -2.5px;
-  margin-top: 2px;
-  margin-bottom: 5px;
+  line-height: 0.9em;
 }
 
 .divider {
diff --git a/panel/dist/css/chat_reaction_icons.css b/panel/dist/css/chat_reaction_icons.css
index e69de29bb2..ea0b116a10 100644
--- a/panel/dist/css/chat_reaction_icons.css
+++ b/panel/dist/css/chat_reaction_icons.css
@@ -0,0 +1,4 @@
+:host {
+  margin-top: 4px;
+  width: fit-content;
+}
diff --git a/panel/dist/css/icon.css b/panel/dist/css/icon.css
index 788d12a395..dc47822162 100644
--- a/panel/dist/css/icon.css
+++ b/panel/dist/css/icon.css
@@ -18,5 +18,4 @@
 .bk-IconRow {
   display: flex;
   align-items: center;
-  justify-content: center;
 }
diff --git a/panel/tests/chat/test_message.py b/panel/tests/chat/test_message.py
index 8bbb04d2eb..53c74320a2 100644
--- a/panel/tests/chat/test_message.py
+++ b/panel/tests/chat/test_message.py
@@ -54,7 +54,7 @@ def test_layout(self):
         assert isinstance(object_pane, Markdown)
         assert object_pane.object == "ABC"
 
-        icons = columns[1][5][2]
+        icons = columns[1][4][2]
         assert isinstance(icons, ChatReactionIcons)
 
         footer_col = columns[1][3]
@@ -65,22 +65,29 @@ def test_layout(self):
         assert isinstance(footer_col[1], Markdown)
         assert footer_col[1].object == "Footer 2"
 
-        timestamp_pane = columns[1][4][0]
+        timestamp_pane = columns[1][5][0]
         assert isinstance(timestamp_pane, HTML)
 
     def test_reactions_dynamic(self):
-        message = ChatMessage(reactions=["favorite"])
+        message = ChatMessage("hi", reactions=["favorite"])
         assert message.reaction_icons.value == ["favorite"]
 
         message.reactions = ["thumbs-up"]
         assert message.reaction_icons.value == ["thumbs-up"]
 
     def test_reaction_icons_dynamic(self):
-        message = ChatMessage(reaction_icons={"favorite": "heart"})
+        message = ChatMessage("hi", reaction_icons={"favorite": "heart"})
         assert message.reaction_icons.options == {"favorite": "heart"}
 
         message.reaction_icons = ChatReactionIcons(options={"like": "thumb-up"})
         assert message._icons_row[-1] == message.reaction_icons
+        assert message._icon_divider.visible
+
+        message.reaction_icons = ChatReactionIcons(options={})
+        assert not message._icon_divider.visible
+
+        message = ChatMessage("hi", reaction_icons={})
+        assert not message._icon_divider.visible
 
     def test_reactions_link(self):
         # on init
@@ -171,39 +178,39 @@ def test_update_object(self):
     def test_update_timestamp(self):
         message = ChatMessage()
         columns = message._composite.objects
-        timestamp_pane = columns[1][4][0]
+        timestamp_pane = columns[1][5][0]
         assert isinstance(timestamp_pane, HTML)
         dt_str = datetime.datetime.now().strftime("%H:%M")
         assert timestamp_pane.object == dt_str
 
         message = ChatMessage(timestamp_tz="UTC")
         columns = message._composite.objects
-        timestamp_pane = columns[1][4][0]
+        timestamp_pane = columns[1][5][0]
         assert isinstance(timestamp_pane, HTML)
         dt_str = datetime.datetime.now(datetime.timezone.utc).strftime("%H:%M")
         assert timestamp_pane.object == dt_str
 
         message = ChatMessage(timestamp_tz="US/Pacific")
         columns = message._composite.objects
-        timestamp_pane = columns[1][4][0]
+        timestamp_pane = columns[1][5][0]
         assert isinstance(timestamp_pane, HTML)
         dt_str = datetime.datetime.now(tz=ZoneInfo("US/Pacific")).strftime("%H:%M")
         assert timestamp_pane.object == dt_str
 
         special_dt = datetime.datetime(2023, 6, 24, 15)
         message.timestamp = special_dt
-        timestamp_pane = columns[1][4][0]
+        timestamp_pane = columns[1][5][0]
         dt_str = special_dt.strftime("%H:%M")
         assert timestamp_pane.object == dt_str
 
         mm_dd_yyyy = "%b %d, %Y"
         message.timestamp_format = mm_dd_yyyy
-        timestamp_pane = columns[1][4][0]
+        timestamp_pane = columns[1][5][0]
         dt_str = special_dt.strftime(mm_dd_yyyy)
         assert timestamp_pane.object == dt_str
 
         message.show_timestamp = False
-        timestamp_pane = columns[1][4][0]
+        timestamp_pane = columns[1][5][0]
         assert not timestamp_pane.visible
 
     def test_does_not_turn_widget_into_str(self):
@@ -322,17 +329,20 @@ def test_chat_copy_icon_text_widget(self, widget):
         message = ChatMessage(object=widget(value="testing"))
         assert message.chat_copy_icon.visible
         assert message.chat_copy_icon.value == "testing"
+        assert message._icon_divider.visible
 
     def test_chat_copy_icon_disabled(self):
         message = ChatMessage(object="testing", show_copy_icon=False)
         assert not message.chat_copy_icon.visible
         assert not message.chat_copy_icon.value
+        assert not message._icon_divider.visible
 
     @pytest.mark.parametrize("component", [Column, FileInput])
     def test_chat_copy_icon_not_string(self, component):
         message = ChatMessage(object=component())
         assert not message.chat_copy_icon.visible
         assert not message.chat_copy_icon.value
+        assert not message._icon_divider.visible
 
     def test_serialize_text_prefix_with_viewable_type(self):
         message = ChatMessage(Markdown("string"))

From cf28fce7f439b930239b0682d20ab1c8e11f5a6e Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 2 Sep 2024 00:12:31 +0200
Subject: [PATCH 027/164] Add panel compile command to bundle ESM components
 (#7204)

---
 doc/how_to/custom_components/esm/build.md | 197 ++++++++++-
 doc/how_to/custom_components/index.md     |   4 +-
 panel/command/__init__.py                 |  10 +-
 panel/command/compile.py                  | 100 ++++++
 panel/custom.py                           | 159 +++++++--
 panel/io/compile.py                       | 409 ++++++++++++++++++++++
 panel/models/anywidget_component.ts       |  13 +-
 panel/models/esm.py                       |   4 +-
 panel/models/react_component.ts           |  79 ++---
 panel/models/reactive_esm.ts              |  48 ++-
 panel/tests/io/test_compile.py            |  92 +++++
 panel/tests/ui/test_custom.py             | 183 +++++++++-
 panel/viewable.py                         |   2 +-
 pixi.toml                                 |   1 +
 14 files changed, 1173 insertions(+), 128 deletions(-)
 create mode 100644 panel/command/compile.py
 create mode 100644 panel/io/compile.py
 create mode 100644 panel/tests/io/test_compile.py

diff --git a/doc/how_to/custom_components/esm/build.md b/doc/how_to/custom_components/esm/build.md
index 7c70cf6d2f..6e0241fae4 100644
--- a/doc/how_to/custom_components/esm/build.md
+++ b/doc/how_to/custom_components/esm/build.md
@@ -1,6 +1,6 @@
-# Handling of external resources
+# Compile and Bundle ESM Components
 
-The ESM components make it possible to load external libraries from NPM or GitHub easily using one of two approaches:
+The ESM components make it possible to load external libraries from a CDN, NPM or GitHub using one of two approaches:
 
 1. Directly importing from `esm.sh` or another CDN or by defining a so called importmap.
 2. Bundling the resources using `npm` and `esbuild`.
@@ -84,7 +84,7 @@ Let's say for instance you want to import libraries `A`, `B` and `C`. Both `B` a
 
 In order to avoid this we can ask `esm.sh` not to rewrite the imports using the `external` query parameter. This tells esm.sh that `A` will be provided externally (i.e. by us), ensuring that libraries `B` and `C` both import the version of `A` we declare:
 
-```
+```python
 {
   "imports": {
     "A": "https://esm.sh/A@1.0.0",
@@ -117,19 +117,186 @@ Import maps supports trailing slash that can not work with URL search params fri
 ```
 :::
 
-## Bundling
+## Compile & Bundling
 
-Importing libraries directly from a CDN allows for extremely quick iteration but also means that the users of your components will have to have access to the internet to fetch the required modules. By bundling the component resources you can ship a self-contained module that includes all the dependencies, while also ensuring that you only fetch the parts of the libraries that are actually needed.
+Importing libraries directly from a CDN allows for quick experimentation and iteration but also means that the users of your components will have to have access to the internet to fetch the required modules. By compiling and bundling the component and external resources you can ship a self-contained and optimized ESM module that includes all the dependencies, while also ensuring that you only fetch the parts of the libraries that are actually needed. The `panel compile` command provides a simple entrypoint to compile one or more components into a single component.
 
-### Tooling
+### Setup
 
-The tooling we recommend to bundle your component resources include `esbuild` and `npm`, both can conveniently be installed with `conda`:
+The compilation and bundling workflow depends on two JavaScript tools: `node.js` (or more specifically the node package manager `npm`) and `esbuild`. The most convenient way to install them is `conda` but you can also set up your own node environment using something like [`asdf`](https://asdf-vm.com/guide/getting-started.html), [`nvm`](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) or [`volta`](https://volta.sh/).
+
+::::{tab-set}
 
+:::{tab-item} `conda`
 ```bash
 conda install esbuild npm
 ```
+:::
+
+:::{tab-item} Custom Node.js installation
+
+Once you have set up `node.js` you can install `esbuild` globally with:
+
+```bash
+npm install -g esbuild
+```
+
+and confirm the installation with:
+
+```bash
+esbuild --version
+```
+:::
+
+::::
+
+### Panel Compile Command
+
+Panel provides the `panel compile` command to automate the compilation of ESM components from the command line and bundle their resources. This functionality requires `npm` and `esbuild` to be installed globally on your system.
+
+#### Example Usage
+
+Let's consider a confetti.py module containing a custom JavaScript component:
+
+```python
+# confetti.py
+import panel as pn
+
+from panel.custom import JSComponent
+
+class ConfettiButton(JSComponent):
+
+    _esm = """
+import confetti from "https://esm.sh/canvas-confetti@1.6.0";
+
+export function render() {
+  const button = document.createElement('button')
+  button.addEventListener('click', () => confetti())
+  button.append('Click me!')
+  return button
+}"""
+```
+
+To compile this component, you can use the following command:
+
+```bash
+panel compile confetti
+```
+
+:::{hint}
+`panel compile` accepts file paths, e.g. `my_components/custom.py`, and dotted module name, e.g. `my_package.custom`. If you provide a module name it must be importable.
+:::
+
+This will automatically discover the `ConfettiButton` but you can also explicitly request a single component by adding the class name:
+
+```bash
+panel compile confetti:ConfettiButton
+```
+
+After running the command you should output that looks a like this, indicating the build succeeded:
+
+```bash
+Running command: npm install
+
+npm output:
+
+added 1 package, and audited 2 packages in 649ms
+
+1 package is looking for funding
+  run `npm fund` for details
 
-### Configuration
+found 0 vulnerabilities
+
+Running command: esbuild /var/folders/7c/ww31pmxj2j18w_mn_qy52gdh0000gq/T/tmp9yhyqo55/index.js --bundle --format=esm --outfile=<module-path>/ConfettiButton.bundle.js --minify
+
+esbuild output:
+
+  .....<module-path>/ConfettiButton.bundle.js  10.5kb
+
+⚡ Done in 9ms
+```
+
+The compiled JavaScript file will be automatically loaded if it remains alongside the component. If you rename the component or modify its code or `_importmap`, you must recompile the component. For ongoing development, consider using the `--autoreload` option to ignore the compiled file and automatically reload the development version when it changes.
+
+#### Compilation Steps
+
+The `panel compile` command performs the compilation and bundling in several steps:
+
+1. **Identify Components**: The first step is to discover the components in the provided module(s).
+2. **Extract External Dependencies**: The command identifies external dependencies from the `_importmap` (if defined) or directly from the ESM code. These dependencies are written to a `package.json` file in a temporary build directory. The `.js(x)` files corresponding to each component are also placed in this directory.
+3. **Install Dependencies**: The command runs `npm install` within the build directory to fetch all external dependencies specified in `package.json`.
+4. **Bundle and Minify**: The command executes `esbuild index.js --bundle --format=esm --minify --outfile=<module-path>ConfettiButton.bundle.js` to bundle the ESM code into a single minified JavaScript file.
+5. **Output the Compiled Bundle(s)**: The final output is one or more compiled JavaScript bundle (`ConfettiButton.bundle.js`).
+
+#### Compiling Multiple Components
+
+If you intend to ship multiple components with shared dependencies, `panel compile` can generate a combined bundle, which ensures that the dependencies are only loaded once. By default it will generate one bundle per module or per component, but if you declare a `_bundle` attribute on the class, declared either as a string defining a relative path or a `pathlib.Path`, you can generate shared bundles across modules. These bundles can include as many components as needed and will be automatically loaded when you use the component.
+
+As an example, imagine you have a components declared across your package containing two distinct components. By declaring a path that resolves to the same location we can bundle them together:
+
+```python
+# my_package/my_module.py
+class ComponentA(JSComponent):
+    _bundle = './dist/custom.bundle.js'
+
+# my_package/subpackage/other_module.py
+class ComponentB(JSComponent):
+    _bundle = '../dist/custom.bundle.js'
+```
+
+when you compile it with:
+
+```bash
+panel compile my_package.my_module my_package.subpackage.other_module
+```
+
+you will end up with a single `custom.bundle.js` file placed in the `my_package/dist` directory.
+
+#### Using the `--build-dir` Option
+
+The `--build-dir` option allows you to specify a custom directory where the `package.json` and raw JavaScript/JSX modules will be written. This is useful if you need to manually modify the dependencies before the bundling process and/or debug issues while bundling. To use this feature, follow these steps:
+
+1. Run the compile command with the `--build-dir` option to generate the directory:
+
+```bash
+panel compile confetti.py --build-dir ./custom_build_dir
+```
+
+2. Navigate to the specified build directory and manually edit the `package.json` file to adjust dependencies as needed.
+
+3. Once you've made your changes, you can manually run the `esbuild` command:
+
+```bash
+esbuild custom_build_dir/index.js --format=esm --bundle --minify
+```
+
+Here is a typical structure of the build_dir directory:
+
+```
+custom_build_dir/
+├── index.js
+├── package.json
+├── <Component>.js
+└── <OtherComponent>.js
+```
+
+The compiled JS file will now be loaded automatically as long as it remains alongside the component. If you rename the component you will have to delete and recompile the JS file. If you make changes to the code or `_importmap` you also have to recompile. During development we recommend using `--autoreload`, which ignores the compiled file.
+
+```{caution}
+The `panel compile` CLI tool is still very new and experimental. In our testing it was able to compile and bundle most components but there are bound to be corner cases.
+
+We will continue to improve the tool and eventually allow you to bundle multiple components into a single bundle to allow sharing of resources.
+```
+
+### React Components
+
+React components automatically include `react` and `react-dom` in their bundles. The version of `React` that is loaded can be specified the `_react_version` attribute on the component class. We strongly suggest you pin a specific version on your component to ensure your component does not break should the version be bumped in Panel.
+
+### Manual Compilation
+
+If you have more complex requirements or the automatic compilation fails for whatever reason you can also manually compile the output. We generally strongly recommend that you start by generating the initial bundle structure by providing a `--build-dir` and then tweaking the resulting output.
+
+#### Configuration
 
 To run the bundling we will need one additional file, the `package.json`, which, just like the import maps, determines the required packages and their versions. The `package.json` is a complex file with tons of configuration options but all we will need are the [dependencies](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#dependencies).
 
@@ -160,7 +327,7 @@ pn.extension()
 
 class ConfettiButton(JSComponent):
 
-    _esm = 'confetti.bundled.js'
+    _esm = 'confetti.js'
 
 ConfettiButton().servable()
 ```
@@ -190,15 +357,7 @@ npm install
 This will fetch the packages and install them into the local `node_modules` directory. Once that is complete we can run the bundling:
 
 ```bash
-esbuild confetti.js --bundle --format=esm --minify --outfile=confetti.bundled.js
+esbuild confetti.js --bundle --format=esm --minify --outfile=ConfettiButton.bundle.js
 ```
 
-This will create a new file called `confetti.bundled.js`, which includes all the dependencies (even CSS, image files and other static assets if you have imported them).
-
-The only thing left to do now is to update the `_esm` declaration to point to the new bundled file:
-
-```python
-class ConfettiButton(JSComponent):
-
-    _esm = 'confetti.bundled.js'
-```
+This will create a new file called `ConfettiButton.bundle.js`, which includes all the dependencies (even CSS, image files and other static assets if you have imported them).
diff --git a/doc/how_to/custom_components/index.md b/doc/how_to/custom_components/index.md
index 081ecd7588..389e9c9dd7 100644
--- a/doc/how_to/custom_components/index.md
+++ b/doc/how_to/custom_components/index.md
@@ -59,11 +59,11 @@ Build custom components in Javascript using so called ESM components, which allo
 :gutter: 1 1 1 2
 
 
-:::{grid-item-card} {octicon}`tools;2.5em;sd-mr-1 sd-animate-grow50` Building and Bundling ESM components
+:::{grid-item-card} {octicon}`tools;2.5em;sd-mr-1 sd-animate-grow50` Compile and Bundle ESM Components
 :link: esm/build
 :link-type: doc
 
-How to specify and bundle external dependencies for ESM components.
+How to specify external dependencies for ESM components and compile them into JS bundles.
 :::
 
 :::{grid-item-card} {octicon}`pencil;2.5em;sd-mr-1 sd-animate-grow50` Add callbacks to ESM components
diff --git a/panel/command/__init__.py b/panel/command/__init__.py
index e30816964f..9ba7447ca3 100644
--- a/panel/command/__init__.py
+++ b/panel/command/__init__.py
@@ -12,6 +12,7 @@
 
 from .. import __version__
 from .bundle import Bundle
+from .compile import Compile
 from .convert import Convert
 from .oauth_secret import OAuthSecret
 from .serve import Serve
@@ -51,7 +52,7 @@ def transform_cmds(argv):
 def main(args=None):
     """Mirrors bokeh CLI and adds additional Panel specific commands """
     from bokeh.command.subcommands import all as bokeh_commands
-    bokeh_commands = bokeh_commands + [OAuthSecret, Convert, Bundle]
+    bokeh_commands = bokeh_commands + [OAuthSecret, Compile, Convert, Bundle]
 
     parser = argparse.ArgumentParser(
         prog="panel", epilog="See '<command> --help' to read about a specific subcommand."
@@ -66,6 +67,10 @@ def main(args=None):
             subparser = subs.add_parser(Serve.name, help=Serve.help)
             subcommand = Serve(parser=subparser)
             subparser.set_defaults(invoke=subcommand.invoke)
+        elif cls is Compile:
+            subparser = subs.add_parser(Compile.name, help=Compile.help)
+            subcommand = Compile(parser=subparser)
+            subparser.set_defaults(invoke=subcommand.invoke)
         elif cls is Convert:
             subparser = subs.add_parser(Convert.name, help=Convert.help)
             subcommand = Convert(parser=subparser)
@@ -102,6 +107,9 @@ def main(args=None):
         elif sys.argv[1] == 'bundle':
             args = parser.parse_args(sys.argv[1:])
             ret = Bundle(parser).invoke(args)
+        elif sys.argv[1] == 'compile':
+            args = parser.parse_args(sys.argv[1:])
+            ret = Compile(parser).invoke(args)
         else:
             ret = bokeh_entry_point()
     else:
diff --git a/panel/command/compile.py b/panel/command/compile.py
new file mode 100644
index 0000000000..776a555a2f
--- /dev/null
+++ b/panel/command/compile.py
@@ -0,0 +1,100 @@
+import os
+import pathlib
+import sys
+
+from collections import defaultdict
+
+from bokeh.command.subcommand import Argument, Subcommand
+
+from ..io.compile import RED, compile_components, find_components
+
+
+class Compile(Subcommand):
+    ''' Subcommand to generate a new encryption key.
+
+    '''
+
+    #: name for this subcommand
+    name = "compile"
+
+    help = "Compiles an ESM component using node and esbuild"
+
+    args = (
+        ('modules', Argument(
+            metavar = 'DIRECTORY-OR-SCRIPT',
+            nargs   = "*",
+            help    = "The Python modules to compile. May optionally define a single class.",
+            default = None,
+        )),
+        ('--build-dir', dict(
+            action = 'store',
+            type    = str,
+            help    = "Where to write the build directory."
+        )),
+        ('--unminified', dict(
+            action  = 'store_true',
+            help    = "Whether to generate unminified output."
+        )),
+        ('--verbose', dict(
+            action  = 'store_true',
+            help    = "Whether to show verbose output. Note when setting --outfile only the result will be printed to stdout."
+        )),
+    )
+
+    def invoke(self, args):
+        bundles = defaultdict(list)
+        for module_spec in args.modules:
+            if ':' in module_spec:
+                *parts, cls = module_spec.split(':')
+                module = ':'.join(parts)
+            else:
+                module = module_spec
+                cls = ''
+            classes = cls.split(',') if cls else None
+            module_name, ext = os.path.splitext(os.path.basename(module))
+            if ext not in ('', '.py'):
+                print(  # noqa
+                    f'{RED} Can only compile ESM components defined in Python '
+                    'file or importable module.'
+                )
+                return 1
+            try:
+                components = find_components(module, classes)
+            except ValueError:
+                cls_error = f' and that class(es) {cls!r} are defined therein' if cls else ''
+                print(  # noqa
+                    f'{RED} Could not find any ESM components to compile, ensure '
+                    f'you provided the right module{cls_error}.'
+                )
+                return 1
+            if module in sys.modules:
+                module_path = sys.modules[module].__file__
+            else:
+                module_path = module
+            module_path = pathlib.Path(module_path).parent
+            for component in components:
+                if component._bundle:
+                    bundle_path = component._bundle
+                    if isinstance(bundle_path, str):
+                        path = (module_path / bundle_path).absolute()
+                    else:
+                        path = bundle_path.absolute()
+                    bundles[str(path)].append(component)
+                elif len(components) > 1 and not classes:
+                    component_module = module_name if ext else component.__module__
+                    bundles[module_path / f'{component_module}.bundle.js'].append(component)
+                else:
+                    bundles[module_path / f'{component.__name__}.bundle.js'].append(component)
+
+        errors = 0
+        for bundle, components in bundles.items():
+            out = compile_components(
+                components,
+                build_dir=args.build_dir,
+                minify=not args.unminified,
+                outfile=bundle,
+                verbose=args.verbose,
+            )
+            if not out:
+                errors += 1
+        return int(errors>0)
diff --git a/panel/custom.py b/panel/custom.py
index 4e0ad40b22..7de55b4a3a 100644
--- a/panel/custom.py
+++ b/panel/custom.py
@@ -1,9 +1,11 @@
 from __future__ import annotations
 
 import asyncio
+import hashlib
 import inspect
 import os
 import pathlib
+import sys
 import textwrap
 
 from collections import defaultdict
@@ -28,7 +30,7 @@
 from .reactive import (  # noqa
     Reactive, ReactiveCustomBase, ReactiveHTML, ReactiveMetaBase,
 )
-from .util import camel_to_kebab
+from .util import camel_to_kebab, classproperty
 from .util.checks import import_available
 from .viewable import (  # noqa
     Child, Children, Layoutable, Viewable, is_viewable_param,
@@ -41,6 +43,8 @@
     from bokeh.model import Model
     from pyviz_comms import Comm
 
+    ExportSpec = dict[str, list[str | tuple[str, ...]]]
+
 
 class ReactiveESMMetaclass(ReactiveMetaBase):
 
@@ -97,8 +101,16 @@ class CounterButton(pn.ReactiveESM):
 
     _bokeh_model = _BkReactiveESM
 
+    _bundle: ClassVar[str | os.PathLike | None] = None
+
     _esm: ClassVar[str | os.PathLike] = ""
 
+    # Specifies exports to make available to JS in a bundled file
+    # 1. Default export: "<export>"
+    # 2. Import all (`* as`): "*<export>"
+    # 3. Named export (`{ <export>, ... }`): ("<export>", ...)
+    _exports__: ClassVar[ExportSpec] = {}
+
     _importmap: ClassVar[dict[Literal['imports', 'scopes'], str]] = {}
 
     __abstract = True
@@ -108,24 +120,72 @@ def __init__(self, **params):
         self._watching_esm = False
         self._event_callbacks = defaultdict(list)
 
-    @property
-    def _esm_path(self):
-        esm = self._esm
+    @classproperty
+    def _bundle_path(cls) -> os.PathLike | None:
+        if config.autoreload:
+            return
+        try:
+            mod_path = pathlib.Path(inspect.getfile(cls)).parent
+        except (OSError, TypeError, ValueError):
+            if not isinstance(cls._bundle, pathlib.PurePath):
+                return
+        if cls._bundle:
+            bundle = cls._bundle
+            if isinstance(bundle, pathlib.PurePath):
+                return bundle
+            elif bundle.endswith('.js'):
+                bundle_path = mod_path / bundle
+                if bundle_path.is_file():
+                    return bundle_path
+                return
+            else:
+                raise ValueError(
+                    'Could not resolve {cls.__name__}._bundle. Ensure '
+                    'you provide either a string with a relative or absolute '
+                    'path or a Path object to a .js file extension.'
+                )
+        path = mod_path / f'{cls.__name__}.bundle.js'
+        if path.is_file():
+            return path
+        module = cls.__module__
+        path = mod_path / f'{module}.bundle.js'
+        if path.is_file():
+            return path
+        elif module in sys.modules:
+            module = os.path.basename(sys.modules[module].__file__).replace('.py', '')
+            path = mod_path / f'{module}.bundle.js'
+            return path if path.is_file() else None
+        return None
+
+    @classmethod
+    def _esm_path(cls, compiled: bool = True) -> os.PathLike | None:
+        if compiled:
+            bundle_path = cls._bundle_path
+            if bundle_path:
+                return bundle_path
+        esm = cls._esm
         if isinstance(esm, pathlib.PurePath):
             return esm
+        elif not esm.endswith(('.js', '.jsx', '.ts', '.tsx')):
+            return
         try:
-            esm_path = pathlib.Path(inspect.getfile(type(self))).parent / esm
+            if hasattr(cls, '__path__'):
+                mod_path = cls.__path__
+            else:
+                mod_path = pathlib.Path(inspect.getfile(cls)).parent
+            esm_path = mod_path / esm
             if esm_path.is_file():
                 return esm_path
         except (OSError, TypeError, ValueError):
             pass
-        return None
+        return
 
-    def _render_esm(self):
-        if (esm_path:= self._esm_path):
+    @classmethod
+    def _render_esm(cls, compiled: bool | Literal['compiling'] = True):
+        if (esm_path:= cls._esm_path(compiled=compiled is True)):
             esm = esm_path.read_text(encoding='utf-8')
         else:
-            esm = self._esm
+            esm = cls._esm
         esm = textwrap.dedent(esm)
         return esm
 
@@ -149,11 +209,12 @@ def _cleanup(self, root: Model | None) -> None:
 
     async def _watch_esm(self):
         import watchfiles
-        async for _ in watchfiles.awatch(self._esm_path, stop_event=self._watching_esm):
+        path = self._esm_path(compiled=False)
+        async for _ in watchfiles.awatch(path, stop_event=self._watching_esm):
             self._update_esm()
 
     def _update_esm(self):
-        esm = self._render_esm()
+        esm = self._render_esm(not config.autoreload)
         for ref, (model, _) in self._models.copy().items():
             if esm == model.esm:
                 continue
@@ -181,18 +242,28 @@ def _init_params(self) -> dict[str, Any]:
             if k in params:
                 params.pop(k)
             data_params[k] = v
+        bundle_path = self._bundle_path
+        if bundle_path:
+            bundle_hash = hashlib.sha256(str(bundle_path).encode('utf-8')).hexdigest()
+            importmap = {}
+        else:
+            bundle_hash = None
+            importmap = self._process_importmap()
         data_props = self._process_param_change(data_params)
         params.update({
+            'bundle': bundle_hash,
             'class_name': camel_to_kebab(cls.__name__),
             'data': self._data_model(**{p: v for p, v in data_props.items() if p not in ignored}),
             'dev': config.autoreload or getattr(self, '_debug', False),
-            'esm': self._render_esm(),
-            'importmap': self._process_importmap(),
+            'esm': self._render_esm(not config.autoreload),
+            'importmap': importmap,
+            'name': cls.__name__
         })
         return params
 
-    def _process_importmap(self):
-        return self._importmap
+    @classmethod
+    def _process_importmap(cls):
+        return cls._importmap
 
     def _get_children(self, data_model, doc, root, parent, comm):
         children = {}
@@ -219,7 +290,7 @@ def _setup_autoreload(self):
         if not ((config.autoreload or getattr(self, '_debug', False)) and import_available('watchfiles')):
             return
         super()._setup_autoreload()
-        if (self._esm_path and not self._watching_esm):
+        if (self._esm_path(compiled=False) and not self._watching_esm):
             self._watching_esm = asyncio.Event()
             state.execute(self._watch_esm)
 
@@ -327,6 +398,8 @@ class CounterButton(JSComponent):
     CounterButton().servable()
     '''
 
+    __abstract = True
+
 
 class ReactComponent(ReactiveESM):
     '''
@@ -361,23 +434,55 @@ class CounterButton(ReactComponent):
     CounterButton().servable()
     '''
 
+    __abstract = True
 
     _bokeh_model = _BkReactComponent
 
     _react_version = '18.3.1'
 
-    def _init_params(self) -> dict[str, Any]:
-        params = super()._init_params()
-        params['react_version'] = self._react_version
-        return params
+    @classproperty
+    def _exports__(cls) -> ExportSpec:
+        imports = cls._importmap.get('imports', {})
+        exports = {
+            "react": ["*React"],
+            "react-dom/client": [("createRoot",)]
+        }
+        if any('@mui' in v for v in imports.values()):
+            exports.update({
+                "@emotion/cache": "createCache",
+                "@emotion/react": ("CacheProvider",)
+            })
+        return exports
+
+    @classmethod
+    def _render_esm(cls, compiled: bool | Literal['compiling'] = True):
+        esm = super()._render_esm(compiled=compiled)
+        if compiled == 'compiling':
+            esm = 'import * as React from "react"\n' + esm
+        return esm
 
-    def _process_importmap(self):
-        imports = self._importmap.get('imports', {})
-        imports_with_deps = {}
-        dev_suffix = '&dev' if config.autoreload else ''
-        suffix = f'deps=react@{self._react_version},react-dom@{self._react_version}&external=react{dev_suffix},react-dom'
+    @classmethod
+    def _process_importmap(cls):
+        imports = cls._importmap.get('imports', {})
+        v_react = cls._react_version
+        if config.autoreload:
+            pkg_suffix, path_suffix = '?dev', '&dev'
+        else:
+            pkg_suffix = path_suffix = ''
+        imports_with_deps = {
+            "react": f"https://esm.sh/react@{v_react}{pkg_suffix}",
+            "react/": f"https://esm.sh/react@{v_react}{path_suffix}/",
+            "react-dom": f"https://esm.sh/react-dom@{v_react}?deps=react@{v_react}&external=react",
+            "react-dom/": f"https://esm.sh/react-dom@{v_react}&deps=react@{v_react}{path_suffix}&external=react/"
+        }
+        suffix = f'deps=react@{v_react},react-dom@{v_react}&external=react,react-dom'
         if any('@mui' in v for v in imports.values()):
             suffix += ',react-is,@emotion/react'
+            imports_with_deps.update({
+                "react-is": f"https://esm.sh/react-is@{v_react}&external=react",
+                "@emotion/cache": f"https://esm.sh/@emotion/cache?deps=react@{v_react},react-dom@{v_react}",
+                "@emotion/react": f"https://esm.sh/@emotion/react?deps=react@{v_react},react-dom@{v_react}&external=react,react-is",
+            })
         for k, v in imports.items():
             if '?' not in v and 'esm.sh' in v:
                 if v.endswith('/'):
@@ -387,7 +492,7 @@ def _process_importmap(self):
             imports_with_deps[k] = v
         return {
             'imports': imports_with_deps,
-            'scopes': self._importmap.get('scopes', {})
+            'scopes': cls._importmap.get('scopes', {})
         }
 
 class AnyWidgetComponent(ReactComponent):
@@ -398,6 +503,8 @@ class AnyWidgetComponent(ReactComponent):
     as is, without having to adapt the callbacks to use Bokeh APIs.
     """
 
+    __abstract = True
+
     _bokeh_model = _BkAnyWidgetComponent
 
     def send(self, msg: dict):
diff --git a/panel/io/compile.py b/panel/io/compile.py
new file mode 100644
index 0000000000..70b105f29f
--- /dev/null
+++ b/panel/io/compile.py
@@ -0,0 +1,409 @@
+from __future__ import annotations
+
+import importlib
+import json
+import os
+import pathlib
+import re
+import shutil
+import subprocess
+import sys
+import tempfile
+
+from contextlib import contextmanager
+from typing import TYPE_CHECKING
+
+from bokeh.application.handlers.code_runner import CodeRunner
+
+from ..custom import ReactComponent, ReactiveESM
+
+if TYPE_CHECKING:
+    from .custom import ExportSpec
+
+GREEN, RED, RESET = "\033[0;32m", "\033[0;31m", "\033[0m"
+
+# Regex pattern to match import statements with URLs starting with https
+_ESM_IMPORT_RE = re.compile(
+    r'import\s+.*?\s+from\s+["\']'     # Match 'import ... from' with any content
+    r'(https:\/\/[^\/]+\/(?:npm\/)?'   # Match the base URL (e.g., https://cdn.jsdelivr.net/) and ignore /npm if present
+    r'((?:@[\w\.\-]+\/)?[\w\.\-]+)'    # Capture the package name, including optional scope
+    r'(?:@([\d\.\w-]+))?'              # Optionally capture the version after @
+    r'[^"\']*)["\']'                   # Match the rest of the URL up to the quote
+)
+_ESM_IMPORT_SUFFIX = re.compile(r'\/([^?"&\']*)')
+
+# Regex pattern to extract version specifiers from a URL
+_ESM_URL_RE = re.compile(
+    r'(https:\/\/[^\/]+\/(?:npm\/)?'
+    r'((?:@[\w\.\-]+\/)?[\w\.\-]+)'
+    r'(?:@([\d\.\w-]+))?'
+    r'[^"\']*)'
+)
+_ESM_IMPORT_ALIAS_RE = re.compile(r'(import\s+(?:\*\s+as\s+\w+|\{[^}]*\}|[\w*\s,]+)\s+from\s+[\'"])(.*?)([\'"])')
+_EXPORT_DEFAULT_RE = re.compile(r'\bexport\s+default\b')
+
+
+@contextmanager
+def setup_build_dir(build_dir: str | os.PathLike | None = None):
+    original_directory = os.getcwd()
+    if build_dir:
+        temp_dir = pathlib.Path(build_dir).absolute()
+        temp_dir.mkdir(parents=True, exist_ok=True)
+    else:
+        temp_dir = tempfile.mkdtemp()
+    try:
+        os.chdir(temp_dir)
+        yield temp_dir
+    finally:
+        os.chdir(original_directory)
+        if not build_dir:
+            shutil.rmtree(temp_dir)
+
+
+def check_cli_tool(tool_name):
+    try:
+        result = subprocess.run([tool_name, '--version'], stdout=subprocess.PIPE, stderr=subprocess.PIPE)
+        if result.returncode == 0:
+            return True
+        else:
+            return False
+    except Exception:
+        return False
+
+
+def find_components(module_or_file: str | os.PathLike, classes: list[str] | None = None) -> list[type[ReactiveESM]]:
+    """
+    Creates a temporary module given a path-like object and finds all
+    the ReactiveESM components defined therein.
+
+    Arguments
+    ---------
+    module_or_file : str | os.PathLike
+        The path to the Python module.
+    classes: list[str] | None
+        Names of classes to return.
+
+    Returns
+    -------
+    List of ReactiveESM components defined in the module.
+    """
+    py_file = module_or_file.endswith('.py')
+    if py_file:
+        path_obj = pathlib.Path(module_or_file)
+        source = path_obj.read_text(encoding='utf-8')
+        runner = CodeRunner(source, module_or_file, [])
+        module = runner.new_module()
+        runner.run(module)
+    else:
+        module = importlib.import_module(module_or_file)
+    classes = classes or []
+    components = []
+    for v in module.__dict__.values():
+        if (
+            isinstance(v, type) and
+            issubclass(v, ReactiveESM) and
+            not v.abstract and
+            (not classes or v.__name__ in classes)
+        ):
+            if py_file:
+                v.__path__ = path_obj.parent.absolute()
+            components.append(v)
+    not_found = set(classes) - set(c.__name__ for c in components)
+    if classes and not_found:
+        clss = ', '.join(map(repr, not_found))
+        raise ValueError(f'{clss} class(es) not found in {module_or_file!r}.')
+    return components
+
+
+def packages_from_code(esm_code: str) -> dict[str, str]:
+    """
+    Extracts package version definitions from ESM code.
+
+    Arguments
+    ---------
+    esm_code : str
+        The ESM code to search for package imports.
+
+    Returns
+    -------
+    Dictionary of packages and their versions.
+    """
+    packages = {}
+    for match in _ESM_IMPORT_RE.findall(esm_code):
+        url, package_name, version = match
+        packages[package_name] = f'^{version}'
+        after_slash_match = _ESM_IMPORT_SUFFIX.search(url.split('@')[-1])
+        import_name = package_name
+        if after_slash_match:
+            suffix = after_slash_match.group(1)
+            if suffix != '+esm' and not suffix.endswith(('.js', '.mjs')):
+                # ESM specifier is used by some CDNs to load ESM bundle
+                import_name += f'/{suffix}'
+        esm_code = esm_code.replace(url, import_name)
+    return esm_code, packages
+
+
+def replace_imports(esm_code: str, replacements: dict[str, str]) -> dict[str, str]:
+    """
+    Replaces imports in the code which may be aliases with the actual
+    package names.
+
+    Arguments
+    ---------
+    esm_code: str
+        The ESM code to replace import names in.
+    replacements: dict[str, str]
+        Mapping that defines replacements from aliased import names
+        to actual package names.
+
+    Returns
+    -------
+    modified_code: str
+        The code where imports have been replaced with package names.
+    """
+
+    def replace_match(match):
+        import_part = match.group(1)
+        module_path = match.group(2)
+        quote = match.group(3)
+        for old, new in replacements.items():
+            if module_path.startswith(old):
+                module_path = module_path.replace(old, new, 1)
+                break
+        return f"{import_part}{module_path}{quote}"
+
+    # Use the sub method to replace the matching parts of the import statements
+    modified_code = _ESM_IMPORT_ALIAS_RE.sub(replace_match, esm_code)
+    return modified_code
+
+
+def packages_from_importmap(esm_code: str, imports: dict[str, str]) -> dict[str, str]:
+    """
+    Extracts package version definitions from an import map.
+
+    Arguments
+    ---------
+    esm_code: str
+        The ESM code to replace import names in.
+    imports : dict[str, str]
+        A dictionary representing the import map, where keys are package names and values are URLs.
+
+    Returns
+    -------
+    dict[str, str]
+        A dictionary where keys are package names and values are their corresponding versions.
+    """
+    dependencies, replacements = {}, {}
+    for key, url in imports.items():
+        match = _ESM_URL_RE.search(url)
+        if not match:
+            raise RuntimeError(
+                f'Could not determine package name from URL: {url!r}.'
+            )
+        pkg_name = match.group(2)
+        version = match.group(3)
+        dependencies[pkg_name] = f"^{version}" if version else "latest"
+        replacements[key] = pkg_name+'/' if key.endswith('/') else pkg_name
+    esm_code = replace_imports(esm_code, replacements)
+    return esm_code, dependencies
+
+
+def extract_dependencies(component: type[ReactiveESM]) -> tuple[str, dict[str, any]]:
+    """
+    Extracts dependencies from a ReactiveESM component by parsing its
+    importmap and the associated code and replaces URL import
+    specifiers with package imports.
+
+    Arguments
+    ---------
+    component: type[ReactiveESM]
+        The ReactiveESM component to extract a dependency definition from.
+
+    Returns
+    -------
+    code: str
+        Code where the URL imports have been replaced by package imports.
+    dependencies: dict[str, str]
+        A dictionary of package dependencies and their versions.
+    """
+    importmap = component._process_importmap()
+    esm = component._render_esm(compiled='compiling')
+    esm, dependencies = packages_from_importmap(esm, importmap.get('imports', {}))
+    esm, packages = packages_from_code(esm)
+    dependencies.update(packages)
+    return esm, dependencies
+
+
+def merge_exports(old: ExportSpec, new: ExportSpec):
+    """
+    Appends the new exports to set of existing ones.
+
+    Appropriately combines different kinds of exports including
+    default, import-all exports and named exports.
+    """
+    for export, specs in new.items():
+        if export not in old:
+            old[export] = list(specs)
+            continue
+        prev = old[export]
+        for spec in specs:
+            if isinstance(spec, tuple):
+                for i, p in enumerate(prev):
+                    if isinstance(p, tuple):
+                        prev[i] = tuple(dict.fromkeys(p+spec))
+                        break
+                else:
+                    prev.append(spec)
+            elif spec not in prev:
+                prev.append(spec)
+
+
+def generate_index(imports: str, exports: list[str], export_spec: ExportSpec):
+    index_js = imports
+    exports = list(exports)
+    for module, specs in export_spec.items():
+        for spec in specs:
+            # TODO: Handle name clashes in exports
+            if isinstance(spec, tuple):
+                imports = f"{{{', '.join(spec)}}}"
+                exports.extend(spec)
+            elif spec.startswith('*'):
+                imports = f"* as {spec[1:]}"
+                exports.append(spec[1:])
+            else:
+                imports = spec
+                exports.append(spec)
+            index_js += f'import {imports} from "{module}"\n'
+
+    export_string = ', '.join(exports)
+    index_js += f"export default {{{export_string}}}"
+    return index_js
+
+
+def generate_project(
+    components: list[type[ReactiveESM]],
+    path: str | os.PathLike,
+    project_config: dict[str, any] = None
+):
+    """
+    Converts a set of ESM components into a Javascript project with
+    an index.js, package.json and a T|JS(X) per component.
+    """
+    path = pathlib.Path(path)
+    component_names = []
+    dependencies, export_spec = {}, {}
+    index = ''
+    for component in components:
+        name = component.__name__
+        esm_path = component._esm_path(compiled=False)
+        if esm_path:
+            ext = esm_path.suffix
+        else:
+            ext = 'jsx' if issubclass(component, ReactComponent) else 'js'
+        code, component_deps = extract_dependencies(component)
+        # Detect default export in component code and handle import accordingly
+        if _EXPORT_DEFAULT_RE.search(code):
+            index += f'import {name} from "./{name}"\n'
+        else:
+            index += f'import * as {name} from "./{name}"\n'
+
+        with open(path / f'{name}.{ext}', 'w') as component_file:
+            component_file.write(code)
+        # TODO: Improve merging of dependencies
+        dependencies.update(component_deps)
+        merge_exports(export_spec, component._exports__)
+        component_names.append(name)
+
+    # Create package.json and write to temp directory
+    package_json = {"dependencies": dependencies}
+    if project_config:
+        package_json.update(project_config)
+    with open(path / 'package.json', 'w') as package_json_file:
+        json.dump(package_json, package_json_file, indent=2)
+
+    # Generate index file from component imports, exports and export specs
+    index_js = generate_index(index, component_names, export_spec)
+    with open(path / 'index.js', 'w') as index_js_file:
+        index_js_file.write(index_js)
+
+
+def compile_components(
+    components: list[type[ReactiveESM]],
+    build_dir: str | os.PathLike = None,
+    outfile: str | os.PathLike = None,
+    minify: bool = True,
+    verbose: bool = True
+) -> str | None:
+    """
+    Compiles a list of ReactiveESM components into a single JavaScript bundle
+    including their Javascript dependencies.
+
+    Arguments
+    ---------
+    components : list[type[ReactiveESM]]
+        A list of `ReactiveESM` component classes to compile.
+    build_dir : str | os.PathLike, optional
+        The directory where the build output will be saved. If None, a
+        temporary directory will be used.
+    outfile : str | os.PathLike, optional
+        The path to the output file where the compiled bundle will be saved.
+        If None the compiled output will be returned.
+    minify : bool, optional
+        If True, minifies the compiled JavaScript bundle.
+    verbose : bool, optional
+        If True, prints detailed logs during the compilation process.
+
+    Returns
+    -------
+    Returns the compiled bundle or None if outfile is provided.
+    """
+    npm_cmd = 'npm.cmd' if sys.platform == 'win32' else 'npm'
+    if not check_cli_tool(npm_cmd):
+        raise RuntimeError(
+            'Could not find `npm` or it generated an error. Ensure it is '
+            'installed and can be run with `npm --version`. You can get it '
+            'with conda or you favorite package manager or nodejs manager.'
+        )
+    if not check_cli_tool('esbuild'):
+        raise RuntimeError(
+            'Could not find `esbuild` or it generated an error. Ensure it '
+            'is installed and can be run with `esbuild --version`. You can '
+            'install it with conda or with `npm install -g esbuild`.'
+        )
+
+    out = str(pathlib.Path(outfile).absolute()) if outfile else None
+    with setup_build_dir(build_dir) as build_dir:
+        generate_project(components, build_dir)
+        extra_args = []
+        if verbose:
+            extra_args.append('--log-level=debug')
+        install_cmd = [npm_cmd, 'install'] + extra_args
+        try:
+            if out:
+                print(f"Running command: {' '.join(install_cmd)}\n")  # noqa
+            result = subprocess.run(install_cmd, check=True, capture_output=True, text=True)
+            if result.stdout and out:
+                print(f"npm output:\n{GREEN}{result.stdout}{RESET}")  # noqa
+            if result.stderr:
+                print("npm errors:\n{RED}{result.stderr}{RESET}")  # noqa
+                return None
+        except subprocess.CalledProcessError as e:
+            print(f"An error occurred while running npm install:\n{RED}{e.stderr}{RESET}")  # noqa
+            return None
+
+        if minify:
+            extra_args.append('--minify')
+        if out:
+            extra_args.append(f'--outfile={out}')
+        build_cmd = ['esbuild', 'index.js', '--bundle', '--format=esm'] + extra_args
+        try:
+            if verbose:
+                print(f"Running command: {' '.join(build_cmd)}\n")  # noqa
+            result = subprocess.run(build_cmd+['--color=true'], check=True, capture_output=True, text=True)
+            if result.stderr:
+                print(f"esbuild output:\n{result.stderr}")  # noqa
+                return None
+        except subprocess.CalledProcessError as e:
+            print(f"An error occurred while running esbuild: {e.stderr}")  # noqa
+            return None
+        return 0 if outfile else result.stdout
diff --git a/panel/models/anywidget_component.ts b/panel/models/anywidget_component.ts
index 47ddd7b452..a580fe72d3 100644
--- a/panel/models/anywidget_component.ts
+++ b/panel/models/anywidget_component.ts
@@ -1,7 +1,6 @@
 import type * as p from "@bokehjs/core/properties"
 
-import {ReactiveESM} from "./reactive_esm"
-import {ReactComponent, ReactComponentView} from "./react_component"
+import {ReactiveESM, ReactiveESMView} from "./reactive_esm"
 
 class AnyWidgetModelAdapter {
   declare model: AnyWidgetComponent
@@ -91,7 +90,7 @@ class AnyWidgetAdapter extends AnyWidgetModelAdapter {
 
 }
 
-export class AnyWidgetComponentView extends ReactComponentView {
+export class AnyWidgetComponentView extends ReactiveESMView {
   declare model: AnyWidgetComponent
   adapter: AnyWidgetAdapter
   destroyer: Promise<((props: any) => void) | null>
@@ -132,12 +131,12 @@ export default {render}`
 export namespace AnyWidgetComponent {
   export type Attrs = p.AttrsOf<Props>
 
-  export type Props = ReactComponent.Props
+  export type Props = ReactiveESM.Props
 }
 
 export interface AnyWidgetComponent extends AnyWidgetComponent.Attrs {}
 
-export class AnyWidgetComponent extends ReactComponent {
+export class AnyWidgetComponent extends ReactiveESM {
   declare properties: AnyWidgetComponent.Props
 
   constructor(attrs?: Partial<AnyWidgetComponent.Attrs>) {
@@ -149,10 +148,6 @@ export class AnyWidgetComponent extends ReactComponent {
     initialize(props)
   }
 
-  override compile(): string | null {
-    return ReactiveESM.prototype.compile.call(this)
-  }
-
   static override __module__ = "panel.models.esm"
 
   static {
diff --git a/panel/models/esm.py b/panel/models/esm.py
index d24bcfc932..2bdfad0752 100644
--- a/panel/models/esm.py
+++ b/panel/models/esm.py
@@ -27,6 +27,8 @@ def event_values(self) -> dict[str, Any]:
 
 class ReactiveESM(HTMLBox):
 
+    bundle = bp.Nullable(bp.String)
+
     class_name = bp.String()
 
     children = bp.List(bp.String)
@@ -53,8 +55,6 @@ class ReactComponent(ReactiveESM):
     Renders jsx/tsx based ESM bundles using React.
     """
 
-    react_version = bp.String('18.3.1')
-
 
 class AnyWidgetComponent(ReactComponent):
     """
diff --git a/panel/models/react_component.ts b/panel/models/react_component.ts
index 6909cc64c6..a9013e6e72 100644
--- a/panel/models/react_component.ts
+++ b/panel/models/react_component.ts
@@ -34,23 +34,36 @@ export class ReactComponentView extends ReactiveESMView {
 
   protected override _render_code(): string {
     let render_code = `
-  if (rendered && view.model.usesReact) {
-    view._changing = true
-    const root = createRoot(view.container)
-    try {
-      root.render(rendered)
-    } catch(e) {
-      view.render_error(e)
-    }
-  }`
-    let import_code = `
+if (rendered && view.model.usesReact) {
+  view._changing = true
+  const root = createRoot(view.container)
+  try {
+    root.render(rendered)
+  } catch(e) {
+    view.render_error(e)
+  }
+}`
+    let import_code
+    if (this.model.bundle) {
+      import_code = `
+const ns = await view._module_cache.get(view.model.bundle)
+const {React, createRoot} = ns.default`
+    } else {
+      import_code = `
 import * as React from "react"
 import { createRoot } from "react-dom/client"`
+    }
     if (this.model.usesMui) {
-      import_code = `
+      if (this.model.bundle) {
+        import_code = `
+const ns = await view._module_cache.get(view.model.bundle)
+const {CacheProvider, React, createCache, createRoot} = ns.default`
+      } else {
+        import_code = `
 ${import_code}
 import createCache from "@emotion/cache"
 import { CacheProvider } from "@emotion/react"`
+      }
       render_code = `
   if (rendered) {
     const cache = createCache({
@@ -63,10 +76,10 @@ import { CacheProvider } from "@emotion/react"`
   ${render_code}`
     }
     return `
-${import_code}
-
 const view = Bokeh.index.find_one_by_id('${this.model.id}')
 
+${import_code}
+
 class Child extends React.Component {
 
   get view() {
@@ -215,9 +228,7 @@ export default {render}`
 export namespace ReactComponent {
   export type Attrs = p.AttrsOf<Props>
 
-  export type Props = ReactiveESM.Props & {
-    react_version: p.Property<string>
-  }
+  export type Props = ReactiveESM.Props
 }
 
 export interface ReactComponent extends ReactComponent.Attrs {}
@@ -241,37 +252,11 @@ export class ReactComponent extends ReactiveESM {
     return this.compiled !== null && this.compiled.includes("React")
   }
 
-  protected override _declare_importmap(): void {
-    const react_version = this.react_version
-    const imports = this.importmap?.imports
-    const scopes = this.importmap?.scopes
-    const pkg_suffix = this.dev ? "?dev": ""
-    const path_suffix = this.dev ? "&dev": ""
-    const importMap = {
-      imports: {
-        react: `https://esm.sh/react@${react_version}${pkg_suffix}`,
-        "react/": `https://esm.sh/react@${react_version}${path_suffix}/`,
-        "react-dom": `https://esm.sh/react-dom@${react_version}?deps=react@${react_version}${pkg_suffix}&external=react`,
-        "react-dom/": `https://esm.sh/react-dom@${react_version}&deps=react@${react_version}${path_suffix}&external=react/`,
-        ...imports,
-      },
-      scopes: scopes || {},
-    }
-    if (this.usesMui) {
-      importMap.imports = {
-        ...importMap.imports,
-        "react-is": `https://esm.sh/react-is@${react_version}&external=react`,
-        "@emotion/cache": `https://esm.sh/@emotion/cache?deps=react@${react_version},react-dom@${react_version}`,
-        "@emotion/react": `https://esm.sh/@emotion/react?deps=react@${react_version},react-dom@${react_version}&external=react${path_suffix},react-is`,
-      }
-    }
-    // @ts-ignore
-    importShim.addImportMap(importMap)
-  }
-
   override compile(): string | null {
     const compiled = super.compile()
-    if (compiled === null || !compiled.includes("React")) {
+    if (this.bundle) {
+      return compiled
+    } else if (compiled === null || !compiled.includes("React")) {
       return compiled
     }
     return `
@@ -284,9 +269,5 @@ ${compiled}`
 
   static {
     this.prototype.default_view = ReactComponentView
-
-    this.define<ReactComponent.Props>(({String}) => ({
-      react_version: [ String,    "18.3.1" ],
-    }))
   }
 }
diff --git a/panel/models/reactive_esm.ts b/panel/models/reactive_esm.ts
index 4e6e3f036f..11cc5b7bfe 100644
--- a/panel/models/reactive_esm.ts
+++ b/panel/models/reactive_esm.ts
@@ -17,6 +17,8 @@ import {convertUndefined, formatError} from "./util"
 
 import error_css from "styles/models/esm.css"
 
+const MODULE_CACHE = new Map()
+
 @server_event("esm_event")
 export class ESMEvent extends ModelEvent {
   constructor(readonly model: ReactiveESM, readonly data: any) {
@@ -166,6 +168,7 @@ export class ReactiveESMView extends HTMLBoxView {
     ["resize", []],
     ["remove", []],
   ])
+  _module_cache: Map<string, any> = MODULE_CACHE
   _rendered: boolean = false
   _stale_children: boolean = false
 
@@ -462,6 +465,7 @@ export namespace ReactiveESM {
   export type Attrs = p.AttrsOf<Props>
 
   export type Props = HTMLBox.Props & {
+    bundle: p.Property<string | null>
     children: p.Property<any>
     class_name: p.Property<string>
     data: p.Property<any>
@@ -582,6 +586,9 @@ export class ReactiveESM extends HTMLBox {
   }
 
   compile(): string | null {
+    if (this.bundle != null) {
+      return this.esm
+    }
     let compiled
     try {
       compiled = transform(
@@ -610,13 +617,29 @@ export class ReactiveESM extends HTMLBox {
     }
     this.compiled = compiled
     this._declare_importmap()
-    const url = URL.createObjectURL(
-      new Blob([this.compiled], {type: "text/javascript"}),
-    )
-    // @ts-ignore
-    this.compiled_module = importShim(url).then((mod: any) => {
+    let esm_module
+    const cache_key = this.bundle || `${this.class_name}-${this.esm.length}`
+    let resolve: (value: any) => void
+    if (!this.dev && MODULE_CACHE.has(cache_key)) {
+      esm_module = Promise.resolve(MODULE_CACHE.get(cache_key))
+    } else {
+      if (!this.dev) {
+        MODULE_CACHE.set(cache_key, new Promise((res) => { resolve = res }))
+      }
+      const url = URL.createObjectURL(
+        new Blob([this.compiled], {type: "text/javascript"}),
+      )
+      esm_module = (window as any).importShim(url)
+    }
+    this.compiled_module = (esm_module as Promise<any>).then((mod: any) => {
+      if (resolve) {
+        resolve(mod)
+      }
       try {
         let initialize
+        if (this.bundle != null && (mod.default || {}).hasOwnProperty(this.name)) {
+          mod = mod.default[(this.name as any)]
+        }
         if (mod.initialize) {
           initialize = mod.initialize
         } else if (mod.default && mod.default.initialize) {
@@ -644,13 +667,14 @@ export class ReactiveESM extends HTMLBox {
 
   static {
     this.prototype.default_view = ReactiveESMView
-    this.define<ReactiveESM.Props>(({Any, Array, Bool, String}) => ({
-      children:   [ Array(String),       [] ],
-      class_name: [ String,              "" ],
-      data:       [ Any                     ],
-      dev:        [ Bool,             false ],
-      esm:        [ String,              "" ],
-      importmap:  [ Any,                 {} ],
+    this.define<ReactiveESM.Props>(({Any, Array, Bool, Nullable, Str}) => ({
+      bundle:      [ Nullable(Str),     null ],
+      children:    [ Array(Str),          [] ],
+      class_name:  [ Str,                 "" ],
+      data:        [ Any                     ],
+      dev:         [ Bool,             false ],
+      esm:         [ Str,                 "" ],
+      importmap:   [ Any,                 {} ],
     }))
   }
 }
diff --git a/panel/tests/io/test_compile.py b/panel/tests/io/test_compile.py
new file mode 100644
index 0000000000..a30c104399
--- /dev/null
+++ b/panel/tests/io/test_compile.py
@@ -0,0 +1,92 @@
+import pytest
+
+from panel.io.compile import (
+    packages_from_code, packages_from_importmap, replace_imports,
+)
+
+
+def test_packages_from_code_esm_sh():
+    code, pkgs = packages_from_code('import * from "https://esm.sh/confetti-canvas@1.0.0"')
+    assert code == 'import * from "confetti-canvas"'
+    assert pkgs == {'confetti-canvas': '^1.0.0'}
+
+def test_packages_from_code_unpkg():
+    code, pkgs = packages_from_code('import * from "https://unpkg.com/esm@3.2.25/esm/loader.js"')
+    assert code == 'import * from "esm"'
+    assert pkgs == {'esm': '^3.2.25'}
+
+def test_packages_from_code_jsdelivr():
+    code, pkgs = packages_from_code('import * as vg from "https://cdn.jsdelivr.net/npm/@uwdata/vgplot@0.8.0/+esm"')
+    assert code == 'import * as vg from "@uwdata/vgplot"'
+    assert pkgs == {'@uwdata/vgplot': '^0.8.0'}
+
+@pytest.mark.parametrize('dev', ['rc', 'a', 'b'])
+def test_packages_from_code_dev(dev):
+    code, pkgs = packages_from_code(f'import * from "https://esm.sh/confetti-canvas@1.0.0-{dev}.1"')
+    assert code == 'import * from "confetti-canvas"'
+    assert pkgs == {'confetti-canvas': f'^1.0.0-{dev}.1'}
+
+@pytest.mark.parametrize('import_code', [
+    'import * from "https://esm.sh/chart.js@1.0.0/auto"',
+    'import * from "https://esm.sh/chart.js@1.0.0/auto?deps=react"',
+    'import * from "https://esm.sh/chart.js@1.0.0&external=react/auto"',
+])
+def test_packages_from_code_path(import_code):
+    code, pkgs = packages_from_code(import_code)
+    assert code == 'import * from "chart.js/auto"'
+    assert pkgs == {'chart.js': '^1.0.0'}
+
+def test_replace_imports_single_quote():
+    assert replace_imports("import {foo} from 'bar'", {'bar': 'pkg-bar'}) == "import {foo} from 'pkg-bar'"
+
+def test_replace_imports_double_quote():
+    assert replace_imports('import {foo} from "bar"', {'bar': 'pkg-bar'}) == 'import {foo} from "pkg-bar"'
+
+def test_replace_imports_trailing_slash():
+    assert replace_imports('import {foo} from "bar/baz"', {'bar': 'pkg-bar'}) == 'import {foo} from "pkg-bar/baz"'
+
+def test_replace_imports_only_from():
+    assert replace_imports('import {bar} from "bar"', {'bar': 'pkg-bar'}) == 'import {bar} from "pkg-bar"'
+
+def test_packages_from_importmap_esm_sh():
+    code, packages = packages_from_importmap(
+        'import * from "confetti"',
+        {'confetti': 'https://esm.sh/confetti-canvas@1.0.0'}
+    )
+    assert code == 'import * from "confetti-canvas"'
+    assert packages == {'confetti-canvas': '^1.0.0'}
+
+def test_packages_from_importmap_unpkg():
+    code, pkgs = packages_from_importmap(
+        'import * from "esm"',
+        {'esm': 'https://unpkg.com/esm@3.2.25/esm/loader.js'}
+    )
+    assert code == 'import * from "esm"'
+    assert pkgs == {'esm': '^3.2.25'}
+
+def test_packages_from_importmap_jsdelivr():
+    code, pkgs = packages_from_importmap(
+        'import * as vg from "@uwdata/vgplot"',
+        {"@uwdata/vgplot": "https://cdn.jsdelivr.net/npm/@uwdata/vgplot@0.8.0/+esm"}
+    )
+    assert code == 'import * as vg from "@uwdata/vgplot"'
+    assert pkgs == {'@uwdata/vgplot': '^0.8.0'}
+
+@pytest.mark.parametrize('dev', ['rc', 'a', 'b'])
+def test_packages_from_importmap_dev(dev):
+    code, pkgs = packages_from_importmap(
+        'import * from "confetti"',
+        {'confetti': f'https://esm.sh/confetti-canvas@1.0.0-{dev}.1'}
+    )
+    assert code == 'import * from "confetti-canvas"'
+    assert pkgs == {'confetti-canvas': f'^1.0.0-{dev}.1'}
+
+@pytest.mark.parametrize('url', [
+    "https://esm.sh/chart.js@1.0.0/",
+    "https://esm.sh/chart.js@1.0.0/?deps=react",
+    "https://esm.sh/chart.js@1.0.0&external=react/",
+])
+def test_packages_from_importmap_path(url):
+    code, pkgs = packages_from_importmap('import * from "chart-js/auto"', {'chart-js/': url})
+    assert code == 'import * from "chart.js/auto"'
+    assert pkgs == {'chart.js': '^1.0.0'}
diff --git a/panel/tests/ui/test_custom.py b/panel/tests/ui/test_custom.py
index f98c5fe375..bbb58af023 100644
--- a/panel/tests/ui/test_custom.py
+++ b/panel/tests/ui/test_custom.py
@@ -7,9 +7,11 @@
 
 from playwright.sync_api import expect
 
+from panel.config import config
 from panel.custom import (
     AnyWidgetComponent, Child, Children, JSComponent, ReactComponent,
 )
+from panel.io.compile import compile_components
 from panel.layout import Row
 from panel.layout.base import ListLike
 from panel.pane import Markdown
@@ -133,6 +135,76 @@ def test_initialize(page, component):
     expect(page.locator('h1')).to_have_text('1')
 
 
+class AnyWidgetModuleCached(AnyWidgetComponent):
+
+    count = param.Integer(default=0)
+
+    _esm = """
+    let count = 0
+
+    export function initialize({ model }) {
+      count += 1
+      model.set('count', count)
+      model.save_changes()
+    }
+
+    export function render({ model, el }) {
+      const h1 = document.createElement('h1')
+      h1.textContent = `${model.get('count')}`
+      el.append(h1)
+    }
+    """
+
+class JSModuleCached(JSComponent):
+
+    count = param.Integer(default=0)
+
+    _esm = """
+    let count = 0
+
+    export function initialize({ model }) {
+      count += 1
+      model.count = count
+    }
+
+    export function render({ model }) {
+      const h1 = document.createElement('h1')
+      h1.textContent = `${model.count}`
+      return h1
+    }
+    """
+
+class ReactModuleCached(ReactComponent):
+
+    count = param.Integer(default=0)
+
+    _esm = """
+    let count = 0
+
+    export function initialize({ model }) {
+      count += 1
+      model.count = count
+    }
+
+    export function render({ model }) {
+      const [count] = model.useState('count')
+      return <h1>{count}</h1>
+    }
+    """
+
+@pytest.mark.parametrize('component', [AnyWidgetModuleCached, JSModuleCached, ReactModuleCached])
+def test_module_cached(page, component):
+    example = Row(component())
+
+    serve_component(page, example)
+
+    expect(page.locator('h1')).to_have_text('1')
+
+    example[0] = component()
+
+    expect(page.locator('h1')).to_have_text('2')
+
+
 class JSUnwatch(JSComponent):
 
     text = param.String()
@@ -470,16 +542,18 @@ class CustomReload(component):
         _esm = pathlib.Path(js_file.name)
 
     example = CustomReload()
-    serve_component(page, example)
 
-    expect(page.locator('h1')).to_have_text('foo')
+    with config.set(autoreload=True):
+        serve_component(page, example)
 
-    js_file.file.write(after)
-    js_file.file.flush()
-    js_file.file.seek(0)
-    example._update_esm()
+        expect(page.locator('h1')).to_have_text('foo')
+
+        js_file.file.write(after)
+        js_file.file.flush()
+        js_file.file.seek(0)
+        example._update_esm()
 
-    expect(page.locator('h1')).to_have_text('bar')
+        expect(page.locator('h1')).to_have_text('bar')
 
 
 def test_anywidget_custom_event(page):
@@ -734,3 +808,98 @@ def test_esm_component_default_function_export(page, component):
     expect(page.locator('h1')).to_have_count(1)
 
     expect(page.locator('h1')).to_have_text("Hello")
+
+
+@pytest.mark.parametrize('component', [AnyWidgetInitialize, JSInitialize, ReactInitialize])
+def test_esm_compile_simple(page, component):
+    outfile = pathlib.Path(__file__).parent / f'{component.__name__}.bundle.js'
+    ret = compile_components([component], outfile=outfile)
+    if ret or not outfile.is_file():
+        raise RuntimeError('Could not compile ESM component')
+
+    assert component._bundle_path == outfile
+
+    example = Row(component())
+
+    serve_component(page, example)
+
+    expect(page.locator('h1')).to_have_text('1')
+
+    example[0] = component()
+
+    expect(page.locator('h1')).to_have_text('1')
+
+
+class JSBase(JSComponent):
+
+    _bundle = 'js.bundle.js'
+
+    _esm = """
+    export function render({model}) {
+      const h1 = document.createElement('h1')
+      h1.id = model.name
+      h1.textContent = "Rendered"
+      return h1
+    }
+    """
+
+class JS1(JSBase):
+    pass
+
+class JS2(JSBase):
+    pass
+
+
+class AnyWidgetBase(AnyWidgetComponent):
+
+    _bundle = 'anywidget.bundle.js'
+
+    _esm = """
+    export function render({model, el}) {
+      const h1 = document.createElement('h1')
+      h1.id = model.get("name")
+      h1.textContent = "Rendered"
+      el.append(h1)
+    }
+    """
+
+class AnyWidget1(AnyWidgetBase):
+    pass
+
+class AnyWidget2(AnyWidgetBase):
+    pass
+
+
+class ReactBase(ReactComponent):
+
+    _bundle = 'react.bundle.js'
+
+    _esm = """
+    export function render({model, el}) {
+      return <h1 id={model.name}>Rendered</h1>
+    }
+    """
+
+class React1(ReactBase):
+    pass
+
+class React2(ReactBase):
+    pass
+
+@pytest.mark.parametrize('components', [[JS1, JS2], [AnyWidget1, AnyWidget2], [React1, React2]])
+def test_esm_compile_shared(page, components):
+    component1, component2 = components
+    outfile = pathlib.Path(__file__).parent / component1._bundle
+    ret = compile_components([component1, component2], outfile=outfile)
+    if ret or not outfile.is_file():
+        raise RuntimeError('Could not compile ESM component')
+
+    assert component1._bundle_path == outfile
+    assert component2._bundle_path == outfile
+
+    example = Row(component1(), component2())
+
+    serve_component(page, example)
+
+    expect(page.locator(f'#{example[0].name}')).to_have_text('Rendered')
+    expect(page.locator(f'#{example[1].name}')).to_have_text('Rendered')
diff --git a/panel/viewable.py b/panel/viewable.py
index c75f61d20b..92e5ea4670 100644
--- a/panel/viewable.py
+++ b/panel/viewable.py
@@ -313,7 +313,7 @@ def _modify_doc(
         """
         Callback to handle FunctionHandler document creation.
         """
-        if server_id:
+        if server_id and server_id in state._servers:
             state._servers[server_id][2].append(doc)
         return self.server_doc(doc, title, location) # type: ignore
 
diff --git a/pixi.toml b/pixi.toml
index 152ad41196..e0a72fa368 100644
--- a/pixi.toml
+++ b/pixi.toml
@@ -140,6 +140,7 @@ playwright = { version = "*", channel = "microsoft" }
 pytest-playwright = "*"
 pytest-asyncio = "*"
 jupyter_server = "*"
+esbuild = "*"
 packaging = "*"
 
 [feature.test-ui.tasks]

From da68c8aa86ea64074648b3162cd4ab4ec051cb4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Mon, 2 Sep 2024 13:49:03 +0200
Subject: [PATCH 028/164] Pass non-Param widget arguments to widget (#4959)

---
 panel/param.py | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/panel/param.py b/panel/param.py
index ada3f7c2de..2e60e87a41 100644
--- a/panel/param.py
+++ b/panel/param.py
@@ -512,16 +512,9 @@ def widget(self, p_name):
         # Update kwargs
         onkeyup = kw_widget.pop('onkeyup', False)
         throttled = kw_widget.pop('throttled', False)
-        ignored_kws = [repr(k) for k in kw_widget if k not in widget_class.param]
-        if ignored_kws:
-            self.param.warning(
-                f'Param pane was given unknown keyword argument(s) for {p_name!r} '
-                f'parameter with a widget of type {widget_class!r}. The following '
-                f'keyword arguments could not be applied: {", ".join(ignored_kws)}.'
-            )
         kw.update(kw_widget)
-
         kwargs = {k: v for k, v in kw.items() if k in widget_class.param}
+        non_param_kwargs = {k: v for k, v in kw_widget.items() if k not in widget_class.param}
 
         if isinstance(widget_class, type) and issubclass(widget_class, Button):
             kwargs.pop('value', None)
@@ -529,7 +522,7 @@ def widget(self, p_name):
         if isinstance(widget_class, WidgetBase):
             widget = widget_class
         else:
-            widget = widget_class(**kwargs)
+            widget = widget_class(**kwargs, **non_param_kwargs)
         widget._param_pane = self
         widget._param_name = p_name
 

From d0744c50c66866396272e056282c3df38f33ecb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Mon, 2 Sep 2024 14:52:22 +0200
Subject: [PATCH 029/164] Speed up import time (#7207)

---
 panel/chat/__init__.py      | 26 +++++++++++++++-----------
 panel/config.py             | 13 ++++++++-----
 panel/pane/vega.py          |  2 +-
 panel/tests/test_imports.py | 21 +++++++++++++++++++++
 panel/tests/util.py         |  2 +-
 panel/widgets/indicators.py |  4 +++-
 6 files changed, 49 insertions(+), 19 deletions(-)
 create mode 100644 panel/tests/test_imports.py

diff --git a/panel/chat/__init__.py b/panel/chat/__init__.py
index 729fbb531a..8cac6e04cd 100644
--- a/panel/chat/__init__.py
+++ b/panel/chat/__init__.py
@@ -29,7 +29,7 @@
 https://panel.holoviz.org/reference/chat/ChatInterface.html
 """
 
-import importlib as _importlib
+from typing import TYPE_CHECKING
 
 from .feed import ChatFeed  # noqa
 from .icon import ChatReactionIcons  # noqa
@@ -38,16 +38,6 @@
 from .message import ChatMessage  # noqa
 from .step import ChatStep  # noqa
 
-
-def __getattr__(name):
-    """
-    Lazily import langchain module when accessed.
-    """
-    if name == "langchain":
-        return _importlib.import_module("panel.chat.langchain")
-    raise AttributeError(f"module {__name__!r} has no attribute {name!r}")
-
-
 __all__ = (
     "ChatAreaInput",
     "ChatFeed",
@@ -57,3 +47,17 @@ def __getattr__(name):
     "ChatStep",
     "langchain",
 )
+
+def __getattr__(name):
+    """
+    Lazily import langchain module when accessed.
+    """
+    if name == "langchain":
+        from . import langchain
+        return langchain
+    raise AttributeError(f"module {__name__!r} has no attribute {name!r}")
+
+__dir__ = lambda: list(__all__)
+
+if TYPE_CHECKING:
+    from . import langchain
diff --git a/panel/config.py b/panel/config.py
index 5f7955d03f..1a41f89ea0 100644
--- a/panel/config.py
+++ b/panel/config.py
@@ -17,10 +17,6 @@
 
 import param
 
-from bokeh.core.has_props import _default_resolver
-from bokeh.document import Document
-from bokeh.model import Model
-from bokeh.settings import settings as bk_settings
 from pyviz_comms import (
     JupyterCommManager as _JupyterCommManager, extension as _pyviz_extension,
 )
@@ -41,6 +37,7 @@
 #---------------------------------------------------------------------
 
 _PATH = os.path.abspath(os.path.dirname(__file__))
+_config_uninitialized = True
 
 def validate_config(config, parameter, value):
     """
@@ -435,7 +432,7 @@ def __getattribute__(self, attr):
         ensure that even on first access mutable parameters do not
         end up being modified.
         """
-        if attr in ('_param__private', '_globals', '_parameter_set', '__class__', 'param'):
+        if _config_uninitialized or attr in ('_param__private', '_globals', '_parameter_set', '__class__', 'param'):
             return super().__getattribute__(attr)
 
         from .io.state import state
@@ -621,6 +618,7 @@ def theme(self):
 _config._parameter_set = set(_params)
 config = _config(**{k: None if p.allow_None else getattr(_config, k)
                     for k, p in _params.items() if k != 'name'})
+_config_uninitialized = False
 
 class panel_extension(_pyviz_extension):
     """
@@ -703,6 +701,10 @@ class panel_extension(_pyviz_extension):
     _comms_detected_before = False
 
     def __call__(self, *args, **params):
+        from bokeh.core.has_props import _default_resolver
+        from bokeh.model import Model
+        from bokeh.settings import settings as bk_settings
+
         from .reactive import ReactiveHTML, ReactiveHTMLMetaclass
         reactive_exts = {
             v._extension_name: v for k, v in param.concrete_descendents(ReactiveHTML).items()
@@ -855,6 +857,7 @@ def __call__(self, *args, **params):
     @staticmethod
     def _display_globals():
         if config.browser_info and state.browser_info:
+            from bokeh.document import Document
             doc = Document()
             comm = state._comm_manager.get_server_comm()
             model = state.browser_info._render_model(doc, comm)
diff --git a/panel/pane/vega.py b/panel/pane/vega.py
index 081ec5661f..59ef47d57c 100644
--- a/panel/pane/vega.py
+++ b/panel/pane/vega.py
@@ -8,7 +8,6 @@
 )
 
 import numpy as np
-import pandas as pd
 import param
 
 from bokeh.models import ColumnDataSource
@@ -27,6 +26,7 @@ def ds_as_cds(dataset):
     """
     Converts Vega dataset into Bokeh ColumnDataSource data
     """
+    import pandas as pd
     if isinstance(dataset, pd.DataFrame):
         return {k: dataset[k].values for k in dataset.columns}
     if len(dataset) == 0:
diff --git a/panel/tests/test_imports.py b/panel/tests/test_imports.py
new file mode 100644
index 0000000000..51ffa2c2a4
--- /dev/null
+++ b/panel/tests/test_imports.py
@@ -0,0 +1,21 @@
+import sys
+
+from subprocess import check_output
+from textwrap import dedent
+
+
+def test_no_blocklist_imports():
+    check = """\
+    import sys
+    import panel
+
+    blocklist = {"pandas", "bokeh.plotting"}
+    mods = blocklist & set(sys.modules)
+
+    if mods:
+        print(", ".join(mods), end="")
+    """
+
+    output = check_output([sys.executable, '-c', dedent(check)])
+
+    assert output == b""
diff --git a/panel/tests/util.py b/panel/tests/util.py
index 8b8bc59ac8..bb5c14c89c 100644
--- a/panel/tests/util.py
+++ b/panel/tests/util.py
@@ -322,7 +322,7 @@ def run_panel_serve(args, cwd=None):
     p = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.STDOUT, shell=False, cwd=cwd, close_fds=ON_POSIX)
     try:
         yield p
-    except Exception as e:
+    except BaseException as e:
         p.terminate()
         p.wait()
         print("An error occurred: %s", e)  # noqa: T201
diff --git a/panel/widgets/indicators.py b/panel/widgets/indicators.py
index 920e2546af..c6babbc159 100644
--- a/panel/widgets/indicators.py
+++ b/panel/widgets/indicators.py
@@ -32,7 +32,6 @@
 import param
 
 from bokeh.models import ColumnDataSource, FixedTicker, Tooltip
-from bokeh.plotting import figure
 
 from .._param import Align
 from ..io.resources import CDN_DIST
@@ -737,6 +736,7 @@ def _get_data(self, properties):
         return annulus_data, needle_data, threshold_data, text_data
 
     def _get_model(self, doc, root=None, parent=None, comm=None):
+        from bokeh.plotting import figure
         properties = self._get_properties(doc)
         model = figure(
             x_range=(-1,1), y_range=(-1,1), tools=[],
@@ -953,6 +953,8 @@ def _get_data(self, properties):
         )
 
     def _get_model(self, doc, root=None, parent=None, comm=None):
+        from bokeh.plotting import figure
+
         params = self._get_properties(doc)
         model = figure(
             outline_line_color=None, toolbar_location=None, tools=[],

From d49dafc94b2512c3c2be515a5d0545e00b414c32 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 2 Sep 2024 14:56:01 +0200
Subject: [PATCH 030/164] Make --dev an alias for --autoreload (#7224)

* Make --dev an alias for --autoreload

* Rename standard optional dependency specifier to dev

* Update docs
---
 doc/explanation/develop_seamlessly.md           |  4 ++--
 doc/getting_started/build_app.md                |  4 ++--
 doc/getting_started/core_concepts.md            |  6 +++---
 doc/getting_started/installation.md             |  2 +-
 doc/how_to/server/commandline.md                |  8 ++++----
 doc/how_to/streamlit_migration/get_started.md   |  2 +-
 doc/how_to/wasm/convert.md                      |  2 +-
 doc/tutorials/basic/build_animation.md          |  6 +++---
 doc/tutorials/basic/build_chatbot.md            |  2 +-
 .../basic/build_crossfilter_dashboard.md        |  2 +-
 doc/tutorials/basic/build_image_classifier.md   |  2 +-
 .../basic/build_monitoring_dashboard.md         |  4 ++--
 .../basic/build_streaming_dashboard.md          |  2 +-
 doc/tutorials/basic/build_todo.md               |  2 +-
 doc/tutorials/basic/caching.md                  | 10 +++++-----
 doc/tutorials/basic/design.md                   |  2 +-
 doc/tutorials/basic/develop_editor.md           |  6 +++---
 doc/tutorials/basic/indicators_activity.md      |  2 +-
 doc/tutorials/basic/indicators_performance.md   |  4 ++--
 doc/tutorials/basic/layouts.md                  |  2 +-
 doc/tutorials/basic/panes.md                    |  4 ++--
 doc/tutorials/basic/pn_panel.md                 |  4 ++--
 doc/tutorials/basic/progressive_layouts.md      |  2 +-
 doc/tutorials/basic/serve.md                    |  6 +++---
 doc/tutorials/basic/size.md                     |  2 +-
 doc/tutorials/basic/style.md                    |  2 +-
 doc/tutorials/basic/templates.md                |  4 ++--
 doc/tutorials/basic/widgets.md                  |  2 +-
 doc/tutorials/expert/custom_components.md       |  2 +-
 doc/tutorials/intermediate/develop_editor.md    |  6 +++---
 doc/tutorials/intermediate/serve.md             |  4 ++--
 .../intermediate/structure_data_store.md        |  2 +-
 panel/command/serve.py                          | 17 +++++++++++++----
 pyproject.toml                                  |  2 +-
 34 files changed, 71 insertions(+), 62 deletions(-)

diff --git a/doc/explanation/develop_seamlessly.md b/doc/explanation/develop_seamlessly.md
index 0f4e622d5b..f29d1723a6 100644
--- a/doc/explanation/develop_seamlessly.md
+++ b/doc/explanation/develop_seamlessly.md
@@ -146,10 +146,10 @@ template.servable()
 From the terminal run the following command.
 
 ```bash
-panel serve app.py --show --autoreload
+panel serve app.py --show --dev
 ```
 
-The `--show` flag will open a browser tab with the live app and the `--autoreload` flag ensures that the app reloads whenever you make a change to the Python source. `--autoreload` is key to your developer experience, you will see the app being updated live when you save your app file! In the image below the windows have been re-arranged the way web developers like, on one side the code and on the other side a live view of the app, just like the *Preview* functionality in Jupyterlab.
+The `--show` flag will open a browser tab with the live app and the `--dev` flag ensures that the app reloads whenever you make a change to the Python source. `--dev` is key to your developer experience, you will see the app being updated live when you save your app file! In the image below the windows have been re-arranged the way web developers like, on one side the code and on the other side a live view of the app, just like the *Preview* functionality in Jupyterlab.
 
 ![VSCode Preview](../_static/images/vscode_preview.png)
 
diff --git a/doc/getting_started/build_app.md b/doc/getting_started/build_app.md
index 91cf34b6d9..8932f230ae 100644
--- a/doc/getting_started/build_app.md
+++ b/doc/getting_started/build_app.md
@@ -124,7 +124,7 @@ Save the notebook with the name `app.ipynb`.
 Finally, we'll serve the app with:
 
 ```bash
-panel serve app.ipynb --autoreload
+panel serve app.ipynb --dev
 ```
 
 Now, open the app in your browser at [http://localhost:5006/app](http://localhost:5006/app).
@@ -138,7 +138,7 @@ It should look like this:
 If you prefer developing in a Python Script using an editor, you can copy the code into a file `app.py` and serve it.
 
 ```bash
-panel serve app.py --autoreload
+panel serve app.py --dev
 ```
 
 :::
diff --git a/doc/getting_started/core_concepts.md b/doc/getting_started/core_concepts.md
index 13a73196d4..b2f4d9ec63 100644
--- a/doc/getting_started/core_concepts.md
+++ b/doc/getting_started/core_concepts.md
@@ -37,7 +37,7 @@ By placing a Panel component at the end of a notebook cell, it renders as part o
 To add Panel components to your app, mark them as `.servable()` and serve the app with:
 
 ```bash
-panel serve app.ipynb --autoreload
+panel serve app.ipynb --dev
 ```
 
 You've already experimented with this while [building a simple app](build_app.md).
@@ -47,10 +47,10 @@ You've already experimented with this while [building a simple app](build_app.md
 If you're working in an editor, declare the Panel components you want to display as `.servable()`, then serve the script with:
 
 ```bash
-panel serve app.py --autoreload --show
+panel serve app.py --dev --show
 ```
 
-Upon running that command, Panel launches a server that serves your app, opens a tab in your default browser (`--show`), and updates the application whenever you modify the code (`--autoreload`).
+Upon running that command, Panel launches a server that serves your app, opens a tab in your default browser (`--show`), and updates the application whenever you modify the code (`--dev`).
 
 <img src="https://assets.holoviz.org/panel/gifs/vscode_autoreload.gif" style="margin-left: auto; margin-right: auto; display: block;"></img>
 
diff --git a/doc/getting_started/installation.md b/doc/getting_started/installation.md
index 23706457b9..8a0cee4118 100644
--- a/doc/getting_started/installation.md
+++ b/doc/getting_started/installation.md
@@ -62,7 +62,7 @@ conda install panel watchfiles
 :::::
 
 :::{tip}
-We recommend also installing [`watchfiles`](https://watchfiles.helpmanual.io) while developing. This will provide a significantly better experience when using Panel's `--autoreload` feature. It's not needed for production.
+We recommend also installing [`watchfiles`](https://watchfiles.helpmanual.io) while developing. This will provide a significantly better experience when using Panel's autoreload features when activating `--dev` mode. It's not needed for production.
 :::
 
 :::{tip}
diff --git a/doc/how_to/server/commandline.md b/doc/how_to/server/commandline.md
index 10b2baa7bc..cd0eb5fa2b 100644
--- a/doc/how_to/server/commandline.md
+++ b/doc/how_to/server/commandline.md
@@ -12,13 +12,13 @@ or even serve a number of apps at once:
 
     panel serve apps/*.py
 
-For development it can be particularly helpful to use the ``--autoreload`` option to `panel serve` as that will automatically reload the page whenever the application code or any of its imports change.
+For development it can be particularly helpful to use the `--dev` option to `panel serve` as that will automatically reload the page whenever the application code or any of its imports change.
 
 ```{note}
-We recommend installing `watchfiles`, which will provide a significantly better user experience when using `--autoreload`.
+We recommend installing `watchfiles`, which will provide a significantly better user experience when using `--dev`.
 ```
 
-The ``panel serve`` command has the following options:
+The `panel serve` command has the following options:
 
 ```bash
 positional arguments:
@@ -142,6 +142,6 @@ options:
                         Whether to add a global loading spinner to the application(s).
 ```
 
-To turn a notebook into a deployable app simply append ``.servable()`` to one or more Panel objects, which will add the app to Bokeh's ``curdoc``, ensuring it can be discovered by Bokeh server on deployment. In this way it is trivial to build dashboards that can be used interactively in a notebook and then seamlessly deployed on Bokeh server.
+To turn a notebook into a deployable app simply append `.servable()` to one or more Panel objects, which will add the app to Bokeh's `curdoc`, ensuring it can be discovered by Bokeh server on deployment. In this way it is trivial to build dashboards that can be used interactively in a notebook and then seamlessly deployed on Bokeh server.
 
 When called on a notebook, `panel serve` first converts it to a python script using [`nbconvert.PythonExporter()`](https://nbconvert.readthedocs.io/en/stable/api/exporters.html), albeit with [IPython magics](https://ipython.readthedocs.io/en/stable/interactive/magics.html) stripped out. This means that non-code cells, such as raw cells, are entirely handled by `nbconvert` and [may modify the served app](https://nbsphinx.readthedocs.io/en/latest/raw-cells.html).
diff --git a/doc/how_to/streamlit_migration/get_started.md b/doc/how_to/streamlit_migration/get_started.md
index 8ba76650a3..89762a0ce3 100644
--- a/doc/how_to/streamlit_migration/get_started.md
+++ b/doc/how_to/streamlit_migration/get_started.md
@@ -54,7 +54,7 @@ pn.panel("Hello World").servable()
 You *serve* and *show* (i.e. open) the app in your browser with *autoreload* via
 
 ```bash
-panel serve app.py --autoreload --show
+panel serve app.py --dev --show
 ```
 
 ![Panel Hello World Example](../../_static/images/panel_hello_world.png)
diff --git a/doc/how_to/wasm/convert.md b/doc/how_to/wasm/convert.md
index 83bf87a117..afa7f6a55d 100644
--- a/doc/how_to/wasm/convert.md
+++ b/doc/how_to/wasm/convert.md
@@ -79,7 +79,7 @@ You can now add the `script.html` (and `script.js` file if you used the `pyodide
 
 ## Tips & Tricks for development
 
-- While developing you should run the script locally with *auto reload*: `panel serve script.py --autoreload`.
+- While developing you should run the script locally in dev mode (enabling autoreload): `panel serve script.py --dev`.
 - You can also watch your script for changes and rebuild it if you make an edit with `panel convert ... --watch`
 - If the converted app does not work as expected, you can most often find the errors in the browser
 console. [This guide](https://balsamiq.com/support/faqs/browserconsole/) describes how to open the
diff --git a/doc/tutorials/basic/build_animation.md b/doc/tutorials/basic/build_animation.md
index d3e9d1d5ec..0f47580f67 100644
--- a/doc/tutorials/basic/build_animation.md
+++ b/doc/tutorials/basic/build_animation.md
@@ -146,7 +146,7 @@ VALUE = "p_cap"
 
 @pn.cache()
 def get_data():
-    return pd.read_csv("https://assets.holoviz.org/panel/tutorials/turbines.csv.gz")
+    return pd.read_csv("https://datasets.holoviz.org/windturbines/v1/windturbines.csv.gz")
 
 data = get_data()
 min_year = int(data.p_year.min())
@@ -257,7 +257,7 @@ Now serve the app with:
 :sync: script
 
 ```bash
-panel serve app.py --autoreload
+panel serve app.py --dev
 ```
 
 :::
@@ -266,7 +266,7 @@ panel serve app.py --autoreload
 :sync: notebook
 
 ```bash
-panel serve app.ipynb --autoreload
+panel serve app.ipynb --dev
 ```
 
 :::
diff --git a/doc/tutorials/basic/build_chatbot.md b/doc/tutorials/basic/build_chatbot.md
index a126f55fa6..82461d0208 100644
--- a/doc/tutorials/basic/build_chatbot.md
+++ b/doc/tutorials/basic/build_chatbot.md
@@ -3,7 +3,7 @@
 In this tutorial, we will build a streaming *chat bot*. We will first use the *high-level* [`ChatInterface`](../../reference/chat/ChatInterface.md) to build a basic chat bot. Then we will add streaming.
 
 :::{note}
-When we ask to *run the code* in the sections below, we may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --autoreload`.
+When we ask to *run the code* in the sections below, we may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --dev`.
 :::
 
 ## Build a Basic Chat Bot
diff --git a/doc/tutorials/basic/build_crossfilter_dashboard.md b/doc/tutorials/basic/build_crossfilter_dashboard.md
index 915bb0e4fe..dd6a6d17d4 100644
--- a/doc/tutorials/basic/build_crossfilter_dashboard.md
+++ b/doc/tutorials/basic/build_crossfilter_dashboard.md
@@ -234,7 +234,7 @@ pn.template.FastListTemplate(
 
 The [`FastListTemplate`](https://panel.holoviz.org/reference/templates/FastListTemplate.html) is a pre-built Panel template that provides a clean and modern layout for our dashboard. It takes our crossfiltering plot and other configurations as input, creating a cohesive and interactive web application.
 
-Now serve the app with `panel serve app.py --autoreload`. It should look like
+Now serve the app with `panel serve app.py --dev`. It should look like
 
 <video muted controls loop poster="../../_static/images/panel_crossfilter_dashboard.png" style="max-height: 400px; max-width: 100%;">
     <source src="https://assets.holoviz.org/panel/tutorials/panel_crossfilter_dashboard.mp4" type="video/mp4">
diff --git a/doc/tutorials/basic/build_image_classifier.md b/doc/tutorials/basic/build_image_classifier.md
index 6ea769176a..cf89603537 100644
--- a/doc/tutorials/basic/build_image_classifier.md
+++ b/doc/tutorials/basic/build_image_classifier.md
@@ -10,7 +10,7 @@ In this tutorial, we will collaboratively build an *Image Classifier* that can d
 We will be using a *random* classifier, but you can later replace it with your own custom classifier if you want.
 
 :::{note}
-When we ask you to *run the code* in the sections below, you may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --autoreload`.
+When we ask you to *run the code* in the sections below, you may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --dev`.
 :::
 
 ## Install the Dependencies
diff --git a/doc/tutorials/basic/build_monitoring_dashboard.md b/doc/tutorials/basic/build_monitoring_dashboard.md
index 67d2295df6..b810d532fe 100644
--- a/doc/tutorials/basic/build_monitoring_dashboard.md
+++ b/doc/tutorials/basic/build_monitoring_dashboard.md
@@ -237,7 +237,7 @@ Now serve the app with:
 :sync: script
 
 ```bash
-panel serve app.py --autoreload
+panel serve app.py --dev
 ```
 
 :::
@@ -246,7 +246,7 @@ panel serve app.py --autoreload
 :sync: notebook
 
 ```bash
-panel serve app.ipynb --autoreload
+panel serve app.ipynb --dev
 ```
 
 :::
diff --git a/doc/tutorials/basic/build_streaming_dashboard.md b/doc/tutorials/basic/build_streaming_dashboard.md
index c34e9d5fe5..3993d1cee3 100644
--- a/doc/tutorials/basic/build_streaming_dashboard.md
+++ b/doc/tutorials/basic/build_streaming_dashboard.md
@@ -5,7 +5,7 @@ In this tutorial, we come together to create a simple streaming dashboard to mon
 - We will use `pn.state.add_periodic_callback` to trigger a task to run on a schedule.
 
 :::{note}
-When we ask to *run the code* in the sections below, you may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --autoreload`.
+When we ask to *run the code* in the sections below, you may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --dev`.
 :::
 
 ## Install the Dependencies
diff --git a/doc/tutorials/basic/build_todo.md b/doc/tutorials/basic/build_todo.md
index 23667f1d75..448e6c1da7 100644
--- a/doc/tutorials/basic/build_todo.md
+++ b/doc/tutorials/basic/build_todo.md
@@ -8,7 +8,7 @@ In this section, we will work on building a *Todo App* together so that our wind
 - Disabling or hiding buttons when necessary
 
 :::{note}
-When we ask everyone to *run the code* in the sections below, you may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --autoreload`.
+When we ask everyone to *run the code* in the sections below, you may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --dev`.
 :::
 
 <iframe src="https://panel-org-build-todo-app.hf.space" frameborder="0" style="width: 100%;height:500px"></iframe>
diff --git a/doc/tutorials/basic/caching.md b/doc/tutorials/basic/caching.md
index 291446b14e..06a4d57d4d 100644
--- a/doc/tutorials/basic/caching.md
+++ b/doc/tutorials/basic/caching.md
@@ -7,7 +7,7 @@ Caching is a powerful technique that not only accelerates your applications but
 With `pn.cache`, you can effortlessly cache function results, unlocking a plethora of performance benefits for your Panel apps.
 
 :::{note}
-As you proceed through the sections below, feel free to execute the code directly in the Panel docs using the handy green *run* button, in a notebook cell, or within a Python file `app.py` served with `panel serve app.py --autoreload`.
+As you proceed through the sections below, feel free to execute the code directly in the Panel docs using the handy green *run* button, in a notebook cell, or within a Python file `app.py` served with `panel serve app.py --dev`.
 :::
 
 ## Grasp Panel Application Execution
@@ -65,19 +65,19 @@ It should look like
 
 :::
 
-### Exercise: Enable `--autoreload`
+### Exercise: Enable `--dev`
 
-Try repeating the aforementioned steps with `--autoreload`.
+Try repeating the aforementioned steps with `--dev`.
 
 ```bash
-panel serve app.py --autoreload
+panel serve app.py --dev
 ```
 
 Observe the changes.
 
 :::{dropdown} Solution
 
-With `--autoreload`, both files are executed when the server starts and before the page is loaded for the first time.
+With `--dev`, both files are executed when the server starts and before the page is loaded for the first time.
 
 <img src="https://assets.holoviz.org/panel/tutorials/page_load_end_autoreload.png"></img>
 
diff --git a/doc/tutorials/basic/design.md b/doc/tutorials/basic/design.md
index 4128d67a0f..2171f04c76 100644
--- a/doc/tutorials/basic/design.md
+++ b/doc/tutorials/basic/design.md
@@ -10,7 +10,7 @@ Panel empowers you to effortlessly style your apps using pre-built *designs*, re
 Additionally, Panel supports both `"default"` and `"dark"` themes to further tailor the appearance of your application.
 
 :::{note}
-In the sections below, you can run the provided code directly in the Panel documentation by utilizing the green *run* button, executing it in a notebook cell, or saving it in a file named `app.py` and serving it with `panel serve app.py --autoreload`.
+In the sections below, you can run the provided code directly in the Panel documentation by utilizing the green *run* button, executing it in a notebook cell, or saving it in a file named `app.py` and serving it with `panel serve app.py --dev`.
 :::
 
 ## Change the Design
diff --git a/doc/tutorials/basic/develop_editor.md b/doc/tutorials/basic/develop_editor.md
index 1c0ca5bb4f..301ca630bd 100644
--- a/doc/tutorials/basic/develop_editor.md
+++ b/doc/tutorials/basic/develop_editor.md
@@ -40,7 +40,7 @@ Copy this code into a file named `app.py` and save it.
 Now, open a terminal and run the following command:
 
 ```bash
-panel serve app.py --autoreload
+panel serve app.py --dev
 ```
 
 This will start the server and provide you with a URL where your app is being served. Open this URL in your browser to see your app in action.
@@ -94,7 +94,7 @@ Serving this code will print information about the `layout` object, revealing it
 Serve the app by running the below command in a terminal.
 
 ```bash
-panel serve app.py --autoreload
+panel serve app.py --dev
 ```
 
 Open [http://localhost:5006/app](http://localhost:5006/app) in a browser.
@@ -131,7 +131,7 @@ pn.Row(
 ).servable()
 ```
 
-Serve the app with `panel serve app.py --autoreload`.
+Serve the app with `panel serve app.py --dev`.
 
 Open [http://localhost:5006](http://localhost:5006) in a browser.
 
diff --git a/doc/tutorials/basic/indicators_activity.md b/doc/tutorials/basic/indicators_activity.md
index 04ffb02340..6c568a0075 100644
--- a/doc/tutorials/basic/indicators_activity.md
+++ b/doc/tutorials/basic/indicators_activity.md
@@ -9,7 +9,7 @@ Let's bring our Panel apps to life with dynamic indicators and notifications, mu
 - Provide notifications using `pn.state.notifications`.
 
 :::{note}
-In the sections below, you can execute the code directly in the Panel documentation using the green *run* button, in a notebook cell, or in a file named `app.py` served with `panel serve app.py --autoreload`.
+In the sections below, you can execute the code directly in the Panel documentation using the green *run* button, in a notebook cell, or in a file named `app.py` served with `panel serve app.py --dev`.
 :::
 
 ```{pyodide}
diff --git a/doc/tutorials/basic/indicators_performance.md b/doc/tutorials/basic/indicators_performance.md
index 1f8dc7661a..0c0ac1624e 100644
--- a/doc/tutorials/basic/indicators_performance.md
+++ b/doc/tutorials/basic/indicators_performance.md
@@ -23,7 +23,7 @@ In this tutorial, we'll explore various indicators offered by Panel to showcase
 For a comprehensive list of indicators and their detailed reference guides, you can always refer to the [Indicators Section](https://panel.holoviz.org/reference/index.html#indicators) in the [Component Gallery](../../reference/index.md).
 
 :::{note}
-Throughout this tutorial, whenever we refer to "run the code," you can execute it directly in the Panel docs using the green *run* button, in a notebook cell, or within a file named `app.py` served with `panel serve app.py --autoreload`.
+Throughout this tutorial, whenever we refer to "run the code," you can execute it directly in the Panel docs using the green *run* button, in a notebook cell, or within a file named `app.py` served with `panel serve app.py --dev`.
 :::
 
 ## Display a Number
@@ -44,7 +44,7 @@ pn.indicators.Number(
 ```
 
 :::{note}
-Adding `.servable()` to the `Number` indicator incorporates it into the app served by `panel serve app.py --autoreload`. Note that it's not necessary for displaying the indicator in a notebook.
+Adding `.servable()` to the `Number` indicator incorporates it into the app served by `panel serve app.py --dev`. Note that it's not necessary for displaying the indicator in a notebook.
 :::
 
 Feel free to tweak the `value` from `8.6` to `11.4` and observe the color change to *red*.
diff --git a/doc/tutorials/basic/layouts.md b/doc/tutorials/basic/layouts.md
index b0bdfd4312..6a911a235b 100644
--- a/doc/tutorials/basic/layouts.md
+++ b/doc/tutorials/basic/layouts.md
@@ -11,7 +11,7 @@ In this guide, we'll explore the following aspects of layouts:
 - **Reference Guides**: Explore detailed documentation for each layout in the [Layouts Section](https://panel.holoviz.org/reference/index.html#layouts) of the [Component Gallery](../../reference/index.md).
 
 :::{note}
-As you follow along with the code examples below, feel free to execute them directly in the Panel documentation, a notebook cell, or within a file named `app.py` served with `panel serve app.py --autoreload`.
+As you follow along with the code examples below, feel free to execute them directly in the Panel documentation, a notebook cell, or within a file named `app.py` served with `panel serve app.py --dev`.
 :::
 
 ## Layout in a Column
diff --git a/doc/tutorials/basic/panes.md b/doc/tutorials/basic/panes.md
index 65ec5974b8..f53765c7eb 100644
--- a/doc/tutorials/basic/panes.md
+++ b/doc/tutorials/basic/panes.md
@@ -15,7 +15,7 @@ You might notice a lot of repetition from the previous section regarding `pn.pan
 :::
 
 :::{note}
-When we ask you to *run the code* in the sections below, you may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --autoreload`.
+When we ask you to *run the code* in the sections below, you may either execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --dev`.
 :::
 
 ```{pyodide}
@@ -40,7 +40,7 @@ pn.pane.Str(
 ```
 
 :::{note}
-We add `.servable()` to the component to add it to the app served by `panel serve app.py --autoreload`. Adding `.servable()` is not needed to display the component in a notebook.
+We add `.servable()` to the component to add it to the app served by `panel serve app.py --dev`. Adding `.servable()` is not needed to display the component in a notebook.
 :::
 
 :::{note}
diff --git a/doc/tutorials/basic/pn_panel.md b/doc/tutorials/basic/pn_panel.md
index 1c7f519b4b..05744c9022 100644
--- a/doc/tutorials/basic/pn_panel.md
+++ b/doc/tutorials/basic/pn_panel.md
@@ -5,7 +5,7 @@ In this guide, we will learn to display Python objects easily with `pn.panel`:
 - Display any Python object via `pn.panel(the_object, ...)`.
 
 :::{note}
-When we ask to *run the code* in the sections below, we may execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --autoreload`.
+When we ask to *run the code* in the sections below, we may execute the code directly in the Panel docs via the green *run* button, in a cell in a notebook, or in a file `app.py` that is served with `panel serve app.py --dev`.
 :::
 
 ```{pyodide}
@@ -28,7 +28,7 @@ pn.panel("Hello World").servable()
 ```
 
 :::{note}
-We add `.servable()` to the component to add it to the app served by `panel serve app.py --autoreload`. Adding `.servable()` is not needed to display the component in a notebook.
+We add `.servable()` to the component to add it to the app served by `panel serve app.py --dev`. Adding `.servable()` is not needed to display the component in a notebook.
 :::
 
 `pn.panel` uses a *heuristic* algorithm to determine how to best display the `object`. To make this very explicit, we will `print` the component in all the examples below.
diff --git a/doc/tutorials/basic/progressive_layouts.md b/doc/tutorials/basic/progressive_layouts.md
index e3547453b3..dd8dbe48ad 100644
--- a/doc/tutorials/basic/progressive_layouts.md
+++ b/doc/tutorials/basic/progressive_layouts.md
@@ -8,7 +8,7 @@ In this tutorial, we'll:
 - Harness the power of reactive expressions (`pn.rx`) to facilitate dynamic updates to the app.
 
 :::{note}
-When instructed to run the code, you can execute it directly in the Panel documentation using the green *run* button, in a notebook cell, or in a file named `app.py` served with `panel serve app.py --autoreload`.
+When instructed to run the code, you can execute it directly in the Panel documentation using the green *run* button, in a notebook cell, or in a file named `app.py` served with `panel serve app.py --dev`.
 :::
 
 ## Replace Content Progressively
diff --git a/doc/tutorials/basic/serve.md b/doc/tutorials/basic/serve.md
index 78526ee75f..d2c3c79e62 100644
--- a/doc/tutorials/basic/serve.md
+++ b/doc/tutorials/basic/serve.md
@@ -33,7 +33,7 @@ Here's a breakdown of the code:
 Copy the code into a file named `app.py` and save it. Then, run the Panel server in your terminal with:
 
 ```bash
-panel serve app.py --autoreload
+panel serve app.py --dev
 ```
 
 ::::
@@ -67,7 +67,7 @@ Copy the above code cells into a clean notebook named `app.ipynb`. Run the cells
 Then, run the Panel server in your terminal with:
 
 ```bash
-panel serve app.ipynb --autoreload
+panel serve app.ipynb --dev
 ```
 
 :::::
@@ -92,7 +92,7 @@ Play around with the app by modifying the `"Hello World"` text, saving the file
 Congratulations on serving your first Panel app! Let's recap what we've learned:
 
 - How to serve a Python script or Notebook using `panel serve app.py` or `panel serve app.ipynb`, respectively.
-- How to enable *auto reload* with the `--autoreload` flag.
+- How to enable *auto reload* with the `--dev` flag.
 - How to stop the Panel server with `CTRL+C`.
 
 ## Resources
diff --git a/doc/tutorials/basic/size.md b/doc/tutorials/basic/size.md
index 75d21898c5..aed2680474 100644
--- a/doc/tutorials/basic/size.md
+++ b/doc/tutorials/basic/size.md
@@ -12,7 +12,7 @@ Panel provides various options to control the size of components:
 - `max_width`/`max_height`: Allows setting a maximum width or height if responsive sizing is set along the corresponding dimension.
 
 :::{note}
-Throughout this tutorial, you can execute the provided code directly in the Panel documentation using the green *run* button, in a notebook cell, or within a file named `app.py` served with `panel serve app.py --autoreload`.
+Throughout this tutorial, you can execute the provided code directly in the Panel documentation using the green *run* button, in a notebook cell, or within a file named `app.py` served with `panel serve app.py --dev`.
 :::
 
 ## Inherent and Absolute Sizing
diff --git a/doc/tutorials/basic/style.md b/doc/tutorials/basic/style.md
index 987a3a8383..8abee01ae8 100644
--- a/doc/tutorials/basic/style.md
+++ b/doc/tutorials/basic/style.md
@@ -5,7 +5,7 @@ Let's elevate the appearance of our Panel components using the power of [*CSS*](
 By employing *CSS*, we can finely adjust the look and feel of our wind turbine data apps, ensuring they are visually appealing and user-friendly.
 
 :::{note}
-To execute the code snippets below, feel free to run them directly in the Panel documentation via the convenient green *run* button, within a notebook cell, or within a `app.py` file served with `panel serve app.py --autoreload`.
+To execute the code snippets below, feel free to run them directly in the Panel documentation via the convenient green *run* button, within a notebook cell, or within a `app.py` file served with `panel serve app.py --dev`.
 :::
 
 ## Utilize `styles`
diff --git a/doc/tutorials/basic/templates.md b/doc/tutorials/basic/templates.md
index 7aba88f24f..9186e48912 100644
--- a/doc/tutorials/basic/templates.md
+++ b/doc/tutorials/basic/templates.md
@@ -26,7 +26,7 @@ pn.template.FastListTemplate(
 Serve the app with:
 
 ```bash
-panel serve app.py --autoreload
+panel serve app.py --dev
 ```
 
 It should resemble the following:
@@ -138,7 +138,7 @@ pn.template.FastListTemplate(
 Serve the app with:
 
 ```bash
-panel serve app.py --autoreload
+panel serve app.py --dev
 ```
 
 It should appear as shown below. Try toggling the theme button in the upper right corner.
diff --git a/doc/tutorials/basic/widgets.md b/doc/tutorials/basic/widgets.md
index bdb4e06691..e742c7efbf 100644
--- a/doc/tutorials/basic/widgets.md
+++ b/doc/tutorials/basic/widgets.md
@@ -42,7 +42,7 @@ pn.widgets.Button(
 With features like icons, button types, and descriptions, buttons provide both functionality and visual cues to users. Hover over the button to see its description displayed as a helpful tooltip.
 
 :::{note}
-The `.servable()` method is used to include the component in the app served by `panel serve app.py --autoreload`. This is not necessary for displaying the component in a notebook.
+The `.servable()` method is used to include the component in the app served by `panel serve app.py --dev`. This is not necessary for displaying the component in a notebook.
 :::
 
 For a deeper understanding of the `Button` widget and its capabilities, refer to its detailed [reference guide](../../reference/widgets/Button.md).
diff --git a/doc/tutorials/expert/custom_components.md b/doc/tutorials/expert/custom_components.md
index c27f93f0d1..f057c041b1 100644
--- a/doc/tutorials/expert/custom_components.md
+++ b/doc/tutorials/expert/custom_components.md
@@ -202,7 +202,7 @@ Create a file named `mario_button.css`:
 To serve the application, run the following command in your terminal:
 
 ```sh
-panel serve mario_button.py --autoreload
+panel serve mario_button.py --dev
 ```
 
 This command will start a Panel server and automatically reload changes as you edit the files.
diff --git a/doc/tutorials/intermediate/develop_editor.md b/doc/tutorials/intermediate/develop_editor.md
index 7c49eed387..dce521669d 100644
--- a/doc/tutorials/intermediate/develop_editor.md
+++ b/doc/tutorials/intermediate/develop_editor.md
@@ -15,7 +15,7 @@ Some of the features demonstrated in this guide might require special configurat
 
 ## Resetting the Cache
 
-When developing with the `--autoreload` option and utilizing caching, you may need to reset the cache. You have the option to clear either the entire cache or just the cache for a specific function.
+When developing with the `--dev` option and utilizing caching, you may need to reset the cache. You have the option to clear either the entire cache or just the cache for a specific function.
 
 Execute the code below:
 
@@ -62,7 +62,7 @@ def handle_click(event):
 pn.widgets.Button(name="Click Me", on_click=handle_click, button_type="primary").servable()
 ```
 
-Serve the app with `panel serve app.py --autoreload`.
+Serve the app with `panel serve app.py --dev`.
 
 Open [http://localhost:5006/app](http://localhost:5006/app) in a browser.
 
@@ -75,7 +75,7 @@ Click the `Click Me` Button.
 Your terminal will look something like
 
 ```bash
-$ panel serve app.py --autoreload
+$ panel serve app.py --dev
 2024-01-20 08:12:09,512 Starting Bokeh server version 3.3.3 (running on Tornado 6.4)
 2024-01-20 08:12:09,514 User authentication hooks NOT provided (default user enabled)
 2024-01-20 08:12:09,516 Bokeh app running at: http://localhost:5006/app
diff --git a/doc/tutorials/intermediate/serve.md b/doc/tutorials/intermediate/serve.md
index 4b1568e38b..de8a9acf1a 100644
--- a/doc/tutorials/intermediate/serve.md
+++ b/doc/tutorials/intermediate/serve.md
@@ -37,12 +37,12 @@ pn.panel("Hello Notebook World").servable()
 
 Run the cells and save the notebook if you have not already done it.
 
-Run `panel serve app.py app2.ipynb --autoreload`.
+Run `panel serve app.py app2.ipynb --dev`.
 
 It should look like
 
 ```bash
-$ panel serve app.py app2.ipynb --autoreload
+$ panel serve app.py app2.ipynb --dev
 2024-01-17 21:14:43,502 Starting Bokeh server version 3.3.3 (running on Tornado 6.4)
 2024-01-17 21:14:43,503 User authentication hooks NOT provided (default user enabled)
 2024-01-17 21:14:43,506 Bokeh app running at: http://localhost:5006/app
diff --git a/doc/tutorials/intermediate/structure_data_store.md b/doc/tutorials/intermediate/structure_data_store.md
index 9b9a6ae8da..785dbabf0c 100644
--- a/doc/tutorials/intermediate/structure_data_store.md
+++ b/doc/tutorials/intermediate/structure_data_store.md
@@ -241,7 +241,7 @@ App(
 ).servable()
 ```
 
-Once saved, run `panel serve app.py --autoreload` in your terminal to launch the app.
+Once saved, run `panel serve app.py --dev` in your terminal to launch the app.
 
 The app will look something like
 
diff --git a/panel/command/serve.py b/panel/command/serve.py
index d2f8f04842..949546c9d7 100644
--- a/panel/command/serve.py
+++ b/panel/command/serve.py
@@ -87,7 +87,7 @@ def run_unload_hook(self):
 
 class Serve(_BkServe):
 
-    args = _BkServe.args + (
+    args = tuple((arg, arg_obj) for arg, arg_obj in _BkServe.args if arg != '--dev') + (
         ('--static-dirs', dict(
             metavar="KEY=VALUE",
             nargs='+',
@@ -232,6 +232,10 @@ class Serve(_BkServe):
             type    = str,
             help    = "The profiler to use by default, e.g. pyinstrument, snakeviz or memray."
         )),
+        ('--dev', dict(
+            action  = 'store_true',
+            help    = "Whether to enable dev mode. Equivalent to --autoreload."
+        )),
         ('--autoreload', dict(
             action  = 'store_true',
             help    = "Whether to autoreload source when script changes."
@@ -366,11 +370,11 @@ def customize_kwargs(self, args, server_kwargs):
             module.__dict__['__file__'] = fullpath(args.setup)
             state._setup_module = module
 
-        if args.warm or args.autoreload:
+        if args.warm or config.autoreload:
             argvs = {f: args.args for f in files}
             applications = build_single_handler_applications(files, argvs)
             initialize_session = not (args.num_procs and sys.version_info < (3, 12))
-            if args.autoreload:
+            if config.autoreload:
                 with record_modules(list(applications.values())):
                     self.warm_applications(
                         applications, args.reuse_sessions, error=False, initialize_session=initialize_session
@@ -378,6 +382,10 @@ def customize_kwargs(self, args, server_kwargs):
             else:
                 self.warm_applications(applications, args.reuse_sessions, initialize_session=initialize_session)
 
+        # Disable Tornado's autoreload
+        if args.dev:
+            del server_kwargs['autoreload']
+
         if args.liveness:
             argvs = {f: args.args for f in files}
             applications = build_single_handler_applications(files, argvs)
@@ -643,8 +651,9 @@ def customize_kwargs(self, args, server_kwargs):
     def invoke(self, args: argparse.Namespace):
         # Autoreload must be enabled before the application(s) are executed
         # to avoid erroring out
-        config.autoreload = args.autoreload
+        config.autoreload = args.autoreload or bool(args.dev)
         # Empty layout are valid and the Bokeh warning is silenced as usually
         # not relevant to Panel users.
         silence(EMPTY_LAYOUT, True)
+        args.dev = None
         super().invoke(args)
diff --git a/pyproject.toml b/pyproject.toml
index 86444af24c..4fc78008d3 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -75,7 +75,7 @@ recommended = [
     'pillow',
     'plotly',
 ]
-standard = [
+dev = [
     'watchfiles',
 ]
 tests = [

From c70983242021cc94aeedf1aaf3c4ba486bfadef4 Mon Sep 17 00:00:00 2001
From: TBym <104215027+TBym@users.noreply.github.com>
Date: Mon, 2 Sep 2024 16:07:16 +0200
Subject: [PATCH 031/164] Tabulator custom filtering function returning mask
 instead of filtered dataframe (#7225)

This changes allows to pass a custom function for filtering tabulator data. The function should instead of returning new filtered dataframe return a mask that is then treated as other filter masks. This  change allows to combine multiple filters to a tabulator data when one or multiple filters are defined as custom functions.
---
 panel/tests/widgets/test_tables.py | 37 ++++++++++++++++++++++++++++++
 panel/widgets/tables.py            |  6 ++++-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/panel/tests/widgets/test_tables.py b/panel/tests/widgets/test_tables.py
index 38a781283f..050acf1824 100644
--- a/panel/tests/widgets/test_tables.py
+++ b/panel/tests/widgets/test_tables.py
@@ -2073,6 +2073,43 @@ def filter_c(df, value):
     for col, values in model.source.data.items():
         np.testing.assert_array_equal(values, expected[col])
 
+def test_tabulator_function_mask_filter(document, comm):
+    df = makeMixedDataFrame()
+    table = Tabulator(df)
+
+    model = table.get_root(document, comm)
+
+    widget = TextInput(value='foo3')
+
+    def filter_c(df, value):
+        return df.C.str.contains(value)
+
+    table.add_filter(bind(filter_c, value=widget), 'C')
+
+    expected = {
+        'index': np.array([2]),
+        'A': np.array([2]),
+        'B': np.array([0]),
+        'C': np.array(['foo3']),
+        'D': np.array(['2009-01-05T00:00:00.000000000'],
+                      dtype='datetime64[ns]').astype(np.int64) / 10e5
+    }
+    for col, values in model.source.data.items():
+        np.testing.assert_array_equal(values, expected[col])
+
+    widget.value = 'foo1'
+
+    expected = {
+        'index': np.array([0]),
+        'A': np.array([0]),
+        'B': np.array([0]),
+        'C': np.array(['foo1']),
+        'D': np.array(['2009-01-01T00:00:00.000000000'],
+                      dtype='datetime64[ns]').astype(np.int64) / 10e5
+    }
+    for col, values in model.source.data.items():
+        np.testing.assert_array_equal(values, expected[col])
+
 def test_tabulator_constant_tuple_filter(document, comm):
     df = makeMixedDataFrame()
     table = Tabulator(df)
diff --git a/panel/widgets/tables.py b/panel/widgets/tables.py
index 0c4e400613..e523bf9e50 100644
--- a/panel/widgets/tables.py
+++ b/panel/widgets/tables.py
@@ -442,7 +442,11 @@ def _filter_dataframe(self, df: pd.DataFrame) -> pd.DataFrame:
             if col_name is not None and col_name not in df.columns:
                 continue
             if isinstance(filt, (FunctionType, MethodType, partial)):
-                df = filt(df)
+                res = filt(df)
+                if type(res) == type(df): #function returned filtered dataframe
+                    df = res
+                else: #assume boolean mask
+                    filters.append(res)
                 continue
             if isinstance(filt, param.Parameter):
                 val = getattr(filt.owner, filt.name)

From 06004a0ab941b2e1fd1716a5c0d5dea32c2aec1b Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 2 Sep 2024 21:08:50 +0200
Subject: [PATCH 032/164] Ensure proper cleanup of watchfiles threads on server
 shutdown (#7184)

---
 panel/custom.py    | 5 ++++-
 panel/io/server.py | 3 +++
 panel/io/state.py  | 3 +++
 panel/reactive.py  | 5 ++++-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/panel/custom.py b/panel/custom.py
index 7de55b4a3a..1c0823106c 100644
--- a/panel/custom.py
+++ b/panel/custom.py
@@ -205,6 +205,8 @@ def _cleanup(self, root: Model | None) -> None:
         super()._cleanup(root)
         if not self._models and self._watching_esm:
             self._watching_esm.set()
+            if self._watching_esm in state._watch_events:
+                state._watch_events.remove(self._watching_esm)
             self._watching_esm = False
 
     async def _watch_esm(self):
@@ -291,7 +293,8 @@ def _setup_autoreload(self):
             return
         super()._setup_autoreload()
         if (self._esm_path(compiled=False) and not self._watching_esm):
-            self._watching_esm = asyncio.Event()
+            self._watching_esm = event = asyncio.Event()
+            state._watch_events.append(event)
             state.execute(self._watch_esm)
 
     def _get_model(
diff --git a/panel/io/server.py b/panel/io/server.py
index e11812a610..625afacd33 100644
--- a/panel/io/server.py
+++ b/panel/io/server.py
@@ -360,6 +360,9 @@ def stop(self, wait: bool = True) -> None:
             # For the stop event to be processed we have to restart
             # the IOLoop briefly, ensuring an orderly cleanup
             async def stop_autoreload():
+                for event in state._watch_events:
+                    event.set()
+                state._watch_events = []
                 self._autoreload_stop_event.set()
                 await self._autoreload_task
             try:
diff --git a/panel/io/state.py b/panel/io/state.py
index 876304bd71..71315b0e62 100644
--- a/panel/io/state.py
+++ b/panel/io/state.py
@@ -220,6 +220,9 @@ class _state(param.Parameterized):
     _oauth_user_overrides = {}
     _active_users = Counter()
 
+    # Watchers
+    _watch_events: list[asyncio.Event] = []
+
     def __repr__(self) -> str:
         server_info = []
         for server, panel, _docs in self._servers.values():
diff --git a/panel/reactive.py b/panel/reactive.py
index 2551241c4f..ac8cff77ef 100644
--- a/panel/reactive.py
+++ b/panel/reactive.py
@@ -390,6 +390,8 @@ def _cleanup(self, root: Model | None) -> None:
             model._event_callbacks = {}
         if not self._models and self._watching_stylesheets:
             self._watching_stylesheets.set()
+            if self._watching_stylesheets in state._watch_events:
+                state._watch_events.remove(self._watching_stylesheets)
             self._watching_stylesheets = False
         comm, client_comm = self._comms.pop(ref, (None, None))
         if comm:
@@ -414,7 +416,8 @@ def _setup_autoreload(self):
         paths = [sts for sts in self._stylesheets if isinstance(sts, pathlib.PurePath)]
         if (self._watching_stylesheets or not (config.autoreload and paths and import_available('watchfiles'))):
             return
-        self._watching_stylesheets = asyncio.Event()
+        self._watching_stylesheets = event = asyncio.Event()
+        state._watch_events.append(event)
         state.execute(self._watch_stylesheets)
 
     async def _watch_stylesheets(self):

From 9446e9b5968c3d649b397d236948b4f0f3cc912d Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Mon, 2 Sep 2024 21:38:17 +0200
Subject: [PATCH 033/164] Docs review (#7127)

---
 doc/developer_guide/index.md                  |   4 +-
 .../components/reactive_html_components.md    |   2 +-
 doc/how_to/custom_components/esm/callbacks.md |   2 +-
 .../custom_components/esm/custom_layout.md    | 212 ++++++++++++++-
 .../custom_components/esm/custom_widgets.md   |  11 +-
 doc/how_to/custom_components/esm/dataframe.md |   4 -
 .../custom_components/examples/esm_leaflet.md |   4 +-
 doc/how_to/custom_components/index.md         |  25 +-
 .../reactive_html/reactive_html_callbacks.md  |   2 +-
 doc/how_to/migrate/anywidget/index.md         |  28 +-
 doc/how_to/param/custom.md                    |   4 -
 doc/tutorials/basic/layouts.md                |   2 +-
 .../expert/custom_anywidget_components.md     | 245 ++++++++++++++++++
 ..._components.md => custom_js_components.md} |  37 ++-
 doc/tutorials/expert/index.md                 |   6 +-
 examples/reference/chat/ChatAreaInput.ipynb   |   4 +-
 examples/reference/chat/ChatMessage.ipynb     |   2 +-
 .../AnyWidgetComponent.ipynb                  | 234 ++++++++++++++---
 examples/reference/layouts/Accordion.ipynb    |   2 +-
 examples/reference/layouts/GridSpec.ipynb     |   4 +-
 examples/reference/layouts/Swipe.ipynb        |   2 +-
 examples/reference/panes/Param.ipynb          |   3 +-
 panel/layout/spacer.py                        |   2 +-
 23 files changed, 725 insertions(+), 116 deletions(-)
 create mode 100644 doc/tutorials/expert/custom_anywidget_components.md
 rename doc/tutorials/expert/{custom_components.md => custom_js_components.md} (91%)

diff --git a/doc/developer_guide/index.md b/doc/developer_guide/index.md
index b5890dc406..2e5dad6006 100644
--- a/doc/developer_guide/index.md
+++ b/doc/developer_guide/index.md
@@ -82,7 +82,7 @@ All available tasks can be found by running `pixi task list`, the following sect
 
 ### Editable install
 
-It can be advantageous to install the Panel in [editable mode](https://pip.pypa.io/en/stable/topics/local-project-installs/#editable-installs):
+It can be advantageous to install Panel in [editable mode](https://pip.pypa.io/en/stable/topics/local-project-installs/#editable-installs):
 
 ```bash
 pixi run install
@@ -97,6 +97,8 @@ Currently, this needs to be run for each environment. So, if you want to install
 pixi run -e test-ui install
 ```
 
+You can find the list of environments in the **pixi.toml** file.
+
 :::
 
 ## Linting
diff --git a/doc/explanation/components/reactive_html_components.md b/doc/explanation/components/reactive_html_components.md
index 4658d5511b..a74db5ef99 100644
--- a/doc/explanation/components/reactive_html_components.md
+++ b/doc/explanation/components/reactive_html_components.md
@@ -12,7 +12,7 @@ This page will walk you through using the `ReactiveHTML` class to craft custom c
 
 A *`ReactiveHTML` component* is essentially a class that you create by inheriting from the `ReactiveHTML` class. Within this custom class, you are required to define the `_template` attribute using HTML, which serves as the *design blueprint* for your custom component. You can use Javascript *template variables* `${...}` as well as Python [Jinja2](https://jinja.palletsprojects.com) syntax to make the template *dynamic*.
 
-Here is a basic `SlideShow` component
+Here is a basic `Slideshow` component
 
 ```{pyodide}
 import param
diff --git a/doc/how_to/custom_components/esm/callbacks.md b/doc/how_to/custom_components/esm/callbacks.md
index cf5247f90d..a2ffa5dac1 100644
--- a/doc/how_to/custom_components/esm/callbacks.md
+++ b/doc/how_to/custom_components/esm/callbacks.md
@@ -4,7 +4,7 @@ In this guide we will show you how to add callbacks to your ESM components.
 
 ## Slideshow with Python callback
 
-This example shows you how to create a `SlideShow` component that uses a Python *callback* function to update the `Slideshow` image when its clicked:
+This example shows you how to create a `Slideshow` component that uses a Python *callback* function to update the `Slideshow` image when its clicked:
 
 ```{pyodide}
 import param
diff --git a/doc/how_to/custom_components/esm/custom_layout.md b/doc/how_to/custom_components/esm/custom_layout.md
index d5ad7bc692..bc88360f70 100644
--- a/doc/how_to/custom_components/esm/custom_layout.md
+++ b/doc/how_to/custom_components/esm/custom_layout.md
@@ -1,8 +1,6 @@
 # Create Custom Layouts using ESM Components
 
-In this guide, we will demonstrate how to build custom, reusable layouts using [`JSComponent`](../../reference/panes/JSComponent.md) or [`ReactComponent`](../../reference/panes/ReactComponent.md).
-
-Please note that it is currently not possible to create layouts using the [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md), as the underlying [`AnyWidget`](https://anywidget.dev/) API does not support this.
+In this guide, we will demonstrate how to build custom, reusable layouts using [`JSComponent`](../../reference/panes/JSComponent.md), [`ReactComponent`](../../reference/panes/ReactComponent.md) or [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md).
 
 ## Layout Two Objects
 
@@ -89,11 +87,9 @@ split_js = SplitJS(
 )
 split_js.servable()
 ```
-
 :::
 
 :::{tab-item} `ReactComponent`
-
 ```{pyodide}
 import panel as pn
 
@@ -165,6 +161,90 @@ split_react.servable()
 ```
 :::
 
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+import panel as pn
+
+from panel.custom import Child, AnyWidgetComponent
+
+CSS = """
+.split {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+}
+
+.gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter.gutter-horizontal {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+    cursor: col-resize;
+}
+"""
+
+
+class SplitAnyWidget(AnyWidgetComponent):
+
+    left = Child()
+    right = Child()
+
+    _esm = """
+    import Split from 'https://esm.sh/split.js@1.6.5'
+
+    function render({ model, el }) {
+      const splitDiv = document.createElement('div');
+      splitDiv.className = 'split';
+
+      const split0 = document.createElement('div');
+      splitDiv.appendChild(split0);
+
+      const split1 = document.createElement('div');
+      splitDiv.appendChild(split1);
+
+      const split = Split([split0, split1])
+
+      model.on('remove', () => split.destroy())
+
+      split0.append(model.get_child("left"))
+      split1.append(model.get_child("right"))
+
+      el.appendChild(splitDiv)
+    }
+
+    export default {render}
+    """
+
+    _stylesheets = [CSS]
+
+
+pn.extension("codeeditor")
+
+split_anywidget = SplitAnyWidget(
+    left=pn.widgets.CodeEditor(
+        value="Left!",
+        sizing_mode="stretch_both",
+        margin=0,
+        theme="monokai",
+        language="python",
+    ),
+    right=pn.widgets.CodeEditor(
+        value="Right",
+        sizing_mode="stretch_both",
+        margin=0,
+        theme="monokai",
+        language="python",
+    ),
+    height=500,
+    sizing_mode="stretch_width",
+)
+split_anywidget.servable()
+```
+
 ::::
 
 Let's verify that the layout will automatically update when the `object` is changed.
@@ -172,6 +252,7 @@ Let's verify that the layout will automatically update when the `object` is chan
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
+
 ```{pyodide}
 split_js.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
 ```
@@ -183,6 +264,14 @@ split_react.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `Cod
 ```
 :::
 
+:::
+
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+split_anywidget.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
+```
+:::
+
 ::::
 
 Now, let's change it back:
@@ -213,6 +302,18 @@ split_react.right=pn.widgets.CodeEditor(
 ```
 :::
 
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+split_anywidget.right=pn.widgets.CodeEditor(
+    value="Right",
+    sizing_mode="stretch_both",
+    margin=0,
+    theme="monokai",
+    language="python",
+)
+```
+:::
+
 ::::
 
 ## Layout a List of Objects
@@ -362,20 +463,95 @@ grid_react = GridReact(
 )
 grid_react.servable()
 ```
+
+You must list `ListLike, ReactComponent` in exactly that order when you define the class! Reversing the order to `ReactComponent, ListLike` will not work.
 :::
 
-::::
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+import panel as pn
+import param
 
-:::{note}
-You must list `ListLike, ReactComponent` in exactly that order when you define the class! Reversing the order to `ReactComponent, ListLike` will not work.
+from panel.custom import AnyWidgetComponent
+
+from panel.layout.base import ListLike
+
+CSS = """
+.gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+.gutter.gutter-vertical {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+    cursor: row-resize;
+}
+"""
+
+
+class GridAnyWidget(ListLike, AnyWidgetComponent):
+
+    _esm = """
+    import Split from 'https://esm.sh/split.js@1.6.5'
+
+    function render({ model, el}) {
+      const objects = model.get_child("objects")
+
+      const splitDiv = document.createElement('div');
+      splitDiv.className = 'split';
+      splitDiv.style.height = `calc(100% - ${(objects.length - 1) * 10}px)`;
+
+      let splits = [];
+
+      objects.forEach((object, index) => {
+        const split = document.createElement('div');
+        splits.push(split)
+
+        splitDiv.appendChild(split);
+        split.appendChild(object);
+      })
+
+      Split(splits, {direction: 'vertical'})
+
+      el.appendChild(splitDiv);
+    }
+    export default {render}
+    """
+
+    _stylesheets = [CSS]
+
+
+pn.extension("codeeditor")
+
+grid_anywidget = GridAnyWidget(
+    pn.widgets.CodeEditor(
+        value="I love beatboxing\n" * 10, theme="monokai", sizing_mode="stretch_both"
+    ),
+    pn.panel(
+        "https://upload.wikimedia.org/wikipedia/commons/d/d3/Beatboxset1_pepouni.ogg",
+        sizing_mode="stretch_width",
+        height=100,
+    ),
+    pn.widgets.CodeEditor(
+        value="Yes, I do!\n" * 10, theme="monokai", sizing_mode="stretch_both"
+    ),
+    styles={"border": "2px solid lightgray"},
+    height=800,
+    width=500,
+    sizing_mode="fixed",
+).servable()
+```
+
+You must list `ListLike, AnyWidgetComponent` in exactly that order when you define the class! Reversing the order to `AnyWidgetComponent, ListLike` will not work.
 :::
 
+::::
+
 You can now use `[...]` indexing and methods like `.append`, `.insert`, `pop`, etc., as you would expect:
 
 ::::{tab-set}
 
 :::{tab-item} `JSComponent`
-
 ```{pyodide}
 grid_js.append(
     pn.widgets.CodeEditor(
@@ -399,6 +575,18 @@ grid_react.append(
 ```
 :::
 
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+grid_anywidget.append(
+    pn.widgets.CodeEditor(
+        value="Another one bites the dust\n" * 10,
+        theme="monokai",
+        sizing_mode="stretch_both",
+    )
+)
+```
+:::
+
 ::::
 
 Let's remove it again:
@@ -417,4 +605,10 @@ grid_react.pop(-1)
 ```
 :::
 
+:::{tab-item} `AnyWidgetComponent`
+```{pyodide}
+grid_anywidget.pop(-1)
+```
+:::
+
 ::::
diff --git a/doc/how_to/custom_components/esm/custom_widgets.md b/doc/how_to/custom_components/esm/custom_widgets.md
index 279b77662a..d3a91e6992 100644
--- a/doc/how_to/custom_components/esm/custom_widgets.md
+++ b/doc/how_to/custom_components/esm/custom_widgets.md
@@ -97,8 +97,8 @@ export function render({ model }) {
     const [image] = model.useState("image");
 
     return (
-    <button onClick={e => setClicks(clicks+1)} class="pn-container center-content">
-        <img src={image} class="image-size" src={ image }/>
+    <button onClick={e => setClicks(clicks+1)} className="pn-container center-content">
+        <img src={image} className="image-size" src={ image }/>
     </button>
     )
 }
@@ -129,7 +129,7 @@ export function render({ model }) {
 button = ImageButton(
     image="https://panel.holoviz.org/_static/logo_stacked.png",
     styles={"border": "2px solid lightgray"},
-    width=400, height=200
+    width=400
 )
 pn.Column(button, button.param.clicks).servable()
 ```
@@ -141,6 +141,7 @@ import panel as pn
 import param
 
 from panel.custom import AnyWidgetComponent
+from panel.widgets import WidgetBase
 
 pn.extension()
 
@@ -208,7 +209,7 @@ pn.Column(button, button.param.clicks).servable()
 
 If you don't want the *button* styling, you can change the `<button>` tag to a `<div>` tag.
 
-The `ImageButton` now works as any other widget. Lets try the `.from_param` method to create a `ImageButton` from a `param` class.
+The `ImageButton` now works as any other widget. Lets try the `.from_param` method to create an `ImageButton` from a `Parameter:
 
 ```{pyodide}
 class MyClass(param.Parameterized):
@@ -223,7 +224,7 @@ class MyClass(param.Parameterized):
             self.clicks += 1
 
 my_instance = MyClass()
-button2 = ImageButton.from_param(my_instance.param.value)
+button2 = ImageButton.from_param(my_instance.param.value, image="https://panel.holoviz.org/_static/logo_stacked.png",)
 pn.Column(button2, my_instance.param.clicks).servable()
 ```
 
diff --git a/doc/how_to/custom_components/esm/dataframe.md b/doc/how_to/custom_components/esm/dataframe.md
index a5156aca78..39559403e4 100644
--- a/doc/how_to/custom_components/esm/dataframe.md
+++ b/doc/how_to/custom_components/esm/dataframe.md
@@ -18,8 +18,6 @@ class GridJS(JSComponent):
 
     object = param.DataFrame()
 
-    _extension_name = 'gridjs'
-
     _esm = """
     import * as gridjs from "https://esm.sh/gridjs@6.2.0"
 
@@ -86,8 +84,6 @@ class GridJS(ReactComponent):
 
     object = param.DataFrame()
 
-    _extension_name = 'gridjs'
-
     _esm = """
 	import { useEffect, useState } from "react"
     import { Grid } from "https://esm.sh/gridjs-react@6.1.1"
diff --git a/doc/how_to/custom_components/examples/esm_leaflet.md b/doc/how_to/custom_components/examples/esm_leaflet.md
index e45fcd3c7f..5e0f457442 100644
--- a/doc/how_to/custom_components/examples/esm_leaflet.md
+++ b/doc/how_to/custom_components/examples/esm_leaflet.md
@@ -81,8 +81,6 @@ class LeafletHeatMap(JSComponent):
     }"""
 
     _stylesheets = ['https://unpkg.com/leaflet@1.7.1/dist/leaflet.css']
-
-pn.extension(template='bootstrap')
 ```
 
 Some of the concepts this component demonstrates:
@@ -95,6 +93,8 @@ Some of the concepts this component demonstrates:
 Now let's try this component:
 
 ```{pyodide}
+pn.extension(template='bootstrap')
+
 url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
 
 earthquakes = pd.read_csv(url)
diff --git a/doc/how_to/custom_components/index.md b/doc/how_to/custom_components/index.md
index 389e9c9dd7..c709301ad6 100644
--- a/doc/how_to/custom_components/index.md
+++ b/doc/how_to/custom_components/index.md
@@ -53,12 +53,13 @@ examples/table_viewer
 
 ## ESM Components
 
-Build custom components in Javascript using so called ESM components, which allow you to write components that automatically sync parameter state between Python and JS. ESM components can be written in pure JS, using React or using the AnyWidget specification.
+Build custom components in Javascript using so called ESM components, which allow you to write components that automatically sync parameter state between Python and JS. ESM components can be written in pure JavaScript, using [React](https://react.dev/) or using the [AnyWidget](https://anywidget.dev/) specification.
+
+ESM Components is our 2nd generation api for custom components while `ReactiveHTML` is our 1st generation. We recommend using ESM Components over `ReactiveHTML`.
 
 ::::{grid} 1 2 2 3
 :gutter: 1 1 1 2
 
-
 :::{grid-item-card} {octicon}`tools;2.5em;sd-mr-1 sd-animate-grow50` Compile and Bundle ESM Components
 :link: esm/build
 :link-type: doc
@@ -73,6 +74,13 @@ How to specify external dependencies for ESM components and compile them into JS
 How to add both JS and Python based callbacks to ESM components.
 :::
 
+:::{grid-item-card} {octicon}`image;2.5em;sd-mr-1 sd-animate-grow50` Panes
+:link: esm/custom_panes
+:link-type: doc
+
+How to create panes using ESM components
+:::
+
 :::{grid-item-card} {octicon}`pencil;2.5em;sd-mr-1 sd-animate-grow50` Create Custom Widgets
 :link: esm/custom_widgets
 :link-type: doc
@@ -84,19 +92,19 @@ How to create a custom widget using ESM components
 :link: esm/custom_layout
 :link-type: doc
 
-How to create a custom layout using ESM components
+How to create custom layouts using ESM components
 :::
 
-:::{grid-item-card} {octicon}`table;2.5em;sd-mr-1 sd-animate-grow50` Render a `DataFrame`
+:::{grid-item-card} {octicon}`table;2.5em;sd-mr-1 sd-animate-grow50` DataFrame
 :link: esm/dataframe
 :link-type: doc
 
-How to create `JSComponent`s and `ReactComponent`s that render data in a DataFrame.
+How to create ESM components that render data a DataFrame.
 :::
 
 ::::
 
-### Examples
+### ESM Examples
 
 ::::{grid} 1 2 2 3
 :gutter: 1 1 1 2
@@ -197,12 +205,13 @@ How to create input widgets using `ReactiveHTML`
 :link: reactive_html/reactive_html_dataframe
 :link-type: doc
 
-How to create components using `ReactiveHTML` and a DataFrame parameter
+How to create `ReactiveHTML` components that render data a DataFrame.
+
 :::
 
 ::::
 
-### Examples
+### `ReactiveHTML` Examples
 
 ::::{grid} 1 2 2 3
 :gutter: 1 1 1 2
diff --git a/doc/how_to/custom_components/reactive_html/reactive_html_callbacks.md b/doc/how_to/custom_components/reactive_html/reactive_html_callbacks.md
index 8a637146f9..020d157979 100644
--- a/doc/how_to/custom_components/reactive_html/reactive_html_callbacks.md
+++ b/doc/how_to/custom_components/reactive_html/reactive_html_callbacks.md
@@ -30,7 +30,7 @@ This approach lets you quickly build custom HTML components with complex interac
 
 ## Slideshow with Javascript Callback
 
-This example shows you how to create a `SlideShow` component that uses a Javascript *callback* function to update the `SlideShow` image when its clicked:
+This example shows you how to create a `Slideshow` component that uses a Javascript *callback* function to update the `Slideshow` image when its clicked:
 
 ```{pyodide}
 import param
diff --git a/doc/how_to/migrate/anywidget/index.md b/doc/how_to/migrate/anywidget/index.md
index 5f6d8b14e6..3b9655aab3 100644
--- a/doc/how_to/migrate/anywidget/index.md
+++ b/doc/how_to/migrate/anywidget/index.md
@@ -1,14 +1,14 @@
 # Converting from AnyWidget to Panel
 
-This guide addresses how to convert [AnyWidget](https://anywidget.dev/) widgets to custom Panel widgets.
+This guide addresses how to convert [AnyWidget](https://anywidget.dev/) widgets to custom `JSComponent` or `ReactComponent` widgets.
 
 Please note that AnyWidget widgets are [`ipywidgets`](https://ipywidgets.readthedocs.io/en/stable/) and can be used directly in Panel via the [`IpyWidgets`](../../reference/panes/IPyWidget.ipynb) pane and the `Traitlets` `@observe` API without a conversion. We recommend trying this option first. If it does not work for your use case, please consider contributing to the existing `AnyWidget` before converting it to a Panel widget.
 
 Some reasons you might still want to convert an `AnyWidget` to a custom Panel widget are:
 
-- Familiar and Optimized API: This enables your and your users to use the familiar `Param` parameter API for which Panel is optimized.
-- Customization: You might want to use the `AnyWidget` as a starting point and customize it to your exact needs.
-- Efficiency: You users avoid loading  `AnyWidget`/`ipywidgets` JavaScript libraries which ANECDOTALLY is not insignificant. Your users also avoid the overhead of converting between `Param/Panel/Bokeh` and `Traitlets`/`AnyWidget`/`ipywidgets` objects: ANECDOTALLY, Panel (i.e., Bokeh) utilizes faster serialization and deserialization methods and formats. IS THIS TRUE, PHILIPP? ALSO, WHEN USING THE ANYWIDGET ON THE BOKEH SERVER? DO WE HAVE NUMBERS FOR THIS?
+- **Familiar and Optimized API**: This enables you and your users to use the familiar `Param` parameter API for which Panel is optimized.
+- **Customization**: You might want to use the `AnyWidget` as a starting point and customize it to your exact needs.
+- **Efficiency**: You users avoid loading  `AnyWidget`/`ipywidgets` JavaScript libraries which ANECDOTALLY is not insignificant. Your users also avoid the overhead of converting between `Param/Panel/Bokeh` and `Traitlets`/`AnyWidget`/`ipywidgets` objects: ANECDOTALLY, Panel (i.e., Bokeh) utilizes faster serialization and deserialization methods and formats. IS THIS TRUE, PHILIPP? ALSO, WHEN USING THE ANYWIDGET ON THE BOKEH SERVER? DO WE HAVE NUMBERS FOR THIS?
 
 ## Conversion Steps
 
@@ -18,7 +18,7 @@ The high-level steps needed for converting `AnyWidgets` components to Panel comp
 
 #### Step 1: Base Class Conversion
 
-Convert from the `AnyWidget` base class to the Panel [`JSComponent`](../../reference/panes/JSComponent.md) base class. If the `_esm` script is based on [React](https://react.dev/), use the [`ReactComponent`](../../reference/panes/ReactComponent.md). For [Preact](https://preactjs.com/), use the [`PreactComponent`](../../reference/panes/JSComponent.md).
+Convert from the `AnyWidget` base class to the Panel [`JSComponent`](../../reference/panes/JSComponent.ipynb) base class. If the `_esm` script is based on [React](https://react.dev/), use the [`ReactComponent`](../../reference/panes/ReactComponent.ipynb).
 
 #### Step 2: Attribute Conversion
 
@@ -49,9 +49,9 @@ Their methods are also different reflecting differences between Traitlets and Pa
 
 | AnyWidget | Panel/ Bokeh |
 | --------- | ----- |
-| `model.get('some_value')` | `data.some_value`|
-| `model.save('some_value', 1)`<br>`model.save_changes()` | `data.some_value = 1`|
-| `model.on("change:some_value", () => {...})` | `data.on('change: some_value', () => {...}))` |
+| `model.get('some_value')` | `model.some_value`|
+| `model.save('some_value', 1)`<br>`model.save_changes()` | `model.some_value = 1`|
+| `model.on("change:some_value", () => {...})` | `model.on('change: some_value', () => {...}))` |
 
 ### Convert React Code
 
@@ -99,7 +99,7 @@ class CounterWidget(anywidget.AnyWidget):
     """
 ```
 
-#### Panel `CounterWidget`
+#### Panel JS `CounterWidget`
 
 ```{pyodide}
 import panel as pn
@@ -121,7 +121,7 @@ class CounterButton(JSComponent):
       btn.addEventListener("click", () => {
           model.value += 1
       });
-      data.on('change:value', () => {
+      model.on('change:value', () => {
         btn.innerHTML = `count is ${model.value}`;
       })
       return btn
@@ -134,16 +134,10 @@ CounterButton().servable()
 
 :::{note}
 
-With Panel you may replace the lines `export function render({ data })` and `return btn` with the lines `export function render({ data, el })` and `el.appendChild(btn)`, if you want to minimize the number of changes.
+With Panel you may replace the lines `export function render({ model })` and `return btn` with the lines `export function render({ model, el })` and `el.appendChild(btn)`, if you want to minimize the number of changes.
 
 :::
 
-### React Counter Widget
-
-#### AnyWidget React `CounterWidget`
-
-To be determined (TBD).
-
 #### Panel React `CounterWidget`
 
 ```{pyodide}
diff --git a/doc/how_to/param/custom.md b/doc/how_to/param/custom.md
index 34bd872ef6..ebad91206b 100644
--- a/doc/how_to/param/custom.md
+++ b/doc/how_to/param/custom.md
@@ -49,7 +49,6 @@ pn.Param(CustomExample.param, widgets={
 
 However it is also possible to explicitly construct a widget from a parameter using the `.from_param` method, which makes it easy to override widget settings using keyword arguments:
 
-
 ```{pyodide}
 pn.widgets.RadioBoxGroup.from_param(CustomExample.param.select_string, inline=True)
 ```
@@ -58,7 +57,6 @@ pn.widgets.RadioBoxGroup.from_param(CustomExample.param.select_string, inline=Tr
 
 By default, a param Pane has a title that is derived from the class name of its `Parameterized` object. Using the ``name`` keyword we can set any title to the pane, e.g. to improve the user interface.
 
-
 ```{pyodide}
 pn.Param(CustomExample.param, name="Custom Name")
 ```
@@ -67,14 +65,12 @@ pn.Param(CustomExample.param, name="Custom Name")
 
 You can sort the widgets alphabetically by setting `sort=True`
 
-
 ```{pyodide}
 pn.Param(CustomExample.param, sort=True, name="Sort by Label Example")
 ```
 
 You can also specify a custom sort function that takes the (parameter name, Parameter instance) as input.
 
-
 ```{pyodide}
 def sort_func(x):
     return len(x[1].label)
diff --git a/doc/tutorials/basic/layouts.md b/doc/tutorials/basic/layouts.md
index 6a911a235b..f9e65c508c 100644
--- a/doc/tutorials/basic/layouts.md
+++ b/doc/tutorials/basic/layouts.md
@@ -1,4 +1,4 @@
-# Layouts Content
+# Layout Content
 
 Welcome to our guide on layouting Python objects, including Panel components! Let's dive into arranging your content in a visually appealing and organized manner.
 
diff --git a/doc/tutorials/expert/custom_anywidget_components.md b/doc/tutorials/expert/custom_anywidget_components.md
new file mode 100644
index 0000000000..6479944163
--- /dev/null
+++ b/doc/tutorials/expert/custom_anywidget_components.md
@@ -0,0 +1,245 @@
+# Creating a `MarioButton` with `JSComponent`
+
+In this tutorial we will build a *[Mario](https://mario.nintendo.com/) style button* with sounds and animations using the [`AnyWidgetComponent`](../../reference/custom/AnyWidgetComponent.md) feature in Panel. It aims to help you learn how to push the boundaries of what can be achieved with HoloViz Panel by creating advanced components using modern JavaScript and CSS technologies.
+
+![Mario chime button](https://assets.holoviz.org/panel/tutorials/ipymario.gif)
+
+This tutorial draws heavily on the great [`ipymario` video and tutorial](https://youtu.be/oZhyilx3gqI?si=dFPFiHua4TuuqCpu) by [Trevor Manz](https://github.com/manzt).
+
+## Overview
+
+We'll build a `MarioButton` that displays a pixelated Mario icon and plays a chime sound when clicked. The button will also have customizable parameters for gain, duration, size, and animation, showcasing the powerful capabilities of `AnyWidgetComponent`.
+
+### Prerequisites
+
+Ensure you have HoloViz Panel installed:
+
+```sh
+pip install panel watchfiles
+```
+
+## Step 1: Define the `MarioButton` Component
+
+We'll start by defining the Python class for the `MarioButton` component, including its parameters and rendering logic.
+
+Create a file named `mario_button.py`:
+
+```python
+import numpy as np
+import param
+from panel.custom import AnyWidgetComponent
+import panel as pn
+
+colors = {
+    "O": [0, 0, 0, 255],
+    "X": [247, 82, 0, 255],
+    " ": [247, 186, 119, 255],
+}
+
+# fmt: off
+box = [
+    ['O', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', 'O', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', 'X', 'X', 'X', 'X', 'X', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', 'X', 'X', 'O', 'O', 'O', 'X', 'X', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', 'X', 'X', 'O', ' ', ' ', 'X', 'X', 'O', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', 'X', 'X', 'O', ' ', ' ', 'X', 'X', 'O', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', 'O', 'O', ' ', 'X', 'X', 'X', 'O', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', 'O', 'O', 'O', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', 'O', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O', 'O', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', ' ', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', 'O', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['X', ' ', 'O', ' ', ' ', ' ', ' ', ' ', 'O', 'O', ' ', ' ', ' ', 'O', ' ', 'O'],
+    ['X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'O'],
+    ['O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O', 'O'],
+]
+# fmt: on
+
+np_box = np.array([[colors[c] for c in row] for row in box], dtype=np.uint8)
+np_box_as_list = [[[int(z) for z in y] for y in x] for x in np_box.tolist()]
+
+class MarioButton(AnyWidgetComponent):
+
+    _esm = "mario_button.js"
+    _stylesheets = ["mario_button.css"]
+
+    _box = param.List(np_box_as_list)
+    gain = param.Number(0.1, bounds=(0.1, 1.0), step=0.1)
+    duration = param.Number(1.0, bounds=(0.5, 2), step=0.5,)
+    size = param.Integer(100, bounds=(10, 1000), step=10)
+    animate = param.Boolean(True)
+
+    margin = param.Integer(10)
+
+if pn.state.served:
+    button = MarioButton()
+    parameters = pn.Param(
+        button, parameters=["gain", "duration", "size", "animate"]
+    )
+    settings=pn.Column(parameters, "Credits: Trevor Manz")
+    pn.FlexBox(settings, button).servable()
+```
+
+### Explanation - Python
+
+- **`_esm`**: Specifies the path to the JavaScript file for the component.
+- **`_stylesheets`**: Specifies the path to the CSS file for styling the component.
+- **`_box`**: A parameter representing the pixel data for the Mario icon.
+- **`gain`, `duration`, `size`, `animate`**: Parameters for customizing the button's behavior.
+- **`pn.Param`**: Creates a Panel widget to control the parameters.
+
+## Step 2: Define the JavaScript for the `MarioButton`
+
+Create a file named `mario_button.js`:
+
+```javascript
+/**
+ * Plays a Mario chime sound with the specified gain and duration.
+ * @see {@link https://twitter.com/mbostock/status/1765222176641437859}
+ */
+function chime({ gain, duration }) {
+  let c = new AudioContext();
+  let g = c.createGain();
+  let o = c.createOscillator();
+  let of = o.frequency;
+  g.connect(c.destination);
+  g.gain.value = gain;
+  g.gain.linearRampToValueAtTime(0, duration);
+  o.connect(g);
+  o.type = "square";
+  of.setValueAtTime(988, 0);
+  of.setValueAtTime(1319, 0.08);
+  o.start();
+  o.stop(duration);
+}
+
+function createCanvas(model) {
+  let size = () => `${model.get('size')}px`;
+  let canvas = document.createElement("canvas");
+  canvas.width = 16;
+  canvas.height = 16;
+  canvas.style.width = size();
+  canvas.style.height = size();
+  return canvas;
+}
+
+function drawImageData(canvas, pixelData) {
+  const flattenedData = pixelData.flat(2);
+  const imageDataArray = new Uint8ClampedArray(flattenedData);
+  const imgData = new ImageData(imageDataArray, 16, 16);
+
+  let ctx = canvas.getContext("2d");
+  ctx.imageSmoothingEnabled = false;
+  ctx.putImageData(imgData, 0, 0);
+}
+
+function addClickListener(canvas, model) {
+  canvas.addEventListener("click", () => {
+    chime({
+      gain: model.get('gain'),
+      duration: model.get('duration'),
+    });
+    if (model.get('animate')) {
+      canvas.style.animation = "none";
+      setTimeout(() => {
+        canvas.style.animation = "ipymario-bounce 0.2s";
+      }, 10);
+    }
+  });
+}
+
+function addResizeWatcher(canvas, model) {
+  model.on('change:size', () => {
+    let size = () => `${model.get('size')}px`;
+    canvas.style.width = size();
+    canvas.style.height = size();
+  });
+}
+
+function render({ model, el }) {
+  let canvas = createCanvas(model);
+  drawImageData(canvas, model.get('_box'));
+  addClickListener(canvas, model);
+  addResizeWatcher(canvas, model);
+
+  el.classList.add("ipymario");
+  el.appendChild(canvas)
+}
+export default {render};
+```
+
+### Explanation - JavaScript
+
+- **`chime`**: A function that generates the Mario chime sound using the Web Audio API.
+- **`render`**: The main function that renders the button, sets up the canvas, handles click events, and manages parameter changes.
+
+## Step 3: Define the CSS for the `MarioButton`
+
+Create a file named `mario_button.css`:
+
+```css
+.ipymario > canvas {
+    animation-fill-mode: both;
+    image-rendering: pixelated; /* Ensures the image stays pixelated */
+    image-rendering: crisp-edges; /* For additional support in some browsers */
+}
+
+@keyframes ipymario-bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-12px); }
+}
+```
+
+### Explanation - CSS
+
+- **`.ipymario > canvas`**: Styles the canvas to ensure the Mario icon remains pixelated.
+- **`@keyframes ipymario-bounce`**: Defines the bounce animation for the button when clicked.
+
+## Step 4: Serve the Application
+
+To serve the application, run the following command in your terminal:
+
+```sh
+panel serve mario_button.py --autoreload
+```
+
+This command will start a Panel server and automatically reload changes as you edit the files.
+
+The result should look like this:
+
+<video muted controls loop poster="https://assets.holoviz.org/panel/tutorials/mario_button.png" style="max-height: 400px; max-width: 100%;">
+    <source src="https://assets.holoviz.org/panel/tutorials/mario_button.mp4" type="video/mp4">
+    Your browser does not support the video tag.
+</video>
+
+You'll have to turn on the sound to hear the chime.
+
+## Step 4: Develop the Application with Autoreload
+
+When you save your `.py`, `.js` or `.css` file, the Panel server will automatically reload the changes. This feature is called *auto reload* or *hot reload*.
+
+Try changing `"ipymario-bounce 0.2s"` in the `mario_button.js` file to `"ipymario-bounce 2s"` and save the file. The Panel server will automatically reload the changes.
+
+Try clicking the button to see the button bounce more slowly.
+
+## Conclusion
+
+You've now created a custom `MarioButton` component using  [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md) in HoloViz Panel. This button features a pixelated Mario icon, plays a chime sound when clicked, and has customizable parameters for gain, duration, size, and animation.
+
+## References
+
+### Tutorials
+
+- [Build Custom Components](../../how_to/custom_components/esm/custom_layout.md)
+
+### How-To Guides
+
+- [Convert `AnyWidget` widgets](../../how_to/migrate/anywidget/index.md)
+
+### Reference Guides
+
+- [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md)
+- [`JSComponent`](../../reference/panes/JSComponent.md)
+- [`ReactComponent`](../../reference/panes/ReactComponent.md)
diff --git a/doc/tutorials/expert/custom_components.md b/doc/tutorials/expert/custom_js_components.md
similarity index 91%
rename from doc/tutorials/expert/custom_components.md
rename to doc/tutorials/expert/custom_js_components.md
index f057c041b1..ce27132160 100644
--- a/doc/tutorials/expert/custom_components.md
+++ b/doc/tutorials/expert/custom_js_components.md
@@ -4,7 +4,7 @@ In this tutorial we will build a *[Mario](https://mario.nintendo.com/) style but
 
 ![Mario chime button](https://assets.holoviz.org/panel/tutorials/ipymario.gif)
 
-This tutorial draws heavily on the great [`ipymario` tutorial](https://youtu.be/oZhyilx3gqI?si=dFPFiHua4TuuqCpu) by [Trevor Manzt](https://github.com/manzt).
+This tutorial draws heavily on the great [`ipymario` tutorial](https://youtu.be/oZhyilx3gqI?si=dFPFiHua4TuuqCpu) by [Trevor Manz](https://github.com/manzt).
 
 ## Overview
 
@@ -78,7 +78,7 @@ if pn.state.served:
     parameters = pn.Param(
         button, parameters=["gain", "duration", "size", "animate"]
     )
-    settings=pn.Column(parameters, "Credits: Trevor Mantz")
+    settings=pn.Column(parameters, "Credits: Trevor Manz")
     pn.FlexBox(settings, button).servable()
 ```
 
@@ -115,8 +115,8 @@ function chime({ gain, duration }) {
   o.stop(duration);
 }
 
-function createCanvas(data) {
-  let size = () => `${data.size}px`;
+function createCanvas(model) {
+  let size = () => `${model.size}px`;
   let canvas = document.createElement("canvas");
   canvas.width = 16;
   canvas.height = 16;
@@ -135,13 +135,13 @@ function drawImageData(canvas, pixelData) {
   ctx.putImageData(imgData, 0, 0);
 }
 
-function addClickListener(canvas, data) {
+function addClickListener(canvas, model) {
   canvas.addEventListener("click", () => {
     chime({
-      gain: data.gain,
-      duration: data.duration,
+      gain: model.gain,
+      duration: model.duration,
     });
-    if (data.animate) {
+    if (model.animate) {
       canvas.style.animation = "none";
       setTimeout(() => {
         canvas.style.animation = "ipymario-bounce 0.2s";
@@ -150,20 +150,19 @@ function addClickListener(canvas, data) {
   });
 }
 
-function addResizeWatcher(canvas, data) {
-  data.on('size', () => {
-    let size = () => `${data.size}px`;
+function addResizeWatcher(canvas, model) {
+  model.on('size', () => {
+    let size = () => `${model.size}px`;
     canvas.style.width = size();
     canvas.style.height = size();
-    console.log("resized");
   });
 }
 
-export function render({ data, el }) {
-  let canvas = createCanvas(data);
-  drawImageData(canvas, data._box);
-  addClickListener(canvas, data);
-  addResizeWatcher(canvas, data);
+export function render({ model, el }) {
+  let canvas = createCanvas(model);
+  drawImageData(canvas, model._box);
+  addClickListener(canvas, model);
+  addResizeWatcher(canvas, model);
 
   el.classList.add("ipymario");
   return canvas;
@@ -232,7 +231,7 @@ You've now created a custom `MarioButton` component using  [`JSComponent`](../..
 
 ### Tutorials
 
-- [Build Custom Components](../../how_to/custom_components/reactive_esm/reactive_esm_layout.md)
+- [Build Custom Components](../../how_to/custom_components/esm/custom_layout.md)
 
 ### How-To Guides
 
@@ -240,6 +239,6 @@ You've now created a custom `MarioButton` component using  [`JSComponent`](../..
 
 ### Reference Guides
 
+- [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md)
 - [`JSComponent`](../../reference/panes/JSComponent.md)
 - [`ReactComponent`](../../reference/panes/ReactComponent.md)
-- [`PreactComponent`](../../reference/panes/PreactComponent.md)
diff --git a/doc/tutorials/expert/index.md b/doc/tutorials/expert/index.md
index baa1680585..165c62513d 100644
--- a/doc/tutorials/expert/index.md
+++ b/doc/tutorials/expert/index.md
@@ -8,7 +8,8 @@ We will assume you have an *intermediate skill level* corresponding to the what
 
 ## Extend Panel
 
-- **[Develop Custom Components](./custom_components.md)**: Use `JSComponent` to build advanced components utilizing  modern JavaScript and CSS technologies.
+- **[Develop Custom AnyWidgetComponents](./custom_anywidget_components.md)**: Use `AnyWidgetComponent` to build advanced components utilizing modern JavaScript and CSS technologies.
+- **[Develop Custom JSComponents](./custom_js_components.md)**: Use `JSComponent` to build advanced components utilizing modern JavaScript and CSS technologies.
 - **Develop Custom Bokeh models**:
 - **Customizing Panel for your brand**:
 
@@ -17,5 +18,6 @@ We will assume you have an *intermediate skill level* corresponding to the what
 :hidden:
 :maxdepth: 2
 
-custom_components
+custom_anywidget_components
+custom_js_components
 ```
diff --git a/examples/reference/chat/ChatAreaInput.ipynb b/examples/reference/chat/ChatAreaInput.ipynb
index 5ea2880622..ca80644a21 100644
--- a/examples/reference/chat/ChatAreaInput.ipynb
+++ b/examples/reference/chat/ChatAreaInput.ipynb
@@ -32,12 +32,12 @@
     "\n",
     "#### Parameters:\n",
     "\n",
-    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "For layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
     "\n",
     "##### Core\n",
     "\n",
     "* **``disabled_enter``** (bool): If True, disables sending the message by pressing the `enter_sends` key.\n",
-    "* **``enter_sends``** (bool): If True, pressing the Enter key sends the message, if False it is sent by pressing the Ctrl-Enter. Defaults to True.",
+    "* **``enter_sends``** (bool): If True, pressing the Enter key sends the message, if False it is sent by pressing the Ctrl-Enter. Defaults to True.\n",
     "* **``value``** (str): The value when the \"Enter\" or \"Ctrl-Enter\" key is pressed. Only to be used with `watch` or `bind` because the `value` resets to `\"\"` after the message is sent; use `value_input` instead to access what's currently available in the text input box.\n",
     "* **``value_input``** (str): The current value updated on every key press.\n",
     "\n",
diff --git a/examples/reference/chat/ChatMessage.ipynb b/examples/reference/chat/ChatMessage.ipynb
index 2bfeb78814..9315925a0e 100644
--- a/examples/reference/chat/ChatMessage.ipynb
+++ b/examples/reference/chat/ChatMessage.ipynb
@@ -36,7 +36,7 @@
     "\n",
     "#### Parameters:\n",
     "\n",
-    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "For layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
     "\n",
     "##### Core\n",
     "\n",
diff --git a/examples/reference/custom_components/AnyWidgetComponent.ipynb b/examples/reference/custom_components/AnyWidgetComponent.ipynb
index 3e410dda70..835a16569d 100644
--- a/examples/reference/custom_components/AnyWidgetComponent.ipynb
+++ b/examples/reference/custom_components/AnyWidgetComponent.ipynb
@@ -17,7 +17,9 @@
    "id": "9908a714-692d-4513-aca8-b251a627cae4",
    "metadata": {},
    "source": [
-    "Panel's `AnyWidgetComponent` class simplifies the creation of custom Panel components using the [`AnyWidget`](https://anywidget.dev/) JavaScript API."
+    "Panel's `AnyWidgetComponent` class simplifies the creation of custom Panel components using the [`AnyWidget`](https://anywidget.dev/) JavaScript API.\n",
+    "\n",
+    "This allows the Panel and Jupyter communities to collaborate and share JavaScript code for widgets."
    ]
   },
   {
@@ -27,16 +29,13 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "import panel as pn\n",
     "import param\n",
-    "\n",
+    "import panel as pn\n",
     "from panel.custom import AnyWidgetComponent\n",
     "\n",
+    "pn.extension()\n",
     "\n",
-    "class CounterButton(AnyWidgetComponent):\n",
-    "\n",
-    "    value = param.Integer()\n",
-    "\n",
+    "class CounterWidget(AnyWidgetComponent):\n",
     "    _esm = \"\"\"\n",
     "    function render({ model, el }) {\n",
     "      let count = () => model.get(\"value\");\n",
@@ -53,8 +52,9 @@
     "    }\n",
     "    export default { render };\n",
     "    \"\"\"\n",
+    "    value = param.Integer()\n",
     "\n",
-    "CounterButton().servable()"
+    "CounterWidget().servable()"
    ]
   },
   {
@@ -75,7 +75,7 @@
     "\n",
     "- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `default` object or function that returns an object. The object should contain a `render` function and optionally an `initialize` function. In a development environment such as a notebook or when using `--autoreload`, the module will automatically reload upon saving changes.\n",
     "- **`_importmap`** (dict | None): This optional dictionary defines an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap), allowing you to customize how module specifiers are resolved.\n",
-    "- **`_stylesheets`** (optional list of strings): This optional attribute accepts a list of CSS strings or paths to CSS files. It supports automatic reloading in development environments.\n",
+    "- **`_stylesheets`** (list[str] | list[PurePath]): This optional attribute accepts a list of CSS strings or paths to CSS files. It supports automatic reloading in development environments. It works similarly to the `AnyWidget` `_css` attribute.\n",
     "\n",
     ":::note\n",
     "You may specify a path to a file as a string instead of a PurePath. The path should be specified relative to the file it is referenced in.\n",
@@ -85,10 +85,10 @@
     "\n",
     "The `_esm` `default` object must contain a `render` function. It accepts the following parameters:\n",
     "\n",
-    "- **`model`**: Represents the parameters of the component and provides methods to `.get` values, `.set` values, and `.save_changes`.\n",
-    "- **`el`**: The parent HTML element to append HTML elements to.\n",
+    "- **`model`**: Represents the parameters of the component and provides methods to `.get` values, `.set` values, and `.save_changes`. In addition to the AnyWidgets methods, Panel uniquely provides the `get_child` method to enable rendering of child models.\n",
+    "- **`el`**: The parent HTML element to which HTML elements are appended.\n",
     "\n",
-    "For more detail, see [`AnyWidget`](https://anywidget.dev/).\n",
+    "For more details, see [`AnyWidget`](https://anywidget.dev/).\n",
     "\n",
     "## Usage\n",
     "\n",
@@ -104,16 +104,14 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "import panel as pn\n",
     "import param\n",
+    "import panel as pn\n",
     "\n",
     "from panel.custom import AnyWidgetComponent\n",
     "\n",
+    "pn.extension()\n",
     "\n",
-    "class StyledCounterButton(AnyWidgetComponent):\n",
-    "\n",
-    "    value = param.Integer()\n",
-    "\n",
+    "class CounterWidget(AnyWidgetComponent):\n",
     "    _esm = \"\"\"\n",
     "    function render({ model, el }) {\n",
     "      let count = () => model.get(\"value\");\n",
@@ -130,23 +128,15 @@
     "    }\n",
     "    export default { render };\n",
     "    \"\"\"\n",
-    "\n",
     "    _stylesheets = [\n",
     "        \"\"\"\n",
-    "        button {\n",
-    "            background: #0072B5;\n",
-    "            color: white;\n",
-    "            border: none;\n",
-    "            padding: 10px;\n",
-    "            border-radius: 4px;\n",
-    "        }\n",
-    "        button:hover {\n",
-    "            background: #4099da;\n",
-    "        }\n",
+    "        button { color: white; font-size: 1.75rem; background-color: #ea580c; padding: 0.5rem 1rem; border: none; border-radius: 0.25rem; }\n",
+    "        button:hover { background-color: #9a3412; }\n",
     "        \"\"\"\n",
     "    ]\n",
+    "    value = param.Integer()\n",
     "\n",
-    "StyledCounterButton().servable()"
+    "CounterWidget().servable()"
    ]
   },
   {
@@ -154,6 +144,15 @@
    "id": "7619dad4-4dfe-43a1-aac1-32c57ddffc58",
    "metadata": {},
    "source": [
+    ":::{note}\n",
+    "\n",
+    "The `AnyWidget` will automatically add the CSS class `counter-widget` to the `el`.\n",
+    "\n",
+    "The `AnyWidgetComponent` does not add this class, but you can do it yourself via `el.classList.add(\"counter-widget\");`.\n",
+    "\n",
+    ":::\n",
+    "\n",
+    "\n",
     "### Dependency Imports\n",
     "\n",
     "JavaScript dependencies can be directly imported via URLs, such as those from [`esm.sh`](https://esm.sh/)."
@@ -306,9 +305,182 @@
     "\n",
     "You can now edit the JavaScript or CSS file, and the changes will be automatically reloaded.\n",
     "\n",
-    "- Try changing the `innerHTML` from `count is ${value()}` to `COUNT IS ${value()}` and observe the update. Note you must update `innerHTML` in two places.\n",
-    "- Try changing the background color from `#0072B5` to `#008080`.\n",
+    "- Try changing the `innerHTML` from `count is ${value()}` to `COUNT IS ${value()}` and observe the update. Note that you must update `innerHTML` in two places.\n",
+    "- Try changing the background color from `#0072B5` to `#008080`."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "6f5b0f26-b5ec-455b-91fb-4032f34086ee",
+   "metadata": {},
+   "source": [
+    "## Displaying A Single Child\n",
+    "\n",
+    "You can display Python objects by defining a `Child` parameter. Please note that this feature is **currently not supported by `AnyWidget`**.\n",
     "\n",
+    "Lets start with the simplest example:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "db65cc94-6e23-460a-8796-e10b55c88300",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "from panel.custom import AnyWidgetComponent, Child\n",
+    "\n",
+    "pn.extension()\n",
+    "\n",
+    "\n",
+    "class Example(AnyWidgetComponent):\n",
+    "\n",
+    "    child = Child()\n",
+    "\n",
+    "    _esm = \"\"\"\n",
+    "    function render({ model, el }) {\n",
+    "      const button = document.createElement(\"button\");\n",
+    "      button.append(model.get_child(\"child\"))\n",
+    "      el.appendChild(button);\n",
+    "    }\n",
+    "\n",
+    "    export default { render };\n",
+    "    \"\"\"\n",
+    "\n",
+    "\n",
+    "Example(child=pn.panel(\"A **Markdown** pane!\")).servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "401345bd-5a53-4461-96c9-959b2ea41904",
+   "metadata": {},
+   "source": [
+    "If you provide a non-`Viewable` child it will automatically be converted to a `Viewable` by `pn.panel`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "49c4c66f-9b4f-4461-ac3c-4f9ad2dbd1a7",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Example(child=\"A **Markdown** pane!\").servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "5ef1c471-2ed8-48ef-a478-3873f7d613fd",
+   "metadata": {},
+   "source": [
+    "If you want to allow a certain type of Panel components only you can specify the specific type in the `class_` argument."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "2e7c1209-2b86-433a-8dd2-ca351ac02979",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "from panel.custom import AnyWidgetComponent, Child\n",
+    "\n",
+    "\n",
+    "class Example(AnyWidgetComponent):\n",
+    "\n",
+    "    child = Child(class_=pn.pane.Markdown)\n",
+    "\n",
+    "    _esm = \"\"\"\n",
+    "    function render({ model, el }) {\n",
+    "      const button = document.createElement(\"button\");\n",
+    "      button.append(model.get_child(\"child\"))\n",
+    "      el.appendChild(button);\n",
+    "    }\n",
+    "\n",
+    "    export default { render };\n",
+    "    \"\"\"\n",
+    "\n",
+    "\n",
+    "Example(child=pn.panel(\"A **Markdown** pane!\")).servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "2e7da88d-aaa6-41ba-8a33-a0f93e0eb302",
+   "metadata": {},
+   "source": [
+    "The `class_` argument also supports a tuple of types:\n",
+    "\n",
+    "```python\n",
+    "    child = Child(class_=(pn.pane.Markdown, pn.pane.HTML))\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "53ce78f8-b4f5-4ff6-afe0-563efa0d3fc7",
+   "metadata": {},
+   "source": [
+    "## Displaying a List of Children\n",
+    "\n",
+    "You can also display a `List` of `Viewable` objects using the `Children` parameter type:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "634d84e4-e372-4cff-b40e-7e16df179765",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "from panel.custom import AnyWidgetComponent, Children\n",
+    "\n",
+    "pn.extension()\n",
+    "\n",
+    "\n",
+    "class Example(AnyWidgetComponent):\n",
+    "\n",
+    "    objects = Children()\n",
+    "\n",
+    "    _esm = \"\"\"\n",
+    "    function render({ model, el }) {\n",
+    "      const div = document.createElement('div')\n",
+    "      div.append(...model.get_child(\"objects\"))\n",
+    "      el.appendChild(div);\n",
+    "    }\n",
+    "\n",
+    "    export default { render };\n",
+    "    \"\"\"\n",
+    "\n",
+    "\n",
+    "Example(\n",
+    "    objects=[pn.panel(\"A **Markdown** pane!\"), pn.widgets.Button(name=\"Click me!\"), {\"text\": \"I'm shown as a JSON Pane\"}]\n",
+    ").servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "748776ca-925d-44dd-b503-3823252165c9",
+   "metadata": {},
+   "source": [
+    ":::note\n",
+    "You can change the `item_type` to a specific subtype of `Viewable` or a tuple of\n",
+    "`Viewable` subtypes.\n",
+    ":::"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "91a8cb50-c38d-4d8a-b992-7bf013926a73",
+   "metadata": {},
+   "source": [
     "### React\n",
     "\n",
     "You can use React with `AnyWidget` as shown below."
diff --git a/examples/reference/layouts/Accordion.ipynb b/examples/reference/layouts/Accordion.ipynb
index d69f44ef68..a96455f654 100644
--- a/examples/reference/layouts/Accordion.ipynb
+++ b/examples/reference/layouts/Accordion.ipynb
@@ -28,7 +28,7 @@
     "* **``header_color``** (str): The color of the header text.\n",
     "* **``header_background``** (str): The background color of the header.\n",
     "\n",
-    "For further layout and styling-related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "For further layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
     "\n",
     "___"
    ]
diff --git a/examples/reference/layouts/GridSpec.ipynb b/examples/reference/layouts/GridSpec.ipynb
index 273d56b5a8..443d5a801e 100644
--- a/examples/reference/layouts/GridSpec.ipynb
+++ b/examples/reference/layouts/GridSpec.ipynb
@@ -22,13 +22,13 @@
     "\n",
     "#### Parameters:\n",
     "\n",
-    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
-    "\n",
     "* **``ncols``** (int): Limits the number of columns that can be assigned.\n",
     "* **``nrows``** (int): Limits the number of rows that can be assigned.\n",
     "* **``mode``** (str): Whether to 'warn', 'error', or simply 'override' on overlapping assignment\n",
     "* **``objects``** (list): The list of objects to display in the GridSpec. Should not generally be modified directly except when replaced in its entirety.\n",
     "\n",
+    "For layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
+    "\n",
     "___"
    ]
   },
diff --git a/examples/reference/layouts/Swipe.ipynb b/examples/reference/layouts/Swipe.ipynb
index e7b372f4e4..99e9d36af5 100644
--- a/examples/reference/layouts/Swipe.ipynb
+++ b/examples/reference/layouts/Swipe.ipynb
@@ -30,7 +30,7 @@
     "* **``slider_width``** (int): The width of the slider in pixels. Default is 12.\n",
     "* **``slider_color``** (str): The color of the slider. Default is 'black'.\n",
     "\n",
-    "For further layout and styling-related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "For further layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
     "\n",
     "---"
    ]
diff --git a/examples/reference/panes/Param.ipynb b/examples/reference/panes/Param.ipynb
index a3f865bde4..fbf2729d2a 100644
--- a/examples/reference/panes/Param.ipynb
+++ b/examples/reference/panes/Param.ipynb
@@ -39,9 +39,8 @@
     "* **`show_labels`** (bool): Whether or not to show labels\n",
     "* **`show_name`** (bool): Whether or not to show the name of the Parameterized Class \n",
     "\n",
-    "For more layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "For further layout and styling-related parameters see the [Control the size](../../tutorials/basic/size.md), [Align Content](../../tutorials/basic/align.md) and [Style](../../tutorials/basic/style.md) tutorials.\n",
     "\n",
-    "For an alternative example of using `panel.Param` see the [parameters user guide](../../user_guide/Param.ipynb).\n",
     "___"
    ]
   },
diff --git a/panel/layout/spacer.py b/panel/layout/spacer.py
index 92f86ce708..4be5c40ade 100644
--- a/panel/layout/spacer.py
+++ b/panel/layout/spacer.py
@@ -49,7 +49,7 @@ class VSpacer(Spacer):
     Using this component we can space objects equidistantly in a layout and
     allow the empty space to shrink when the browser is resized.
 
-    Reference: https://panel.holoviz.org/user_guide/Customization.html#spacers
+    Reference: https://panel.holoviz.org/how_to/layout/spacing.html#spacer-components
 
     :Example:
 

From 340ced36b526295e772de1ca9b72ee2414dea59c Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 2 Sep 2024 22:46:27 +0200
Subject: [PATCH 034/164] Add FastAPI based serve functions (#7205)

Adds functions for adding Panel apps to a FastAPI based server.
---
 doc/how_to/integrations/FastAPI.md         | 307 +++++++-------------
 doc/how_to/integrations/FastAPI_Tornado.md | 274 +++++++++++++++++
 doc/how_to/integrations/index.md           |  29 +-
 panel/io/application.py                    | 133 ++++++++-
 panel/io/fastapi.py                        | 323 +++++++++++++++++++++
 panel/io/server.py                         | 174 ++---------
 panel/io/threads.py                        |  62 ++++
 panel/tests/conftest.py                    |   7 +-
 panel/tests/test_server.py                 | 121 ++++----
 panel/tests/util.py                        |  26 +-
 pixi.toml                                  |   4 +
 11 files changed, 1036 insertions(+), 424 deletions(-)
 create mode 100644 doc/how_to/integrations/FastAPI_Tornado.md
 create mode 100644 panel/io/fastapi.py
 create mode 100644 panel/io/threads.py

diff --git a/doc/how_to/integrations/FastAPI.md b/doc/how_to/integrations/FastAPI.md
index d8b68ce24a..ff97a96d68 100644
--- a/doc/how_to/integrations/FastAPI.md
+++ b/doc/how_to/integrations/FastAPI.md
@@ -1,272 +1,161 @@
-# Integrating Panel with FastAPI
+# Running Panel apps in FastAPI
 
-Panel generally runs on the Bokeh server which itself runs on Tornado. However, it is also often useful to embed a Panel app in large web application, such as a FastAPI web server. [FastAPI](https://fastapi.tiangolo.com/) is especially useful compared to others like Flask and Django because of it's lightning fast, lightweight framework. Using Panel with FastAPI requires a bit more work than for notebooks and Bokeh servers.
+Panel generally runs on the Bokeh server, which itself runs on [Tornado](https://tornadoweb.org/en/stable/). However, it is also often useful to embed a Panel app in an existing web application, such as a [FastAPI](https://fastapi.tiangolo.com/) web server.
 
-Following FastAPI's [Tutorial - User Guide](https://fastapi.tiangolo.com/tutorial/) make sure you first have FastAPI installed using: `conda install -c conda-forge fastapi`. Also make sure Panel is installed `conda install -c conda-forge panel`.
+Since Panel 1.5.0 it is possible to run Panel application(s) natively on a FastAPI and uvicorn based server. Therefore this how-to guide will explain how to add Panel application(s) directly to an existing FastAPI application. This functionality is new and experimental so we also provide a [how-to guide to embed a Tornado based Panel server application inside a FastAPI application](./FastAPI_Tornado).
 
-## Configuration
+By the end of this guide, you'll be able to run a FastAPI application that serves a simple interactive Panel app. The Panel app will consist of a slider widget that dynamically updates a string of stars (⭐) based on the slider's value.
 
-Before we start adding a bokeh app to our FastAPI server we have to set up some of the basic plumbing. In the `examples/apps/fastApi` folder we will add some basic configurations.
+## Setup
 
-You'll need to create a file called `examples/apps/fastApi/main.py`.
+Following FastAPI's [Tutorial - User Guide](https://fastapi.tiangolo.com/tutorial/) make sure you first have FastAPI installed using:
 
-In `main.py` you'll need to import the following( which should all be already available from the above conda installs):
+::::{tab-set}
 
-```python
-import panel as pn
-from bokeh.embed import server_document
-from fastapi import FastAPI, Request
-from fastapi.templating import Jinja2Templates
+:::{tab-item} `conda`
+```bash
+conda install fastapi
 ```
+:::
 
+:::{tab-item} `pip`
+```pip
+conda install fastapi
+```
+:::
 
-Each of these will be explained as we add them in.
-
-Next we are going to need to create an instance of FastAPI below your imports in `main.py` and set up the path to your templates like so:
+## Create a FastAPI application
 
+Start by creating a FastAPI application. In this application, we will define a root endpoint that returns a simple JSON response. Open your text editor or IDE and create a file named main.py:
 
 ```python
-app = FastAPI()
-templates = Jinja2Templates(directory="examples/apps/fastApi/templates")
-```
+from fastapi import FastAPI
 
-We will now need to create our first route via an async function and point it to the path of our server:
+# Initialize FastAPI application
+app = FastAPI()
 
-```python
 @app.get("/")
-async def bkapp_page(request: Request):
-    script = server_document('http://127.0.0.1:5000/app')
-    return templates.TemplateResponse("base.html", {"request": request, "script": script})
-```
-
-As you can see in this code we will also need to create an html  [Jinja2](https://fastapi.tiangolo.com/advanced/templates/#using-jinja2templates) template. Create a new directory named `examples/apps/fastApi/templates` and create the file `examples/apps/fastApi/templates/base.html` in that directory.
-
-Now add the following to `base.html`. This is a minimal version but feel free to add whatever else you need to it.
-
-```html
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Panel in FastAPI: sliders</title>
-    </head>
-    <body>
-        {{ script|safe }}
-    </body>
-</html>
+async def read_root():
+    return {"Hello": "World"}
 ```
 
-Return back to your `examples/apps/fastApi/main.py` file. We will use pn.serve() to start the bokeh server (Which Panel is built on). Configure it to whatever port and address you want, for our example we will use port 5000 and address 127.0.0.1. show=False will make it so the bokeh server is spun up but not shown yet. The allow_websocket_origin will list of hosts that can connect to the websocket, for us this is FastAPI so we will use (127.0.0.1:8000). The `createApp` function call in this example is how we call our panel app. This is not set up yet but will be in the next section.
-
-```python
-pn.serve({'/app': createApp},
-        port=5000, allow_websocket_origin=["127.0.0.1:8000"],
-        address="127.0.0.1", show=False)
-```
-
-You could optionally add BOKEH_ALLOW_WS_ORIGIN=127.0.0.1:8000 as an environment variable instead of setting it here. In conda it is done like this.
-
-`conda env config vars set BOKEH_ALLOW_WS_ORIGIN=127.0.0.1:8000`
-
-## Sliders app
-
-Based on a standard FastAPI app template, this app shows how to integrate Panel and FastAPI.
-
-The sliders app is in `examples/apps/fastApi/sliders`. We will cover the following additions/modifications to the Django2 app template:
-
-  * `sliders/sinewave.py`: a parameterized object (representing your pre-existing code)
-
-  * `sliders/pn_app.py`: creates an app function from the SineWave class
-
-  To start with, in `sliders/sinewave.py` we create a parameterized object to serve as a placeholder for your own, existing code:
-
-```python
-import numpy as np
-import param
-from bokeh.models import ColumnDataSource
-from bokeh.plotting import figure
-
-
-class SineWave(param.Parameterized):
-    offset = param.Number(default=0.0, bounds=(-5.0, 5.0))
-    amplitude = param.Number(default=1.0, bounds=(-5.0, 5.0))
-    phase = param.Number(default=0.0, bounds=(0.0, 2 * np.pi))
-    frequency = param.Number(default=1.0, bounds=(0.1, 5.1))
-    N = param.Integer(default=200, bounds=(0, None))
-    x_range = param.Range(default=(0, 4 * np.pi), bounds=(0, 4 * np.pi))
-    y_range = param.Range(default=(-2.5, 2.5), bounds=(-10, 10))
-
-    def __init__(self, **params):
-        super(SineWave, self).__init__(**params)
-        x, y = self.sine()
-        self.cds = ColumnDataSource(data=dict(x=x, y=y))
-        self.plot = figure(plot_height=400, plot_width=400,
-                           tools="crosshair, pan, reset, save, wheel_zoom",
-                           x_range=self.x_range, y_range=self.y_range)
-        self.plot.line('x', 'y', source=self.cds, line_width=3, line_alpha=0.6)
-
-    @param.depends('N', 'frequency', 'amplitude', 'offset', 'phase', 'x_range', 'y_range', watch=True)
-    def update_plot(self):
-        x, y = self.sine()
-        self.cds.data = dict(x=x, y=y)
-        self.plot.x_range.start, self.plot.x_range.end = self.x_range
-        self.plot.y_range.start, self.plot.y_range.end = self.y_range
-
-    def sine(self):
-        x = np.linspace(0, 4 * np.pi, self.N)
-        y = self.amplitude * np.sin(self.frequency * x + self.phase) + self.offset
-        return x, y
-```
+## Create a Panel Application
 
-However the app itself is defined we need to configure an entry point, which is a function that adds the application to it. In case of the slider app it looks like this in `sliders/pn_app.py`:
+Next we will define a simple Panel application that allows you to control the number of displayed stars with an integer slider and decorate it with the `add_panel_app` decorator:
 
 ```python
 import panel as pn
 
-from .sinewave import SineWave
+from panel.io.fastapi import add_panel_app
 
-def createApp():
-    sw = SineWave()
-    return pn.Row(sw.param, sw.plot).servable()
+@add_panel_app('/panel', app=app, title='My Panel App')
+def create_panel_app():
+    slider = pn.widgets.IntSlider(name='Slider', start=0, end=10, value=3)
+    return slider.rx() * '⭐'
 ```
 
-We now need to return to our `main.py` and import the createApp function. Add the following import near the other imports:
-
-```python
-from sliders.pn_app import createApp
-```
+That's it! This decorator will map a specific URL path to the Panel app, allowing it to be served as part of the FastAPI application.
 
-Your file structure should now be like the following:
-
-```
-fastApi
-│   main.py
-│
-└───sliders
-│   │   sinewave.py
-│   │   pn_app.py
-│
-└───templates
-    │   base.html
-```
-
-And your finished `main.py` should look like this:
+The complete file should now look something like this:
 
 ```python
 import panel as pn
-from bokeh.embed import server_document
-from fastapi import FastAPI, Request
-from fastapi.templating import Jinja2Templates
 
-from sliders.pn_app import createApp
+from fastapi import FastAPI
+from panel.io.fastapi import add_application
 
 app = FastAPI()
-templates = Jinja2Templates(directory="templates")
 
 @app.get("/")
-async def bkapp_page(request: Request):
-    script = server_document('http://127.0.0.1:5000/app')
-    return templates.TemplateResponse("base.html", {"request": request, "script": script})
-
+async def read_root():
+    return {"Hello": "World"}
 
-pn.serve({'/app': createApp},
-        port=5000, allow_websocket_origin=["127.0.0.1:8000"],
-         address="127.0.0.1", show=False)
+@add_application('/panel', app=app, title='My Panel App')
+def create_panel_app():
+    slider = pn.widgets.IntSlider(name='Slider', start=0, end=10, value=3)
+    return slider.rx() * '⭐'
 ```
 
-```
-uvicorn main:app --reload
+Now run it with:
+
+```bash
+fastapi dev main.py
 ```
 
-The output should give you a link to go to to view your app:
+You should see the following output:
 
 ```
-Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
-```
+INFO     Using path main.py
+INFO     Resolved absolute path /home/user/code/awesomeapp/main.py
+INFO     Searching for package file structure from directories with __init__.py files
+INFO     Importing from /home/user/code/awesomeapp/fast_api
 
-Go to that address and your app should be there running!
+ ╭─ Python module file ─╮
+ │                      │
+ │  🐍 main.py          │
+ │                      │
+ ╰──────────────────────╯
 
-## Multiple apps
+INFO     Importing module main
+/panel
+INFO     Found importable FastAPI app
 
+ ╭─ Importable FastAPI app ─╮
+ │                          │
+ │  from main import app    │
+ │                          │
+ ╰──────────────────────────╯
 
-This is the most basic configuration for a bokeh server. It is of course possible to add multiple apps in the same way and then registering them with FastAPI in the way described in the [configuration](#configuration) section above. To see a multi-app FastAPI server have a look at ``examples/apps/fastApi_multi_apps`` and launch it with `uvicorn main:app --reload` as before.
+INFO     Using import string main:app
 
-To run multiple apps you will need to do the following:
-1. Create a new directory in your and a new file with your panel app (ex. `sinewave.py`).
-2. Create another pn_app file in your new directory (ex. `pn_app.py`) That might look something like this:
-```
-import panel as pn
-
-from .sinewave import SineWave
+ ╭────────── FastAPI CLI - Development mode ───────────╮
+ │                                                     │
+ │  Serving at: http://127.0.0.1:8000                  │
+ │                                                     │
+ │  API docs: http://127.0.0.1:8000/docs               │
+ │                                                     │
+ │  Running in development mode, for production use:   │
+ │                                                     │
+ │  fastapi run                                        │
+ │                                                     │
+ ╰─────────────────────────────────────────────────────╯
 
-def createApp2():
-    sw = SineWave()
-    return pn.Row(sw.param, sw.plot).servable()
+INFO:     Will watch for changes in these directories: ['/home/user/code/awesomeapp/']
+INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
+INFO:     Started reloader process [39089] using WatchFiles
+INFO:     Started server process [39128]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
 ```
 
-With this as your new file structure:
+If you visit `http://127.0.0.1:8000` you will see the Panel application.
 
-```
-fastApi
-│   main.py
-│
-└───sliders
-│   │   sinewave.py
-│   │   pn_app.py
-│   │
-└───sliders2
-│   │   sinewave.py
-│   │   pn_app.py
-│
-└───templates
-    │   base.html
-```
+## Adding multiple applications
 
-3. Create a new html template (ex. app2.html) with the same contents as base.html in `examples/apps/fastApi/templates`
-4. Import your new app in main.py `from sliders2.pn_app import createApp2`
-5. Add your new app to the dictionary in pn.serve()
+The `add_application` decorator is useful when server an application defined in a function, if you want to serve multiple applications, whether they are existing Panel objects, functions, or paths to Panel application scripts you can use the `add_applications` function instead, e.g.:
 
 ```python
-{'/app': createApp, '/app2': createApp2}
-```
+import panel as pn
 
-7. Add a new async function to rout your new app (The bottom of `main.py` should look something like this now):
+from fastapi import FastAPI
+from panel.io.fastapi import add_application
+
+app = FastAPI()
 
-```python
 @app.get("/")
-async def bkapp_page(request: Request):
-    script = server_document('http://127.0.0.1:5000/app')
-    return templates.TemplateResponse("base.html", {"request": request, "script": script})
-
-@app.get("/app2")
-async def bkapp_page2(request: Request):
-    script = server_document('http://127.0.0.1:5000/app2')
-    return templates.TemplateResponse("app2.html", {"request": request, "script": script})
-
-pn.serve({'/app': createApp, '/app2': createApp2},
-        port=5000, allow_websocket_origin=["127.0.0.1:8000"],
-         address="127.0.0.1", show=False)
-```
+async def read_root():
+    return {"Hello": "World"}
 
-With this as your file structure
+def create_panel_app():
+    slider = pn.widgets.IntSlider(name='Slider', start=0, end=10, value=3)
+    return slider.rx() * '⭐'
 
+add_applications({
+    "/panel_app1": create_panel_app,
+    "/panel_app2": pn.Column('I am a Panel object!'),
+    "/panel_app3": "my_panel_app.py"
+}, app=app)
 ```
-fastApi
-│   main.py
-│
-└───sliders
-│   │   sinewave.py
-│   │   pn_app.py
-│   │
-└───sliders2
-│   │   sinewave.py
-│   │   pn_app.py
-│
-└───templates
-    │   base.html
-    │   app2.html
-```
-
-Sliders 2 will be available at `http://127.0.0.1:8000/app2`
 
 ## Conclusion
 
diff --git a/doc/how_to/integrations/FastAPI_Tornado.md b/doc/how_to/integrations/FastAPI_Tornado.md
new file mode 100644
index 0000000000..a1c58bf907
--- /dev/null
+++ b/doc/how_to/integrations/FastAPI_Tornado.md
@@ -0,0 +1,274 @@
+# Embedding a Panel Server in FastAPI
+
+Panel generally runs on the Bokeh server which itself runs on Tornado. However, it is also often useful to embed a Panel app in large web application, such as a FastAPI web server. [FastAPI](https://fastapi.tiangolo.com/) is especially useful compared to others like Flask and Django because of it's lightning fast, lightweight framework.
+
+Following FastAPI's [Tutorial - User Guide](https://fastapi.tiangolo.com/tutorial/) make sure you first have FastAPI installed using: `conda install -c conda-forge fastapi`. Also make sure Panel is installed `conda install -c conda-forge panel`.
+
+
+## Configuration
+
+Before we start adding a bokeh app to our FastAPI server we have to set up some of the basic plumbing. In the `examples/apps/fastApi` folder we will add some basic configurations.
+
+You'll need to create a file called `examples/apps/fastApi/main.py`.
+
+In `main.py` you'll need to import the following( which should all be already available from the above conda installs):
+
+```python
+import panel as pn
+from bokeh.embed import server_document
+from fastapi import FastAPI, Request
+from fastapi.templating import Jinja2Templates
+```
+
+
+Each of these will be explained as we add them in.
+
+Next we are going to need to create an instance of FastAPI below your imports in `main.py` and set up the path to your templates like so:
+
+
+```python
+app = FastAPI()
+templates = Jinja2Templates(directory="examples/apps/fastApi/templates")
+```
+
+We will now need to create our first route via an async function and point it to the path of our server:
+
+```python
+@app.get("/")
+async def bkapp_page(request: Request):
+    script = server_document('http://127.0.0.1:5000/app')
+    return templates.TemplateResponse("base.html", {"request": request, "script": script})
+```
+
+As you can see in this code we will also need to create an html  [Jinja2](https://fastapi.tiangolo.com/advanced/templates/#using-jinja2templates) template. Create a new directory named `examples/apps/fastApi/templates` and create the file `examples/apps/fastApi/templates/base.html` in that directory.
+
+Now add the following to `base.html`. This is a minimal version but feel free to add whatever else you need to it.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Panel in FastAPI: sliders</title>
+    </head>
+    <body>
+        {{ script|safe }}
+    </body>
+</html>
+```
+
+Return back to your `examples/apps/fastApi/main.py` file. We will use pn.serve() to start the bokeh server (Which Panel is built on). Configure it to whatever port and address you want, for our example we will use port 5000 and address 127.0.0.1. show=False will make it so the bokeh server is spun up but not shown yet. The allow_websocket_origin will list of hosts that can connect to the websocket, for us this is FastAPI so we will use (127.0.0.1:8000). The `createApp` function call in this example is how we call our panel app. This is not set up yet but will be in the next section.
+
+```python
+pn.serve({'/app': createApp},
+        port=5000, allow_websocket_origin=["127.0.0.1:8000"],
+        address="127.0.0.1", show=False)
+```
+
+You could optionally add BOKEH_ALLOW_WS_ORIGIN=127.0.0.1:8000 as an environment variable instead of setting it here. In conda it is done like this.
+
+`conda env config vars set BOKEH_ALLOW_WS_ORIGIN=127.0.0.1:8000`
+
+## Sliders app
+
+Based on a standard FastAPI app template, this app shows how to integrate Panel and FastAPI.
+
+The sliders app is in `examples/apps/fastApi/sliders`. We will cover the following additions/modifications to the Django2 app template:
+
+  * `sliders/sinewave.py`: a parameterized object (representing your pre-existing code)
+
+  * `sliders/pn_app.py`: creates an app function from the SineWave class
+
+  To start with, in `sliders/sinewave.py` we create a parameterized object to serve as a placeholder for your own, existing code:
+
+```python
+import numpy as np
+import param
+from bokeh.models import ColumnDataSource
+from bokeh.plotting import figure
+
+
+class SineWave(param.Parameterized):
+    offset = param.Number(default=0.0, bounds=(-5.0, 5.0))
+    amplitude = param.Number(default=1.0, bounds=(-5.0, 5.0))
+    phase = param.Number(default=0.0, bounds=(0.0, 2 * np.pi))
+    frequency = param.Number(default=1.0, bounds=(0.1, 5.1))
+    N = param.Integer(default=200, bounds=(0, None))
+    x_range = param.Range(default=(0, 4 * np.pi), bounds=(0, 4 * np.pi))
+    y_range = param.Range(default=(-2.5, 2.5), bounds=(-10, 10))
+
+    def __init__(self, **params):
+        super(SineWave, self).__init__(**params)
+        x, y = self.sine()
+        self.cds = ColumnDataSource(data=dict(x=x, y=y))
+        self.plot = figure(plot_height=400, plot_width=400,
+                           tools="crosshair, pan, reset, save, wheel_zoom",
+                           x_range=self.x_range, y_range=self.y_range)
+        self.plot.line('x', 'y', source=self.cds, line_width=3, line_alpha=0.6)
+
+    @param.depends('N', 'frequency', 'amplitude', 'offset', 'phase', 'x_range', 'y_range', watch=True)
+    def update_plot(self):
+        x, y = self.sine()
+        self.cds.data = dict(x=x, y=y)
+        self.plot.x_range.start, self.plot.x_range.end = self.x_range
+        self.plot.y_range.start, self.plot.y_range.end = self.y_range
+
+    def sine(self):
+        x = np.linspace(0, 4 * np.pi, self.N)
+        y = self.amplitude * np.sin(self.frequency * x + self.phase) + self.offset
+        return x, y
+```
+
+However the app itself is defined we need to configure an entry point, which is a function that adds the application to it. In case of the slider app it looks like this in `sliders/pn_app.py`:
+
+```python
+import panel as pn
+
+from .sinewave import SineWave
+
+def createApp():
+    sw = SineWave()
+    return pn.Row(sw.param, sw.plot).servable()
+```
+
+We now need to return to our `main.py` and import the createApp function. Add the following import near the other imports:
+
+```python
+from sliders.pn_app import createApp
+```
+
+Your file structure should now be like the following:
+
+```
+fastApi
+│   main.py
+│
+└───sliders
+│   │   sinewave.py
+│   │   pn_app.py
+│
+└───templates
+    │   base.html
+```
+
+And your finished `main.py` should look like this:
+
+```python
+import panel as pn
+from bokeh.embed import server_document
+from fastapi import FastAPI, Request
+from fastapi.templating import Jinja2Templates
+
+from sliders.pn_app import createApp
+
+app = FastAPI()
+templates = Jinja2Templates(directory="templates")
+
+@app.get("/")
+async def bkapp_page(request: Request):
+    script = server_document('http://127.0.0.1:5000/app')
+    return templates.TemplateResponse("base.html", {"request": request, "script": script})
+
+
+pn.serve({'/app': createApp},
+        port=5000, allow_websocket_origin=["127.0.0.1:8000"],
+         address="127.0.0.1", show=False)
+```
+
+```
+uvicorn main:app --reload
+```
+
+The output should give you a link to go to to view your app:
+
+```
+Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
+```
+
+Go to that address and your app should be there running!
+
+## Multiple apps
+
+
+This is the most basic configuration for a bokeh server. It is of course possible to add multiple apps in the same way and then registering them with FastAPI in the way described in the [configuration](#configuration) section above. To see a multi-app FastAPI server have a look at ``examples/apps/fastApi_multi_apps`` and launch it with `uvicorn main:app --reload` as before.
+
+To run multiple apps you will need to do the following:
+1. Create a new directory in your and a new file with your panel app (ex. `sinewave.py`).
+2. Create another pn_app file in your new directory (ex. `pn_app.py`) That might look something like this:
+```
+import panel as pn
+
+from .sinewave import SineWave
+
+def createApp2():
+    sw = SineWave()
+    return pn.Row(sw.param, sw.plot).servable()
+```
+
+With this as your new file structure:
+
+```
+fastApi
+│   main.py
+│
+└───sliders
+│   │   sinewave.py
+│   │   pn_app.py
+│   │
+└───sliders2
+│   │   sinewave.py
+│   │   pn_app.py
+│
+└───templates
+    │   base.html
+```
+
+3. Create a new html template (ex. app2.html) with the same contents as base.html in `examples/apps/fastApi/templates`
+4. Import your new app in main.py `from sliders2.pn_app import createApp2`
+5. Add your new app to the dictionary in pn.serve()
+
+```python
+{'/app': createApp, '/app2': createApp2}
+```
+
+7. Add a new async function to rout your new app (The bottom of `main.py` should look something like this now):
+
+```python
+@app.get("/")
+async def bkapp_page(request: Request):
+    script = server_document('http://127.0.0.1:5000/app')
+    return templates.TemplateResponse("base.html", {"request": request, "script": script})
+
+@app.get("/app2")
+async def bkapp_page2(request: Request):
+    script = server_document('http://127.0.0.1:5000/app2')
+    return templates.TemplateResponse("app2.html", {"request": request, "script": script})
+
+pn.serve({'/app': createApp, '/app2': createApp2},
+        port=5000, allow_websocket_origin=["127.0.0.1:8000"],
+         address="127.0.0.1", show=False)
+```
+
+With this as your file structure
+
+```
+fastApi
+│   main.py
+│
+└───sliders
+│   │   sinewave.py
+│   │   pn_app.py
+│   │
+└───sliders2
+│   │   sinewave.py
+│   │   pn_app.py
+│
+└───templates
+    │   base.html
+    │   app2.html
+```
+
+Sliders 2 will be available at `http://127.0.0.1:8000/app2`
+
+## Conclusion
+
+That's it! You now have embedded panel in FastAPI! You can now build off of this to create your own web app tailored to your needs.
diff --git a/doc/how_to/integrations/index.md b/doc/how_to/integrations/index.md
index cfc75c4b7a..7ceb719da6 100644
--- a/doc/how_to/integrations/index.md
+++ b/doc/how_to/integrations/index.md
@@ -5,20 +5,20 @@ These guides will cover how to integrate Panel applications with various externa
 ::::{grid} 1 3 3 3
 :gutter: 1 1 1 2
 
-:::{grid-item-card} Flask
-:link: flask
+:::{grid-item-card} FastAPI
+:link: FastAPI
 :link-type: doc
 
-Discover to run Panel applications alongside an existing Flask server.
+Discover to run Panel applications natively on a FastAPI server.
 
-![Flask Logo](../../_static/logos/flask.png)
+![FastAPI Logo](../../_static/logos/fastapi.png)
 :::
 
-:::{grid-item-card} FastAPI
-:link: FastAPI
+:::{grid-item-card} FastAPI (Embedded)
+:link: FastAPI_Tornado
 :link-type: doc
 
-Discover to run Panel applications alongside an existing FastAPI server.
+Discover to embed a Panel Tornado server application in a FastAPI server.
 
 ![FastAPI Logo](../../_static/logos/fastapi.png)
 :::
@@ -27,11 +27,21 @@ Discover to run Panel applications alongside an existing FastAPI server.
 :link: Django
 :link-type: doc
 
-Discover to run Panel applications on a Django server (replacing the standard Tornado based server).
+Discover to run Panel applications natively on a Django server.
 
 ![Django Logo](../../_static/logos/django.png)
 :::
 
+:::{grid-item-card} Flask
+:link: flask
+:link-type: doc
+
+Discover to run Panel applications alongside an existing Flask server.
+
+![Flask Logo](../../_static/logos/flask.png)
+:::
+
+
 ::::
 
 ```{toctree}
@@ -39,7 +49,8 @@ Discover to run Panel applications on a Django server (replacing the standard To
 :hidden:
 :maxdepth: 2
 
-flask
 FastAPI
+FastAPI_Tornado
+flask
 Django
 ```
diff --git a/panel/io/application.py b/panel/io/application.py
index ae3062c98c..a2034a9272 100644
--- a/panel/io/application.py
+++ b/panel/io/application.py
@@ -8,7 +8,10 @@
 import os
 
 from functools import partial
-from typing import TYPE_CHECKING, Any
+from types import FunctionType, MethodType
+from typing import (
+    TYPE_CHECKING, Any, Callable, Mapping,
+)
 
 import bokeh.command.util
 
@@ -17,19 +20,63 @@
 from bokeh.application.handlers.document_lifecycle import (
     DocumentLifecycleHandler,
 )
+from bokeh.application.handlers.function import FunctionHandler
+from bokeh.models import CustomJS
 
 from ..config import config
 from .document import _destroy_document
 from .handlers import MarkdownHandler, NotebookHandler, ScriptHandler
+from .loading import LOADING_INDICATOR_CSS_CLASS
 from .logging import LOG_SESSION_DESTROYED, LOG_SESSION_LAUNCHING
 from .state import set_curdoc, state
 
 if TYPE_CHECKING:
     from bokeh.application.application import SessionContext
     from bokeh.application.handlers.handler import Handler
+    from bokeh.document.document import Document
+
+    from ..template.base import BaseTemplate
+    from ..viewable import Viewable, Viewer
+    from .location import Location
+
+    TViewable = Viewable | Viewer | BaseTemplate
+    TViewableFuncOrPath = TViewable | Callable[[], TViewable] | os.PathLike | str
+
+
+logger = logging.getLogger('panel.io.application')
+
 
-log = logging.getLogger('panel.io.application')
+def _eval_panel(
+    panel: TViewableFuncOrPath, server_id: str, title: str,
+    location: bool | Location, admin: bool, doc: Document
+):
+    from ..pane import panel as as_panel
+    from ..template import BaseTemplate
 
+    if config.global_loading_spinner:
+        doc.js_on_event(
+            'document_ready', CustomJS(code=f"""
+            const body = document.getElementsByTagName('body')[0]
+            body.classList.remove({LOADING_INDICATOR_CSS_CLASS!r}, {config.loading_spinner!r})
+            """)
+        )
+
+    doc.on_event('document_ready', partial(state._schedule_on_load, doc))
+
+    # Set up instrumentation for logging sessions
+    logger.info(LOG_SESSION_LAUNCHING, id(doc))
+    def _log_session_destroyed(session_context):
+        logger.info(LOG_SESSION_DESTROYED, id(doc))
+    doc.on_session_destroyed(_log_session_destroyed)
+
+    with set_curdoc(doc):
+        if isinstance(panel, (FunctionType, MethodType)):
+            panel = panel()
+        if isinstance(panel, BaseTemplate):
+            doc = panel._modify_doc(server_id, title, doc, location)
+        else:
+            doc = as_panel(panel)._modify_doc(server_id, title, doc, location)
+        return doc
 
 def _on_session_destroyed(session_context: SessionContext) -> None:
     """
@@ -41,8 +88,10 @@ def _on_session_destroyed(session_context: SessionContext) -> None:
         try:
             callback(session_context)
         except Exception as e:
-            log.warning("DocumentLifecycleHandler on_session_destroyed "
-                        f"callback {callback} failed with following error: {e}")
+            logger.warning(
+                "DocumentLifecycleHandler on_session_destroyed "
+                f"callback {callback} failed with following error: {e}"
+            )
 
 
 class Application(BkApplication):
@@ -73,14 +122,14 @@ def add(self, handler: Handler) -> None:
         super().add(handler)
 
     def initialize_document(self, doc):
-        log.info(LOG_SESSION_LAUNCHING, id(doc))
+        logger.info(LOG_SESSION_LAUNCHING, id(doc))
         super().initialize_document(doc)
         if doc in state._templates and doc not in state._templates[doc]._documents:
             template = state._templates[doc]
             with set_curdoc(doc):
                 template.server_doc(title=template.title, location=True, doc=doc)
         def _log_session_destroyed(session_context):
-            log.info(LOG_SESSION_DESTROYED, id(doc))
+            logger.info(LOG_SESSION_DESTROYED, id(doc))
         doc.destroy = partial(_destroy_document, doc) # type: ignore
         doc.on_event('document_ready', partial(state._schedule_on_load, doc))
         doc.on_session_destroyed(_log_session_destroyed)
@@ -144,3 +193,75 @@ def build_single_handler_application(path, argv=None):
     return application
 
 bokeh.command.util.build_single_handler_application = build_single_handler_application
+
+
+def build_applications(
+    panel: TViewableFuncOrPath | Mapping[str, TViewableFuncOrPath],
+    title: str | dict[str, str] | None = None,
+    location: bool | Location = True,
+    admin: bool = False,
+    server_id: str | None = None,
+    custom_handlers: list | None = None
+) -> dict[str, Application]:
+    """
+    Converts a variety of objects into a dictionary of Applications.
+
+    Arguments
+    ---------
+    panel: Viewable, function or {str: Viewable}
+        A Panel object, a function returning a Panel object or a
+        dictionary mapping from the URL slug to either.
+    title : str or {str: str} (optional, default=None)
+        An HTML title for the application or a dictionary mapping
+        from the URL slug to a customized title.
+    location : boolean or panel.io.location.Location
+        Whether to create a Location component to observe and
+        set the URL location.
+    admin: boolean (default=False)
+        Whether to enable the admin panel
+    server_id: str
+        ID of the server running the application(s)
+    """
+    if not isinstance(panel, dict):
+        panel = {'/': panel}
+
+    apps = {}
+    for slug, app in panel.items():
+        if slug.endswith('/') and slug != '/':
+            raise ValueError(f"Invalid URL: trailing slash '/' used for {slug!r} not supported.")
+        if isinstance(title, dict):
+            try:
+                title_ = title[slug]
+            except KeyError:
+                raise KeyError(
+                    "Keys of the title dictionary and of the apps "
+                    f"dictionary must match. No {slug} key found in the "
+                    "title dictionary.") from None
+        else:
+            title_ = title
+        slug = slug if slug.startswith('/') else '/'+slug
+
+        # Handle other types of apps using a custom handler
+        for handler in (custom_handlers or ()):
+            new_app = handler(slug, app)
+            if app is not None:
+                break
+        else:
+            new_app = app
+        if new_app is not None:
+            app = new_app
+            if app is True:
+                continue
+
+        if isinstance(app, os.PathLike):
+            app = str(app) # enables serving apps from Paths
+        if (isinstance(app, str) and app.endswith(('.py', '.ipynb', '.md'))
+            and os.path.isfile(app)):
+            apps[slug] = app = build_single_handler_application(app)
+            app._admin = admin
+        elif isinstance(app, BkApplication):
+            apps[slug] = app
+        else:
+            handler = FunctionHandler(partial(_eval_panel, app, server_id, title_, location, admin))
+            apps[slug] = Application(handler, admin=admin)
+    return apps
diff --git a/panel/io/fastapi.py b/panel/io/fastapi.py
new file mode 100644
index 0000000000..957d29005d
--- /dev/null
+++ b/panel/io/fastapi.py
@@ -0,0 +1,323 @@
+from __future__ import annotations
+
+import asyncio
+import uuid
+
+from functools import wraps
+from typing import TYPE_CHECKING, Mapping, cast
+
+from .application import build_applications
+from .document import _cleanup_doc, extra_socket_handlers
+from .resources import COMPONENT_PATH
+from .server import ComponentResourceHandler
+from .state import state
+from .threads import StoppableThread
+
+try:
+    from bokeh_fastapi import BokehFastAPI
+    from bokeh_fastapi.handler import WSHandler
+    from fastapi import (
+        FastAPI, HTTPException, Query, Request,
+    )
+    from fastapi.responses import FileResponse
+except ImportError:
+    msg = "bokeh_fastapi must be installed to use the panel.io.fastapi module."
+    raise ImportError(msg) from None
+
+if TYPE_CHECKING:
+    from uvicorn import Server
+
+    from .application import TViewableFuncOrPath
+    from .location import Location
+
+#---------------------------------------------------------------------
+# Private API
+#---------------------------------------------------------------------
+
+def dispatch_fastapi(conn, events=None, msg=None):
+    if msg is None:
+        msg = conn.protocol.create("PATCH-DOC", events)
+    return [conn._socket.send_message(msg)]
+
+extra_socket_handlers[WSHandler] = dispatch_fastapi
+
+
+def add_liveness_handler(app, endpoint, applications):
+    @app.get(endpoint, response_model=dict[str, bool])
+    async def liveness_handler(request: Request, endpoint: str | None = Query(None)):
+        if endpoint is not None:
+            if endpoint not in applications:
+                raise HTTPException(status_code=400, detail=f"Endpoint {endpoint!r} does not exist.")
+            app_instance = applications[endpoint]
+            try:
+                doc = app_instance.create_document()
+                _cleanup_doc(doc)
+                return {endpoint: True}
+            except Exception as e:
+                raise HTTPException(
+                    status_code=500,
+                    detail=f"Endpoint {endpoint!r} could not be served. Application raised error: {e}"
+                ) from e
+        else:
+            return {str(request.url.path): True}
+
+#---------------------------------------------------------------------
+# Public API
+#---------------------------------------------------------------------
+
+def add_applications(
+    panel: TViewableFuncOrPath | Mapping[str, TViewableFuncOrPath],
+    app: FastAPI | None = None,
+    title: str | dict[str, str] | None = None,
+    location: bool | Location = True,
+    admin: bool = False,
+    liveness: bool | str = False,
+    **kwargs
+):
+    """
+    Adds application(s) to an existing FastAPI application.
+
+    Arguments
+    ---------
+    app: FastAPI
+        FastAPI app to add Panel application(s) to.
+    panel: Viewable, function or {str: Viewable}
+        A Panel object, a function returning a Panel object or a
+        dictionary mapping from the URL slug to either.
+    title : str or {str: str} (optional, default=None)
+        An HTML title for the application or a dictionary mapping
+        from the URL slug to a customized title.
+    location : boolean or panel.io.location.Location
+        Whether to create a Location component to observe and
+        set the URL location.
+    admin: boolean (default=False)
+        Whether to enable the admin panel
+    liveness: bool | str (optional, default=False)
+      Whether to add a liveness endpoint. If a string is provided
+      then this will be used as the endpoint, otherwise the endpoint
+      will be hosted at /liveness.
+    **kwargs:
+        Additional keyword arguments to pass to the BokehFastAPI application
+    """
+    apps = build_applications(panel, title=title, location=location, admin=admin)
+    application = BokehFastAPI(apps, app=app, **kwargs)
+    if liveness:
+        liveness_endpoint = liveness if isinstance(liveness, str) else '/liveness'
+        add_liveness_handler(application.app, endpoint=liveness_endpoint, applications=apps)
+
+    @application.app.get(
+        f"/{COMPONENT_PATH.rstrip('/')}" + "/{path:path}", include_in_schema=False
+    )
+    def get_component_resource(path: str):
+        # ComponentResourceHandler.parse_url_path only ever accesses
+        # self._resource_attrs, which fortunately is a class attribute. Thus, we can
+        # get away with using the method without actually instantiating the class
+        self_ = cast(ComponentResourceHandler, ComponentResourceHandler)
+        resolved_path = ComponentResourceHandler.parse_url_path(self_, path)
+        return FileResponse(resolved_path)
+
+    return application
+
+
+def add_application(
+    path: str,
+    app: FastAPI,
+    title: str = "Panel App",
+    location: bool | Location = True,
+    admin: bool = False,
+    **kwargs
+):
+    """
+    Decorator that adds a Panel app to a FastAPI application.
+
+    Arguments
+    ---------
+    path: str
+        The path to serve the application on.
+    app: FastAPI
+        FastAPI app to add Panel application(s) to.
+    title : str
+        An HTML title for the application.
+    location : boolean or panel.io.location.Location
+        Whether to create a Location component to observe and
+        set the URL location.
+    admin: boolean (default=False)
+        Whether to enable the admin panel
+    **kwargs:
+        Additional keyword arguments to pass to the BokehFastAPI application
+    """
+    def decorator(func):
+        @wraps(func)
+        def wrapper(*args, **kwargs):
+            return func(*args, **kwargs)
+
+        # Register the Panel application after the function is defined
+        add_applications(
+            {path: func},
+            app=app,
+            title=title
+        )
+        return wrapper
+
+    return decorator
+
+
+def get_server(
+    panel: TViewableFuncOrPath | Mapping[str, TViewableFuncOrPath],
+    port: int | None = 0,
+    start: bool = False,
+    title: str | dict[str, str] | None = None,
+    location: bool | Location = True,
+    admin: bool = False,
+    **kwargs
+):
+    """
+    Creates a FastAPI server running the provided Panel application(s).
+
+    Arguments
+    ---------
+    panel: Viewable, function or {str: Viewable}
+        A Panel object, a function returning a Panel object or a
+        dictionary mapping from the URL slug to either.
+    port: int (optional, default=0)
+      Allows specifying a specific port.
+    start : boolean(optional, default=False)
+      Whether to start the Server.
+    title : str or {str: str} (optional, default=None)
+        An HTML title for the application or a dictionary mapping
+        from the URL slug to a customized title.
+    location : boolean or panel.io.location.Location
+        Whether to create a Location component to observe and
+        set the URL location.
+    admin: boolean (default=False)
+        Whether to enable the admin panel
+    liveness: bool | str (optional, default=False)
+      Whether to add a liveness endpoint. If a string is provided
+      then this will be used as the endpoint, otherwise the endpoint
+      will be hosted at /liveness.
+    start : boolean(optional, default=False)
+      Whether to start the Server.
+    **kwargs:
+        Additional keyword arguments to pass to the BokehFastAPI application
+    """
+    try:
+        import uvicorn
+    except Exception as e:
+        raise ImportError(
+            "Running a FastAPI server requires uvicorn to be available. "
+            "If you want to use a different server implementation use the "
+            "panel.io.fastapi.add_applications API."
+        ) from e
+
+    loop = kwargs.pop('loop')
+    if loop:
+        asyncio.set_event_loop(loop)
+    server_id = kwargs.pop('server_id', uuid.uuid4().hex)
+    application = add_applications(
+        panel, title=title, location=location, admin=admin, **kwargs
+    )
+
+    config = uvicorn.Config(application.app, port=port, loop=loop)
+    server = uvicorn.Server(config)
+
+    state._servers[server_id] = (server, panel, [])
+    if start:
+        if loop:
+            try:
+                loop.run_until_complete(server.serve())
+            except asyncio.CancelledError:
+                pass
+        else:
+            server.run()
+    return server
+
+
+def serve(
+    panels: TViewableFuncOrPath | Mapping[str, TViewableFuncOrPath],
+    port: int = 0,
+    address: str | None = None,
+    websocket_origin: str | list[str] | None = None,
+    loop: asyncio.AbstractEventLoop | None = None,
+    show: bool = True,
+    start: bool = True,
+    title: str | None = None,
+    verbose: bool = True,
+    location: bool = True,
+    threaded: bool = False,
+    admin: bool = False,
+    liveness: bool | str = False,
+    **kwargs
+) -> StoppableThread | Server:
+    """
+    Allows serving one or more panel objects on a single server.
+    The panels argument should be either a Panel object or a function
+    returning a Panel object or a dictionary of these two. If a
+    dictionary is supplied the keys represent the slugs at which
+    each app is served, e.g. `serve({'app': panel1, 'app2': panel2})`
+    will serve apps at /app and /app2 on the server.
+
+    Reference: https://panel.holoviz.org/user_guide/Server_Configuration.html#serving-multiple-apps
+
+    Arguments
+    ---------
+    panel: Viewable, function or {str: Viewable or function}
+      A Panel object, a function returning a Panel object or a
+      dictionary mapping from the URL slug to either.
+    port: int (optional, default=0)
+      Allows specifying a specific port
+    address : str
+      The address the server should listen on for HTTP requests.
+    websocket_origin: str or list(str) (optional)
+      A list of hosts that can connect to the websocket.
+
+      This is typically required when embedding a server app in
+      an external web site.
+
+      If None, "localhost" is used.
+    loop : tornado.ioloop.IOLoop (optional, default=IOLoop.current())
+      The tornado IOLoop to run the Server on
+    show : boolean (optional, default=True)
+      Whether to open the server in a new browser tab on start
+    start : boolean(optional, default=True)
+      Whether to start the Server
+    title: str or {str: str} (optional, default=None)
+      An HTML title for the application or a dictionary mapping
+      from the URL slug to a customized title
+    verbose: boolean (optional, default=True)
+      Whether to print the address and port
+    location : boolean or panel.io.location.Location
+      Whether to create a Location component to observe and
+      set the URL location.
+    threaded: boolean (default=False)
+      Whether to start the server on a new Thread
+    admin: boolean (default=False)
+      Whether to enable the admin panel
+    liveness: bool | str (optional, default=False)
+      Whether to add a liveness endpoint. If a string is provided
+      then this will be used as the endpoint, otherwise the endpoint
+      will be hosted at /liveness.
+    kwargs: dict
+      Additional keyword arguments to pass to Server instance
+    """
+    # Empty layout are valid and the Bokeh warning is silenced as usually
+    # not relevant to Panel users.
+    kwargs = dict(kwargs, **dict(
+        port=port, address=address, websocket_origin=websocket_origin,
+        loop=loop, show=show, start=start, title=title, verbose=verbose,
+        location=location, admin=admin, liveness=liveness
+    ))
+    if threaded:
+        # To ensure that we have correspondence between state._threads and state._servers
+        # we must provide a server_id here
+        kwargs['loop'] = loop = asyncio.new_event_loop() if loop is None else loop
+        if 'server_id' not in kwargs:
+            kwargs['server_id'] = uuid.uuid4().hex
+        server = StoppableThread(
+            target=get_server, io_loop=loop, args=(panels,), kwargs=kwargs
+        )
+        server_id = kwargs['server_id']
+        state._threads[server_id] = server
+        server.start()
+    else:
+        return get_server(panels, **kwargs)
+    return server
diff --git a/panel/io/server.py b/panel/io/server.py
index 625afacd33..bc34cebeb3 100644
--- a/panel/io/server.py
+++ b/panel/io/server.py
@@ -13,15 +13,13 @@
 import pathlib
 import signal
 import sys
-import threading
 import uuid
 
 from contextlib import contextmanager
 from functools import partial, wraps
 from html import escape
-from types import FunctionType, MethodType
 from typing import (
-    TYPE_CHECKING, Any, Callable, Mapping, Optional, Union,
+    TYPE_CHECKING, Any, Callable, Mapping, Optional,
 )
 from urllib.parse import urljoin, urlparse
 
@@ -30,7 +28,6 @@
 import tornado
 
 # Bokeh imports
-from bokeh.application import Application as BkApplication
 from bokeh.application.handlers.function import FunctionHandler
 from bokeh.core.json_encoder import serialize_json
 from bokeh.core.templates import AUTOLOAD_JS, FILE, MACROS
@@ -40,7 +37,6 @@
 from bokeh.embed.elements import script_for_render_items
 from bokeh.embed.util import RenderItem
 from bokeh.embed.wrappers import wrap_in_script_tag
-from bokeh.models import CustomJS
 from bokeh.server.server import Server as BokehServer
 from bokeh.server.urls import per_app_patterns, toplevel_patterns
 from bokeh.server.views.autoload_js_handler import (
@@ -64,15 +60,13 @@
 from ..config import config
 from ..util import edit_readonly, fullpath
 from ..util.warnings import warn
-from .application import Application, build_single_handler_application
+from .application import Application, build_applications
 from .document import (  # noqa
     _cleanup_doc, init_doc, unlocked, with_lock,
 )
 from .liveness import LivenessHandler
 from .loading import LOADING_INDICATOR_CSS_CLASS
-from .logging import (
-    LOG_SESSION_CREATED, LOG_SESSION_DESTROYED, LOG_SESSION_LAUNCHING,
-)
+from .logging import LOG_SESSION_CREATED
 from .reload import record_modules
 from .resources import (
     BASE_TEMPLATE, CDN_DIST, COMPONENT_PATH, ERROR_TEMPLATE, LOCAL_DIST,
@@ -80,23 +74,21 @@
 )
 from .session import generate_session
 from .state import set_curdoc, state
+from .threads import StoppableThread
 
 logger = logging.getLogger(__name__)
 
 if TYPE_CHECKING:
     from bokeh.bundle import Bundle
     from bokeh.core.types import ID
-    from bokeh.document.document import DocJson, Document
+    from bokeh.document.document import DocJson
     from bokeh.server.contexts import BokehSessionContext
     from bokeh.server.session import ServerSession
     from jinja2 import Template
 
-    from ..template.base import BaseTemplate
-    from ..viewable import Viewable, Viewer
+    from .application import TViewableFuncOrPath
     from .location import Location
 
-    TViewable = Union[Viewable, Viewer, BaseTemplate]
-    TViewableFuncOrPath = Union[TViewable, Callable[[], TViewable], os.PathLike, str]
 
 #---------------------------------------------------------------------
 # Private API
@@ -116,38 +108,6 @@ def _server_url(url: str, port: int) -> str:
     else:
         return 'http://%s:%d%s' % (url.split(':')[0], port, "/")
 
-def _eval_panel(
-    panel: TViewableFuncOrPath, server_id: str, title: str,
-    location: bool | Location, admin: bool, doc: Document
-):
-    from ..pane import panel as as_panel
-    from ..template import BaseTemplate
-
-    if config.global_loading_spinner:
-        doc.js_on_event(
-            'document_ready', CustomJS(code=f"""
-            const body = document.getElementsByTagName('body')[0]
-            body.classList.remove({LOADING_INDICATOR_CSS_CLASS!r}, {config.loading_spinner!r})
-            """)
-        )
-
-    doc.on_event('document_ready', partial(state._schedule_on_load, doc))
-
-    # Set up instrumentation for logging sessions
-    logger.info(LOG_SESSION_LAUNCHING, id(doc))
-    def _log_session_destroyed(session_context):
-        logger.info(LOG_SESSION_DESTROYED, id(doc))
-    doc.on_session_destroyed(_log_session_destroyed)
-
-    with set_curdoc(doc):
-        if isinstance(panel, (FunctionType, MethodType)):
-            panel = panel()
-        if isinstance(panel, BaseTemplate):
-            doc = panel._modify_doc(server_id, title, doc, location)
-        else:
-            doc = as_panel(panel)._modify_doc(server_id, title, doc, location)
-        return doc
-
 def async_execute(func: Callable[..., None]) -> None:
     """
     Wrap async event loop scheduling to ensure that with_lock flag
@@ -817,9 +777,6 @@ def serve(
     kwargs: dict
       Additional keyword arguments to pass to Server instance
     """
-    # Empty layout are valid and the Bokeh warning is silenced as usually
-    # not relevant to Panel users.
-    silence(EMPTY_LAYOUT, True)
     kwargs = dict(kwargs, **dict(
         port=port, address=address, websocket_origin=websocket_origin,
         loop=loop, show=show, start=start, title=title, verbose=verbose,
@@ -891,7 +848,7 @@ def get_server(
     loop: Optional[IOLoop] = None,
     show: bool = False,
     start: bool = False,
-    title: bool = None,
+    title: str | dict[str, str] | None = None,
     verbose: bool = False,
     location: bool | Location = True,
     admin: bool = False,
@@ -1018,57 +975,29 @@ def get_server(
     from ..config import config
     from .rest import REST_PROVIDERS
 
+    silence(EMPTY_LAYOUT, True)
     server_id = kwargs.pop('server_id', uuid.uuid4().hex)
-    kwargs['extra_patterns'] = extra_patterns = kwargs.get('extra_patterns', [])
-    if isinstance(panel, dict):
-        apps = {}
-        for slug, app in panel.items():
-            if slug.endswith('/') and not slug == '/':
-                raise ValueError(f"Invalid URL: trailing slash '/' used for {slug!r} not supported.")
-            if isinstance(title, dict):
-                try:
-                    title_ = title[slug]
-                except KeyError:
-                    raise KeyError(
-                        "Keys of the title dictionary and of the apps "
-                        f"dictionary must match. No {slug} key found in the "
-                        "title dictionary.") from None
-            else:
-                title_ = title
-            slug = slug if slug.startswith('/') else '/'+slug
-            if 'flask' in sys.modules:
-                from flask import Flask
-                if isinstance(app, Flask):
-                    wsgi = WSGIContainer(app)
-                    if slug == '/':
-                        raise ValueError('Flask apps must be served on a subpath.')
-                    if not slug.endswith('/'):
-                        slug += '/'
-                    extra_patterns.append(('^'+slug+'.*', ProxyFallbackHandler,
-                                           dict(fallback=wsgi, proxy=slug)))
-                    continue
-            if isinstance(app, pathlib.Path):
-                app = str(app) # enables serving apps from Paths
-            if (isinstance(app, str) and app.endswith(('.py', '.ipynb', '.md'))
-                and os.path.isfile(app)):
-                apps[slug] = app = build_single_handler_application(app)
-                app._admin = admin
-            elif isinstance(app, BkApplication):
-                apps[slug] = app
-            else:
-                handler = FunctionHandler(partial(_eval_panel, app, server_id, title_, location, admin))
-                apps[slug] = Application(handler, admin=admin)
-    else:
-        if isinstance(panel, pathlib.Path):
-            panel = str(panel) # enables serving apps from Paths
-        if isinstance(panel, BkApplication):
-            panel = {'/': app}
-        elif (isinstance(panel, str) and panel.endswith(('.py', '.ipynb', '.md'))
-            and os.path.isfile(panel)):
-            apps = {'/': build_single_handler_application(panel)}
-        else:
-            handler = FunctionHandler(partial(_eval_panel, panel, server_id, title, location, admin))
-            apps = {'/': Application(handler, admin=admin)}
+    kwargs['extra_patterns'] = extra_patterns = list(kwargs.get('extra_patterns', []))
+
+    def flask_handler(slug, app):
+        if 'flask' not in sys.modules:
+            return
+        from flask import Flask
+        if not isinstance(app, Flask):
+            return
+        wsgi = WSGIContainer(app)
+        if slug == '/':
+            raise ValueError('Flask apps must be served on a subpath.')
+        if not slug.endswith('/'):
+            slug += '/'
+        extra_patterns.append((
+            f'^{slug}.*', ProxyFallbackHandler, dict(fallback=wsgi, proxy=slug)
+        ))
+        return True
+
+    apps = build_applications(
+        panel, title=title, location=location, admin=admin, custom_handlers=(flask_handler,)
+    )
 
     if warm or config.autoreload:
         for app in apps.values():
@@ -1177,7 +1106,7 @@ def show_callback():
         server.io_loop.add_callback(show_callback)
 
     def sig_exit(*args, **kwargs):
-        server.io_loop.add_callback_from_signal(do_stop)
+        server.io_loop.asyncio_loop.call_soon_threadsafe(do_stop)
 
     def do_stop(*args, **kwargs):
         server.io_loop.stop()
@@ -1199,46 +1128,3 @@ def do_stop(*args, **kwargs):
                 "process invoking the panel.io.server.serve."
             )
     return server
-
-
-class StoppableThread(threading.Thread):
-    """Thread class with a stop() method."""
-
-    def __init__(self, io_loop: IOLoop, **kwargs):
-        super().__init__(**kwargs)
-        self.io_loop = io_loop
-
-    def run(self) -> None:
-        if hasattr(self, '_target'):
-            target, args, kwargs = self._target, self._args, self._kwargs # type: ignore
-        else:
-            target, args, kwargs = self._Thread__target, self._Thread__args, self._Thread__kwargs # type: ignore
-        if not target:
-            return
-        bokeh_server = None
-        try:
-            bokeh_server = target(*args, **kwargs)
-        finally:
-            if isinstance(bokeh_server, Server):
-                try:
-                    bokeh_server.stop()
-                except Exception:
-                    pass
-            if hasattr(self, '_target'):
-                del self._target, self._args, self._kwargs # type: ignore
-            else:
-                del self._Thread__target, self._Thread__args, self._Thread__kwargs # type: ignore
-
-    def stop(self) -> None:
-        """Signal to stop the event loop gracefully."""
-        self.io_loop.add_callback(self._graceful_stop)
-
-    async def _shutdown(self):
-        tasks = [t for t in asyncio.all_tasks() if t is not asyncio.current_task()]
-        for task in tasks:
-            task.cancel()
-        await asyncio.gather(*tasks, return_exceptions=True)
-        self.io_loop.stop()
-
-    def _graceful_stop(self):
-        self.io_loop.add_callback(self._shutdown)
diff --git a/panel/io/threads.py b/panel/io/threads.py
new file mode 100644
index 0000000000..610ba94216
--- /dev/null
+++ b/panel/io/threads.py
@@ -0,0 +1,62 @@
+import asyncio
+import threading
+
+from .state import state
+
+
+class StoppableThread(threading.Thread):
+    """Thread class with a stop() method."""
+
+    def __init__(self, io_loop, **kwargs):
+        super().__init__(**kwargs)
+        # Backward compatibility to handle Tornado IOLoop
+        if hasattr(io_loop, 'asyncio_loop'):
+            io_loop = io_loop.asyncio_loop
+        self.asyncio_loop = io_loop
+        self.server_id = kwargs.get('kwargs', {}).get('server_id')
+        self._shutdown_task = None
+
+    def run(self) -> None:
+        if hasattr(self, '_target'):
+            target, args, kwargs = self._target, self._args, self._kwargs # type: ignore
+        else:
+            target, args, kwargs = self._Thread__target, self._Thread__args, self._Thread__kwargs # type: ignore
+        if not target:
+            return
+        bokeh_server = None
+        try:
+            bokeh_server = target(*args, **kwargs)
+        finally:
+            if hasattr(bokeh_server, 'stop'):
+                # Handle tornado server
+                try:
+                    bokeh_server.stop()
+                except Exception:
+                    pass
+            if hasattr(self, '_target'):
+                del self._target, self._args, self._kwargs # type: ignore
+            else:
+                del self._Thread__target, self._Thread__args, self._Thread__kwargs # type: ignore
+
+    def stop(self) -> None:
+        if not self.is_alive():
+            return
+        elif self.server_id and self.server_id in state._servers:
+            server, _, _ = state._servers[self.server_id]
+            if hasattr(server, 'should_exit'):
+                server.should_exit = True
+                while self.is_alive():
+                    continue
+                return
+        if self._shutdown_task:
+            raise RuntimeError("Thread already stopping")
+        self._shutdown_task = asyncio.run_coroutine_threadsafe(self._shutdown(), self.asyncio_loop)
+
+    async def _shutdown(self):
+        cur_task = asyncio.current_task()
+        tasks = [t for t in asyncio.all_tasks() if t is not cur_task]
+        for task in tasks:
+            task.cancel()
+        await asyncio.gather(*tasks, return_exceptions=True)
+        self.asyncio_loop.stop()
+        self._shutdown_task = None
diff --git a/panel/tests/conftest.py b/panel/tests/conftest.py
index 1d57365aa2..3235a4ae96 100644
--- a/panel/tests/conftest.py
+++ b/panel/tests/conftest.py
@@ -33,6 +33,7 @@
 )
 from panel.io.state import set_curdoc, state
 from panel.pane import HTML, Markdown
+from panel.tests.util import get_open_ports
 from panel.theme import Design
 
 CUSTOM_MARKS = ('ui', 'jupyter', 'subprocess', 'docs')
@@ -246,11 +247,7 @@ def watch_files(*files):
 
 @pytest.fixture
 def port():
-    worker_id = os.environ.get("PYTEST_XDIST_WORKER", "0")
-    worker_count = int(os.environ.get("PYTEST_XDIST_WORKER_COUNT", "1"))
-    new_port = PORT[0] + int(re.sub(r"\D", "", worker_id))
-    PORT[0] += worker_count
-    return new_port
+    return get_open_ports()[0]
 
 
 @pytest.fixture
diff --git a/panel/tests/test_server.py b/panel/tests/test_server.py
index 1f0fc0e169..c9e8161aff 100644
--- a/panel/tests/test_server.py
+++ b/panel/tests/test_server.py
@@ -1,11 +1,14 @@
 import asyncio
 import datetime as dt
+import importlib
 import logging
 import os
 import pathlib
 import time
 import weakref
 
+from functools import partial
+
 import param
 import pytest
 import requests
@@ -23,12 +26,28 @@
 from panel.param import ParamFunction
 from panel.reactive import ReactiveHTML
 from panel.template import BootstrapTemplate
-from panel.tests.util import serve_and_request, serve_and_wait, wait_until
+from panel.tests.util import (
+    get_open_ports, serve_and_request, serve_and_wait, wait_until,
+)
 from panel.widgets import (
     Button, Tabulator, Terminal, TextInput,
 )
 
 
+@pytest.fixture(params=["tornado", "fastapi"])
+def server_implementation(request):
+    try:
+        importlib.import_module(request.param)
+    except Exception:
+        pytest.skip(f'{request.param!r} is not installed')
+    old = serve_and_wait.server_implementation
+    serve_and_wait.server_implementation = request.param
+    try:
+        yield request.param
+    finally:
+        serve_and_wait.server_implementation = old
+
+
 @pytest.mark.xdist_group(name="server")
 def test_get_server(html_server_session):
     html, server, session, port = html_server_session
@@ -80,7 +99,7 @@ def test_server_root_handler():
     assert 'href="./app"' in r.content.decode('utf-8')
 
 
-def test_server_template_static_resources():
+def test_server_template_static_resources(server_implementation):
     template = BootstrapTemplate()
 
     r = serve_and_request({'template': template}, suffix="/static/extensions/panel/bundled/bootstraptemplate/bootstrap.css")
@@ -89,6 +108,7 @@ def test_server_template_static_resources():
         assert f.read() == r.content.decode('utf-8').replace('\r\n', '\n')
 
 
+#@pytest.mark.parametrize('server_implementation', ["tornado", "fastapi"], indirect=True)
 def test_server_template_static_resources_with_prefix():
     template = BootstrapTemplate()
 
@@ -98,6 +118,7 @@ def test_server_template_static_resources_with_prefix():
         assert f.read() == r.content.decode('utf-8').replace('\r\n', '\n')
 
 
+#@pytest.mark.parametrize('server_implementation', ["tornado", "fastapi"], indirect=True)
 def test_server_template_static_resources_with_prefix_relative_url():
     template = BootstrapTemplate()
 
@@ -114,7 +135,7 @@ def test_server_template_static_resources_with_subpath_and_prefix_relative_url()
     assert f'href="../static/extensions/panel/bundled/bootstraptemplate/bootstrap.css?v={JS_VERSION}"' in r.content.decode('utf-8')
 
 
-def test_server_extensions_on_root():
+def test_server_extensions_on_root(server_implementation):
     md = Markdown('# Title')
     assert serve_and_request(md).ok
 
@@ -129,7 +150,7 @@ def test_autoload_js(port):
     assert f"http://localhost:{port}/static/extensions/panel/panel.min.js" in r.content.decode('utf-8')
 
 
-def test_server_async_callbacks():
+def test_server_async_callbacks(server_implementation):
     button = Button(name='Click')
 
     counts = []
@@ -153,7 +174,7 @@ async def cb(event, count=[0]):
     wait_until(lambda: len(counts) > 0 and max(counts) > 1)
 
 
-def test_server_async_local_state(bokeh_curdoc):
+def test_server_async_local_state(server_implementation, bokeh_curdoc):
     docs = {}
 
     async def task():
@@ -174,7 +195,7 @@ def app():
     wait_until(lambda: all([len(set(docs)) == 1 and docs[0] is doc for doc, docs in docs.items()]))
 
 
-def test_server_async_local_state_nested_tasks(bokeh_curdoc):
+def test_server_async_local_state_nested_tasks(server_implementation, bokeh_curdoc):
     docs = {}
     _tasks = set()
 
@@ -200,7 +221,7 @@ def app():
     wait_until(lambda: all(len(set(docs)) == 1 and docs[0] is doc for doc, docs in docs.items()))
 
 
-def test_serve_config_per_session_state():
+def test_serve_config_per_session_state(server_implementation):
     CSS1 = 'body { background-color: red }'
     CSS2 = 'body { background-color: green }'
     def app1():
@@ -208,7 +229,7 @@ def app1():
     def app2():
         config.raw_css = [CSS2]
 
-    port1, port2 = 7001, 7002
+    port1, port2 = get_open_ports(n=2)
     serve_and_wait(app1, port=port1)
     serve_and_wait(app2, port=port2)
 
@@ -223,7 +244,7 @@ def app2():
     assert CSS2 in r2
 
 
-def test_server_on_session_created():
+def test_server_on_session_created(server_implementation):
     session_contexts = []
     def append_session(session_context):
         session_contexts.append(session_context)
@@ -236,6 +257,7 @@ def append_session(session_context):
     assert len(session_contexts) == 3
 
 
+#@pytest.mark.parametrize('server_implementation', ["tornado", "fastapi"], indirect=True)
 def test_server_on_session_destroyed():
     session_contexts = []
     def append_session(session_context):
@@ -281,7 +303,7 @@ def test_server_session_info():
     assert state.session_info['live'] == 0
 
 
-def test_server_periodic_async_callback(threads):
+def test_server_periodic_async_callback(server_implementation, threads):
     counts = []
 
     async def cb(count=[0]):
@@ -301,7 +323,7 @@ def loaded():
     wait_until(lambda: len(counts) >= 5 and counts == list(range(len(counts))))
 
 
-def test_server_schedule_repeat():
+def test_server_schedule_repeat(server_implementation):
     state.cache['count'] = 0
     def periodic_cb():
         state.cache['count'] += 1
@@ -314,7 +336,8 @@ def app():
 
     wait_until(lambda: state.cache['count'] > 0)
 
-def test_server_schedule_threaded(threads):
+
+def test_server_schedule_threaded(server_implementation, threads):
     counts = []
     def periodic_cb(count=[0]):
         count[0] += 1
@@ -333,37 +356,40 @@ def app():
     wait_until(lambda: len(counts) > 0 and max(counts) > 1)
 
 
-def test_server_schedule_at():
+def test_server_schedule_at(server_implementation):
     def periodic_cb():
         state.cache['at'] = dt.datetime.now()
 
-    scheduled = dt.datetime.now() + dt.timedelta(seconds=1.57)
+    scheduled = []
 
     def app():
-        state.schedule_task('periodic', periodic_cb, at=scheduled)
+        scheduled.append(dt.datetime.now() + dt.timedelta(seconds=0.57))
+        state.schedule_task('periodic', periodic_cb, at=scheduled[0])
         return '# state.schedule test'
 
     serve_and_request(app)
 
     # Check callback was executed within small margin of error
     wait_until(lambda: 'at' in state.cache)
-    assert abs(state.cache['at'] - scheduled) < dt.timedelta(seconds=0.2)
+    assert abs(state.cache['at'] - scheduled[0]) < dt.timedelta(seconds=0.2)
     assert len(state._scheduled) == 0
 
 
-def test_server_schedule_at_iterator():
+def test_server_schedule_at_iterator(server_implementation):
     state.cache['at'] = []
     def periodic_cb():
         state.cache['at'].append(dt.datetime.now())
 
-    scheduled1 = dt.datetime.now() + dt.timedelta(seconds=1.57)
-    scheduled2 = dt.datetime.now() + dt.timedelta(seconds=1.86)
+    scheduled = []
 
     def schedule():
-        yield scheduled1
-        yield scheduled2
+        yield from scheduled
 
     def app():
+        scheduled.extend([
+            dt.datetime.now() + dt.timedelta(seconds=0.57),
+            dt.datetime.now() + dt.timedelta(seconds=0.86)
+        ])
         state.schedule_task('periodic', periodic_cb, at=schedule())
         return '# state.schedule test'
 
@@ -371,27 +397,27 @@ def app():
 
     # Check callbacks were executed within small margin of error
     wait_until(lambda: len(state.cache['at']) == 2)
-    assert abs(state.cache['at'][0] - scheduled1) < dt.timedelta(seconds=0.2)
-    assert abs(state.cache['at'][1] - scheduled2) < dt.timedelta(seconds=0.2)
+    assert abs(state.cache['at'][0] - scheduled[0]) < dt.timedelta(seconds=0.2)
+    assert abs(state.cache['at'][1] - scheduled[1]) < dt.timedelta(seconds=0.2)
     assert len(state._scheduled) == 0
 
 
-def test_server_schedule_at_callable():
+def test_server_schedule_at_callable(server_implementation):
     state.cache['at'] = []
     def periodic_cb():
         state.cache['at'].append(dt.datetime.now())
 
-    scheduled = [
-        dt.datetime.now(dt.timezone.utc) + dt.timedelta(seconds=1.57),
-        dt.datetime.now(dt.timezone.utc) + dt.timedelta(seconds=1.86)
-    ]
-    siter = iter(scheduled)
+    scheduled = []
 
-    def schedule(utcnow):
+    def schedule(siter, utcnow):
         return next(siter)
 
     def app():
-        state.schedule_task('periodic', periodic_cb, at=schedule)
+        scheduled[:] = [
+            dt.datetime.now(dt.timezone.utc) + dt.timedelta(seconds=s)
+            for s in (0.57, 0.86)
+        ]
+        state.schedule_task('periodic', periodic_cb, at=partial(schedule, iter(scheduled)))
         return '# state.schedule test'
 
     serve_and_request(app)
@@ -400,12 +426,9 @@ def app():
     wait_until(lambda: len(state.cache['at']) == 2)
 
     # Convert scheduled times to local time
-    scheduled = [
-        s.replace(tzinfo=dt.timezone.utc).astimezone().replace(tzinfo=None)
-        for s in scheduled
-    ]
-    assert abs(state.cache['at'][0] - scheduled[0]) < dt.timedelta(seconds=0.2)
-    assert abs(state.cache['at'][1] - scheduled[1]) < dt.timedelta(seconds=0.2)
+    converted = [s.replace(tzinfo=dt.timezone.utc).astimezone().replace(tzinfo=None) for s in scheduled]
+    assert abs(state.cache['at'][0] - converted[0]) < dt.timedelta(seconds=0.2)
+    assert abs(state.cache['at'][1] - converted[1]) < dt.timedelta(seconds=0.2)
     assert len(state._scheduled) == 0
 
 
@@ -487,20 +510,20 @@ def test_multiple_titles(multiple_apps_server_sessions):
             slugs=('app1', 'app2'), titles={'badkey': 'APP1', 'app2': 'APP2'})
 
 
-def test_serve_can_serve_panel_app_from_file():
+def test_serve_can_serve_panel_app_from_file(server_implementation):
     path = pathlib.Path(__file__).parent / "io"/"panel_app.py"
     server = get_server({"panel-app": path})
     assert "/panel-app" in server._tornado.applications
 
 
-def test_serve_can_serve_bokeh_app_from_file():
+def test_serve_can_serve_bokeh_app_from_file(server_implementation):
     path = pathlib.Path(__file__).parent / "io"/"bk_app.py"
     server = get_server({"bk-app": path})
     assert "/bk-app" in server._tornado.applications
 
 
 
-def test_server_on_load_after_init_with_threads(threads):
+def test_server_on_load_after_init_with_threads(server_implementation, threads):
     loaded = []
 
     def cb():
@@ -526,7 +549,7 @@ def loaded():
     assert loaded == [(doc, False), (doc, True)]
 
 
-def test_server_on_load_after_init():
+def test_server_on_load_after_init(server_implementation):
     loaded = []
 
     def cb():
@@ -552,7 +575,7 @@ def loaded():
     assert loaded == [(doc, False), (doc, True)]
 
 
-def test_server_on_load_during_load(threads):
+def test_server_on_load_during_load(server_implementation, threads):
     loaded = []
 
     def cb():
@@ -576,7 +599,7 @@ def loaded():
     wait_until(lambda: loaded == [False, False])
 
 
-def test_server_thread_pool_on_load(threads):
+def test_server_thread_pool_on_load(server_implementation, threads):
     counts = []
 
     def cb(count=[0]):
@@ -602,7 +625,7 @@ def loaded():
     wait_until(lambda: len(counts) > 0 and max(counts) > 1)
 
 
-def test_server_thread_pool_execute(threads):
+def test_server_thread_pool_execute(server_implementation, threads):
     counts = []
 
     def cb(count=[0]):
@@ -622,7 +645,7 @@ def app():
     wait_until(lambda: len(counts) > 0 and max(counts) > 1)
 
 
-def test_server_thread_pool_defer_load(threads):
+def test_server_thread_pool_defer_load(server_implementation, threads):
     counts = []
 
     def cb(count=[0]):
@@ -650,7 +673,7 @@ def loaded():
     wait_until(lambda: len(counts) > 0 and max(counts) > 1)
 
 
-def test_server_thread_pool_change_event(threads):
+def test_server_thread_pool_change_event(server_implementation, threads):
     button = Button(name='Click')
     button2 = Button(name='Click')
 
@@ -678,7 +701,7 @@ def cb(event, count=[0]):
     wait_until(lambda: len(counts) > 0 and max(counts) > 1)
 
 
-def test_server_thread_pool_bokeh_event(threads):
+def test_server_thread_pool_bokeh_event(server_implementation, threads):
     import pandas as pd
 
     df = pd.DataFrame([[1, 1], [2, 2]], columns=['A', 'B'])
@@ -706,7 +729,7 @@ def cb(event, count=[0]):
     wait_until(lambda: len(counts) > 0 and max(counts) > 1)
 
 
-def test_server_thread_pool_periodic(threads):
+def test_server_thread_pool_periodic(server_implementation, threads):
     counts = []
 
     def cb(count=[0]):
@@ -755,7 +778,7 @@ def loaded():
     wait_until(lambda: len(counts) > 0 and max(counts) > 1)
 
 
-def test_server_thread_pool_busy(threads):
+def test_server_thread_pool_busy(server_implementation, threads):
     button = Button(name='Click')
     clicks = []
 
diff --git a/panel/tests/util.py b/panel/tests/util.py
index bb5c14c89c..d7af7ab17a 100644
--- a/panel/tests/util.py
+++ b/panel/tests/util.py
@@ -4,6 +4,7 @@
 import os
 import platform
 import re
+import socket
 import subprocess
 import sys
 import time
@@ -272,15 +273,36 @@ def get_ctrl_modifier():
         raise ValueError(f'No control modifier defined for platform {sys.platform}')
 
 
+def get_open_ports(n=1):
+    sockets,ports = [], []
+    for _ in range(n):
+        s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+        s.bind(('127.0.0.1', 0))
+        ports.append(s.getsockname()[1])
+        sockets.append(s)
+    for s in sockets:
+        s.close()
+    return tuple(ports)
+
+
 def serve_and_wait(app, page=None, prefix=None, port=None, **kwargs):
     server_id = kwargs.pop('server_id', uuid.uuid4().hex)
-    serve(app, port=port or 0, threaded=True, show=False, liveness=True, server_id=server_id, prefix=prefix or "", **kwargs)
+    if serve_and_wait.server_implementation == 'fastapi':
+        from panel.io.fastapi import serve as serve_app
+        port = port or get_open_ports()[0]
+    else:
+        serve_app = serve
+    serve_app(app, port=port or 0, threaded=True, show=False, liveness=True, server_id=server_id, prefix=prefix or "", **kwargs)
     wait_until(lambda: server_id in state._servers, page)
     server = state._servers[server_id][0]
-    port = server.port
+    if serve_and_wait.server_implementation == 'fastapi':
+        port = port
+    else:
+        port = server.port
     wait_for_server(port, prefix=prefix)
     return port
 
+serve_and_wait.server_implementation = 'tornado'
 
 def serve_component(page, app, suffix='', wait=True, **kwargs):
     msgs = []
diff --git a/pixi.toml b/pixi.toml
index e0a72fa368..eb90e7ec52 100644
--- a/pixi.toml
+++ b/pixi.toml
@@ -112,6 +112,7 @@ pytest-xdist = "*"
 altair = "*"
 anywidget = "*"
 diskcache = "*"
+fastapi = "*"
 folium = "*"
 ipympl = "*"
 ipyvuetify = "*"
@@ -121,6 +122,9 @@ reacton = "*"
 scipy = "*"
 textual = "*"
 
+[feature.test.pypi-dependencies]
+bokeh-fastapi = "~=0.1.0a0"
+
 [feature.test-unit-task.tasks] # So it is not showing up in the test-ui environment
 test-unit = 'pytest panel/tests -n logical --dist loadgroup'
 test-subprocess = 'pytest panel/tests --subprocess'

From 43b8b18ef1ffb86a7562384f1de81b22e7672165 Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Tue, 3 Sep 2024 11:37:56 +0200
Subject: [PATCH 035/164] Implement PyComponent (#7051)

---
 .../custom_components/esm/custom_layout.md    |  30 ++
 doc/how_to/custom_components/index.md         |  12 +-
 .../python/create_custom_widget.md            | 174 ++++++++++
 .../custom_components/PyComponent.ipynb       | 321 ++++++++++++++++++
 .../reference/custom_components/Viewer.ipynb  |   4 +-
 panel/custom.py                               |  90 ++++-
 panel/tests/test_custom.py                    |  41 ++-
 panel/widgets/base.py                         |   2 +-
 8 files changed, 667 insertions(+), 7 deletions(-)
 create mode 100644 doc/how_to/custom_components/python/create_custom_widget.md
 create mode 100644 examples/reference/custom_components/PyComponent.ipynb

diff --git a/doc/how_to/custom_components/esm/custom_layout.md b/doc/how_to/custom_components/esm/custom_layout.md
index bc88360f70..7e59bc9c4a 100644
--- a/doc/how_to/custom_components/esm/custom_layout.md
+++ b/doc/how_to/custom_components/esm/custom_layout.md
@@ -316,6 +316,36 @@ split_anywidget.right=pn.widgets.CodeEditor(
 
 ::::
 
+Now, let's change it back:
+
+::::{tab-set}
+
+:::{tab-item} `JSComponent`
+```{pyodide}
+split_js.right=pn.widgets.CodeEditor(
+    value="Right",
+    sizing_mode="stretch_both",
+    margin=0,
+    theme="monokai",
+    language="python",
+)
+```
+:::
+
+:::{tab-item} `ReactComponent`
+```{pyodide}
+split_react.right=pn.widgets.CodeEditor(
+    value="Right",
+    sizing_mode="stretch_both",
+    margin=0,
+    theme="monokai",
+    language="python",
+)
+```
+:::
+
+::::
+
 ## Layout a List of Objects
 
 A Panel `Column` or `Row` works as a list of objects. It is *list-like*. In this section, we will show you how to create your own *list-like* layout using Panel's `NamedListLike` class.
diff --git a/doc/how_to/custom_components/index.md b/doc/how_to/custom_components/index.md
index c709301ad6..1065647a70 100644
--- a/doc/how_to/custom_components/index.md
+++ b/doc/how_to/custom_components/index.md
@@ -2,9 +2,9 @@
 
 These How-to pages provide solutions for common tasks related to extending Panel with custom components.
 
-## `Viewer` Components
+## `Viewer` and `PyComponent`
 
-Build custom components by combining existing components.
+Build custom components by combining existing components in Python.
 
 ::::{grid} 1 2 2 3
 :gutter: 1 1 1 2
@@ -16,6 +16,13 @@ Build custom components by combining existing components.
 How to build custom components that are combinations of existing components.
 :::
 
+:::{grid-item-card} {octicon}`pencil;2.5em;sd-mr-1 sd-animate-grow50` Combine Existing Components
+:link: python/create_custom widget
+:link-type: doc
+
+How to build a custom widget by subclassing `PyComponent` and `WidgetBase`.
+:::
+
 ::::
 
 ### Examples
@@ -47,6 +54,7 @@ Build a custom component wrapping a table and some widgets using the `Viewer` pa
 :maxdepth: 2
 
 custom_viewer
+python/create_custom_widget
 examples/plot_viewer
 examples/table_viewer
 ```
diff --git a/doc/how_to/custom_components/python/create_custom_widget.md b/doc/how_to/custom_components/python/create_custom_widget.md
new file mode 100644
index 0000000000..7bdfdb21ed
--- /dev/null
+++ b/doc/how_to/custom_components/python/create_custom_widget.md
@@ -0,0 +1,174 @@
+# Build a Widget in Python
+
+In this guide we will demonstrate how to create a custom widget that enables users to select a list of features and set their values entirely in Python.
+
+We will leverage the `PyComponent` class to construct this custom widget. The `PyComponent` allows us to combine multiple Panel components into a more complex and functional widget. The resulting class will combine a `MultiSelect` widget with a dynamic number of `FloatInput` widgets.
+
+## Code Overview
+
+Below is the complete implementation of the `FeatureInput` custom widget:
+
+```{pyodide}
+import panel as pn
+import param
+
+from panel.widgets.base import WidgetBase
+from panel.custom import PyComponent
+
+class FeatureInput(WidgetBase, PyComponent):
+    """
+    The `FeatureInput` enables a user to select from a list of features and set their values.
+    """
+
+    value = param.Dict(
+        doc="The names of the features selected and their set values", allow_None=False
+    )
+
+    features = param.Dict(
+        doc="The names of the available features and their default values"
+    )
+
+    selected_features = param.ListSelector(
+        doc="The list of selected features"
+    )
+
+    _selected_widgets = param.ClassSelector(
+        class_=pn.Column, doc="The widgets used to edit the selected features"
+    )
+
+    def __init__(self, **params):
+        params["value"] = params.get("value", {})
+        params["features"] = params.get("features", {})
+        params["selected_features"] = params.get("selected_features", [])
+
+        params["_selected_widgets"] = self.param._selected_widgets.class_()
+
+        super().__init__(**params)
+
+        selected_features_widget = pn.widgets.MultiChoice.from_param(
+            self.param.selected_features, sizing_mode="stretch_width"
+        )
+
+    def __panel__(self):
+        return pn.Column(selected_features_widget, self._selected_widgets)
+
+    @param.depends("features", watch=True, on_init=True)
+    def _reset_selected_features(self):
+        selected_features = []
+        for feature in self.selected_features.copy():
+            if feature in self.features.copy():
+                selected_features.append(feature)
+
+        self.param.selected_features.objects = list(self.features)
+        self.selected_features = selected_features
+
+    @param.depends("selected_features", watch=True, on_init=True)
+    def _handle_selected_features_change(self):
+        org_value = self.value
+
+        self._update_selected_widgets(org_value)
+        self._update_value()
+
+    def _update_value(self, *args):  # pylint: disable=unused-argument
+        new_value = {}
+
+        for widget in self._selected_widgets:
+            new_value[widget.name] = widget.value
+
+        self.value = new_value
+
+    def _update_selected_widgets(self, org_value):
+        new_widgets = {}
+
+        for feature in self.selected_features:
+            value = org_value.get(feature, self.features[feature])
+            widget = self._new_widget(feature, value)
+            new_widgets[feature] = widget
+
+        self._selected_widgets[:] = list(new_widgets.values())
+
+    def _new_widget(self, feature, value):
+        widget = pn.widgets.FloatInput(
+            name=feature, value=value, sizing_mode="stretch_width"
+        )
+        pn.bind(self._update_value, widget, watch=True)
+        return widget
+```
+
+This is a lot to take in so let us break it down into a few pieces:
+
+### Inheritance
+
+The `FeatureInput` class inherits from `pn.custom.PyComponent` and `pn.widgets.WidgetBase`. This multiple inheritance structure allows us to create custom components that behave one of the three core component types that Panel defines `Widget`, `Pane` and `Panel` (i.e. a layout). You should always inherit from the component type base class first, i.e. `WidgetBase` in this case and the component implementation class second, i.e. `PyComponent` in this case.
+
+### Parameter Definitions
+
+It defines the following parameters:
+
+- `value`: A dictionary that stores the selected features and their corresponding values.
+- `features`: A dictionary of available features and their default values.
+- `selected_features`: The list of features that have been selected.
+- `_selected_widgets`: A "private" column layout that contains the widgets for editing the selected features.
+
+### State handling
+
+The two most important methods in configuring state are the constructor (`__init__`) and the (`__panel__`) method which will be invoked to create the component lazily at render time.
+
+#### Constructor
+
+In the `__init__` method, we initialize the widget parameters and create a `MultiChoice` widget for selecting features. We also set up a column to hold the selected feature widgets.
+
+#### `__panel__`
+
+`PyComponent` classes must define a `__panel__` method which tells Panel how the component should be rendered. Here we return a layout of the `MultiSelect` and a column containing the selected features.
+
+#### Syncing state
+
+We use `@param.depends` decorators to define methods that react to changes in the `features` and `selected_features` parameters:
+
+- `_reset_selected_features`: Ensures that only available features are selected.
+- `_handle_selected_features_change`: Updates the widgets and the `value` parameter when the selected features change.
+
+#### Widget Updates
+
+The `_update_value` method updates the `value` parameter based on the current values of the feature widgets. The `_update_selected_widgets` method creates and updates the widgets for the selected features.
+
+## Creating the Application
+
+Now, let's create an application to demonstrate our custom `FeatureInput` widget in action. We will define a set of features related to a wind turbine and use our widget to select and set their values:
+
+```{pyodide}
+features = {
+    "Blade Length (m)": 73.5,
+    "Cut-in Wind Speed (m/s)": 3.5,
+    "Cut-out Wind Speed (m/s)": 25,
+    "Grid Connection Capacity (MW)": 5,
+    "Hub Height (m)": 100,
+    "Rated Wind Speed (m/s)": 12,
+    "Rotor Diameter (m)": 150,
+    "Turbine Efficiency (%)": 45,
+    "Water Depth (m)": 30,
+    "Wind Speed (m/s)": 10,
+}
+selected_features = ["Wind Speed (m/s)", "Rotor Diameter (m)"]
+widget = FeatureInput(
+    features=features,
+    selected_features=selected_features,
+    width=500,
+)
+
+pn.FlexBox(
+    pn.Column(
+        "## Widget",
+        widget,
+    ),
+    pn.Column(
+        "## Value",
+        pn.pane.JSON(widget.param.value, width=500, height=200),
+    ),
+)
+```
+
+## References
+
+- [PyComponent](../../reference/custom_components/PyComponent.html)
diff --git a/examples/reference/custom_components/PyComponent.ipynb b/examples/reference/custom_components/PyComponent.ipynb
new file mode 100644
index 0000000000..0c403e697e
--- /dev/null
+++ b/examples/reference/custom_components/PyComponent.ipynb
@@ -0,0 +1,321 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "6dd69519-afc9-4065-ad12-8253c708f5af",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "import param\n",
+    "\n",
+    "pn.extension()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "a796364a-f1cd-411a-b7fd-d4354794474e",
+   "metadata": {},
+   "source": [
+    "A `PyComponent`, unlike a `Viewer` class inherits the entire API of Panel components, including all layout and styling related parameters. It doesn't just imitate a Panel component, it actually **is** one and therefore is a good option to build some composite widget made up of other widgets, a layout with some special behavior or a pane that renders some type of object in a way that is useful but does not require novel functionality."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "9164b959-7dc5-4579-b65c-1b3827803ca0",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from panel.custom import PyComponent\n",
+    "from panel.widgets import WidgetBase \n",
+    "\n",
+    "class CounterButton(PyComponent, WidgetBase):\n",
+    "\n",
+    "    value = param.Integer(default=0)\n",
+    "\n",
+    "    def __panel__(self):\n",
+    "        return pn.widgets.Button(\n",
+    "            name=self._button_name, on_click=self._on_click\n",
+    "        )\n",
+    "\n",
+    "    def _on_click(self, event):\n",
+    "        self.value += 1\n",
+    "\n",
+    "    @param.depends(\"value\")\n",
+    "    def _button_name(self):\n",
+    "        return f\"count is {self.value}\"\n",
+    "\n",
+    "CounterButton()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "78fda29d-eedd-45e4-a02c-e0771ac6b182",
+   "metadata": {},
+   "source": [
+    ":::{note}\n",
+    "If you are looking to create new components using JavaScript, check out [`JSComponent`](JSComponent.md), [`ReactComponent`](ReactComponent.md), or [`AnyWidgetComponent`](AnyWidgetComponent.md) instead.\n",
+    ":::\n",
+    "\n",
+    "## API\n",
+    "\n",
+    "### Attributes\n",
+    "\n",
+    "The `PyComponent` class inherits the entire Panel `Viewable` API including all sizing, layout and styling related parameters such as `width`, `height`, `sizing_mode` etc.\n",
+    "\n",
+    "### Methods\n",
+    "\n",
+    "- **`__panel__`**: Must be implemented. Should return the Panel component or object to be displayed. Will be lazily evaluated and cached on render.\n",
+    "- **`servable`**: This method serves the component using Panel's built-in server when running `panel serve ...`.\n",
+    "- **`show`**: Displays the component in a new browser tab when running `python ...`.\n",
+    "\n",
+    "## Usage\n",
+    "\n",
+    "### Styling with CSS\n",
+    "\n",
+    "You can style the component by styling the component(s) returned by `__panel__` using their `styles` or `stylesheets` attributes.\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "68f36432-40e1-4098-a195-12474dbf4a83",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "class StyledCounterButton(PyComponent):\n",
+    "\n",
+    "    value = param.Integer()\n",
+    "\n",
+    "    _stylesheets = [\n",
+    "        \"\"\"\n",
+    "        :host(.solid) .bk-btn.bk-btn-default\n",
+    "        {\n",
+    "            background: #0072B5;\n",
+    "            color: white;\n",
+    "            border: none;\n",
+    "            padding: 10px;\n",
+    "            border-radius: 4px;\n",
+    "        }\n",
+    "        :host(.solid) .bk-btn.bk-btn-default:hover {\n",
+    "            background: #4099da;\n",
+    "        }\n",
+    "        \"\"\"\n",
+    "    ]\n",
+    "\n",
+    "    def _on_click(self, event):\n",
+    "        self.value += 1\n",
+    "\n",
+    "    @param.depends(\"value\")\n",
+    "    def _button_name(self):\n",
+    "        return f\"Clicked {self.value} times\"\n",
+    "\n",
+    "    def __panel__(self):\n",
+    "        return pn.widgets.Button(\n",
+    "            name=self._button_name,\n",
+    "            on_click=self._on_click,\n",
+    "            stylesheets=self._stylesheets\n",
+    "        )\n",
+    "\n",
+    "\n",
+    "StyledCounterButton().servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "3b134810-94f9-4ccf-a257-aa07cb48d6f3",
+   "metadata": {},
+   "source": [
+    "See the [Apply CSS](../../how_to/styling/apply_css.md) guide for more information on styling Panel components.\n",
+    "\n",
+    "## Displaying A Single Child\n",
+    "\n",
+    "You can display Panel components (`Viewable`s) by defining a `Child` parameter.\n",
+    "\n",
+    "Let's start with the simplest example:\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "42f21642-ad17-4c21-b186-d894c90da554",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from panel.custom import Child\n",
+    "\n",
+    "class SingleChild(PyComponent):\n",
+    "\n",
+    "    object = Child()\n",
+    "\n",
+    "    def __panel__(self):\n",
+    "      return pn.Column(\"A Single Child\", self.param.object.rx())\n",
+    "\n",
+    "single_child = SingleChild(object=pn.pane.Markdown(\"A **Markdown** pane!\"))\n",
+    "\n",
+    "single_child.servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9ba02dcb-c83b-4212-ac1f-8e14e895d485",
+   "metadata": {},
+   "source": [
+    "Calling `self.param.object.rx()` creates a reactive expression which updates when the `object` parameter is updated.\n",
+    "\n",
+    "Let's replace the `object` with a `Button`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "6e386a52-d256-47a9-9139-a0e81e7bad88",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "single_child.object = pn.widgets.Button(name=\"Click me\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9dbf41ea-b18f-4421-977a-291612cda6f7",
+   "metadata": {},
+   "source": [
+    "Let's change it back"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "880176b1-5052-4da1-8fbb-cce9e39524ab",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "single_child.object = pn.pane.Markdown(\"A **Markdown** pane!\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "10cc810a-6001-49d3-a5e1-798252e96a5d",
+   "metadata": {},
+   "source": [
+    "If you provide a non-`Viewable` child it will automatically be converted to a `Viewable` by `pn.panel`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "d929e9b1-62da-4122-bc78-7129988de486",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "SingleChild(object=\"A **Markdown** pane!\").servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "417c59c4-4e0d-46d1-a762-98af457034d5",
+   "metadata": {},
+   "source": [
+    "If you want to allow a certain type of Panel components only, you can specify the specific type in the `class_` argument."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f02e8336-a3fa-4e58-b457-d71f5d84fd18",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "class SingleChild(PyComponent):\n",
+    "\n",
+    "    object = Child(class_=pn.pane.Markdown)\n",
+    "\n",
+    "    def __panel__(self):\n",
+    "        return pn.Column(\"A Single Child\", self.param.object.rx())\n",
+    "\n",
+    "\n",
+    "SingleChild(object=pn.pane.Markdown(\"A **Markdown** pane!\")).servable()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "8ba7de66-21a3-4ab8-8eb2-0e6fd7d488fd",
+   "metadata": {},
+   "source": [
+    "The `class_` argument also supports a tuple of types:\n",
+    "\n",
+    "```python\n",
+    "    object = Child(class_=(pn.pane.Markdown, pn.widgets.Button))\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "000a0276-717b-4984-9d1e-e936ba8c1a05",
+   "metadata": {},
+   "source": [
+    "## Displaying a List of Children\n",
+    "\n",
+    "You can also display a `List` of `Viewable` objects using the `Children` parameter type:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a4fa17c5-65d2-4c1a-a311-aad61a4bf433",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from panel.custom import Children\n",
+    "\n",
+    "\n",
+    "class MultipleChildren(PyComponent):\n",
+    "\n",
+    "    objects = Children()\n",
+    "\n",
+    "    def __panel__(self):\n",
+    "        return pn.Column(objects=self.param['objects'], styles={\"background\": \"silver\"})\n",
+    "\n",
+    "\n",
+    "MultipleChildren(\n",
+    "    objects=[\n",
+    "        pn.panel(\"A **Markdown** pane!\"),\n",
+    "        pn.widgets.Button(name=\"Click me!\"),\n",
+    "        {\"text\": \"I'm shown as a JSON Pane\"},\n",
+    "    ]\n",
+    ").servable()\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "60ebdbd0-48c8-4f21-9a57-7b49e31523ae",
+   "metadata": {},
+   "source": [
+    ":::note\n",
+    "You can change the `item_type` to a specific subtype of `Viewable` or a tuple of `Viewable` subtypes.\n",
+    ":::\n",
+    "\n",
+    "## References\n",
+    "\n",
+    "### Tutorials\n",
+    "\n",
+    "- [Reusable Components](../../../tutorials/intermediate/reusable_components.md)\n",
+    "\n",
+    "### How-To Guides\n",
+    "\n",
+    "- [Combine Existing Widgets](../../../how_to/custom_components/python/create_custom_widget)"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python",
+   "pygments_lexer": "ipython3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/examples/reference/custom_components/Viewer.ipynb b/examples/reference/custom_components/Viewer.ipynb
index 51c07997d1..0466c9b2de 100644
--- a/examples/reference/custom_components/Viewer.ipynb
+++ b/examples/reference/custom_components/Viewer.ipynb
@@ -17,7 +17,7 @@
    "id": "a796364a-f1cd-411a-b7fd-d4354794474e",
    "metadata": {},
    "source": [
-    "`Viewer` simplifies the creation of custom Panel components using Python and Panel components only."
+    "A `Viewer` is a good abstraction for combining some business logic about your application with Panel components and then letting you use it **as if it was** a Panel component. It provides a useful abstraction extension of a simple `Parameterized` class. Note however that it is not actually a Panel component, i.e. it does not behave like a widget, layout or pane. If you want to build a Panel component in Python the `PyComponent` class is a better option."
    ]
   },
   {
@@ -339,7 +339,7 @@
     "\n",
     "### How-To Guides\n",
     "\n",
-    "- [Combine Existing Widgets](../../../how_to/custom_components/custom_viewer.md)\n"
+    "- [Combine Existing Widgets](../../../how_to/custom_components/custom_viewer.md)"
    ]
   }
  ],
diff --git a/panel/custom.py b/panel/custom.py
index 1c0823106c..50a0043cb6 100644
--- a/panel/custom.py
+++ b/panel/custom.py
@@ -33,7 +33,7 @@
 from .util import camel_to_kebab, classproperty
 from .util.checks import import_available
 from .viewable import (  # noqa
-    Child, Children, Layoutable, Viewable, is_viewable_param,
+    Child, Children, Layoutable, Viewable, Viewer, is_viewable_param,
 )
 from .widgets.base import WidgetBase  # noqa
 
@@ -46,6 +46,88 @@
     ExportSpec = dict[str, list[str | tuple[str, ...]]]
 
 
+class PyComponent(Viewable, Layoutable):
+    """
+    The `PyComponent` combines the convenience of `Viewer` components
+    that allow creating custom components by declaring a `__panel__`
+    method with the ability of controlling layout and styling
+    related parameters directly on the class. Internally the
+    `PyComponent` will forward layout parameters to the underlying
+    object, which is created lazily on render.
+    """
+
+    def __init__(self, **params):
+        super().__init__(**params)
+        self._view__ = None
+        self._changing__ = {}
+        self.param.watch(self._sync__view, [p for p in Layoutable.param if p != 'name'])
+
+    def _sync__view(self, *events):
+        if not events or self._view__ is None:
+            return
+        target = self._view__ if events[0].obj is self else self
+        params = {
+            e.name: e.new for e in events if e.name not in self._changing__
+            or self._changing__[e.name] is not e.new
+        }
+        if not params:
+            return
+        try:
+            self._changing__.update(params)
+            with param.parameterized._syncing(target, list(params)):
+                target.param.update(params)
+        finally:
+            for p in params:
+                if p in self._changing__:
+                    del self._changing__[p]
+
+    def _cleanup(self, root: Model | None = None) -> None:
+        if self._view__ is None:
+            return
+        super()._cleanup(root)
+        if root and root.ref['id'] in self._models:
+            del self._models[root.ref['id']]
+        self._view__._cleanup(root)
+
+    def _create__view(self):
+        from .pane import panel
+        from .param import ParamMethod
+
+        if hasattr(self.__panel__, "_dinfo"):
+            view = ParamMethod(self.__panel__, lazy=True)
+        else:
+            view = panel(self.__panel__())
+        self._view__ = view
+        params = view.param.values()
+        overrides, sync = {}, {}
+        for p in Layoutable.param:
+            if p != 'name' and view.param[p].default != params[p]:
+                overrides[p] = params[p]
+            elif p != 'name':
+                sync[p] = getattr(self, p)
+        view.param.watch(self._sync__view, [p for p in Layoutable.param if p != 'name'])
+        self.param.update(overrides)
+        with param.parameterized._syncing(view, list(sync)):
+            view.param.update(sync)
+
+    def _get_model(
+        self, doc: Document, root: Optional['Model'] = None,
+        parent: Optional['Model'] = None, comm: Optional[Comm] = None
+    ) -> 'Model':
+        if self._view__ is None:
+            self._create__view()
+        model = self._view__._get_model(doc, root, parent, comm)
+        root = model if root is None else root
+        self._models[root.ref['id']] = (model, parent)
+        return model
+
+    def select(
+        self, selector: Optional[type | Callable[Viewable, bool]] = None
+    ) -> list[Viewable]:
+        return super().select(selector) + self._view__.select(selector)
+
+
+
 class ReactiveESMMetaclass(ReactiveMetaBase):
 
     def __init__(mcs, name: str, bases: tuple[type, ...], dict_: Mapping[str, Any]):
@@ -73,6 +155,7 @@ class ReactiveESM(ReactiveCustomBase, metaclass=ReactiveESMMetaclass):
     variable. Use this to define a `render` function as shown in the
     example below.
 
+    ```
     import panel as pn
     import param
 
@@ -97,6 +180,7 @@ class CounterButton(pn.ReactiveESM):
         """
 
     CounterButton().servable()
+    ```
     '''
 
     _bokeh_model = _BkReactiveESM
@@ -375,6 +459,7 @@ class JSComponent(ReactiveESM):
     variable. Use this to define a `render` function as shown in the
     example below.
 
+    ```
     import panel as pn
     import param
 
@@ -399,6 +484,7 @@ class CounterButton(JSComponent):
         """
 
     CounterButton().servable()
+    ```
     '''
 
     __abstract = True
@@ -415,6 +501,7 @@ class ReactComponent(ReactiveESM):
     variable. Use this to define a `render` function as shown in the
     example below.
 
+    ```
     import panel as pn
     import param
 
@@ -435,6 +522,7 @@ class CounterButton(ReactComponent):
         """
 
     CounterButton().servable()
+    ```
     '''
 
     __abstract = True
diff --git a/panel/tests/test_custom.py b/panel/tests/test_custom.py
index 03ba2e27f9..45ef95e0ae 100644
--- a/panel/tests/test_custom.py
+++ b/panel/tests/test_custom.py
@@ -1,10 +1,49 @@
 import param
 
-from panel.custom import ReactiveESM
+from panel.custom import PyComponent, ReactiveESM
+from panel.layout import Row
 from panel.pane import Markdown
 from panel.viewable import Viewable
 
 
+class SimplePyComponent(PyComponent):
+
+    def __panel__(self):
+        return Row(1, 2, 3, height=42)
+
+
+def test_py_component_syncs(document, comm):
+    spy = SimplePyComponent(width=42)
+
+    spy.get_root(document, comm)
+
+    assert isinstance(spy._view__, Row)
+    assert spy._view__.width == 42
+    assert spy.height == 42
+
+    spy.width = 84
+
+    assert spy._view__.width == 84
+
+    spy._view__.width = 42
+
+    assert spy._view__.width == 42
+
+
+def test_py_component_cleanup(document, comm):
+    spy = SimplePyComponent(width=42)
+
+    model = spy.get_root(document, comm)
+
+    assert model.ref['id'] in spy._models
+    assert model.ref['id'] in spy._view__._models
+
+    spy._cleanup(model)
+
+    assert not spy._models
+    assert not spy._view__._models
+
+
 class ESMWithChildren(ReactiveESM):
 
     child = param.ClassSelector(class_=Viewable)
diff --git a/panel/widgets/base.py b/panel/widgets/base.py
index 0ecd04102a..0d75ad2465 100644
--- a/panel/widgets/base.py
+++ b/panel/widgets/base.py
@@ -251,7 +251,7 @@ def _get_model(
         parent: Optional[Model] = None, comm: Optional[Comm] = None
     ) -> Model:
         model = self._composite._get_model(doc, root, parent, comm)
-        root = root or model
+        root = model if root is None else root
         self._models[root.ref['id']] = (model, parent)
         return model
 

From e1e557eabbe01c9b7bde870a43f009dcb601a208 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 3 Sep 2024 12:10:03 +0200
Subject: [PATCH 036/164] Add --exclude argument to convert and skip vtk
 gallery examples (#7227)

---
 panel/command/convert.py | 18 +++++++++++++++++-
 pixi.toml                |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/panel/command/convert.py b/panel/command/convert.py
index 1af9e4309b..4ba0cfac38 100644
--- a/panel/command/convert.py
+++ b/panel/command/convert.py
@@ -25,6 +25,11 @@ class Convert(Subcommand):
             help    = "The app directories or scripts to serve (serve empty document if not specified)",
             default = None,
         )),
+        ('--exclude', dict(
+            nargs   = '*',
+            help    = "A list of files to exclude.",
+            default = None
+        )),
         ('--to', dict(
             action  = 'store',
             type    = str,
@@ -100,14 +105,25 @@ def invoke(self, args: argparse.Namespace) -> None:
             elif req.endswith('.json'):
                 with open(req, encoding='utf-8') as req_file:
                     requirements = json.load(req_file)
+
+        excluded = [pathlib.Path(e).absolute() for e in args.exclude] if args.exclude else []
+        included = []
+        for f in args.files:
+            p = pathlib.Path(f).absolute()
+            if not p.is_file():
+                raise ValueError('File {f!r} not found.')
+            elif p not in excluded:
+                included.append(p)
+
         prev_hashes = {}
         built = False
         while True:
-            hashes = {f: hash(open(f).read()) for f in args.files}
+            hashes = {f: hash(open(f).read()) for f in included}
             if hashes == prev_hashes:
                 time.sleep(0.5)
                 continue
             files = [f for f, h in hashes.items() if prev_hashes.get(f) != h]
+
             index = args.index and not built
             try:
                 convert_apps(
diff --git a/pixi.toml b/pixi.toml
index eb90e7ec52..94e55f7c1e 100644
--- a/pixi.toml
+++ b/pixi.toml
@@ -188,7 +188,7 @@ _docs-refmanual = 'python ./doc/generate_modules.py panel -d ./doc/api -n panel
 _docs-convert-gallery = 'python scripts/gallery/convert_gallery.py'
 _docs-generate = 'nbsite build --what=html --output=builtdocs --org holoviz --project-name panel'
 _docs-copy-panel-dist = 'cp -r ./panel/dist ./builtdocs/panel_dist'
-_docs-pyodide = 'panel convert examples/gallery/*.ipynb doc/how_to/*/examples/*.md --to pyodide-worker --out ./builtdocs/pyodide/ --pwa --index --requirements doc/pyodide_dependencies.json'
+_docs-pyodide = 'panel convert examples/gallery/*.ipynb doc/how_to/*/examples/*.md --to pyodide-worker --out ./builtdocs/pyodide/ --pwa --index --requirements doc/pyodide_dependencies.json --exclude examples/gallery/vtk*.ipynb'
 docs-server = 'python -m http.server 5500 --directory ./builtdocs'
 
 [feature.doc.tasks.docs-build]

From f4192ee3b324ce28c780f581f007689f7ba9a781 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 3 Sep 2024 12:14:41 +0200
Subject: [PATCH 037/164] Bump panel.js version to 1.5.0-rc.0

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index 948a319ddf..b1fa022780 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-b.8",
+  "version": "1.5.0-rc.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.0-b.8",
+      "version": "1.5.0-rc.0",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.5.1",
diff --git a/panel/package.json b/panel/package.json
index bfebaf6c85..f2b55dc692 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-b.8",
+  "version": "1.5.0-rc.0",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From 7ffa91a03280ec61e5e2acfc80eae571ec3d320f Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 5 Sep 2024 12:25:00 +0200
Subject: [PATCH 038/164] Documentation fixes for RC1 (#7228)

---
 .../custom_components/esm/custom_layout.md    |  3 +--
 .../reactive_html/reactive_html_layout.md     | 14 +++--------
 doc/how_to/editor/markdown.md                 |  1 +
 doc/how_to/extending_panel.md                 |  2 +-
 doc/how_to/integrations/FastAPI.md            |  2 ++
 doc/how_to/templates/template_theme.md        |  2 +-
 doc/pyodide_dependencies.json                 |  2 +-
 panel/io/convert.py                           |  4 +--
 panel/tests/test_docs.py                      | 25 +++++++++++++++++++
 9 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/doc/how_to/custom_components/esm/custom_layout.md b/doc/how_to/custom_components/esm/custom_layout.md
index 7e59bc9c4a..5add55d17d 100644
--- a/doc/how_to/custom_components/esm/custom_layout.md
+++ b/doc/how_to/custom_components/esm/custom_layout.md
@@ -244,6 +244,7 @@ split_anywidget = SplitAnyWidget(
 )
 split_anywidget.servable()
 ```
+:::
 
 ::::
 
@@ -264,8 +265,6 @@ split_react.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `Cod
 ```
 :::
 
-:::
-
 :::{tab-item} `AnyWidgetComponent`
 ```{pyodide}
 split_anywidget.right=pn.pane.Markdown("Hi. I'm a `Markdown` pane replacing the `CodeEditor` widget!", sizing_mode="stretch_both")
diff --git a/doc/how_to/custom_components/reactive_html/reactive_html_layout.md b/doc/how_to/custom_components/reactive_html/reactive_html_layout.md
index cabe791a24..e86a33cd84 100644
--- a/doc/how_to/custom_components/reactive_html/reactive_html_layout.md
+++ b/doc/how_to/custom_components/reactive_html/reactive_html_layout.md
@@ -182,10 +182,8 @@ The component will trigger a rerendering if you update the `List` value.
 
 You must
 
-- wrap the `{% for object in objects %}` loop in an HTML element with an `id`. Here it is wrapped
-with `<div id="container">...</div>`.
-- close all HTML tags! `<hr>` is valid HTML, but not valid with `ReactiveHTML`. You must close it
-as `<hr/>`.
+- wrap the `{% for object in objects %}` loop in an HTML element with an `id`. Here it is wrapped with `<div id="container">...</div>`.
+- close all HTML tags! `<hr>` is valid HTML, but not valid with `ReactiveHTML`. You must close it as `<hr/>`.
 
 You can optionally
 
@@ -232,11 +230,9 @@ You can now use `[...]` indexing and the `.append`, `.insert`, `pop`, ... method
 expect.
 
 :::{note}
-
 You must list `ListLike, ReactiveHTML` in exactly that order when you define the class! The other
 way around `ReactiveHTML, NamedListLike` will not work.
-
-::::
+:::
 
 ## Layout a dictionary
 
@@ -271,10 +267,6 @@ LayoutOfDict(object={
 ```
 
 :::{note}
-
-Please note
-
 - We can insert the `key` as a literal value only using `{{ key }}`. Inserting it as a template variable `${key}` will not work.
 - We must not give the HTML element containing `{{ key }}` an `id`. If we do, an exception will be raised.
-
 :::
diff --git a/doc/how_to/editor/markdown.md b/doc/how_to/editor/markdown.md
index 3dc4e9799a..a3e8ed3fa9 100644
--- a/doc/how_to/editor/markdown.md
+++ b/doc/how_to/editor/markdown.md
@@ -82,6 +82,7 @@ def hello_world(text):
 pn.Row(widget, pn.bind(hello_world, widget)).servable()
 ```
 ````
+:::
 
 Then, from the command line, launch a server with:
 
diff --git a/doc/how_to/extending_panel.md b/doc/how_to/extending_panel.md
index 97ea384f03..07224cacde 100644
--- a/doc/how_to/extending_panel.md
+++ b/doc/how_to/extending_panel.md
@@ -3,7 +3,7 @@
         <meta http-equiv='refresh' content='0; URL=./index.html#extending-panel>
     </head>
 
-# Test and debug
+# Extending Panel
 
 ```{toctree}
 :titlesonly:
diff --git a/doc/how_to/integrations/FastAPI.md b/doc/how_to/integrations/FastAPI.md
index ff97a96d68..d07f29be40 100644
--- a/doc/how_to/integrations/FastAPI.md
+++ b/doc/how_to/integrations/FastAPI.md
@@ -24,6 +24,8 @@ conda install fastapi
 ```
 :::
 
+::::
+
 ## Create a FastAPI application
 
 Start by creating a FastAPI application. In this application, we will define a root endpoint that returns a simple JSON response. Open your text editor or IDE and create a file named main.py:
diff --git a/doc/how_to/templates/template_theme.md b/doc/how_to/templates/template_theme.md
index 170d0c953b..d581100523 100644
--- a/doc/how_to/templates/template_theme.md
+++ b/doc/how_to/templates/template_theme.md
@@ -62,7 +62,7 @@ template.main.append(
 )
 template.servable();
 ```
-::::
+:::
 
 Now, we can activate this app on the command line:
 
diff --git a/doc/pyodide_dependencies.json b/doc/pyodide_dependencies.json
index 2752f1dacd..e2f724cb11 100644
--- a/doc/pyodide_dependencies.json
+++ b/doc/pyodide_dependencies.json
@@ -1,6 +1,6 @@
 {
   "gallery/altair_brushing.ipynb": ["altair"],
-  "gallery/gapminders.ipynb": ["altair", "plotly", "hvplot"],
+  "gallery/gapminders.ipynb": ["altair", "plotly", "hvplot", "matplotlib"],
   "gallery/glaciers.ipynb": ["holoviews", "colorcet", "hvplot"],
   "gallery/hvplot_explorer.ipynb": ["hvplot", "scipy"],
   "gallery/iris_kmeans.ipynb": ["hvplot", "scikit-learn"],
diff --git a/panel/io/convert.py b/panel/io/convert.py
index 18732bc0cd..ebe2412efc 100644
--- a/panel/io/convert.py
+++ b/panel/io/convert.py
@@ -548,7 +548,7 @@ def convert_apps(
     compiled: bool
         Whether to use the compiled and faster version of Pyodide.
     """
-    if isinstance(apps, str):
+    if isinstance(apps, (str, os.PathLike)):
         apps = [apps]
     if dest_path is None:
         dest_path = pathlib.Path('./')
@@ -563,7 +563,7 @@ def convert_apps(
         for app in apps:
             matches = [
                 deps for name, deps in requirements.items()
-                if app.endswith(name.replace(os.path.sep, '/'))
+                if str(app).endswith(name.replace(os.path.sep, '/'))
             ]
             app_requirements[app] = matches[0] if matches else 'auto'
     else:
diff --git a/panel/tests/test_docs.py b/panel/tests/test_docs.py
index 0b0d760323..5e5368de0f 100644
--- a/panel/tests/test_docs.py
+++ b/panel/tests/test_docs.py
@@ -139,3 +139,28 @@ def test_markdown_codeblocks(file, tmp_path):
         f.writelines(lines)
 
     runpy.run_path(str(mod))
+
+
+@doc_available
+@pytest.mark.parametrize(
+    "file", doc_files, ids=[str(f.relative_to(DOC_PATH)) for f in doc_files]
+)
+def test_colon_blocks_symmetric(file):
+    stack = []
+    for i, line in enumerate(file.read_text(encoding='utf-8').splitlines(), 1):
+        if ':::::' in line:
+            # Not checking triple nesting
+            stack.clear()
+            break
+        elif '::::' in line:
+            if stack:
+                assert stack[-1] == '::::', f'Expected ::: on line {i}, found ::::'
+                stack.pop()
+            else:
+                stack.append('::::')
+        elif ':::' in line:
+            if not stack or stack[-1] == '::::':
+                stack.append(':::')
+            else:
+                stack.pop()
+    assert not stack, 'Colon blocks were not symmetric, ensure all blocks were closed'

From d23dd3a8bef1fb4e7a208b358340b70084a7ca11 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 5 Sep 2024 12:25:59 +0200
Subject: [PATCH 039/164] Bump panel.js version to 1.5.0-rc.1

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index b1fa022780..1ea86b467e 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-rc.0",
+  "version": "1.5.0-rc.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.0-rc.0",
+      "version": "1.5.0-rc.1",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.5.1",
diff --git a/panel/package.json b/panel/package.json
index f2b55dc692..c19a84e0a3 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-rc.0",
+  "version": "1.5.0-rc.1",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From 4f1a2da5d5552f9da391fc258c02efc8ba7c7fac Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Sat, 7 Sep 2024 14:22:09 +0200
Subject: [PATCH 040/164] fix mypy issue (#7233)

---
 panel/io/cache.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/io/cache.py b/panel/io/cache.py
index 8a806b879c..af3bf5bb48 100644
--- a/panel/io/cache.py
+++ b/panel/io/cache.py
@@ -39,7 +39,7 @@
     _CallableT = TypeVar("_CallableT", bound=Callable)
 
     class _CachedFunc(Protocol[_CallableT]):
-        def clear(self, func_hashes: list[str | None]) -> None:
+        def clear(self, func_hashes: list[str | None]=[None]) -> None:
             pass
 
         __call__: _CallableT

From 1994285ed275ad7e143c3c0654f64d4ec76255b3 Mon Sep 17 00:00:00 2001
From: Coderambling <159031875+Coderambling@users.noreply.github.com>
Date: Sat, 7 Sep 2024 14:22:31 +0200
Subject: [PATCH 041/164] Update index.md to fix small typos (#7232)

Fix some typos
---
 doc/developer_guide/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/doc/developer_guide/index.md b/doc/developer_guide/index.md
index 2e5dad6006..3bfc482821 100644
--- a/doc/developer_guide/index.md
+++ b/doc/developer_guide/index.md
@@ -167,7 +167,7 @@ As Panel uses notebooks for much of the documentation, this will take significan
 
 A development version of Panel can be found [here](https://holoviz-dev.github.io/panel/). You can ask a maintainer if they want to make a dev release for your PR, but there is no guarantee they will say yes.
 
-To be able to run cells interactively you need `pyodide` server, this can be ran with:
+To be able to run cells interactively you need `pyodide` server, this can be run with:
 
 ```bash
 pixi run docs-server
@@ -175,7 +175,7 @@ pixi run docs-server
 
 ## Build
 
-Panel have four build tasks. One is for building packages for Pip, Conda, Pyodide, and NPM.
+Panel has four build tasks, for building packages for Pip, Conda, Pyodide, and NPM.
 
 ```bash
 pixi run build-pip

From aeadfe42d8f6fdee10b0d0b34c8bb1b2946bff78 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Sat, 7 Sep 2024 23:34:10 +0200
Subject: [PATCH 042/164] Refactor state.notifications to fix pyodide (#7235)

---
 panel/io/state.py | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/panel/io/state.py b/panel/io/state.py
index 71315b0e62..d4f1ba845e 100644
--- a/panel/io/state.py
+++ b/panel/io/state.py
@@ -1054,20 +1054,25 @@ def log_terminal(self):
 
     @property
     def notifications(self) -> NotificationArea | None:
-        from ..config import config
-        if config.notifications and self.curdoc and self.curdoc.session_context and self.curdoc not in self._notifications:
-            from .notifications import NotificationArea
-            js_events = {}
-            if config.ready_notification:
-                js_events['document_ready'] = {'type': 'success', 'message': config.ready_notification, 'duration': 3000}
-            if config.disconnect_notification:
-                js_events['connection_lost'] = {'type': 'error', 'message': config.disconnect_notification}
-            self._notifications[self.curdoc] = notifications = NotificationArea(js_events=js_events)
-            return notifications
-        elif self.curdoc is None or self.curdoc.session_context is None:
+        if self.curdoc is None:
             return self._notification
-        else:
-            return self._notifications.get(self.curdoc) if self.curdoc else None
+
+        is_session = (self.curdoc.session_context is not None or self._is_pyodide)
+        if self.curdoc in self._notifications:
+            return self._notifications[self.curdoc]
+
+        from panel.config import config
+        if not (config.notifications and is_session):
+            return None if is_session else self._notification
+
+        from panel.io.notifications import NotificationArea
+        js_events = {}
+        if config.ready_notification:
+            js_events['document_ready'] = {'type': 'success', 'message': config.ready_notification, 'duration': 3000}
+        if config.disconnect_notification:
+            js_events['connection_lost'] = {'type': 'error', 'message': config.disconnect_notification}
+        self._notifications[self.curdoc] = notifications = NotificationArea(js_events=js_events)
+        return notifications
 
     @property
     def refresh_token(self) -> str | None:

From 82610877cef9aab7be72bb2255a5337d5b94d29f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Mon, 9 Sep 2024 10:42:26 +0200
Subject: [PATCH 043/164] General maintenance  (#7238)

---
 .pre-commit-config.yaml |  6 +++---
 codecov.yml             | 10 ----------
 panel/pane/plotly.py    |  2 +-
 panel/widgets/tables.py |  4 ++--
 postBuild               |  2 --
 pyproject.toml          |  1 +
 6 files changed, 7 insertions(+), 18 deletions(-)
 delete mode 100644 codecov.yml
 delete mode 100644 postBuild

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index f9117578fa..49e563408c 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -17,7 +17,7 @@ repos:
         exclude: \.min\.js$
       - id: trailing-whitespace
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.5.0
+    rev: v0.6.4
     hooks:
       - id: ruff
         files: panel/
@@ -39,7 +39,7 @@ repos:
         additional_dependencies:
           - tomli
   - repo: https://github.com/hoxbro/prettier-pre-commit
-    rev: v3.3.2
+    rev: v3.3.3
     hooks:
       - id: prettier
         entry: prettier --write --ignore-unknown --no-error-on-unmatched-pattern
@@ -50,7 +50,7 @@ repos:
       - id: oxipng
         stages: [manual]
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.6.0
+    rev: v9.10.0
     hooks:
       - id: eslint
         args: ['-c', 'panel/.eslintrc.js', 'panel/*.ts', 'panel/models/**/*.ts', '--fix']
diff --git a/codecov.yml b/codecov.yml
deleted file mode 100644
index bec5dc77f5..0000000000
--- a/codecov.yml
+++ /dev/null
@@ -1,10 +0,0 @@
-coverage:
-  status:
-    patch: off
-    project:
-      default:
-        target: auto
-        threshold: 0.5%
-
-comment:
-  require_changes: true
diff --git a/panel/pane/plotly.py b/panel/pane/plotly.py
index a8a20f943b..f6dc968e67 100644
--- a/panel/pane/plotly.py
+++ b/panel/pane/plotly.py
@@ -227,7 +227,7 @@ def _update_data_sources(self, cds, trace):
             try:
                 old = cds.data.get(key)[0]
                 update_array = (
-                    (type(old) != type(new)) or
+                    (type(old) is not type(new)) or
                     (new.shape != old.shape) or
                     (new != old).any())
             except Exception:
diff --git a/panel/widgets/tables.py b/panel/widgets/tables.py
index e523bf9e50..7232f3736d 100644
--- a/panel/widgets/tables.py
+++ b/panel/widgets/tables.py
@@ -154,7 +154,7 @@ def _indexes_changed(self, old, new):
         have to reset various settings including expanded rows,
         scroll position, pagination etc.
         """
-        if type(old) != type(new) or isinstance(new, dict) or len(old) != len(new):
+        if type(old) is not type(new) or isinstance(new, dict) or len(old) != len(new):
             return True
         return (old.index != new.index).any()
 
@@ -443,7 +443,7 @@ def _filter_dataframe(self, df: pd.DataFrame) -> pd.DataFrame:
                 continue
             if isinstance(filt, (FunctionType, MethodType, partial)):
                 res = filt(df)
-                if type(res) == type(df): #function returned filtered dataframe
+                if type(res) is type(df): #function returned filtered dataframe
                     df = res
                 else: #assume boolean mask
                     filters.append(res)
diff --git a/postBuild b/postBuild
deleted file mode 100644
index 7847b91560..0000000000
--- a/postBuild
+++ /dev/null
@@ -1,2 +0,0 @@
-# this file is used by binder
-bokeh sampledata
diff --git a/pyproject.toml b/pyproject.toml
index 4fc78008d3..5350afcc61 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -205,6 +205,7 @@ write-changes = true
 addopts = "--pyargs --doctest-ignore-import-errors --color=yes"
 norecursedirs = "doc .git dist build _build .ipynb_checkpoints panel/examples"
 asyncio_mode = "auto"
+asyncio_default_fixture_loop_scope = "function"
 xfail_strict = true
 minversion = "7"
 log_cli_level = "INFO"

From 5164e83e605bfd98a292e9fb3d943759e40e969a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 9 Sep 2024 10:42:50 +0200
Subject: [PATCH 044/164] Bump twisted from 23.10.0 to 24.7.0 in
 /examples/apps/django_multi_apps (#7226)

---
 examples/apps/django_multi_apps/requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/apps/django_multi_apps/requirements.txt b/examples/apps/django_multi_apps/requirements.txt
index 621b7837fd..278eb3ed4b 100644
--- a/examples/apps/django_multi_apps/requirements.txt
+++ b/examples/apps/django_multi_apps/requirements.txt
@@ -40,6 +40,6 @@ service-identity==18.1.0
 six==1.13.0
 sqlparse==0.5.0
 tornado==6.4.1
-Twisted==23.10.0
+Twisted==24.7.0
 txaio==20.4.1
 zope.interface==4.7.1

From a13501de9b6ccb5479e9a4c4ad67a853380c7f15 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 9 Sep 2024 10:43:09 +0200
Subject: [PATCH 045/164] Bump cryptography in /examples/apps/django_multi_apps
 (#7229)

---
 examples/apps/django_multi_apps/requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/apps/django_multi_apps/requirements.txt b/examples/apps/django_multi_apps/requirements.txt
index 278eb3ed4b..796ea42098 100644
--- a/examples/apps/django_multi_apps/requirements.txt
+++ b/examples/apps/django_multi_apps/requirements.txt
@@ -8,7 +8,7 @@ cffi==1.13.2
 channels==2.4.0
 colorcet==2.0.5
 constantly==15.1.0
-cryptography==42.0.4
+cryptography==43.0.1
 daphne==2.4.1
 Django==3.2.25
 holoviews==1.13.2

From 2283d147adae3bb487fba9a11ee1f1b3a24c0e50 Mon Sep 17 00:00:00 2001
From: Coderambling <159031875+Coderambling@users.noreply.github.com>
Date: Mon, 9 Sep 2024 10:44:29 +0200
Subject: [PATCH 046/164] Update FileInput.ipynb to add ref to FileDropper for
 uploading large files  (#7215)

---
 examples/reference/widgets/FileInput.ipynb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/reference/widgets/FileInput.ipynb b/examples/reference/widgets/FileInput.ipynb
index 0467dd802a..b1b39b98b6 100644
--- a/examples/reference/widgets/FileInput.ipynb
+++ b/examples/reference/widgets/FileInput.ipynb
@@ -15,7 +15,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "The ``FileInput`` widget allows uploading one or more file from the frontend and makes the filename, file data and [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) available in Python. To upload large files, use the ``FileDropper`` widget.\n",
+    "The ``FileInput`` widget allows uploading one or more files from the frontend and makes the filename, file data and [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) available in Python. To upload large files, use the ``FileDropper`` widget.\n",
     "\n",
     "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
     "\n",

From 0b2f2c2bba315a45bfefb5582bf92359f3b90feb Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 9 Sep 2024 12:00:17 +0200
Subject: [PATCH 047/164] Handle setting None value on DateRangePicker (#7240)

---
 panel/widgets/input.py | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/panel/widgets/input.py b/panel/widgets/input.py
index d8addf1620..b088a3dfa9 100644
--- a/panel/widgets/input.py
+++ b/panel/widgets/input.py
@@ -607,8 +607,11 @@ def _process_property_change(self, msg):
 
     def _process_param_change(self, msg):
         msg = super()._process_param_change(msg)
-        if 'value' in msg:
-            msg['value'] = tuple(self._convert_date_to_string(v) for v in msg['value'])
+        if 'value' in msg and msg['value'] is not None:
+            msg['value'] = tuple(
+                v if v is None else self._convert_date_to_string(v)
+                for v in msg['value']
+            )
         if 'min_date' in msg:
             msg['min_date'] = self._convert_date_to_string(msg['min_date'])
         if 'max_date' in msg:

From 0453e9cf00c1a22fff7a2b916e20d80a8130f79b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Mon, 9 Sep 2024 14:24:20 +0200
Subject: [PATCH 048/164] Add header_tooltips parameter to Tabulator (#7241)

---
 examples/reference/widgets/Tabulator.ipynb |  1 +
 panel/tests/ui/widgets/test_tabulator.py   | 15 +++++++++++++++
 panel/tests/widgets/test_tables.py         | 10 ++++++++++
 panel/widgets/tables.py                    | 15 +++++++++++++--
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/examples/reference/widgets/Tabulator.ipynb b/examples/reference/widgets/Tabulator.ipynb
index 206f252fbe..5d29793032 100644
--- a/examples/reference/widgets/Tabulator.ipynb
+++ b/examples/reference/widgets/Tabulator.ipynb
@@ -47,6 +47,7 @@
     "* **`groupby`** (`list`): Groups rows in the table by one or more columns.\n",
     "* **`header_align`** (`dict` or `str`): A mapping from column name to header alignment or a fixed header alignment, which should be one of `'left'`, `'center'`, `'right'`.\n",
     "* **`header_filters`** (`boolean`/`dict`): A boolean enabling filters in the column headers or a dictionary providing filter definitions for specific columns.\n",
+    "* **`header_tooltips`** (`dict`): Dictionary mapping from column name to a tooltip to show when hovering over the column header. \n",
     "* **`hidden_columns`** (`list`): List of columns to hide.\n",
     "* **`hierarchical`** (boolean, default=False): Whether to render multi-indexes as hierarchical index (note hierarchical must be enabled during instantiation and cannot be modified later)\n",
     "* **`initial_page_size`** (`int`, `default=20`): If pagination is enabled and `page_size` this determines the initial size of each page before rendering.\n",
diff --git a/panel/tests/ui/widgets/test_tabulator.py b/panel/tests/ui/widgets/test_tabulator.py
index 886975969a..4ba7cc8bde 100644
--- a/panel/tests/ui/widgets/test_tabulator.py
+++ b/panel/tests/ui/widgets/test_tabulator.py
@@ -3954,3 +3954,18 @@ def test_filtering_all(self, page):
             self.set_filtering(page, n)
             self.check_selected(page, list(range(10)), 0)
             expect(page.locator('.tabulator')).to_have_count(1)
+
+
+def test_tabulator_header_tooltips(page):
+    df = pd.DataFrame({"header": [True, False, True]})
+    widget = Tabulator(df, header_tooltips={"header": "Test"})
+
+    serve_component(page, widget)
+
+    header = page.locator('.tabulator-col-title', has_text="header")
+    expect(header).to_have_count(1)
+    header.hover()
+
+    page.wait_for_timeout(200)
+
+    expect(page.locator('.tabulator-tooltip')).to_have_text("Test")
diff --git a/panel/tests/widgets/test_tables.py b/panel/tests/widgets/test_tables.py
index 050acf1824..88af3e4905 100644
--- a/panel/tests/widgets/test_tables.py
+++ b/panel/tests/widgets/test_tables.py
@@ -2597,3 +2597,13 @@ def test_selection_cleared_remote_pagination_new_values(document, comm):
 
     table.value = df.copy()
     assert table.selection == []
+
+
+def test_save_user_columns_configuration(document, comm):
+    df = pd.DataFrame({"header": [True, False, True]})
+    configuration={"columns": [{"field": "header", "headerTooltip": True}]}
+    tabulator = Tabulator(df, configuration=configuration, show_index=False)
+
+    expected = [{'field': 'header', 'sorter': 'boolean', 'headerTooltip': True}]
+    model = tabulator.get_root(document, comm)
+    assert model.configuration["columns"] == expected
diff --git a/panel/widgets/tables.py b/panel/widgets/tables.py
index 7232f3736d..4641d8f97d 100644
--- a/panel/widgets/tables.py
+++ b/panel/widgets/tables.py
@@ -1129,6 +1129,10 @@ class Tabulator(BaseTable):
         Whether to enable filters in the header or dictionary
         configuring filters for each column.""")
 
+    header_tooltips = param.Dict(default={}, doc="""
+        Dictionary mapping from column name to a tooltip to show when
+        hovering over the column header.""")
+
     hidden_columns = param.List(default=[], nested_refs=True, doc="""
         List of columns to hide.""")
 
@@ -1220,7 +1224,7 @@ class Tabulator(BaseTable):
     _rename: ClassVar[Mapping[str, str | None]] = {
         'selection': None, 'row_content': None, 'row_height': None,
         'text_align': None, 'embed_content': None, 'header_align': None,
-        'header_filters': None, 'styles': 'cell_styles',
+        'header_filters': None, 'header_tooltips': None, 'styles': 'cell_styles',
         'title_formatters': None, 'sortable': None, 'initial_page_size': None
     }
 
@@ -1985,6 +1989,9 @@ def _config_columns(self, column_objs: list[TableColumn]) -> list[dict[str, Any]
                 col_dict['width'] = self.widths[field]
             col_dict.update(self._get_filter_spec(column))
 
+            if field in self.header_tooltips:
+                col_dict["headerTooltip"] = self.header_tooltips[field]
+
             if isinstance(index, tuple):
                 if columns:
                     children = columns
@@ -2029,7 +2036,11 @@ def _get_configuration(self, columns: list[dict[str, Any]]) -> dict[str, Any]:
         if self.groups and 'columns' in configuration:
             raise ValueError("Groups must be defined either explicitly "
                              "or via the configuration, not both.")
-        configuration['columns'] = self._config_columns(columns)
+        user_columns = {v["field"]: v for v in configuration.get('columns', {})}
+        configuration["columns"] = self._config_columns(columns)
+        for idx, col in enumerate(columns):
+            if (name := col.field) in user_columns:
+                configuration["columns"][idx] |= user_columns[name]
         configuration['dataTree'] = self.hierarchical
         if self.sizing_mode in ('stretch_height', 'stretch_both'):
             configuration['maxHeight'] = '100%'

From 47b23b785a82d1ed18a570f53d27efc565cb746d Mon Sep 17 00:00:00 2001
From: Dheepak Krishnamurthy <1813121+kdheepak@users.noreply.github.com>
Date: Tue, 10 Sep 2024 13:26:30 -0400
Subject: [PATCH 049/164] docs: Fix broken link in callbacks.md (#7249)

---
 doc/explanation/api/callbacks.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/explanation/api/callbacks.md b/doc/explanation/api/callbacks.md
index f7d3c75233..ecb10a2fd9 100644
--- a/doc/explanation/api/callbacks.md
+++ b/doc/explanation/api/callbacks.md
@@ -2,7 +2,7 @@
 
 The callback API in Panel is the lowest-level approach, affording the greatest amount of flexibility but also quickly growing in complexity because each new interactive behavior requires additional callbacks that can interact in complex ways. Nonetheless, callbacks are important to know about, and can often be used to complement the other approaches. For instance, one specific callback could be used in addition to the more reactive approaches the other APIs provide.
 
-For more details on defining callbacks see the [linking how-to guides](../how_to/links/index.md).
+For more details on defining callbacks see the [linking how-to guides](../../how_to/links/index.md).
 
 ## Pros:
 

From 58029cefc50a6641526f8ef4b6e0308e8706e225 Mon Sep 17 00:00:00 2001
From: Dheepak Krishnamurthy <1813121+kdheepak@users.noreply.github.com>
Date: Tue, 10 Sep 2024 13:27:11 -0400
Subject: [PATCH 050/164] docs: Fix broken links (#7244)

---
 doc/how_to/custom_components/custom_viewer.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/how_to/custom_components/custom_viewer.md b/doc/how_to/custom_components/custom_viewer.md
index 5138bfe463..4fbdc94230 100644
--- a/doc/how_to/custom_components/custom_viewer.md
+++ b/doc/how_to/custom_components/custom_viewer.md
@@ -114,4 +114,4 @@ pn.Column(
 
 ## Related Resources
 
-- To create custom components from scratch, check out [How To > Build Components from Scratch](./custom_reactiveHTML.md) and read the associated [Explanation > Building Custom Components](../../explanation/components/components_custom.md) for further explanation.
+- To create custom components from scratch, check out [How To > Build Components from Scratch](./reactive_html/reactive_html_widgets.md) and read the associated [Explanation > Building Custom Components](../../explanation/components/reactive_html_components.md) for further explanation.

From 0f8332eb60ab78bdaa3dfdf8a38ff195a1b70c25 Mon Sep 17 00:00:00 2001
From: Dheepak Krishnamurthy <1813121+kdheepak@users.noreply.github.com>
Date: Tue, 10 Sep 2024 13:27:36 -0400
Subject: [PATCH 051/164] docs: Update parameterized.md (#7243)

---
 doc/explanation/api/parameterized.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/explanation/api/parameterized.md b/doc/explanation/api/parameterized.md
index 73aca01d3c..0e6df81915 100644
--- a/doc/explanation/api/parameterized.md
+++ b/doc/explanation/api/parameterized.md
@@ -2,7 +2,7 @@
 
 The [Param](http://param.holoviz.org) library allows expressing the parameters of a class (or a hierarchy of classes) completely independently of a GUI implementation. Panel and other libraries can then take those parameter declarations and turn them into a GUI to control the parameters. This approach allows the parameters controlling some computation to be captured specifically and explicitly (but as abstract parameters, not as widgets). Then thanks to the `@param.depends` decorator (similar to `@panel.depends` but for use in Parameterized classes without any dependency on Panel), it is then possible to directly express the dependencies between the parameters and the computation defined in some method on the class, all without ever importing Panel or any other GUI library. The resulting objects can then be used in both GUI and non-GUI contexts (batch computations, scripts, servers).
 
-The parameterized approach is a powerful way to encapsulate computation in self-contained classes, taking advantage of object-oriented programming patterns. It also makes it possible to express a problem completely independently from Panel or any other GUI code, while still getting a GUI for free as a last step. For more detail on using this approach see the [how-to guides on declarative UIs with Param](../how_to/param/index.md).
+The parameterized approach is a powerful way to encapsulate computation in self-contained classes, taking advantage of object-oriented programming patterns. It also makes it possible to express a problem completely independently from Panel or any other GUI code, while still getting a GUI for free as a last step. For more detail on using this approach see the [how-to guides on declarative UIs with Param](../../how_to/param/index.md).
 
 ## Pros:
 

From 2b0b90edc9a6848c552fb3b1590afbfa02d6410f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Tue, 10 Sep 2024 19:28:14 +0200
Subject: [PATCH 052/164] Don't force conversion if dtype is object (#7242)

* Don't force conversion if dtype is object

* Add unit test
---
 panel/tests/widgets/test_tables.py | 9 +++++++++
 panel/widgets/tables.py            | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/panel/tests/widgets/test_tables.py b/panel/tests/widgets/test_tables.py
index 88af3e4905..44d3baf3cd 100644
--- a/panel/tests/widgets/test_tables.py
+++ b/panel/tests/widgets/test_tables.py
@@ -2607,3 +2607,12 @@ def test_save_user_columns_configuration(document, comm):
     expected = [{'field': 'header', 'sorter': 'boolean', 'headerTooltip': True}]
     model = tabulator.get_root(document, comm)
     assert model.configuration["columns"] == expected
+
+def test_header_filters_categorial_dtype():
+    # Test for https://github.com/holoviz/panel/issues/7234
+    df = pd.DataFrame({'model': ['A', 'B', 'C', 'D', 'E']})
+    df['model'] = df['model'].astype('category')
+
+    widget = Tabulator(df, header_filters=True)
+    widget.filters = [{'field': 'model', 'type': 'like', 'value': 'A'}]
+    assert widget.current_view.size == 1
diff --git a/panel/widgets/tables.py b/panel/widgets/tables.py
index 4641d8f97d..ea8b7b9af3 100644
--- a/panel/widgets/tables.py
+++ b/panel/widgets/tables.py
@@ -513,7 +513,8 @@ def _get_header_filters(self, df):
                 elif not val:
                     continue
 
-            val = col.dtype.type(val)
+            if col.dtype.kind != 'O':
+                val = col.dtype.type(val)
             if op == '=':
                 filters.append(col == val)
             elif op == '!=':

From c63e06e80450fadc49aa66363a1b024a174db9fb Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Wed, 11 Sep 2024 18:57:57 +0200
Subject: [PATCH 053/164] Fix sending and receiving of events from ESM
 components (#7257)

---
 .../custom_components/JSComponent.ipynb       | 50 ++++++++++------
 .../custom_components/ReactComponent.ipynb    | 59 ++++++++++--------
 panel/custom.py                               | 60 ++++++++++++++++---
 panel/models/esm.py                           |  9 ++-
 panel/models/reactive_esm.ts                  | 30 +++++++---
 panel/tests/ui/test_custom.py                 | 49 +++++++++++++++
 6 files changed, 195 insertions(+), 62 deletions(-)

diff --git a/examples/reference/custom_components/JSComponent.ipynb b/examples/reference/custom_components/JSComponent.ipynb
index fcbdc4eb67..f41b564309 100644
--- a/examples/reference/custom_components/JSComponent.ipynb
+++ b/examples/reference/custom_components/JSComponent.ipynb
@@ -3,7 +3,7 @@
   {
    "cell_type": "code",
    "execution_count": null,
-   "id": "e888ffe5-e558-4ae2-b7c0-b52804eb8ce2",
+   "id": "b94295e3-3bbc-478f-a6eb-a5550e524573",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -102,9 +102,22 @@
     "- `.on('<parameter>', callback)`: Allows registering an event handler for a single parameter.\n",
     "- `.on(['<parameter>', ...], callback)`: Allows adding an event handler for multiple parameters at once.\n",
     "- `.on('change:<parameter>', callback)`: The `change:` prefix allows disambiguating change events from lifecycle hooks should a parameter name and lifecycle hook overlap.\n",
+    "- \n",
     "\n",
     "The `change:` prefix allows disambiguating change events from lifecycle hooks should a parameter name and lifecycle hook overlap.\n",
     "\n",
+    "#### Bidirectional Events\n",
+    "\n",
+    "##### JS -> Python\n",
+    "\n",
+    "- `.send_event('<name>', DOMEvent)`: Allows sending browser `DOMEvent` to Python and associating it with a name. An event handler can be registered by name with the `.on_event` method or by implementing a `_handle_<name>` method on the class.\n",
+    "- `.send_msg(data)`: Allows sending arbitrary data to Python. An event handler can be registered with the `.on_msg(callback)` method on the Python component or by implementing a `_handle_msg` method on the class.\n",
+    "\n",
+    "##### Python -> JS\n",
+    "\n",
+    "- `._send_event(ESMEvent, data=msg)`: Allows sending arbitrary data to the frontend, which can be observed by registering a handler with `.on('msg:custom', callback)`.\n",
+    "\n",
+    "\n",
     "#### Lifecycle Hooks\n",
     "\n",
     "- `.on('after_layout', callback)`: Called whenever the layout around the component is changed.\n",
@@ -207,12 +220,13 @@
     "    \"\"\"\n",
     "\n",
     "    def _handle_click(self, event):\n",
-    "        self.value = str(event.__dict__)\n",
+    "        self.value = event.data\n",
     "\n",
     "button = EventExample()\n",
-    "pn.Column(\n",
-    "    button, pn.widgets.TextAreaInput(value=button.param.value, height=200),\n",
-    ").servable()\n"
+    "\n",
+    "event_json = pn.pane.JSON(button.param.value)\n",
+    "\n",
+    "pn.Column(button, event_json)"
    ]
   },
   {
@@ -220,7 +234,7 @@
    "id": "4979e5b0-7caa-4ffd-a8bd-40680e048935",
    "metadata": {},
    "source": [
-    "You can also define and send your own custom events:"
+    "You can also define and send arbitrary data using the `.send_msg()` API and by implementing a `_handle_msg` method on the component:"
    ]
   },
   {
@@ -248,22 +262,20 @@
     "      btn.innerHTML = `Click Me`;\n",
     "      btn.onclick = (event) => {\n",
     "        const currentDate = new Date();\n",
-    "        const custom_event = new CustomEvent(\"click\", { detail: currentDate.getTime() });\n",
-    "        model.send_event('click', custom_event)\n",
+    "        model.send_msg(currentDate.getTime())\n",
     "      }\n",
     "      return btn\n",
     "    }\n",
     "    \"\"\"\n",
     "\n",
-    "    def _handle_click(self, event):\n",
-    "        unix_timestamp = event.data[\"detail\"]/1000\n",
+    "    def _handle_msg(self, msg):\n",
+    "        unix_timestamp = msg/1000\n",
     "        python_datetime = datetime.datetime.fromtimestamp(unix_timestamp)\n",
     "        self.value = str(python_datetime)\n",
     "\n",
     "button = CustomEventExample()\n",
-    "pn.Column(\n",
-    "    button, button.param.value,\n",
-    ").servable()\n"
+    "\n",
+    "pn.Column(button, button.param.value)"
    ]
   },
   {
@@ -303,7 +315,7 @@
     "    }\n",
     "    \"\"\"\n",
     "\n",
-    "ConfettiButton().servable()"
+    "ConfettiButton()"
    ]
   },
   {
@@ -346,7 +358,7 @@
     "    }\n",
     "    \"\"\"\n",
     "\n",
-    "ConfettiButton().servable()"
+    "ConfettiButton()"
    ]
   },
   {
@@ -455,7 +467,7 @@
     "      return button\n",
     "    }\"\"\"\n",
     "\n",
-    "Example(child=pn.panel(\"A **Markdown** pane!\")).servable()"
+    "Example(child=pn.panel(\"A **Markdown** pane!\"))"
    ]
   },
   {
@@ -473,7 +485,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "Example(child=\"A **Markdown** pane!\").servable()"
+    "Example(child=\"A **Markdown** pane!\")"
    ]
   },
   {
@@ -506,7 +518,7 @@
     "      return button\n",
     "    }\"\"\"\n",
     "\n",
-    "Example(child=pn.panel(\"A **Markdown** pane!\")).servable()"
+    "Example(child=pn.panel(\"A **Markdown** pane!\"))"
    ]
   },
   {
@@ -557,7 +569,7 @@
     "\n",
     "Example(\n",
     "    objects=[pn.panel(\"A **Markdown** pane!\"), pn.widgets.Button(name=\"Click me!\"), {\"text\": \"I'm shown as a JSON Pane\"}]\n",
-    ").servable()\n"
+    ")"
    ]
   },
   {
diff --git a/examples/reference/custom_components/ReactComponent.ipynb b/examples/reference/custom_components/ReactComponent.ipynb
index f774dd8e0c..3f16f87a19 100644
--- a/examples/reference/custom_components/ReactComponent.ipynb
+++ b/examples/reference/custom_components/ReactComponent.ipynb
@@ -48,7 +48,7 @@
     "    }\n",
     "    \"\"\"\n",
     "\n",
-    "CounterButton().servable()"
+    "CounterButton()"
    ]
   },
   {
@@ -109,6 +109,17 @@
     "\n",
     "The `change:` prefix allows disambiguating change events from lifecycle hooks should a parameter name and lifecycle hook overlap.\n",
     "\n",
+    "#### Bidirectional Events\n",
+    "\n",
+    "##### JS -> Python\n",
+    "\n",
+    "- `.send_event('<name>', DOMEvent)`: Allows sending browser `DOMEvent` to Python and associating it with a name. An event handler can be registered by name with the `.on_event` method or by implementing a `_handle_<name>` method on the class.\n",
+    "- `.send_msg(data)`: Allows sending arbitrary data to Python. An event handler can be registered with the `.on_msg(callback)` method on the Python component or by implementing a `_handle_msg` method on the class.\n",
+    "\n",
+    "##### Python -> JS\n",
+    "\n",
+    "- `._send_event(ESMEvent, data=msg)`: Allows sending arbitrary data to the frontend, which can be observed by registering a handler with `.on('msg:custom', callback)`.\n",
+    "\n",
     "#### Lifecycle Hooks\n",
     "\n",
     "- `.on('after_layout', callback)`: Called whenever the layout around the component is changed.\n",
@@ -168,7 +179,7 @@
     "    }\n",
     "    \"\"\"\n",
     "\n",
-    "CounterButton().servable()"
+    "CounterButton()"
    ]
   },
   {
@@ -210,12 +221,12 @@
     "    \"\"\"\n",
     "\n",
     "    def _handle_click(self, event):\n",
-    "       self.value = str(event.__dict__)\n",
+    "        self.value = event.data\n",
     "\n",
     "button = EventExample()\n",
-    "pn.Column(\n",
-    "    button, pn.widgets.TextAreaInput(value=button.param.value, height=200),\n",
-    ").servable()"
+    "event_json = pn.pane.JSON(button.param.value)\n",
+    "\n",
+    "pn.Column(button, event_json)"
    ]
   },
   {
@@ -223,7 +234,7 @@
    "id": "39dfcddb-09ab-4f87-816a-7a2c83b86ff4",
    "metadata": {},
    "source": [
-    "You can also define and send your own custom events:"
+    "You can also define and send arbitrary data using the `.send_msg()` API and by implementing a `_handle_msg` method on the component:"
    ]
   },
   {
@@ -248,8 +259,7 @@
     "    _esm = \"\"\"\n",
     "    function send_event(model) {\n",
     "      const currentDate = new Date();\n",
-    "      const custom_event = new CustomEvent(\"click\", { detail: currentDate.getTime() });\n",
-    "      model.send_event('click', custom_event)\n",
+    "      model.send_msg(currentDate.getTime())\n",
     "    }\n",
     "\n",
     "    export function render({ model }) {\n",
@@ -261,15 +271,14 @@
     "    }\n",
     "    \"\"\"\n",
     "\n",
-    "    def _handle_click(self, event):\n",
-    "        unix_timestamp = event.data[\"detail\"]/1000\n",
+    "    def _handle_msg(self, msg):\n",
+    "        unix_timestamp = msg/1000\n",
     "        python_datetime = datetime.datetime.fromtimestamp(unix_timestamp)\n",
     "        self.value = str(python_datetime)\n",
     "\n",
     "button = CustomEventExample()\n",
-    "pn.Column(\n",
-    "    button, button.param.value,\n",
-    ").servable()"
+    "\n",
+    "pn.Column(button, button.param.value)"
    ]
   },
   {
@@ -308,7 +317,7 @@
     "    }\n",
     "    \"\"\"\n",
     "\n",
-    "ConfettiButton().servable()"
+    "ConfettiButton()"
    ]
   },
   {
@@ -350,7 +359,7 @@
     "    }\n",
     "    \"\"\"\n",
     "\n",
-    "ConfettiButton().servable()"
+    "ConfettiButton()"
    ]
   },
   {
@@ -455,7 +464,7 @@
     "    }\n",
     "    \"\"\"\n",
     "\n",
-    "Example(child=pn.panel(\"A **Markdown** pane!\")).servable()"
+    "Example(child=pn.panel(\"A **Markdown** pane!\"))"
    ]
   },
   {
@@ -473,7 +482,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "Example(child=\"A **Markdown** pane!\").servable()"
+    "Example(child=\"A **Markdown** pane!\")"
    ]
   },
   {
@@ -505,7 +514,7 @@
     "    }\n",
     "    \"\"\"\n",
     "\n",
-    "Example(child=pn.panel(\"A **Markdown** pane!\")).servable()"
+    "Example(child=pn.panel(\"A **Markdown** pane!\"))"
    ]
   },
   {
@@ -552,8 +561,12 @@
     "\n",
     "\n",
     "Example(\n",
-    "    objects=[pn.panel(\"A **Markdown** pane!\"), pn.widgets.Button(name=\"Click me!\"), {\"text\": \"I'm shown as a JSON Pane\"}]\n",
-    ").servable()"
+    "    objects=[\n",
+    "        pn.panel(\"A **Markdown** pane!\"),\n",
+    "        pn.widgets.Button(name=\"Click me!\"),\n",
+    "        {\"text\": \"I'm shown as a JSON Pane\"}\n",
+    "    ]\n",
+    ")"
    ]
   },
   {
@@ -581,8 +594,6 @@
     "\n",
     "from panel.custom import ReactComponent\n",
     "\n",
-    "pn.extension()\n",
-    "\n",
     "class CounterButton(ReactComponent):\n",
     "\n",
     "    _esm = \"\"\"\n",
@@ -598,7 +609,7 @@
     "    }\n",
     "    \"\"\"\n",
     "\n",
-    "CounterButton().servable()"
+    "CounterButton()"
    ]
   },
   {
diff --git a/panel/custom.py b/panel/custom.py
index 50a0043cb6..8b8ed4bbbe 100644
--- a/panel/custom.py
+++ b/panel/custom.py
@@ -9,6 +9,7 @@
 import textwrap
 
 from collections import defaultdict
+from functools import partial
 from typing import (
     TYPE_CHECKING, Any, Callable, ClassVar, Literal, Mapping, Optional,
 )
@@ -24,7 +25,7 @@
     AnyWidgetComponent as _BkAnyWidgetComponent,
     ReactComponent as _BkReactComponent, ReactiveESM as _BkReactiveESM,
 )
-from .models.esm import ESMEvent
+from .models.esm import DataEvent, ESMEvent
 from .models.reactive_html import DOMEvent
 from .pane.base import PaneBase  # noqa
 from .reactive import (  # noqa
@@ -202,7 +203,8 @@ class CounterButton(pn.ReactiveESM):
     def __init__(self, **params):
         super().__init__(**params)
         self._watching_esm = False
-        self._event_callbacks = defaultdict(list)
+        self._event__callbacks = defaultdict(list)
+        self._msg__callbacks = []
 
     @classproperty
     def _bundle_path(cls) -> os.PathLike | None:
@@ -392,17 +394,22 @@ def _get_model(
         model.children = list(children)
         self._models[root.ref['id']] = (model, parent)
         self._link_props(model.data, self._linked_properties, doc, root, comm)
-        self._register_events('dom_event', model=model, doc=doc, comm=comm)
+        self._register_events('dom_event', 'data_event', model=model, doc=doc, comm=comm)
         self._setup_autoreload()
         return model
 
     def _process_event(self, event: 'Event') -> None:
-        if not isinstance(event, DOMEvent):
+        if isinstance(event, DataEvent):
+            for cb in self._msg__callbacks:
+                state.execute(partial(cb, event), schedule=False)
+            state.execute(partial(self._handle_msg, event.data), schedule=False)
+            return
+        elif not isinstance(event, DOMEvent):
             return
         if hasattr(self, f'_handle_{event.node}'):
             getattr(self, f'_handle_{event.node}')(event)
-        for cb in self._event_callbacks.get(event.node, []):
-            cb(event)
+        for cb in self._event__callbacks.get(event.node, []):
+            state.execute(partial(cb, event), schedule=False)
 
     def _update_model(
         self, events: dict[str, param.parameterized.Event], msg: dict[str, Any],
@@ -432,6 +439,43 @@ def _update_model(
         self._set_on_model(model_msg, root, model)
         self._set_on_model(data_msg, root, model.data)
 
+    def _handle_msg(self, data: any) -> None:
+        """
+        Message handler for messages sent from the frontend using the
+        `model.send_msg` API.
+
+        Arguments
+        ---------
+        data: any
+            Data received from the frontend.
+        """
+
+    def _send_msg(self, data: any) -> None:
+        """
+        Sends data to the frontend which can be observed on the frontend
+        with the `model.on_msg("msg:custom", callback)` API.
+
+        Arguments
+        ---------
+        data: any
+            Data to send to the frontend.
+        """
+        self._send_event(ESMEvent, data=data)
+
+    def on_msg(self, callback: Callable) -> None:
+        """
+        Registers a callback to be executed when a message event
+        containing arbitrary data is received.
+
+        Arguments
+        ---------
+        event: str
+          Name of the DOM event to add an event listener to.
+        callback: callable
+          A callable which will be given the msg data.
+        """
+        self._msg__callbacks.append(callback)
+
     def on_event(self, event: str, callback: Callable) -> None:
         """
         Registers a callback to be executed when the specified DOM
@@ -444,7 +488,7 @@ def on_event(self, event: str, callback: Callable) -> None:
         callback: callable
           A callable which will be given the DOMEvent object.
         """
-        self._event_callbacks[event].append(callback)
+        self._event__callbacks[event].append(callback)
 
 
 class JSComponent(ReactiveESM):
@@ -606,4 +650,4 @@ def send(self, msg: dict):
         ---------
         msg: dict
         """
-        self._send_event(ESMEvent, data=msg)
+        self._send_msg(msg)
diff --git a/panel/models/esm.py b/panel/models/esm.py
index 2bdfad0752..9acc1af200 100644
--- a/panel/models/esm.py
+++ b/panel/models/esm.py
@@ -13,9 +13,9 @@
 from .layout import HTMLBox
 
 
-class ESMEvent(ModelEvent):
+class DataEvent(ModelEvent):
 
-    event_name = 'esm_event'
+    event_name = 'data_event'
 
     def __init__(self, model, data=None):
         self.data = data
@@ -25,6 +25,11 @@ def event_values(self) -> dict[str, Any]:
         return dict(super().event_values(), data=self.data)
 
 
+class ESMEvent(DataEvent):
+
+    event_name = 'esm_event'
+
+
 class ReactiveESM(HTMLBox):
 
     bundle = bp.Nullable(bp.String)
diff --git a/panel/models/reactive_esm.ts b/panel/models/reactive_esm.ts
index 11cc5b7bfe..b0a6698007 100644
--- a/panel/models/reactive_esm.ts
+++ b/panel/models/reactive_esm.ts
@@ -19,21 +19,29 @@ import error_css from "styles/models/esm.css"
 
 const MODULE_CACHE = new Map()
 
-@server_event("esm_event")
-export class ESMEvent extends ModelEvent {
-  constructor(readonly model: ReactiveESM, readonly data: any) {
+export class DataEvent extends ModelEvent {
+
+  constructor(readonly data: unknown) {
     super()
-    this.data = data
-    this.origin = model
   }
 
   protected override get event_values(): Attrs {
     return {model: this.origin, data: this.data}
   }
 
+  static {
+    this.prototype.event_name = "data_event"
+  }
+}
+
+@server_event("esm_event")
+export class ESMEvent extends DataEvent {
+
   static override from_values(values: object) {
     const {model, data} = values as {model: ReactiveESM, data: any}
-    return new ESMEvent(model, data)
+    const event = new ESMEvent(data)
+    event.origin = model
+    return event
   }
 }
 
@@ -56,6 +64,10 @@ export function model_getter(target: ReactiveESMView, name: string) {
       }
       return null
     }
+  } else if (name === "send_msg") {
+    return (data: any) => {
+      model.trigger_event(new DataEvent(data))
+    }
   } else if (name === "send_event") {
     return (name: string, event: Event) => {
       const serialized = convertUndefined(serializeEvent(event))
@@ -161,7 +173,7 @@ export class ReactiveESMView extends HTMLBoxView {
   _changing: boolean = false
   _child_callbacks: Map<string, ((new_views: UIElementView[]) => void)[]>
   _child_rendered: Map<UIElementView, boolean> = new Map()
-  _event_handlers: ((event: ESMEvent) => void)[] = []
+  _event_handlers: ((data: unknown) => void)[] = []
   _lifecycle_handlers: Map<string, (() => void)[]> =  new Map([
     ["after_layout", []],
     ["after_render", []],
@@ -220,11 +232,11 @@ export class ReactiveESMView extends HTMLBoxView {
     this.model.disconnect_watchers(this)
   }
 
-  on_event(callback: (event: ESMEvent) => void): void {
+  on_event(callback: (data: unknown) => void): void {
     this._event_handlers.push(callback)
   }
 
-  remove_on_event(callback: (event: ESMEvent) => void): boolean {
+  remove_on_event(callback: (data: unknown) => void): boolean {
     if (this._event_handlers.includes(callback)) {
       this._event_handlers = this._event_handlers.filter((item) => item !== callback)
       return true
diff --git a/panel/tests/ui/test_custom.py b/panel/tests/ui/test_custom.py
index bbb58af023..06cf4b64be 100644
--- a/panel/tests/ui/test_custom.py
+++ b/panel/tests/ui/test_custom.py
@@ -361,6 +361,55 @@ def test_send_event(page, component):
     wait_until(lambda: button.clicks, page)
 
 
+class JSSendMsg(JSComponent):
+
+    clicks = param.Integer(default=0)
+
+    msg = param.String()
+
+    _esm = """
+    export function render({ model }) {
+      const button = document.createElement('button')
+      button.id = 'button'
+      button.onclick = (event) => model.send_msg('click')
+      return button
+    }
+    """
+
+    def _handle_msg(self, msg):
+        self.msg = msg
+        self.clicks += 1
+
+
+class ReactSendMsg(ReactComponent):
+
+    clicks = param.Integer(default=0)
+
+    msg = param.String()
+
+    _esm = """
+    export function render({ model }) {
+      return <button id="button" onClick={(event) => model.send_msg('click')}/>
+    }
+    """
+
+    def _handle_msg(self, msg):
+        self.msg = msg
+        self.clicks += 1
+
+
+@pytest.mark.parametrize('component', [JSSendMsg, ReactSendMsg])
+def test_send_msg(page, component):
+    button = component()
+
+    serve_component(page, button)
+
+    page.locator('#button').click()
+
+    wait_until(lambda: button.clicks, page)
+    assert button.msg == 'click'
+
+
 class JSChild(JSComponent):
 
     child = Child()

From 1f110548c93e6d208fcf6396ab04e69217aa3692 Mon Sep 17 00:00:00 2001
From: Alfredo Carella <alfredocarella@users.noreply.github.com>
Date: Wed, 11 Sep 2024 18:58:15 +0200
Subject: [PATCH 054/164] Remove extra "the" in "Reactive Expressions" tutorial
 (#7253)

Delete a single extra word in the tutorial text.
---
 doc/tutorials/basic/pn_rx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/tutorials/basic/pn_rx.md b/doc/tutorials/basic/pn_rx.md
index d85c3b6dba..3325a2c1cc 100644
--- a/doc/tutorials/basic/pn_rx.md
+++ b/doc/tutorials/basic/pn_rx.md
@@ -3,7 +3,7 @@
 In this section you will learn about `pn.rx`. `pn.rx` extends the concepts from `pn.bind` that your learned in the previous section.
 
 :::{note}
-You might feel some repetition from the previous section on `pn.bind`. We do this on purpose to enable you to compare and contrast. `pn.rx` is the an extension of `pn.bind` that provides more power and flexibility. `pn.bind` has been the core API in Panel for a long time, so you will meet it across our documentation and community sites, and thus its very important to learn.
+You might feel some repetition from the previous section on `pn.bind`. We do this on purpose to enable you to compare and contrast. `pn.rx` is an extension of `pn.bind` that provides more power and flexibility. `pn.bind` has been the core API in Panel for a long time, so you will meet it across our documentation and community sites, and thus its very important to learn.
 
 `pn.rx` will enable you to build more complicated applications using a more flexible and maintainable architecture.
 :::

From d5e2155a353d20a8eeb26fd7b4bbbe11949e2bbd Mon Sep 17 00:00:00 2001
From: Philip Meier <github.pmeier@posteo.de>
Date: Wed, 11 Sep 2024 18:58:59 +0200
Subject: [PATCH 055/164] add fastapi extra dependencies (#7252)

---
 doc/how_to/integrations/FastAPI.md | 10 ++++++++--
 pyproject.toml                     |  4 ++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/doc/how_to/integrations/FastAPI.md b/doc/how_to/integrations/FastAPI.md
index d07f29be40..874967291b 100644
--- a/doc/how_to/integrations/FastAPI.md
+++ b/doc/how_to/integrations/FastAPI.md
@@ -19,8 +19,14 @@ conda install fastapi
 :::
 
 :::{tab-item} `pip`
-```pip
-conda install fastapi
+```bash
+pip install fastapi
+```
+:::
+
+:::{tab-item} `panel`
+```bash
+pip install panel[fastapi]
 ```
 :::
 
diff --git a/pyproject.toml b/pyproject.toml
index 5350afcc61..61404efaca 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -75,6 +75,10 @@ recommended = [
     'pillow',
     'plotly',
 ]
+fastapi = [
+    'bokeh-fastapi == 0.1.0',
+    'uvicorn',
+]
 dev = [
     'watchfiles',
 ]

From fe43b8b1875ad447c1cd25b27e3d9f88ca8bbb7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Thu, 12 Sep 2024 12:05:49 +0200
Subject: [PATCH 056/164] Add references to help section (#7260)

---
 panel/command/__init__.py | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/panel/command/__init__.py b/panel/command/__init__.py
index 9ba7447ca3..0c3d728d50 100644
--- a/panel/command/__init__.py
+++ b/panel/command/__init__.py
@@ -54,8 +54,21 @@ def main(args=None):
     from bokeh.command.subcommands import all as bokeh_commands
     bokeh_commands = bokeh_commands + [OAuthSecret, Compile, Convert, Bundle]
 
+    description = """\
+Found a Bug or Have a Feature Request?
+Open an issue at: https://github.com/holoviz/panel/issues
+
+Have a Question?
+Ask on our Discord chat server: https://discord.gg/rb6gPXbdAr
+
+Need Help?
+Ask a question on our forum: https://discourse.holoviz.org
+
+For more information, see the documentation at: https://panel.holoviz.org """
+
     parser = argparse.ArgumentParser(
-        prog="panel", epilog="See '<command> --help' to read about a specific subcommand."
+        prog="panel", epilog="See '<command> --help' to read about a specific subcommand.",
+        description=description, formatter_class=argparse.RawTextHelpFormatter
     )
 
     parser.add_argument('-v', '--version', action='version', version=__version__)

From c5e3125ce2908452df9670b1c7459947df77bfbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Thu, 12 Sep 2024 12:06:10 +0200
Subject: [PATCH 057/164] Add simple nested editor to Tabulator (#7251)

---
 examples/reference/widgets/Tabulator.ipynb | 62 ++++++++++++++++++++--
 panel/models/tabulator.ts                  | 19 +++++++
 panel/tests/ui/widgets/test_tabulator.py   | 43 +++++++++++++++
 3 files changed, 121 insertions(+), 3 deletions(-)

diff --git a/examples/reference/widgets/Tabulator.ipynb b/examples/reference/widgets/Tabulator.ipynb
index 5d29793032..a002a1b5e1 100644
--- a/examples/reference/widgets/Tabulator.ipynb
+++ b/examples/reference/widgets/Tabulator.ipynb
@@ -185,7 +185,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "The list of valid *Tabulator* formatters can be found in the [Tabulator documentation](https://tabulator.info/docs/5.5/format#format-builtin).\n",
+    "The list of valid *Tabulator* formatters can be found in the [Tabulator documentation](https://tabulator.info/docs/{{TABULATOR_VERSION}}/format#format-builtin).\n",
     "\n",
     "Note that the equivalent specification may also be applied for column titles using the `title_formatters` parameter (but does not support Bokeh `CellFormatter` types)."
    ]
@@ -265,6 +265,62 @@
     "edit_table.on_edit(lambda e: print(e.column, e.row, e.old, e.value))"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Nested editor\n",
+    "Suppose you want an editor to depend on values in another cell. The `nested` type can be used. The `nested` type needs two arguments, `options` and `lookup_order`; the latter describes how the `options` should be looked up. \n",
+    "\n",
+    "Let's create a simple DataFrame with three columns, the `2` column now depends on the values in the `0` and `1` column. If the `0` is `A`, the `2` column should always be between 1 and 5. If the `0` column is `B`, the `2` column will now also depend on the `1` column. "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "options = {\n",
+    "    \"A\": [1, 2, 3, 4, 5],\n",
+    "    \"B\": {\"1\": [6, 7, 8, 9, 10], \"2\": [11, 12, 13, 14, 15]},\n",
+    "}\n",
+    "tabulator_editors = {\n",
+    "    \"0\": {\"type\": \"list\", \"values\": [\"A\", \"B\"]},\n",
+    "    \"1\": {\"type\": \"list\", \"values\": [1, 2]},\n",
+    "    \"2\": {\"type\": \"nested\", \"options\": options, \"lookup_order\": [\"0\", \"1\"]},\n",
+    "}\n",
+    "\n",
+    "nested_df = pd.DataFrame({\"0\": [\"A\", \"B\"], \"1\": [1, 2], \"2\": [None, None]})\n",
+    "nested_table = pn.widgets.Tabulator(nested_df, editors=tabulator_editors, show_index=False)\n",
+    "nested_table"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Some things to note about the `nested` editor:\n",
+    "- Only string keys can be used in `options` dictionary. \n",
+    "- Care must be taken so there is always a valid option for the `nested` editor.\n",
+    "- No guarantee is made that the value shown is a `nested` editor is a valid option.\n",
+    "\n",
+    "For the last point, you can use an `on_edit` callback, which either change the value or clear it. Below is an example of how to clear it."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def clear_nested_column(event):\n",
+    "    if event.column in [\"0\", \"1\"]:\n",
+    "        nested_table.patch({\"2\": [(event.row, None)]})\n",
+    "\n",
+    "nested_table.on_edit(clear_nested_column)"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -1313,9 +1369,9 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "These and other available *Tabulator* options are listed at http://tabulator.info/docs/5.4/options.  \n",
+    "These and other available *Tabulator* options are listed at http://tabulator.info/docs/{{TABULATOR_VERSION}}/options.  \n",
     "\n",
-    "Obviously not all options will work though, especially any settable callbacks and options which are set by the internal Panel tabulator module (for example the `columns` option).\n",
+    "Obviously not all options will work though, especially any settable callbacks and options which are set by the internal Panel tabulator module.\n",
     "Additionally it should be noted that the configuration parameter is not responsive so it can only be set at instantiation time."
    ]
   }
diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts
index aaa613fe5d..97485cf6f5 100644
--- a/panel/models/tabulator.ts
+++ b/panel/models/tabulator.ts
@@ -302,6 +302,20 @@ const datetimeEditor = function(cell: any, onRendered: any, success: any, cancel
   return input
 }
 
+const nestedEditor = function(cell: any, editorParams: any) {
+  //cell - the cell component for the editable cell
+
+  const row = cell.getRow().getData()
+  let values = editorParams.options
+  for (const i of editorParams.lookup_order) {
+    values = row[i] in values ? values[row[i]] : []
+    if (Array.isArray(values)) {
+      break
+    }
+  }
+  return values ? values : []
+}
+
 function find_column(group: any, field: string): any {
   if (group.columns != null) {
     for (const col of group.columns) {
@@ -955,6 +969,11 @@ export class DataTabulatorView extends HTMLBoxView {
           tab_column.editor = dateEditor
         } else if (tab_column.editor === "datetime") {
           tab_column.editor = datetimeEditor
+        } else if (tab_column.editor === "nested") {
+          tab_column.editorParams.valuesLookup = (cell: any) => {
+            return nestedEditor(cell, tab_column.editorParams)
+          }
+          tab_column.editor = "list"
         }
       } else if (ctype === "StringEditor") {
         if (editor.completions.length > 0) {
diff --git a/panel/tests/ui/widgets/test_tabulator.py b/panel/tests/ui/widgets/test_tabulator.py
index 4ba7cc8bde..bd846eecd9 100644
--- a/panel/tests/ui/widgets/test_tabulator.py
+++ b/panel/tests/ui/widgets/test_tabulator.py
@@ -728,6 +728,49 @@ def test_tabulator_editors_tabulator_multiselect(page, exception_handler_accumul
     assert not exception_handler_accumulator
 
 
+@pytest.mark.parametrize("opt0", ['A', 'B'])
+@pytest.mark.parametrize("opt1", ["1", "2"])
+def test_tabulator_editors_nested(page, opt0, opt1):
+    df = pd.DataFrame({"0": ["A"], "1": [1], "2": [None]})
+
+    options = {
+        "A": list(range(5)),
+        "B": { "1": list(range(5, 10)), "2": list(range(10, 15))},
+    }
+    tabulator_editors = {
+        "0": {"type": "list", "values": ["A", "B"]},
+        "1": {"type": "list", "values": [1, 2]},
+        "2": {"type": "nested", "options": options, "lookup_order": ["0", "1"]},
+    }
+
+    widget = Tabulator(df, editors=tabulator_editors, show_index=False)
+    serve_component(page, widget)
+
+    cells = page.locator('.tabulator-cell.tabulator-editable')
+    expect(cells).to_have_count(3)
+
+    # Change the 0th column
+    cells.nth(0).click()
+    item = page.locator('.tabulator-edit-list-item', has_text=opt0)
+    expect(item).to_have_count(1)
+    item.click()
+
+    # Change the 1th column
+    cells.nth(1).click()
+    item = page.locator('.tabulator-edit-list-item', has_text=opt1)
+    expect(item).to_have_count(1)
+    item.click()
+
+    # Check the last column matches
+    cells.nth(2).click()
+    items = page.locator('.tabulator-edit-list-item')
+    expect(items).to_have_count(5)
+
+    items_text = items.all_inner_texts()
+    expected = options[opt0][opt1] if opt0 == "B" else options[opt0]
+    assert items_text == list(map(str, expected))
+
+
 @pytest.mark.parametrize('layout', Tabulator.param['layout'].objects)
 def test_tabulator_column_layouts(page, df_mixed, layout):
     widget = Tabulator(df_mixed, layout=layout)

From 3c966d4be5e1e57d7c35917cc2e53d37c9380f2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Thu, 12 Sep 2024 12:06:53 +0200
Subject: [PATCH 058/164] Bump package versions (#7259)

---
 panel/package-lock.json | 633 +++++++++++++++++++++++++++-------------
 1 file changed, 434 insertions(+), 199 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index 1ea86b467e..0280af4119 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -30,9 +30,10 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
-      "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz",
+      "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==",
+      "license": "MIT",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -44,6 +45,7 @@
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/@bokeh/bokehjs/-/bokehjs-3.5.1.tgz",
       "integrity": "sha512-mxtmZxRppVUydble18UsFcff5HYUTsqhZMqGLVjE09eTak7cqRQXfF4v94EqwSaCwwkad6vg0kl0lF+rY9BiXw==",
+      "license": "BSD-3-Clause",
       "workspaces": [
         "./make",
         "./src/compiler",
@@ -87,6 +89,7 @@
       "version": "2.4.4103",
       "resolved": "https://registry.npmjs.org/@bokeh/slickgrid/-/slickgrid-2.4.4103.tgz",
       "integrity": "sha512-wPitQJNUNUHw+86BPemvb1kIuV6UB4CpjEEDIXpU8G6Jges+8nx/iGHW8w9BwvICdeyhAmfX9Hmn5vRJMbe+uw==",
+      "license": "MIT",
       "dependencies": {
         "@types/slickgrid": "^2.1.30",
         "jquery": ">=3.4.0",
@@ -97,13 +100,15 @@
     "node_modules/@bokeh/slickgrid/node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "license": "0BSD"
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
       "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "eslint-visitor-keys": "^3.3.0"
       },
@@ -115,10 +120,11 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.1.tgz",
-      "integrity": "sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
+      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
@@ -128,6 +134,7 @@
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
       "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -151,6 +158,7 @@
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -161,6 +169,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -173,6 +182,7 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
       "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -183,6 +193,7 @@
       "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
       "deprecated": "Use @eslint/config-array instead",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "@humanwhocodes/object-schema": "^2.0.2",
         "debug": "^4.3.1",
@@ -197,6 +208,7 @@
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -207,6 +219,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -219,6 +232,7 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": ">=12.22"
       },
@@ -232,12 +246,14 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "deprecated": "Use @eslint/object-schema instead",
-      "dev": true
+      "dev": true,
+      "license": "BSD-3-Clause"
     },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "license": "ISC",
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -251,9 +267,10 @@
       }
     },
     "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -265,6 +282,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -279,6 +297,7 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -292,6 +311,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
       }
@@ -300,19 +320,22 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -323,6 +346,7 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -336,6 +360,7 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
@@ -345,6 +370,7 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -357,6 +383,7 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=14"
@@ -367,6 +394,7 @@
       "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-1.8.1.tgz",
       "integrity": "sha512-64My6I7uCcmSQ//427Pfg2vjSf9SDzfsGIWohNFgISMLYdC5BzJqDo647iDDJzSxINh3WTC0Ql46ifiKuOoTyA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@stylistic/eslint-plugin-js": "1.8.1",
         "@stylistic/eslint-plugin-jsx": "1.8.1",
@@ -386,6 +414,7 @@
       "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-js/-/eslint-plugin-js-1.8.1.tgz",
       "integrity": "sha512-c5c2C8Mos5tTQd+NWpqwEu7VT6SSRooAguFPMj1cp2RkTYl1ynKoXo8MWy3k4rkbzoeYHrqC2UlUzsroAN7wtQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/eslint": "^8.56.10",
         "acorn": "^8.11.3",
@@ -405,6 +434,7 @@
       "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-jsx/-/eslint-plugin-jsx-1.8.1.tgz",
       "integrity": "sha512-k1Eb6rcjMP+mmjvj+vd9y5KUdWn1OBkkPLHXhsrHt5lCDFZxJEs0aVQzE5lpYrtVZVkpc5esTtss/cPJux0lfA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@stylistic/eslint-plugin-js": "^1.8.1",
         "@types/eslint": "^8.56.10",
@@ -423,6 +453,7 @@
       "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-plus/-/eslint-plugin-plus-1.8.1.tgz",
       "integrity": "sha512-4+40H3lHYTN8OWz+US8CamVkO+2hxNLp9+CAjorI7top/lHqemhpJvKA1LD9Uh+WMY9DYWiWpL2+SZ2wAXY9fQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/eslint": "^8.56.10",
         "@typescript-eslint/utils": "^6.21.0"
@@ -436,6 +467,7 @@
       "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin-ts/-/eslint-plugin-ts-1.8.1.tgz",
       "integrity": "sha512-/q1m+ZuO1JHfiSF16EATFzv7XSJkc5W6DocfvH5o9oB6WWYFMF77fVoBWnKT3wGptPOc2hkRupRKhmeFROdfWA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@stylistic/eslint-plugin-js": "1.8.1",
         "@types/eslint": "^8.56.10",
@@ -451,13 +483,15 @@
     "node_modules/@types/debounce": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@types/debounce/-/debounce-1.2.4.tgz",
-      "integrity": "sha512-jBqiORIzKDOToaF63Fm//haOCHuwQuLa2202RK4MozpA6lh93eCBc+/8+wZn5OzjJt3ySdc+74SXWXB55Ewtyw=="
+      "integrity": "sha512-jBqiORIzKDOToaF63Fm//haOCHuwQuLa2202RK4MozpA6lh93eCBc+/8+wZn5OzjJt3ySdc+74SXWXB55Ewtyw==",
+      "license": "MIT"
     },
     "node_modules/@types/eslint": {
-      "version": "8.56.10",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
-      "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
+      "version": "8.56.12",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
+      "integrity": "sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -467,27 +501,32 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/geojson": {
       "version": "7946.0.14",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
-      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+      "license": "MIT"
     },
     "node_modules/@types/gl-matrix": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/@types/gl-matrix/-/gl-matrix-2.4.5.tgz",
-      "integrity": "sha512-0L8Mq1+oaIW0oVzGUDbSW+HnTjCNb4CmoIQE5BkoHt/A7x20z0MJ1PnwfH3atty/vbWLGgvJwVu2Mz3SKFiEFw=="
+      "integrity": "sha512-0L8Mq1+oaIW0oVzGUDbSW+HnTjCNb4CmoIQE5BkoHt/A7x20z0MJ1PnwfH3atty/vbWLGgvJwVu2Mz3SKFiEFw==",
+      "license": "MIT"
     },
     "node_modules/@types/google.maps": {
-      "version": "3.55.9",
-      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.55.9.tgz",
-      "integrity": "sha512-phaOMtezbT3NaXPKiI3m0OosUS7Nly0auw3Be5s/CgMWLVoDAUP1Yb/Ld0TRoRp8ibrlT4VqM5kmzfvUA0UNLQ=="
+      "version": "3.58.0",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.0.tgz",
+      "integrity": "sha512-rZPrbNHoGxeY70uuQYFLGQqcz5mLd3pZy0u286GSugvN7PLFsHNRF2wN2QXtUgNiC33IC0LX+MD3LGAC3wN7Eg==",
+      "license": "MIT"
     },
     "node_modules/@types/jquery": {
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.30.tgz",
       "integrity": "sha512-nbWKkkyb919DOUxjmRVk8vwtDb0/k8FKncmUKFi+NY+QXqWltooxTrswvz4LspQwxvLdvzBN1TImr6cw3aQx2A==",
+      "license": "MIT",
       "dependencies": {
         "@types/sizzle": "*"
       }
@@ -496,28 +535,33 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/proj4": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/@types/proj4/-/proj4-2.5.5.tgz",
-      "integrity": "sha512-y4tHUVVoMEOm2nxRLQ2/ET8upj/pBmoutGxFw2LZJTQWPgWXI+cbxVEUFFmIzr/bpFR83hGDOTSXX6HBeObvZA=="
+      "integrity": "sha512-y4tHUVVoMEOm2nxRLQ2/ET8upj/pBmoutGxFw2LZJTQWPgWXI+cbxVEUFFmIzr/bpFR83hGDOTSXX6HBeObvZA==",
+      "license": "MIT"
     },
     "node_modules/@types/semver": {
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/sizzle": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.8.tgz",
-      "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg=="
+      "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
+      "license": "MIT"
     },
     "node_modules/@types/slickgrid": {
       "version": "2.1.40",
       "resolved": "https://registry.npmjs.org/@types/slickgrid/-/slickgrid-2.1.40.tgz",
       "integrity": "sha512-+HWaipRr4bw0cy4eS8PCWxo+Fi66aL+mh36unRLAWtatAvMnxpldTKfpe9T7zdNtgN+rq+/faux3JzFR1mj/dg==",
+      "license": "MIT",
       "dependencies": {
         "@types/jquery": "*"
       }
@@ -525,19 +569,21 @@
     "node_modules/@types/sprintf-js": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@types/sprintf-js/-/sprintf-js-1.1.4.tgz",
-      "integrity": "sha512-aWK1reDYWxcjgcIIPmQi3u+OQDuYa9b+lr6eIsGWrekJ9vr1NSjr4Eab8oQ1iKuH1ltFHpXGyerAv1a3FMKxzQ=="
+      "integrity": "sha512-aWK1reDYWxcjgcIIPmQi3u+OQDuYa9b+lr6eIsGWrekJ9vr1NSjr4Eab8oQ1iKuH1ltFHpXGyerAv1a3FMKxzQ==",
+      "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.13.0.tgz",
-      "integrity": "sha512-FX1X6AF0w8MdVFLSdqwqN/me2hyhuQg4ykN6ZpVhh1ij/80pTvDKclX1sZB9iqex8SjQfVhwMKs3JtnnMLzG9w==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
+      "integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.13.0",
-        "@typescript-eslint/type-utils": "7.13.0",
-        "@typescript-eslint/utils": "7.13.0",
-        "@typescript-eslint/visitor-keys": "7.13.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/type-utils": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -561,15 +607,16 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.13.0.tgz",
-      "integrity": "sha512-jceD8RgdKORVnB4Y6BqasfIkFhl4pajB1wVxrF4akxD2QPM8GNYjgGwEzYS+437ewlqqrg7Dw+6dhdpjMpeBFQ==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
+      "integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.13.0",
-        "@typescript-eslint/types": "7.13.0",
-        "@typescript-eslint/typescript-estree": "7.13.0"
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -583,15 +630,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.13.0.tgz",
-      "integrity": "sha512-EjMfl69KOS9awXXe83iRN7oIEXy9yYdqWfqdrFAYAAr6syP8eLEFI7ZE4939antx2mNgPRW/o1ybm2SFYkbTVA==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz",
+      "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "7.13.0",
-        "@typescript-eslint/types": "7.13.0",
-        "@typescript-eslint/typescript-estree": "7.13.0",
-        "@typescript-eslint/visitor-keys": "7.13.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -611,13 +659,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.13.0.tgz",
-      "integrity": "sha512-ZrMCe1R6a01T94ilV13egvcnvVJ1pxShkE0+NDjDzH4nvG1wXpwsVI5bZCvE7AEDH1mXEx5tJSVR68bLgG7Dng==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.18.0.tgz",
+      "integrity": "sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "7.13.0",
-        "@typescript-eslint/visitor-keys": "7.13.0"
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -628,13 +677,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.13.0.tgz",
-      "integrity": "sha512-xMEtMzxq9eRkZy48XuxlBFzpVMDurUAfDu5Rz16GouAtXm0TaAoTFzqWUFPPuQYXI/CDaH/Bgx/fk/84t/Bc9A==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz",
+      "integrity": "sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.13.0",
-        "@typescript-eslint/utils": "7.13.0",
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -655,15 +705,16 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/utils": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.13.0.tgz",
-      "integrity": "sha512-jceD8RgdKORVnB4Y6BqasfIkFhl4pajB1wVxrF4akxD2QPM8GNYjgGwEzYS+437ewlqqrg7Dw+6dhdpjMpeBFQ==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
+      "integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.13.0",
-        "@typescript-eslint/types": "7.13.0",
-        "@typescript-eslint/typescript-estree": "7.13.0"
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -677,10 +728,11 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.13.0.tgz",
-      "integrity": "sha512-QWuwm9wcGMAuTsxP+qz6LBBd3Uq8I5Nv8xb0mk54jmNoCyDspnMvVsOxI6IsMmway5d1S9Su2+sCKv1st2l6eA==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.18.0.tgz",
+      "integrity": "sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
       },
@@ -690,13 +742,14 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.13.0.tgz",
-      "integrity": "sha512-cAvBvUoobaoIcoqox1YatXOnSl3gx92rCZoMRPzMNisDiM12siGilSM4+dJAekuuHTibI2hVC2fYK79iSFvWjw==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz",
+      "integrity": "sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/types": "7.13.0",
-        "@typescript-eslint/visitor-keys": "7.13.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -722,6 +775,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz",
       "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
@@ -747,6 +801,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
       "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@typescript-eslint/types": "6.21.0",
         "@typescript-eslint/visitor-keys": "6.21.0"
@@ -764,6 +819,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
       "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
       },
@@ -777,6 +833,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
       "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "@typescript-eslint/types": "6.21.0",
         "@typescript-eslint/visitor-keys": "6.21.0",
@@ -805,6 +862,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
       "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@typescript-eslint/types": "6.21.0",
         "eslint-visitor-keys": "^3.4.1"
@@ -822,6 +880,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
       "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -833,12 +892,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.13.0.tgz",
-      "integrity": "sha512-nxn+dozQx+MK61nn/JP+M4eCkHDSxSLDpgE3WcQo0+fkjEolnaB5jswvIKC4K56By8MMgIho7f1PVxERHEo8rw==",
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.18.0.tgz",
+      "integrity": "sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "7.13.0",
+        "@typescript-eslint/types": "7.18.0",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
@@ -853,21 +913,24 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/ace-code": {
-      "version": "1.34.2",
-      "resolved": "https://registry.npmjs.org/ace-code/-/ace-code-1.34.2.tgz",
-      "integrity": "sha512-Vw6en1MpcpeTYgGxmGSB6gcllzLSVixS6BSYQ3SFbI1c/+LKfrYNG4LFaAaeVKSBoZ+Rtb6tiArCK0yp3A7RSw==",
+      "version": "1.36.2",
+      "resolved": "https://registry.npmjs.org/ace-code/-/ace-code-1.36.2.tgz",
+      "integrity": "sha512-UeB7s95eP5MuFmjSzSRhmX5bAgAJ7Mpz84E+GYbGjzMmjeHrrv4IIZ3li6Ti4tRLS6SsLZ0V9iXtqorhdAYBwg==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">= 0.6.0"
       }
     },
     "node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -880,6 +943,7 @@
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
@@ -889,6 +953,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -904,6 +969,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -912,6 +978,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -925,19 +992,22 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
     },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "dev": true,
+      "license": "Python-2.0"
     },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -945,12 +1015,14 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
     },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -960,6 +1032,7 @@
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -972,6 +1045,7 @@
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -981,6 +1055,7 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -996,6 +1071,7 @@
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/choices.js/-/choices.js-10.2.0.tgz",
       "integrity": "sha512-8PKy6wq7BMjNwDTZwr3+Zry6G2+opJaAJDDA/j3yxvqSCnvkKe7ZIFfIyOhoc7htIWFhsfzF9tJpGUATcpUtPg==",
+      "license": "MIT",
       "dependencies": {
         "deepmerge": "^4.2.2",
         "fuse.js": "^6.6.2",
@@ -1006,6 +1082,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1016,12 +1093,14 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
     },
     "node_modules/commander": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-9.2.0.tgz",
       "integrity": "sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==",
+      "license": "MIT",
       "engines": {
         "node": "^12.20.0 || >=14"
       }
@@ -1030,12 +1109,14 @@
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -1048,15 +1129,17 @@
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
-      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+      "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -1071,12 +1154,14 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1086,6 +1171,7 @@
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
       "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-type": "^4.0.0"
       },
@@ -1098,6 +1184,7 @@
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
       "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "esutils": "^2.0.2"
       },
@@ -1108,18 +1195,21 @@
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT"
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "license": "MIT"
     },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -1132,6 +1222,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
       "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -1187,6 +1278,7 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
       "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -1203,6 +1295,7 @@
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -1215,6 +1308,7 @@
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1225,6 +1319,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -1236,6 +1331,7 @@
       "version": "3.2.25",
       "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
       "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -1245,6 +1341,7 @@
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
       "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "acorn": "^8.9.0",
         "acorn-jsx": "^5.3.2",
@@ -1258,10 +1355,11 @@
       }
     },
     "node_modules/esquery": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
-      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -1274,6 +1372,7 @@
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -1286,6 +1385,7 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
       }
@@ -1295,6 +1395,7 @@
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1303,13 +1404,15 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -1326,6 +1429,7 @@
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -1337,19 +1441,22 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -1359,6 +1466,7 @@
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
       "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "flat-cache": "^3.0.4"
       },
@@ -1371,6 +1479,7 @@
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1383,6 +1492,7 @@
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -1399,6 +1509,7 @@
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
       "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.3",
@@ -1412,6 +1523,7 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/flatbush/-/flatbush-4.4.0.tgz",
       "integrity": "sha512-cf6G+sfy/+/FLH7Ls1URQ5GCRlXgwgqUZiEsMNrMZqb3Us3EkKmzUlKbnyoBy/4wI4oLJ+8cyCQoKJIVm92Fmg==",
+      "license": "ISC",
       "dependencies": {
         "flatqueue": "^2.0.3"
       }
@@ -1419,12 +1531,14 @@
     "node_modules/flatpickr": {
       "version": "4.6.13",
       "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
-      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw=="
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
+      "license": "MIT"
     },
     "node_modules/flatqueue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/flatqueue/-/flatqueue-2.0.3.tgz",
       "integrity": "sha512-RZCWZNkmxzUOh8jqEcEGZCycb3B8KAfpPwg3H//cURasunYxsg1eIvE+QDSjX+ZPHTIVfINfK1aLTrVKKO0i4g==",
+      "license": "ISC",
       "engines": {
         "node": ">= 12.17.0"
       }
@@ -1433,12 +1547,14 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/foreground-child": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.0.tgz",
-      "integrity": "sha512-CrWQNaEl1/6WeZoarcM9LHupTo3RpZO2Pdk1vktwzPiQTsJnAKJmm3TACKeG5UZbWDfaH2AbvYxzP96y0MT7fA==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "license": "ISC",
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -1454,12 +1570,14 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/fuse.js": {
       "version": "6.6.2",
       "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
       "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==",
+      "license": "Apache-2.0",
       "engines": {
         "node": ">=10"
       }
@@ -1467,7 +1585,8 @@
     "node_modules/gl-matrix": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
-      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==",
+      "license": "MIT"
     },
     "node_modules/glob": {
       "version": "7.2.3",
@@ -1475,6 +1594,7 @@
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "deprecated": "Glob versions prior to v9 are no longer supported",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -1495,6 +1615,7 @@
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -1507,6 +1628,7 @@
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1517,6 +1639,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -1529,6 +1652,7 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
       "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -1544,6 +1668,7 @@
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
       "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "array-union": "^2.1.0",
         "dir-glob": "^3.0.1",
@@ -1563,13 +1688,15 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -1577,13 +1704,15 @@
     "node_modules/htm": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz",
-      "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ=="
+      "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==",
+      "license": "Apache-2.0"
     },
     "node_modules/ignore": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 4"
       }
@@ -1593,6 +1722,7 @@
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -1609,6 +1739,7 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.8.19"
       }
@@ -1619,6 +1750,7 @@
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
       "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -1628,13 +1760,15 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1643,6 +1777,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -1652,6 +1787,7 @@
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -1664,6 +1800,7 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -1673,6 +1810,7 @@
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -1680,18 +1818,17 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
     },
     "node_modules/jackspeak": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
-      "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
-      "engines": {
-        "node": ">=14"
-      },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       },
@@ -1702,14 +1839,16 @@
     "node_modules/jquery": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "license": "MIT"
     },
     "node_modules/jquery-ui": {
-      "version": "1.13.3",
-      "resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.13.3.tgz",
-      "integrity": "sha512-D2YJfswSJRh/B8M/zCowDpNFfwsDmtfnMPwjJTyvl+CBqzpYwQ+gFYIbUUlzijy/Qvoy30H1YhoSui4MNYpRwA==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.14.0.tgz",
+      "integrity": "sha512-mPfYKBoRCf0MzaT2cyW5i3IuZ7PfTITaasO5OFLAQxrHuI+ZxruPa+4/K1OMNT8oElLWGtIxc9aRbyw20BKr8g==",
+      "license": "MIT",
       "dependencies": {
-        "jquery": ">=1.8.0 <4.0.0"
+        "jquery": ">=1.12.0 <5.0.0"
       }
     },
     "node_modules/js-yaml": {
@@ -1717,6 +1856,7 @@
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -1728,30 +1868,35 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/json-formatter-js": {
-      "version": "2.5.11",
-      "resolved": "https://registry.npmjs.org/json-formatter-js/-/json-formatter-js-2.5.11.tgz",
-      "integrity": "sha512-njrwXGOZNZTt7nrhkFDqzfEJqL442QEFLS2deEMHQhOb6m3ubYXopXFJrZCsL8/NQah3OA6O7OrlECPusoMBwQ=="
+      "version": "2.5.18",
+      "resolved": "https://registry.npmjs.org/json-formatter-js/-/json-formatter-js-2.5.18.tgz",
+      "integrity": "sha512-1OF3PafvJRAZAhb3EZUjLBdG+HXSpdHytV3nOD19OLzbhQgc8q8J8F6ro9hSdbcG0rXeWq33dQ37HxQLp3y74A==",
+      "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -1761,6 +1906,7 @@
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "prelude-ls": "^1.2.1",
         "type-check": "~0.4.0"
@@ -1772,13 +1918,15 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -1793,20 +1941,20 @@
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
-      "engines": {
-        "node": "14 || >=16.14"
-      }
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
     },
     "node_modules/mathjax-full": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/mathjax-full/-/mathjax-full-3.2.2.tgz",
       "integrity": "sha512-+LfG9Fik+OuI8SLwsiR02IVdjcnRCy5MufYLi0C3TdMT56L/pjB0alMVGgoWJF8pN9Rc7FESycZB9BMNWIid5w==",
+      "license": "Apache-2.0",
       "dependencies": {
         "esm": "^3.2.25",
         "mhchemparser": "^4.1.0",
@@ -1819,6 +1967,7 @@
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
@@ -1826,18 +1975,21 @@
     "node_modules/mgrs": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
-      "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA=="
+      "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==",
+      "license": "MIT"
     },
     "node_modules/mhchemparser": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/mhchemparser/-/mhchemparser-4.2.1.tgz",
-      "integrity": "sha512-kYmyrCirqJf3zZ9t/0wGgRZ4/ZJw//VwaRVGA75C4nhE60vtnIzhl9J9ndkX/h6hxSN7pjg/cE0VxbnNM+bnDQ=="
+      "integrity": "sha512-kYmyrCirqJf3zZ9t/0wGgRZ4/ZJw//VwaRVGA75C4nhE60vtnIzhl9J9ndkX/h6hxSN7pjg/cE0VxbnNM+bnDQ==",
+      "license": "Apache-2.0"
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -1851,6 +2003,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8.6"
       },
@@ -1859,9 +2012,10 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -1876,6 +2030,7 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -1883,18 +2038,21 @@
     "node_modules/mj-context-menu": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/mj-context-menu/-/mj-context-menu-0.6.1.tgz",
-      "integrity": "sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA=="
+      "integrity": "sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA==",
+      "license": "Apache-2.0"
     },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -1905,17 +2063,20 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/nouislider": {
-      "version": "15.8.0",
-      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.8.0.tgz",
-      "integrity": "sha512-E7Rvt2Uc5IIl7Hv7+mO8XH8uFyqe3ofxi5j2QMi2B7w8JHVLAEzTpgDBk0oYZBaplsk60QOso3qrq8qk3JPHEQ=="
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.8.1.tgz",
+      "integrity": "sha512-93TweAi8kqntHJSPiSWQ1o/uZ29VWOmal9YKb6KKGGlCkugaNfAupT7o1qTHqdJvNQ7S0su5rO6qRFCjP8fxtw==",
+      "license": "MIT"
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1925,6 +2086,7 @@
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "wrappy": "1"
       }
@@ -1934,6 +2096,7 @@
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -1951,6 +2114,7 @@
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -1966,6 +2130,7 @@
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -1976,11 +2141,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -1993,6 +2165,7 @@
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -2002,6 +2175,7 @@
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2010,6 +2184,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -2018,6 +2193,7 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -2034,6 +2210,7 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -2043,6 +2220,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -2054,14 +2232,16 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 6"
       }
     },
     "node_modules/preact": {
-      "version": "10.22.0",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.22.0.tgz",
-      "integrity": "sha512-RRurnSjJPj4rp5K6XoP45Ui33ncb7e4H7WiOHVpjbkvqvA3U+N8Z6Qbo0AE6leGYBV66n8EhEaFixvIu3SkxFw==",
+      "version": "10.23.2",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.23.2.tgz",
+      "integrity": "sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -2072,14 +2252,16 @@
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8.0"
       }
     },
     "node_modules/proj4": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.11.0.tgz",
-      "integrity": "sha512-SasuTkAx8HnWQHfIyhkdUNJorSJqINHAN3EyMWYiQRVorftz9DHz650YraFgczwgtHOxqnfuDxSNv3C8MUnHeg==",
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.12.1.tgz",
+      "integrity": "sha512-vmhP3hmstjXjzFwg8QXJwpoj4n7GVrXk3ZW3DzNK/Ur4cuwXq7ZiMXaWYvLYLQbX8n4MXgbwTr4lthOUZltBpA==",
+      "license": "MIT",
       "dependencies": {
         "mgrs": "1.0.0",
         "wkt-parser": "^1.3.3"
@@ -2090,6 +2272,7 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -2112,12 +2295,14 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/redux": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
       "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.9.2"
       }
@@ -2125,18 +2310,21 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
     },
     "node_modules/regl": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/regl/-/regl-2.1.0.tgz",
-      "integrity": "sha512-oWUce/aVoEvW5l2V0LK7O5KJMzUSKeiOwFuJehzpSFd43dO5spP9r+sSUfhKtsky4u6MCqWJaRL+abzExynfTg=="
+      "integrity": "sha512-oWUce/aVoEvW5l2V0LK7O5KJMzUSKeiOwFuJehzpSFd43dO5spP9r+sSUfhKtsky4u6MCqWJaRL+abzExynfTg==",
+      "license": "MIT"
     },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -2146,6 +2334,7 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -2157,6 +2346,7 @@
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -2186,15 +2376,17 @@
           "url": "https://feross.org/support"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "queue-microtask": "^1.2.2"
       }
     },
     "node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -2206,6 +2398,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -2217,6 +2410,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -2225,6 +2419,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
       "engines": {
         "node": ">=14"
       },
@@ -2237,6 +2432,7 @@
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -2245,6 +2441,7 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/speech-rule-engine/-/speech-rule-engine-4.0.7.tgz",
       "integrity": "sha512-sJrL3/wHzNwJRLBdf6CjJWIlxC04iYKkyXvYSVsWVOiC2DSkHmxsqOhEeMsBA9XK+CHuNcsdkbFDnoUfAsmp9g==",
+      "license": "Apache-2.0",
       "dependencies": {
         "commander": "9.2.0",
         "wicked-good-xpath": "1.3.0",
@@ -2257,12 +2454,14 @@
     "node_modules/sprintf-js": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
-      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "license": "BSD-3-Clause"
     },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -2280,6 +2479,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -2292,12 +2492,14 @@
     "node_modules/string-width-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
     },
     "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -2309,6 +2511,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -2323,6 +2526,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -2335,6 +2539,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -2347,6 +2552,7 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       },
@@ -2358,6 +2564,7 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -2379,27 +2586,27 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
       "engines": {
         "node": ">= 6"
       }
     },
     "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz",
-      "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==",
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^3.1.2",
         "minimatch": "^9.0.4",
         "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
         "path-scurry": "^1.11.1"
       },
       "bin": {
         "glob": "dist/esm/bin.mjs"
       },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
@@ -2409,6 +2616,7 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -2420,12 +2628,14 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -2434,6 +2644,7 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -2444,13 +2655,15 @@
     "node_modules/timezone": {
       "version": "1.0.23",
       "resolved": "https://registry.npmjs.org/timezone/-/timezone-1.0.23.tgz",
-      "integrity": "sha512-yhQgk6qmSLB+TF8HGmApZAVI5bfzR1CoKUGr+WMZWmx75ED1uDewAZA8QMGCQ70TEv4GmM8pDB9jrHuxdaQ1PA=="
+      "integrity": "sha512-yhQgk6qmSLB+TF8HGmApZAVI5bfzR1CoKUGr+WMZWmx75ED1uDewAZA8QMGCQ70TEv4GmM8pDB9jrHuxdaQ1PA==",
+      "license": "MIT"
     },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -2463,6 +2676,7 @@
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
       "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=16"
       },
@@ -2473,18 +2687,21 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "license": "Apache-2.0"
     },
     "node_modules/tslib": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
+      "license": "0BSD"
     },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "prelude-ls": "^1.2.1"
       },
@@ -2497,6 +2714,7 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true,
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=10"
       },
@@ -2505,10 +2723,11 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
       "dev": true,
+      "license": "Apache-2.0",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -2521,13 +2740,15 @@
     "node_modules/underscore.template": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/underscore.template/-/underscore.template-0.1.7.tgz",
-      "integrity": "sha512-wQ25n9/J0Olo3A92QDbSCkD04FKRrjVOn6wooaFDKsrmV9alkc7vZ3MmldbVo4NbJCk9ycWSEcfGn4NzFZIcvA=="
+      "integrity": "sha512-wQ25n9/J0Olo3A92QDbSCkD04FKRrjVOn6wooaFDKsrmV9alkc7vZ3MmldbVo4NbJCk9ycWSEcfGn4NzFZIcvA==",
+      "license": "MIT"
     },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -2536,6 +2757,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -2549,18 +2771,21 @@
     "node_modules/wicked-good-xpath": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz",
-      "integrity": "sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw=="
+      "integrity": "sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw==",
+      "license": "MIT"
     },
     "node_modules/wkt-parser": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.3.tgz",
-      "integrity": "sha512-ZnV3yH8/k58ZPACOXeiHaMuXIiaTk1t0hSUVisbO0t4RjA5wPpUytcxeyiN2h+LZRrmuHIh/1UlrR9e7DHDvTw=="
+      "integrity": "sha512-ZnV3yH8/k58ZPACOXeiHaMuXIiaTk1t0hSUVisbO0t4RjA5wPpUytcxeyiN2h+LZRrmuHIh/1UlrR9e7DHDvTw==",
+      "license": "MIT"
     },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2569,6 +2794,7 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -2586,6 +2812,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -2601,12 +2828,14 @@
     "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -2617,9 +2846,10 @@
       }
     },
     "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -2631,6 +2861,7 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -2642,6 +2873,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -2656,12 +2888,14 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/xmldom-sre": {
       "version": "0.1.31",
       "resolved": "https://registry.npmjs.org/xmldom-sre/-/xmldom-sre-0.1.31.tgz",
       "integrity": "sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==",
+      "license": "(LGPL-2.0 or MIT)",
       "engines": {
         "node": ">=0.1"
       }
@@ -2671,6 +2905,7 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },

From a9162e1f5f133e1d05644bbe5f9cfe3577df1760 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 12 Sep 2024 14:41:45 +0200
Subject: [PATCH 059/164] Fix setting of Dial background (#7261)

---
 panel/widgets/indicators.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/panel/widgets/indicators.py b/panel/widgets/indicators.py
index c6babbc159..56f1c87061 100644
--- a/panel/widgets/indicators.py
+++ b/panel/widgets/indicators.py
@@ -746,6 +746,11 @@ def _get_model(self, doc, root=None, parent=None, comm=None):
         model.xaxis.visible = False
         model.yaxis.visible = False
         model.grid.visible = False
+        if self.background in (None, "transparent"):
+            model.background_fill_alpha = 0
+        else:
+            model.background_fill_alpha = 1
+            model.background_fill_color = self.background
 
         annulus, needle, threshold, text = self._get_data(properties)
 

From d90097b64eb8a2b3defc34045f3a9f9a4d14f4d4 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 12 Sep 2024 15:24:51 +0200
Subject: [PATCH 060/164] Support anchor links in HTML model (#7258)

---
 panel/models/html.ts               | 39 ++++++++++++++++++++++++++----
 panel/tests/ui/pane/test_markup.py | 38 +++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 5 deletions(-)

diff --git a/panel/models/html.ts b/panel/models/html.ts
index fe549519e2..64f985e158 100644
--- a/panel/models/html.ts
+++ b/panel/models/html.ts
@@ -6,6 +6,20 @@ import {Markup} from "@bokehjs/models/widgets/markup"
 import {PanelMarkupView} from "./layout"
 import {serializeEvent} from "./event-to-object"
 
+function searchAllDOMs(node: Element | ShadowRoot, selector: string): (Element | ShadowRoot)[] {
+  let found: (Element | ShadowRoot)[] = []
+  if (node instanceof Element && node.matches(selector)) {
+    found.push(node)
+  }
+  node.children && Array.from(node.children).forEach(child => {
+    found = found.concat(searchAllDOMs(child, selector))
+  })
+  if (node instanceof Element && node.shadowRoot) {
+    found = found.concat(searchAllDOMs(node.shadowRoot, selector))
+  }
+  return found
+}
+
 @server_event("html_stream")
 export class HTMLStreamEvent extends ModelEvent {
   constructor(readonly model: HTML, readonly patch: string, readonly start: number) {
@@ -127,12 +141,27 @@ export class HTMLView extends PanelMarkupView {
   }
 
   set_html(html: string | null): void {
-    if (html !== null) {
-      this.container.innerHTML = html
-      if (this.model.run_scripts) {
-        run_scripts(this.container)
+    if (html === null) {
+      return
+    }
+    this.container.innerHTML = html
+    if (this.model.run_scripts) {
+      run_scripts(this.container)
+    }
+    this._setup_event_listeners()
+    for (const anchor of this.container.querySelectorAll("a")) {
+      const link = anchor.getAttribute("href")
+      if (link && link.startsWith("#")) {
+        anchor.addEventListener("click", () => {
+          const found = searchAllDOMs(document.body, link)
+          if ((found.length > 0) && found[0] instanceof Element) {
+            found[0].scrollIntoView()
+          }
+        })
+        if (!this.root.has_finished() && this.model.document && window.location.hash === link) {
+          this.model.document.on_event("document_ready", () => setTimeout(() => anchor.scrollIntoView(), 5))
+        }
       }
-      this._setup_event_listeners()
     }
   }
 
diff --git a/panel/tests/ui/pane/test_markup.py b/panel/tests/ui/pane/test_markup.py
index 3e43a9eacf..71399b79d0 100644
--- a/panel/tests/ui/pane/test_markup.py
+++ b/panel/tests/ui/pane/test_markup.py
@@ -6,6 +6,7 @@
 
 from playwright.sync_api import expect
 
+from panel.layout import Row
 from panel.models import HTML
 from panel.pane import Markdown
 from panel.tests.util import serve_component, wait_until
@@ -115,3 +116,40 @@ def test_html_model_no_stylesheet(page):
     header_element = page.locator('h1:has-text("Header")')
     assert header_element.is_visible()
     assert header_element.text_content() == "Header"
+
+def test_anchor_scroll(page):
+    md = ''
+    for tag in ['tag1', 'tag2', 'tag3']:
+        md += f'# {tag}\n\n'
+        md += f'{tag} content\n' * 50
+
+    content = Markdown(md)
+    link = Markdown('<a id="link1" href="#tag1">Link1</a><a id="link3" href="#tag3">Link</a>')
+
+    serve_component(page, Row(link, content))
+
+    expect(page.locator('#tag1')).to_be_in_viewport()
+    expect(page.locator('#tag3')).not_to_be_in_viewport()
+
+    page.locator('#link3').click()
+
+    expect(page.locator('#tag1')).not_to_be_in_viewport()
+    expect(page.locator('#tag3')).to_be_in_viewport()
+
+    page.locator('#link1').click()
+
+    expect(page.locator('#tag1')).to_be_in_viewport()
+    expect(page.locator('#tag3')).not_to_be_in_viewport()
+
+def test_anchor_scroll_on_init(page):
+    md = ''
+    for tag in ['tag1', 'tag2', 'tag3']:
+        md += f'# {tag}\n\n'
+        md += f'{tag} content\n' * 50
+
+    content = Markdown(md)
+
+    serve_component(page, content, suffix='#tag3')
+
+    expect(page.locator('#tag1')).not_to_be_in_viewport()
+    expect(page.locator('#tag3')).to_be_in_viewport()

From b69b78be6470c0daa2cecb6a1d296ca256ad7acf Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 12 Sep 2024 16:36:33 +0200
Subject: [PATCH 061/164] Avoid flicker when scrolling to anchor (#7263)

* Avoid flicker when scrolling to anchor

* Fix
---
 panel/models/html.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/panel/models/html.ts b/panel/models/html.ts
index 64f985e158..d64a133181 100644
--- a/panel/models/html.ts
+++ b/panel/models/html.ts
@@ -159,7 +159,10 @@ export class HTMLView extends PanelMarkupView {
           }
         })
         if (!this.root.has_finished() && this.model.document && window.location.hash === link) {
-          this.model.document.on_event("document_ready", () => setTimeout(() => anchor.scrollIntoView(), 5))
+          this.model.document.on_event("document_ready", () => {
+            anchor.scrollIntoView()
+            setTimeout(() => anchor.scrollIntoView(), 5)
+          })
         }
       }
     }

From 30e11a158028dba345c3bc723a84c35787687733 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 12 Sep 2024 16:45:57 +0200
Subject: [PATCH 062/164] Update bokeh-fastapi integration (#7262)

---
 panel/io/application.py | 11 +++++
 panel/io/fastapi.py     | 97 +++++++++++++++++++++++++++++++++--------
 panel/io/server.py      | 17 ++------
 3 files changed, 93 insertions(+), 32 deletions(-)

diff --git a/panel/io/application.py b/panel/io/application.py
index a2034a9272..90efa39693 100644
--- a/panel/io/application.py
+++ b/panel/io/application.py
@@ -264,4 +264,15 @@ def build_applications(
         else:
             handler = FunctionHandler(partial(_eval_panel, app, server_id, title_, location, admin))
             apps[slug] = Application(handler, admin=admin)
+
+    if admin:
+        if '/admin' in apps:
+            raise ValueError(
+                'Cannot enable admin panel because another app is being served '
+                'on the /admin endpoint'
+            )
+        from .admin import admin_panel
+        admin_handler = FunctionHandler(admin_panel)
+        apps['/admin'] = Application(admin_handler)
+
     return apps
diff --git a/panel/io/fastapi.py b/panel/io/fastapi.py
index 957d29005d..a18f443278 100644
--- a/panel/io/fastapi.py
+++ b/panel/io/fastapi.py
@@ -1,21 +1,25 @@
 from __future__ import annotations
 
 import asyncio
+import socket
 import uuid
 
 from functools import wraps
-from typing import TYPE_CHECKING, Mapping, cast
+from typing import (
+    TYPE_CHECKING, Any, Mapping, cast,
+)
 
+from ..config import config
 from .application import build_applications
 from .document import _cleanup_doc, extra_socket_handlers
 from .resources import COMPONENT_PATH
-from .server import ComponentResourceHandler
+from .server import ComponentResourceHandler, server_html_page_for_session
 from .state import state
 from .threads import StoppableThread
 
 try:
     from bokeh_fastapi import BokehFastAPI
-    from bokeh_fastapi.handler import WSHandler
+    from bokeh_fastapi.handler import DocHandler, WSHandler
     from fastapi import (
         FastAPI, HTTPException, Query, Request,
     )
@@ -34,6 +38,9 @@
 # Private API
 #---------------------------------------------------------------------
 
+DocHandler.render_session = server_html_page_for_session
+
+
 def dispatch_fastapi(conn, events=None, msg=None):
     if msg is None:
         msg = conn.protocol.create("PATCH-DOC", events)
@@ -61,6 +68,11 @@ async def liveness_handler(request: Request, endpoint: str | None = Query(None))
         else:
             return {str(request.url.path): True}
 
+def add_history_handler(app, endpoint):
+    @app.get(endpoint, response_model=dict[str, int | dict[str, Any]])
+    async def history_handler(request: Request):
+        return state.session_info
+
 #---------------------------------------------------------------------
 # Public API
 #---------------------------------------------------------------------
@@ -71,6 +83,7 @@ def add_applications(
     title: str | dict[str, str] | None = None,
     location: bool | Location = True,
     admin: bool = False,
+    session_history: int | None = None,
     liveness: bool | str = False,
     **kwargs
 ):
@@ -92,6 +105,11 @@ def add_applications(
         set the URL location.
     admin: boolean (default=False)
         Whether to enable the admin panel
+    session_history: int (optional, default=None)
+      The amount of session history to accumulate. If set to non-zero
+      and non-None value will launch a REST endpoint at
+      /rest/session_info, which returns information about the session
+      history.
     liveness: bool | str (optional, default=False)
       Whether to add a liveness endpoint. If a string is provided
       then this will be used as the endpoint, otherwise the endpoint
@@ -100,7 +118,15 @@ def add_applications(
         Additional keyword arguments to pass to the BokehFastAPI application
     """
     apps = build_applications(panel, title=title, location=location, admin=admin)
+    ws_origins = kwargs.pop('websocket_origin', [])
+    if ws_origins and not isinstance(ws_origins, list):
+        ws_origins = [ws_origins]
+    kwargs['websocket_origins'] = ws_origins
+
     application = BokehFastAPI(apps, app=app, **kwargs)
+    if session_history is not None:
+        config.session_history = session_history
+        add_history_handler(application.app, endpoint='/session_info')
     if liveness:
         liveness_endpoint = liveness if isinstance(liveness, str) else '/liveness'
         add_liveness_handler(application.app, endpoint=liveness_endpoint, applications=apps)
@@ -165,6 +191,7 @@ def wrapper(*args, **kwargs):
 def get_server(
     panel: TViewableFuncOrPath | Mapping[str, TViewableFuncOrPath],
     port: int | None = 0,
+    show: bool = True,
     start: bool = False,
     title: str | dict[str, str] | None = None,
     location: bool | Location = True,
@@ -181,6 +208,8 @@ def get_server(
         dictionary mapping from the URL slug to either.
     port: int (optional, default=0)
       Allows specifying a specific port.
+    show : boolean (optional, default=True)
+      Whether to open the server in a new browser tab on start
     start : boolean(optional, default=False)
       Whether to start the Server.
     title : str or {str: str} (optional, default=None)
@@ -195,8 +224,11 @@ def get_server(
       Whether to add a liveness endpoint. If a string is provided
       then this will be used as the endpoint, otherwise the endpoint
       will be hosted at /liveness.
-    start : boolean(optional, default=False)
-      Whether to start the Server.
+    session_history: int (optional, default=None)
+      The amount of session history to accumulate. If set to non-zero
+      and non-None value will launch a REST endpoint at
+      /rest/session_info, which returns information about the session
+      history.
     **kwargs:
         Additional keyword arguments to pass to the BokehFastAPI application
     """
@@ -209,26 +241,49 @@ def get_server(
             "panel.io.fastapi.add_applications API."
         ) from e
 
+    address = kwargs.pop('address', None)
+    if not port:
+        sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+        sock.bind(('127.0.0.1', 0))  # Bind to any available port
+        port = sock.getsockname()[1]  # Get the dynamically assigned port
+        sock.close()
+
     loop = kwargs.pop('loop')
+    config_kwargs = {}
     if loop:
+        config_kwargs['loop'] = loop
         asyncio.set_event_loop(loop)
     server_id = kwargs.pop('server_id', uuid.uuid4().hex)
     application = add_applications(
         panel, title=title, location=location, admin=admin, **kwargs
     )
 
-    config = uvicorn.Config(application.app, port=port, loop=loop)
+    if show:
+        @application.app.on_event('startup')
+        def show_callback():
+            prefix = kwargs.get('prefix', '')
+            address_string = 'localhost'
+            if address is not None and address != '':
+                address_string = address
+            url = f"http://{address_string}:{config.port}{prefix}"
+            from bokeh.util.browser import view
+            view(url, new='tab')
+
+    config = uvicorn.Config(application.app, port=port, **config_kwargs)
     server = uvicorn.Server(config)
 
     state._servers[server_id] = (server, panel, [])
-    if start:
-        if loop:
-            try:
-                loop.run_until_complete(server.serve())
-            except asyncio.CancelledError:
-                pass
-        else:
-            server.run()
+    if not start:
+        return server
+
+    if loop:
+        try:
+            loop.run_until_complete(server.serve())
+        except asyncio.CancelledError:
+            pass
+    else:
+        server.run()
+
     return server
 
 
@@ -241,10 +296,10 @@ def serve(
     show: bool = True,
     start: bool = True,
     title: str | None = None,
-    verbose: bool = True,
     location: bool = True,
     threaded: bool = False,
     admin: bool = False,
+    session_history: int | None = None,
     liveness: bool | str = False,
     **kwargs
 ) -> StoppableThread | Server:
@@ -283,8 +338,6 @@ def serve(
     title: str or {str: str} (optional, default=None)
       An HTML title for the application or a dictionary mapping
       from the URL slug to a customized title
-    verbose: boolean (optional, default=True)
-      Whether to print the address and port
     location : boolean or panel.io.location.Location
       Whether to create a Location component to observe and
       set the URL location.
@@ -296,6 +349,11 @@ def serve(
       Whether to add a liveness endpoint. If a string is provided
       then this will be used as the endpoint, otherwise the endpoint
       will be hosted at /liveness.
+    session_history: int (optional, default=None)
+      The amount of session history to accumulate. If set to non-zero
+      and non-None value will launch a REST endpoint at
+      /rest/session_info, which returns information about the session
+      history.
     kwargs: dict
       Additional keyword arguments to pass to Server instance
     """
@@ -303,8 +361,9 @@ def serve(
     # not relevant to Panel users.
     kwargs = dict(kwargs, **dict(
         port=port, address=address, websocket_origin=websocket_origin,
-        loop=loop, show=show, start=start, title=title, verbose=verbose,
-        location=location, admin=admin, liveness=liveness
+        loop=loop, show=show, start=start, title=title,
+        location=location, admin=admin, liveness=liveness,
+        session_history=session_history
     ))
     if threaded:
         # To ensure that we have correspondence between state._threads and state._servers
diff --git a/panel/io/server.py b/panel/io/server.py
index bc34cebeb3..4ee02f5d6f 100644
--- a/panel/io/server.py
+++ b/panel/io/server.py
@@ -28,7 +28,6 @@
 import tornado
 
 # Bokeh imports
-from bokeh.application.handlers.function import FunctionHandler
 from bokeh.core.json_encoder import serialize_json
 from bokeh.core.templates import AUTOLOAD_JS, FILE, MACROS
 from bokeh.core.validation import silence
@@ -60,7 +59,7 @@
 from ..config import config
 from ..util import edit_readonly, fullpath
 from ..util.warnings import warn
-from .application import Application, build_applications
+from .application import build_applications
 from .document import (  # noqa
     _cleanup_doc, init_doc, unlocked, with_lock,
 )
@@ -1000,7 +999,9 @@ def flask_handler(slug, app):
     )
 
     if warm or config.autoreload:
-        for app in apps.values():
+        for endpoint, app in apps.items():
+            if endpoint == '/admin':
+                continue
             if config.autoreload:
                 with record_modules(list(apps.values())):
                     session = generate_session(app)
@@ -1010,16 +1011,6 @@ def flask_handler(slug, app):
                 state._on_load(None)
             _cleanup_doc(session.document, destroy=True)
 
-    if admin:
-        if '/admin' in apps:
-            raise ValueError(
-                'Cannot enable admin panel because another app is being served '
-                'on the /admin endpoint'
-            )
-        from .admin import admin_panel
-        admin_handler = FunctionHandler(admin_panel)
-        apps['/admin'] = Application(admin_handler)
-
     extra_patterns += get_static_routes(static_dirs)
 
     if session_history is not None:

From 0ab5e8d18f5175cabf2de8ef6c8d3331cfcffc9d Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Thu, 12 Sep 2024 17:14:11 +0200
Subject: [PATCH 063/164] Add pycafe deployment guide (#7183)

---
 doc/_static/logos/pycafe.png      | Bin 0 -> 3347 bytes
 doc/how_to/deployment/index.md    |   8 +++
 doc/how_to/deployment/pycafe.md   |  86 ++++++++++++++++++++++++++++++
 doc/tutorials/basic/build_todo.md |   1 -
 4 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 doc/_static/logos/pycafe.png
 create mode 100644 doc/how_to/deployment/pycafe.md

diff --git a/doc/_static/logos/pycafe.png b/doc/_static/logos/pycafe.png
new file mode 100644
index 0000000000000000000000000000000000000000..3737dc936217f381b122be815f9d36daaa1e4726
GIT binary patch
literal 3347
zcmV+u4eatqNk%w1VW0t^0rLO={{H>|005p`2dJl?si&XSz@hEt+3x4q`RCE$;o#um
z;o;%o>+9<4>+A6D<^TWyA^!_bMO0HmK~P09E-(WD0000X`2-0R0000X{vStWZe?;|
zbY)~9VtF8MZft38Wk*RybZ>8Lb1q|VZ2&9)0001>0iXc@1pg4oNvpj$>&?6WU?`4c
zX`X1Ru59bRa4gSsZQppV?|kq7z@TtQEE<o<q;kn@I-k&}bV{vSuh^`1%k6r<;IMd1
zE}PHjw0g~MyWjA*d`_?1@A$la&+q&HfPsR8goTEOh>41ejE#<ukdcy;l$Dm3n3<ZJ
zoSmMZprN9pq@|{(sHv)}tgWuEu(7hUw6(UkxVgH!yuH4^z`?@9#Kp$P$jQpf%+1cv
z(9zP<)YaD4*xB0K+}+;a;Njxq<mKk)=;`X~?CtLF@bU8V^!4`l`1$(#{Qds_00Rmf
zNU)&6g9sBUT*$DY!-o(fN}NcsqQ#3CGiuz(v7^V2Apb*(97(dI$&)Bks$9vkrOTHv
zW6GRKv!>0PICJXU$+M@=pFo2O9ZIyQ(W5&ZC|%05sne%Wmm-Z4wW`&qQ=wel$~Ef~
zu3)QrbrQC$)3Hs=s#S`X$y&8-m%KF_SIOM6b(7o;n-|GmuzipG?Hahq;H`zF99}Fo
zaSFze&pJjCxiZ_yCoEUSoLMtu&L%v622DaVW74HfA4WYw^=j53Tn~mFTlQYsAZ*{p
z?Lqfl-iB2Jzu|hgjpD{>AWtr1Idd4!pSy@IodxykDz0OvEPQ(l?cPg(58t{wZr@nR
zcR&wS{d)G2-D`j!Up@x<P3_OeFIE42{+Ib@0snvj3P=Hg4j4EffeKcDV1oxT2%!WI
z@`fN{<Xw1`dKy~AVTb932V#icjo4m>Cf2uIiYj8qVty#TSm25>&gf!|3C1X6VgdB%
z<BvcFDddno5@6(!NG7S|l1w(~<daYmDdm(@R%s=X?OdtlkWhB%<(FVGx#gH-mic3r
zW^Nhgnrya-WSVfsi6uL7TIuGUct%<0o^hhdCy{vuD(I1a7D}d{h5|Y0qIf3iXqAXQ
z8UUk|vMK4MLPq*%rJR0=>8Czw>S(8=J_#zQq9$7Es!N{wX{v^@Dl4I`UJ7fWv(8$p
zt#p2xtE{_93Qm;*6l?6U$R>*{0?an+Z2z;$Mk{TxTNPmKwb*8>ZMFw=>+QGTh70bq
z<T5+$xyzQT?z#v-Dh;vd#>+0W@uFMpw)o~-fVlkj+wHvO)_X3%1h-4&H1G;6Ex`&;
zd#}C_U+eG0;{x39!UfOkZZrvBobJ3HEBkQ75L0aO0St%yamMOy3{A%>3y^Zm)Lun0
z$tP1hGtDfs>+&-&tGsi}Bj1c~&JzzUbk8jx{4SL=8>@84MH{Ux(*92EG1E;?i7?br
z%WQGjRa=cM*8OUIG1uk(>`c%htKD$fW?PFkzj7<gHo0y$1NYWrM@@I#cZ-|1z<WR2
zH#2{)9XQQ{n_YOghu539vx_g&c>lwd#~ZoTlUEFK*q1k(xiXvU{W#G!*S&4%-*%2}
z>CB$~N}XZnE&$H3=e(849S|J+>d{tS=O?)99yRa1oBTV)!_ON%yYdpR?D3u?uYAnR
zH$U<76HmXc`07?a`nlM5qW$(Eckg|_;QLE{x$~22KK1CP&&m4iU+n(-;)-9t>h~-H
zI_rMxikJR2!N2|~?0*0RmjL-?z-Co2U<0#WvKFX`20E}_5R9O=CMd28BEW<QEMNZQ
zggiNY&|@JK;Q>e(E)$|~b{a$$2Q%Tp7oIDIBBUX>Y{-Gi8IOh8bD<9(7%>_0ONieh
z;s%VE!(;6b6FppFw15~vDF1p(iW;Ee`KEQnOJq@t$>Jgaz1S@<W<ZSiLmv{=r$jWO
zOO5Yi;{n`=0XQabg?&n**Eo>6V#)4Yd|ZO?idaQsRcQf`jHDzZi7G<aP6CA#+Zbb(
zNF^+Cij6GRBPU791yphnmjpm24>_$)CgGD|45a`@SxQNsQV^+Jr7Yv+N+iJYjk2U=
zEg^Z!K;#l^8Qi4GdU=Fj_A!`L8m28@Wl5)PK$pr488eOG%nKZGO46hxHBo6z4PY~l
zG}~qox@m!LN-3Pg949WznSpcuF>2~00y`_<P9nk6l=3ttJuzTU72=bT(u2Z2DbUX$
z{j->WIOdd6SgzdVbN>hnoj^l{^w5Atbf6a~Xhp+zQ6Xeh0viodM=@0hiAss0_9H1m
z*%gJ80wAS8S}Cu{Iml}wb6TvFR!M_kQ=I-tr^2dcPfrl6raJYh!u;njU7995q_P80
z&8k+RDphz=)l60e=?Jz;*0O@CtKs}=nZmkM6PWd_a4i&CrK#3K-QlW)jH_PvTBf;9
zRjd^#;~VhmQ@$GZu<!J1DeF2Wwn|9_h>fgdeWcjM0+s@Tbpv6|IoZw{wz8yT?3Nrm
zClq-0w0Z^YBt@$w(hdo-sEut|RXfeL5_FDr*layz%iFBdR-CpCDQ@YY+uQc`xWW2u
zJcDb2%(kJp!v96CbWf#RfHF6*!<_?kf6;*MdiT5F4KH}Bn@aJ9ce`UiZ!gTtUiOmr
zvJ+^pchwsP`tCx$`1S64uS<da+V>0p%|(9myWhuhz`yW)Zi0_7VEh)iv>HG#e>J;c
zV>DR44}R@|@f+YSbodq*Zf}M&wPE>wcnc@4MTp(2-12g`!fHq{Emmya5eKOQ5;m|M
zWIPKRi`T|L!tskItY9KD*vI2-@q%*<VdBD=7)Va?Z(VHSC!>MKvWW6`fqbSCw-?J+
z05dGKtY0M?8L1lHv6Y2E=I(MiR2)DviPdam3%B{rJ?em*Z+zD^2cyjmz;gif>{UOP
zLCmiJwEv(9omNAW0nx5dw3&6RfjtMg&vh<_q^G=KOLv*hlzzshX`4z<!x_{~cE+ex
zTk1k*It`F+#i~Ku>PEl%%8vHMtSeh<y5?F8v1Y}t72E5--ueu|Ud6EeTI^aT`w7oZ
z#j@wxY|9?o4ADl#w9#7a(Ehr<-@fmiC!OjGm^#mx4z;Ss&FM3{THSKU_9?dA)o!mg
z+yKV6fZ0vzPQSa{agetu=q*)y*B0IZ*EcQ*e(piX`QK^It-?XfZ&v%;)(D4#z)Qh!
zh|jsw9_KTvBQENS)B57RzV@LfZi|j%9N-mbxNARNaxyRa;V&n-cC$NhKs%V+X1e*v
z*Z-<)pJN#4eMP#+B_2ps82#w&hLg~l4kuwhoyAd4)6|{ZbZK9`#!4U4)_2}@ZGZj8
zVc*i&<IQu9pFO;Sj_S!({^+)o;_YxxyO!3T@UqVv?_1XUmH4i4yN?3!fzNu-1@G{o
z+tulacQfPV&TE!y!MUJ_yyO+1bj~lG>s2p$<l`Pq#<$e+jc|Ft!8v)<ubl3eP`$-j
z@A<|mHRFdjd3CLw*xHZw_At-A&3B)3j<z25gLVBPWIy-buRioV#l0w)UwPU;zpB93
zdC!MWd}BL*_Ryav@+(1oVwc|ct<65o|IYpH^WLAwm%bi0-iPut`~24jtNK6Be*Z1I
z-}~@~ephmO<3|bhM{W2Ae%Kd%!8d)n_kY&)ea*Lk;wOKTaDd%MR+2z}Z-9Zsr-6~c
zfo|Y|y9a`hAcAc`f~3b%A*g)y_ka)>a>25JF31Ne7=KB1f;G4YHz<IoLW2cp2tAm8
zP6dP(C<#NTfKO$F4QPNc7=tO7RZOUTn2>}MxP&bjgoR**)hC5nc!ZI_h32PKQ|Kso
zAcptGg0}!sa)5>hmxH#zhH>DAz_n9x=uvI>gc*p3vLJ_WK!?j^hqd5`9jJ#N$cM2&
zh$Co-C5VWypol5Rh$|R=gXoBh*nUtLfpA!fYFGz=sELn~3y{bLpE!!FVE>A0P>Po5
z3aFR{s@RD@vx7#Ud4ZORb=ZXAfPy$ci?(=+R9FtWcmurHi=eoE=MaoGFpRy3jB6;1
zMWBqf$c%TWg-`&EnJA5%2!>o>jZlb<wBU^~z>P5oj(zBiL?Dh3NREkUjzfTs|EG?R
z$c{qbj_wDKw<C{1K#zM!jU0oIK%kF@$d51cDYQsn#5jo*m=2&)kUw{jK8Sh4LXZq8
zVh;I`hBpoiIgwabkymJjy@Dwkxse<>hJuI=85xp!H<Deri6$wLC@Ezsd4I6jk|6n#
zFd38Fwu-svk~X<{IGK|(d5k>SlRqhwB`K6O*^@q5lnn=w-*A#j$%>Rfd6eb=l|(6(
z1*enxFkO-r5?mQsUip=W6_#SjS7ce1dUcj)30G>lmS)wKZfSxZ5tnfVmvrfcA90s&
zWtVzcgdowEWi=s!Ihcf5n1*?nh?$s*xtNUEn2!0FkQtehIhmAMnU;B(n3<WHxtW~V
dnV$KXpc$H?Ihv$dnx=W0sF|9o=@StE06XMa!rA};

literal 0
HcmV?d00001

diff --git a/doc/how_to/deployment/index.md b/doc/how_to/deployment/index.md
index b608a90e63..6cae3dcdc6 100644
--- a/doc/how_to/deployment/index.md
+++ b/doc/how_to/deployment/index.md
@@ -56,6 +56,13 @@ For guides on running and configuring a Panel server see the [server how-to guid
 ![Ploomber Logo](../../_static/logos/ploomber.png)
 :::
 
+:::{grid-item-card} PY.CAFE
+:link: pycafe
+:link-type: doc
+
+![PY.CAFE Logo](../../_static/logos/pycafe.png)
+:::
+
 ::::
 
 ## Other Cloud Providers
@@ -74,4 +81,5 @@ gcp
 heroku
 huggingface
 ploomber
+pycafe
 ```
diff --git a/doc/how_to/deployment/pycafe.md b/doc/how_to/deployment/pycafe.md
new file mode 100644
index 0000000000..5fa9de646e
--- /dev/null
+++ b/doc/how_to/deployment/pycafe.md
@@ -0,0 +1,86 @@
+# PY.CAFE Guide
+
+This guide demonstrates how to deploy a Panel app on [PY.CAFE](https://py.cafe/).
+
+PY.CAFE is a platform for creating and sharing data apps online, powered by [Pyodide](https://pyodide.org/). It offers a free tier for users.
+
+## 1. Log In
+
+Visit [PY.CAFE](https://py.cafe/) and either sign in or sign up for an account if you want to save your projects to your personal gallery.
+
+## 2. Choose the Panel Framework
+
+Select the Panel framework from the available options or use the direct link [PY.CAFE/snippet/panel](https://py.cafe/snippet/panel/v1).
+
+## 3. Update the `requirements.txt` File
+
+Add `panel` and any other necessary dependencies to your `requirements.txt` file:
+
+```bash
+panel
+```
+
+You don't have to pin version of panel or other dependencies as PY.CAFE will create a lock file with pinned versions automatically.
+
+## 4. Update the `app.py` File
+
+Update your `app.py` file with the following code:
+
+```python
+import panel as pn
+
+pn.extension()
+
+
+def model(n=5):
+    return "⭐" * n
+
+slider = pn.widgets.IntSlider(value=5, start=1, end=5)
+
+interactive_model = pn.bind(model, n=slider)
+
+layout = pn.Column(slider, interactive_model)
+
+pn.template.FastListTemplate(
+    site="Panel", title="Example", main=[layout],
+).servable()
+```
+
+After updating the file, save it, and the app will reload instantly.
+
+<iframe src="https://py.cafe/app/Panel_Org/pycafe-reference" title="PyCafe Reference Example" frameborder="0" style="width: 100%; height: 500px;"></iframe>
+
+Finally you can click **PUSH** to persist your app and click **SHARE** to share it with the world.
+
+## Example Gallery
+
+Explore the examples below:
+
+- [Basic Github App](https://py.cafe/Panel_Org/pycafe-reference) from the [GitHub repository](https://github.com/holoviz/panel/#interactive-data-apps).
+- [Greeting App](https://py.cafe/maartenbreddels/panel-interactive-greeting-app ).
+- [XGBoost Training App](https://py.cafe/Panel_Org/xgboost-training) from the [Convert Apps to WASM Guide](https://panel.holoviz.org/how_to/wasm/convert.html).
+
+### Basic Tutorials
+
+- [Animation](https://py.cafe/Panel_Org/basic-animation) from the [Build an Animation Tutorial](../../tutorials/basic/build_report.md).
+- [Chatbot](https://py.cafe/Panel_Org/basic-chatbot) from the [Build a Chatbot Tutorial](../../tutorials/basic/build_chatbot.md).
+- [Crossfilter Dashboard](https://py.cafe/Panel_Org/basic-crossfilter-dashboard) from the [Build Crossfiltering Dashboard Tutorial](../../tutorials/basic/build_crossfilter_dashboard.md).
+- [Dashboard](https://py.cafe/Panel_Org/basic-dashboard) from the [Build a Dashboard Tutorial](../../tutorials/basic/build_dashboard.md).
+- [Image Classifier](https://py.cafe/Panel_Org/basic-image-classifier) from the [Build an Image Classifier Tutorial](../../tutorials/basic/build_image_classifier.md).
+- [Monitoring Dashboard](https://py.cafe/Panel_Org/basic-monitoring-dashboard) from the [Build an Monitoring Dashboard Tutorial](../../tutorials/basic/build_monitoring_dashboard.md).
+- [Report](https://py.cafe/Panel_Org/basic-report) from the [Build a Report Tutorial](../../tutorials/basic/build_report.md).
+- [Streaming Dashboard](https://py.cafe/Panel_Org/basic-streaming-dashboard) from the [Build Streaming Dashboard Tutorial](../../tutorials/basic/build_streaming_dashboard.md).
+- [Todo app | Widget approach](https://py.cafe/Panel_Org/basic-todo) from the [Build a todo app](../../tutorials/basic/build_todo.md).
+
+### Intermediate Tutorials
+
+- [Todo App | Class approach](https://py.cafe/Panel_Org/intermediate-todo-app) from the [Build a todo app](../../tutorials/intermediate/build_todo.md).
+
+### App Gallery
+
+- [Altair Brushing](https://py.cafe/Panel_Org/altair-brushing) from the [Altair Brushing Tutorial](../../gallery/altair_brushing.ipynb).
+- [hvPlot Explorer](https://py.cafe/Panel_Org/hvplot-explorer) from the [hvPlot Explorer Tutorial](../../gallery/hvplot_explorer.ipynb)
+- [NYC Deck.GL](https://py.cafe/Panel_Org/nyc-deckgl) from the [NYC Deck.Gl Tutorial](../../gallery/nyc_deckgl.ipynb).
+- [Penguin Crossfilter](https://py.cafe/Panel_Org/penguin-crossfilter) from the [Penguin Crossfilter Tutorial](../../gallery/penguin_crossfilter.ipynb)
+- [Portfolio Analyzer](https://py.cafe/Panel_Org/portfolio-analyzer) from the [Portfolio Analyzer Tutorial](../../gallery/portfolio_analyzer.ipynb).
+- [VideoStream Interface](https://py.cafe/Panel_Org/videostream) from the [VideoStream Interface Tutorial](../../gallery/streaming_videostream.ipynb).
diff --git a/doc/tutorials/basic/build_todo.md b/doc/tutorials/basic/build_todo.md
index 448e6c1da7..144943383b 100644
--- a/doc/tutorials/basic/build_todo.md
+++ b/doc/tutorials/basic/build_todo.md
@@ -30,7 +30,6 @@ pn.extension(sizing_mode="stretch_width", design="material")
 
 BUTTON_WIDTH = 125
 
-# We use intslider to avoid teaching users pn.rx. Is that a good thing?
 state_changed_count = pn.widgets.IntInput()
 tasks = pn.Column()
 

From 9d4bfb97034dc9b1cf84e9e1e7eb98601e3279f1 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 12 Sep 2024 18:17:20 +0200
Subject: [PATCH 064/164] Add WebLLM example to gallery (#7265)

* Add WebLLM example

* Add to homepage index
---
 doc/index.md                  |   8 +-
 examples/gallery/WebLLM.ipynb | 194 ++++++++++++++++++++++++++++++++++
 2 files changed, 198 insertions(+), 4 deletions(-)
 create mode 100644 examples/gallery/WebLLM.ipynb

diff --git a/doc/index.md b/doc/index.md
index e213e24d11..33d740e540 100644
--- a/doc/index.md
+++ b/doc/index.md
@@ -40,13 +40,13 @@ alt: Portfolio Optimizer App
 ```
 :::
 
-:::{grid-item-card} MRI Slicer
-:link: https://|gallery-endpoint|.holoviz-demo.anaconda.com/vtk_slicer
+:::{grid-item-card} WebLLM Chat App
+:link: https://|gallery-endpoint|.holoviz-demo.anaconda.com/webllm
 :link-type: url
 
-```{image} https://assets.holoviz.org/panel/gallery/vtk_slicer.png
+```{image} https://assets.holoviz.org/panel/gallery/webllm.png
 ---
-alt: MRI Slicer App
+alt: WebLLM Application
 ---
 ```
 :::
diff --git a/examples/gallery/WebLLM.ipynb b/examples/gallery/WebLLM.ipynb
new file mode 100644
index 0000000000..4bf7da8892
--- /dev/null
+++ b/examples/gallery/WebLLM.ipynb
@@ -0,0 +1,194 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "04c6078a-0398-425c-82f7-d516b01b713d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import asyncio\n",
+    "import panel as pn\n",
+    "import param\n",
+    "\n",
+    "from panel.custom import JSComponent, ESMEvent\n",
+    "\n",
+    "pn.extension(template='material')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9aea88fd-3ae9-453f-a66e-b3bdc44c22e3",
+   "metadata": {},
+   "source": [
+    "This example demonstrates how to wrap an external library (specifically [WebLLM](https://github.com/mlc-ai/web-llm)) as a `JSComponent` and interface it with the `ChatInterface`."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "957c9fab-3fa7-48d7-83d0-5532bde6e547",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "\n",
+    "MODELS = {\n",
+    "    'Mistral-7b-Instruct': 'Mistral-7B-Instruct-v0.3-q4f16_1-MLC',\n",
+    "    'SmolLM': 'SmolLM-360M-Instruct-q4f16_1-MLC',\n",
+    "    'Gemma-2b': 'gemma-2-2b-it-q4f16_1-MLC',\n",
+    "    'Llama-3.1-8b-Instruct': 'Llama-3.1-8B-Instruct-q4f32_1-MLC-1k'\n",
+    "}\n",
+    "\n",
+    "class WebLLM(JSComponent):\n",
+    "\n",
+    "    loaded = param.Boolean(default=False, doc=\"\"\"\n",
+    "        Whether the model is loaded.\"\"\")\n",
+    "\n",
+    "    model = param.Selector(default='SmolLM-360M-Instruct-q4f16_1-MLC', objects=MODELS)\n",
+    "\n",
+    "    temperature = param.Number(default=1, bounds=(0, 2))\n",
+    "\n",
+    "    load_model = param.Event()\n",
+    "    \n",
+    "    _esm = \"\"\"\n",
+    "    import * as webllm from \"https://esm.run/@mlc-ai/web-llm\";\n",
+    "\n",
+    "    const engines = new Map()\n",
+    "\n",
+    "    export async function render({ model }) {\n",
+    "      model.on(\"msg:custom\", async (event) => {\n",
+    "        console.log(event)\n",
+    "        if (event.type === 'load') {\n",
+    "          if (!engines.has(model.model)) {\n",
+    "            engines.set(model.model, await webllm.CreateMLCEngine(model.model))\n",
+    "          }\n",
+    "          model.loaded = true\n",
+    "        } else if (event.type === 'completion') {\n",
+    "          const engine = engines.get(model.model)\n",
+    "          if (engine == null) {\n",
+    "            model.send_msg({'finish_reason': 'error'})\n",
+    "          }\n",
+    "          const chunks = await engine.chat.completions.create({\n",
+    "            messages: event.messages,\n",
+    "            temperature: model.temperature ,\n",
+    "            stream: true,\n",
+    "          })\n",
+    "          for await (const chunk of chunks) {\n",
+    "            model.send_msg(chunk.choices[0])\n",
+    "          }\n",
+    "        }\n",
+    "      })\n",
+    "    }\n",
+    "    \"\"\"\n",
+    "\n",
+    "    def __init__(self, **params):\n",
+    "        super().__init__(**params)\n",
+    "        self._buffer = []\n",
+    "\n",
+    "    @param.depends('load_model', watch=True)\n",
+    "    def _load_model(self):\n",
+    "        self.loading = True\n",
+    "        self._send_msg({'type': 'load'})\n",
+    "\n",
+    "    @param.depends('loaded', watch=True)\n",
+    "    def _loaded(self):\n",
+    "        self.loading = False\n",
+    "        self.param.load_model.constant = True\n",
+    "\n",
+    "    @param.depends('model', watch=True)\n",
+    "    def _update_load_model(self):\n",
+    "        self.param.load_model.constant = False\n",
+    "\n",
+    "    def _handle_msg(self, msg):\n",
+    "        self._buffer.insert(0, msg)\n",
+    "\n",
+    "    async def create_completion(self, msgs):\n",
+    "        self._send_msg({'type': 'completion', 'messages': msgs})\n",
+    "        latest = None\n",
+    "        while True:\n",
+    "            await asyncio.sleep(0.01)\n",
+    "            if not self._buffer:\n",
+    "                continue\n",
+    "            choice = self._buffer.pop()\n",
+    "            yield choice\n",
+    "            reason = choice['finish_reason']\n",
+    "            if reason == 'error':\n",
+    "                raise RuntimeError('Model not loaded')\n",
+    "            elif reason:\n",
+    "                return\n",
+    "\n",
+    "    async def callback(self, contents: str, user: str):\n",
+    "        if not self.loaded:\n",
+    "            yield f'Model `{self.model}` is loading.' if self.param.load_model.constant else 'Load the model'\n",
+    "            return\n",
+    "        message = \"\"\n",
+    "        async for chunk in llm.create_completion([{'role': 'user', 'content': contents}]):\n",
+    "            message += chunk['delta'].get('content', '')\n",
+    "            yield message\n",
+    "\n",
+    "    def menu(self):\n",
+    "        return pn.Column(\n",
+    "            pn.widgets.Select.from_param(self.param.model, sizing_mode='stretch_width'),\n",
+    "            pn.widgets.FloatSlider.from_param(self.param.temperature, sizing_mode='stretch_width'),\n",
+    "            pn.widgets.Button.from_param(\n",
+    "                self.param.load_model, sizing_mode='stretch_width',\n",
+    "                loading=self.param.loading\n",
+    "            )\n",
+    "        )"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "a663e937-797b-468f-875d-5bb8c2af002b",
+   "metadata": {},
+   "source": [
+    "Having implemented the `WebLLM` component we can render the WebLLM UI:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "58269444-868b-41e4-abe2-c4fcf031dc4b",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "llm = WebLLM()\n",
+    "\n",
+    "pn.Column(llm.menu(), llm).servable(area='sidebar')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "96229aa4-c5ed-4c4e-944a-789ee65d768f",
+   "metadata": {},
+   "source": [
+    "And connect it to a `ChatInterface`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "6f899068-8975-4cf4-9e1d-f3fdb5772a71",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "chat_interface = pn.chat.ChatInterface(callback=llm.callback)\n",
+    "chat_interface.send(\n",
+    "    \"Load a model and start chatting.\",\n",
+    "    user=\"System\",\n",
+    "    respond=False,\n",
+    ")\n",
+    "\n",
+    "chat_interface.servable(title='WebLLM')"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python",
+   "pygments_lexer": "ipython3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

From e03724334ff8b0b560f075740a63a3949580ec7c Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 12 Sep 2024 18:17:37 +0200
Subject: [PATCH 065/164] Various documentation fixes before 1.5.0 RC2 (#7246)

---
 doc/conf.py                                   | 60 +++++++++++++++++--
 doc/explanation/{ => architecture}/comms.md   |  2 +-
 .../{linking.md => architecture/index.md}     |  6 +-
 doc/explanation/index.md                      |  7 +--
 doc/generate_modules.py                       |  7 ---
 .../examples/esm_material_ui.md               | 18 +++---
 .../python/create_custom_widget.md            |  4 +-
 examples/gallery/penguin_crossfilter.ipynb    |  2 +-
 panel/_templates/pyodide_handler.js           |  3 +
 panel/dist/css/chat_message.css               |  1 +
 panel/io/convert.py                           | 29 +--------
 panel/io/document.py                          |  4 ++
 panel/io/ipywidget.py                         |  2 +-
 pixi.toml                                     | 15 ++++-
 14 files changed, 96 insertions(+), 64 deletions(-)
 rename doc/explanation/{ => architecture}/comms.md (99%)
 rename doc/explanation/{linking.md => architecture/index.md} (71%)

diff --git a/doc/conf.py b/doc/conf.py
index cbdfa33cb7..6e0d2bac55 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -2,6 +2,8 @@
 import os
 import pathlib
 
+from typing import Any
+
 import param
 
 param.parameterized.docstring_signature = False
@@ -71,8 +73,8 @@
             "icon": "fa-brands fa-discord",
         },
     ],
-    "pygment_light_style": "material",
-    "pygment_dark_style": "material",
+    "pygments_light_style": "material",
+    "pygments_dark_style": "material",
     "header_links_before_dropdown": 5,
     'secondary_sidebar_items': [
         "github-stars-button",
@@ -82,15 +84,27 @@
     "announcement": announcement_text,
 }
 
-extensions += [
-    'sphinx.ext.napoleon',
-    'nbsite.gallery',
+
+extensions = [
+    'myst_parser',
+    'sphinx_design',
+    'sphinx.ext.autodoc',
+    'sphinx.ext.doctest',
+    'sphinx.ext.intersphinx',
+    'sphinx.ext.coverage',
+    'sphinx.ext.mathjax',
+    'sphinx.ext.ifconfig',
+    'sphinx.ext.linkcode',
     'sphinx_copybutton',
+    'sphinxext.rediraffe',
+    'nbsite.gallery',
     'nbsite.pyodide',
     'nbsite.analytics',
 ]
 napoleon_numpy_docstring = True
 
+autodoc_mock_imports = ["panel.pane.vtk"]
+
 myst_enable_extensions = ["colon_fence", "deflist"]
 
 gallery_endpoint = 'panel-gallery-dev' if is_dev else 'panel-gallery'
@@ -137,12 +151,13 @@
                 'PanelCallbackHandler': 'LangChain CallbackHandler',
             },
             'as_pyodide': True,
-            'normalize_titles': False
+            'normalize_titles': False,
         }
     },
     'thumbnail_url': 'https://assets.holoviz.org/panel/thumbnails',
     'deployment_url': gallery_url,
     'jupyterlite_url': jlite_url,
+    'only_use_existing': True,
 }
 
 if panel.__version__ != version and (PANEL_ROOT / 'dist' / 'wheels').is_dir():
@@ -257,6 +272,37 @@ def update_versions(app, docname, source):
         source[0] = source[0].replace(old, new)
 
 
+def setup_mystnb(app):
+    from myst_nb.core.config import NbParserConfig
+    from myst_nb.sphinx_ import (
+        HideCodeCellNode, HideInputCells, SelectMimeType,
+    )
+    from myst_nb.sphinx_ext import create_mystnb_config
+
+    _UNSET = "--unset--"
+    for name, default, field in NbParserConfig().as_triple():
+        if not field.metadata.get("sphinx_exclude"):
+            # TODO add types?
+            app.add_config_value(f"nb_{name}", default, "env", Any)  # type: ignore[arg-type]
+            if "legacy_name" in field.metadata:
+                app.add_config_value(
+                    f"{field.metadata['legacy_name']}",
+                    _UNSET,
+                    "env",
+                    Any,  # type: ignore[arg-type]
+                )
+    app.add_config_value("nb_render_priority", _UNSET, "env", Any)  # type: ignore[arg-type]
+    create_mystnb_config(app)
+
+    # add post-transform for selecting mime type from a bundle
+    app.add_post_transform(SelectMimeType)
+
+    # setup collapsible content
+    app.add_post_transform(HideInputCells)
+    HideCodeCellNode.add_to_app(app)
+
+
+
 def setup(app) -> None:
     try:
         from nbsite.paramdoc import param_formatter, param_skip
@@ -265,6 +311,8 @@ def setup(app) -> None:
     except ImportError:
         print('no param_formatter (no param?)')
 
+    app.connect('builder-inited', setup_mystnb)
+
     app.connect('source-read', update_versions)
     nbbuild.setup(app)
     app.add_config_value('grid_item_link_domain', '', 'html')
diff --git a/doc/explanation/comms.md b/doc/explanation/architecture/comms.md
similarity index 99%
rename from doc/explanation/comms.md
rename to doc/explanation/architecture/comms.md
index 5ceec84758..2a909566d6 100644
--- a/doc/explanation/comms.md
+++ b/doc/explanation/architecture/comms.md
@@ -1,4 +1,4 @@
-# Panel + Juypter, Servers, etc.
+# Communication Channels
 
 Panel lets you write Python code that corresponds to Javascript/HTML objects in a web browser, which requires some means of communication between the two languages. How this communication is achieved depends on the context in which Panel is used, i.e., whether it is being run in a notebook like Classic Jupyter, in JupyterLab, as a standalone web server, etc. Usually it all Just Works™, but in case it doesn't, or if you want to understand the details or limitations of a particular configuration, this page will explain which technologies are used in which contexts to achieve the required channels of communication.
 
diff --git a/doc/explanation/linking.md b/doc/explanation/architecture/index.md
similarity index 71%
rename from doc/explanation/linking.md
rename to doc/explanation/architecture/index.md
index 20e7f4c882..ece47654e3 100644
--- a/doc/explanation/linking.md
+++ b/doc/explanation/architecture/index.md
@@ -1,14 +1,14 @@
 .. raw:: html
     <head>
-        <meta http-equiv='refresh' content='0; URL=./index.html#linking'>
+        <meta http-equiv='refresh' content='0; URL=./index.html#architecture>
     </head>
 
-# Linking
+# Architecture
 
 ```{toctree}
 :titlesonly:
 :hidden:
 :maxdepth: 1
 
-Panel and JS communications <comms/comms>
+Communication Channels <comms>
 ```
diff --git a/doc/explanation/index.md b/doc/explanation/index.md
index d86c85b14a..f42bf57ff3 100644
--- a/doc/explanation/index.md
+++ b/doc/explanation/index.md
@@ -135,13 +135,13 @@ Deepen your understanding about custom `ReactiveHTML` components
 
 ::::
 
-## Linking
+## Architecture
 
 ::::{grid} 1 2 2 3
 :gutter: 1 1 1 2
 
 :::{grid-item-card} {octicon}`arrow-both;2.5em;sd-mr-1 sd-animate-grow50` Panel Communications
-:link: comms
+:link: architecture/comms
 :link-type: doc
 
 Deepen your understanding about how Panel communicates between Python and Javascript in different contexts.
@@ -292,8 +292,7 @@ Learn about why and how Panel utilizes the Bokeh library.
 develop_seamlessly
 apis
 components
-linking
-comms
+architecture
 styling
 dependencies
 comparisons
diff --git a/doc/generate_modules.py b/doc/generate_modules.py
index 07411c62ec..0ec9bfb8ae 100644
--- a/doc/generate_modules.py
+++ b/doc/generate_modules.py
@@ -78,16 +78,10 @@ def format_directive(module, package=None):
         directive += '    :%s:\n' % option
     return directive
 
-def format_inheritance_diagram(module, package=None):
-    """Create the inheritance_diagram directive and add the options."""
-    directive = '.. inheritance-diagram:: %s\n' % makename(package, module)
-    return directive
-
 def create_module_file(package, module, opts):
     """Build the text of the file and write the file."""
 
     text = format_heading(1, '%s Module' % module)
-    text += format_inheritance_diagram(package, module)
     text += format_heading(2, ':mod:`%s` Module' % module)
     text += format_directive(module, package)
     write_file(makename(package, module), text, opts)
@@ -109,7 +103,6 @@ def create_package_file(root, master_package, subroot, py_files, opts, subs):
         else:
             heading = ':mod:`%s` Module' % py_file
         text += format_heading(2, heading)
-        text += format_inheritance_diagram(is_package and subroot or py_path, master_package)
         text += '\n\n'
         text += format_directive(is_package and subroot or py_path, master_package)
         text += '\n-------\n\n'
diff --git a/doc/how_to/custom_components/examples/esm_material_ui.md b/doc/how_to/custom_components/examples/esm_material_ui.md
index 1c90cac72e..4561dc844b 100644
--- a/doc/how_to/custom_components/examples/esm_material_ui.md
+++ b/doc/how_to/custom_components/examples/esm_material_ui.md
@@ -53,16 +53,16 @@ class Rating(MaterialComponent):
     _esm = """
     import Rating from '@mui/material/Rating'
 
-	export function render({model}) {
+    export function render({model}) {
       const [value, setValue] = model.useState("value")
       return (
-	    <Rating
-		  value={value}
+        <Rating
+          value={value}
           onChange={(event, newValue) => setValue(newValue) }
         />
-	  )
-	}
-	"""
+      )
+    }
+    """
 
 class DiscreteSlider(MaterialComponent):
 
@@ -88,7 +88,7 @@ class DiscreteSlider(MaterialComponent):
             aria-label="Restricted values"
             defaultValue={value}
             marks={marks}
-			onChange={(e) => setValue(e.target.value)}
+            onChange={(e) => setValue(e.target.value)}
             step={null}
             valueLabelDisplay="auto"
           />
@@ -103,7 +103,7 @@ slider = DiscreteSlider()
 
 pn.Row(
     pn.Column(button.controls(['disabled', 'label', 'variant']), button),
-	pn.Column(rating.controls(['value']), rating),
-	pn.Column(slider.controls(['value']), slider),
+    pn.Column(rating.controls(['value']), rating),
+    pn.Column(slider.controls(['value']), slider),
 ).servable()
 ```
diff --git a/doc/how_to/custom_components/python/create_custom_widget.md b/doc/how_to/custom_components/python/create_custom_widget.md
index 7bdfdb21ed..514ebf8292 100644
--- a/doc/how_to/custom_components/python/create_custom_widget.md
+++ b/doc/how_to/custom_components/python/create_custom_widget.md
@@ -45,12 +45,12 @@ class FeatureInput(WidgetBase, PyComponent):
 
         super().__init__(**params)
 
-        selected_features_widget = pn.widgets.MultiChoice.from_param(
+        self._selected_features_widget = pn.widgets.MultiChoice.from_param(
             self.param.selected_features, sizing_mode="stretch_width"
         )
 
     def __panel__(self):
-        return pn.Column(selected_features_widget, self._selected_widgets)
+        return pn.Column(self._selected_features_widget, self._selected_widgets)
 
     @param.depends("features", watch=True, on_init=True)
     def _reset_selected_features(self):
diff --git a/examples/gallery/penguin_crossfilter.ipynb b/examples/gallery/penguin_crossfilter.ipynb
index 1db7b2263a..e5f7aa736f 100644
--- a/examples/gallery/penguin_crossfilter.ipynb
+++ b/examples/gallery/penguin_crossfilter.ipynb
@@ -75,7 +75,7 @@
     "penguins = pd.read_csv('https://datasets.holoviz.org/penguins/v1/penguins.csv')\n",
     "penguins = penguins[~penguins.sex.isnull()].reset_index().sort_values('species')\n",
     "\n",
-    "penguins"
+    "penguins.head()"
    ]
   },
   {
diff --git a/panel/_templates/pyodide_handler.js b/panel/_templates/pyodide_handler.js
index 6bb454666c..f8774bb129 100644
--- a/panel/_templates/pyodide_handler.js
+++ b/panel/_templates/pyodide_handler.js
@@ -69,6 +69,9 @@ pyodideWorker.onmessage = async (event) => {
     render_items[0]['roots'] = roots
     render_items[0]['root_ids'] = root_ids
 
+    // Clear pre-rendered contents
+    Bokeh.index.roots.map((v) => v.remove())
+
     // Embed content
     const [views] = await Bokeh.embed.embed_items(docs_json, render_items)
 
diff --git a/panel/dist/css/chat_message.css b/panel/dist/css/chat_message.css
index 06ea28cbf7..80fe23976e 100644
--- a/panel/dist/css/chat_message.css
+++ b/panel/dist/css/chat_message.css
@@ -149,6 +149,7 @@
 
 .divider {
   margin-right: 0px;
+  margin-top: 2px;
   opacity: 0.2;
 }
 
diff --git a/panel/io/convert.py b/panel/io/convert.py
index ebe2412efc..3a909c2184 100644
--- a/panel/io/convert.py
+++ b/panel/io/convert.py
@@ -2,7 +2,6 @@
 
 import base64
 import concurrent.futures
-import dataclasses
 import json
 import os
 import pathlib
@@ -12,7 +11,6 @@
 
 import bokeh
 
-from bokeh.application.application import SessionContext
 from bokeh.application.handlers.code import CodeHandler
 from bokeh.core.json_encoder import serialize_json
 from bokeh.core.templates import FILE, MACROS, get_env
@@ -25,6 +23,7 @@
 from .. import __version__, config
 from ..util import base_version, escape
 from .application import Application, build_single_handler_application
+from .document import MockSessionContext
 from .loading import LOADING_INDICATOR_CSS_CLASS
 from .mime_render import find_requirements
 from .resources import (
@@ -121,32 +120,6 @@
 </script>
 """
 
-@dataclasses.dataclass
-class Request:
-    headers : dict
-    cookies : dict
-    arguments : dict
-
-
-class MockSessionContext(SessionContext):
-
-    def __init__(self, *args, document=None, **kwargs):
-        self._document = document
-        super().__init__(*args, server_context=None, session_id=None, **kwargs)
-
-    def with_locked_document(self, *args):
-        return
-
-    @property
-    def destroyed(self) -> bool:
-        return False
-
-    @property
-    def request(self):
-        return Request(headers={}, cookies={}, arguments={})
-
-
-
 def make_index(files, title=None, manifest=True):
     if manifest:
         manifest = 'site.webmanifest'
diff --git a/panel/io/document.py b/panel/io/document.py
index dd0d8b629a..ea03602e23 100644
--- a/panel/io/document.py
+++ b/panel/io/document.py
@@ -75,6 +75,10 @@ def __init__(self, *args, document=None, **kwargs):
     def with_locked_document(self, *args):
         return
 
+    @property
+    def session(self):
+        return None
+
     @property
     def destroyed(self) -> bool:
         return False
diff --git a/panel/io/ipywidget.py b/panel/io/ipywidget.py
index 24be606f25..7cf01502c3 100644
--- a/panel/io/ipywidget.py
+++ b/panel/io/ipywidget.py
@@ -90,8 +90,8 @@ def _on_widget_constructed(widget, doc=None):
     if widget._model_id is not None:
         args['comm_id'] = widget._model_id
     try:
+        _IPyComm.kernel = kernel
         widget.comm = _IPyComm(**args)
-        widget.comm.kernel = kernel
     except Exception as e:
         if 'PANEL_IPYWIDGET' not in os.environ:
             raise e
diff --git a/pixi.toml b/pixi.toml
index 94e55f7c1e..2b514e150a 100644
--- a/pixi.toml
+++ b/pixi.toml
@@ -177,16 +177,18 @@ test-type = 'mypy panel'
 [feature.doc.activation.env]
 MOZ_HEADLESS = "1"
 PANEL_IPYWIDGET = "1"
+OBJC_DISABLE_INITIALIZE_FORK_SAFETY = "YES"
 
 [feature.doc.dependencies]
 lxml = "*"
-nbsite = ">=0.8.4"
+nbsite = ">=0.8.6rc1"
 selenium = "*"
 
 [feature.doc.tasks]
 _docs-refmanual = 'python ./doc/generate_modules.py panel -d ./doc/api -n panel -e tests'
 _docs-convert-gallery = 'python scripts/gallery/convert_gallery.py'
-_docs-generate = 'nbsite build --what=html --output=builtdocs --org holoviz --project-name panel'
+_docs-generate = 'nbsite build --what=html --output=builtdocs --org holoviz --project-name panel --disable-parallel'
+_docs-generate-parallel = 'nbsite build --what=html --output=builtdocs --org holoviz --project-name panel'
 _docs-copy-panel-dist = 'cp -r ./panel/dist ./builtdocs/panel_dist'
 _docs-pyodide = 'panel convert examples/gallery/*.ipynb doc/how_to/*/examples/*.md --to pyodide-worker --out ./builtdocs/pyodide/ --pwa --index --requirements doc/pyodide_dependencies.json --exclude examples/gallery/vtk*.ipynb'
 docs-server = 'python -m http.server 5500 --directory ./builtdocs'
@@ -200,6 +202,15 @@ depends_on = [
     '_docs-pyodide',
 ]
 
+[feature.doc.tasks.docs-build-parallel]
+depends_on = [
+    '_docs-refmanual',
+    '_docs-convert-gallery',
+    '_docs-generate-parallel',
+    '_docs-copy-panel-dist',
+    '_docs-pyodide',
+]
+
 # =============================================
 # ================== BUILD ====================
 # =============================================

From 801a0340a6e9c3808077b08a470c0f7367701020 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 12 Sep 2024 18:48:24 +0200
Subject: [PATCH 066/164] Bump panel.js version to 1.5.0-rc.2

---
 panel/package-lock.json | 13 ++++++-------
 panel/package.json      |  4 ++--
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index 0280af4119..cc81a06a2b 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-rc.1",
+  "version": "1.5.0-rc.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.0-rc.1",
+      "version": "1.5.0-rc.2",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@bokeh/bokehjs": "3.5.1",
+        "@bokeh/bokehjs": "3.5.2",
         "@types/debounce": "^1.2.0",
         "@types/gl-matrix": "^2.4.5",
         "ace-code": "^1.24.1",
@@ -42,10 +42,9 @@
       }
     },
     "node_modules/@bokeh/bokehjs": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/@bokeh/bokehjs/-/bokehjs-3.5.1.tgz",
-      "integrity": "sha512-mxtmZxRppVUydble18UsFcff5HYUTsqhZMqGLVjE09eTak7cqRQXfF4v94EqwSaCwwkad6vg0kl0lF+rY9BiXw==",
-      "license": "BSD-3-Clause",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@bokeh/bokehjs/-/bokehjs-3.5.2.tgz",
+      "integrity": "sha512-XSlCGfKSQ0U70jJdDtbbs7aPN5uXoIv6/jmh0KHjZoBiZI8FaoEZZgduccH2Kegka7fi4HvJ9kuebwMAXTNZaA==",
       "workspaces": [
         "./make",
         "./src/compiler",
diff --git a/panel/package.json b/panel/package.json
index c19a84e0a3..fa6d95cb88 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-rc.1",
+  "version": "1.5.0-rc.2",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "https://github.com/holoviz/panel.git"
   },
   "dependencies": {
-    "@bokeh/bokehjs": "3.5.1",
+    "@bokeh/bokehjs": "3.5.2",
     "@types/debounce": "^1.2.0",
     "@types/gl-matrix": "^2.4.5",
     "ace-code": "^1.24.1",

From 4266a814a541c9bc8bccb6a9b1a07044b57131a8 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 12 Sep 2024 18:56:39 +0200
Subject: [PATCH 067/164] Add WebLLM to index

---
 doc/gallery/index.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/doc/gallery/index.md b/doc/gallery/index.md
index 1051277d95..6ef3ee8357 100644
--- a/doc/gallery/index.md
+++ b/doc/gallery/index.md
@@ -173,6 +173,19 @@ Interactively apply a XGBoost classifier on the Iris dataset.
 [See source](xgboost_classifier)
 :::
 
+:::{grid-item-card} WebLLM ChatInterface
+
+```{image} https://assets.holoviz.org/panel/gallery/WebLLM.png
+:target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/webllm
+:width: 100%
+```
+
+Interact with an LLM running in your browser using the `ChatInterface`.
++++
+[See source](WebLLM)
+:::
+
+
 :::{grid-item-card} Altair Brushing
 
 ```{image} https://assets.holoviz.org/panel/gallery/altair_brushing.png
@@ -280,6 +293,7 @@ streaming_videostream
 vtk_interactive
 vtk_slicer
 vtk_warp
+WebLLM
 windturbines
 xgboost_classifier
 ```

From c299388edab3f09cfd2b89a47ad4a0ad565785e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Thu, 12 Sep 2024 19:11:30 +0200
Subject: [PATCH 068/164] Add conda-forge to conda build

---
 scripts/conda/build.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/conda/build.sh b/scripts/conda/build.sh
index 5274ea761e..86391b70e2 100755
--- a/scripts/conda/build.sh
+++ b/scripts/conda/build.sh
@@ -19,6 +19,6 @@ else:
     print('bokeh')
 ")
 
-conda build scripts/conda/recipe --no-anaconda-upload --no-verify -c $BK_CHANNEL
+conda build scripts/conda/recipe --no-anaconda-upload --no-verify -c "$BK_CHANNEL" -c conda-forge
 
 mv "$CONDA_PREFIX/conda-bld/noarch/$PACKAGE-$VERSION-py_0.tar.bz2" dist

From 063b9b7eeda6cc1c2992465b20eec923fb598fc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Thu, 12 Sep 2024 19:13:32 +0200
Subject: [PATCH 069/164] Update panel.js to 1.5.0-rc.2


From b00840cca4a4775e0352d6258b10e81fa65dc225 Mon Sep 17 00:00:00 2001
From: Andrew <15331990+ahuang11@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:39:00 -0700
Subject: [PATCH 070/164] Remove divider fix layout (#7266)

* Tighten up ChatMessage layout

* remove divider and fix layout of icons

* remove divider and fix layout of icons

---------

Co-authored-by: Philipp Rudiger <prudiger@anaconda.com>
---
 panel/chat/icon.py                     |  6 ++++++
 panel/chat/message.py                  | 13 -------------
 panel/dist/css/chat_copy_icon.css      |  2 +-
 panel/dist/css/chat_message.css        |  6 ------
 panel/dist/css/chat_reaction_icons.css |  3 ++-
 panel/tests/chat/test_message.py       |  8 +-------
 6 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/panel/chat/icon.py b/panel/chat/icon.py
index c9aea8cbda..9637dbdbce 100644
--- a/panel/chat/icon.py
+++ b/panel/chat/icon.py
@@ -6,6 +6,7 @@
 
 import param
 
+from .._param import Margin
 from ..io.resources import CDN_DIST
 from ..layout import Column, Panel
 from ..reactive import ReactiveHTML
@@ -41,6 +42,11 @@ class ChatReactionIcons(CompositeWidget):
 
     css_classes = param.List(default=["reaction-icons"], doc="The CSS classes of the widget.")
 
+    margin = Margin(default=0, doc="""
+        Allows to create additional space around the component. May
+        be specified as a two-tuple of the form (vertical, horizontal)
+        or a four-tuple (top, right, bottom, left).""")
+
     options = param.Dict(default={"favorite": "heart"}, doc="""
         A key-value pair of reaction values and their corresponding tabler icon names
         found on https://tabler-icons.io.""")
diff --git a/panel/chat/message.py b/panel/chat/message.py
index d761a166c5..af67993355 100644
--- a/panel/chat/message.py
+++ b/panel/chat/message.py
@@ -266,8 +266,6 @@ def __init__(self, object=None, **params):
         self._build_layout()
 
     def _build_layout(self):
-        self._icon_divider = HTML(" | ", width=1, css_classes=["divider"])
-
         self._left_col = left_col = Column(
             self._render_avatar(),
             max_width=60,
@@ -334,7 +332,6 @@ def _build_layout(self):
 
         self._icons_row = Row(
             self.chat_copy_icon,
-            self._icon_divider,
             self._render_reaction_icons(),
             css_classes=["icons"],
             sizing_mode="stretch_width",
@@ -558,11 +555,6 @@ def _render_reaction_icons(self):
 
     def _update_reaction_icons(self, _):
         self._icons_row[-1] = self._render_reaction_icons()
-        self._icon_divider.visible = (
-            len(self.reaction_icons.options) > 0 and
-            self.show_reaction_icons and
-            self.chat_copy_icon.visible
-        )
 
     def _update(self, ref, old_models):
         """
@@ -605,14 +597,9 @@ def _update_chat_copy_icon(self):
         if isinstance(object_panel, str) and self.show_copy_icon:
             self.chat_copy_icon.value = object_panel
             self.chat_copy_icon.visible = True
-            self._icon_divider.visible = (
-                len(self.reaction_icons.options) > 0 and
-                self.show_reaction_icons
-            )
         else:
             self.chat_copy_icon.value = ""
             self.chat_copy_icon.visible = False
-            self._icon_divider.visible = False
 
     def _cleanup(self, root=None) -> None:
         """
diff --git a/panel/dist/css/chat_copy_icon.css b/panel/dist/css/chat_copy_icon.css
index 6af21dc4ca..034b5c955d 100644
--- a/panel/dist/css/chat_copy_icon.css
+++ b/panel/dist/css/chat_copy_icon.css
@@ -1,3 +1,3 @@
 :host {
-  margin-top: 8px;
+  margin-top: 4px;
 }
diff --git a/panel/dist/css/chat_message.css b/panel/dist/css/chat_message.css
index 80fe23976e..8220b2ed0b 100644
--- a/panel/dist/css/chat_message.css
+++ b/panel/dist/css/chat_message.css
@@ -147,12 +147,6 @@
   line-height: 0.9em;
 }
 
-.divider {
-  margin-right: 0px;
-  margin-top: 2px;
-  opacity: 0.2;
-}
-
 .copy-icon {
   margin-left: 10px;
 }
diff --git a/panel/dist/css/chat_reaction_icons.css b/panel/dist/css/chat_reaction_icons.css
index ea0b116a10..4d57653f9d 100644
--- a/panel/dist/css/chat_reaction_icons.css
+++ b/panel/dist/css/chat_reaction_icons.css
@@ -1,4 +1,5 @@
 :host {
-  margin-top: 4px;
   width: fit-content;
+  margin-top: 2px;
+  margin-left: 3px;
 }
diff --git a/panel/tests/chat/test_message.py b/panel/tests/chat/test_message.py
index 53c74320a2..29870587bc 100644
--- a/panel/tests/chat/test_message.py
+++ b/panel/tests/chat/test_message.py
@@ -54,7 +54,7 @@ def test_layout(self):
         assert isinstance(object_pane, Markdown)
         assert object_pane.object == "ABC"
 
-        icons = columns[1][4][2]
+        icons = columns[1][4][1]
         assert isinstance(icons, ChatReactionIcons)
 
         footer_col = columns[1][3]
@@ -81,13 +81,10 @@ def test_reaction_icons_dynamic(self):
 
         message.reaction_icons = ChatReactionIcons(options={"like": "thumb-up"})
         assert message._icons_row[-1] == message.reaction_icons
-        assert message._icon_divider.visible
 
         message.reaction_icons = ChatReactionIcons(options={})
-        assert not message._icon_divider.visible
 
         message = ChatMessage("hi", reaction_icons={})
-        assert not message._icon_divider.visible
 
     def test_reactions_link(self):
         # on init
@@ -329,20 +326,17 @@ def test_chat_copy_icon_text_widget(self, widget):
         message = ChatMessage(object=widget(value="testing"))
         assert message.chat_copy_icon.visible
         assert message.chat_copy_icon.value == "testing"
-        assert message._icon_divider.visible
 
     def test_chat_copy_icon_disabled(self):
         message = ChatMessage(object="testing", show_copy_icon=False)
         assert not message.chat_copy_icon.visible
         assert not message.chat_copy_icon.value
-        assert not message._icon_divider.visible
 
     @pytest.mark.parametrize("component", [Column, FileInput])
     def test_chat_copy_icon_not_string(self, component):
         message = ChatMessage(object=component())
         assert not message.chat_copy_icon.visible
         assert not message.chat_copy_icon.value
-        assert not message._icon_divider.visible
 
     def test_serialize_text_prefix_with_viewable_type(self):
         message = ChatMessage(Markdown("string"))

From 203a2bedaebb27c116dc4ae1b7ec7d0651a0aa7a Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 13 Sep 2024 11:34:02 +0200
Subject: [PATCH 071/164] Fix deckgl_game_of_life issues

---
 examples/gallery/deckgl_game_of_life.ipynb |  2 +-
 panel/models/deckgl.ts                     | 22 +++++++++++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/examples/gallery/deckgl_game_of_life.ipynb b/examples/gallery/deckgl_game_of_life.ipynb
index f1748f3440..251d033cbe 100644
--- a/examples/gallery/deckgl_game_of_life.ipynb
+++ b/examples/gallery/deckgl_game_of_life.ipynb
@@ -126,7 +126,7 @@
     "        \"zoom\": 13\n",
     "    },\n",
     "    \"layers\": [points],\n",
-    "    \"mapStyle\": \"\",\n",
+    "    \"mapStyle\": None,\n",
     "    \"views\": [\n",
     "        {\n",
     "            \"@@type\": \"MapView\",\n",
diff --git a/panel/models/deckgl.ts b/panel/models/deckgl.ts
index 7486dbbec7..abfc0cdd2a 100644
--- a/panel/models/deckgl.ts
+++ b/panel/models/deckgl.ts
@@ -46,6 +46,7 @@ export class DeckGLPlotView extends LayoutDOMView {
   _map: any
   _layer_map: any
   _view_cb: any
+  _initialized: boolean = false
 
   override connect_signals(): void {
     super.connect_signals()
@@ -218,7 +219,9 @@ export class DeckGLPlotView extends LayoutDOMView {
       this.jsonConverter.mergeConfiguration(configuration)
       const props = this.jsonConverter.convert(jsonInput)
       const getTooltip = makeTooltip(tooltip, props.layers)
-      if (props.mapStyle && props.mapStyle.includes("carto")) {
+      if (props.mapStyle === null) {
+	props.map = null
+      } else if (props.mapStyle.includes("carto")) {
         this._map = new (window as any).maplibregl.Map({
           container,
           style: props.mapStyle,
@@ -267,15 +270,28 @@ export class DeckGLPlotView extends LayoutDOMView {
       })
     }
     this.shadow_el.appendChild(container)
+    this._initialized = false
   }
 
-  override after_layout(): void {
-    super.after_layout()
+  resize(): void {
     this.deckGL.redraw(true)
     if (this._map) {
       this._map.resize()
     }
   }
+
+  override after_layout(): void {
+    super.after_layout()
+    if (!this._initialized) {
+      this.resize()
+    }
+    this._initialized = true
+  }
+
+  override after_resize(): void {
+    super.after_resize()
+    this.resize()
+  }
 }
 
 export namespace DeckGLPlot {

From 82f5abb13ac09545a3b16cbf20c7262d4228150c Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 13 Sep 2024 11:46:43 +0200
Subject: [PATCH 072/164] Gallery improvements (#7267)

* Fix gallery deployment

* Improve WebLLM example

* Add description
---
 examples/gallery/WebLLM.ipynb         | 85 +++++++++++++++++++++------
 examples/gallery/anaconda-project.yml |  7 ++-
 2 files changed, 71 insertions(+), 21 deletions(-)

diff --git a/examples/gallery/WebLLM.ipynb b/examples/gallery/WebLLM.ipynb
index 4bf7da8892..e2740de81e 100644
--- a/examples/gallery/WebLLM.ipynb
+++ b/examples/gallery/WebLLM.ipynb
@@ -13,7 +13,7 @@
     "\n",
     "from panel.custom import JSComponent, ESMEvent\n",
     "\n",
-    "pn.extension(template='material')"
+    "pn.extension('mathjax', template='material')"
    ]
   },
   {
@@ -31,12 +31,12 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "\n",
     "MODELS = {\n",
-    "    'Mistral-7b-Instruct': 'Mistral-7B-Instruct-v0.3-q4f16_1-MLC',\n",
-    "    'SmolLM': 'SmolLM-360M-Instruct-q4f16_1-MLC',\n",
-    "    'Gemma-2b': 'gemma-2-2b-it-q4f16_1-MLC',\n",
-    "    'Llama-3.1-8b-Instruct': 'Llama-3.1-8B-Instruct-q4f32_1-MLC-1k'\n",
+    "    'SmolLM (130MB)': 'SmolLM-135M-Instruct-q4f16_1-MLC',\n",
+    "    'TinyLlama-1.1B-Chat (675 MB)': 'TinyLlama-1.1B-Chat-v1.0-q4f16_1-MLC-1k',\n",
+    "    'Gemma-2b (1895 MB)': 'gemma-2-2b-it-q4f16_1-MLC',\n",
+    "    'Mistral-7b-Instruct (4570 MB)': 'Mistral-7B-Instruct-v0.3-q4f16_1-MLC',\n",
+    "    'Llama-3.1-8b-Instruct (4598 MB)': 'Llama-3-8B-Instruct-q4f16_1-MLC-1k',\n",
     "}\n",
     "\n",
     "class WebLLM(JSComponent):\n",
@@ -44,12 +44,20 @@
     "    loaded = param.Boolean(default=False, doc=\"\"\"\n",
     "        Whether the model is loaded.\"\"\")\n",
     "\n",
-    "    model = param.Selector(default='SmolLM-360M-Instruct-q4f16_1-MLC', objects=MODELS)\n",
+    "    history = param.Integer(default=3)\n",
     "\n",
-    "    temperature = param.Number(default=1, bounds=(0, 2))\n",
+    "    status = param.Dict(default={'text': '', 'progress': 0})\n",
     "\n",
     "    load_model = param.Event()\n",
+    "\n",
+    "    model = param.Selector(default='SmolLM-135M-Instruct-q4f16_1-MLC', objects=MODELS)\n",
+    "\n",
+    "    running = param.Boolean(default=False, doc=\"\"\"\n",
+    "        Whether the LLM is currently running.\"\"\")\n",
     "    \n",
+    "    temperature = param.Number(default=1, bounds=(0, 2), doc=\"\"\"\n",
+    "        Temperature of the model completions.\"\"\")\n",
+    "\n",
     "    _esm = \"\"\"\n",
     "    import * as webllm from \"https://esm.run/@mlc-ai/web-llm\";\n",
     "\n",
@@ -57,10 +65,16 @@
     "\n",
     "    export async function render({ model }) {\n",
     "      model.on(\"msg:custom\", async (event) => {\n",
-    "        console.log(event)\n",
     "        if (event.type === 'load') {\n",
     "          if (!engines.has(model.model)) {\n",
-    "            engines.set(model.model, await webllm.CreateMLCEngine(model.model))\n",
+    "            const initProgressCallback = (status) => {\n",
+    "              model.status = status\n",
+    "            }\n",
+    "            const mlc = await webllm.CreateMLCEngine(\n",
+    "               model.model,\n",
+    "               {initProgressCallback}\n",
+    "            )\n",
+    "            engines.set(model.model, mlc)\n",
     "          }\n",
     "          model.loaded = true\n",
     "        } else if (event.type === 'completion') {\n",
@@ -73,7 +87,11 @@
     "            temperature: model.temperature ,\n",
     "            stream: true,\n",
     "          })\n",
+    "          model.running = true\n",
     "          for await (const chunk of chunks) {\n",
+    "            if (!model.running) {\n",
+    "              break\n",
+    "            }\n",
     "            model.send_msg(chunk.choices[0])\n",
     "          }\n",
     "        }\n",
@@ -83,6 +101,8 @@
     "\n",
     "    def __init__(self, **params):\n",
     "        super().__init__(**params)\n",
+    "        if pn.state.location:\n",
+    "            pn.state.location.sync(self, {'model': 'model'})\n",
     "        self._buffer = []\n",
     "\n",
     "    @param.depends('load_model', watch=True)\n",
@@ -93,14 +113,14 @@
     "    @param.depends('loaded', watch=True)\n",
     "    def _loaded(self):\n",
     "        self.loading = False\n",
-    "        self.param.load_model.constant = True\n",
     "\n",
     "    @param.depends('model', watch=True)\n",
     "    def _update_load_model(self):\n",
-    "        self.param.load_model.constant = False\n",
+    "        self.loaded = False\n",
     "\n",
     "    def _handle_msg(self, msg):\n",
-    "        self._buffer.insert(0, msg)\n",
+    "        if self.running:\n",
+    "            self._buffer.insert(0, msg)\n",
     "\n",
     "    async def create_completion(self, msgs):\n",
     "        self._send_msg({'type': 'completion', 'messages': msgs})\n",
@@ -119,21 +139,34 @@
     "\n",
     "    async def callback(self, contents: str, user: str):\n",
     "        if not self.loaded:\n",
-    "            yield f'Model `{self.model}` is loading.' if self.param.load_model.constant else 'Load the model'\n",
+    "            if self.loading:\n",
+    "                yield pn.pane.Markdown(\n",
+    "                    f'## `{self.model}`\\n\\n' + self.param.status.rx()['text']\n",
+    "                )\n",
+    "            else:\n",
+    "                yield 'Load the model'\n",
     "            return\n",
+    "        self.running = False\n",
+    "        self._buffer.clear()\n",
     "        message = \"\"\n",
     "        async for chunk in llm.create_completion([{'role': 'user', 'content': contents}]):\n",
     "            message += chunk['delta'].get('content', '')\n",
     "            yield message\n",
     "\n",
     "    def menu(self):\n",
+    "        status = self.param.status.rx()\n",
     "        return pn.Column(\n",
     "            pn.widgets.Select.from_param(self.param.model, sizing_mode='stretch_width'),\n",
     "            pn.widgets.FloatSlider.from_param(self.param.temperature, sizing_mode='stretch_width'),\n",
     "            pn.widgets.Button.from_param(\n",
     "                self.param.load_model, sizing_mode='stretch_width',\n",
-    "                loading=self.param.loading\n",
-    "            )\n",
+    "                disabled=self.param.loaded.rx().rx.or_(self.param.loading)\n",
+    "            ),\n",
+    "            pn.indicators.Progress(\n",
+    "                value=(status['progress']*100).rx.pipe(int), visible=self.param.loading,\n",
+    "                sizing_mode='stretch_width'\n",
+    "            ),\n",
+    "            pn.pane.Markdown(status['text'], visible=self.param.loading)\n",
     "        )"
    ]
   },
@@ -154,7 +187,21 @@
    "source": [
     "llm = WebLLM()\n",
     "\n",
-    "pn.Column(llm.menu(), llm).servable(area='sidebar')"
+    "intro = pn.pane.Alert(\"\"\"\n",
+    "`WebLLM` runs large-language models entirely in your browser.\n",
+    "When visiting the application the first time the model has\n",
+    "to be downloaded and loaded into memory, which may take \n",
+    "some time. Models are ordered by size (and capability),\n",
+    "e.g. SmolLLM is very quick to download but produces poor\n",
+    "quality output while Mistral-7b will take a while to\n",
+    "download but produces much higher quality output.\n",
+    "\"\"\".replace('\\n', ' '))\n",
+    "\n",
+    "pn.Column(\n",
+    "    llm.menu(),\n",
+    "    intro,\n",
+    "    llm\n",
+    ").servable(area='sidebar')"
    ]
   },
   {
@@ -179,7 +226,9 @@
     "    respond=False,\n",
     ")\n",
     "\n",
-    "chat_interface.servable(title='WebLLM')"
+    "llm.param.watch(lambda e: chat_interface.send(f'Loaded `{e.obj.model}`, start chatting!', user='System', respond=False), 'loaded')\n",
+    "\n",
+    "pn.Row(chat_interface).servable(title='WebLLM')"
    ]
   }
  ],
diff --git a/examples/gallery/anaconda-project.yml b/examples/gallery/anaconda-project.yml
index 090c4dee3b..186d4c6bcd 100644
--- a/examples/gallery/anaconda-project.yml
+++ b/examples/gallery/anaconda-project.yml
@@ -4,12 +4,12 @@ description: An environment to serve all Panel gallery examples
 commands:
   prod:
     description: Serve the prod Panel gallery
-    unix: bokeh sampledata && sleep 60 && panel serve *.ipynb --static-dirs thumbnails=thumbnails --reuse-sessions --global-loading-spinner --liveness --num-procs 8
+    unix: panel serve *.ipynb --static-dirs thumbnails=thumbnails --reuse-sessions --global-loading-spinner --liveness --num-procs 8
     supports_http_options: true
     env_spec: prod
   dev:
     description: Serve the dev Panel gallery
-    unix: bokeh sampledata && sleep 60 && panel serve *.ipynb --static-dirs thumbnails=thumbnails --reuse-sessions --global-loading-spinner --liveness --num-procs 2
+    unix: panel serve *.ipynb --static-dirs thumbnails=thumbnails --reuse-sessions --global-loading-spinner --liveness --num-procs 2
     supports_http_options: true
     env_spec: dev
 
@@ -22,7 +22,8 @@ variables:
 
 packages: &pkgs
   - python >=3.10.13
-  - panel >=1.3.8
+  - panel >=1.5.0rc2
+  - bokeh_sampledata
   - holoviews >=1.18.2
   - nbconvert
   - pandas >=2.2.0

From 7aeebd3e2f140f5f5db25e95be70beff0112b914 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 13 Sep 2024 12:12:27 +0200
Subject: [PATCH 073/164] Fix detection of old Bokeh in notebook load script
 (#7269)

* Fix detection of old Bokeh in notebook load script

* Handle URI escaping
---
 panel/_templates/autoload_panel_js.js | 70 ++++++++++++++-------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/panel/_templates/autoload_panel_js.js b/panel/_templates/autoload_panel_js.js
index 01d9ade156..2137cf265c 100644
--- a/panel/_templates/autoload_panel_js.js
+++ b/panel/_templates/autoload_panel_js.js
@@ -23,10 +23,10 @@ calls it with the rendered model.
     return new Date();
   }
 
-  var force = {{ force|default(False)|json }};
-  var py_version = '{{ version }}'.replace('rc', '-rc.').replace('.dev', '-dev.');
-  var reloading = {{ reloading|default(False)|json }};
-  var Bokeh = root.Bokeh;
+  const force = {{ force|default(False)|json }};
+  const py_version = '{{ version }}'.replace('rc', '-rc.').replace('.dev', '-dev.');
+  const reloading = {{ reloading|default(False)|json }};
+  const Bokeh = root.Bokeh;
 
   if (typeof (root._bokeh_timeout) === "undefined" || force) {
     root._bokeh_timeout = Date.now() + {{ timeout|default(0)|json }};
@@ -61,9 +61,6 @@ calls it with the rendered model.
       run_callbacks();
       return null;
     }
-    if (!reloading) {
-      console.debug("Bokeh: BokehJS not loaded, scheduling load and callback at", now());
-    }
 
     function on_load() {
       root._bokeh_is_loading--;
@@ -78,7 +75,7 @@ calls it with the rendered model.
       console.error("failed to load " + url);
     }
 
-    var skip = [];
+    const skip = [];
     if (window.requirejs) {
       window.requirejs.config({{ config|conffilter }});
       {% for r in requirements %}
@@ -94,17 +91,18 @@ calls it with the rendered model.
       root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length + Object.keys(js_exports).length;
     }
 
-    var existing_stylesheets = []
-    var links = document.getElementsByTagName('link')
-    for (var i = 0; i < links.length; i++) {
-      var link = links[i]
+    const existing_stylesheets = []
+    const links = document.getElementsByTagName('link')
+    for (let i = 0; i < links.length; i++) {
+      const link = links[i]
       if (link.href != null) {
 	existing_stylesheets.push(link.href)
       }
     }
-    for (var i = 0; i < css_urls.length; i++) {
-      var url = css_urls[i];
-      if (existing_stylesheets.indexOf(url) !== -1) {
+    for (let i = 0; i < css_urls.length; i++) {
+      const url = css_urls[i];
+      const escaped = encodeURI(url)
+      if (existing_stylesheets.indexOf(escaped) !== -1) {
 	on_load()
 	continue;
       }
@@ -122,27 +120,28 @@ calls it with the rendered model.
     if (((window.{{ lib }} !== undefined) && (!(window.{{ lib }} instanceof HTMLElement))) || window.requirejs) {
       var urls = {{ urls }};
       for (var i = 0; i < urls.length; i++) {
-        skip.push(urls[i])
+        skip.push(escapeURI(urls[i]))
       }
     }
     {%- endfor %}
     var existing_scripts = []
-    var scripts = document.getElementsByTagName('script')
-    for (var i = 0; i < scripts.length; i++) {
+    const scripts = document.getElementsByTagName('script')
+    for (let i = 0; i < scripts.length; i++) {
       var script = scripts[i]
       if (script.src != null) {
 	existing_scripts.push(script.src)
       }
     }
-    for (var i = 0; i < js_urls.length; i++) {
-      var url = js_urls[i];
-      if (skip.indexOf(url) !== -1 || existing_scripts.indexOf(url) !== -1) {
+    for (let i = 0; i < js_urls.length; i++) {
+      const url = js_urls[i];
+      const escaped = encodeURI(url)
+      if (skip.indexOf(escaped) !== -1 || existing_scripts.indexOf(escaped) !== -1) {
 	if (!window.requirejs) {
 	  on_load();
 	}
 	continue;
       }
-      var element = document.createElement('script');
+      const element = document.createElement('script');
       element.onload = on_load;
       element.onerror = on_error;
       element.async = false;
@@ -150,9 +149,10 @@ calls it with the rendered model.
       console.debug("Bokeh: injecting script tag for BokehJS library: ", url);
       document.head.appendChild(element);
     }
-    for (var i = 0; i < js_modules.length; i++) {
-      var url = js_modules[i];
-      if (skip.indexOf(url) !== -1 || existing_scripts.indexOf(url) !== -1) {
+    for (let i = 0; i < js_modules.length; i++) {
+      const url = js_modules[i];
+      const escaped = encodeURI(url)
+      if (skip.indexOf(escaped) !== -1 || existing_scripts.indexOf(escaped) !== -1) {
 	if (!window.requirejs) {
 	  on_load();
 	}
@@ -168,8 +168,9 @@ calls it with the rendered model.
       document.head.appendChild(element);
     }
     for (const name in js_exports) {
-      var url = js_exports[name];
-      if (skip.indexOf(url) >= 0 || root[name] != null) {
+      const url = js_exports[name];
+      const escaped = encodeURI(url)
+      if (skip.indexOf(escaped) >= 0 || root[name] != null) {
 	if (!window.requirejs) {
 	  on_load();
 	}
@@ -198,11 +199,11 @@ calls it with the rendered model.
     document.body.appendChild(element);
   }
 
-  var js_urls = {{ bundle.js_urls|json }};
-  var js_modules = {{ bundle.js_modules|json }};
-  var js_exports = {{ bundle.js_module_exports|json }};
-  var css_urls = {{ bundle.css_urls|json }};
-  var inline_js = [
+  const js_urls = {{ bundle.js_urls|json }};
+  const js_modules = {{ bundle.js_modules|json }};
+  const js_exports = {{ bundle.js_module_exports|json }};
+  const css_urls = {{ bundle.css_urls|json }};
+  const inline_js = [
     {%- for css in bundle.css_raw %}
     function(Bokeh) {
       inject_raw_css({{ css|json }});
@@ -218,7 +219,7 @@ calls it with the rendered model.
 
   function run_inline_js() {
     if ((root.Bokeh !== undefined) || (force === true)) {
-      for (var i = 0; i < inline_js.length; i++) {
+      for (let i = 0; i < inline_js.length; i++) {
 	try {
           inline_js[i].call(root, root.Bokeh);
 	} catch(e) {
@@ -270,9 +271,10 @@ calls it with the rendered model.
     } else {
       root._bokeh_is_initializing = true
       root._bokeh_onload_callbacks = []
-      var bokeh_loaded = Bokeh != null && (Bokeh.version === py_version || (Bokeh.versions !== undefined && Bokeh.versions.has(py_version)));
+      const bokeh_loaded = root.Bokeh != null && (root.Bokeh.version === py_version || (root.Bokeh.versions !== undefined && root.Bokeh.versions.has(py_version)));
       if (!reloading && !bokeh_loaded) {
 	root.Bokeh = undefined;
+	console.debug("Bokeh: BokehJS not loaded, scheduling load and callback at", now());
       }
       load_libs(css_urls, js_urls, js_modules, js_exports, function() {
 	console.debug("Bokeh: BokehJS plotting callback run at", now());

From 613cae74e6a56cd63cd75ffc4dfa15b241057465 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 13 Sep 2024 12:22:09 +0200
Subject: [PATCH 074/164] Add CHANGELOG for 1.5.0 (#7136)

---
 CHANGELOG.md          | 85 ++++++++++++++++++++++++++++++++++++++++
 doc/about/releases.md | 91 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 176 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a8b3c0c1b0..9d47e80208 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,94 @@
 
 ## Version 1.5.0
 
+This release, while technically a minor release hugely expands the scope of what is possible in Panel. In particular the introduction of the new `panel.custom` module makes it trivially easy to create new JS and React based components using modern tooling, a first-class developer experience and support for compilation and bundling. We are incredibly excited to see which new components you build using this approach. This release also includes native integration with FastAPI, such that you can now run Panel apps natively on an existing FastAPI server. We also introduce a number of new components, improved the developer experience, and squashed a huge number of bugs, particularly for the `Tabulator` component.
+
+We really appreciate all the work that went into this release from 21 separate contributors. In particular we would like to welcome our new contributors @twobitunicorn, @justinwiley, @dwr-psandhu, @jordansamuels, @gandhis1, @jeffrey-hicks, @kdheepak, @sjdemartini, @alfredocarella and @pmeier. Next we want to recognize our returning contributors @cdeil, @Coderambling, @jrycw and @TBym, and finally the dedicated crew of core contributors which includes @Hoxbro, @MarcSkovMadsen, @ahuang11, @maximlt, @mattpap, @jbednar and @philippjfr.
+
+### Features
+
+- Allow building custom ESM based `JSComponent` and `ReactComponent` ([#5593](https://github.com/holoviz/panel/pull/5593))
+- Add `Placeholder` pane ([#6790](https://github.com/holoviz/panel/pull/6790))
+- Add `FileDropper` widget ([#6826](https://github.com/holoviz/panel/pull/6826))
+- Add `ChatStep` component to show/hide intermediate steps ([#6617](https://github.com/holoviz/panel/pull/6617))
+- Add `TimePicker` widget ([#7013](https://github.com/holoviz/panel/pull/7013))
+- Add `PyComponent` baseclass ([#7051](https://github.com/holoviz/panel/pull/7051))
+- Add native support for running Panel on FastAPI server ([#7205](https://github.com/holoviz/panel/pull/7205))
+
+### Enhancements
+
+- Allow callbacks after append and stream ([#6805](https://github.com/holoviz/panel/pull/6805))
+- Enable directory uploads with `FileInput` ([#6808](https://github.com/holoviz/panel/pull/6808))
+- Make `autoreload` robust to syntax errors and empty apps ([#7028](https://github.com/holoviz/panel/pull/7028))
+- Add support for automatically determining optimal `Tabulator.page_size` ([#6978](https://github.com/holoviz/panel/pull/6978))
+- Various typing improvements ([#7081](https://github.com/holoviz/panel/pull/7081), [#7092](https://github.com/holoviz/panel/pull/7092), [#7094](https://github.com/holoviz/panel/pull/7094), [#7132](https://github.com/holoviz/panel/pull/7132))
+- Display value for player ([#7060](https://github.com/holoviz/panel/pull/7060))
+- Optimize rendering and scrolling behavior of `Feed` ([#7101](https://github.com/holoviz/panel/pull/7101))
+- Implement support for multi-index columns in `Tabulator` ([#7108](https://github.com/holoviz/panel/pull/7108))
+- Add placeholder while loading to `ChatFeed` ([#7042](https://github.com/holoviz/panel/pull/7042))
+- Allow streaming chunks to `HTML` and `Markdown` panes ([#7125](https://github.com/holoviz/panel/pull/7125))
+- Show `Player` interval value on click ([#7064](https://github.com/holoviz/panel/pull/7064))
+- Expose `Player` options to scale and hide buttons ([#7065](https://github.com/holoviz/panel/pull/7065))
+- Add `on_keyup` and `value_input` for `CodeEditor` ([#6919](https://github.com/holoviz/panel/pull/6919))
+- Detect WebGL support on `BrowserInfo` ([#6931](https://github.com/holoviz/panel/pull/6931))
+- Tweak `ChatMessage` layout ([#7209](https://github.com/holoviz/panel/pull/7209), [#7266](https://github.com/holoviz/panel/pull/7266))
+- Add nested editor to `Tabulator` ([#7251](https://github.com/holoviz/panel/pull/7251))
+- Support anchor links in `HTML` and `Markdown` panes ([#7258](https://github.com/holoviz/panel/pull/7258), [#7263](https://github.com/holoviz/panel/pull/7263))
+
+### Bug fixes
+
+- Ensure `Gauge` is responsively sized ([#7034](https://github.com/holoviz/panel/pull/7034))
+- Ensure `Tabulator` `sorters` are correctly synced ([#7036](https://github.com/holoviz/panel/pull/7036))
+- Ensure `Tabulator` `selection` is consistent across paginated, sorted and filtered states ([#7058](https://github.com/holoviz/panel/pull/7058))
+- Do not propagate clicks on input elements in `Card` header ([#7057](https://github.com/holoviz/panel/pull/7057))
+- Ensure `Tabulator` range selection applies to current view ([#7063](https://github.com/holoviz/panel/pull/7063))
+- Ensure `Tabulator.selection` is updated when indexes change ([#7066](https://github.com/holoviz/panel/pull/7066))
+- Ensure `Tabulator` can be updated with None value ([#7067](https://github.com/holoviz/panel/pull/7067))
+- Fix issues with PYTHONPATH in Jupyter Preview ([#7059](https://github.com/holoviz/panel/pull/7059))
+- Ensure `Tabulator` styling is correctly applied on multi-index ([#7075](https://github.com/holoviz/panel/pull/7075))
+- Fix various scrolling related Tabulator issues ([#7076](https://github.com/holoviz/panel/pull/7076))
+- Ensure `Tabulator` data is updated after filters are changed ([#7074](https://github.com/holoviz/panel/pull/7074))
+- Allow controlling `DataFrame` pane header and cell alignment ([#7082](https://github.com/holoviz/panel/pull/7082))
+- Highlight active page in `Tabulator` using Fast Design ([#7085](https://github.com/holoviz/panel/pull/7085))
+- Ensure follow behavior works when streaming to paginated `Tabulator` ([#7084](https://github.com/holoviz/panel/pull/7084))
+- Avoid events boomeranging from frontend ([#7093](https://github.com/holoviz/panel/pull/7093))
+- Correctly map `Tabulator` expanded indexes when paginated, filtered and sorted ([#7103](https://github.com/holoviz/panel/pull/7103))
+- Ensure custom `HoloViews` backends do not error out ([#7114](https://github.com/holoviz/panel/pull/7114))
+- Ensure events are always dispatched sequentially ([#7128](https://github.com/holoviz/panel/pull/7128))
+- Ensure `'multiselect'` `Tabulator.header_filter` uses 'in' filter function ([#7111](https://github.com/holoviz/panel/pull/7111))
+- Ensure no content warning is not displayed when template is added ([#7164](https://github.com/holoviz/panel/pull/7164))
+- Make it easy to prompt user for input in `ChatFeed` ([#7148](https://github.com/holoviz/panel/pull/7148))
+- Fix `LaTeX` pane MathJax rendering ([#7188](https://github.com/holoviz/panel/pull/7188))
+- Ensure OAuth expiry is numeric and can be compared ([#7191](https://github.com/holoviz/panel/pull/7191))
+- Correctly detect max depth of `NestedSelect` if level is empty ([#7194](https://github.com/holoviz/panel/pull/7194))
+- Make `--setup`/`--autoreload`/`--warm` work with `--num-procs` ([#6913](https://github.com/holoviz/panel/pull/6913))
+- Ensure error rendering application does not crash server ([#7223](https://github.com/holoviz/panel/pull/7223))
+- Refactor `state.notifications` to fix pyodide ([#7235](https://github.com/holoviz/panel/pull/7235))
+- Handle setting None value on `DateRangePicker` ([#7240](https://github.com/holoviz/panel/pull/7240))
+- Add header_tooltips parameter to `Tabulator` ([#7241](https://github.com/holoviz/panel/pull/7241))
+- Fix issue using `Tabulator.header_filter` with recent Pandas versions ([#7242](https://github.com/holoviz/panel/pull/7242))
+- Fix setting of `Dial` background ([#7261](https://github.com/holoviz/panel/pull/7261))
+- Fix issues when loading multiple times in a Jupyter(Lab) session ([#7269](https://github.com/holoviz/panel/pull/7269))
+
+### Compatibility and Updates
+
+- Update to Bokeh 3.5.x
+- Update `Tabulator` to 6.2.1 ([#6840](https://github.com/holoviz/panel/pull/6840))
+- Update to latest Pyscript (2024.08.01) and Pyodide (0.26.2) ([#7016](https://github.com/holoviz/panel/pull/7016))
+- Add compatibility for latest `Textual` ([#7130](https://github.com/holoviz/panel/pull/7130))
+
+### Documentation
+
+- Update Tabulator.ipynb to show correct version number of `Tabulator` ([#7053](https://github.com/holoviz/panel/pull/7053))
+- Update jupyterlite version ([#7129](https://github.com/holoviz/panel/pull/7129))
+- Describe usage of pyscript editor ([#7017](https://github.com/holoviz/panel/pull/7017))
+- Add pycafe deployment guide ([#7183](https://github.com/holoviz/panel/pull/7183))
+- Add WebLLM example to gallery ([#7265](https://github.com/holoviz/panel/pull/7265))
+
 ### Deprecation and API Warnings
 
 - `PasswordInput` and `TextAreaInput` no longer inherit directly from `TextInput` ([#6593](https://github.com/holoviz/panel/pull/6593))
+- Remove deprecated `panel.depends.param_value_if_widget` function ([#7202](https://github.com/holoviz/panel/pull/7202))
 
 ## Version 1.4.5
 
diff --git a/doc/about/releases.md b/doc/about/releases.md
index 86f72f0f7f..22b6ce5041 100644
--- a/doc/about/releases.md
+++ b/doc/about/releases.md
@@ -2,6 +2,97 @@
 
 See [the HoloViz blog](https://blog.holoviz.org/#category=panel) for a visual summary of the major features added in each release.
 
+## Version 1.5.0
+
+This release, while technically a minor release hugely expands the scope of what is possible in Panel. In particular the introduction of the new `panel.custom` module makes it trivially easy to create new JS and React based components using modern tooling, a first-class developer experience and support for compilation and bundling. We are incredibly excited to see which new components you build using this approach. This release also includes native integration with FastAPI, such that you can now run Panel apps natively on an existing FastAPI server. We also introduce a number of new components, improved the developer experience, and squashed a huge number of bugs, particularly for the `Tabulator` component.
+
+We really appreciate all the work that went into this release from 21 separate contributors. In particular we would like to welcome our new contributors @twobitunicorn, @justinwiley, @dwr-psandhu, @jordansamuels, @gandhis1, @jeffrey-hicks, @kdheepak, @sjdemartini, @alfredocarella and @pmeier. Next we want to recognize our returning contributors @cdeil, @Coderambling, @jrycw and @TBym, and finally the dedicated crew of core contributors which includes @Hoxbro, @MarcSkovMadsen, @ahuang11, @maximlt, @mattpap, @jbednar and @philippjfr.
+
+### Features
+
+- Allow building custom ESM based `JSComponent` and `ReactComponent` ([#5593](https://github.com/holoviz/panel/pull/5593))
+- Add `Placeholder` pane ([#6790](https://github.com/holoviz/panel/pull/6790))
+- Add `FileDropper` widget ([#6826](https://github.com/holoviz/panel/pull/6826))
+- Add `ChatStep` component to show/hide intermediate steps ([#6617](https://github.com/holoviz/panel/pull/6617))
+- Add `TimePicker` widget ([#7013](https://github.com/holoviz/panel/pull/7013))
+- Add `PyComponent` baseclass ([#7051](https://github.com/holoviz/panel/pull/7051))
+- Add native support for running Panel on FastAPI server ([#7205](https://github.com/holoviz/panel/pull/7205))
+
+### Enhancements
+
+- Allow callbacks after append and stream ([#6805](https://github.com/holoviz/panel/pull/6805))
+- Enable directory uploads with `FileInput` ([#6808](https://github.com/holoviz/panel/pull/6808))
+- Make `autoreload` robust to syntax errors and empty apps ([#7028](https://github.com/holoviz/panel/pull/7028))
+- Add support for automatically determining optimal `Tabulator.page_size` ([#6978](https://github.com/holoviz/panel/pull/6978))
+- Various typing improvements ([#7081](https://github.com/holoviz/panel/pull/7081), [#7092](https://github.com/holoviz/panel/pull/7092), [#7094](https://github.com/holoviz/panel/pull/7094), [#7132](https://github.com/holoviz/panel/pull/7132))
+- Display value for player ([#7060](https://github.com/holoviz/panel/pull/7060))
+- Optimize rendering and scrolling behavior of `Feed` ([#7101](https://github.com/holoviz/panel/pull/7101))
+- Implement support for multi-index columns in `Tabulator` ([#7108](https://github.com/holoviz/panel/pull/7108))
+- Add placeholder while loading to `ChatFeed` ([#7042](https://github.com/holoviz/panel/pull/7042))
+- Allow streaming chunks to `HTML` and `Markdown` panes ([#7125](https://github.com/holoviz/panel/pull/7125))
+- Show `Player` interval value on click ([#7064](https://github.com/holoviz/panel/pull/7064))
+- Expose `Player` options to scale and hide buttons ([#7065](https://github.com/holoviz/panel/pull/7065))
+- Add `on_keyup` and `value_input` for `CodeEditor` ([#6919](https://github.com/holoviz/panel/pull/6919))
+- Detect WebGL support on `BrowserInfo` ([#6931](https://github.com/holoviz/panel/pull/6931))
+- Tweak `ChatMessage` layout ([#7209](https://github.com/holoviz/panel/pull/7209), [#7266](https://github.com/holoviz/panel/pull/7266))
+- Add nested editor to `Tabulator` ([#7251](https://github.com/holoviz/panel/pull/7251))
+- Support anchor links in `HTML` and `Markdown` panes ([#7258](https://github.com/holoviz/panel/pull/7258), [#7263](https://github.com/holoviz/panel/pull/7263))
+
+### Bug fixes
+
+- Ensure `Gauge` is responsively sized ([#7034](https://github.com/holoviz/panel/pull/7034))
+- Ensure `Tabulator` `sorters` are correctly synced ([#7036](https://github.com/holoviz/panel/pull/7036))
+- Ensure `Tabulator` `selection` is consistent across paginated, sorted and filtered states ([#7058](https://github.com/holoviz/panel/pull/7058))
+- Do not propagate clicks on input elements in `Card` header ([#7057](https://github.com/holoviz/panel/pull/7057))
+- Ensure `Tabulator` range selection applies to current view ([#7063](https://github.com/holoviz/panel/pull/7063))
+- Ensure `Tabulator.selection` is updated when indexes change ([#7066](https://github.com/holoviz/panel/pull/7066))
+- Ensure `Tabulator` can be updated with None value ([#7067](https://github.com/holoviz/panel/pull/7067))
+- Fix issues with PYTHONPATH in Jupyter Preview ([#7059](https://github.com/holoviz/panel/pull/7059))
+- Ensure `Tabulator` styling is correctly applied on multi-index ([#7075](https://github.com/holoviz/panel/pull/7075))
+- Fix various scrolling related Tabulator issues ([#7076](https://github.com/holoviz/panel/pull/7076))
+- Ensure `Tabulator` data is updated after filters are changed ([#7074](https://github.com/holoviz/panel/pull/7074))
+- Allow controlling `DataFrame` pane header and cell alignment ([#7082](https://github.com/holoviz/panel/pull/7082))
+- Highlight active page in `Tabulator` using Fast Design ([#7085](https://github.com/holoviz/panel/pull/7085))
+- Ensure follow behavior works when streaming to paginated `Tabulator` ([#7084](https://github.com/holoviz/panel/pull/7084))
+- Avoid events boomeranging from frontend ([#7093](https://github.com/holoviz/panel/pull/7093))
+- Correctly map `Tabulator` expanded indexes when paginated, filtered and sorted ([#7103](https://github.com/holoviz/panel/pull/7103))
+- Ensure custom `HoloViews` backends do not error out ([#7114](https://github.com/holoviz/panel/pull/7114))
+- Ensure events are always dispatched sequentially ([#7128](https://github.com/holoviz/panel/pull/7128))
+- Ensure `'multiselect'` `Tabulator.header_filter` uses 'in' filter function ([#7111](https://github.com/holoviz/panel/pull/7111))
+- Ensure no content warning is not displayed when template is added ([#7164](https://github.com/holoviz/panel/pull/7164))
+- Make it easy to prompt user for input in `ChatFeed` ([#7148](https://github.com/holoviz/panel/pull/7148))
+- Fix `LaTeX` pane MathJax rendering ([#7188](https://github.com/holoviz/panel/pull/7188))
+- Ensure OAuth expiry is numeric and can be compared ([#7191](https://github.com/holoviz/panel/pull/7191))
+- Correctly detect max depth of `NestedSelect` if level is empty ([#7194](https://github.com/holoviz/panel/pull/7194))
+- Make `--setup`/`--autoreload`/`--warm` work with `--num-procs` ([#6913](https://github.com/holoviz/panel/pull/6913))
+- Ensure error rendering application does not crash server ([#7223](https://github.com/holoviz/panel/pull/7223))
+- Refactor `state.notifications` to fix pyodide ([#7235](https://github.com/holoviz/panel/pull/7235))
+- Handle setting None value on `DateRangePicker` ([#7240](https://github.com/holoviz/panel/pull/7240))
+- Add header_tooltips parameter to `Tabulator` ([#7241](https://github.com/holoviz/panel/pull/7241))
+- Fix issue using `Tabulator.header_filter` with recent Pandas versions ([#7242](https://github.com/holoviz/panel/pull/7242))
+- Fix setting of `Dial` background ([#7261](https://github.com/holoviz/panel/pull/7261))
+- Fix issues when loading multiple times in a Jupyter(Lab) session ([#7269](https://github.com/holoviz/panel/pull/7269))
+
+### Compatibility and Updates
+
+- Update to Bokeh 3.5.x
+- Update `Tabulator` to 6.2.1 ([#6840](https://github.com/holoviz/panel/pull/6840))
+- Update to latest Pyscript (2024.08.01) and Pyodide (0.26.2) ([#7016](https://github.com/holoviz/panel/pull/7016))
+- Add compatibility for latest `Textual` ([#7130](https://github.com/holoviz/panel/pull/7130))
+
+### Documentation
+
+- Update Tabulator.ipynb to show correct version number of `Tabulator` ([#7053](https://github.com/holoviz/panel/pull/7053))
+- Update jupyterlite version ([#7129](https://github.com/holoviz/panel/pull/7129))
+- Describe usage of pyscript editor ([#7017](https://github.com/holoviz/panel/pull/7017))
+- Add pycafe deployment guide ([#7183](https://github.com/holoviz/panel/pull/7183))
+- Add WebLLM example to gallery ([#7265](https://github.com/holoviz/panel/pull/7265))
+
+### Deprecation and API Warnings
+
+- `PasswordInput` and `TextAreaInput` no longer inherit directly from `TextInput` ([#6593](https://github.com/holoviz/panel/pull/6593))
+- Remove deprecated `panel.depends.param_value_if_widget` function ([#7202](https://github.com/holoviz/panel/pull/7202))
+
 ## Version 1.4.5
 
 Date: 2024-07-25

From ab36228d681740843fae57dd612784c220376bea Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 13 Sep 2024 12:42:26 +0200
Subject: [PATCH 075/164] Fix pre-commit

---
 panel/models/deckgl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/models/deckgl.ts b/panel/models/deckgl.ts
index abfc0cdd2a..fa5312aa01 100644
--- a/panel/models/deckgl.ts
+++ b/panel/models/deckgl.ts
@@ -220,7 +220,7 @@ export class DeckGLPlotView extends LayoutDOMView {
       const props = this.jsonConverter.convert(jsonInput)
       const getTooltip = makeTooltip(tooltip, props.layers)
       if (props.mapStyle === null) {
-	props.map = null
+        props.map = null
       } else if (props.mapStyle.includes("carto")) {
         this._map = new (window as any).maplibregl.Map({
           container,

From 0f43e564c85f8615f166d8ff7209b7fb00c0a464 Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Fri, 13 Sep 2024 16:06:46 +0200
Subject: [PATCH 076/164] update pycafe username (#7271)

---
 doc/how_to/deployment/pycafe.md | 40 ++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/doc/how_to/deployment/pycafe.md b/doc/how_to/deployment/pycafe.md
index 5fa9de646e..92b0fec6b8 100644
--- a/doc/how_to/deployment/pycafe.md
+++ b/doc/how_to/deployment/pycafe.md
@@ -48,39 +48,39 @@ pn.template.FastListTemplate(
 
 After updating the file, save it, and the app will reload instantly.
 
-<iframe src="https://py.cafe/app/Panel_Org/pycafe-reference" title="PyCafe Reference Example" frameborder="0" style="width: 100%; height: 500px;"></iframe>
+<iframe src="https://py.cafe/app/panel-org/pycafe-reference" title="PyCafe Reference Example" frameborder="0" style="width: 100%; height: 500px;"></iframe>
 
 Finally you can click **PUSH** to persist your app and click **SHARE** to share it with the world.
 
 ## Example Gallery
 
-Explore the examples below:
+Explore the [`panel-org`](https://py.cafe/panel-org) gallery examples below:
 
-- [Basic Github App](https://py.cafe/Panel_Org/pycafe-reference) from the [GitHub repository](https://github.com/holoviz/panel/#interactive-data-apps).
+- [Basic Github App](https://py.cafe/panel-org/pycafe-reference) from the [GitHub repository](https://github.com/holoviz/panel/#interactive-data-apps).
 - [Greeting App](https://py.cafe/maartenbreddels/panel-interactive-greeting-app ).
-- [XGBoost Training App](https://py.cafe/Panel_Org/xgboost-training) from the [Convert Apps to WASM Guide](https://panel.holoviz.org/how_to/wasm/convert.html).
+- [XGBoost Training App](https://py.cafe/panel-org/xgboost-training) from the [Convert Apps to WASM Guide](https://panel.holoviz.org/how_to/wasm/convert.html).
 
 ### Basic Tutorials
 
-- [Animation](https://py.cafe/Panel_Org/basic-animation) from the [Build an Animation Tutorial](../../tutorials/basic/build_report.md).
-- [Chatbot](https://py.cafe/Panel_Org/basic-chatbot) from the [Build a Chatbot Tutorial](../../tutorials/basic/build_chatbot.md).
-- [Crossfilter Dashboard](https://py.cafe/Panel_Org/basic-crossfilter-dashboard) from the [Build Crossfiltering Dashboard Tutorial](../../tutorials/basic/build_crossfilter_dashboard.md).
-- [Dashboard](https://py.cafe/Panel_Org/basic-dashboard) from the [Build a Dashboard Tutorial](../../tutorials/basic/build_dashboard.md).
-- [Image Classifier](https://py.cafe/Panel_Org/basic-image-classifier) from the [Build an Image Classifier Tutorial](../../tutorials/basic/build_image_classifier.md).
-- [Monitoring Dashboard](https://py.cafe/Panel_Org/basic-monitoring-dashboard) from the [Build an Monitoring Dashboard Tutorial](../../tutorials/basic/build_monitoring_dashboard.md).
-- [Report](https://py.cafe/Panel_Org/basic-report) from the [Build a Report Tutorial](../../tutorials/basic/build_report.md).
-- [Streaming Dashboard](https://py.cafe/Panel_Org/basic-streaming-dashboard) from the [Build Streaming Dashboard Tutorial](../../tutorials/basic/build_streaming_dashboard.md).
-- [Todo app | Widget approach](https://py.cafe/Panel_Org/basic-todo) from the [Build a todo app](../../tutorials/basic/build_todo.md).
+- [Animation](https://py.cafe/panel-org/basic-animation) from the [Build an Animation Tutorial](../../tutorials/basic/build_report.md).
+- [Chatbot](https://py.cafe/panel-org/basic-chatbot) from the [Build a Chatbot Tutorial](../../tutorials/basic/build_chatbot.md).
+- [Crossfilter Dashboard](https://py.cafe/panel-org/basic-crossfilter-dashboard) from the [Build Crossfiltering Dashboard Tutorial](../../tutorials/basic/build_crossfilter_dashboard.md).
+- [Dashboard](https://py.cafe/panel-org/basic-dashboard) from the [Build a Dashboard Tutorial](../../tutorials/basic/build_dashboard.md).
+- [Image Classifier](https://py.cafe/panel-org/basic-image-classifier) from the [Build an Image Classifier Tutorial](../../tutorials/basic/build_image_classifier.md).
+- [Monitoring Dashboard](https://py.cafe/panel-org/basic-monitoring-dashboard) from the [Build an Monitoring Dashboard Tutorial](../../tutorials/basic/build_monitoring_dashboard.md).
+- [Report](https://py.cafe/panel-org/basic-report) from the [Build a Report Tutorial](../../tutorials/basic/build_report.md).
+- [Streaming Dashboard](https://py.cafe/panel-org/basic-streaming-dashboard) from the [Build Streaming Dashboard Tutorial](../../tutorials/basic/build_streaming_dashboard.md).
+- [Todo app | Widget approach](https://py.cafe/panel-org/basic-todo) from the [Build a todo app](../../tutorials/basic/build_todo.md).
 
 ### Intermediate Tutorials
 
-- [Todo App | Class approach](https://py.cafe/Panel_Org/intermediate-todo-app) from the [Build a todo app](../../tutorials/intermediate/build_todo.md).
+- [Todo App | Class approach](https://py.cafe/panel-org/intermediate-todo-app) from the [Build a todo app](../../tutorials/intermediate/build_todo.md).
 
 ### App Gallery
 
-- [Altair Brushing](https://py.cafe/Panel_Org/altair-brushing) from the [Altair Brushing Tutorial](../../gallery/altair_brushing.ipynb).
-- [hvPlot Explorer](https://py.cafe/Panel_Org/hvplot-explorer) from the [hvPlot Explorer Tutorial](../../gallery/hvplot_explorer.ipynb)
-- [NYC Deck.GL](https://py.cafe/Panel_Org/nyc-deckgl) from the [NYC Deck.Gl Tutorial](../../gallery/nyc_deckgl.ipynb).
-- [Penguin Crossfilter](https://py.cafe/Panel_Org/penguin-crossfilter) from the [Penguin Crossfilter Tutorial](../../gallery/penguin_crossfilter.ipynb)
-- [Portfolio Analyzer](https://py.cafe/Panel_Org/portfolio-analyzer) from the [Portfolio Analyzer Tutorial](../../gallery/portfolio_analyzer.ipynb).
-- [VideoStream Interface](https://py.cafe/Panel_Org/videostream) from the [VideoStream Interface Tutorial](../../gallery/streaming_videostream.ipynb).
+- [Altair Brushing](https://py.cafe/panel-org/altair-brushing) from the [Altair Brushing Tutorial](../../gallery/altair_brushing.ipynb).
+- [hvPlot Explorer](https://py.cafe/panel-org/hvplot-explorer) from the [hvPlot Explorer Tutorial](../../gallery/hvplot_explorer.ipynb)
+- [NYC Deck.GL](https://py.cafe/panel-org/nyc-deckgl) from the [NYC Deck.Gl Tutorial](../../gallery/nyc_deckgl.ipynb).
+- [Penguin Crossfilter](https://py.cafe/panel-org/penguin-crossfilter) from the [Penguin Crossfilter Tutorial](../../gallery/penguin_crossfilter.ipynb)
+- [Portfolio Analyzer](https://py.cafe/panel-org/portfolio-analyzer) from the [Portfolio Analyzer Tutorial](../../gallery/portfolio_analyzer.ipynb).
+- [VideoStream Interface](https://py.cafe/panel-org/videostream) from the [VideoStream Interface Tutorial](../../gallery/streaming_videostream.ipynb).

From bf80ba6a97560d7dacfd8b5755d1e2f852b2cffd Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 13 Sep 2024 18:28:32 +0200
Subject: [PATCH 077/164] Do not load es-module-shim as module (#7270)

---
 panel/_templates/autoload_panel_js.js | 78 +++++++++++++--------------
 panel/io/resources.py                 |  5 +-
 panel/models/esm.py                   |  6 +--
 panel/models/file_dropper.py          | 25 ++++++++-
 panel/tests/io/test_resources.py      |  7 ++-
 5 files changed, 74 insertions(+), 47 deletions(-)

diff --git a/panel/_templates/autoload_panel_js.js b/panel/_templates/autoload_panel_js.js
index 2137cf265c..4d7c9592ab 100644
--- a/panel/_templates/autoload_panel_js.js
+++ b/panel/_templates/autoload_panel_js.js
@@ -80,10 +80,10 @@ calls it with the rendered model.
       window.requirejs.config({{ config|conffilter }});
       {% for r in requirements %}
       require(["{{ r }}"], function({{ exports[r] }}) {
-	{% if r in exports %}
-	window.{{ exports[r] }} = {{ exports[r] }}
-	{% endif %}
-	on_load()
+        {% if r in exports %}
+        window.{{ exports[r] }} = {{ exports[r] }}
+        {% endif %}
+        on_load()
       })
       {% endfor %}
       root._bokeh_is_loading = css_urls.length + {{ requirements|length }};
@@ -96,15 +96,15 @@ calls it with the rendered model.
     for (let i = 0; i < links.length; i++) {
       const link = links[i]
       if (link.href != null) {
-	existing_stylesheets.push(link.href)
+        existing_stylesheets.push(link.href)
       }
     }
     for (let i = 0; i < css_urls.length; i++) {
       const url = css_urls[i];
       const escaped = encodeURI(url)
       if (existing_stylesheets.indexOf(escaped) !== -1) {
-	on_load()
-	continue;
+        on_load()
+        continue;
       }
       const element = document.createElement("link");
       element.onload = on_load;
@@ -120,7 +120,7 @@ calls it with the rendered model.
     if (((window.{{ lib }} !== undefined) && (!(window.{{ lib }} instanceof HTMLElement))) || window.requirejs) {
       var urls = {{ urls }};
       for (var i = 0; i < urls.length; i++) {
-        skip.push(escapeURI(urls[i]))
+        skip.push(encodeURI(urls[i]))
       }
     }
     {%- endfor %}
@@ -129,17 +129,17 @@ calls it with the rendered model.
     for (let i = 0; i < scripts.length; i++) {
       var script = scripts[i]
       if (script.src != null) {
-	existing_scripts.push(script.src)
+        existing_scripts.push(script.src)
       }
     }
     for (let i = 0; i < js_urls.length; i++) {
       const url = js_urls[i];
       const escaped = encodeURI(url)
       if (skip.indexOf(escaped) !== -1 || existing_scripts.indexOf(escaped) !== -1) {
-	if (!window.requirejs) {
-	  on_load();
-	}
-	continue;
+        if (!window.requirejs) {
+          on_load();
+        }
+        continue;
       }
       const element = document.createElement('script');
       element.onload = on_load;
@@ -153,10 +153,10 @@ calls it with the rendered model.
       const url = js_modules[i];
       const escaped = encodeURI(url)
       if (skip.indexOf(escaped) !== -1 || existing_scripts.indexOf(escaped) !== -1) {
-	if (!window.requirejs) {
-	  on_load();
-	}
-	continue;
+        if (!window.requirejs) {
+          on_load();
+        }
+        continue;
       }
       var element = document.createElement('script');
       element.onload = on_load;
@@ -171,10 +171,10 @@ calls it with the rendered model.
       const url = js_exports[name];
       const escaped = encodeURI(url)
       if (skip.indexOf(escaped) >= 0 || root[name] != null) {
-	if (!window.requirejs) {
-	  on_load();
-	}
-	continue;
+        if (!window.requirejs) {
+          on_load();
+        }
+        continue;
       }
       var element = document.createElement('script');
       element.onerror = on_error;
@@ -220,24 +220,24 @@ calls it with the rendered model.
   function run_inline_js() {
     if ((root.Bokeh !== undefined) || (force === true)) {
       for (let i = 0; i < inline_js.length; i++) {
-	try {
+        try {
           inline_js[i].call(root, root.Bokeh);
-	} catch(e) {
-	  if (!reloading) {
-	    throw e;
-	  }
-	}
+        } catch(e) {
+          if (!reloading) {
+            throw e;
+          }
+        }
       }
       // Cache old bokeh versions
       if (Bokeh != undefined && !reloading) {
-	var NewBokeh = root.Bokeh;
-	if (Bokeh.versions === undefined) {
-	  Bokeh.versions = new Map();
-	}
-	if (NewBokeh.version !== Bokeh.version) {
-	  Bokeh.versions.set(NewBokeh.version, NewBokeh)
-	}
-	root.Bokeh = Bokeh;
+        var NewBokeh = root.Bokeh;
+        if (Bokeh.versions === undefined) {
+          Bokeh.versions = new Map();
+        }
+        if (NewBokeh.version !== Bokeh.version) {
+          Bokeh.versions.set(NewBokeh.version, NewBokeh)
+        }
+        root.Bokeh = Bokeh;
       }
       {%- if elementid -%}
       if (force === true) {
@@ -273,12 +273,12 @@ calls it with the rendered model.
       root._bokeh_onload_callbacks = []
       const bokeh_loaded = root.Bokeh != null && (root.Bokeh.version === py_version || (root.Bokeh.versions !== undefined && root.Bokeh.versions.has(py_version)));
       if (!reloading && !bokeh_loaded) {
-	root.Bokeh = undefined;
-	console.debug("Bokeh: BokehJS not loaded, scheduling load and callback at", now());
+        root.Bokeh = undefined;
+        console.debug("Bokeh: BokehJS not loaded, scheduling load and callback at", now());
       }
       load_libs(css_urls, js_urls, js_modules, js_exports, function() {
-	console.debug("Bokeh: BokehJS plotting callback run at", now());
-	run_inline_js();
+        console.debug("Bokeh: BokehJS plotting callback run at", now());
+        run_inline_js();
       });
     }
   }
diff --git a/panel/io/resources.py b/panel/io/resources.py
index e6adc8ada0..35776a214c 100644
--- a/panel/io/resources.py
+++ b/panel/io/resources.py
@@ -761,8 +761,9 @@ def js_files(self):
         from ..config import config
 
         # Gather JS files
-        files = super(Resources, self).js_files
-        self.extra_resources(files, '__javascript__')
+        with set_resource_mode(self.mode):
+            files = super(Resources, self).js_files
+            self.extra_resources(files, '__javascript__')
         files += [js for js in config.js_files.values()]
         if config.design:
             design_js = config.design().resolve_resources(
diff --git a/panel/models/esm.py b/panel/models/esm.py
index 9acc1af200..710452f721 100644
--- a/panel/models/esm.py
+++ b/panel/models/esm.py
@@ -46,13 +46,13 @@ class ReactiveESM(HTMLBox):
 
     importmap = bp.Dict(bp.String, bp.Dict(bp.String, bp.String))
 
-    __javascript_modules_raw__ = [
+    __javascript_raw__ = [
         f"{config.npm_cdn}/es-module-shims@^1.10.0/dist/es-module-shims.min.js"
     ]
 
     @classproperty
-    def __javascript_modules__(cls):
-        return bundled_files(cls, 'javascript_modules')
+    def __javascript__(cls):
+        return bundled_files(cls)
 
 
 class ReactComponent(ReactiveESM):
diff --git a/panel/models/file_dropper.py b/panel/models/file_dropper.py
index 7757fa3abc..44f6f4a64b 100644
--- a/panel/models/file_dropper.py
+++ b/panel/models/file_dropper.py
@@ -49,13 +49,36 @@ class FileDropper(InputWidget):
         f"{config.npm_cdn}/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js",
         f"{config.npm_cdn}/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js",
         f"{config.npm_cdn}/filepond-plugin-pdf-preview/dist/filepond-plugin-pdf-preview.min.js",
-        f"{config.npm_cdn}/filepond@^4/dist/filepond.js"
+        f"{config.npm_cdn}/filepond@^4/dist/filepond.min.js"
     ]
 
     @classproperty
     def __javascript__(cls):
         return bundled_files(cls)
 
+    __js_require__ = {
+        'paths': {
+            "filepond":  f"{config.npm_cdn}/filepond@^4/dist/filepond",
+            "filepond-preview-image": f"{config.npm_cdn}/filepond-plugin-image-preview/dist/filepond-plugin-image-preview",
+            "filepond-validate-size": f"{config.npm_cdn}/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size",
+            "filepond-validate-type": f"{config.npm_cdn}/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type",
+            "filepond-preview-pdf": f"{config.npm_cdn}/filepond-plugin-pdf-preview/dist/filepond-plugin-pdf-preview.min",
+        },
+        'exports': {
+            'filepond': 'FilePond',
+            'filepond-preview-image': 'FilePondPluginImagePreview',
+            'filepond-preview-pdf': 'FilePondPluginPdfPreview',
+            'filepond-validate-size': 'FilePondPluginFileValidateSize',
+            'filepond-validate-type': 'FilePondPluginFileValidateType'
+        }
+    }
+
+    @classproperty
+    def __js_skip__(cls):
+        return {
+            'FilePond': cls.__javascript__[:]
+        }
+
     __css_raw__ = [
         f"{config.npm_cdn}/filepond@^4/dist/filepond.css",
         f"{config.npm_cdn}/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css",
diff --git a/panel/tests/io/test_resources.py b/panel/tests/io/test_resources.py
index 213e6e5ea1..2d997eb83c 100644
--- a/panel/tests/io/test_resources.py
+++ b/panel/tests/io/test_resources.py
@@ -44,6 +44,7 @@ def test_resources_cdn():
     resources = Resources(mode='cdn', minified=True)
     assert resources.js_raw == ['Bokeh.set_log_level("info");']
     assert resources.js_files == [
+        f'https://cdn.holoviz.org/panel/{JS_VERSION}/dist/bundled/reactiveesm/es-module-shims@^1.10.0/dist/es-module-shims.min.js',
         f'https://cdn.bokeh.org/bokeh/{bk_prefix}/bokeh-{bokeh_version}.min.js',
         f'https://cdn.bokeh.org/bokeh/{bk_prefix}/bokeh-gl-{bokeh_version}.min.js',
         f'https://cdn.bokeh.org/bokeh/{bk_prefix}/bokeh-widgets-{bokeh_version}.min.js',
@@ -55,6 +56,7 @@ def test_resources_server_absolute():
     resources = Resources(mode='server', absolute=True, minified=True)
     assert resources.js_raw == ['Bokeh.set_log_level("info");']
     assert resources.js_files == [
+        'http://localhost:5006/static/extensions/panel/bundled/reactiveesm/es-module-shims@^1.10.0/dist/es-module-shims.min.js',
         'http://localhost:5006/static/js/bokeh.min.js',
         'http://localhost:5006/static/js/bokeh-gl.min.js',
         'http://localhost:5006/static/js/bokeh-widgets.min.js',
@@ -66,6 +68,7 @@ def test_resources_server():
     resources = Resources(mode='server', minified=True)
     assert resources.js_raw == ['Bokeh.set_log_level("info");']
     assert resources.js_files == [
+        'static/extensions/panel/bundled/reactiveesm/es-module-shims@^1.10.0/dist/es-module-shims.min.js',
         'static/js/bokeh.min.js',
         'static/js/bokeh-gl.min.js',
         'static/js/bokeh-widgets.min.js',
@@ -84,7 +87,7 @@ def test_resources_model_server(document):
     with set_resource_mode('server'):
         with set_curdoc(document):
             extension('tabulator')
-            assert resources.js_files[:2] == [
+            assert resources.js_files[1:3] == [
                 f'static/extensions/panel/bundled/datatabulator/tabulator-tables@{TABULATOR_VERSION}/dist/js/tabulator.min.js',
                 'static/extensions/panel/bundled/datatabulator/luxon/build/global/luxon.min.js',
             ]
@@ -97,7 +100,7 @@ def test_resources_model_cdn(document):
     with set_resource_mode('cdn'):
         with set_curdoc(document):
             extension('tabulator')
-            assert resources.js_files[:2] == [
+            assert resources.js_files[1:3] == [
                 f'{CDN_DIST}bundled/datatabulator/tabulator-tables@{TABULATOR_VERSION}/dist/js/tabulator.min.js',
                 f'{CDN_DIST}bundled/datatabulator/luxon/build/global/luxon.min.js',
             ]

From d5070c93e14e8b25410704bce5a4e598ed849f13 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 13 Sep 2024 16:08:02 +0200
Subject: [PATCH 078/164] Update WebLLM filename

---
 doc/gallery/index.md                            | 2 +-
 examples/gallery/{WebLLM.ipynb => webllm.ipynb} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename examples/gallery/{WebLLM.ipynb => webllm.ipynb} (100%)

diff --git a/doc/gallery/index.md b/doc/gallery/index.md
index 6ef3ee8357..c489586b75 100644
--- a/doc/gallery/index.md
+++ b/doc/gallery/index.md
@@ -175,7 +175,7 @@ Interactively apply a XGBoost classifier on the Iris dataset.
 
 :::{grid-item-card} WebLLM ChatInterface
 
-```{image} https://assets.holoviz.org/panel/gallery/WebLLM.png
+```{image} https://assets.holoviz.org/panel/gallery/webllm.png
 :target: https://|gallery-endpoint|.holoviz-demo.anaconda.com/webllm
 :width: 100%
 ```
diff --git a/examples/gallery/WebLLM.ipynb b/examples/gallery/webllm.ipynb
similarity index 100%
rename from examples/gallery/WebLLM.ipynb
rename to examples/gallery/webllm.ipynb

From f407a0bc5e620111550c3f9666bfee5503a3352b Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Sat, 14 Sep 2024 00:28:47 +0200
Subject: [PATCH 079/164] More improvements for loading notebook extension
 (#7274)

---
 panel/_templates/autoload_panel_js.js | 26 +++++++++++++++-----------
 panel/config.py                       |  3 +--
 panel/io/notebook.py                  |  2 +-
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/panel/_templates/autoload_panel_js.js b/panel/_templates/autoload_panel_js.js
index 4d7c9592ab..6cedccc192 100644
--- a/panel/_templates/autoload_panel_js.js
+++ b/panel/_templates/autoload_panel_js.js
@@ -28,7 +28,8 @@ calls it with the rendered model.
   const reloading = {{ reloading|default(False)|json }};
   const Bokeh = root.Bokeh;
 
-  if (typeof (root._bokeh_timeout) === "undefined" || force) {
+  // Set a timeout for this load but only if we are not already initializing
+  if (typeof (root._bokeh_timeout) === "undefined" || (force || !root._bokeh_is_initializing)) {
     root._bokeh_timeout = Date.now() + {{ timeout|default(0)|json }};
     root._bokeh_failed_load = false;
   }
@@ -54,10 +55,11 @@ calls it with the rendered model.
     root._bokeh_onload_callbacks.push(callback);
 
     if (root._bokeh_is_loading > 0) {
+      // Don't load bokeh if it is still initializing
       console.debug("Bokeh: BokehJS is being loaded, scheduling callback at", now());
       return null;
-    }
-    if (js_urls.length === 0 && js_modules.length === 0 && Object.keys(js_exports).length === 0) {
+    } else if (js_urls.length === 0 && js_modules.length === 0 && Object.keys(js_exports).length === 0) {
+      // There is nothing to load
       run_callbacks();
       return null;
     }
@@ -71,8 +73,9 @@ calls it with the rendered model.
     }
     window._bokeh_on_load = on_load
 
-    function on_error() {
-      console.error("failed to load " + url);
+    function on_error(e) {
+      const src_el = e.srcElement
+      console.error("failed to load " + (src_el.href || src_el.src));
     }
 
     const skip = [];
@@ -239,11 +242,6 @@ calls it with the rendered model.
         }
         root.Bokeh = Bokeh;
       }
-      {%- if elementid -%}
-      if (force === true) {
-        display_loaded();
-      }
-      {%- endif -%}
     } else if (Date.now() < root._bokeh_timeout) {
       setTimeout(run_inline_js, 100);
     } else if (!root._bokeh_failed_load) {
@@ -262,8 +260,12 @@ calls it with the rendered model.
     // that we do not start loading a newer (Panel>=1.0 and Bokeh>3) version
     // before older versions are fully initialized.
     if (root._bokeh_is_initializing && Date.now() > root._bokeh_timeout) {
+      // If the timeout and bokeh was not successfully loaded we reset
+      // everything and try loading again
+      root._bokeh_timeout = Date.now() + {{ timeout|default(0)|json }};
       root._bokeh_is_initializing = false;
       root._bokeh_onload_callbacks = undefined;
+      root._bokeh_is_loading = 0
       console.log("Bokeh: BokehJS was loaded multiple times but one version failed to initialize.");
       load_or_wait();
     } else if (root._bokeh_is_initializing || (typeof root._bokeh_is_initializing === "undefined" && root._bokeh_onload_callbacks !== undefined)) {
@@ -273,7 +275,9 @@ calls it with the rendered model.
       root._bokeh_onload_callbacks = []
       const bokeh_loaded = root.Bokeh != null && (root.Bokeh.version === py_version || (root.Bokeh.versions !== undefined && root.Bokeh.versions.has(py_version)));
       if (!reloading && !bokeh_loaded) {
-        root.Bokeh = undefined;
+        if (root.Bokeh) {
+          root.Bokeh = undefined;
+        }
         console.debug("Bokeh: BokehJS not loaded, scheduling load and callback at", now());
       }
       load_libs(css_urls, js_urls, js_modules, js_exports, function() {
diff --git a/panel/config.py b/panel/config.py
index 1a41f89ea0..4085177094 100644
--- a/panel/config.py
+++ b/panel/config.py
@@ -840,8 +840,7 @@ def __call__(self, *args, **params):
             else:
                 with param.logging_level('ERROR'):
                     hv.plotting.Renderer.load_nb(config.inline)
-                    if hasattr(hv.plotting.Renderer, '_render_with_panel'):
-                        nb_loaded = True
+                    nb_loaded = True
 
         # Disable simple ids, old state and multiple tabs in notebooks can cause IDs to clash
         bk_settings.simple_ids.set_value(False)
diff --git a/panel/io/notebook.py b/panel/io/notebook.py
index da8b0c8ec8..f0a94575fe 100644
--- a/panel/io/notebook.py
+++ b/panel/io/notebook.py
@@ -126,7 +126,7 @@ def _autoload_js(
             config[key].update(c)
     return AUTOLOAD_NB_JS.render(
         bundle    = bundle,
-        force     = True,
+        force     = not reloading,
         reloading = reloading,
         timeout   = load_timeout,
         config    = config,

From 19025e1e02a3ce49a5b143b5bdeaeadb8a009d9c Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Sat, 14 Sep 2024 01:36:02 +0200
Subject: [PATCH 080/164] Update nbsite pin

---
 pixi.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pixi.toml b/pixi.toml
index 2b514e150a..e96e3704f5 100644
--- a/pixi.toml
+++ b/pixi.toml
@@ -181,7 +181,7 @@ OBJC_DISABLE_INITIALIZE_FORK_SAFETY = "YES"
 
 [feature.doc.dependencies]
 lxml = "*"
-nbsite = ">=0.8.6rc1"
+nbsite = ">=0.8.6rc5"
 selenium = "*"
 
 [feature.doc.tasks]

From 816fcd9937e338594e7a54ba88c72da79e80952d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Sun, 15 Sep 2024 16:22:27 +0200
Subject: [PATCH 081/164] Get mac os CI up and running again (#7282)

---
 .github/workflows/test.yaml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index f330f061b0..baed70a8d0 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -199,6 +199,10 @@ jobs:
         id: install
       - name: Build pyodide wheels
         run: pixi run -e test-ui "python ./scripts/build_pyodide_wheels.py"
+      - name: Set environment variables for macOS
+        if: contains(matrix.os, 'macos')
+        run: |
+          pixi shell-hook -e test-ui >> $HOME/.bashrc
       - name: Launch JupyterLab
         shell: pixi run -e test-ui bash -el {0}
         run: |

From d57d393555bd1838eb866bd3ae862f38b3e8aa12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Sun, 15 Sep 2024 16:22:47 +0200
Subject: [PATCH 082/164] Remove tests folder for pyodide wheel (#7276)

---
 scripts/build_pyodide_wheels.py | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/scripts/build_pyodide_wheels.py b/scripts/build_pyodide_wheels.py
index df9871c2fa..278e392544 100644
--- a/scripts/build_pyodide_wheels.py
+++ b/scripts/build_pyodide_wheels.py
@@ -71,13 +71,16 @@
     raise RuntimeError("Panel wheel not found.")
 panel_wheel = sorted(panel_wheels)[-1]
 
-if bokeh_dev:
-    zin = zipfile.ZipFile(panel_wheel, "r")
-    zout = zipfile.ZipFile(out / os.path.basename(panel_wheel).replace(".dirty", ""), "w")
+with (
+    zipfile.ZipFile(panel_wheel, "r") as zin,
+    zipfile.ZipFile(out / os.path.basename(panel_wheel).replace(".dirty", ""), "w") as zout,
+):
     for item in zin.infolist():
         filename = item.filename
+        if filename.startswith("panel/tests"):
+            continue
         buffer = zin.read(filename)
-        if filename.startswith("panel-") and filename.endswith("METADATA"):
+        if bokeh_dev and filename.startswith("panel-") and filename.endswith("METADATA"):
             lines = buffer.decode("utf-8").split("\n")
             lines = [
                 f"Requires-Dist: {bokeh_requirement}"
@@ -86,8 +89,6 @@
             ]
             buffer = "\n".join(lines).encode('utf-8')
         zout.writestr(item, buffer)
-else:
-    shutil.copyfile(panel_wheel, out / os.path.basename(panel_wheel).replace(".dirty", ""))
 
 bokeh_wheels = PANEL_BASE.glob("build/bokeh-*-py3-none-any.whl")
 

From e41f21d13fdf7dc0e4e2a110e8fa1d7d0581673e Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Mon, 16 Sep 2024 09:48:21 +0200
Subject: [PATCH 083/164] Fix broken docs links (#7279)

---
 doc/about/releases.md                            |  2 +-
 doc/api/cheatsheet.md                            |  2 +-
 doc/conf.py                                      |  2 ++
 .../comparisons/compare_ipywidgets.md            |  2 +-
 .../components/components_overview.md            |  2 +-
 .../components/reactive_html_components.md       |  6 +++---
 doc/explanation/styling/templates_overview.md    | 15 ++++++++-------
 doc/how_to/authentication/configuration.md       |  2 +-
 doc/how_to/authentication/guest_users.md         |  2 +-
 doc/how_to/components/construct_panes.md         |  2 +-
 doc/how_to/concurrency/sync_to_async.md          |  2 +-
 .../custom_components/esm/custom_layout.md       |  2 +-
 doc/how_to/custom_components/index.md            |  2 +-
 .../python/create_custom_widget.md               |  2 +-
 doc/how_to/deployment/pycafe.md                  | 12 ++++++------
 doc/how_to/interactivity/bind_component.md       |  2 +-
 doc/how_to/interactivity/bind_function.md        |  4 ++--
 doc/how_to/interactivity/bind_generators.md      |  2 +-
 doc/how_to/interactivity/hvplot_interactive.md   |  8 ++++----
 doc/how_to/migrate/anywidget/index.md            | 16 ++++++++--------
 doc/how_to/notebook/jupyterlabpreview.md         |  2 +-
 doc/how_to/notebook/layout_builder.md            |  2 +-
 doc/how_to/notebook/other_nb.md                  |  2 +-
 doc/how_to/profiling/profile.md                  |  2 +-
 doc/how_to/streamlit_migration/activity.md       |  2 +-
 doc/how_to/streamlit_migration/layouts.md        |  2 +-
 doc/how_to/streamlit_migration/panes.md          |  4 ++--
 doc/how_to/streamlit_migration/templates.md      |  4 ++--
 doc/how_to/streamlit_migration/widgets.md        |  2 +-
 doc/how_to/styling/echarts.md                    |  2 +-
 doc/how_to/styling/matplotlib.md                 |  2 +-
 doc/how_to/styling/plotly.md                     |  2 +-
 doc/how_to/styling/vega.md                       |  2 +-
 doc/how_to/templates/template_arrange.md         |  2 +-
 doc/how_to/templates/template_modal.md           |  2 +-
 doc/how_to/templates/template_set.md             |  2 +-
 doc/how_to/templates/template_theme.md           |  2 +-
 doc/how_to/wasm/standalone.md                    |  2 +-
 doc/tutorials/basic/build_animation.md           |  2 +-
 doc/tutorials/basic/build_chatbot.md             |  4 ++--
 doc/tutorials/basic/indicators_performance.md    |  8 ++++----
 doc/tutorials/basic/layouts.md                   |  6 +++---
 doc/tutorials/basic/panes.md                     | 16 ++++++++--------
 doc/tutorials/basic/pn_panel.md                  |  8 ++++----
 doc/tutorials/basic/size.md                      |  4 ++--
 doc/tutorials/basic/templates.md                 |  6 +++---
 doc/tutorials/basic/widgets.md                   |  6 +++---
 .../expert/custom_anywidget_components.md        | 10 +++++-----
 doc/tutorials/expert/custom_js_components.md     | 10 +++++-----
 doc/tutorials/intermediate/serve.md              |  4 ++--
 .../custom_components/AnyWidgetComponent.ipynb   | 10 +++++-----
 .../custom_components/JSComponent.ipynb          | 10 +++++-----
 .../custom_components/PyComponent.ipynb          |  4 ++--
 .../custom_components/ReactComponent.ipynb       | 10 +++++-----
 .../reference/custom_components/Viewer.ipynb     |  4 ++--
 examples/reference/indicators/Progress.ipynb     |  2 +-
 examples/reference/layouts/GridSpec.ipynb        |  2 +-
 examples/reference/panes/ReactiveExpr.ipynb      |  2 +-
 examples/reference/templates/Bootstrap.ipynb     |  2 +-
 .../reference/templates/EditableTemplate.ipynb   |  2 +-
 .../reference/templates/FastGridTemplate.ipynb   |  2 +-
 .../reference/templates/FastListTemplate.ipynb   |  2 +-
 examples/reference/templates/GoldenLayout.ipynb  |  2 +-
 examples/reference/templates/Material.ipynb      |  2 +-
 examples/reference/templates/React.ipynb         |  2 +-
 examples/reference/templates/Slides.ipynb        |  2 +-
 examples/reference/templates/Vanilla.ipynb       |  2 +-
 examples/reference/widgets/ArrayInput.ipynb      |  2 +-
 .../reference/widgets/AutocompleteInput.ipynb    |  2 +-
 examples/reference/widgets/Button.ipynb          |  2 +-
 examples/reference/widgets/ButtonIcon.ipynb      |  2 +-
 examples/reference/widgets/CheckBoxGroup.ipynb   |  2 +-
 .../reference/widgets/CheckButtonGroup.ipynb     |  2 +-
 examples/reference/widgets/Checkbox.ipynb        |  2 +-
 examples/reference/widgets/ColorMap.ipynb        |  2 +-
 examples/reference/widgets/ColorPicker.ipynb     |  2 +-
 examples/reference/widgets/CrossSelector.ipynb   |  2 +-
 examples/reference/widgets/DataFrame.ipynb       |  2 +-
 examples/reference/widgets/DatePicker.ipynb      |  2 +-
 examples/reference/widgets/DateRangePicker.ipynb |  2 +-
 examples/reference/widgets/DateRangeSlider.ipynb |  2 +-
 examples/reference/widgets/DateSlider.ipynb      |  2 +-
 examples/reference/widgets/DatetimeInput.ipynb   |  2 +-
 examples/reference/widgets/DatetimePicker.ipynb  |  2 +-
 .../reference/widgets/DatetimeRangeInput.ipynb   |  2 +-
 .../reference/widgets/DatetimeRangePicker.ipynb  |  2 +-
 .../reference/widgets/DatetimeRangeSlider.ipynb  |  2 +-
 examples/reference/widgets/DiscretePlayer.ipynb  |  2 +-
 examples/reference/widgets/DiscreteSlider.ipynb  |  2 --
 .../reference/widgets/EditableFloatSlider.ipynb  |  2 +-
 .../reference/widgets/EditableIntSlider.ipynb    |  2 +-
 .../reference/widgets/EditableRangeSlider.ipynb  |  2 +-
 examples/reference/widgets/FileDownload.ipynb    |  2 +-
 examples/reference/widgets/FileDropper.ipynb     |  2 +-
 examples/reference/widgets/FileInput.ipynb       |  2 +-
 examples/reference/widgets/FileSelector.ipynb    |  2 +-
 examples/reference/widgets/FloatInput.ipynb      |  2 +-
 examples/reference/widgets/FloatSlider.ipynb     |  2 +-
 examples/reference/widgets/IntInput.ipynb        |  2 +-
 examples/reference/widgets/IntRangeSlider.ipynb  |  2 +-
 examples/reference/widgets/IntSlider.ipynb       |  2 +-
 examples/reference/widgets/LiteralInput.ipynb    |  2 +-
 examples/reference/widgets/MenuButton.ipynb      |  2 +-
 examples/reference/widgets/MultiChoice.ipynb     |  2 +-
 examples/reference/widgets/MultiSelect.ipynb     |  2 +-
 examples/reference/widgets/NestedSelect.ipynb    |  2 +-
 examples/reference/widgets/PasswordInput.ipynb   |  2 +-
 examples/reference/widgets/Player.ipynb          |  2 +-
 examples/reference/widgets/RadioBoxGroup.ipynb   |  2 +-
 .../reference/widgets/RadioButtonGroup.ipynb     |  2 +-
 examples/reference/widgets/RangeSlider.ipynb     |  2 +-
 examples/reference/widgets/Select.ipynb          |  2 +-
 examples/reference/widgets/StaticText.ipynb      |  2 +-
 examples/reference/widgets/Switch.ipynb          |  2 +-
 examples/reference/widgets/Tabulator.ipynb       |  2 +-
 examples/reference/widgets/TextAreaInput.ipynb   |  2 +-
 examples/reference/widgets/TextInput.ipynb       |  2 +-
 examples/reference/widgets/TimePicker.ipynb      |  2 +-
 examples/reference/widgets/Toggle.ipynb          |  2 +-
 examples/reference/widgets/ToggleGroup.ipynb     |  2 +-
 examples/reference/widgets/ToggleIcon.ipynb      |  2 +-
 examples/reference/widgets/VideoStream.ipynb     |  2 +-
 122 files changed, 193 insertions(+), 192 deletions(-)

diff --git a/doc/about/releases.md b/doc/about/releases.md
index 22b6ce5041..c661cbd5e5 100644
--- a/doc/about/releases.md
+++ b/doc/about/releases.md
@@ -826,7 +826,7 @@ This micro-release focuses on a small number of enhancements and rendering relat
 - Treat `Tabulator` `row_contents` as real children ensuring layout behaves correctly ([#5292](https://github.com/holoviz/panel/pull/5292))
 - Fix `Video` `min_height` and `max_height` ([#5296](https://github.com/holoviz/panel/pull/5296))
 - Make `TextEditor` invisible until CSS is loaded ([#5297](https://github.com/holoviz/panel/pull/5297))
-- Fix `disabled` parameter on editable sliders ([#5319]((https://github.com/holoviz/panel/pull/5319))
+- Fix `disabled` parameter on editable sliders ([#5319](https://github.com/holoviz/panel/pull/5319))
 
 ### Compatibility
 
diff --git a/doc/api/cheatsheet.md b/doc/api/cheatsheet.md
index f7a1431e37..37500ee1b5 100644
--- a/doc/api/cheatsheet.md
+++ b/doc/api/cheatsheet.md
@@ -42,7 +42,7 @@ All of Panel's documentation is built from Jupyter notebooks that you can explor
 
 #### ``pn.extension()``
 
-> The Panel extension loads BokehJS, any custom models required, and optionally additional custom JS and CSS in Jupyter notebook environments. It also allows passing any [`pn.config`](#pn.config) variables
+> The Panel extension loads BokehJS, any custom models required, and optionally additional custom JS and CSS in Jupyter notebook environments. It also allows passing any [`pn.config`](../api/config.md) variables.
 
 #### ``pn.ipywidget()``
 
diff --git a/doc/conf.py b/doc/conf.py
index 6e0d2bac55..ca75b6dd12 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -86,6 +86,7 @@
 
 
 extensions = [
+    'bokeh.sphinxext.bokeh_plot',
     'myst_parser',
     'sphinx_design',
     'sphinx.ext.autodoc',
@@ -95,6 +96,7 @@
     'sphinx.ext.mathjax',
     'sphinx.ext.ifconfig',
     'sphinx.ext.linkcode',
+    'sphinx.ext.inheritance_diagram',
     'sphinx_copybutton',
     'sphinxext.rediraffe',
     'nbsite.gallery',
diff --git a/doc/explanation/comparisons/compare_ipywidgets.md b/doc/explanation/comparisons/compare_ipywidgets.md
index 68a4e86755..f3c8c5caec 100644
--- a/doc/explanation/comparisons/compare_ipywidgets.md
+++ b/doc/explanation/comparisons/compare_ipywidgets.md
@@ -2,7 +2,7 @@
 
 Both Panel and ipywidgets (aka Jupyter Widgets) allow Python users to work with custom widgets and create apps and dashboards from Python, both in Jupyter notebooks and in standalone servers (when paired with Voila. But Panel and ipywidgets are based on different, independently developed technologies for doing so, with some implications:
 
-- Panel is based on Bokeh widgets and layouts, which were developed separately from the Jupyter ecosystem, and designed from the start for standalone deployments. Jupyter widgets, as the name suggests, were first developed specifically for the notebook environment, and only relatively recently (in 2019) adapted for standalone deployment (see [Voila](compare_voila.html)). Nowadays, both technologies have evolved to be well suited to both Jupyter and server contexts, but their different histories are still visible in the types of examples you typically see and in support for less-common operations for each library.
+- Panel is based on Bokeh widgets and layouts, which were developed separately from the Jupyter ecosystem, and designed from the start for standalone deployments. Jupyter widgets, as the name suggests, were first developed specifically for the notebook environment, and only relatively recently (in 2019) adapted for standalone deployment (see [Voila](compare_voila.md)). Nowadays, both technologies have evolved to be well suited to both Jupyter and server contexts, but their different histories are still visible in the types of examples you typically see and in support for less-common operations for each library.
 
 - Historically, ipywidgets exposed more of the underlying HTML/CSS styling options, allowing them to be customized more heavily than Bokeh widgets, but since Bokeh 3.0 and Panel 1.0 both types of widgets support similar types of styling.
 
diff --git a/doc/explanation/components/components_overview.md b/doc/explanation/components/components_overview.md
index 67d0ea7cea..f8bae22beb 100644
--- a/doc/explanation/components/components_overview.md
+++ b/doc/explanation/components/components_overview.md
@@ -17,7 +17,7 @@ The main objects that Panel provides, and that we are going to call *components*
 - *Templates*: templates are components that render multiple Panel objects in an HTML document. The basic template, which you get when you serve an app without setting any template, is basically a blank canvas. Instead when you use one of the built-in templates you can easily improve the design and branding of your app, which will get for free a header, a sidebar, etc.
 - *Notifications*: notifications are components that display so called "toasts", designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
 
-All the Panel components can be visualized on the [Component Gallery](../../reference/index.md).
+All the Panel components can be visualized on the [Component Gallery](../../reference/index.rst).
 
 :::{tip}
 Components usually have in their docstring a link to their documentation page, use `<component>?` in a notebook or your IDE inspection capabilities to access the link.
diff --git a/doc/explanation/components/reactive_html_components.md b/doc/explanation/components/reactive_html_components.md
index a74db5ef99..5c79948f0d 100644
--- a/doc/explanation/components/reactive_html_components.md
+++ b/doc/explanation/components/reactive_html_components.md
@@ -41,7 +41,7 @@ On the other hand, if you're looking for a **more advanced** approach that gives
 
 ## The Name
 
-`ReactiveHTML` is named for its ability to enable reactive programming in HTML. Unlike the static HTML content that the [`HTML`](../../../examples/reference/panes/HTML.ipynb) pane displays, `ReactiveHTML` components can update their view dynamically in response to changes in parameter values and other events.
+`ReactiveHTML` is named for its ability to enable reactive programming in HTML. Unlike the static HTML content that the [`HTML`](../../reference/panes/HTML.md) pane displays, `ReactiveHTML` components can update their view dynamically in response to changes in parameter values and other events.
 
 We could also have called the `ReactiveHTML` class for example `BaseComponent`, `HTMLComponent`, `SimpleComponent` or `AnyComponent` to give you the right associations.
 
@@ -49,11 +49,11 @@ It's worth noting that the name `ReactiveHTML` is not related to the JavaScript
 
 ## How-to Guides
 
-To see `ReactiveHTML` in action and discover how to create your custom components, check out our detailed guide: [How-to > Create Custom Components with ReactiveHTML](../../how_to/custom_components/reactive_html/index.md). It's packed with practical examples to help you get started quickly.
+To see `ReactiveHTML` in action and discover how to create your custom components, check out our detailed guide: [How-to > Create Custom Components with ReactiveHTML](../../how_to/custom_components/index.md#reactivehtml-components). It's packed with practical examples to help you get started quickly.
 
 ## API Guide
 
-You can find it here [API > ReactiveHTML](../../api/panel.reactive.html#panel.reactive.ReactiveHTML).
+You can find it here [API > ReactiveHTML](../../api/panel.reactive.rst#panel.reactive.ReactiveHTML).
 
 ## Class Attributes
 
diff --git a/doc/explanation/styling/templates_overview.md b/doc/explanation/styling/templates_overview.md
index 2d7dd3d122..7159e6f18e 100644
--- a/doc/explanation/styling/templates_overview.md
+++ b/doc/explanation/styling/templates_overview.md
@@ -23,13 +23,14 @@ These four areas behave very similarly to other Panel layout components and have
 
 Panel ships with a number of these default themes built on different CSS frameworks:
 
-* **[``MaterialTemplate``](../../reference/templates/Material.ipynb)**: Built on [Material Components for the web](https://material.io/develop/web/)
-* **[``BootstrapTemplate``](../../reference/templates/Bootstrap.ipynb)**: Built on  [Bootstrap v4](https://getbootstrap.com/docs/4.0/getting-started/introduction/)
-* **[``VanillaTemplate``](../../reference/templates/Vanilla.ipynb)**: Built using pure CSS without relying on any specific framework
-* **[``FastListTemplate``](../../reference/templates/FastListTemplate.ipynb)**: Built on the [Fast UI](https://fast.design/) framework using a list-like API
-* **[``FastGridTemplate``](../../reference/templates/FastGridTemplate.ipynb)**: Built on the [Fast UI](https://fast.design/) framework using grid-like API
-* **[``GoldenTemplate``](../../reference/templates/GoldenLayout.ipynb)**: Built on the [Golden Layout](https://golden-layout.com/) framework
-* **[``Slidestemplate``](../../reference/templates/Slides.ipynb)**: For presentations, built on [reveal.js](https://revealjs.com/) framework
+* **[``MaterialTemplate``](../../reference/templates/Material.md)**: Built on [Material Components for the web](https://material.io/develop/web/)
+* **[``BootstrapTemplate``](../../reference/templates/Bootstrap.md)**: Built on  [Bootstrap v4](https://getbootstrap.com/docs/4.0/getting-started/introduction/)
+* **[``VanillaTemplate``](../../reference/templates/Vanilla.md)**: Built using pure CSS without relying on any specific framework
+* **[``FastListTemplate``](../../reference/templates/FastListTemplate.md)**: Built on the [Fast UI](https://fast.design/) framework using a list-like API
+* **[``FastGridTemplate``](../../reference/templates/FastGridTemplate.md)**: Built on the [Fast UI](https://fast.design/) framework using grid-like API
+* **[``GoldenTemplate``](../../reference/templates/GoldenLayout.md)**: Built on the [Golden Layout](https://golden-layout.com/) framework
+* **[``Slidestemplate``](../../reference/templates/Slides.md)**: For presentations, built on [reveal.js](https://revealjs.com/) framework
 
 ## Related Resources
+
 - See [How-to > Apply Templates](../../how_to/templates/index.md) for template solutions.
diff --git a/doc/how_to/authentication/configuration.md b/doc/how_to/authentication/configuration.md
index e4d54c25b3..d20e27ab2b 100644
--- a/doc/how_to/authentication/configuration.md
+++ b/doc/how_to/authentication/configuration.md
@@ -92,7 +92,7 @@ or in Python:
 pn.serve(app, oauth_extra_params={'tenant_id': ...}, ...)
 ```
 
-The `oauth_extra_params` can also be used to provide the authentication URLs for the `'generic'`, `'password'`, and `'auth_code'` OAuth providers. Specifically you can provide a `'AUTHORIZE_URL'`, `'TOKEN_URL'` and `'USER_URL'` as extra parameters. Lastly it may be used to define the [scopes](#Scopes).
+The `oauth_extra_params` can also be used to provide the authentication URLs for the `'generic'`, `'password'`, and `'auth_code'` OAuth providers. Specifically you can provide a `'AUTHORIZE_URL'`, `'TOKEN_URL'` and `'USER_URL'` as extra parameters. Lastly it may be used to define the [scopes](#scopes).
 
 ## `cookie_secret`
 
diff --git a/doc/how_to/authentication/guest_users.md b/doc/how_to/authentication/guest_users.md
index 4568dd3cec..6597b02fa0 100644
--- a/doc/how_to/authentication/guest_users.md
+++ b/doc/how_to/authentication/guest_users.md
@@ -10,7 +10,7 @@ The simplest way to make authentication optional is to set the `--oauth-optional
 panel serve app.py ... --oauth-optional
 ```
 
-Panel will now let the user access all endpoints without being redirected to the authentication provider or local login page. If specific functionality in your application requires authentication you may then redirect the user to the [login endpoint](./configuration#Endpoints), e.g. by default you would redirect them to `/login`. As an example let's take this app:
+Panel will now let the user access all endpoints without being redirected to the authentication provider or local login page. If specific functionality in your application requires authentication you may then redirect the user to the [login endpoint](./configuration#endpoints), e.g. by default you would redirect them to `/login`. As an example let's take this app:
 
 ```python
 import panel as pn
diff --git a/doc/how_to/components/construct_panes.md b/doc/how_to/components/construct_panes.md
index 8fe92d120c..18a0854862 100644
--- a/doc/how_to/components/construct_panes.md
+++ b/doc/how_to/components/construct_panes.md
@@ -6,7 +6,7 @@ This guide addresses how to construct Pane objects for displaying visible compon
 
 There are two main ways to construct a pane - explicitly or automatically.
 
-To explicitly construct a pane, use one of the pane types listed in the [component gallery](https://panel.holoviz.org/reference/index.md#panes). For example, you can create a Markdown pane as follows:
+To explicitly construct a pane, use one of the pane types listed in the [component gallery](../../reference/index.rst#panes). For example, you can create a Markdown pane as follows:
 
 ```{pyodide}
 import panel as pn
diff --git a/doc/how_to/concurrency/sync_to_async.md b/doc/how_to/concurrency/sync_to_async.md
index 487cc48c44..d18782178d 100644
--- a/doc/how_to/concurrency/sync_to_async.md
+++ b/doc/how_to/concurrency/sync_to_async.md
@@ -37,4 +37,4 @@ Without [`asyncify`](https://asyncer.tiangolo.com/tutorial/asyncify/) the app wo
 
 ## Dask
 
-If you run many cpu bound functions you may consider offloading your functions asynchronously to an external compute engine like [Dask](https://www.dask.org/). See our [Dask how-to Guide](../performance/dask.md).
+If you run many cpu bound functions you may consider offloading your functions asynchronously to an external compute engine like [Dask](https://www.dask.org/). See our [Dask how-to Guide](../concurrency/dask.md).
diff --git a/doc/how_to/custom_components/esm/custom_layout.md b/doc/how_to/custom_components/esm/custom_layout.md
index 5add55d17d..05949ddbe2 100644
--- a/doc/how_to/custom_components/esm/custom_layout.md
+++ b/doc/how_to/custom_components/esm/custom_layout.md
@@ -1,6 +1,6 @@
 # Create Custom Layouts using ESM Components
 
-In this guide, we will demonstrate how to build custom, reusable layouts using [`JSComponent`](../../reference/panes/JSComponent.md), [`ReactComponent`](../../reference/panes/ReactComponent.md) or [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md).
+In this guide, we will demonstrate how to build custom, reusable layouts using [`JSComponent`](../../../reference/custom_components/JSComponent.md), [`ReactComponent`](../../../reference/custom_components/ReactComponent.md) or [`AnyWidgetComponent`](../../../reference/custom_components/AnyWidgetComponent.md).
 
 ## Layout Two Objects
 
diff --git a/doc/how_to/custom_components/index.md b/doc/how_to/custom_components/index.md
index 1065647a70..e406e61b38 100644
--- a/doc/how_to/custom_components/index.md
+++ b/doc/how_to/custom_components/index.md
@@ -17,7 +17,7 @@ How to build custom components that are combinations of existing components.
 :::
 
 :::{grid-item-card} {octicon}`pencil;2.5em;sd-mr-1 sd-animate-grow50` Combine Existing Components
-:link: python/create_custom widget
+:link: python/create_custom_widget
 :link-type: doc
 
 How to build a custom widget by subclassing `PyComponent` and `WidgetBase`.
diff --git a/doc/how_to/custom_components/python/create_custom_widget.md b/doc/how_to/custom_components/python/create_custom_widget.md
index 514ebf8292..8eefb026d8 100644
--- a/doc/how_to/custom_components/python/create_custom_widget.md
+++ b/doc/how_to/custom_components/python/create_custom_widget.md
@@ -171,4 +171,4 @@ pn.FlexBox(
 
 ## References
 
-- [PyComponent](../../reference/custom_components/PyComponent.html)
+- [PyComponent](../../../reference/custom_components/PyComponent.md)
diff --git a/doc/how_to/deployment/pycafe.md b/doc/how_to/deployment/pycafe.md
index 92b0fec6b8..b72b092d87 100644
--- a/doc/how_to/deployment/pycafe.md
+++ b/doc/how_to/deployment/pycafe.md
@@ -78,9 +78,9 @@ Explore the [`panel-org`](https://py.cafe/panel-org) gallery examples below:
 
 ### App Gallery
 
-- [Altair Brushing](https://py.cafe/panel-org/altair-brushing) from the [Altair Brushing Tutorial](../../gallery/altair_brushing.ipynb).
-- [hvPlot Explorer](https://py.cafe/panel-org/hvplot-explorer) from the [hvPlot Explorer Tutorial](../../gallery/hvplot_explorer.ipynb)
-- [NYC Deck.GL](https://py.cafe/panel-org/nyc-deckgl) from the [NYC Deck.Gl Tutorial](../../gallery/nyc_deckgl.ipynb).
-- [Penguin Crossfilter](https://py.cafe/panel-org/penguin-crossfilter) from the [Penguin Crossfilter Tutorial](../../gallery/penguin_crossfilter.ipynb)
-- [Portfolio Analyzer](https://py.cafe/panel-org/portfolio-analyzer) from the [Portfolio Analyzer Tutorial](../../gallery/portfolio_analyzer.ipynb).
-- [VideoStream Interface](https://py.cafe/panel-org/videostream) from the [VideoStream Interface Tutorial](../../gallery/streaming_videostream.ipynb).
+- [Altair Brushing](https://py.cafe/panel-org/altair-brushing) from the [Altair Brushing Tutorial](../../gallery/altair_brushing.md).
+- [hvPlot Explorer](https://py.cafe/panel-org/hvplot-explorer) from the [hvPlot Explorer Tutorial](../../gallery/hvplot_explorer.md)
+- [NYC Deck.GL](https://py.cafe/panel-org/nyc-deckgl) from the [NYC Deck.Gl Tutorial](../../gallery/nyc_deckgl.md).
+- [Penguin Crossfilter](https://py.cafe/panel-org/penguin-crossfilter) from the [Penguin Crossfilter Tutorial](../../gallery/penguin_crossfilter.md)
+- [Portfolio Analyzer](https://py.cafe/panel-org/portfolio-analyzer) from the [Portfolio Analyzer Tutorial](../../gallery/portfolio_analyzer.md).
+- [VideoStream Interface](https://py.cafe/panel-org/videostream) from the [VideoStream Interface Tutorial](../../gallery/streaming_videostream.md).
diff --git a/doc/how_to/interactivity/bind_component.md b/doc/how_to/interactivity/bind_component.md
index 71ede5fb3f..d8e3cd3f33 100644
--- a/doc/how_to/interactivity/bind_component.md
+++ b/doc/how_to/interactivity/bind_component.md
@@ -79,5 +79,5 @@ In this way we can update both the current `object` and the `styles` **Parameter
 
 ## Related Resources
 
-- Learn [how to use generators with `bind`](./bind_generator)
+- Learn [how to use generators with `bind`](bind_generators.md)
 - Understand [Param](../../explanation/dependencies/param.md)
diff --git a/doc/how_to/interactivity/bind_function.md b/doc/how_to/interactivity/bind_function.md
index b2b6fda472..1ee8586526 100644
--- a/doc/how_to/interactivity/bind_function.md
+++ b/doc/how_to/interactivity/bind_function.md
@@ -43,6 +43,6 @@ Internally the layout will create a so called `ParamFunction` component to wrap
 
 ## Related Resources
 
-- Learn [how to use reactive functions to update components](./bind_component)
-- Learn [how to use reactive generators to generate interactive components ](./bind_generator)
+- Learn [how to use reactive functions to update components](bind_component.md)
+- Learn [how to use reactive generators to generate interactive components ](bind_generators.md)
 - Understand [Param](../../explanation/dependencies/param.md)
diff --git a/doc/how_to/interactivity/bind_generators.md b/doc/how_to/interactivity/bind_generators.md
index f64fd98729..7292dc58d2 100644
--- a/doc/how_to/interactivity/bind_generators.md
+++ b/doc/how_to/interactivity/bind_generators.md
@@ -66,4 +66,4 @@ pn.Row(slideshow)
 
 ## Related Resources
 
-- Learn [how to use async callbacks to perform operations concurrently](../concurrency/async.md)
+- Learn [how to use async callbacks to perform operations concurrently](../callbacks/async.md)
diff --git a/doc/how_to/interactivity/hvplot_interactive.md b/doc/how_to/interactivity/hvplot_interactive.md
index 4b138eac22..dbe9edd997 100644
--- a/doc/how_to/interactivity/hvplot_interactive.md
+++ b/doc/how_to/interactivity/hvplot_interactive.md
@@ -50,7 +50,7 @@ Because we've imported `hvplot.pandas`, we can utilize `.hvplot()` to render the
 df_rx.hvplot(kind="scatter", x="bill_length_mm", y="bill_depth_mm", by="sex")
 ```
 
-We can leverage [`panel.ReactiveExpr`](https://panel.holoviz.org/reference/panes/ReactiveExpr.html) to assist in rendering `df_rx`. This allows us to include all widgets related to `df_rx`, while also offering the flexibility to customize the appearance of the widgets. For instance, we can specify `pn.Column` as the `widget_layout` parameter and `top` as the `widget_location` parameter, as shown below:
+We can leverage [`panel.ReactiveExpr`](../../reference/panes/ReactiveExpr.md) to assist in rendering `df_rx`. This allows us to include all widgets related to `df_rx`, while also offering the flexibility to customize the appearance of the widgets. For instance, we can specify `pn.Column` as the `widget_layout` parameter and `top` as the `widget_location` parameter, as shown below:
 
 ```{pyodide}
 pn.ReactiveExpr(
@@ -81,10 +81,10 @@ pn.Column(
 )
 ```
 
-Finally, if performance is critical, you might want to consider using [Reactive expressions as references](https://panel.holoviz.org/reference/panes/ReactiveExpr.html#reactive-expressions-as-references). For instance, you can try replacing `df_rx` with `df_rx.rx()` in this tutorial.
+Finally, if performance is critical, you might want to consider using [Reactive expressions as references](../../reference/panes/ReactiveExpr.md#reactive-expressions-as-references). For instance, you can try replacing `df_rx` with `df_rx.rx()` in this tutorial.
 
 ## Related Resources
 
 * [Reactive Functions and Expressions of Param](https://param.holoviz.org/user_guide/Reactive_Expressions.html)
-* [Reactive Expressions of Panel](https://panel.holoviz.org/tutorials/basic/pn_rx.html#)
-* [panel.ReactiveExpr documentation](https://panel.holoviz.org/reference/panes/ReactiveExpr.html#reactiveexpr)
+* [Reactive Expressions of Panel](../../tutorials/basic/pn_rx.md)
+* [panel.ReactiveExpr documentation](../../reference/panes/ReactiveExpr.md#reactiveexpr)
diff --git a/doc/how_to/migrate/anywidget/index.md b/doc/how_to/migrate/anywidget/index.md
index 3b9655aab3..576749bb42 100644
--- a/doc/how_to/migrate/anywidget/index.md
+++ b/doc/how_to/migrate/anywidget/index.md
@@ -2,7 +2,7 @@
 
 This guide addresses how to convert [AnyWidget](https://anywidget.dev/) widgets to custom `JSComponent` or `ReactComponent` widgets.
 
-Please note that AnyWidget widgets are [`ipywidgets`](https://ipywidgets.readthedocs.io/en/stable/) and can be used directly in Panel via the [`IpyWidgets`](../../reference/panes/IPyWidget.ipynb) pane and the `Traitlets` `@observe` API without a conversion. We recommend trying this option first. If it does not work for your use case, please consider contributing to the existing `AnyWidget` before converting it to a Panel widget.
+Please note that AnyWidget widgets are [`ipywidgets`](https://ipywidgets.readthedocs.io/en/stable/) and can be used directly in Panel via the [`IpyWidgets`](../../../reference/panes/Image.md) pane and the `Traitlets` `@observe` API without a conversion. We recommend trying this option first. If it does not work for your use case, please consider contributing to the existing `AnyWidget` before converting it to a Panel widget.
 
 Some reasons you might still want to convert an `AnyWidget` to a custom Panel widget are:
 
@@ -18,7 +18,7 @@ The high-level steps needed for converting `AnyWidgets` components to Panel comp
 
 #### Step 1: Base Class Conversion
 
-Convert from the `AnyWidget` base class to the Panel [`JSComponent`](../../reference/panes/JSComponent.ipynb) base class. If the `_esm` script is based on [React](https://react.dev/), use the [`ReactComponent`](../../reference/panes/ReactComponent.ipynb).
+Convert from the `AnyWidget` base class to the Panel [`JSComponent`](../../../reference/custom_components/JSComponent.md) base class. If the `_esm` script is based on [React](https://react.dev/), use the [`ReactComponent`](../../../reference/custom_components/ReactComponent.md).
 
 #### Step 2: Attribute Conversion
 
@@ -169,15 +169,15 @@ CounterButton().servable()
 
 ### Mario Button
 
-Check out our [Custom Components Tutorial](../../../tutorials/expert/custom_components.md) to see a converted version of the [ipymario](https://github.com/manzt/ipymario) widget.
+Check out our [Custom Components Tutorial](../../../tutorials/expert/custom_anywidget_components.md) to see a converted version of the [ipymario](https://github.com/manzt/ipymario) widget.
 
-[![Mario Button](https://assets.holoviz.org/panel/tutorials/ipymario.gif)](../../../tutorials/expert/custom_components.md)
+[![Mario Button](https://assets.holoviz.org/panel/tutorials/ipymario.gif)](../../../tutorials/expert/custom_anywidget_components.md)
 
 ## References
 
 ### Tutorials
 
-- [Build Custom Components](../../../how_to/custom_components/reactive_esm/reactive_esm_layout.md)
+- [Build Custom AnyWidget Components](../../../tutorials/expert/custom_anywidget_components.md)
 
 ### How-To Guides
 
@@ -185,8 +185,8 @@ Check out our [Custom Components Tutorial](../../../tutorials/expert/custom_comp
 
 ### Reference Guides
 
-- [`JSComponent`](../../../reference/panes/JSComponent.md)
-- [`ReactComponent`](../../../reference/panes/ReactComponent.md)
-- [`PreactComponent`](../../../reference/panes/PreactComponent.md)
+- [`JSComponent`](../../../reference/custom_components/JSComponent.md)
+- [`ReactComponent`](../../../reference/custom_components/ReactComponent.md)
+- [`AnyWidgetComponent`](../../../reference/custom_components/AnyWidgetComponent.md)
 
 With these skills, you are now equipped to pioneer and push the boundaries of what can be achieved with Panel. Happy coding!
diff --git a/doc/how_to/notebook/jupyterlabpreview.md b/doc/how_to/notebook/jupyterlabpreview.md
index 489ec068db..fdd1715a31 100644
--- a/doc/how_to/notebook/jupyterlabpreview.md
+++ b/doc/how_to/notebook/jupyterlabpreview.md
@@ -20,7 +20,7 @@ The *Preview* offers two update modes that are configurable in the preview tab:
 - automatic: toggle the *Render on save* checkbox ({far}`square-check`) for the app to be automatically re-rendered when you save your notebook.
 
 :::{tip}
-Panel [built-in templates](https://panel.holoviz.org/reference/index.md#templates) don't render necessarily well in a notebook as their styling can badly interact with the notebook built-in styling. Using the *Preview* is a good way to circumvent this issue, while still being able to work within JupyterLab .
+Panel [built-in templates](../../reference/index.rst#templates) don't render necessarily well in a notebook as their styling can badly interact with the notebook built-in styling. Using the *Preview* is a good way to circumvent this issue, while still being able to work within JupyterLab .
 :::
 
 ## Related Resources
diff --git a/doc/how_to/notebook/layout_builder.md b/doc/how_to/notebook/layout_builder.md
index 65182b4eb4..f3d98ffd1c 100644
--- a/doc/how_to/notebook/layout_builder.md
+++ b/doc/how_to/notebook/layout_builder.md
@@ -160,4 +160,4 @@ This command will automatically restore the persisted layout data from the noteb
 
 ### Component Gallery
 
-- [EditableTemplate](../../reference/templates/EditableTemplate.ipynb)
+- [EditableTemplate](../../reference/templates/EditableTemplate.md)
diff --git a/doc/how_to/notebook/other_nb.md b/doc/how_to/notebook/other_nb.md
index 6b92ec5c31..f5b1b50d3d 100644
--- a/doc/how_to/notebook/other_nb.md
+++ b/doc/how_to/notebook/other_nb.md
@@ -27,7 +27,7 @@ Please note that in Colab rendering for each notebook cell is isolated, which me
 :::
 
 :::{warning}
-The [IpyWidgets](../../reference/panes/IpyWidget.ipynb) pane does not work in Google Colab. Thus you cannot use IpyWidgets with Panel in Colab.
+The [IpyWidgets](../../reference/panes/IPyWidget.md) pane does not work in Google Colab. Thus you cannot use IpyWidgets with Panel in Colab.
 :::
 
 ## PyCharm Notebook
diff --git a/doc/how_to/profiling/profile.md b/doc/how_to/profiling/profile.md
index 9ef2919913..41e8c2eea6 100644
--- a/doc/how_to/profiling/profile.md
+++ b/doc/how_to/profiling/profile.md
@@ -21,7 +21,7 @@ Once enabled the launch profiler will profile each application separately and pr
 
 ## User profiling
 
-In addition to profiling the launch step of an application it is often also important to get insight into the interactive performance of an application. For that reason Panel also provides the `pn.io.profile` decorator that can be added to any callback and will report the profiling results in the [`/admin` panel](../profiling/admin.html). The `profile` helper takes two arguments, the name to record the profiling results under and the profiling `engine` to use.
+In addition to profiling the launch step of an application it is often also important to get insight into the interactive performance of an application. For that reason Panel also provides the `pn.io.profile` decorator that can be added to any callback and will report the profiling results in the [`/admin` panel](../profiling/admin.md). The `profile` helper takes two arguments, the name to record the profiling results under and the profiling `engine` to use.
 
 ```python
 @pn.io.profile('clustering', engine='snakeviz')
diff --git a/doc/how_to/streamlit_migration/activity.md b/doc/how_to/streamlit_migration/activity.md
index f69a26297d..6cfd7dd0f6 100644
--- a/doc/how_to/streamlit_migration/activity.md
+++ b/doc/how_to/streamlit_migration/activity.md
@@ -2,7 +2,7 @@
 
 Panel supports many ways of indicating activity
 
-- Indicators. See the [Indicators Section](../../reference/index.md#indicators) of the [Component Gallery](../../reference/index.md).
+- Indicators. See the [Indicators Section](../../reference/indicators/index.rst#indicators) of the [Component Gallery](../../reference/index.rst).
 - `disabled`/ `loading` parameters on Panel components
 - `loading_indicator` parameter for `pn.panel` or `pn.config`. If `True` a loading indicator will be shown on your *bound functions* when they are re-run.
 
diff --git a/doc/how_to/streamlit_migration/layouts.md b/doc/how_to/streamlit_migration/layouts.md
index 2188387653..2212e8607f 100644
--- a/doc/how_to/streamlit_migration/layouts.md
+++ b/doc/how_to/streamlit_migration/layouts.md
@@ -13,7 +13,7 @@ To migrate your layouts to Panel
 - replace your Streamlit `st.some_layout` *snake cased* function with the corresponding Panel
 `pn.SomeLayout` *CamelCased* class.
 
-You can identify the relevant layout to migrate to in the [Layouts Section](../../reference/index.md#layouts) of the [Component Gallery](../../reference/index.md).
+You can identify the relevant layout to migrate to in the [Layouts Section](../../reference/index.rst#layouts) of the [Component Gallery](../../reference/index.rst).
 
 ## Example
 
diff --git a/doc/how_to/streamlit_migration/panes.md b/doc/how_to/streamlit_migration/panes.md
index 4bbd81d95a..5ac58eae06 100644
--- a/doc/how_to/streamlit_migration/panes.md
+++ b/doc/how_to/streamlit_migration/panes.md
@@ -5,7 +5,7 @@ In Panel the objects that can display your Python objects are called *panes*. Wi
 - Get notifications about interactions like click events on your plots and tables and react to them.
 - Use unique data visualization ecosystems like HoloViz, ipywidgets and VTK.
 
-Check out the [Panes Section](../../reference/index.md#panes) of the [Component Gallery](../../reference/index.md) for the full list of *panes*.
+Check out the [Panes Section](../../reference/index.rst#panes) of the [Component Gallery](../../reference/index.rst) for the full list of *panes*.
 
 ---
 
@@ -17,7 +17,7 @@ To display content in Panel:
 `pn.pane.SomeObject` *CamelCased* classes.
 - Replace your Streamlit text elements with `pn.pane.Markdown`.
 
-Identify the relevant Panel *pane*s in the [Panes Section](../../reference/index.md#panes) of the [Component Gallery](../../reference/index.md).
+Identify the relevant Panel *pane*s in the [Panes Section](../../reference/index.rst#panes) of the [Component Gallery](../../reference/index.rst).
 
 ## Examples
 
diff --git a/doc/how_to/streamlit_migration/templates.md b/doc/how_to/streamlit_migration/templates.md
index d9e32ffe6c..501fc0fca0 100644
--- a/doc/how_to/streamlit_migration/templates.md
+++ b/doc/how_to/streamlit_migration/templates.md
@@ -11,8 +11,8 @@ With Panel you have the flexibility to use the *default, blank template*, one of
 When migrating you will have to decide which template to use
 
 - Blank (default)
-- A built-in template like *vanilla*, *bootstrap*, *material* or *fast*. See the [Templates Section](../../reference/index#templates) of the [Components Guide](../../reference/index).
-- A [custom template](../../templates/template_custom) declared using Jinja2 syntax.
+- A built-in template like *vanilla*, *bootstrap*, *material* or *fast*. See the [Templates Section](../../reference/index.rst#templates) of the [Components Guide](../../reference/index.rst).
+- A [custom template](../../how_to/templates/template_custom.md) declared using Jinja2 syntax.
 
 ## Example
 
diff --git a/doc/how_to/streamlit_migration/widgets.md b/doc/how_to/streamlit_migration/widgets.md
index 0cc29c6a63..71f4b0d741 100644
--- a/doc/how_to/streamlit_migration/widgets.md
+++ b/doc/how_to/streamlit_migration/widgets.md
@@ -13,7 +13,7 @@ To migrate your app's input widgets to Panel:
 - Replace your Streamlit `st.some_widget` function with the corresponding Panel
 `pn.widgets.SomeWidget` class.
 
-You can identify the corresponding widget via the [Widgets Section](../../reference/index#widgets) of the [Component Gallery](../../reference/index.md).
+You can identify the corresponding widget via the [Widgets Section](../../reference/index.rst#widgets) of the [Component Gallery](../../reference/index.rst).
 
 ## Example
 
diff --git a/doc/how_to/styling/echarts.md b/doc/how_to/styling/echarts.md
index e92f180542..e198d6a5dc 100644
--- a/doc/how_to/styling/echarts.md
+++ b/doc/how_to/styling/echarts.md
@@ -1,6 +1,6 @@
 # Style Echarts Plots
 
-This guide addresses how to style ECharts plots displayed using the [ECharts pane](../../../examples/reference/panes/ECharts.ipynb).
+This guide addresses how to style ECharts plots displayed using the [ECharts pane](../../reference/panes/ECharts.md).
 
 You can select the theme of ECharts plots using the `ECharts.theme` parameter.
 
diff --git a/doc/how_to/styling/matplotlib.md b/doc/how_to/styling/matplotlib.md
index 7facd680e2..5a760c89a5 100644
--- a/doc/how_to/styling/matplotlib.md
+++ b/doc/how_to/styling/matplotlib.md
@@ -1,6 +1,6 @@
 # Style Matplotlib Plots
 
-This guide addresses how to style Matplotlib plots displayed using the [Matplotlib pane](../../../examples/reference/panes/Matplotlib.ipynb).
+This guide addresses how to style Matplotlib plots displayed using the [Matplotlib pane](../..//reference/panes/Matplotlib.md).
 
 There are nearly 30 builtin styles to Matplotlib that can be activated with the `plt.style.use` function. The style names are listed in the `plt.style.available` array.
 
diff --git a/doc/how_to/styling/plotly.md b/doc/how_to/styling/plotly.md
index 77b423c24d..69a1721284 100644
--- a/doc/how_to/styling/plotly.md
+++ b/doc/how_to/styling/plotly.md
@@ -1,6 +1,6 @@
 # Style Plotly Plots
 
-This guide addresses how to style Plotly plots displayed using the [Plotly pane](../../../examples/reference/panes/Plotly.ipynb).
+This guide addresses how to style Plotly plots displayed using the [Plotly pane](../../reference/panes/Plotly.md).
 
 Plotly provides a list of built in templates in `plotly.io.templates`. See the [Plotly Templates Guide](https://plotly.com/python/templates/).
 
diff --git a/doc/how_to/styling/vega.md b/doc/how_to/styling/vega.md
index 24df70fd46..f34f74eaf5 100644
--- a/doc/how_to/styling/vega.md
+++ b/doc/how_to/styling/vega.md
@@ -1,6 +1,6 @@
 # Style Vega Plots
 
-This guide addresses how to style Vega plots displayed using the [Vega pane](../../../examples/reference/panes/Vega.ipynb).
+This guide addresses how to style Vega plots displayed using the [Vega pane](../../reference/panes/Vega.md).
 
 The gif below displays an example of what can be achieved with a little styling of the Vega plot and the `FastListTemplate`.
 
diff --git a/doc/how_to/templates/template_arrange.md b/doc/how_to/templates/template_arrange.md
index 92e8c03a0d..79f339f611 100644
--- a/doc/how_to/templates/template_arrange.md
+++ b/doc/how_to/templates/template_arrange.md
@@ -57,4 +57,4 @@ panel serve app.py --show --autoreload
 
 - See [How-to > Apply Templates > Toggle Modal](./template_modal.md) for a dedicated guide to toggling the modal.
 - See [How-to > Apply Templates > Set a Template](./template_set.md) for alternate approaches to set a template.
-- Read [Explanation > Templates](../../explanation/templates/templates_overview.md) for explanation.
+- Read [Explanation > Templates](../../explanation/styling/templates_overview.md) for explanation.
diff --git a/doc/how_to/templates/template_modal.md b/doc/how_to/templates/template_modal.md
index 38ce22ff85..144f63be10 100644
--- a/doc/how_to/templates/template_modal.md
+++ b/doc/how_to/templates/template_modal.md
@@ -69,4 +69,4 @@ panel serve app.py --show --autoreload
 ## Related Resources
 
 - See [How-to > Apply Templates > Set a Template](./template_set.md) for alternate approaches to set a template.
-- Read [Explanation > Templates](../../explanation/templates/templates_overview.md) for explanation.
+- Read [Explanation > Templates](../../explanation/styling/templates_overview.md) for explanation.
diff --git a/doc/how_to/templates/template_set.md b/doc/how_to/templates/template_set.md
index 77c9c48d0b..3a2e24820c 100644
--- a/doc/how_to/templates/template_set.md
+++ b/doc/how_to/templates/template_set.md
@@ -110,4 +110,4 @@ panel serve app_global.py --show
 
 ## Related Resources
 
-- Read [Explanation > Templates](../../explanation/templates/templates_overview.md) for explanation.
+- Read [Explanation > Templates](../../explanation/styling/templates_overview.md) for explanation.
diff --git a/doc/how_to/templates/template_theme.md b/doc/how_to/templates/template_theme.md
index d581100523..f480532e35 100644
--- a/doc/how_to/templates/template_theme.md
+++ b/doc/how_to/templates/template_theme.md
@@ -76,4 +76,4 @@ panel serve app.py --show --autoreload
 
 - See [How-to > Apply Templates > Build a Custom Template](./template_custom.md) to create a completely custom template.
 - See [How-to > Apply Templates > Set a Template](./template_set.md) for alternate approaches to set a template.
-- Read [Background > Templates](../../explanation/templates/templates_overview.md) for explanation.
+- Read [Background > Templates](../../explanation/styling/templates_overview.md) for explanation.
diff --git a/doc/how_to/wasm/standalone.md b/doc/how_to/wasm/standalone.md
index 078f89fae0..2e63c81c6e 100644
--- a/doc/how_to/wasm/standalone.md
+++ b/doc/how_to/wasm/standalone.md
@@ -165,7 +165,7 @@ Open the app in your browser at [http://localhost:8000/script.html](http://local
 Click the green *run* button that appears when you hover over the lower-right corner of the editor to see the application.
 
 :::note
-In the example, we included **mini-coi.js**. This is not necessary if the [appropriate HTTP headers](https://docs.pyscript.net/2024.7.1/user-guide/workers/) are set on your server, such as on [pyscript.com](pyscript.com) or in Github pages.
+In the example, we included **mini-coi.js**. This is not necessary if the [appropriate HTTP headers](https://docs.pyscript.net/2024.7.1/user-guide/workers/) are set on your server, such as on [pyscript.com](https://pyscript.com) or in Github pages.
 :::
 
 ## Rendering Panel Components in Pyodide or PyScript
diff --git a/doc/tutorials/basic/build_animation.md b/doc/tutorials/basic/build_animation.md
index 0f47580f67..10269ba3ac 100644
--- a/doc/tutorials/basic/build_animation.md
+++ b/doc/tutorials/basic/build_animation.md
@@ -214,7 +214,7 @@ def pause_player_at_max_year(value):
     if year.value==max_year:
         year.pause()
 
-pn.bind(pause_player_at_max_year, year, watch=True)
+pn.bind(pause_player_at_max_year, year, watch=True); # semi-colon is only needed when line is run at end of cell
 ```
 
 Let's make it interactive! We introduce a [`Player`](../../reference/widgets/Player.md) widget to loop continuously through the years.
diff --git a/doc/tutorials/basic/build_chatbot.md b/doc/tutorials/basic/build_chatbot.md
index 82461d0208..0dc4342e2e 100644
--- a/doc/tutorials/basic/build_chatbot.md
+++ b/doc/tutorials/basic/build_chatbot.md
@@ -73,7 +73,7 @@ To make the Streaming Chat Bot scale to many users you should be using `async`.
 
 ## Learn More
 
-We can learn more about the `ChatInterface` via its [*reference guide*](../../reference/chat/ChatInterface.md). We find the *reference guide* in the [Chat Section](https://panel.holoviz.org/reference/index.html#chat) of the [Component Gallery](../../reference/index.md).
+We can learn more about the `ChatInterface` via its [*reference guide*](../../reference/chat/ChatInterface.md). We find the *reference guide* in the [Chat Section](../../reference/index.rst#chat) of the [Component Gallery](../../reference/index.rst).
 
 ## Find Inspiration
 
@@ -90,5 +90,5 @@ In this section, we have used the *easy to use*, *high-level* [`ChatInterface`](
 
 ## Resources
 
-- [Chat Component Gallery](https://panel.holoviz.org/reference/index.html#chat)
+- [Chat Component Gallery](../../reference/index.rst#chat)
 - [Panel-Chat-Examples](https://holoviz-topics.github.io/panel-chat-examples/)
diff --git a/doc/tutorials/basic/indicators_performance.md b/doc/tutorials/basic/indicators_performance.md
index 0c0ac1624e..55bb21af14 100644
--- a/doc/tutorials/basic/indicators_performance.md
+++ b/doc/tutorials/basic/indicators_performance.md
@@ -1,6 +1,6 @@
 # Display Performance with Indicators
 
-Welcome to our tutorial on  Panel's [indicators](https://panel.holoviz.org/reference/index.html#indicators)!
+Welcome to our tutorial on  Panel's [indicators](../../reference/index.rst#indicators)!
 
 We will delve into the use of Indicators with an example that uses them to visualizes the key metrics of wind turbines in an engaging and insightful manner. The result will be this:
 
@@ -20,7 +20,7 @@ In this tutorial, we'll explore various indicators offered by Panel to showcase
 - **Current Performance**: Utilize the [`Number`](../../reference/indicators/Number.md) indicator to display the current performance.
 - **Trending Performance**: Employ the [`Trend`](../../reference/indicators/Trend.md) indicator to showcase the trending performance over time.
 
-For a comprehensive list of indicators and their detailed reference guides, you can always refer to the [Indicators Section](https://panel.holoviz.org/reference/index.html#indicators) in the [Component Gallery](../../reference/index.md).
+For a comprehensive list of indicators and their detailed reference guides, you can always refer to the [Indicators Section](../../reference/index.rst#indicators) in the [Component Gallery](../../reference/index.rst).
 
 :::{note}
 Throughout this tutorial, whenever we refer to "run the code," you can execute it directly in the Panel docs using the green *run* button, in a notebook cell, or within a file named `app.py` served with `panel serve app.py --dev`.
@@ -79,7 +79,7 @@ For more detailed insights into the `Trend` indicator, take a moment to explore
 
 Panel provides a large collection of indicators to suit your needs.
 
-Click [this link](https://panel.holoviz.org/reference/index.html#indicators) to explore the available indicators and their detailed reference guides.
+Click [this link](../../reference/index.rst#indicators) to explore the available indicators and their detailed reference guides.
 
 ## Recap
 
@@ -88,4 +88,4 @@ In this tutorial, we have explored using Panel's versatile indicators by creatin
 - Leveraged the [`Number`](../../reference/indicators/Number.md) indicator to display current performance.
 - Utilized the [`Trend`](../../reference/indicators/Trend.md) indicator to showcase trending performance over time.
 
-Remember, there's a collection of indicators waiting for you to explore in the [Indicators Section](https://panel.holoviz.org/reference/index.html#indicators) of the [Component Gallery](../../reference/index.md). Keep experimenting and uncovering new insights! 🚀
+Remember, there's a collection of indicators waiting for you to explore in the [Indicators Section](../../reference/index.rst#indicators) of the [Component Gallery](../../reference/index.rst). Keep experimenting and uncovering new insights! 🚀
diff --git a/doc/tutorials/basic/layouts.md b/doc/tutorials/basic/layouts.md
index f9e65c508c..6e6e857314 100644
--- a/doc/tutorials/basic/layouts.md
+++ b/doc/tutorials/basic/layouts.md
@@ -8,7 +8,7 @@ In this guide, we'll explore the following aspects of layouts:
 
 - **Layouts**: Accessible in the `pn` namespace.
 - **Layout Techniques**: Utilize `pn.Column` and `pn.Row` to structure your content.
-- **Reference Guides**: Explore detailed documentation for each layout in the [Layouts Section](https://panel.holoviz.org/reference/index.html#layouts) of the [Component Gallery](../../reference/index.md).
+- **Reference Guides**: Explore detailed documentation for each layout in the [Layouts Section](../../reference/index.rst#layouts) of the [Component Gallery](../../reference/index.rst).
 
 :::{note}
 As you follow along with the code examples below, feel free to execute them directly in the Panel documentation, a notebook cell, or within a file named `app.py` served with `panel serve app.py --dev`.
@@ -237,7 +237,7 @@ pn.Column(
 
 Panel provides a vast collection of layouts to suit your needs.
 
-Click [this link](https://panel.holoviz.org/reference/index.html#layouts) to explore available layouts and their detailed reference guides.
+Click [this link](../../reference/index.rst#layouts) to explore available layouts and their detailed reference guides.
 
 ## Recap
 
@@ -271,4 +271,4 @@ Now, you're equipped to create dynamic and visually appealing layouts for your P
 
 ### Component Gallery
 
-- [Layouts](https://panel.holoviz.org/reference/index.html#layouts)
+- [Layouts](../../reference/index.rst#layouts)
diff --git a/doc/tutorials/basic/panes.md b/doc/tutorials/basic/panes.md
index f53765c7eb..ec246329ca 100644
--- a/doc/tutorials/basic/panes.md
+++ b/doc/tutorials/basic/panes.md
@@ -4,7 +4,7 @@ In this tutorial, we will learn to display objects with *Panes*:
 
 - *Panes* are available in the `pn.pane` namespace.
 - *Panes* take an `object` argument as well as other arguments.
-- Discover all *Panes* and their *reference guides* in the [Panes Section](https://panel.holoviz.org/reference/index.html#panes) of the [Component Gallery](../../reference/index.md).
+- Discover all *Panes* and their *reference guides* in the [Panes Section](../../reference/index.rst#panes) of the [Component Gallery](../../reference/index.rst).
 
 :::{note}
 A *Pane* is a component that can display an object. It takes an `object` as an argument.
@@ -71,10 +71,10 @@ Read more [here](https://en.wikipedia.org/wiki/Wind_turbine).
 ```
 
 :::{tip}
-It's key for success with Panel to be able to navigate the [Component Gallery](../../reference/index.md) and use the *reference guides*.
+It's key for success with Panel to be able to navigate the [Component Gallery](../../reference/index.rst) and use the *reference guides*.
 :::
 
-Click [this link](https://panel.holoviz.org/reference/index.html#panes) to the [Panes Section](https://panel.holoviz.org/reference/index.html#panes) of the [Component Gallery](../../reference/index.md). Identify the [Markdown Reference Guide](../../reference/panes/Markdown.md) and open it. You don't have to spend time studying the details right now.
+Click [this link](../../reference/index.rst#panes) to the [Panes Section](../../reference/index.rst#panes) of the [Component Gallery](../../reference/index.rst). Identify the [Markdown Reference Guide](../../reference/panes/Markdown.md) and open it. You don't have to spend time studying the details right now.
 
 ### Display Alerts
 
@@ -335,7 +335,7 @@ pn.pane.DataFrame(data).servable()
 ```
 
 :::{note}
-If we want to display larger dataframes, customize the way the dataframes are displayed, or make them more interactive, we can find specialized components in the [Component Gallery](../../reference/index.md) supporting these use cases. For example, the [Tabulator](../../reference/widgets/Tabulator.md) widget and [Perspective](../../reference/panes/Perspective.md) pane.
+If we want to display larger dataframes, customize the way the dataframes are displayed, or make them more interactive, we can find specialized components in the [Component Gallery](../../reference/index.rst) supporting these use cases. For example, the [Tabulator](../../reference/widgets/Tabulator.md) widget and [Perspective](../../reference/panes/Perspective.md) pane.
 :::
 
 ## Display any Python object
@@ -362,11 +362,11 @@ In this guide, we have learned to display Python objects with *Panes*:
 
 - *Panes* are available in the `pn.pane` namespace
 - *Panes* take an `object` argument as well as other arguments
-- Display strings with the [`Str`]((../../reference/panes/Str.md)), [`Markdown`]((../../reference/panes/Markdown.md)) and [`Alert`]((../../reference/panes/Alert.md)) panes
+- Display strings with the [`Str`](../../reference/panes/Str.md), [`Markdown`](../../reference/panes/Markdown.md) and [`Alert`](../../reference/panes/Alert.md) panes
 - Display plot figures like [Altair](https://altair-viz.github.io/), [ECharts](https://echarts.apache.org/en/index.html), [hvPlot](https://hvplot.holoviz.org), [Matplotlib](https://matplotlib.org/), [Plotly](https://plotly.com/python/) and [Vizzu](https://vizzuhq.com/) with the [`Vega`](../../reference/panes/Vega.md), [`ECharts`](../../reference/panes/ECharts.md), [`HoloViews`](../../reference/panes/HoloViews.md), [`Matplotlib`](../../reference/panes/Matplotlib.md), [`Plotly`](../../reference/panes/Plotly.md) and [`Vizzu`](../../reference/panes/Vizzu.md) *panes*, respectively.
-- Display *DataFrames* with the [`DataFrame`](../../reference/panes/DataFrame.md) and [`Perspective`]((../../reference/panes/Perspective.md)) *panes*.
+- Display *DataFrames* with the [`DataFrame`](../../reference/panes/DataFrame.md) and [`Perspective`](../../reference/panes/Perspective.md) *panes*.
 - Add JavaScript dependencies via `pn.extension`. For example `pn.extension("vega")` or `pn.extension("plotly")`
-- Discover all *Panes* and their *reference guides* in the [Panes Section](https://panel.holoviz.org/reference/index.html#panes) of the [Component Gallery](../../reference/index.md).
+- Discover all *Panes* and their *reference guides* in the [Panes Section](../../reference/index.rst#panes) of the [Component Gallery](../../reference/index.rst).
 
 ## Resources
 
@@ -390,4 +390,4 @@ In this guide, we have learned to display Python objects with *Panes*:
 
 ### Component Gallery
 
-- [Panes](https://panel.holoviz.org/reference/index.html#panes)
+- [Panes](../../reference/index.rst#panes)
diff --git a/doc/tutorials/basic/pn_panel.md b/doc/tutorials/basic/pn_panel.md
index 05744c9022..1dbc64215e 100644
--- a/doc/tutorials/basic/pn_panel.md
+++ b/doc/tutorials/basic/pn_panel.md
@@ -96,7 +96,7 @@ component.servable()
 ```
 
 :::{tip}
-If we want to display larger dataframes, customize the way the dataframes are displayed, or make them more interactive, we can find specialized components in the [Component Gallery](../../reference/index.md) supporting these use cases. For example, the [Tabulator](../../reference/widgets/Tabulator.md) *widget* and [Perspective](../../reference/panes/Perspective.md) *pane*.
+If we want to display larger dataframes, customize the way the dataframes are displayed, or make them more interactive, we can find specialized components in the [Component Gallery](../../reference/index.rst) supporting these use cases. For example, the [Tabulator](../../reference/widgets/Tabulator.md) *widget* and [Perspective](../../reference/panes/Perspective.md) *pane*.
 :::
 
 ## Display Plots
@@ -299,7 +299,7 @@ component.servable()
 
 ## Display any Python object in a layout
 
-If we place objects in a [*layout*](https://panel.holoviz.org/reference/index.html#layouts) like [`pn.Column`](../../reference/layouts/Column.md) (more about layouts later), then the layout will apply `pn.panel` for us automatically.
+If we place objects in a [*layout*](../../reference/index.rst#layouts) like [`pn.Column`](../../reference/layouts/Column.md) (more about layouts later), then the layout will apply `pn.panel` for us automatically.
 
 Run the code below:
 
@@ -343,7 +343,7 @@ The example above sets the *css* `styles` of the `Audio` player. The `styles` pa
 
 ## Consider Performance
 
-`pn.panel` is a versatile helper function that converts objects into a [*Pane*](https://panel.holoviz.org/reference/index.html#panes). It automatically selects the best *representation* for an object based on available [*Pane*](https://panel.holoviz.org/reference/index.html#panes) types, ranking them by priority.
+`pn.panel` is a versatile helper function that converts objects into a [*Pane*](../../reference/index.rst#panes). It automatically selects the best *representation* for an object based on available [*Pane*](../../reference/index.rst#panes) types, ranking them by priority.
 
 For optimal performance, specify the desired *Pane* type directly, like `pn.pane.Matplotlib(fig)` instead of using `pn.panel(fig)`. You will learn about *Panes*  in the [Display Content with Panes](panes.md) section.
 
@@ -374,4 +374,4 @@ In this guide, we have learned to display Python objects easily with `pn.panel`:
 
 ### Component Gallery
 
-- [Panes](https://panel.holoviz.org/reference/index.html#panes)
+- [Panes](../../reference/index.rst#panes)
diff --git a/doc/tutorials/basic/size.md b/doc/tutorials/basic/size.md
index aed2680474..4791ec5a64 100644
--- a/doc/tutorials/basic/size.md
+++ b/doc/tutorials/basic/size.md
@@ -326,7 +326,7 @@ pn.FlexBox(*spacers).servable()
 Adjust the width of your browser window to observe the layout's responsiveness.
 
 :::{note}
-We'll explore `FlexBox` in more detail in the [Control the Size (intermediate)](../intermediate/size.md) tutorial.
+We'll explore `FlexBox` in more detail in the [Advanced Layouts](../intermediate/advanced_layouts.md) tutorial.
 :::
 
 ## Recap
@@ -342,7 +342,7 @@ In this tutorial, we've explored various aspects of controlling component size i
 
 ### Tutorials
 
-- [Control the Size (intermediate)](../intermediate/size.md)
+- [Advanced Layouts](../intermediate/advanced_layouts.md)
 
 ### How-to
 
diff --git a/doc/tutorials/basic/templates.md b/doc/tutorials/basic/templates.md
index 9186e48912..a4e0b624bf 100644
--- a/doc/tutorials/basic/templates.md
+++ b/doc/tutorials/basic/templates.md
@@ -47,7 +47,7 @@ For additional configuration options, refer to the [`FastListTemplate` reference
 Panel offers a rich assortment of built-in templates, including a versatile [`Slides`](../../reference/templates/Slides.md) template.
 :::
 
-Take a moment to explore the [Templates Section](https://panel.holoviz.org/reference/index.html#templates) in the [Component Gallery](../../reference/index.md), then return here.
+Take a moment to explore the [Templates Section](../../reference/index.rst#templates) in the [Component Gallery](../../reference/index.rst), then return here.
 
 ## Integrating Templates in a Notebook
 
@@ -165,7 +165,7 @@ Note that `accent` and `main_layout` are exclusive to Fast templates like [FastL
 In this tutorial, we've explored the power of pre-made templates for structuring your app with ease:
 
 - Templates are available in the `pn.template` namespace.
-- Find a variety of templates in the [Templates Section](https://panel.holoviz.org/reference/index.html#templates) of the [Component Gallery](../../reference/index.md).
+- Find a variety of templates in the [Templates Section](../../reference/index.rst#templates) of the [Component Gallery](../../reference/index.rst).
 - Templates offer high customizability.
 
 ## References
@@ -189,4 +189,4 @@ In this tutorial, we've explored the power of pre-made templates for structuring
 
 ### Component Gallery
 
-- Explore the [Templates Section](https://panel.holoviz.org/reference/index.html#templates) in the [Component Gallery](../../reference/index.md) for more options.
+- Explore the [Templates Section](../../reference/index.rst#templates) in the [Component Gallery](../../reference/index.rst) for more options.
diff --git a/doc/tutorials/basic/widgets.md b/doc/tutorials/basic/widgets.md
index e742c7efbf..dd00b456d4 100644
--- a/doc/tutorials/basic/widgets.md
+++ b/doc/tutorials/basic/widgets.md
@@ -6,7 +6,7 @@ Welcome to the tutorial on accepting user inputs with widgets in Panel! Let's di
 
 Widgets, found within the `pn.widgets` namespace, are powerful tools for capturing user input and interaction. They offer a wide range of functionality and customization options, making them essential for creating dynamic and engaging apps.
 
-You can explore the full array of available widgets and their detailed reference guides in the [Widgets Section](https://panel.holoviz.org/reference/index.html#widgets) of the [Component Gallery](../../reference/index.md).
+You can explore the full array of available widgets and their detailed reference guides in the [Widgets Section](../../reference/index.rst#widgets) of the [Component Gallery](../../reference/index.rst).
 
 :::{note}
 Widgets typically utilize the `value` parameter to capture user input.
@@ -103,7 +103,7 @@ pn.widgets.RadioButtonGroup(
 
 In this tutorial, we've covered various ways to accept user input using widgets in Panel. From simple clicks to text input and selection from lists, widgets provide powerful tools for building interactive applications.
 
-Don't forget to explore the [Component Gallery](https://panel.holoviz.org/reference/index.html#widgets) for more widgets and their detailed reference guides.
+Don't forget to explore the [Component Gallery](../../reference/index.rst#widgets) for more widgets and their detailed reference guides.
 
 ## Resources
 
@@ -121,4 +121,4 @@ Don't forget to explore the [Component Gallery](https://panel.holoviz.org/refere
 
 ### Component Gallery
 
-- [Widgets](https://panel.holoviz.org/reference/index.html#widgets)
+- [Widgets](../../reference/index.rst#widgets)
diff --git a/doc/tutorials/expert/custom_anywidget_components.md b/doc/tutorials/expert/custom_anywidget_components.md
index 6479944163..b58d74ddc3 100644
--- a/doc/tutorials/expert/custom_anywidget_components.md
+++ b/doc/tutorials/expert/custom_anywidget_components.md
@@ -1,6 +1,6 @@
 # Creating a `MarioButton` with `JSComponent`
 
-In this tutorial we will build a *[Mario](https://mario.nintendo.com/) style button* with sounds and animations using the [`AnyWidgetComponent`](../../reference/custom/AnyWidgetComponent.md) feature in Panel. It aims to help you learn how to push the boundaries of what can be achieved with HoloViz Panel by creating advanced components using modern JavaScript and CSS technologies.
+In this tutorial we will build a *[Mario](https://mario.nintendo.com/) style button* with sounds and animations using the [`AnyWidgetComponent`](../../reference/custom_components/AnyWidgetComponent.md) feature in Panel. It aims to help you learn how to push the boundaries of what can be achieved with HoloViz Panel by creating advanced components using modern JavaScript and CSS technologies.
 
 ![Mario chime button](https://assets.holoviz.org/panel/tutorials/ipymario.gif)
 
@@ -226,7 +226,7 @@ Try clicking the button to see the button bounce more slowly.
 
 ## Conclusion
 
-You've now created a custom `MarioButton` component using  [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md) in HoloViz Panel. This button features a pixelated Mario icon, plays a chime sound when clicked, and has customizable parameters for gain, duration, size, and animation.
+You've now created a custom `MarioButton` component using  [`AnyWidgetComponent`](../../reference/custom_components/AnyWidgetComponent.md) in HoloViz Panel. This button features a pixelated Mario icon, plays a chime sound when clicked, and has customizable parameters for gain, duration, size, and animation.
 
 ## References
 
@@ -240,6 +240,6 @@ You've now created a custom `MarioButton` component using  [`AnyWidgetComponent`
 
 ### Reference Guides
 
-- [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md)
-- [`JSComponent`](../../reference/panes/JSComponent.md)
-- [`ReactComponent`](../../reference/panes/ReactComponent.md)
+- [`AnyWidgetComponent`](../../reference/custom_components/AnyWidgetComponent.md)
+- [`JSComponent`](../../reference/custom_components/JSComponent.md)
+- [`ReactComponent`](../../reference/custom_components/ReactComponent.md)
diff --git a/doc/tutorials/expert/custom_js_components.md b/doc/tutorials/expert/custom_js_components.md
index ce27132160..e1e9c53625 100644
--- a/doc/tutorials/expert/custom_js_components.md
+++ b/doc/tutorials/expert/custom_js_components.md
@@ -1,6 +1,6 @@
 # Creating a `MarioButton` with `JSComponent`
 
-In this tutorial we will build a *[Mario](https://mario.nintendo.com/) style button* with sounds and animations using the [`JSComponent`](../../reference/custom/JSComponent.md) feature in Panel. It aims to help you learn how to push the boundaries of what can be achieved with HoloViz Panel by creating advanced components using modern JavaScript and CSS technologies.
+In this tutorial we will build a *[Mario](https://mario.nintendo.com/) style button* with sounds and animations using the [`JSComponent`](../../reference/custom_components/JSComponent.md) feature in Panel. It aims to help you learn how to push the boundaries of what can be achieved with HoloViz Panel by creating advanced components using modern JavaScript and CSS technologies.
 
 ![Mario chime button](https://assets.holoviz.org/panel/tutorials/ipymario.gif)
 
@@ -225,7 +225,7 @@ Try clicking the button to see the button bounce more slowly.
 
 ## Conclusion
 
-You've now created a custom `MarioButton` component using  [`JSComponent`](../../reference/panes/JSComponent.md) in HoloViz Panel. This button features a pixelated Mario icon, plays a chime sound when clicked, and has customizable parameters for gain, duration, size, and animation.
+You've now created a custom `MarioButton` component using  [`JSComponent`](../../reference/custom_components/JSComponent.md) in HoloViz Panel. This button features a pixelated Mario icon, plays a chime sound when clicked, and has customizable parameters for gain, duration, size, and animation.
 
 ## References
 
@@ -239,6 +239,6 @@ You've now created a custom `MarioButton` component using  [`JSComponent`](../..
 
 ### Reference Guides
 
-- [`AnyWidgetComponent`](../../reference/panes/AnyWidgetComponent.md)
-- [`JSComponent`](../../reference/panes/JSComponent.md)
-- [`ReactComponent`](../../reference/panes/ReactComponent.md)
+- [`AnyWidgetComponent`](../../reference/custom_components/AnyWidgetComponent.md)
+- [`JSComponent`](../../reference/custom_components/JSComponent.md)
+- [`ReactComponent`](../../reference/custom_components/ReactComponent.md)
diff --git a/doc/tutorials/intermediate/serve.md b/doc/tutorials/intermediate/serve.md
index de8a9acf1a..2991175b11 100644
--- a/doc/tutorials/intermediate/serve.md
+++ b/doc/tutorials/intermediate/serve.md
@@ -6,7 +6,7 @@ In this tutorial you will learn more advanced techniques to serve Panel apps:
 - list the configuration options of `panel serve` by adding the flag `--help`.
 
 :::{note}
-This guide builds upon the [Serve Panel Apps (beginner)](../basic/) tutorial.
+This guide builds upon the [Serve Panel Apps (beginner)](../basic/serve.md) tutorial.
 :::
 
 ## Serve a multi-page app
@@ -250,7 +250,7 @@ You can
 - [Launch a server on the commandline](../../how_to/server/commandline.md)
 - [Serve multiple applications with `pn.serve`](../../how_to/server/multiple.md)
 - [Serve static files with `--static-dirs`](../../how_to/server/static_files.md)
-- [Serve with Django](../../how_to/integrations/django.md)
+- [Serve with Django](../../how_to/integrations/Django.md)
 - [Serve with FastAPI](../../how_to/integrations/FastAPI.md)
 - [Serve with Flask](../../how_to/integrations/flask.md)
 - [Write and serve apps in Markdown](../../how_to/editor/markdown.md)
diff --git a/examples/reference/custom_components/AnyWidgetComponent.ipynb b/examples/reference/custom_components/AnyWidgetComponent.ipynb
index 835a16569d..8ca0f1a7c9 100644
--- a/examples/reference/custom_components/AnyWidgetComponent.ipynb
+++ b/examples/reference/custom_components/AnyWidgetComponent.ipynb
@@ -541,17 +541,17 @@
     "\n",
     "### Tutorials\n",
     "\n",
-    "- [Build Custom Components](../../../how_to/custom_components/reactive_esm/reactive_esm_layout.md)\n",
+    "- [Build Custom Components](../../how_to/custom_components/esm/custom_layout.md)\n",
     "\n",
     "### How-To Guides\n",
     "\n",
-    "- [Convert `AnyWidget` widgets](../../../how_to/migrate/anywidget/index.md)\n",
+    "- [Convert `AnyWidget` widgets](../../how_to/migrate/anywidget/index.md)\n",
     "\n",
     "### Reference Guides\n",
     "\n",
-    "- [`AnyWidgetComponent`](./AnyWidgetComponent.ipynb)\n",
-    "- [`JSComponent`](./JSComponent.ipynb)\n",
-    "- [`ReactComponent`](./ReactComponent.ipynb)"
+    "- [`AnyWidgetComponent`](AnyWidgetComponent.ipynb)\n",
+    "- [`JSComponent`](JSComponent.ipynb)\n",
+    "- [`ReactComponent`](ReactComponent.ipynb)"
    ]
   }
  ],
diff --git a/examples/reference/custom_components/JSComponent.ipynb b/examples/reference/custom_components/JSComponent.ipynb
index f41b564309..9fcf235271 100644
--- a/examples/reference/custom_components/JSComponent.ipynb
+++ b/examples/reference/custom_components/JSComponent.ipynb
@@ -586,17 +586,17 @@
     "\n",
     "### Tutorials\n",
     "\n",
-    "- [Build Custom Components](../../../how_to/custom_components/reactive_esm/reactive_esm_layout.md)\n",
+    "- [Build Custom Components](../../how_to/custom_components/esm/custom_layout.md)\n",
     "\n",
     "### How-To Guides\n",
     "\n",
-    "- [Convert `AnyWidget` widgets](../../../how_to/migrate/anywidget/index.md)\n",
+    "- [Convert `AnyWidget` widgets](../../how_to/migrate/anywidget/index.md)\n",
     "\n",
     "### Reference Guides\n",
     "\n",
-    "- [`AnyWidgetComponent`](./AnyWidgetComponent.ipynb)\n",
-    "- [`JSComponent`](./JSComponent.ipynb)\n",
-    "- [`ReactComponent`](./ReactComponent.ipynb)"
+    "- [`AnyWidgetComponent`](AnyWidgetComponent.ipynb)\n",
+    "- [`JSComponent`](JSComponent.ipynb)\n",
+    "- [`ReactComponent`](ReactComponent.ipynb)"
    ]
   }
  ],
diff --git a/examples/reference/custom_components/PyComponent.ipynb b/examples/reference/custom_components/PyComponent.ipynb
index 0c403e697e..e85e097996 100644
--- a/examples/reference/custom_components/PyComponent.ipynb
+++ b/examples/reference/custom_components/PyComponent.ipynb
@@ -302,11 +302,11 @@
     "\n",
     "### Tutorials\n",
     "\n",
-    "- [Reusable Components](../../../tutorials/intermediate/reusable_components.md)\n",
+    "- [Reusable Components](../../tutorials/intermediate/reusable_components.md)\n",
     "\n",
     "### How-To Guides\n",
     "\n",
-    "- [Combine Existing Widgets](../../../how_to/custom_components/python/create_custom_widget)"
+    "- [Combine Existing Widgets](../../how_to/custom_components/python/create_custom_widget.md)"
    ]
   }
  ],
diff --git a/examples/reference/custom_components/ReactComponent.ipynb b/examples/reference/custom_components/ReactComponent.ipynb
index 3f16f87a19..e5f9912a3b 100644
--- a/examples/reference/custom_components/ReactComponent.ipynb
+++ b/examples/reference/custom_components/ReactComponent.ipynb
@@ -621,17 +621,17 @@
     "\n",
     "### Tutorials\n",
     "\n",
-    "- [Build Custom Components](../../../how_to/custom_components/reactive_esm/reactive_esm_layout.md)\n",
+    "- [Build Custom Components](../../how_to/custom_components/esm/custom_layout.md)\n",
     "\n",
     "### How-To Guides\n",
     "\n",
-    "- [Convert `AnyWidget` widgets](../../../how_to/migrate/anywidget/index.md)\n",
+    "- [Convert `AnyWidget` widgets](../../how_to/migrate/anywidget/index.md)\n",
     "\n",
     "### Reference Guides\n",
     "\n",
-    "- [`AnyWidgetComponent`](./AnyWidgetComponent.ipynb)\n",
-    "- [`JSComponent`](./JSComponent.ipynb)\n",
-    "- [`ReactComponent`](./ReactComponent.ipynb)"
+    "- [`AnyWidgetComponent`](AnyWidgetComponent.ipynb)\n",
+    "- [`JSComponent`](JSComponent.ipynb)\n",
+    "- [`ReactComponent`](ReactComponent.ipynb)"
    ]
   }
  ],
diff --git a/examples/reference/custom_components/Viewer.ipynb b/examples/reference/custom_components/Viewer.ipynb
index 0466c9b2de..4317468277 100644
--- a/examples/reference/custom_components/Viewer.ipynb
+++ b/examples/reference/custom_components/Viewer.ipynb
@@ -335,11 +335,11 @@
     "\n",
     "### Tutorials\n",
     "\n",
-    "- [Reusable Components](../../../tutorials/intermediate/reusable_components.md)\n",
+    "- [Reusable Components](../../tutorials/intermediate/reusable_components.md)\n",
     "\n",
     "### How-To Guides\n",
     "\n",
-    "- [Combine Existing Widgets](../../../how_to/custom_components/custom_viewer.md)"
+    "- [Combine Existing Widgets](../../how_to/custom_components/custom_viewer.md)"
    ]
   }
  ],
diff --git a/examples/reference/indicators/Progress.ipynb b/examples/reference/indicators/Progress.ipynb
index 52ced290a4..2142082d8d 100644
--- a/examples/reference/indicators/Progress.ipynb
+++ b/examples/reference/indicators/Progress.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``Progress`` widget displays the progress towards some target based on the current `value` and the `max` value. If no `value` is set or a `value` of -1 is set the ``Progress`` widget is in indeterminate mode and will animate if `active` is set to True.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/layouts/GridSpec.ipynb b/examples/reference/layouts/GridSpec.ipynb
index 443d5a801e..fb089c21c3 100644
--- a/examples/reference/layouts/GridSpec.ipynb
+++ b/examples/reference/layouts/GridSpec.ipynb
@@ -114,7 +114,7 @@
     "\n",
     "### Responsive grids\n",
     "\n",
-    "In addition to fixed-size grids, ``GridSpec`` also supports all the standard sizing modes outlined in the [Customization user guide](../../user_guide/Customization.ipynb). Responsive sizing modes allow declaring grids that rescale dynamically when the browser window is resized and when loading the app or dashboard on different devices. Just like the fixed-width mode, the ``GridSpec`` will automatically set responsive sizing modes on the grid contents to fill the space correctly. To control the maximum and minimum size of the grid, use the `max_` and `min_` `width` and `height` options."
+    "In addition to fixed-size grids, ``GridSpec`` also supports all the standard sizing modes outlined in the [Sizing how-to guide](../../how_to/layout/size.md). Responsive sizing modes allow declaring grids that rescale dynamically when the browser window is resized and when loading the app or dashboard on different devices. Just like the fixed-width mode, the ``GridSpec`` will automatically set responsive sizing modes on the grid contents to fill the space correctly. To control the maximum and minimum size of the grid, use the `max_` and `min_` `width` and `height` options."
    ]
   },
   {
diff --git a/examples/reference/panes/ReactiveExpr.ipynb b/examples/reference/panes/ReactiveExpr.ipynb
index 8585340647..93d32aeb2c 100644
--- a/examples/reference/panes/ReactiveExpr.ipynb
+++ b/examples/reference/panes/ReactiveExpr.ipynb
@@ -40,7 +40,7 @@
     "\n",
     "* **`widgets`** (ListPanel): Returns the widgets in a `widget_layout`.\n",
     "\n",
-    "For more layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "For more layout and styling related parameters see the [Sizing how-to guide](../../how_to/layout/size.md).\n",
     "___"
    ]
   },
diff --git a/examples/reference/templates/Bootstrap.ipynb b/examples/reference/templates/Bootstrap.ipynb
index ab0e3bdc5a..816b2461a9 100644
--- a/examples/reference/templates/Bootstrap.ipynb
+++ b/examples/reference/templates/Bootstrap.ipynb
@@ -8,7 +8,7 @@
     "\n",
     "## Basic Templates\n",
     "\n",
-    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
+    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../explanation/styling/templates_overview.md), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
     "\n",
     "* **`header`**: The header area of the HTML page\n",
     "* **`sidebar`**: A collapsible sidebar\n",
diff --git a/examples/reference/templates/EditableTemplate.ipynb b/examples/reference/templates/EditableTemplate.ipynb
index 48fd24f179..783df28030 100644
--- a/examples/reference/templates/EditableTemplate.ipynb
+++ b/examples/reference/templates/EditableTemplate.ipynb
@@ -17,7 +17,7 @@
     "\n",
     "## Basic Templates\n",
     "\n",
-    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
+    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../explanation/styling/templates_overview.md), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
     "\n",
     "* **`header`**: The header area of the HTML page\n",
     "* **`sidebar`**: A collapsible sidebar\n",
diff --git a/examples/reference/templates/FastGridTemplate.ipynb b/examples/reference/templates/FastGridTemplate.ipynb
index b33dc27e54..8f2177ea24 100644
--- a/examples/reference/templates/FastGridTemplate.ipynb
+++ b/examples/reference/templates/FastGridTemplate.ipynb
@@ -8,7 +8,7 @@
     "\n",
     "## Basic Templates\n",
     "\n",
-    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
+    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../explanation/styling/templates_overview.md), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
     "\n",
     "* **`header`**: The header area of the HTML page\n",
     "* **`sidebar`**: A collapsible sidebar\n",
diff --git a/examples/reference/templates/FastListTemplate.ipynb b/examples/reference/templates/FastListTemplate.ipynb
index a9a508b686..e72459ba82 100644
--- a/examples/reference/templates/FastListTemplate.ipynb
+++ b/examples/reference/templates/FastListTemplate.ipynb
@@ -8,7 +8,7 @@
     "\n",
     "## Basic Templates\n",
     "\n",
-    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
+    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../explanation/styling/templates_overview.md), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
     "\n",
     "* **`header`**: The header area of the HTML page\n",
     "* **`sidebar`**: A collapsible sidebar\n",
diff --git a/examples/reference/templates/GoldenLayout.ipynb b/examples/reference/templates/GoldenLayout.ipynb
index b0b3823617..757fa89ab2 100644
--- a/examples/reference/templates/GoldenLayout.ipynb
+++ b/examples/reference/templates/GoldenLayout.ipynb
@@ -4,7 +4,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
+    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../explanation/styling/templates_overview.md), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
     "\n",
     "* **`header`**: The header area of the HTML page\n",
     "* **`sidebar`**: A collapsible sidebar\n",
diff --git a/examples/reference/templates/Material.ipynb b/examples/reference/templates/Material.ipynb
index ab573b6fcd..99f829709c 100644
--- a/examples/reference/templates/Material.ipynb
+++ b/examples/reference/templates/Material.ipynb
@@ -8,7 +8,7 @@
     "\n",
     "## Basic Templates\n",
     "\n",
-    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
+    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../explanation/styling/templates_overview.md), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
     "\n",
     "* **`header`**: The header area of the HTML page\n",
     "* **`sidebar`**: A collapsible sidebar\n",
diff --git a/examples/reference/templates/React.ipynb b/examples/reference/templates/React.ipynb
index af0ddc4153..960ecb0011 100644
--- a/examples/reference/templates/React.ipynb
+++ b/examples/reference/templates/React.ipynb
@@ -8,7 +8,7 @@
     "\n",
     "## Basic Templates\n",
     "\n",
-    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
+    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../explanation/styling/templates_overview.md), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
     "\n",
     "* **`header`**: The header area of the HTML page\n",
     "* **`sidebar`**: A collapsible sidebar\n",
diff --git a/examples/reference/templates/Slides.ipynb b/examples/reference/templates/Slides.ipynb
index 1912431367..8950b69277 100644
--- a/examples/reference/templates/Slides.ipynb
+++ b/examples/reference/templates/Slides.ipynb
@@ -8,7 +8,7 @@
     "\n",
     "## Basic Templates\n",
     "\n",
-    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
+    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../explanation/styling/templates_overview.md), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
     "\n",
     "* **`header`**: The header area of the HTML page\n",
     "* **`sidebar`**: A collapsible sidebar\n",
diff --git a/examples/reference/templates/Vanilla.ipynb b/examples/reference/templates/Vanilla.ipynb
index fa49647d85..716cb058a0 100644
--- a/examples/reference/templates/Vanilla.ipynb
+++ b/examples/reference/templates/Vanilla.ipynb
@@ -8,7 +8,7 @@
     "\n",
     "## Basic Templates\n",
     "\n",
-    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../user_guide/Templates.ipynb), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
+    "For a large variety of use cases we do not need complete control over the exact layout of each individual component on the page, as could be achieved with a [custom template](../../explanation/styling/templates_overview.md), we just want to achieve a more polished look and feel. For these cases Panel ships with a number of default templates, which are defined by declaring four main content areas on the page, which can be populated as desired:\n",
     "\n",
     "* **`header`**: The header area of the HTML page\n",
     "* **`sidebar`**: A collapsible sidebar\n",
diff --git a/examples/reference/widgets/ArrayInput.ipynb b/examples/reference/widgets/ArrayInput.ipynb
index cda97419b8..1b16abff3d 100644
--- a/examples/reference/widgets/ArrayInput.ipynb
+++ b/examples/reference/widgets/ArrayInput.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The ``ArrayInput`` widget allows rendering and editing NumPy arrays using a text entry box whose contents are then parsed in Python. In order to avoid issues with large arrays the `ArrayInput` defines a `max_array_size`, if the array exceeds this size the textual representation will be summarized and editing will be disabled.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/AutocompleteInput.ipynb b/examples/reference/widgets/AutocompleteInput.ipynb
index 7082839a8e..966707a15a 100644
--- a/examples/reference/widgets/AutocompleteInput.ipynb
+++ b/examples/reference/widgets/AutocompleteInput.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The `AutocompleteInput` widget allows selecting a `value` from a list or dictionary of `options` by entering the value into an auto-completing text field. It falls into the broad category of single-value, option-selection widgets that provide a compatible API and include the [`RadioBoxGroup`](RadioBoxGroup.ipynb), [`Select`](Select.ipynb) and [`DiscreteSlider`](DiscreteSlider.ipynb) widgets.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/Button.ipynb b/examples/reference/widgets/Button.ipynb
index 1562f85ef2..edf84571e5 100644
--- a/examples/reference/widgets/Button.ipynb
+++ b/examples/reference/widgets/Button.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``Button`` widget allows triggering events when the button is clicked. In addition to a `value` parameter, which will toggle from `False` to `True` while the click event is being processed an additional ``clicks`` parameter that can be watched to subscribe to click events.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/ButtonIcon.ipynb b/examples/reference/widgets/ButtonIcon.ipynb
index 4b0917c08c..70c0c51e84 100644
--- a/examples/reference/widgets/ButtonIcon.ipynb
+++ b/examples/reference/widgets/ButtonIcon.ipynb
@@ -20,7 +20,7 @@
     "\n",
     "For instance, the `ButtonIcon` can be effectively utilized to implement a feature akin to ChatGPT's copy-to-clipboard button.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/CheckBoxGroup.ipynb b/examples/reference/widgets/CheckBoxGroup.ipynb
index 4e8346c850..948eb926e6 100644
--- a/examples/reference/widgets/CheckBoxGroup.ipynb
+++ b/examples/reference/widgets/CheckBoxGroup.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``CheckBoxGroup`` widget allows selecting between a list of options by ticking the corresponding checkboxes. It falls into the broad category of multi-option selection widgets that provide a compatible API and include the [``MultiSelect``](MultiSelect.ipynb), [``CrossSelector``](CrossSelector.ipynb) and [``CheckButtonGroup``](CheckButtonGroup.ipynb) widgets.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/CheckButtonGroup.ipynb b/examples/reference/widgets/CheckButtonGroup.ipynb
index ea5595f0e0..87189e7e7b 100644
--- a/examples/reference/widgets/CheckButtonGroup.ipynb
+++ b/examples/reference/widgets/CheckButtonGroup.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``CheckButtonGroup`` widget allows selecting between a list of options by toggling the corresponding buttons. It falls into the broad category of multi-option selection widgets that provide a compatible API and include the [``MultiSelect``](MultiSelect.ipynb), [``CrossSelector``](CrossSelector.ipynb) and [``CheckBoxGroup``](CheckButtonGroup.ipynb) widgets.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/Checkbox.ipynb b/examples/reference/widgets/Checkbox.ipynb
index 46aca798ed..7e46ff4677 100644
--- a/examples/reference/widgets/Checkbox.ipynb
+++ b/examples/reference/widgets/Checkbox.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``Checkbox`` widget allows toggling a single condition between ``True``/``False`` states by ticking a checkbox. This widget is interchangeable with the ``Toggle`` widget.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/ColorMap.ipynb b/examples/reference/widgets/ColorMap.ipynb
index 7ce6baa481..70586d9ff3 100644
--- a/examples/reference/widgets/ColorMap.ipynb
+++ b/examples/reference/widgets/ColorMap.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The `ColorMap` widget allows selecting a `value` from a dictionary containing color palettes. The widget is similar to a [`Select` widget](./Select.ipynb) except it allows only valid color palettes, i.e. lists of hex or named colors or matplotlib colormaps. \n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/ColorPicker.ipynb b/examples/reference/widgets/ColorPicker.ipynb
index 5cb8ddb698..c25525b87c 100644
--- a/examples/reference/widgets/ColorPicker.ipynb
+++ b/examples/reference/widgets/ColorPicker.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``ColorPicker`` widget allows selecting a color using the browser's color-picking widget support.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/CrossSelector.ipynb b/examples/reference/widgets/CrossSelector.ipynb
index 1338abed49..38abc9db15 100644
--- a/examples/reference/widgets/CrossSelector.ipynb
+++ b/examples/reference/widgets/CrossSelector.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The `CrossSelector` widget allows selecting multiple values from a list of options by moving items between two lists. It falls into the broad category of multi-option selection widgets that provide a compatible API and include the [`MultiSelect`](MultiSelect.ipynb), [`CheckBoxGroup`](CheckBoxGroup.ipynb) and [`CheckButtonGroup`](CheckButtonGroup.ipynb) widgets.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DataFrame.ipynb b/examples/reference/widgets/DataFrame.ipynb
index 1d8dc620f3..7079189cb4 100644
--- a/examples/reference/widgets/DataFrame.ipynb
+++ b/examples/reference/widgets/DataFrame.ipynb
@@ -19,7 +19,7 @@
    "source": [
     "The ``DataFrame`` widget allows displaying and editing a pandas DataFrame. Note that editing is not possible for multi-indexed DataFrames, in which case you will need to reduce the DataFrame to a single index. Also note that the `DataFrame` widget will eventually be replaced with the [`Tabulator`](./Tabulator.ipynb) widget, and so new code should be written to use Tabulator instead.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DatePicker.ipynb b/examples/reference/widgets/DatePicker.ipynb
index c265087c05..1b273fb26b 100644
--- a/examples/reference/widgets/DatePicker.ipynb
+++ b/examples/reference/widgets/DatePicker.ipynb
@@ -19,7 +19,7 @@
    "source": [
     "The ``DatePicker`` widget allows selecting selecting a date value using a text box and the browser's date-picking utility.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DateRangePicker.ipynb b/examples/reference/widgets/DateRangePicker.ipynb
index 0d070ecc08..9ba9dbabc9 100644
--- a/examples/reference/widgets/DateRangePicker.ipynb
+++ b/examples/reference/widgets/DateRangePicker.ipynb
@@ -19,7 +19,7 @@
    "source": [
     "The `DateRangePicker` widget allows selecting a date range using a text box and the browser's date-picking utility.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DateRangeSlider.ipynb b/examples/reference/widgets/DateRangeSlider.ipynb
index c5236337e7..130bf45da7 100644
--- a/examples/reference/widgets/DateRangeSlider.ipynb
+++ b/examples/reference/widgets/DateRangeSlider.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The ``DateRangeSlider`` widget allows selecting a date range using a slider with two handles.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DateSlider.ipynb b/examples/reference/widgets/DateSlider.ipynb
index 16433f92a0..61f1d8b385 100644
--- a/examples/reference/widgets/DateSlider.ipynb
+++ b/examples/reference/widgets/DateSlider.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The ``DateSlider`` widget allows selecting selecting a date value within a set bounds using a slider.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DatetimeInput.ipynb b/examples/reference/widgets/DatetimeInput.ipynb
index a29bf9ec5c..eef9f31c8f 100644
--- a/examples/reference/widgets/DatetimeInput.ipynb
+++ b/examples/reference/widgets/DatetimeInput.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The ``DatetimeInput`` widget allows entering a datetime value as text and parsing it using a pre-defined formatter. \n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DatetimePicker.ipynb b/examples/reference/widgets/DatetimePicker.ipynb
index c190bb220a..b3c2b64572 100644
--- a/examples/reference/widgets/DatetimePicker.ipynb
+++ b/examples/reference/widgets/DatetimePicker.ipynb
@@ -19,7 +19,7 @@
    "source": [
     "The `DatetimePicker` widget allows selecting selecting a datetime value using a text box and the browser's datetime-picking utility.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DatetimeRangeInput.ipynb b/examples/reference/widgets/DatetimeRangeInput.ipynb
index 9ff534df22..522eda3c3d 100644
--- a/examples/reference/widgets/DatetimeRangeInput.ipynb
+++ b/examples/reference/widgets/DatetimeRangeInput.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The ``DatetimeRangeInput`` widget allows selecting a datetime range using two [`DatetimeInput`](./DatetimeInput.ipynb) widgets, which return a tuple range.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DatetimeRangePicker.ipynb b/examples/reference/widgets/DatetimeRangePicker.ipynb
index 9002758e25..843674ae83 100644
--- a/examples/reference/widgets/DatetimeRangePicker.ipynb
+++ b/examples/reference/widgets/DatetimeRangePicker.ipynb
@@ -19,7 +19,7 @@
    "source": [
     "The `DatetimeRangePicker` widget allows selecting selecting a datetime value using a text box and the browser's datetime-picking utility.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DatetimeRangeSlider.ipynb b/examples/reference/widgets/DatetimeRangeSlider.ipynb
index d7cd94695c..4ea7d30467 100644
--- a/examples/reference/widgets/DatetimeRangeSlider.ipynb
+++ b/examples/reference/widgets/DatetimeRangeSlider.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The ``DateRangeSlider`` widget allows selecting a date range using a slider with two handles.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DiscretePlayer.ipynb b/examples/reference/widgets/DiscretePlayer.ipynb
index 36599f913c..aea763d75b 100644
--- a/examples/reference/widgets/DiscretePlayer.ipynb
+++ b/examples/reference/widgets/DiscretePlayer.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``DiscretePlayer`` widget displays media-player-like controls that allow playing and stepping through the provided options. When playing it triggers events at a pre-defined interval on the frontend, advancing the player value each time. It falls into the broad category of single-value, option-selection widgets that provide a compatible API and include the [``AutocompleteInput``](AutocompleteInput.ipynb), [``Select``](Select.ipynb) and [``DiscreteSlider``](DiscreteSlider.ipynb) widgets.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/DiscreteSlider.ipynb b/examples/reference/widgets/DiscreteSlider.ipynb
index 4b9e319a85..9f1e26cc55 100644
--- a/examples/reference/widgets/DiscreteSlider.ipynb
+++ b/examples/reference/widgets/DiscreteSlider.ipynb
@@ -16,8 +16,6 @@
    "source": [
     "The ``DiscreteSlider`` widget allows selecting from a discrete list or dictionary of values using a slider. It falls into the broad category of single-value, option-selection widgets that provide a compatible API and include the [``AutocompleteInput``](AutocompleteInput.ipynb), and [``Select``](Select.ipynb) widgets.\n",
     "\n",
-    "For more information about listening to widget events and laying out widgets refer to the [widgets user guide](../../user_guide/Widgets.md). Alternatively you can learn how to build GUIs by declaring parameters independently of any specific widgets in the [param user guide](../../user_guide/Param.md). To express interactivity entirely using Javascript without the need for a Python server take a look at the [links user guide](../../user_guide/Param.md).\n",
-    "\n",
     "#### Parameters:\n",
     "\n",
     "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
diff --git a/examples/reference/widgets/EditableFloatSlider.ipynb b/examples/reference/widgets/EditableFloatSlider.ipynb
index 1f4d130d6d..7c928eb7a6 100644
--- a/examples/reference/widgets/EditableFloatSlider.ipynb
+++ b/examples/reference/widgets/EditableFloatSlider.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``EditableFloatSlider`` widget allows selecting selecting a numeric floating-point value within a set bounds using a slider and for more precise control offers an editable number input box.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/EditableIntSlider.ipynb b/examples/reference/widgets/EditableIntSlider.ipynb
index 6ba3bdc416..307dc7f265 100644
--- a/examples/reference/widgets/EditableIntSlider.ipynb
+++ b/examples/reference/widgets/EditableIntSlider.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``EditableIntSlider`` widget allows selecting selecting an integer value within a set bounds using a slider and for more precise control offers an editable number input box.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/EditableRangeSlider.ipynb b/examples/reference/widgets/EditableRangeSlider.ipynb
index e7ef308a99..3222f95cd2 100644
--- a/examples/reference/widgets/EditableRangeSlider.ipynb
+++ b/examples/reference/widgets/EditableRangeSlider.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``EditableRangeSlider`` widget allows selecting a floating-point range using a slider with two handles and for more precise control also offers a number input boxes.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/FileDownload.ipynb b/examples/reference/widgets/FileDownload.ipynb
index 5789ede567..6f4fd1dc58 100644
--- a/examples/reference/widgets/FileDownload.ipynb
+++ b/examples/reference/widgets/FileDownload.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The `FileDownload` widget allows downloading a file on the frontend by sending the file data to the browser either on initialization (if `embed=True`) or when the button is clicked.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/FileDropper.ipynb b/examples/reference/widgets/FileDropper.ipynb
index c076ece760..99402bbc7c 100644
--- a/examples/reference/widgets/FileDropper.ipynb
+++ b/examples/reference/widgets/FileDropper.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The `FileDropper` allows the user to upload one or more files to the server. It is built on top of the [FilePond](https://pqina.nl/filepond/) library, if you use this component extensively consider donating to them. The `FileDropper` is similar to the `FileInput` widget but additionally adds support for chunked uploads, making it possible to upload large files. The UI also supports previews for image files. Unlike `FileInput` the uploaded files are stored as dictionary of bytes object indexed by the filename.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/FileInput.ipynb b/examples/reference/widgets/FileInput.ipynb
index b1b39b98b6..73073f3720 100644
--- a/examples/reference/widgets/FileInput.ipynb
+++ b/examples/reference/widgets/FileInput.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``FileInput`` widget allows uploading one or more files from the frontend and makes the filename, file data and [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) available in Python. To upload large files, use the ``FileDropper`` widget.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/FileSelector.ipynb b/examples/reference/widgets/FileSelector.ipynb
index 6028fb8d2c..2233822387 100644
--- a/examples/reference/widgets/FileSelector.ipynb
+++ b/examples/reference/widgets/FileSelector.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The `FileSelector` widget allows browsing the filesystem on the server and selecting one or more files in a directory.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/FloatInput.ipynb b/examples/reference/widgets/FloatInput.ipynb
index bcb592cc53..e1aa2eb651 100644
--- a/examples/reference/widgets/FloatInput.ipynb
+++ b/examples/reference/widgets/FloatInput.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``FloatInput`` widget allows selecting a floating point value using a spinbox. It behaves like a slider except that lower and upper bounds are optional and a specific value can be entered. Value can be changed using keyboard (up, down, page up, page down), mouse wheel and arrow buttons.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/FloatSlider.ipynb b/examples/reference/widgets/FloatSlider.ipynb
index 8142ebd257..9d383f3b2e 100644
--- a/examples/reference/widgets/FloatSlider.ipynb
+++ b/examples/reference/widgets/FloatSlider.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``FloatSlider`` widget allows selecting selecting a numeric floating-point value within a set bounds using a slider.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/IntInput.ipynb b/examples/reference/widgets/IntInput.ipynb
index e3fccf7f03..9b15c1bbbd 100644
--- a/examples/reference/widgets/IntInput.ipynb
+++ b/examples/reference/widgets/IntInput.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``IntInput`` widget allows selecting an integer value using a spinbox. It behaves like a slider except that lower and upper bounds are optional and a specific value can be entered. Value can be changed using keyboard (up, down, page up, page down), mouse wheel and arrow buttons.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/IntRangeSlider.ipynb b/examples/reference/widgets/IntRangeSlider.ipynb
index 0689381a35..ac93cfe22f 100644
--- a/examples/reference/widgets/IntRangeSlider.ipynb
+++ b/examples/reference/widgets/IntRangeSlider.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``IntRangeSlider`` widget allows selecting an integer range using a slider with two handles.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/IntSlider.ipynb b/examples/reference/widgets/IntSlider.ipynb
index e60562e3e6..78ff3057da 100644
--- a/examples/reference/widgets/IntSlider.ipynb
+++ b/examples/reference/widgets/IntSlider.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``IntSlider`` widget allows selecting selecting an integer value within a set bounds using a slider.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/LiteralInput.ipynb b/examples/reference/widgets/LiteralInput.ipynb
index 7e4d7efa97..c9859addbe 100644
--- a/examples/reference/widgets/LiteralInput.ipynb
+++ b/examples/reference/widgets/LiteralInput.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``LiteralInput`` widget allows entering any Python literal using a text entry box whose contents are then parsed in Python. The widget only supports Python literal types. Optionally a ``type`` may be declared to validate the literal before updating the parameter.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/MenuButton.ipynb b/examples/reference/widgets/MenuButton.ipynb
index f30f25b899..ee41d90cf3 100644
--- a/examples/reference/widgets/MenuButton.ipynb
+++ b/examples/reference/widgets/MenuButton.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``MenuButton`` widget allows specifying a list of menu items to select from, triggering events when a menu item is clicked. Unlike other widgets, it does not have a ``value`` parameter. Instead it has a ``clicked`` parameter that can be watched to trigger events and which reports the last clicked menu item.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/MultiChoice.ipynb b/examples/reference/widgets/MultiChoice.ipynb
index 4ad94653ef..24f14094c5 100644
--- a/examples/reference/widgets/MultiChoice.ipynb
+++ b/examples/reference/widgets/MultiChoice.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``MultiChoice`` widget allows selecting multiple values from a list of options. It falls into the broad category of multi-value, option-selection widgets that provide a compatible API and include the [``MultiSelect``](MultiSelect.ipynb), [``CrossSelector``](CrossSelector.ipynb), [``CheckBoxGroup``](CheckBoxGroup.ipynb) and [``CheckButtonGroup``](CheckButtonGroup.ipynb) widgets. The ``MultiChoice`` widget provides a much more compact UI than [``MultiSelect``](MultiSelect.ipynb).\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/MultiSelect.ipynb b/examples/reference/widgets/MultiSelect.ipynb
index 5efd8ca9cf..808cc829b2 100644
--- a/examples/reference/widgets/MultiSelect.ipynb
+++ b/examples/reference/widgets/MultiSelect.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``MultiSelect`` widget allows selecting multiple values from a list of options. It falls into the broad category of multi-value, option-selection widgets that provide a compatible API and include the [``CrossSelector``](CrossSelector.ipynb), [``CheckBoxGroup``](CheckBoxGroup.ipynb) and [``CheckButtonGroup``](CheckButtonGroup.ipynb) widgets.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/NestedSelect.ipynb b/examples/reference/widgets/NestedSelect.ipynb
index 7172e7715f..9466b62f7c 100644
--- a/examples/reference/widgets/NestedSelect.ipynb
+++ b/examples/reference/widgets/NestedSelect.ipynb
@@ -14,7 +14,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/PasswordInput.ipynb b/examples/reference/widgets/PasswordInput.ipynb
index 091951ed04..32fb4e4aab 100644
--- a/examples/reference/widgets/PasswordInput.ipynb
+++ b/examples/reference/widgets/PasswordInput.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``PasswordInput`` allows entering any string using an obfuscated text input box.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/Player.ipynb b/examples/reference/widgets/Player.ipynb
index 212b882825..a70b3b1142 100644
--- a/examples/reference/widgets/Player.ipynb
+++ b/examples/reference/widgets/Player.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``Player`` widget displays media-player-like controls that allow playing and stepping through a range of values. When playing it triggers events at a pre-defined interval on the frontend, advancing the player value each time. It falls into the broad category of single-value slider widgets that provide a compatible API and includes the [``IntSlider``](IntSlider.ipynb) and [``FloatSlider``](FloatSlider.ipynb) widgets.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/RadioBoxGroup.ipynb b/examples/reference/widgets/RadioBoxGroup.ipynb
index fd2c776515..fd4f7315c7 100644
--- a/examples/reference/widgets/RadioBoxGroup.ipynb
+++ b/examples/reference/widgets/RadioBoxGroup.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``RadioBoxGroup`` widget allows selecting from a list or dictionary of values using a set of checkboxes. It falls into the broad category of single-value, option-selection widgets that provide a compatible API and include the [``RadioButtonGroup``](RadioButtonGroup.ipynb), [``Select``](Select.ipynb) and [``DiscreteSlider``](DiscreteSlider.ipynb) widgets.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/RadioButtonGroup.ipynb b/examples/reference/widgets/RadioButtonGroup.ipynb
index 284b0cd28f..6c2d743f3e 100644
--- a/examples/reference/widgets/RadioButtonGroup.ipynb
+++ b/examples/reference/widgets/RadioButtonGroup.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``RadioButtonGroup`` widget allows selecting from a list or dictionary of values using a set of toggle buttons. It falls into the broad category of single-value, option-selection widgets that provide a compatible API and include the [``RadioBoxGroup``](RadioBoxGroup.ipynb), [``Select``](Select.ipynb), and [``DiscreteSlider``](DiscreteSlider.ipynb) widgets.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/RangeSlider.ipynb b/examples/reference/widgets/RangeSlider.ipynb
index 3d24d75b85..67c8e47c1b 100644
--- a/examples/reference/widgets/RangeSlider.ipynb
+++ b/examples/reference/widgets/RangeSlider.ipynb
@@ -17,7 +17,7 @@
    "source": [
     "The ``RangeSlider`` widget allows selecting a floating-point range using a slider with two handles.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/Select.ipynb b/examples/reference/widgets/Select.ipynb
index 3914308731..8e1a740684 100644
--- a/examples/reference/widgets/Select.ipynb
+++ b/examples/reference/widgets/Select.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``Select`` widget allows selecting a ``value`` from a list or dictionary of ``options`` by selecting it from a dropdown menu or selection area. It falls into the broad category of single-value, option-selection widgets that provide a compatible API and include the [``RadioBoxGroup``](RadioBoxGroup.ipynb), [``AutocompleteInput``](AutocompleteInput.ipynb) and [``DiscreteSlider``](DiscreteSlider.ipynb) widgets.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/StaticText.ipynb b/examples/reference/widgets/StaticText.ipynb
index 916821b082..8d67be8412 100644
--- a/examples/reference/widgets/StaticText.ipynb
+++ b/examples/reference/widgets/StaticText.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``StaticText`` widget displays a text value but does not allow editing it.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/Switch.ipynb b/examples/reference/widgets/Switch.ipynb
index f907882f9f..73e194d8e1 100644
--- a/examples/reference/widgets/Switch.ipynb
+++ b/examples/reference/widgets/Switch.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``Switch`` widget allows toggling a single condition between ``True``/``False`` states by ticking a switch. This widget is interchangeable with the ``Toggle`` widget.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/Tabulator.ipynb b/examples/reference/widgets/Tabulator.ipynb
index a002a1b5e1..dae10448ba 100644
--- a/examples/reference/widgets/Tabulator.ipynb
+++ b/examples/reference/widgets/Tabulator.ipynb
@@ -21,7 +21,7 @@
    "source": [
     "The `Tabulator` widget allows displaying and editing a pandas DataFrame. The `Tabulator` is a largely backward compatible replacement for the [`DataFrame`](./DataFrame.ipynb) widget and will eventually replace it. It is built on the **version {{TABULATOR_VERSION}}** of the [Tabulator](http://tabulator.info/) library, which provides for a wide range of features.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/TextAreaInput.ipynb b/examples/reference/widgets/TextAreaInput.ipynb
index d6527c3582..10872469f4 100644
--- a/examples/reference/widgets/TextAreaInput.ipynb
+++ b/examples/reference/widgets/TextAreaInput.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The ``TextAreaInput`` allows entering any multiline string using a text input box. Lines are joined with the newline character ``\\n``.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/TextInput.ipynb b/examples/reference/widgets/TextInput.ipynb
index 984b808565..405a2b0a88 100644
--- a/examples/reference/widgets/TextInput.ipynb
+++ b/examples/reference/widgets/TextInput.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The ``TextInput`` allows entering any string using a text input box.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/TimePicker.ipynb b/examples/reference/widgets/TimePicker.ipynb
index b4d0f66a14..4938842c8a 100644
--- a/examples/reference/widgets/TimePicker.ipynb
+++ b/examples/reference/widgets/TimePicker.ipynb
@@ -18,7 +18,7 @@
    "source": [
     "The ``TimePicker`` widget allows entering a time value as text or `datetime.time`. \n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/Toggle.ipynb b/examples/reference/widgets/Toggle.ipynb
index 55e56a92c0..c01912fa9f 100644
--- a/examples/reference/widgets/Toggle.ipynb
+++ b/examples/reference/widgets/Toggle.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``Toggle`` widget allows toggling a single condition between ``True``/``False`` states. This widget is interchangeable with the ``Checkbox`` widget.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/ToggleGroup.ipynb b/examples/reference/widgets/ToggleGroup.ipynb
index e8cb8304a5..41c1e29a36 100644
--- a/examples/reference/widgets/ToggleGroup.ipynb
+++ b/examples/reference/widgets/ToggleGroup.ipynb
@@ -18,7 +18,7 @@
     "\n",
     "This widget is a thin wrapper for using either a [CheckButtonGroup](CheckButtonGroup.ipynb), [CheckBoxGroup](CheckBoxGroup.ipynb), [RadioButtonGroup](RadioButtonGroup.ipynb) or [RadioBoxGroup](RadioBoxGroup.ipynb) to select between a single or multiple given values.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/ToggleIcon.ipynb b/examples/reference/widgets/ToggleIcon.ipynb
index 069f146b0e..ec5488722d 100644
--- a/examples/reference/widgets/ToggleIcon.ipynb
+++ b/examples/reference/widgets/ToggleIcon.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``ToggleIcon`` widget allows toggling a single condition between `True`/`False` states. This widget is interchangeable with the `Checkbox` and `Toggle` widget.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",
diff --git a/examples/reference/widgets/VideoStream.ipynb b/examples/reference/widgets/VideoStream.ipynb
index 5c0ff5da65..0b6ec1d101 100644
--- a/examples/reference/widgets/VideoStream.ipynb
+++ b/examples/reference/widgets/VideoStream.ipynb
@@ -16,7 +16,7 @@
    "source": [
     "The ``VideoStream`` widget displays a video from a local stream (for example from a webcam) and allows accessing the streamed video data from Python.\n",
     "\n",
-    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
+    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",
     "#### Parameters:\n",
     "\n",

From ad3a75bace0d8987f8117c67060d81f9e7dd655b Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Mon, 16 Sep 2024 09:49:55 +0200
Subject: [PATCH 084/164] Support panel fastapi behind reverse proxy (#7278)

---
 panel/io/location.py            | 68 ++++++++++++++++++++-------------
 panel/tests/io/test_location.py | 19 ++++++++-
 2 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/panel/io/location.py b/panel/io/location.py
index 0fcf978f3e..c895897abc 100644
--- a/panel/io/location.py
+++ b/panel/io/location.py
@@ -25,6 +25,46 @@
     from bokeh.server.contexts import BokehSessionContext
     from pyviz_comms import Comm
 
+def _get_location_params(protocol: str|None, host: str| None, uri: str| None)->dict:
+    params = {}
+    href = ''
+    if protocol:
+        params['protocol'] = href = f'{protocol}:'
+    if host:
+        if host.startswith("::ffff:"):
+            host = host.replace("::ffff:", "")
+
+        href += f'//{host}'
+        if ':' in host:
+            params['hostname'], params['port'] = host.split(':')
+        else:
+            params['hostname'] = host
+    if uri:
+        search = hash = None
+
+        if uri.startswith("https,"):
+            uri = uri.replace("https,", "")
+
+        if uri.startswith("http"):
+            uri = urlparse.urlparse(uri).path
+
+        href += uri
+        if '?' in uri and '#' in uri:
+            params['pathname'], query = uri.split('?')
+            search, hash = query.split('#')
+        elif '?' in uri:
+            params['pathname'], search = uri.split('?')
+        elif '#' in uri:
+            params['pathname'], hash = uri.split('#')
+        else:
+            params['pathname'] = uri
+        if search:
+            params['search'] = f'?{search}'
+        if hash:
+            params['hash'] = f'#{hash}'
+    params['href'] = href
+    return params
+
 class Location(Syncable):
     """
     The Location component can be made available in a server context
@@ -70,33 +110,7 @@ def from_request(cls, request):
         except ImportError:
             return cls()
 
-        params = {}
-        href = ''
-        if request.protocol:
-            params['protocol'] = href = f'{request.protocol}:'
-        if request.host:
-            href += f'//{request.host}'
-            if ':' in request.host:
-                params['hostname'], params['port'] = request.host.split(':')
-            else:
-                params['hostname'] = request.host
-        if request.uri:
-            search = hash = None
-            href += request.uri
-            if '?' in request.uri and '#' in request.uri:
-                params['pathname'], query = request.uri.split('?')
-                search, hash = query.split('#')
-            elif '?' in request.uri:
-                params['pathname'], search = request.uri.split('?')
-            elif '#' in request.uri:
-                params['pathname'], hash = request.uri.split('#')
-            else:
-                params['pathname'] = request.uri
-            if search:
-                params['search'] = f'?{search}'
-            if hash:
-                params['hash'] = f'#{hash}'
-        params['href'] = href
+        params = _get_location_params(request.protocol, request.host, request.uri)
         loc = cls()
         with edit_readonly(loc):
             loc.param.update(params)
diff --git a/panel/tests/io/test_location.py b/panel/tests/io/test_location.py
index c7106a726e..ddaed0f4e6 100644
--- a/panel/tests/io/test_location.py
+++ b/panel/tests/io/test_location.py
@@ -2,7 +2,7 @@
 import param
 import pytest
 
-from panel.io.location import Location
+from panel.io.location import Location, _get_location_params
 from panel.io.state import state
 from panel.tests.util import serve_and_request, wait_until
 from panel.util import edit_readonly
@@ -188,3 +188,20 @@ def test_location_sync_to_dataframe_with_initial_value(location, dataframe):
     location.search = "?dataframe=%5B%7B%22x%22%3A+1%7D%5D"
     location.sync(p)
     pd.testing.assert_frame_equal(p.dataframe, dataframe)
+
+@pytest.mark.parametrize(("protocol", "host", "uri", "expected"), [
+    # Started with the command fastapi dev script.py on local laptop
+    (
+        "http", "127.0.0.1", "/panel",
+        {'protocol': 'http:', 'hostname': '127.0.0.1', 'pathname': '/panel', 'href': 'http://127.0.0.1/panel'}
+    ),
+    # Started with the command fastapi dev script.py --root-path /some/path in VS Code terminal on JupyterHub
+    (
+        "http", "::ffff:172.20.0.233", "https,http://sub.domain.dk/some/path/panel",
+        # I believe the below should be the result. But do not know for sure
+        {"protocol": "http:", "hostname": "172.20.0.233", "pathname": "/some/path/panel", 'href': 'http://172.20.0.233/some/path/panel'}
+    )
+])
+def test_get_location_params(protocol, host, uri, expected):
+    params = _get_location_params(protocol, host, uri)
+    assert params==expected

From 84e5040a9fbb111cef3514927f7d533f793fa5d0 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 16 Sep 2024 09:52:00 +0200
Subject: [PATCH 085/164] Various changes to improve Tabulator robustness
 (#7275)

---
 panel/models/button.ts                |  2 +-
 panel/models/checkbox_button_group.ts |  2 +-
 panel/models/html.ts                  |  3 +-
 panel/models/icon.ts                  |  2 +-
 panel/models/radio_button_group.ts    |  2 +-
 panel/models/tabulator.ts             | 55 ++++++++++++++++++---------
 6 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/panel/models/button.ts b/panel/models/button.ts
index 88bac84e38..9021e22d38 100644
--- a/panel/models/button.ts
+++ b/panel/models/button.ts
@@ -55,7 +55,7 @@ export class ButtonView extends BkButtonView {
         visible,
       })
     }
-    let timer: number
+    let timer: ReturnType<typeof setTimeout> | undefined
     this.el.addEventListener("mouseenter", () => {
       timer = setTimeout(() => toggle(true), this.model.tooltip_delay)
     })
diff --git a/panel/models/checkbox_button_group.ts b/panel/models/checkbox_button_group.ts
index bc7e88bb2b..0c8eeef6aa 100644
--- a/panel/models/checkbox_button_group.ts
+++ b/panel/models/checkbox_button_group.ts
@@ -58,7 +58,7 @@ export class CheckboxButtonGroupView extends bkCheckboxButtonGroupView {
         visible,
       })
     }
-    let timer: number
+    let timer: ReturnType<typeof setTimeout> | undefined
     this.el.addEventListener("mouseenter", () => {
       timer = setTimeout(() => toggle(true), this.model.tooltip_delay)
     })
diff --git a/panel/models/html.ts b/panel/models/html.ts
index d64a133181..53d7bc1fb1 100644
--- a/panel/models/html.ts
+++ b/panel/models/html.ts
@@ -73,7 +73,7 @@ export function run_scripts(node: Element): void {
 }
 
 function throttle(func: Function, limit: number): any {
-  let lastFunc: number
+  let lastFunc: ReturnType<typeof setTimeout> | undefined
   let lastRan: number
 
   return function(...args: any) {
@@ -85,7 +85,6 @@ function throttle(func: Function, limit: number): any {
       lastRan = Date.now()
     } else {
       clearTimeout(lastFunc)
-
       lastFunc = setTimeout(function() {
         if ((Date.now() - lastRan) >= limit) {
           func.apply(context, args)
diff --git a/panel/models/icon.ts b/panel/models/icon.ts
index e5467f3fb0..45af58693f 100644
--- a/panel/models/icon.ts
+++ b/panel/models/icon.ts
@@ -90,7 +90,7 @@ export class ClickableIconView extends ControlView {
         visible,
       })
     }
-    let timer: number
+    let timer: ReturnType<typeof setTimeout> | undefined
     this.el.addEventListener("mouseenter", () => {
       timer = setTimeout(() => toggle_tooltip(true), this.model.tooltip_delay)
     })
diff --git a/panel/models/radio_button_group.ts b/panel/models/radio_button_group.ts
index 59811eefb3..c18c184466 100644
--- a/panel/models/radio_button_group.ts
+++ b/panel/models/radio_button_group.ts
@@ -58,7 +58,7 @@ export class RadioButtonGroupView extends bkRadioButtonGroupView {
         visible,
       })
     }
-    let timer: number
+    let timer: ReturnType<typeof setTimeout> | undefined
     this.el.addEventListener("mouseenter", () => {
       timer = setTimeout(() => toggle(true), this.model.tooltip_delay)
     })
diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts
index 97485cf6f5..bfdc4c2b63 100644
--- a/panel/models/tabulator.ts
+++ b/panel/models/tabulator.ts
@@ -359,6 +359,7 @@ export class DataTabulatorView extends HTMLBoxView {
   _debounced_redraw: any = null
   _restore_scroll: boolean | "horizontal" | "vertical" = false
   _updating_scroll: boolean = false
+  _is_scrolling: boolean = false
 
   override connect_signals(): void {
     super.connect_signals()
@@ -514,7 +515,9 @@ export class DataTabulatorView extends HTMLBoxView {
 
   override after_resize(): void {
     super.after_resize()
-    this._debounced_redraw()
+    if (!this._is_scrolling) {
+      this._debounced_redraw()
+    }
   }
 
   _resize_redraw(): void {
@@ -591,12 +594,8 @@ export class DataTabulatorView extends HTMLBoxView {
       return `${cell.getColumn().getField()}: ${cell.getValue()}`
     })
     this.tabulator.on("scrollVertical", debounce(() => {
-      this.record_scroll()
       this.setStyles()
     }, 50, false))
-    this.tabulator.on("scrollHorizontal", debounce(() => {
-      this.record_scroll()
-    }, 50, false))
 
     // Sync state with model
     this.tabulator.on("rowSelectionChanged", (data: any, rows: any, selected: any, deselected: any) => this.rowSelectionChanged(data, rows, selected, deselected))
@@ -649,10 +648,23 @@ export class DataTabulatorView extends HTMLBoxView {
     this.renderChildren()
     this.setStyles()
 
+    // Track scrolling position and active scroll
+    const holder = this.shadow_el.querySelector(".tabulator-tableholder")
+    let scroll_timeout: ReturnType<typeof setTimeout> | undefined
+    if (holder) {
+      holder.addEventListener("scroll", () => {
+        this.record_scroll()
+        this._is_scrolling = true
+        clearTimeout(scroll_timeout)
+        scroll_timeout = setTimeout(() => {
+          this._is_scrolling = false
+        }, 200)
+      })
+    }
+
     if (this.model.pagination) {
       if (this.model.page_size == null) {
         const table = this.shadow_el.querySelector(".tabulator-table")
-        const holder = this.shadow_el.querySelector(".tabulator-tableholder")
         if (table != null && holder != null) {
           const table_height = holder.clientHeight
           let height = 0
@@ -740,7 +752,6 @@ export class DataTabulatorView extends HTMLBoxView {
       paginationSize: this.model.page_size || 20,
       paginationInitialPage: 1,
       groupBy: this.groupBy,
-      rowFormatter: (row: any) => this._render_row(row),
       frozenRows: (row: any) => {
         return (this.model.frozen_rows.length > 0) ? this.model.frozen_rows.includes(row._row.data._index) : false
       },
@@ -765,10 +776,17 @@ export class DataTabulatorView extends HTMLBoxView {
     }
   }
 
+  get_child(idx: number): LayoutDOM | null {
+    if (this.model.children instanceof Map) {
+      return this.model.children.get(idx) || null
+    }
+    return null
+  }
+
   override get child_models(): LayoutDOM[] {
     const children: LayoutDOM[] = []
     for (const idx of this.model.expanded) {
-      const child = this.model.children.get(idx)
+      const child = this.get_child(idx)
       if (child != null) {
         children.push(child)
       }
@@ -790,11 +808,8 @@ export class DataTabulatorView extends HTMLBoxView {
         }
       }
       for (const index of this.model.expanded) {
-        if (!this.model.children.has(index)) {
-          continue
-        }
+        const model = this.get_child(index)
         const row = lookup.get(index)
-        const model = this.model.children.get(index)
         const view = model == null ? null : this._child_views.get(model)
         if (view != null) {
           const render = (new_children as UIElementView[]).includes(view)
@@ -811,10 +826,10 @@ export class DataTabulatorView extends HTMLBoxView {
 
   _render_row(row: any, resize: boolean = true, render: boolean = true): void {
     const index = row._row?.data._index
-    if (!this.model.expanded.includes(index) || this.model.children.get(index) == null) {
+    if (!this.model.expanded.includes(index)) {
       return
     }
-    const model = this.model.children.get(index)
+    const model = this.get_child(index)
     const view = model == null ? null : this._child_views.get(model)
     if (view == null) {
       return
@@ -823,7 +838,13 @@ export class DataTabulatorView extends HTMLBoxView {
     const style = getComputedStyle(this.tabulator.element.children[1].children[0])
     const bg = style.backgroundColor
     const neg_margin = rowEl.style.paddingLeft ? `-${rowEl.style.paddingLeft}` : "0"
-    const viewEl = div({style: {background_color: bg, margin_left: neg_margin, max_width: "100%", overflow_x: "hidden"}})
+    const prev_child = rowEl.children[rowEl.children.length-1]
+    let viewEl
+    if (prev_child != null && prev_child.className == "row-content") {
+      viewEl = prev_child
+    } else {
+      viewEl = div({class: "row-content", style: {background_color: bg, margin_left: neg_margin, max_width: "100%", overflow_x: "hidden"}})
+    }
     viewEl.appendChild(view.el)
     rowEl.appendChild(viewEl)
     if (!view.has_finished() && render) {
@@ -851,7 +872,7 @@ export class DataTabulatorView extends HTMLBoxView {
     } else {
       const exp_index = expanded.indexOf(index)
       const removed = expanded.splice(exp_index, 1)[0]
-      const model = this.model.children.get(removed)
+      const model = this.get_child(removed)
       if (model != null) {
         const view = this._child_views.get(model)
         if (view !== undefined && view.el != null) {
@@ -865,7 +886,7 @@ export class DataTabulatorView extends HTMLBoxView {
     }
     let ready = true
     for (const idx of this.model.expanded) {
-      if (this.model.children.get(idx) == null) {
+      if (this.get_child(idx) == null) {
         ready = false
         break
       }

From 56b983fb7951172db3e43eee6db20e6ce1355797 Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Mon, 16 Sep 2024 09:59:17 +0200
Subject: [PATCH 086/164] New user feedback (#7043)

---
 .../images/vscode-no-output-try-again.png     | Bin 0 -> 4224 bytes
 doc/conf.py                                   |  12 +-
 .../api/examples/outliers_declarative.md      |  37 ++++
 doc/getting_started/build_app.md              |  68 ++++++-
 doc/how_to/editor/vscode_configure.md         | 172 ++++++++++++------
 examples/assets/panel-sympy.png               | Bin 0 -> 5608 bytes
 examples/reference/panes/LaTeX.ipynb          |  75 ++++++--
 examples/reference/panes/Vizzu.ipynb          |   8 +-
 panel/models/vizzu.py                         |   3 +-
 panel/pane/equation.py                        |   6 +-
 panel/tests/ui/pane/test_vizzu.py             |   4 +
 11 files changed, 294 insertions(+), 91 deletions(-)
 create mode 100644 doc/_static/images/vscode-no-output-try-again.png
 create mode 100644 examples/assets/panel-sympy.png

diff --git a/doc/_static/images/vscode-no-output-try-again.png b/doc/_static/images/vscode-no-output-try-again.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c00b225549bf87557278f242daf430e3178fd60
GIT binary patch
literal 4224
zcmc&&X;4$yx(zLYq9EE%p_xQQPy|H65QGR~LktKcC^HBO7zPEB5C#bt8q}sWv;q;r
zAYcN)7L+jz0)m3f5dz2%B0*6CAtnToA)Xs=-Kux*efQt1TW?qG@2qdFZ|_}o_Nnz%
zojcCw?GzPM6hI)5BHZ2<2?A}VOYyrco1}3>tH46~*cxH)fdPS(+J8)$&g-RDq@)Z6
zX=ei}?^m6ZCbGfSj@BU1bJDgA|IHxKPiLGRT+aeOh8O_2LI4l~Vj;i<MBH%z7?+YF
zrcfjvmr5e$v;Y_v0n-BRumAu!(#UNW0YZ*6iUAJer2xnWfR_SsJ|Lc+VG4gR+<bt0
z7Xa=8;=2Gh9ssC7Iu%Hb2gFZjq?nK|Vv>RMp`oGaw+tEw5cX2Y0O78PnF^$*0;yCH
zCKVvG_j2!Vpvj`tAQ3>^hz$~n$s$ZXhY=*=X1oQWHe#bTqV5YW4YyLTqI9e%mC6Ym
zuVe&qfOrmr%n3~8q_<ZxZ}y7s_A>8Jdfe@0IB)<zLG0aL%Jb?v2M!m@!HieJ%PVV$
zZ&Q3Y>6lhAxz{ajAc5E$jUPxz?RC3Z$-UDS7S>B7c01o`4S87#x1Wq{Coz0_Q;mAX
zS6@fBlPEM2lUN(z*_J}A_P^McV%3|PS_#KiV%kaY_)558cU06fxC4V2SL9|}O?-MA
z4zA<|kr?<KB)F7|CAncqQifnuln|EY6ePvZ&_*Pt-#s{(#0<QN0N-XFB1L;gVGgB5
zgGrc+k#697mpmikVOP9p5Q;S#uM_W1gTMn&=fRO-84$RcM}(~#{I~}OeC6s*2;2f0
zVCn3GfxtDrT}&K(5w>t2NFdnF-v<H*BYYhoaC->c2nGj37{_36D=7(~7)c|{4GcpX
zN&(dC&<`>Y4DrzT0o=fl3#vbWGZ^9ohMWgO5MT(rFZp}F^uz3c+giKEj4!ZWgrZzj
zJA{vtZzpTsmOq=Kj`sX**Ct{Vz4rbEW?vAhSk|^{u*~~Uxf|BE-XD5p?R@pjM7lVI
zmQnj<1Fg7qa$CvqYRAHs>2<I^8Pos8f%69l6fK$S-U7O`k17Y6*MWfC?dUSC&~u8Q
z5tk6qvwO%*Nw^FZ&|k$Y&?UA1Qi<Y49^my8NVV0L{;2?9CUy6p<)L?wAK#TXAh0Pe
zr4N?sf(~D3GWg64DYlw$=2R6KC*Xy{uX2nbvAKmVhKwWNsV3ijAldC1aUc2eo8|1^
ze+xfMEf4yIm#{0(qU!$RbJp>$OUL2E3D-g{uV*&IQn5|h(*=XmISpT(K+0yz$cpB~
zIzkln`;F)N==HANj&_0Faa?U=DKat7okGxq!wiO<Xso#i^bMr6o{tpVxKaPubzL-%
z$v)XK-1KEOY<7e5;oJ9;1Nh6<Axh@^;E}G;i}c5p^Xetjp*zSK_6T-Ytly*;Z@hFR
z<xyv*jR4n79e?ND|H-SXZ}y-d!6m`}!g|lIS=4v+Py8Ooe3)?Dr@L5=YU;TMZZzI*
z>#y4A8f+aP@8VkKzSH~n=m*5hTRg88CsX#Qs^oMfjSm(k@7+x&au2Zru0nM_YYCi|
zKBjqdT|Vgx<naO#qZQvnnu+1oPN$x5EI(@az0x(}v)>d<)|v^fqf_jzXJ|gmFGXET
z-N2U3mmtdWg4eS*7rn6R={sz2U-MU7;1=QQ{2@n4&E+bB8k;rA^*`dk)<O2ovco=V
z#ow5_U#Ej2r!i1R%$%$)JluOOzIi!xw%)43T(5Gqad!$tkM-;h#>0%HpcJ@`sCo5|
zE>^`6(kpL`qC*ZoS|VD$qzmeD&C;Z%hwt1Kp_TRBsAuA^>uo3e5y;*%l`s0gf}%zo
zd?r-i<DdkvZg4z=GOT2dzo=FU)_7=)I#Z!=@|;^uQME5ErMsT^)KHVCrOo<dPmO7+
z`vFF@OJaj$qq(tU<;lKXvex_4==9h%YjH%xnS%~_ynDuw^0GgSaOtKG9m04Dzm;(4
z2QP=xI>e)_ee0d)$EKB<wnLHu2mV0*pIW_b2OJN+I@^~1)kXtqvUB%|<R+t<TkMo8
zU%GQ1dMXp%HC`UoZZk}3AIp{PJiljLK?}RfyX;Kp&dn~^Qk=80DinRtCxxg~^yopc
z+3w$LRQK?>D<#?S^&c{Fsdn#U&;`M7nBMQ_MKkjg0{!aw7FLUIvpy&Pg)X%xe~tb6
zMav3HIAh30)nzu6N6zO%ecRslxjDh6rqo9YptUUi$&VqpW#vN`-7A{Lg9Li&Ch@#k
zQW7JiAp$_kLO%zdmwfChF)J`d@!r-C4`!@&tbRIt&eAi^IY41@fqpP)`kgs$dvP$r
zQvLd?zZ#;eBg4Nf@$&p}ILMRlb*#vbi%~tfYmyXrpdI4G^203X!ek@CJ>VgsWeR1Q
zy!<V%qnCbDY3(TP+n3L;Nn^+za>>I+UcCKruau`nPid^c;6iBR&g%w$UC8qSIAf%b
z{&#fWbbo*Q>-IC;1-r+1Bu|(*acn(uIVd|T4sV{y9xgG(2M-Wz=`+f9e;LZDq}_6)
z+aW@!uO{#YFP@Hi(YD<q@n5&)NkGugPgpImM1$~np2zbNt2<^{lcd#R-YE#vhj_%e
z&x^+xuF!}ialI#tx8$;PkKqzAQ=RjHR{85P*iZBlP{~8&rYj{Z(3mddbo4pJ^t^wh
zIGyD^pta$8)+W#z^?%F%R{ft-pHTXa+FB)TgB>kLA*Tl#$SO&z-_*}0Rh_2GRH8zX
z7BW;cEvRyD&i~(2*upyw0_CsTDXiS~K%ZCy-R}|emv*+^0lieJ(dVNhTdeK&NuIge
z`kOs9JD@+}bQOEpUURqja%@DF@t+D-iJp14!qrW7I)VpYuWz;(m>x5qiC+#nRr|yK
zEu>B1zYH3mX0FW`$bd}Bg;Fn`sj1cBo1Fl^{<(NiltK~oJC<G4<wZLnR4{CYi5_Pz
ze?tr0u8Za_)J;ebgKv^d4Ai#mPz{n>A@wSNLfoBsf)$O>(6+4$7Ss@Wm9>8#wFn#J
zdGk4gcO`x=G1MC;Vuxmq!;IH}%c%mJ<j@aa<YijdRQz}vB=wESW~388FH^kU{Xz7a
zOgUN;8*zq8m})VO^teB@Kw;M+DK9rAZ2Bn)2We&{=1=B~mT_-d^jYKteGt^wh1&Ia
z<JLEZqD!7?uJUK!wWd+kj-b!)?5*AEx4NY;q=rQ;ou`E$!uuhUF^taHUzV@~L=n57
z=%wdsP#_c162Q7J?6B7(<5VZQ5AOTnwaXFhil>j>?+UZXzSR4hM{;AgR~PTSHjtYL
za`&4-NEX(bY<^$I-+MCuXk(TJZiy{zU{B<rw6uMWzqvl}=9rz~x5o$5v~Ohg50m2p
z4XH@6zazcxqHc~tCiIt4_oFdVviwGHXLaloZ{9Rx)k)20k5!rdp*=A;JvV)f*EA==
zFwBsW2sdhn!mG06^}lKds?)b$yRQfeMc<&eOeGk=uUBLrcI6%D3e8@^lMp^7Ziu`;
zo8AP}-<chO<)gF?R^@ydu0@TtEM!|E+MRc&rlmc2zh7<lMB(qdtzU9Si!>YdD-bWZ
zD9fJw_SRnh`RzwaXQ@TEp`W$0Y_3|kKUaz(<XB#Bb42UQl<0i|-=CWBifKHR+XOf4
zib6LinByNpO?}T=@J$bnT`{kFNeDJ4{~A^b-sb&GHfMDdJLCa24KD<K7vw%Mc`dUu
zgX~<jk70JP^N6fqKg&;}IZ>lvZs}{DthI7cHr?RsFSZ7hmB%M=qYpY*WwwSH^iZ_#
z*JG%e6z>RH^j$SWh(4cY<;Sk7G7+@0u34xBgp>#}cIO^;x}xHszBQZcy!r1fA`~6S
zBfjjdmiN=xgW5(^*3?1)s(Eia`wzcO4B~MwH7C$IOq@^F^s~A<a<WzSF}=;E^p6LI
z3)~86Blzyz{$tkZOho_XT8OhSI0QHVDshd7rRr?4+485Db=?auf8_CrnxQ-`4hv)1
zSWeH2=?K3m$yWJEw$KvN{rM5Se(Lm2{$OrFb&GaZxK*DI?iPLZihki7y&`_K!z{8|
zy_?nQnf+9`8#_dyO9IpYdWx7u)ckE{A$=~0|7@o*PH!*5g~`&fbk^E#utwAFxf;$A
z)(A)Y)s|{qIwDnDXs7oe4;(PvyXohQzNvT63kutUY@#;*Y@v5HXld}~0gJXXa>=aW
zOh20f@<?OP%&%o$bo6*n1^?5*d2Cl6mC_t1{+!r6id+2tBnZ|lS-QblTP%*gU5p!~
zHYj0O$U6M@s1=vQ6?m*K@75;@n_cImzBoW&A+I;nofsQs8g_K*qW<KuPvpe4MZsDV
z)ha?V?k7p6NI?4jrAU}Wx^gTh&aZ_=P{irQD!Y-&Vng1Gej*gkg;2{Y))b4Hi(~do
zxybsC%3tJ7e~nFi;aA=vAb`l9+?-^rE=jwA)R_mR-VUY8*-LxGoYb$`htEl1p!Q0d
zTntR-UleKQcq}z_?0;PLPvT+<5=Qv)Uby&WDRFa>sdQhBZH*d#-~6Adew_Rw4|)As
z-~98OKN<&8K2A4S8ZRMhi_!JZPPy}&ceK`It%)C;)vX%nlw>0}$!5h_<dFG7Qr#$<
z=Si0-uVGcu%)LjEqcG?L^q8sy)1*@ssr!I7cMpF}{rgB(+?cW7QAn$W0d9!0lJ=pC
zK^TYC77MQx$C)q2S!R>RrsFVAEG^t|cx*xe<eZ`*Gp8Xm(p-XFJ~fiifB;&?s`WZ4
z#U@ijgToEJ;jm~JDD~KKG^_fW-kQS-yqr3v4iK7jD8;aA73&m(bL{*~zCB$=&KrgQ
zI>HJRwZARnFRu&*I4VZuQ5V}!S-A80DDua=3WRB?sR6DaZdAC4MHi@CVvdo1Nt29`
zqT(=~B_iHJXE}?XIa_6rq0&0>0VFu~KbP}w@9$r4?*Bt%k4eYLpPL`7IxA}jNPifB
N;AhX<mfKt+{tcD7MHK)5

literal 0
HcmV?d00001

diff --git a/doc/conf.py b/doc/conf.py
index ca75b6dd12..aa190015cf 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -260,14 +260,16 @@ def _get_pyodide_version():
 
 def update_versions(app, docname, source):
     from panel.models.tabulator import TABULATOR_VERSION
+    from panel.models.vizzu import VIZZU_VERSION
 
     # Inspired by: https://stackoverflow.com/questions/8821511
     version_replace = {
-       "{{PANEL_VERSION}}" : PY_VERSION,
-       "{{BOKEH_VERSION}}" : BOKEH_VERSION,
-       "{{PYSCRIPT_VERSION}}" : PYSCRIPT_VERSION,
-       "{{PYODIDE_VERSION}}" : _get_pyodide_version(),
-       "{{TABULATOR_VERSION}}" : TABULATOR_VERSION,
+        "{{PANEL_VERSION}}" : PY_VERSION,
+        "{{BOKEH_VERSION}}" : BOKEH_VERSION,
+        "{{PYSCRIPT_VERSION}}" : PYSCRIPT_VERSION,
+        "{{PYODIDE_VERSION}}" : _get_pyodide_version(),
+        "{{TABULATOR_VERSION}}" : TABULATOR_VERSION,
+        "{{VIZZU_VERSION}}" : VIZZU_VERSION,
     }
 
     for old, new in version_replace.items():
diff --git a/doc/explanation/api/examples/outliers_declarative.md b/doc/explanation/api/examples/outliers_declarative.md
index c83ccbd03a..8418b2cbac 100644
--- a/doc/explanation/api/examples/outliers_declarative.md
+++ b/doc/explanation/api/examples/outliers_declarative.md
@@ -82,3 +82,40 @@ pn.Column(obj.param, obj.view)
 ```
 
 To support various domains, you can create hierarchies of classes encapsulating parameters and functionality across different object families. Parameters and code can inherit across classes as needed, without depending on any specific GUI library. This approach facilitates the maintenance of large codebases, all displayable and editable with Panel, adaptable over time. For a more complex illustration, refer to the [Attractors Panel app](https://examples.holoviz.org/gallery/attractors/attractors_panel.html) ([source](https://github.com/holoviz-topics/examples/tree/main/attractors)), and explore the Panel codebase itself for extensive usage of Param throughout the codebase.
+
+## Serving the Notebook
+
+Lets finalize our app by organizing our components in a nicely styled template (`MaterialTemplate`) and mark it `.servable()` to add it to our served app:
+
+```python
+pn.template.MaterialTemplate(
+    site="Panel",
+    title="Getting Started App",
+    sidebar=[obj.param],
+    main=[obj.view],
+).servable(); # The ; is needed in the notebook to not display the template. Its not needed in a script
+```
+
+Save the notebook with the name `app.ipynb`.
+
+Finally, we'll serve the app by running the command below in a terminal:
+
+```bash
+panel serve app.ipynb --dev
+```
+
+Now, open the app in your browser at [http://localhost:5006/app](http://localhost:5006/app).
+
+It should look like this:
+
+![Getting Started App](../../../_static/images/getting_started_app.png)
+
+:::{tip}
+
+If you prefer developing in a Python Script using an editor, you can copy the code into a file `app.py` and serve it.
+
+```bash
+panel serve app.py --autoreload
+```
+
+:::
diff --git a/doc/getting_started/build_app.md b/doc/getting_started/build_app.md
index 8932f230ae..7911e572fc 100644
--- a/doc/getting_started/build_app.md
+++ b/doc/getting_started/build_app.md
@@ -14,7 +14,7 @@ If you're eager to roll up your sleeves and build this app alongside us, we reco
 Initially, the code block outputs on this website offer limited interactivity, indicated by the <font color="darkgoldenrod">golden</font> border to the left of the output below. By clicking the play button (<svg class="pyodide-run-icon" style="width:32px;height:25px" viewBox="0 0 24 24"> <path stroke="none" fill="#28a745" d="M8,5.14V19.14L19,12.14L8,5.14Z"></path> </svg>), you can activate full interactivity, marked by a <font color="green">green</font> left-border.
 :::
 
-## Fetching the Data
+## Configuring the Application
 
 First, let's import the necessary dependencies and define some variables:
 
@@ -37,6 +37,8 @@ Next, we'll import the Panel JavaScript dependencies using `pn.extension(...)`.
 pn.extension(design="material", sizing_mode="stretch_width")
 ```
 
+## Fetching the Data
+
 Now, let's load the [UCI ML dataset](http://archive.ics.uci.edu/dataset/357/occupancy+detection) that measured the environment in a meeting room. We'll speed up our application by caching (`@pn.cache`) the data across users:
 
 ```{pyodide}
@@ -121,7 +123,7 @@ pn.template.MaterialTemplate(
 
 Save the notebook with the name `app.ipynb`.
 
-Finally, we'll serve the app with:
+Finally, we'll serve the app by running the command below in a terminal:
 
 ```bash
 panel serve app.ipynb --dev
@@ -133,15 +135,71 @@ It should look like this:
 
 ![Getting Started App](../_static/images/getting_started_app.png)
 
-:::{tip}
+::::{tip}
+
+If you prefer developing in a Python Script using an editor, you can copy the *code* into a file `app.py` and serve it.
+
+:::{dropdown} code
+
+```python
+import hvplot.pandas
+import numpy as np
+import pandas as pd
+import panel as pn
+
+PRIMARY_COLOR = "#0072B5"
+SECONDARY_COLOR = "#B54300"
+CSV_FILE = (
+    "https://raw.githubusercontent.com/holoviz/panel/main/examples/assets/occupancy.csv"
+)
+
+pn.extension(design="material", sizing_mode="stretch_width")
 
-If you prefer developing in a Python Script using an editor, you can copy the code into a file `app.py` and serve it.
+@pn.cache
+def get_data():
+  return pd.read_csv(CSV_FILE, parse_dates=["date"], index_col="date")
+
+data = get_data()
+
+def transform_data(variable, window, sigma):
+    """Calculates the rolling average and identifies outliers"""
+    avg = data[variable].rolling(window=window).mean()
+    residual = data[variable] - avg
+    std = residual.rolling(window=window).std()
+    outliers = np.abs(residual) > std * sigma
+    return avg, avg[outliers]
+
+
+def get_plot(variable="Temperature", window=30, sigma=10):
+    """Plots the rolling average and the outliers"""
+    avg, highlight = transform_data(variable, window, sigma)
+    return avg.hvplot(
+        height=300, legend=False, color=PRIMARY_COLOR
+    ) * highlight.hvplot.scatter(color=SECONDARY_COLOR, padding=0.1, legend=False)
+
+variable_widget = pn.widgets.Select(name="variable", value="Temperature", options=list(data.columns))
+window_widget = pn.widgets.IntSlider(name="window", value=30, start=1, end=60)
+sigma_widget = pn.widgets.IntSlider(name="sigma", value=10, start=0, end=20)
+
+bound_plot = pn.bind(
+    get_plot, variable=variable_widget, window=window_widget, sigma=sigma_widget
+)
+
+pn.template.MaterialTemplate(
+    site="Panel",
+    title="Getting Started App",
+    sidebar=[variable_widget, window_widget, sigma_widget],
+    main=[bound_plot],
+).servable(); # The ; is needed in the notebook to not display the template. Its not needed in a script
+```
+
+:::
 
 ```bash
 panel serve app.py --dev
 ```
 
-:::
+::::
 
 ## What's Next?
 
diff --git a/doc/how_to/editor/vscode_configure.md b/doc/how_to/editor/vscode_configure.md
index 07cacf3a19..abc00bd2d5 100644
--- a/doc/how_to/editor/vscode_configure.md
+++ b/doc/how_to/editor/vscode_configure.md
@@ -1,85 +1,49 @@
 # Configure VS Code
 
-This guide addresses how to configure VS Code for an efficient Panel development workflow.
+This guide explains how to configure VS Code for an efficient Panel development workflow.
 
-We assume you have
+We assume you have:
 
-- a basic understanding of [working with Python in VS Code](https://code.visualstudio.com/docs/python/python-tutorial).
-- installed the VS Code [Python extension](https://github.com/Microsoft/vscode-python)
+- [x] The **latest version of VS Code installed**.
+- [x] A basic understanding of [working with Python in VS Code](https://code.visualstudio.com/docs/python/python-tutorial).
+- [x] Installed the **latest versions** of the VS Code extensions:
+  - [Python](https://github.com/Microsoft/vscode-python)
+  - [Jupyter](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter) including [Jupyter Notebook Renderers](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter-renderers)
 
 ---
 
-## Debugging
-
-To learn how to use the *integrated debugger* in general check out [the official guide](https://code.visualstudio.com/docs/editor/debugging).
-
-To configure the integrated debugger for Panel, you will need to add a debugging configuration like the below.
-
-```bash
-{
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "panel serve",
-            "type": "python",
-            "request": "launch",
-            "program": "-m",
-            "args": [
-                "panel",
-                "serve",
-                "${relativeFile}",
-                "--show"
-            ],
-            "console": "integratedTerminal",
-            "justMyCode": true
-        },
-    ]
-}
-```
+## Installation
 
-In use it looks like
+:::info
 
-![Integrated Debugging of a Panel app in VS Code](../../_static/images/vscode-integrated-debugging.png)
+For `panel` to work with the [VS Code Jupyter Extension](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter) and [Jupyter Notebook Renderers](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter-renderers)
+you need to have [`jupyter_bokeh`](https://github.com/bokeh/jupyter_bokeh) and [`ipykernel`](https://github.com/ipython/ipykernel) installed in your virtual environment.
 
-## Extensions
+We strongly recommend you to install into a **new virtual environment** before starting to use Panel with in the Interactive environment. Installing `jupyter_bokeh` and `ipykernel` into an old environment can lead to problems that are hard to reproduce, understand and solve.
 
-The following extensions will help speed up your Panel workflow
+:::
 
-- [Live Server](https://github.com/ritwickdey/vscode-live-server-plus-plus): Enables you to easily view `.html` files created using `.save()` or `panel convert`.
+Install the requirements
 
-## General Settings
+:::::{tab-set}
 
-We recommend adding the below to your `settings.json` file on Windows
+::::{tab-item} pip
 
 ```bash
-"explorer.copyRelativePathSeparator": "/" # Relevant on Windows only
+pip install panel watchfiles jupyter_bokeh ipykernel
 ```
 
-## Keyboard Shortcuts
+::::
 
-To speed up your workflow we recommend configuring a keyboard short cut to `panel serve` your app.
+::::{tab-item} conda
 
-```bash
-[
-    {
-        "key": "ctrl+shift+space",
-        "command": "workbench.action.terminal.sendSequence",
-        "args": { "text": "panel serve ${relativeFile} --autoreload --show\u000D" }
-    }
-]
-```
-
-On Windows you will need to add quotes around `${relativeFile}`, i.e. replace it with `'${relativeFile}'`.
+conda install -c conda-forge panel watchfiles jupyter_bokeh ipykernel
 
-When you press `CTRL+SHIFT+SPACE` you will `panel serve` your file in the terminal, if you have an open terminal.
-
-## Notebook and Interactive Environment
+::::
 
-Ensure you install `jupyter_bokeh` with `pip install jupyter_bokeh` or `conda install -c bokeh jupyter_bokeh` and then enable the extension with `pn.extension()`.
+:::::
 
-You can see a notebook in action below.
-
-![Panel in VS Code Notebook Environment](../../_static/images/vscode-notebook.png)
+You should now be able to `panel serve` your python file or notebook as usual.
 
 ## Simple Browser
 
@@ -128,6 +92,96 @@ and keybinding to `keybindings.json`
 ]
 ```
 
+## Notebook and Interactive Environment
+
+If you have followed the [installation instructions above](#installation) and added `pn.extension()` after your python imports you should be able to use the Jupyter Interactive environment as shown below.
+
+![Panel in VS Code Notebook Environment](../../_static/images/vscode-notebook.png)
+
+### Trouble Shooting
+
+The support for Jupyter and Panel widgets in the interactive environment is fragile and you might experience issues.
+
+Below is some advice for solving the issues. If that does not work for you, try
+
+- closing the interactive window
+- upgrading VS Code to the latest version
+- upgrading the Python and Jupyter VS Code extensions to the latest versions
+- creating a new virtual environment, install as [described above](#installation)
+- restarting VS code.
+
+#### No output
+
+If your first output does not show, try executing the command in a new cell. Sometimes VS Code need a little time to install some javascript packages behind the scenes.
+
+![VS Code No Output](../../_static/images/vscode-no-output-try-again.png)
+
+## Debugging
+
+To learn how to use the *integrated debugger* in general, check out [the official guide](https://code.visualstudio.com/docs/editor/debugging).
+
+To enable debugging applications with `panel serve`, you can add a `"panel serve"` debugging configuration like the one below to your VS Code debugging configuration file.
+
+```json
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "panel serve",
+            "type": "debugpy",
+            "request": "launch",
+            "program": "-m",
+            "args": [
+                "panel",
+                "serve",
+                "${relativeFile}",
+                "--index",
+                "${fileBasenameNoExtension}",
+                "--show"
+            ],
+            "console": "integratedTerminal",
+            "justMyCode": true
+        }
+    ]
+}
+```
+
+When used, it looks like this:
+
+![Integrated Debugging of a Panel app in VS Code](../../_static/images/vscode-integrated-debugging.png)
+
+## Extensions
+
+The following optional extensions can help speed up your Panel workflow
+
+- [Live Server](https://github.com/ritwickdey/vscode-live-server-plus-plus): Enables you to easily view `.html` files created using `.save()` or `panel convert`.
+
+## General Settings
+
+We recommend adding the below to your `settings.json` file on Windows
+
+```bash
+"explorer.copyRelativePathSeparator": "/" # Relevant on Windows only
+```
+
+## Keyboard Shortcuts
+
+To speed up your workflow we recommend configuring a keyboard short cut to `panel serve` your app.
+
+```bash
+[
+    {
+        "key": "ctrl+shift+space",
+        "command": "workbench.action.terminal.sendSequence",
+        "args": { "text": "panel serve ${relativeFile} --autoreload --show\u000D" }
+    }
+]
+```
+
+On Windows you will need to add quotes around `${relativeFile}`, i.e. replace it with `'${relativeFile}'`.
+
+When you press `CTRL+SHIFT+SPACE` you will `panel serve` your file in the terminal, if you have an open terminal.
+
 ## Snippets
 
 To speed up your workflow you can configure [*user defined snippets*](https://code.visualstudio.com/docs/editor/userdefinedsnippets) like these [example Panel snippets](../../_static/json/vscode-snippets-python.json). When you start typing `import panel` you will get the option to select between the snippets as shown below.
diff --git a/examples/assets/panel-sympy.png b/examples/assets/panel-sympy.png
new file mode 100644
index 0000000000000000000000000000000000000000..5a869598f6e6bc8bcc2a265d4a56191aff9ae71f
GIT binary patch
literal 5608
zcmb7IbyO5g*I#f6mySh*hm=@cN+lGK?#^XF!c`h6X;`{JLUQRAg$0&aP&yUqUP6#Y
zK#*?X+vk1%_`ZL?GiT=BxxZU;=gc`X6QirGLIGj|0RR9BHC07@0Dzzm&%Yxj#E;$q
zRql9l*HzU7Pbs_q?F8RkK3d_01n&AO@_?%0f41-wpsk#i8~{+0NOp}N0sz1PYKn4(
zK6Agb+a2dM8NXds|B!JjKA@H8Nx@EeP<sel2?IlYIHCo+bTvsH5Gnyf@6yvi`gC18
z3OEY5AqsktMU+bS37N>n8J$UgRqh(FYLqF)?zYXi<c&=7Y&QD`{y1ZO4qN0R4Q20B
z_Dx~OQ+HiB4N$Iuo*o92qb2}B@kn}TS1dazrz}E=8aS)}9~=ll<8@zv{>7sK5nwrL
zD-F4Sahd`QCu!&#zW?Ba|2jz$Ac_EANNNUXRMN<wNrb)3YB60wWRuPf2h<AuKymf9
zsO527R_*G^Z<jwxNH)HsNO66Hix9<}-rZjeRJu`qNS7m~s=n!;(*pB)0ne;Rp?4tu
zZnJ+?0%*cXj8+!1$#Ct|6nFVKiuOGgxbhBVhoB+o9a5++PTBiA)9(+M%K-IS5$!Ob
z+*{4C&dwI_ej>{&=u4FdQMIC)v8+bIL1;RF84Sz(fNlEly9D#Ln%5)Ei*f>cCSV8y
zURZ)EdUzth$it2YBZhoxg%y7s?nQt-(irznUh5Pf7I;WQ3oun&=+ONZqISlw-yMDz
z;9Y0{%@cXs)C{cu(sHG}d@nglW$N$o$^3bO5AEzjHN85m`I%?zp~W;QPBw)TMw@ig
zsSgI?dgX62tJ+HIlorb`l{)ec=6cxv5wa=p|06OG|Jfs+dhW=Fu%*L`)jvoR<`8GU
z*ihd_r%6jdHOQl;m%hil!8+lwmEbOJ`M%_zr*2){8U~KTww2J`DhhX=@ujUnCDDV<
z(tzBp-C6Q3S9eGYu%~STXZni#ljsXm+$nGASZXf6b!UF*&mn2v)1Wuc#N7x}XDUuq
zmXDRnGNKd|Dur&$X_=N5379Vfr9TZLc{a~R-uu?0lJ)|Gb1bj#Bdi;Ph(}s^bA(<0
zoD+wU_T=^Ln^24HWEs)Ie5t?-wM7{D;b4q3X4D<Mda6&`aPmYb5YA_$ehuS9|L!;3
zsawvi3wBY2uWL8B^*;FvbGTIFd+)A#H|Z{8^W<CUw0l#6Cc_(xjqhQ+_do7^B_iYF
z?YcKkuB|ecI(~L9EKDeV#WrQ$Vd_$(KG8ujvV7X9d=d8?zB*%laba)Es5bk=^%6uN
z8x*HMBtm7s_h#R+VgCigWhZEye@)!RhN7>o)=nCV{#}kMDxqF4ZWhLNET&vX{aS`p
zA^nC@C?itLI7DhgkzUHLT2c)OS#!#ht;@#*=wTZHf*xT-iN!-enyiwh9H_Ffr3!pt
zq1LY#Wa-nTn)zW%$5<onZTt6GGHV9<plsUdcc)u|Vc3GA3N!No6}>^Cv`@kDa)ZzF
z@}u<CxtOjfl1Wba|0oi#9X3|de$-sAZi)LTmQtae88ES#I6@#|P%r<U@)^Ob0q|Ul
zmA~0<W&7BEptqEe`wJI(sXGG%z2%6(B6&K2&j#PV>(>zi@P3gJk(X0HEr{odLCO&x
zj&la3)*^OD+=f|D>@|^?^yc;T=deaxa%zQev@5HzYMOrg-_5RmWfjGJINWW7o$&H|
z1ybw&o}tf^n|0H_dO1Q=p6~*)qXDs$4_iYDi~$3axw}WMVgzI)Buj6PRNiC869NV{
zvJsuesPNMOjKnRAxmCLk3zEjjS4it(?JM%&Slq|#1zTM`=7b!i<XC@9wERmtdu2TQ
zdU01&W7ul9k8&2dAAayIKP`{>C}MYWmwVHeGSQDU_9dpTU6@#=zt|)vD>E{&i0aO%
z?ig_HLW1p@x;dYo@lv4tA=-23<~xI!u*D;hrSNyva66&2?N&!Sc!+%lM}Fql*NtU;
zvCr<?>uSz+Dn9L;iNd`Rqv`n}DP{QlBoi~aH|iOI{UNYk$k%QeHj(h`xC?b4Lex4!
zu_Xo5PE!wrx)9mjTaGj(&~28R3)z<&GCk>4zSL&^%&~gGZK_d8OzrGLOOlO1u?zFP
zzoNbFXXlG}@=Gw|_LN|p)FxQm3z1(ys53{F7xGx_?|~XXhDBzvIF{2e5+pM)dlX2$
zk;m1c%t+3oO*gCjxuRg5P(10px?p-w@`k0Fb!cVsol0(5)iQI6O&&ph!<pd35>&F4
zdL1mEqL-AYVPJN4=md4Wha%>^U#ry9gxL=<kNK904TD6+lydUfPE$|6ZA3pr*LxD0
zn~vGEy4_k&$C}JXhVHw3&ma9&Y4zRE3CsdyY4M%pX$j~55JnU63e*YIJSfo~J{EK7
zr?!Y%Ay;B0pA(@M@gPNIAQReE_Jou7E7RA`7QN3}o38}hbBCOhf4S2a#d;&EJisSk
zPM{WP1LyL>qd7mlpxZW-E7`~(st3g(Pa}Q0cNP74;>lP$wl^i^1*8dQRJ&psO8r?%
z#qTTeWoFzf2MZ#RIc7PQJ*>;4|4^+d=sV5KxGdKUSSI8=g%oZ@Z9O78cUDF}Y}C~}
z?&*i@6e7}yX*4Q4`Gj5Kb18uRk$)QioUE&eBZeO61^l=NWIuUb`EzvmuPC;NPu{bt
zNV+jE8r)lLXGe2BwDsrCw!%E|J-%9P`p2$u7SZ4#11^^H$9Zz3HOr6q{7h!MYktLm
zy|ZP}lAaSz)l~_CiD`fgJ&>K3DmpU@PL!&{1G5lNSmK58YqC!>$a*Al@cv4M;{%T-
z$w{~R?N;$?9T-k|wwh3$^kh9M*i=M+PMU?YCs%$F-^s`2hmuh~DT$IhT{`qK)ZC?o
zo(bJ#PWr1AP&^(C%1*Tax2QaNtarmiG#Nk@1b^$6>RD1+q&8Be{8Nt2q~6BS_-E7|
zJIN=|LcRvV0x5tOwLxP~d6e=9yXrJX6p{jud|QhJQ@^iuBQO+PspFjv6I;ctyj&l%
z?<tpVyosKY@l<@#tC))WZT`5u(K_BFz30xI8^@>G5B62(dt%8QUwI8l-`1kqJCze6
znmux2U$Jc57gkN3FZV6{<M4Xpdv0&>i+9LgvKN}wA4xWMM<so^K+%VNQy-}#Lk(Mp
zjg6Syvj^GCOY^mkP7J25y=53Cs9f#tYnilUp=v{XltSN%|2JQhqm7YOCb?>hgr-5L
z(5xSs^#^2M-B!5+fg%WWnE7w&z2Ba^Q1Ft>g|EBs*e0ZLv;5fSk{Ij#xCf6ql3`7I
z_pB=5Rhn(#(^7e7NdCOarx`^$fXTjv=vNE%h0oxYO!N5dL|sS(HP@TYnMshyeV)8{
z>o~m{FJ-i!-7$F=ouSlinDyjFW^1#p6La((;l=8=mh#10>4mw!1vtVA!wMAGsq4ev
ze9)C3(i5JQFASHJjR+--ASV)1%FGceAP*rYrocDwV5!P^Tpl-D|Fgir*X#)vIo}HW
z58Ph*QeyVB=);OuKDJO*1kyqhTLR#_xXJ-vbfX))vQ#e}+^rOi5UrE_P@01?lHnZ=
zfOmI?6$Hlm{4LX{+ojp-y(DrgJF3u~y3NSS<b3t(XsN(brg;&@UH9Fl+8lnxD}FZJ
z%;%DVs&;0f^kRegI+{gd1A7%^wA&&?qaKZ{EOgLLi@FrSY_N`MRc+^N(^;gatH=H`
z(&*Ej)BHZGnh8vL%1DUy4@)W!(<*znMzgF2x{qbx@a2OqtU!7wO;0fD2$RJotv%c`
zH+s3r;Uso!DrF<HViz=e)ws15DAJT8m2Sgs)H65uMzqc(zuo_EUEZRG90x1CTra=$
z`pptAnEtI4cWs_9h^Sb6DHD5Qk%`Y)sP=r~b!&m{wKE9<`!j0;AxieC+cu7`mu_lq
zec=)m#k=Yu;qE~fzfL=1{@3O{YrbvW5MzsJRkFG=TVBGoK~c4B1xBpN`P3K9d_h6z
zZTl*(aBP;6?D5&kQTc<zg}T<OY{Kl0I7~mcMS7JN3+x%L>3$dJ4Y<0?0Y;EjNM5*#
ziJhtn@nL<X1P|F=k%KG!?jaUa{)R|X5a~pWbDoBSXCAgi8o7k>da%I6D|yi!umeG~
z-+A>%ehKml)-{%$UC$Tnc&V=e0U(_e3h;@=5C$v52|5hI!2ppi5Fn2e4Je?20ru(f
zm;HD=ScccK!-G;va01x}XuuL5UW*A2>fp6T|LdY5#kM^wC}6Og>%zdW&A+#dc!qj9
zBZW80|G>#a6lPV{{ma(kVh5bhgdyx|O1={Ds|YoZ`dMXaQx?{Vvp2y$9$C4O%@|<O
zrf`kGh@Hz%pHJ)g2PTGkyTPi?K%I7vtA8v{0&GclK&<0-yuSjZ^3&7EChFRlEH<W0
z5912`Wb$Cct`5P_aIAZ;XNh6zFw%!5-r$ZICps58{-88ryvTH3f%YNTT+)XdA0!qd
zrkhT7P^UC;{v!u+l9Btw#>wpN%K6p9Bkl$f=kU1CwGweq27S^hYT&!<mz1nsuF>>z
zKuR}P6bYWZd8*4^z*+DW(#vr#$^iI<^rP@c(l>~idjr{n6P3AAH2DTTK}P(JrI{3$
z{$4iqUw!)<Ww(O>PbqIv*AN_itayz-!g@jj=U|7G7~>bp6N3H`o5DsaUm^Ovb);El
z>*bc-OJIeNW$RzzUqas=JY)_8c78*AJvx8kBAPDp@p;zcw#=G4fMHa1!~$_usr?C)
zJ$&)$W}L_`gVsX(NlIHY9%%vqV$+Yo<k*Utdg#~ZPJyeTKTGu$xaIez6+0H{LuDpw
zp2u?zE$bBRCex6LwXBz{R0&(-*h`1l!?o<vMv+Pc1<#v0M^NvLz7gC6socC-VT+2$
z2be~Vd9CJ@89!&~xO{(*+m-yJb(X5GciVsoIX<A{$>5O}0Z#NJ=<xWFu(d#6#jhX4
z_qiu#CXRx5!}Y86OuUBV%|yvDz@ymd^J>mWmj&4pB#D>%uZ7ueU`o1@Hd(=XcqXLN
zq{NCP+b5O!Qgry9yuyNlJZ0-zh!Bm!U}v>i^nSd`T~skT*|EqnUOLlFQaD(u$tFPO
zLSco4mfg8_Ry5+3%O?n$Zsb?-X-^q|vyh<~Q{tU=v=Hn#Q)@RICJ2HunMkO>HGVrr
z8aHhVP~~!)5m&!1ROXDqePw+RxJpQWq5cSn>rGBCG$M_hnrvSU%@-u-XddZirD=pn
zQm$>ary!jeIG!aV?LmmjB~w<`?1=j)nTR_=G^cUx;$J@K{uY=D7rp#(%(K2}*~7#C
z1+y!p*Y8a%y}f3KdQ4B9ajk>ElF>XQTd}_`!mOmd@1vnmhCn&RtmuC3`O_$emd+O%
zjT@JsaH$Vwxnlnu+QtBDo+hos*{=N>VBW?5wBI1WFeA6!;WGKQG2z;*B9pb#-R1B~
ztmWN`S0la(2eC?G0OY>GO(3R^Lsz!GVOH{>`^97kE_^E9mk1Fr9mi44I7tF1jy_BR
zZ5sfylezUh?S^LfpN6Uo{@FS#Ap=3To5pHLil4r|cB(o!{s9Q)98^igJfxqefxWYI
z-Mx0keD6TtVefewH#;2x?rzG6F(*X%qCZIcJorxg-Nzm+B1~~BMhejXLtN)jrAAZJ
z#|S|fK^g?mZ?6w;FxO&~Dt9(f(*Q@^AX#{>@#N;PH~=s)`WQ97z*v(9_VcOTg2i|P
z;5|Y_1B^BJv(E*(7HYt53l;>Lc4EuP=smRlUF#<v^cHshuU*vHIuP1Mx79<|#w`5J
zG}SIC)1^q-Sq<(Mk#NIV*SCxELZ#87;g8324=&}UY{=J+znb37)+swmQvnjutHq7$
zPh>~C_X}>0#bDY)9jRi1-gw=r!TCC4g-i-5cFYVQr|IqG=}Qr+Lt)M)*)v!tq}F+r
zETVV&SuBtA{tIdt{|$XDH*RRz{^gCoBTm7pvBp_2qO?``=lPtp?8N=Lx3cB_bidn7
ze}Y}<t-2h?ICQ5ac>{Yz)m)XjUGyG7|Jsza&5~_0n;W>0LQXULyVS4rn)+4^!dUf#
z_qLx62l;t8zBn@a1G1A`eon_kBOy@}dUbnRp+UB(v_}7}Na@q(M6!LXX3K|PyeZ*n
zb7Su|U*n#Z45(eyWTo~<_Oxo1%BRq$s5i3^7CNWK5HAem`Nn=(MgHEFMIR|1*9_C$
zMn^Bu9Bh_MxB5tM<V)uTzaVVeU;^!gtm`o5Q&ftTl8l;_PTsTM|Bg}KBCGn8YXZK~
z>^1C2)7rtBcKZb0QF)NaCb}bnx|v^OX~w^q3I4$)1+Cr0Fh?+qapa-LQp6O9<v4r>
z^jp#>H-v$D5DO_rLJ*@F#A<?eSYcGZKJ`d<Uw5B<U)LusD=MkxHP^y&OHV!(D?f(f
zjJYib>Gx;qqeCu+wWSSp^96pA`VFk!JyYb9*ia5JHntGJS(-D<mit(q?uUK4z7g1+
zis}w*UfA0EE0Q(bHB^?;Np*2;?M;nSe_oPfjNCk6zBV~o-YdskkyS8|6&;R1t52y$
z`gel5^?h56k!XgUeu)E;^dLl-Mz)qV@q$;`LIBq66>fM_=*mS~dQr;HUhMOVi9e4&
zkw~#r|EkK0W3+elL8Z63AVn4zT8BUIWm}Ac=HgdtJuO%JQFcVYtAo4xdAQjoK0(z5
z`+ZWn4B{c0X{K##u`#l#66-i9WSz3>W<N@g_-pDc6u0QCH{5W&&};MZQy%Dq#gYlF
z1aHs!th3a6!a(BM%A`H6J>reD#}Ffk>{2m=T<UNFP6UzaBrzhOrePnobKugwJdbVD
z{)$`H6H>JZ-Yf&>8A@4OY0*J_f?bk=hyaRRpd<)_C^{U>t~VcX;&tgyGg7v5Oqn3~
zVR)JJy)R*<z(ZZu6F-&pq1&HA3G&}-`Ptr85xQ^Ot#6nqdA(^}(<E+o;w+Or&mxiV
zdRQuCdSjl$*1v2@p{#L3Cef+){vh3q2s&kXfPdidX7+f|e*8%GY1R`IFGdT#y8Pix
zK8el$h-r|{E`q{nlVm~rY^kNm|MP8Ewv5yuB|eJ0)0Bx!_5js4u_UTasgOBDZameI
z5;5_nm!^rZPJz+w6I7h7P`kEN$IYNrh$*6Sk?Jk@^MF(ctg<+{4(Tdk6k@b-_YL!O
z#Tfet$)9q}@ksskfWhyVc^xoBZd$K1x?@{@@b6h(Bk%~=K<X%Z`RET@#?(-`!?6TZ
z@DASepXu%T{O50ij=ejiLbSR~8D=x+t=Un$OF)8PRX71HHyZH%e`}B5hW}gBE)exy
vsB96wytJ@jMLf%e2E^dm|G#1P&7DK{4;2ci3t#-lEI>_3Td_+1W$6C^V0@~G

literal 0
HcmV?d00001

diff --git a/examples/reference/panes/LaTeX.ipynb b/examples/reference/panes/LaTeX.ipynb
index f6c236f2eb..0b13467e90 100644
--- a/examples/reference/panes/LaTeX.ipynb
+++ b/examples/reference/panes/LaTeX.ipynb
@@ -15,24 +15,23 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "The ``LaTeX`` pane allows rendering LaTeX equations as HTML. It uses either [MathJax](https://www.mathjax.org) or [KaTeX](https://katex.org/) depending on the defined renderer. By default it will use the renderer loaded in the extension (e.g. ``pn.extension('katex')``), defaulting to KaTeX.\n",
+    "The `LaTeX` pane enables rendering LaTeX equations as HTML using either the [KaTeX](https://katex.org/) or [MathJax](https://www.mathjax.org) renderer.\n",
+    "\n",
+    "You must load the desired renderer manually (e.g., `pn.extension('katex')` or `pn.extension('mathjax')`). If both are loaded, KaTeX is used by default.\n",
+    "\n",
+    "Please note that both [KaTeX](https://katex.org/) and [MathJax](https://www.mathjax.org) support only a subset of the features available in a full LaTeX renderer. For detailed information on supported features, refer to their respective documentation.\n",
     "\n",
     "#### Parameters:\n",
     "\n",
-    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
+    "For details on additional options for customizing the component, refer to the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
     "\n",
-    "* **``object``** (str or object): A string containing LaTeX code, an object with a ``_repr_latex_`` method, or a SymPy expression\n",
-    "* **``renderer``** (object): The current value; must be one of the option values\n",
-    "* **``styles``** (dict): Dictionary specifying CSS styles\n",
+    "* **`object`** (str or object): A string containing LaTeX code, an object with a `_repr_latex_` method, or a [SymPy](https://www.sympy.org/en/index.html) expression.\n",
+    "* **`renderer`** (object): The current renderer; must be one of the available options.\n",
+    "* **`styles`** (dict): A dictionary specifying CSS styles.\n",
     "\n",
-    "___"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "A ``LaTeX`` pane will render any object with a ``_repr_latex_`` method as well as SymPy expressions, or any string containing HTML. Any ``LaTeX`` section should be wrapped in `$` or ``\\(`` and ``\\(`` delimiters, e.g.:"
+    "___\n",
+    "\n",
+    "A `LaTeX` pane will render any object with a `_repr_latex_` method, [SymPy](https://www.sympy.org/en/index.html) expressions, or any string containing LaTeX. Any LaTeX content should be wrapped in `$...$` or `\\(...\\)` delimiters, for example:"
    ]
   },
   {
@@ -62,7 +61,7 @@
    "outputs": [],
    "source": [
     "pn.Column(\n",
-    "    pn.pane.LaTeX(\"$\\frac{1}{n}$\"),\n",
+    "    pn.pane.LaTeX(\"$\\frac{1}{n}$\"), # Will not work\n",
     "    pn.pane.LaTeX(r\"$\\frac{1}{n}$\")\n",
     ")"
    ]
@@ -83,6 +82,22 @@
     "latex.object = r'$\\sum_{j}{\\sum_{i}{a*w_{j, i}}}$'"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Lets change it back:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "latex.object = r'The LaTeX pane supports two delimiters: $LaTeX$ and \\(LaTeX\\)'"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -96,7 +111,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "pn.pane.LaTeX(r'$\\sum_{j}{\\sum_{i}{a*w_{j, i}}}$', renderer='mathjax', styles={'font-size': '18pt'})"
+    "pn.pane.LaTeX(r'The LaTeX pane supports two delimiters: $LaTeX$ and \\(LaTeX\\)', renderer='mathjax', styles={'font-size': '18pt'})"
    ]
   },
   {
@@ -158,6 +173,36 @@
    "source": [
     "pn.Row(latex.controls(jslink=True), latex)"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Sympy\n",
+    "\n",
+    "Panels LaTeX pane can render Sympy expressions as shown below:\n",
+    "\n",
+    "```python\n",
+    "import sympy as sp\n",
+    "import panel as pn\n",
+    "\n",
+    "pn.extension(\"mathjax\")\n",
+    "\n",
+    "# Define a symbol and a symbolic expression using SymPy\n",
+    "x = sp.symbols('x')\n",
+    "expression = sp.integrate(sp.sin(x)**2, x)\n",
+    "\n",
+    "# Create a LaTeX pane to display the expression\n",
+    "latex_pane = pn.pane.LaTeX(expression, styles={'font-size': '20px'})\n",
+    "\n",
+    "# Serve the panel\n",
+    "pn.Column(\n",
+    "    \"# A sympy expression rendered in Panel: \", latex_pane\n",
+    ")\n",
+    "```\n",
+    "\n",
+    "![Sympy in LaTeX pane](../../assets/panel-sympy.png)"
+   ]
   }
  ],
  "metadata": {
diff --git a/examples/reference/panes/Vizzu.ipynb b/examples/reference/panes/Vizzu.ipynb
index 3d58a4be5b..204963d863 100644
--- a/examples/reference/panes/Vizzu.ipynb
+++ b/examples/reference/panes/Vizzu.ipynb
@@ -26,8 +26,8 @@
     "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
     "\n",
     "* **``object``** (dict | pd.DataFrame): The data expressed as a Python dictionary of arrays or DataFrame.\n",
-    "* **``animation``** (dict): Animation settings (see [vizzu.Anim](https://lib.vizzuhq.com/latest/reference/modules/Anim/)).\n",
-    "* **``config``** (dict): The config contains all of the parameters needed to render a particular static chart or a state of an animated chart (see [vizzu.Config.Chart](https://lib.vizzuhq.com/latest/reference/interfaces/Config.Chart/)).\n",
+    "* **``animation``** (dict): Animation settings.\n",
+    "* **``config``** (dict): The config contains all of the parameters needed to render a particular static chart or a state of an animated chart.\n",
     "* **``columns``** (list): Optional column definitions. If not defined will be inferred from the data.\n",
     "* **``tooltips``** (boolean): Whether to enable tooltips on the chart.\n",
     "\n",
@@ -36,7 +36,9 @@
     "* **`animate`**: Accepts a dictionary of new 'data', 'config' and 'style' values which is used to update the chart.\n",
     "* **`stream`**: Streams new data to the plot.\n",
     "* **`patch`**: Patches one or more rows in the data.\n",
-    "___"
+    "___\n",
+    "\n",
+    "The `Vizzu` pane is built on **version {{VIZZU_VERSION}}** of the [Vizzu Javascript](https://lib.vizzuhq.com/latest/) library."
    ]
   },
   {
diff --git a/panel/models/vizzu.py b/panel/models/vizzu.py
index 7e42714d9f..4a682fba9c 100644
--- a/panel/models/vizzu.py
+++ b/panel/models/vizzu.py
@@ -11,6 +11,7 @@
 from ..config import config
 from ..util import classproperty
 
+VIZZU_VERSION = "0.9.3"
 
 class VizzuEvent(ModelEvent):
 
@@ -30,7 +31,7 @@ class VizzuChart(LayoutDOM):
     __javascript_module_exports__ = ['Vizzu']
 
     __javascript_modules__ = [
-        f"{config.npm_cdn}/vizzu@0.9.3/dist/vizzu.min.js"
+        f"{config.npm_cdn}/vizzu@{VIZZU_VERSION}/dist/vizzu.min.js"
     ]
 
     @classproperty
diff --git a/panel/pane/equation.py b/panel/pane/equation.py
index d988415ead..163d4ead12 100644
--- a/panel/pane/equation.py
+++ b/panel/pane/equation.py
@@ -26,10 +26,10 @@
 class LaTeX(ModelPane):
     r"""
     The `LaTeX` pane allows rendering LaTeX equations. It uses either
-    `MathJax` or `KaTeX` depending on the defined renderer.
+    `KaTeX` or `MathJax` depending on the defined renderer.
 
     By default it will use the renderer loaded in the extension
-    (e.g. `pn.extension('katex')`), defaulting to `KaTeX`.
+    (e.g. `pn.extension('katex')`), defaulting to `KaTeX` if both are loaded.
 
     Reference: https://panel.holoviz.org/reference/panes/LaTeX.html
 
@@ -44,7 +44,7 @@ class LaTeX(ModelPane):
 
     renderer = param.ObjectSelector(default=None, allow_None=True,
                                     objects=['katex', 'mathjax'], doc="""
-        The JS renderer used to render the LaTeX expression.""")
+        The JS renderer used to render the LaTeX expression. Defaults to katex.""")
 
     # Priority is dependent on the data type
     priority: ClassVar[float | bool | None] = None
diff --git a/panel/tests/ui/pane/test_vizzu.py b/panel/tests/ui/pane/test_vizzu.py
index d9da764e94..4a8fb1f0bd 100644
--- a/panel/tests/ui/pane/test_vizzu.py
+++ b/panel/tests/ui/pane/test_vizzu.py
@@ -6,6 +6,7 @@
 
 from playwright.sync_api import expect
 
+from panel.models.vizzu import VIZZU_VERSION
 from panel.pane import Vizzu
 from panel.tests.util import serve_component, wait_until
 
@@ -54,3 +55,6 @@ def test_vizzu_click(page):
     wait_until(lambda: len(clicks) == 1, page)
 
     assert clicks[0]['categories'] == {'Name': 'Patrick'}
+
+def test_can_import_version():
+    assert VIZZU_VERSION

From 3539a630d20f8941993e9940deced6d0ede1151d Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Mon, 16 Sep 2024 10:00:00 +0200
Subject: [PATCH 087/164] Various pre 1.5.0 fixes (#7273)

---
 doc/developer_guide/index.md                        | 8 ++++++--
 doc/how_to/deployment/pycafe.md                     | 7 ++++++-
 doc/tutorials/basic/index.md                        | 2 ++
 doc/tutorials/expert/custom_anywidget_components.md | 2 +-
 doc/tutorials/intermediate/index.md                 | 4 ++++
 5 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/doc/developer_guide/index.md b/doc/developer_guide/index.md
index 3bfc482821..0ec10701f0 100644
--- a/doc/developer_guide/index.md
+++ b/doc/developer_guide/index.md
@@ -1,4 +1,8 @@
-# Setting up a development environment
+# Developer Guide
+
+Welcome. We are so happy you've decided to contribute.
+
+## Setting up a development environment
 
 The Panel library is a project that provides a wide range of data interfaces and an extensible set of plotting backends, which means the development and testing process involves a broad set of libraries.
 
@@ -97,7 +101,7 @@ Currently, this needs to be run for each environment. So, if you want to install
 pixi run -e test-ui install
 ```
 
-You can find the list of environments in the **pixi.toml** file.
+You can find the list of environments in the **pixi.toml** file or via the command `pixi info`.
 
 :::
 
diff --git a/doc/how_to/deployment/pycafe.md b/doc/how_to/deployment/pycafe.md
index b72b092d87..ebb8471d68 100644
--- a/doc/how_to/deployment/pycafe.md
+++ b/doc/how_to/deployment/pycafe.md
@@ -57,7 +57,7 @@ Finally you can click **PUSH** to persist your app and click **SHARE** to share
 Explore the [`panel-org`](https://py.cafe/panel-org) gallery examples below:
 
 - [Basic Github App](https://py.cafe/panel-org/pycafe-reference) from the [GitHub repository](https://github.com/holoviz/panel/#interactive-data-apps).
-- [Greeting App](https://py.cafe/maartenbreddels/panel-interactive-greeting-app ).
+- [Build an App](https://py.cafe/panel-org/build-app) from the [Build an App | Getting Started guide](https://panel.holoviz.org/getting_started/build_app.html).
 - [XGBoost Training App](https://py.cafe/panel-org/xgboost-training) from the [Convert Apps to WASM Guide](https://panel.holoviz.org/how_to/wasm/convert.html).
 
 ### Basic Tutorials
@@ -76,6 +76,11 @@ Explore the [`panel-org`](https://py.cafe/panel-org) gallery examples below:
 
 - [Todo App | Class approach](https://py.cafe/panel-org/intermediate-todo-app) from the [Build a todo app](../../tutorials/intermediate/build_todo.md).
 
+## Expert Tutorials
+
+- [Mario Chime Button | AnyWidget](https://py.cafe/panel-org/panel-mario-chime-anywidget) from the [Custom AnyWidget Tutorial](../../tutorials/expert/custom_anywidget_components.md).
+- [Mario Chime Button | JSComponent](https://py.cafe/panel-org/panel-mario-chime-jscomponent) from the [Custom JSComponent Tutorial](../../tutorials/expert/custom_js_components.md).
+
 ### App Gallery
 
 - [Altair Brushing](https://py.cafe/panel-org/altair-brushing) from the [Altair Brushing Tutorial](../../gallery/altair_brushing.md).
diff --git a/doc/tutorials/basic/index.md b/doc/tutorials/basic/index.md
index 43660ef460..52a1b5d3fd 100644
--- a/doc/tutorials/basic/index.md
+++ b/doc/tutorials/basic/index.md
@@ -105,6 +105,8 @@ Let's start building some amazing wind turbine apps! 🌬️🌀
 Want more? Check out some amazing tutorials by the community.
 
 - [3 Ways to Build a Panel Visualization Dashboard - Sophia Yang](https://towardsdatascience.com/3-ways-to-build-a-panel-visualization-dashboard-6e14148f529d) (Blog Post) | [PyTexas 2023](https://www.youtube.com/watch?v=8du4NNoOtII) (Video)
+- [Building an LLM-driven chatbot for seamless order management](https://ploomber.io/blog/customer-chatbot-retail/) (Blog Post)
+- [Display Data from a PostgreSQL Database in a Panel App](https://ploomber.io/blog/panel-postgres/) (Blog Post)
 - [HoloViz: Visualization and Interactive Dashboards in Python - Jean-Luc Stevens](https://www.youtube.com/watch?v=61uHwBlxRug) (Video)
 - [How to create Data Analytics Visualisation Dashboard using Python with Panel/Hvplot in just 10 mins - Atish Jain](https://www.youtube.com/watch?v=__QUQg96SFs) (Video)
 - [Step-by-Step Guide to Create Multi-Page Dashboard using Panel - CoderzColumn](https://www.youtube.com/watch?v=G3M0lQcWpqE) (Video)
diff --git a/doc/tutorials/expert/custom_anywidget_components.md b/doc/tutorials/expert/custom_anywidget_components.md
index b58d74ddc3..0e4c7f91a2 100644
--- a/doc/tutorials/expert/custom_anywidget_components.md
+++ b/doc/tutorials/expert/custom_anywidget_components.md
@@ -1,4 +1,4 @@
-# Creating a `MarioButton` with `JSComponent`
+# Creating a `MarioButton` with `AnyWidgetComponent`
 
 In this tutorial we will build a *[Mario](https://mario.nintendo.com/) style button* with sounds and animations using the [`AnyWidgetComponent`](../../reference/custom_components/AnyWidgetComponent.md) feature in Panel. It aims to help you learn how to push the boundaries of what can be achieved with HoloViz Panel by creating advanced components using modern JavaScript and CSS technologies.
 
diff --git a/doc/tutorials/intermediate/index.md b/doc/tutorials/intermediate/index.md
index 91ee340fcb..f4d50ac57c 100644
--- a/doc/tutorials/intermediate/index.md
+++ b/doc/tutorials/intermediate/index.md
@@ -72,6 +72,10 @@ Now that you've mastered the more advanced concepts of Panel, it's time to put y
 - **Serve Apps without a Server:** Explore the realm of WASM to serve your apps without traditional servers.
 - **[Build a Server Video Stream](build_server_video_stream.md):** Utilize threading to set up a video stream from a camera connected to a server without blocking the UI.
 
+## Community Tutorials
+
+- [Adding user authentication to a Panel application](https://ploomber.io/blog/panel-auth/) (blog post)
+
 ```{toctree}
 :titlesonly:
 :hidden:

From 919d996bb334e1076eac08ca3f0e4b262861ac3c Mon Sep 17 00:00:00 2001
From: Andrew <15331990+ahuang11@users.noreply.github.com>
Date: Mon, 16 Sep 2024 01:56:52 -0700
Subject: [PATCH 088/164] Start best practices notebook (#6819)

---
 doc/how_to/best_practices/dev_experience.md  | 411 +++++++++++++++++++
 doc/how_to/best_practices/index.md           |  31 ++
 doc/how_to/best_practices/user_experience.md | 358 ++++++++++++++++
 doc/how_to/index.md                          |   7 +
 doc/how_to/prepare_to_share.md               |   1 +
 5 files changed, 808 insertions(+)
 create mode 100644 doc/how_to/best_practices/dev_experience.md
 create mode 100644 doc/how_to/best_practices/index.md
 create mode 100644 doc/how_to/best_practices/user_experience.md

diff --git a/doc/how_to/best_practices/dev_experience.md b/doc/how_to/best_practices/dev_experience.md
new file mode 100644
index 0000000000..7f1307565b
--- /dev/null
+++ b/doc/how_to/best_practices/dev_experience.md
@@ -0,0 +1,411 @@
+# Developer Experience
+
+```{pyodide}
+import time
+
+import param
+import panel as pn
+
+pn.extension()
+```
+
+The best practices described on this page serve as a checklist of items to keep in mind as you are developing your application. They include items we see users frequently get confused about or things that are easily missed but can make a big difference to the user experience of your application(s).
+
+:::{note}
+- Good: recommended, works.
+- Okay: works (with intended behavior), potentially inefficient.
+- Bad: Deprecated (may or may not work), just don't do it.
+- Wrong: Not intended behavior, won't really work.
+:::
+
+## Bind on reference value, not value
+
+### Good
+
+Be sure to bind on `obj.param.{parameter}`, not just `{parameter}`.
+
+```{pyodide}
+def show_clicks(clicks):
+    return f"Number of clicks: {clicks}"
+
+button = pn.widgets.Button(name="Click me!")
+clicks = pn.bind(show_clicks, button.param.clicks)
+pn.Row(button, clicks)
+```
+
+### Wrong
+
+If only on `{parameter}`, it will not trigger an update on change.
+
+```{pyodide}
+def show_clicks(clicks):
+    return f"Number of clicks: {clicks}"
+
+button = pn.widgets.Button(name="Click me!")
+clicks = pn.bind(show_clicks, button.clicks)  # not button.clicks!
+pn.Row(button, clicks)
+```
+
+## Inherit from `pn.viewer.Viewer`
+
+### Good
+
+Instead of inheriting from `param.Parameterized`, using `pn.viewable.Viewer` allows direct invocation of the class, resembling a native Panel object.
+
+For example, it's possible to use `ExampleApp().servable()` instead of `ExampleApp().view().servable()`.
+
+```{pyodide}
+class ExampleApp(pn.viewable.Viewer):
+
+    ...
+
+    def __panel__(self):
+        return pn.template.FastListTemplate(
+            main=[...],
+            sidebar=[...],
+        )
+
+ExampleApp().servable();  # semi-colon to suppress output in notebook
+```
+
+### Okay
+
+This method works, but should be reserved for cases where there's no Panel output.
+
+```{pyodide}
+class ExampleApp(param.Parameterized):
+
+    ...
+
+    def view(self):
+        return pn.template.FastListTemplate(
+            main=[...],
+            sidebar=[...],
+        )
+
+ExampleApp().view().servable();  # semi-colon to suppress output in notebook
+```
+
+## Build widgets from parameters
+
+### Good
+
+To translate multiple parameters into widgets, use `pn.Param`.
+
+```{pyodide}
+class ExampleApp(pn.viewable.Viewer):
+
+    width = param.Integer(default=100, bounds=(1, 200), label="Width of box")
+    height = param.Integer(default=100, bounds=(1, 250), label="Height of box")
+    color = param.Color(default="red", label="Color of box")
+
+    def __panel__(self):
+        return pn.Column(
+            pn.Param(self, widgets={"height": pn.widgets.IntInput}),
+            pn.pane.HTML(
+                width=self.param.width,
+                height=self.param.height,
+                styles={"background-color": self.param.color},
+            ),
+        )
+
+
+ExampleApp()
+```
+
+### Good
+
+You can also use `from_param` to manually build each component.
+
+```{pyodide}
+class ExampleApp(pn.viewable.Viewer):
+
+    width = param.Integer(default=100, bounds=(1, 200), label="Width of box")
+    height = param.Integer(default=100, bounds=(1, 250), label="Height of box")
+    color = param.Color(default="red", label="Color of box")
+
+    def __panel__(self):
+        width_slider = pn.widgets.IntSlider.from_param(self.param.width)
+        height_input = pn.widgets.IntInput.from_param(self.param.height)
+        color_picker = pn.widgets.ColorPicker.from_param(self.param.color)
+        return pn.Column(
+            width_slider,
+            height_input,
+            color_picker,
+            pn.pane.HTML(
+                width=self.param.width,
+                height=self.param.height,
+                styles={"background-color": self.param.color},
+            ),
+        )
+
+
+ExampleApp()
+```
+
+### Bad
+
+If you instantiate individually through `param`, it's not bidirectional.
+
+
+```{pyodide}
+class ExampleApp(pn.viewable.Viewer):
+
+    width = param.Integer(default=100, bounds=(1, 200), label="Width of box")
+    height = param.Integer(default=100, bounds=(1, 250), label="Height of box")
+    color = param.Color(default="red", label="Color of box")
+
+    def __panel__(self):
+        width_slider = pn.widgets.IntSlider(
+            value=self.param.width,
+            start=self.param["width"].bounds[0],
+            end=self.param["width"].bounds[1],
+            name=self.param["width"].label,
+        )
+        height_input = pn.widgets.IntInput(
+            value=self.param.height,
+            start=self.param["height"].bounds[0],
+            end=self.param["height"].bounds[1],
+            name=self.param["height"].label,
+        )
+        color_picker = pn.widgets.ColorPicker(
+            value=self.param.color,
+            name=self.param["color"].label,
+            width=200,
+        )
+        return pn.Column(
+            width_slider,
+            height_input,
+            color_picker,
+            pn.pane.HTML(
+                width=self.param.width,
+                height=self.param.height,
+                styles={"background-color": self.param.color},
+            ),
+        )
+
+
+ExampleApp()
+```
+
+### Bad
+
+It's possible to `link` each widget to `self` with `bidirectional=True`, but certain keyword arguments, like `bounds`, cannot be linked easily.
+
+```{pyodide}
+class ExampleApp(pn.viewable.Viewer):
+
+    width = param.Integer(default=100, bounds=(1, 200), label="Width of box")
+    height = param.Integer(default=100, bounds=(1, 250), label="Height of box")
+    color = param.Color(default="red", label="Color of box")
+
+    def __panel__(self):
+        width_slider = pn.widgets.IntSlider()
+        height_input = pn.widgets.IntInput()
+        color_picker = pn.widgets.ColorPicker()
+
+        width_slider.link(self, value="width", bidirectional=True)
+        height_input.link(self, value="height", bidirectional=True)
+        color_picker.link(self, value="color", bidirectional=True)
+
+        return pn.Column(
+            width_slider,
+            height_input,
+            color_picker,
+            pn.pane.HTML(
+                width=self.param.width,
+                height=self.param.height,
+                styles={"background-color": self.param.color},
+            ),
+        )
+
+
+ExampleApp()
+```
+
+### Wrong
+
+Widgets should not be used as parameters since all instances of the class will share the widget class:
+
+```{pyodide}
+class ExampleApp(pn.viewable.Viewer):
+
+    width = pn.widgets.IntSlider()
+    height = pn.widgets.IntInput()
+    color = pn.widgets.ColorPicker()
+```
+
+## Show templates in notebooks
+
+### Good
+
+Templates, at the time of writing, are not able to be rendered properly in Jupyter notebooks.
+
+To continue working with templates in notebooks, call `show` to pop up a new browser window.
+
+```{pyodide}
+template = pn.template.FastListTemplate(
+    main=[...],
+    sidebar=[...],
+)
+
+# template.show()  # commented out to disable opening a new browser tab in example
+```
+
+### Okay
+
+Alternatively, you can use a barebones notebook template like the one below.
+
+```{pyodide}
+class NotebookPlaceholderTemplate(pn.viewable.Viewer):
+    main = param.List()
+    sidebar = param.List()
+    header = param.List()
+    title = param.String()
+
+    def __panel__(self):
+        title = pn.pane.Markdown(f"# {self.title}", sizing_mode="stretch_width")
+        # pastel blue
+        header_row = pn.Row(
+            title,
+            *self.header,
+            sizing_mode="stretch_width",
+            styles={"background": "#e6f2ff"},
+        )
+        main_col = pn.WidgetBox(*self.main, sizing_mode="stretch_both")
+        sidebar_col = pn.WidgetBox(
+            *self.sidebar, width=300, sizing_mode="stretch_height"
+        )
+        return pn.Column(
+            header_row,
+            pn.Row(sidebar_col, main_col, sizing_mode="stretch_both"),
+            sizing_mode="stretch_both",
+            min_height=400,
+        )
+
+template = pn.template.FastListTemplate(
+    main=[...],
+    sidebar=[...],
+)
+
+template;
+```
+
+## Yield to show intermediate values
+
+### Good
+
+Use a generator (yield) to provide incremental updates.
+
+```{pyodide}
+def increment_to_value(value):
+    for i in range(value):
+        time.sleep(0.1)
+        yield i
+
+slider = pn.widgets.IntSlider(start=1, end=10)
+output = pn.bind(increment_to_value, slider.param.value_throttled)
+pn.Row(slider, output)
+```
+
+## Watch side effects
+
+### Good
+
+For functions that trigger side effects, i.e. do not return anything (or returns None), be sure to set `watch=True` on `pn.bind` or `pn.depends`.
+
+```{pyodide}
+def print_clicks(clicks):
+    print(f"Number of clicks: {clicks}")
+
+button = pn.widgets.Button(name="Click me!")
+pn.bind(print_clicks, button.param.clicks, watch=True)
+button
+```
+
+### Good
+
+For buttons, you can also use `on_click`.
+
+```{pyodide}
+def print_clicks(event):
+    clicks = event.new
+    print(f"Number of clicks: {clicks}")
+
+button = pn.widgets.Button(name="Click me!", on_click=print_clicks)
+button
+```
+
+### Okay
+
+For all other widgets, use `obj.param.watch()` for side effects.
+
+```{pyodide}
+def print_clicks(event):
+    clicks = event.new
+    print(f"Number of clicks: {clicks}")
+
+button = pn.widgets.Button(name="Click me!")
+button.param.watch(print_clicks, "clicks")
+button
+```
+
+## Refreshing layout objects
+
+### Good
+
+Updating the `objects` on a layout should be done via the methods on the layout itself:
+
+```{pyodide}
+def print_objects(event):
+    print(f"Got new {[pane.object for pane in event.new]}")
+
+col = pn.Column("a", "b")
+
+col.param.watch(print_objects, 'objects')
+
+col
+```
+
+```{pyodide}
+col[:] = ["c", *col.objects[1:]]
+```
+
+### Wrong
+
+Modifying container `objects` by index will not trigger the callback.
+
+```{pyodide}
+def print_objects(event):
+    print(f"Got new {event.new}")
+
+col = pn.Column("a", "b")
+
+col.param.watch(print_objects, "objects")
+
+col
+```
+
+```{pyodide}
+col.objects[0] = ["c"]  # does not trigger
+```
+
+### Good
+
+However, you **can** modify the container by index using the APIs on the component itself.
+
+```{pyodide}
+def print_objects(event):
+    print(f"Got new {[pane.object for pane in event.new]}")
+
+col = pn.Column("a", "b")
+
+col.param.watch(print_objects, "objects")
+
+col
+```
+
+```{pyodide}
+# col.objects[0] = 'Foo'  # no
+col[0] = 'Foo'  # yes
+```
diff --git a/doc/how_to/best_practices/index.md b/doc/how_to/best_practices/index.md
new file mode 100644
index 0000000000..1aa64a2658
--- /dev/null
+++ b/doc/how_to/best_practices/index.md
@@ -0,0 +1,31 @@
+# Apply best practices
+
+This section is to provide a checklist of best practices for developing with Panel and designing Panel applications so that you can create maintainable, production-ready, polished, and performant web applications.
+
+::::{grid} 1 2 2 3
+:gutter: 1 1 1 2
+
+:::{grid-item-card} {octicon}`gear;2.5em;sd-mr-1 sd-animate-grow50` Developer Experience
+:link: dev_experience
+:link-type: doc
+
+A checklist of best practices for developing with Panel
+:::
+
+:::{grid-item-card} {octicon}`gear;2.5em;sd-mr-1 sd-animate-grow50` User Experience
+:link: user_experience
+:link-type: doc
+
+A checklist of best practices for designing Panel applications
+:::
+
+::::
+
+```{toctree}
+:titlesonly:
+:hidden:
+:maxdepth: 2
+
+dev_experience
+user_experience
+```
diff --git a/doc/how_to/best_practices/user_experience.md b/doc/how_to/best_practices/user_experience.md
new file mode 100644
index 0000000000..58ce154758
--- /dev/null
+++ b/doc/how_to/best_practices/user_experience.md
@@ -0,0 +1,358 @@
+# User Experience
+
+```{pyodide}
+import time
+import random
+
+import param
+import pandas as pd
+import panel as pn
+
+pn.extension()
+```
+
+The best practices described on this page serve as a checklist of items to keep in mind as you are developing your application. They include items we see users frequently get confused about or things that are easily missed but can make a big difference to the user experience of your application(s).
+
+:::{note}
+- Good: recommended, works.
+- Okay: works (with intended behavior), potentially inefficient.
+- Bad: Deprecated (may or may not work), just don't do it.
+- Wrong: Not intended behavior, won't really work.
+:::
+
+## Update params effectively
+
+### Good
+
+Use `obj.param.update`:
+
+- to update multiple parameters on an object simultaneously
+- as a context manager to temporarily set values, restoring original values on completion
+
+```{pyodide}
+def run(event):
+    with progress.param.update(
+        bar_color="primary",
+        active=True,
+    ):
+        for i in range(0, 101):
+            time.sleep(0.01)
+            progress.value = i
+
+button = pn.widgets.Button(name="Run", on_click=run)
+progress = pn.indicators.Progress(value=100, active=False, bar_color="dark")
+pn.Row(button, progress)
+```
+
+### Okay
+
+The following shows setting parameters individually, which could be inefficient.
+
+```{pyodide}
+def run(event):
+    try:
+        progress.bar_color = "primary"
+        progress.active = True
+        for i in range(0, 101):
+            time.sleep(0.01)
+            progress.value = i
+    finally:
+        progress.bar_color = "dark"
+        progress.active = False
+
+button = pn.widgets.Button(name="Run", on_click=run)
+progress = pn.indicators.Progress(value=100, active=False, bar_color="dark")
+pn.Row(button, progress)
+```
+
+## Throttle slider callbacks
+
+### Good
+
+To prevent sliders from triggering excessive callbacks, set `throttled=True` so that it only triggers once upon mouse-up.
+
+```{pyodide}
+pn.extension(throttled=True)
+
+def callback(value):
+    time.sleep(2)
+    return f"# {value}"
+
+slider = pn.widgets.IntSlider(end=10)
+output = pn.bind(callback, slider)
+pn.Row(slider, output)
+```
+
+### Good
+
+Alternatively, limit the scope by binding against `value_throttled` instead of `value`.
+
+```{pyodide}
+def callback(value):
+    time.sleep(2)
+    return f"# {value}"
+
+slider = pn.widgets.IntSlider(end=10)
+output = pn.bind(callback, slider.param.value_throttled)
+pn.Row(slider, output)
+```
+
+### Bad
+
+If the operation is expensive, binding against `value` can be really slow.
+
+```{pyodide}
+def callback(value):
+    time.sleep(2)
+    return f"# {value}"
+
+slider = pn.widgets.IntSlider(end=10)
+output = pn.bind(callback, slider.param.value)
+pn.Row(slider, output)
+```
+
+## Defer expensive operations
+
+### Good
+
+Its easy defer the execution of all bound and displayed functions with `pn.extension(defer_load=True)` (note this applies to served applications, not to interactive notebook environments):
+
+```{pyodide}
+pn.extension(defer_load=True, loading_indicator=True)
+
+def onload():
+    time.sleep(5)  # simulate expensive operations
+    return pn.Column(
+        "Welcome to this app!",
+    )
+
+layout = pn.Column("Check this out!", onload)
+# layout.show()
+```
+
+### Okay
+
+If you need finer control, start by instantiating the initial layout with placeholder `pn.Columns`, then populate it later in `onload`.
+
+```{pyodide}
+import time
+
+def onload():
+    time.sleep(1)  # simulate expensive operations
+    layout[:] = ["Welcome to this app!"]
+
+layout = pn.Column("Loading...")
+display(layout)
+pn.state.onload(onload)
+```
+
+## Show indicator while computing
+
+### Good
+
+Set `loading=True` to show a spinner while processing to let the user know it's working.
+
+```{pyodide}
+def compute(event):
+    with layout.param.update(loading=True):
+        time.sleep(3)
+        layout.append("Computation complete!")
+
+button = pn.widgets.Button(name="Compute", on_click=compute)
+layout = pn.Column("Click below to compute", button)
+
+layout
+```
+
+### Okay
+
+You can also wrap a `try/finally` to do the same thing.
+
+```{pyodide}
+def compute(event):
+    try:
+        layout.loading = True
+        time.sleep(3)
+        layout.append("Computation complete!")
+    finally:
+        layout.loading = False
+
+button = pn.widgets.Button(name="Compute", on_click=compute)
+layout = pn.Column("Click below to compute", button)
+
+layout
+```
+
+## Manage exceptions gracefully
+
+### Good
+
+Use:
+- `try` block to update values on success
+- `except` block to update values on exception
+- `finally` block to update values regardless
+
+```{pyodide}
+import time
+
+def compute(divisor):
+    try:
+        busy.value = True
+        time.sleep(1)
+        output = 1 / divisor
+        text.value = "Success!"
+    except Exception as exc:
+        output = "Undefined"
+        text.value = f"Error: {exc}"
+    finally:
+        busy.value = False
+    return f"Output: {output}"
+
+busy = pn.widgets.LoadingSpinner(width=10, height=10)
+text = pn.widgets.StaticText()
+
+slider = pn.widgets.IntSlider(name="Divisor")
+output = pn.bind(compute, slider)
+
+layout = pn.Column(pn.Row(busy, text), slider, output)
+layout
+```
+
+## Cache values for speed
+
+### Good
+
+Wrap the decorator `pn.cache` for automatic handling.
+
+```{pyodide}
+@pn.cache
+def callback(value):
+    time.sleep(2)
+    return f"# {value}"
+
+slider = pn.widgets.IntSlider(end=3)
+output = pn.bind(callback, slider.param.value_throttled)
+pn.Row(slider, output)
+```
+
+### Okay
+
+Or, manually handle the cache with `pn.state.cache`.
+
+```{pyodide}
+def callback(value):
+    output = pn.state.cache.get(value)
+    if output is None:
+        time.sleep(2)
+        output = f"# {value}"
+        pn.state.cache[value] = output
+    return output
+
+slider = pn.widgets.IntSlider(end=3)
+output = pn.bind(callback, slider.param.value_throttled)
+pn.Row(slider, output)
+```
+
+## Preserve axes ranges on update
+
+### Good
+
+To prevent the plot from resetting to its original axes ranges when zoomed in, simply wrap `hv.DynamicMap`.
+
+```{pyodide}
+import numpy as np
+import holoviews as hv
+hv.extension("bokeh")
+
+data = []
+
+def add_point(clicks):
+    data.append((np.random.random(), (np.random.random())))
+    return hv.Scatter(data)
+
+button = pn.widgets.Button(name="Add point")
+plot = hv.DynamicMap(pn.bind(add_point, button.param.clicks))
+pn.Column(button, plot)
+```
+
+### Okay
+
+If you want the object to be completely refreshed, simply drop `hv.DynamicMap`. If it's a long computation, it's good to set `loading_indicator=True`.
+
+```{pyodide}
+import numpy as np
+import holoviews as hv
+hv.extension("bokeh")
+pn.extension(defer_load=True, loading_indicator=True)
+
+data = []
+
+def add_point(clicks):
+    data.append((np.random.random(), (np.random.random())))
+    return hv.Scatter(data)
+
+button = pn.widgets.Button(name="Add point")
+plot = pn.bind(add_point, button.param.clicks)
+pn.Column(button, plot)
+```
+
+## FlexBox instead of Column/Row
+
+### Good
+
+`pn.FlexBox` automatically moves objects to another row/column, depending on the space available.
+
+```{pyodide}
+rcolor = lambda: "#%06x" % random.randint(0, 0xFFFFFF)
+
+pn.FlexBox(
+    pn.pane.HTML(str(5), styles=dict(background=rcolor()), width=1000, height=100),
+    pn.pane.HTML(str(5), styles=dict(background=rcolor()), width=1000, height=100)
+)
+```
+
+### Okay
+
+`pn.Column`/`pn.Row` will overflow if the content is too long/wide.
+
+```{pyodide}
+rcolor = lambda: "#%06x" % random.randint(0, 0xFFFFFF)
+
+pn.Row(
+    pn.pane.HTML(str(5), styles=dict(background=rcolor()), width=1000, height=100),
+    pn.pane.HTML(str(5), styles=dict(background=rcolor()), width=1000, height=100)
+)
+```
+
+## Reuse objects for efficiency
+
+### Good
+
+Imagine Panel components as placeholders and use them as such rather than re-creating them on update.
+
+```{pyodide}
+def randomize(event):
+    df_pane.object = pd.DataFrame(np.random.randn(10, 3), columns=list("ABC"))
+
+
+button = pn.widgets.Button(name="Compute", on_click=randomize)
+df_pane = pn.pane.DataFrame()
+button.param.trigger("clicks")  # initialize
+
+pn.Column(button, df_pane)
+```
+
+### Okay
+
+This instantiates the `pn.pane.DataFrame` on every click.
+
+```{pyodide}
+def randomize(clicks):
+    return pn.pane.DataFrame(pd.DataFrame(np.random.randn(10, 3), columns=list("ABC")))
+
+button = pn.widgets.Button(name="Compute")
+df_pane = pn.bind(randomize, button.param.clicks)
+button.param.trigger("clicks")  # initialize
+
+pn.Column(button, df_pane)
+```
diff --git a/doc/how_to/index.md b/doc/how_to/index.md
index b10256724a..67295f41fd 100644
--- a/doc/how_to/index.md
+++ b/doc/how_to/index.md
@@ -189,6 +189,13 @@ How to cache data across sessions and memoize the output of functions.
 How to improve the scalability of your Panel application.
 :::
 
+:::{grid-item-card} {octicon}`pulse;2.5em;sd-mr-1 sd-animate-grow50` Best Practices
+:link: best_practices/index
+:link-type: doc
+
+A checklist of best practices for improving the development and user experience with Panel.
+:::
+
 :::{grid-item-card} {octicon}`shield-check;2.5em;sd-mr-1 sd-animate-grow50` Add authentication
 :link: authentication/index
 :link-type: doc
diff --git a/doc/how_to/prepare_to_share.md b/doc/how_to/prepare_to_share.md
index ce4e7dd578..f77e9a3d9a 100644
--- a/doc/how_to/prepare_to_share.md
+++ b/doc/how_to/prepare_to_share.md
@@ -14,5 +14,6 @@ Apply Templates<templates/index>
 Improve Performance<performance/index>
 Cache Data<caching/index>
 Improve Scalability<concurrency/index>
+Best Practices <best_practices/index>
 Add Authentication<authentication/index>
 ```

From c297143d074a89d73c023ec22dc3c992f745d219 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 16 Sep 2024 14:10:11 +0200
Subject: [PATCH 089/164] Pre-release doc fixes (#7283)

---
 doc/explanation/api/callbacks.md              |  2 +-
 doc/explanation/api/param.md                  |  2 +-
 doc/explanation/api/parameterized.md          |  2 +-
 .../comparisons/compare_ipywidgets.md         |  2 +-
 .../comparisons/compare_streamlit.md          |  2 +-
 .../components/components_overview.md         |  2 +-
 .../components/reactive_html_components.md    |  6 ++--
 doc/explanation/dependencies/param.md         |  2 +-
 doc/explanation/develop_seamlessly.md         | 14 ++++----
 doc/how_to/authentication/basic.md            |  4 +--
 doc/how_to/authentication/configuration.md    |  2 +-
 doc/how_to/authentication/user_info.md        |  2 +-
 doc/how_to/callbacks/async.md                 |  2 +-
 doc/how_to/callbacks/load.md                  |  4 +--
 doc/how_to/callbacks/periodic.md              |  2 +-
 doc/how_to/callbacks/schedule.md              |  2 +-
 doc/how_to/components/add_remove.md           |  2 +-
 doc/how_to/components/construct_panes.md      |  2 +-
 doc/how_to/concurrency/dask.md                |  2 +-
 doc/how_to/concurrency/manual_threading.md    |  2 +-
 doc/how_to/concurrency/sync_to_async.md       |  2 +-
 doc/how_to/concurrency/threading.md           |  2 +-
 doc/how_to/deployment/pycafe.md               | 36 +++++++++----------
 doc/how_to/editor/markdown.md                 |  2 +-
 doc/how_to/export/index.md                    |  2 +-
 doc/how_to/interact/interact_abbreviations.md |  2 +-
 doc/how_to/interact/interact_fix_values.md    |  2 +-
 doc/how_to/interact/interact_layout.md        |  2 +-
 doc/how_to/interact/interact_throttle.md      |  2 +-
 doc/how_to/interactivity/bind_component.md    |  4 +--
 doc/how_to/interactivity/bind_function.md     |  6 ++--
 .../interactivity/hvplot_interactive.md       |  8 ++---
 doc/how_to/links/jslinks.md                   |  4 +--
 doc/how_to/links/links.md                     |  2 +-
 doc/how_to/migrate/anywidget/index.md         | 16 ++++-----
 doc/how_to/notebook/jupyterlabpreview.md      |  4 +--
 doc/how_to/notebook/layout_builder.md         |  2 +-
 doc/how_to/notebook/other_nb.md               |  6 ++--
 doc/how_to/param/custom.md                    |  4 +--
 doc/how_to/param/dependencies.md              |  4 +--
 doc/how_to/param/subobjects.md                |  6 ++--
 doc/how_to/param/uis.md                       |  2 +-
 doc/how_to/pipeline/complex_pipeline.md       |  8 ++---
 doc/how_to/pipeline/control_flow.md           |  6 ++--
 doc/how_to/pipeline/simple_pipeline.md        |  2 +-
 doc/how_to/state/request.md                   |  2 +-
 doc/how_to/streamlit_migration/activity.md    |  4 +--
 doc/how_to/streamlit_migration/caching.md     |  2 +-
 doc/how_to/streamlit_migration/chat.md        | 10 +++---
 doc/how_to/streamlit_migration/get_started.md |  2 +-
 .../streamlit_migration/interactivity.md      |  2 +-
 doc/how_to/streamlit_migration/layouts.md     |  4 +--
 doc/how_to/streamlit_migration/panes.md       | 10 +++---
 doc/how_to/streamlit_migration/templates.md   |  6 ++--
 doc/how_to/streamlit_migration/widgets.md     |  4 +--
 doc/how_to/styling/apply_css.md               |  2 +-
 doc/how_to/styling/design.md                  |  4 +--
 doc/how_to/styling/design_variables.md        |  4 +--
 doc/how_to/styling/matplotlib.md              |  2 +-
 doc/how_to/styling/plotly.md                  |  2 +-
 doc/how_to/styling/themes.md                  |  2 +-
 doc/how_to/styling/vega.md                    |  2 +-
 doc/how_to/templates/template_arrange.md      | 10 +++---
 doc/how_to/templates/template_custom.md       | 10 +++---
 doc/how_to/templates/template_modal.md        |  6 ++--
 doc/how_to/templates/template_set.md          |  2 +-
 doc/how_to/templates/template_theme.md        |  8 ++---
 examples/reference/panes/Placeholder.ipynb    | 10 +++---
 examples/reference/widgets/Tabulator.ipynb    |  2 +-
 panel/reactive.py                             | 10 +++---
 panel/template/base.py                        | 14 ++++----
 pixi.toml                                     |  2 +-
 72 files changed, 167 insertions(+), 167 deletions(-)

diff --git a/doc/explanation/api/callbacks.md b/doc/explanation/api/callbacks.md
index ecb10a2fd9..5ba8e66174 100644
--- a/doc/explanation/api/callbacks.md
+++ b/doc/explanation/api/callbacks.md
@@ -2,7 +2,7 @@
 
 The callback API in Panel is the lowest-level approach, affording the greatest amount of flexibility but also quickly growing in complexity because each new interactive behavior requires additional callbacks that can interact in complex ways. Nonetheless, callbacks are important to know about, and can often be used to complement the other approaches. For instance, one specific callback could be used in addition to the more reactive approaches the other APIs provide.
 
-For more details on defining callbacks see the [linking how-to guides](../../how_to/links/index.md).
+For more details on defining callbacks see the [linking how-to guides](../../how_to/links/index).
 
 ## Pros:
 
diff --git a/doc/explanation/api/param.md b/doc/explanation/api/param.md
index 9bf0426029..c86c4f2ee9 100644
--- a/doc/explanation/api/param.md
+++ b/doc/explanation/api/param.md
@@ -51,7 +51,7 @@ Not only does the parameter hold the various metadata and validation options for
 
 ## References
 
-The concept of a reference is crucial to using Panel effectively, as much of the [reactivity](reactivity.md) in Panel is built on top of the idea of reference binding. The other piece (i.e. the binding) is that parameters can be given a reference, which they will internally resolve and update whenever the reference updates. In param itself this has to be declared by declaring `allow_ref=True` on the parameter, in Panel effectively all parameters automatically enable this functionality and also allow support for `nested_refs=True` where possible.
+The concept of a reference is crucial to using Panel effectively, as much of the [reactivity](reactivity) in Panel is built on top of the idea of reference binding. The other piece (i.e. the binding) is that parameters can be given a reference, which they will internally resolve and update whenever the reference updates. In param itself this has to be declared by declaring `allow_ref=True` on the parameter, in Panel effectively all parameters automatically enable this functionality and also allow support for `nested_refs=True` where possible.
 
 Let us explore this with a simple example:
 
diff --git a/doc/explanation/api/parameterized.md b/doc/explanation/api/parameterized.md
index 0e6df81915..d979fc2dcf 100644
--- a/doc/explanation/api/parameterized.md
+++ b/doc/explanation/api/parameterized.md
@@ -2,7 +2,7 @@
 
 The [Param](http://param.holoviz.org) library allows expressing the parameters of a class (or a hierarchy of classes) completely independently of a GUI implementation. Panel and other libraries can then take those parameter declarations and turn them into a GUI to control the parameters. This approach allows the parameters controlling some computation to be captured specifically and explicitly (but as abstract parameters, not as widgets). Then thanks to the `@param.depends` decorator (similar to `@panel.depends` but for use in Parameterized classes without any dependency on Panel), it is then possible to directly express the dependencies between the parameters and the computation defined in some method on the class, all without ever importing Panel or any other GUI library. The resulting objects can then be used in both GUI and non-GUI contexts (batch computations, scripts, servers).
 
-The parameterized approach is a powerful way to encapsulate computation in self-contained classes, taking advantage of object-oriented programming patterns. It also makes it possible to express a problem completely independently from Panel or any other GUI code, while still getting a GUI for free as a last step. For more detail on using this approach see the [how-to guides on declarative UIs with Param](../../how_to/param/index.md).
+The parameterized approach is a powerful way to encapsulate computation in self-contained classes, taking advantage of object-oriented programming patterns. It also makes it possible to express a problem completely independently from Panel or any other GUI code, while still getting a GUI for free as a last step. For more detail on using this approach see the [how-to guides on declarative UIs with Param](../../how_to/param/index).
 
 ## Pros:
 
diff --git a/doc/explanation/comparisons/compare_ipywidgets.md b/doc/explanation/comparisons/compare_ipywidgets.md
index f3c8c5caec..6617a41e0c 100644
--- a/doc/explanation/comparisons/compare_ipywidgets.md
+++ b/doc/explanation/comparisons/compare_ipywidgets.md
@@ -2,7 +2,7 @@
 
 Both Panel and ipywidgets (aka Jupyter Widgets) allow Python users to work with custom widgets and create apps and dashboards from Python, both in Jupyter notebooks and in standalone servers (when paired with Voila. But Panel and ipywidgets are based on different, independently developed technologies for doing so, with some implications:
 
-- Panel is based on Bokeh widgets and layouts, which were developed separately from the Jupyter ecosystem, and designed from the start for standalone deployments. Jupyter widgets, as the name suggests, were first developed specifically for the notebook environment, and only relatively recently (in 2019) adapted for standalone deployment (see [Voila](compare_voila.md)). Nowadays, both technologies have evolved to be well suited to both Jupyter and server contexts, but their different histories are still visible in the types of examples you typically see and in support for less-common operations for each library.
+- Panel is based on Bokeh widgets and layouts, which were developed separately from the Jupyter ecosystem, and designed from the start for standalone deployments. Jupyter widgets, as the name suggests, were first developed specifically for the notebook environment, and only relatively recently (in 2019) adapted for standalone deployment (see [Voila](compare_voila)). Nowadays, both technologies have evolved to be well suited to both Jupyter and server contexts, but their different histories are still visible in the types of examples you typically see and in support for less-common operations for each library.
 
 - Historically, ipywidgets exposed more of the underlying HTML/CSS styling options, allowing them to be customized more heavily than Bokeh widgets, but since Bokeh 3.0 and Panel 1.0 both types of widgets support similar types of styling.
 
diff --git a/doc/explanation/comparisons/compare_streamlit.md b/doc/explanation/comparisons/compare_streamlit.md
index 025883c56f..66c627323a 100644
--- a/doc/explanation/comparisons/compare_streamlit.md
+++ b/doc/explanation/comparisons/compare_streamlit.md
@@ -22,4 +22,4 @@ These videos from a dedicated Streamlit fan walk you through some of Streamlit's
 
 ## Code Examples
 
-If you want to compare examples with code, check out the [How to Migrate From Streamlit Guide](../../how_to/streamlit_migration/index.md).
+If you want to compare examples with code, check out the [How to Migrate From Streamlit Guide](../../how_to/streamlit_migration/index).
diff --git a/doc/explanation/components/components_overview.md b/doc/explanation/components/components_overview.md
index f8bae22beb..46b6aa24f0 100644
--- a/doc/explanation/components/components_overview.md
+++ b/doc/explanation/components/components_overview.md
@@ -17,7 +17,7 @@ The main objects that Panel provides, and that we are going to call *components*
 - *Templates*: templates are components that render multiple Panel objects in an HTML document. The basic template, which you get when you serve an app without setting any template, is basically a blank canvas. Instead when you use one of the built-in templates you can easily improve the design and branding of your app, which will get for free a header, a sidebar, etc.
 - *Notifications*: notifications are components that display so called "toasts", designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
 
-All the Panel components can be visualized on the [Component Gallery](../../reference/index.rst).
+All the Panel components can be visualized on the [Component Gallery](../../reference/index).
 
 :::{tip}
 Components usually have in their docstring a link to their documentation page, use `<component>?` in a notebook or your IDE inspection capabilities to access the link.
diff --git a/doc/explanation/components/reactive_html_components.md b/doc/explanation/components/reactive_html_components.md
index 5c79948f0d..2edef1dbb0 100644
--- a/doc/explanation/components/reactive_html_components.md
+++ b/doc/explanation/components/reactive_html_components.md
@@ -35,13 +35,13 @@ Slideshow(width=800, height=300)
 
 ## Alternatives
 
-If you're looking for **simpler** alternatives to `ReactiveHTML`, Panel provides a `Viewer` class that allows you to combine existing Panel components using Python only. This approach is a great choice if you want to quickly create custom components without the need for writing HTML, CSS, or JavaScript. You can learn more about creating custom `Viewer` components in our guide [How-to > Combine Existing Components](../../how_to/custom_components/custom_viewer.md).
+If you're looking for **simpler** alternatives to `ReactiveHTML`, Panel provides a `Viewer` class that allows you to combine existing Panel components using Python only. This approach is a great choice if you want to quickly create custom components without the need for writing HTML, CSS, or JavaScript. You can learn more about creating custom `Viewer` components in our guide [How-to > Combine Existing Components](../../how_to/custom_components/custom_viewer).
 
 On the other hand, if you're looking for a **more advanced** approach that gives you full control over the design and functionality of your custom components, you can use *Bokeh Models*. With Bokeh Models, you can leverage the full power of your IDE, TypeScript and modern JavaScript development tools to build advanced and performant custom components. Many of the built-in Panel components are built using this approach. It provides flexibility and extensibility, allowing you to create highly customized and interactive components tailored to your specific needs. We expect detailed documentation on writing custom Bokeh models will be added to the documentation in the future.
 
 ## The Name
 
-`ReactiveHTML` is named for its ability to enable reactive programming in HTML. Unlike the static HTML content that the [`HTML`](../../reference/panes/HTML.md) pane displays, `ReactiveHTML` components can update their view dynamically in response to changes in parameter values and other events.
+`ReactiveHTML` is named for its ability to enable reactive programming in HTML. Unlike the static HTML content that the [`HTML`](../../reference/panes/HTML) pane displays, `ReactiveHTML` components can update their view dynamically in response to changes in parameter values and other events.
 
 We could also have called the `ReactiveHTML` class for example `BaseComponent`, `HTMLComponent`, `SimpleComponent` or `AnyComponent` to give you the right associations.
 
@@ -198,7 +198,7 @@ class CustomComponent(ReactiveHTML):
 CustomComponent(value="A new value", width=500)
 ```
 
-Check out the [How-to > Create Layouts With ReactiveHTML](../../how_to/custom_components/reactive_html/reactive_html_layout.md) guide for lots of Jinja2 examples.
+Check out the [How-to > Create Layouts With ReactiveHTML](../../how_to/custom_components/reactive_html/reactive_html_layout) guide for lots of Jinja2 examples.
 
 ### Template variables vs Jinja2
 
diff --git a/doc/explanation/dependencies/param.md b/doc/explanation/dependencies/param.md
index 6596d9b4b8..2b8bbfa869 100644
--- a/doc/explanation/dependencies/param.md
+++ b/doc/explanation/dependencies/param.md
@@ -276,4 +276,4 @@ As you can see, *Parameters* offer a very generic mechanism for your Python code
 ## Related Resources
 
 - See [Param's documentation](https://param.holoviz.org/)
-- See [How-to > Declare UIs with Declarative API](../../how_to/param/index.md).
+- See [How-to > Declare UIs with Declarative API](../../how_to/param/index).
diff --git a/doc/explanation/develop_seamlessly.md b/doc/explanation/develop_seamlessly.md
index f29d1723a6..c35c419572 100644
--- a/doc/explanation/develop_seamlessly.md
+++ b/doc/explanation/develop_seamlessly.md
@@ -26,7 +26,7 @@ import panel as pn
 pn.extension()
 ```
 
-The extension ensures that the [`pyviz_comms`](https://github.com/holoviz/pyviz_comms) and all required Javascript and CSS resources are added to your notebook environment. If you are going to be using any custom extensions, such as [Vega](../reference/panes/Vega.md) or [Tabulator](../reference/widgets/Tabulator.md) you must ensure that you initialize these as well.
+The extension ensures that the [`pyviz_comms`](https://github.com/holoviz/pyviz_comms) and all required Javascript and CSS resources are added to your notebook environment. If you are going to be using any custom extensions, such as [Vega](../reference/panes/Vega) or [Tabulator](../reference/widgets/Tabulator) you must ensure that you initialize these as well.
 
 ```{pyodide}
 pn.extension('vega', 'tabulator')
@@ -157,12 +157,12 @@ The `--show` flag will open a browser tab with the live app and the `--dev` flag
 
 ### Tutorials
 
-- [Develop in an Editor (Basic)](../tutorials/basic/develop_editor.md)
-- [Develop in an Editor (Intermediate)](../tutorials/intermediate/develop_editor.md)¨
-- [Develop in a Notebook (Basic)](../tutorials/basic/develop_notebook.md)
+- [Develop in an Editor (Basic)](../tutorials/basic/develop_editor)
+- [Develop in an Editor (Intermediate)](../tutorials/intermediate/develop_editor)
+- [Develop in a Notebook (Basic)](../tutorials/basic/develop_notebook)
 
 ### How-to
 
-- [Configure PyCharm](../how_to/editor/pycharm_configure.md)
-- [Configure VS Code](../how_to/editor/vscode_configure.md)
-- [Write apps in Markdown](../how_to/editor/markdown.md)
+- [Configure PyCharm](../how_to/editor/pycharm_configure)
+- [Configure VS Code](../how_to/editor/vscode_configure)
+- [Write apps in Markdown](../how_to/editor/markdown)
diff --git a/doc/how_to/authentication/basic.md b/doc/how_to/authentication/basic.md
index 2c10092548..2ea97907f7 100644
--- a/doc/how_to/authentication/basic.md
+++ b/doc/how_to/authentication/basic.md
@@ -38,7 +38,7 @@ If you enter the valid password (i.e. `my_password`) it will look like
 
 If you click the *Log out* button you will be sent back to the log in form.
 
-In this mode the `username` is not authenticated. The `username` is provided as part of the [user info](user_info.md).
+In this mode the `username` is not authenticated. The `username` is provided as part of the [user info](user_info).
 
 ## User credentials
 
@@ -66,7 +66,7 @@ When serving an application dynamically using `pn.serve` you can also provide a
 ## Custom templates
 
 ```{admonition} Prerequisites
-For a more in-depth understanding of custom template take a look at the [how to > Build a Custom Template](../templates/template_custom.md) guide.
+For a more in-depth understanding of custom template take a look at the [how to > Build a Custom Template](../templates/template_custom) guide.
 ```
 
 If you want to customize the authentication template you can provide a custom template with the `--basic-login-template` CLI argument. The template needs to submit `username` and `password` to the `/login` endpoint of the Panel server, e.g. the form of the default template looks like this. Check out the default template [here](https://github.com/holoviz/panel/blob/main/panel/_templates/basic_login.html) for inspiration.
diff --git a/doc/how_to/authentication/configuration.md b/doc/how_to/authentication/configuration.md
index d20e27ab2b..09779b92c2 100644
--- a/doc/how_to/authentication/configuration.md
+++ b/doc/how_to/authentication/configuration.md
@@ -16,7 +16,7 @@ The first step in configuring a OAuth is to specify a specific OAuth provider. P
 * `password`: Generic password grant based OAuth Provider with configurable endpoints
 * `auth_code`: Generic code challenge grant based OAuth Provider with configurable endpoints
 
-We will go through the process of configuring each of these individually in [Providers](./providers.md) but for now all we need to know that the `oauth_provider` can be set on the commandline using the `--oauth-provider` CLI argument to `panel serve` or the `PANEL_OAUTH_PROVIDER` environment variable.
+We will go through the process of configuring each of these individually in [Providers](providers) but for now all we need to know that the `oauth_provider` can be set on the commandline using the `--oauth-provider` CLI argument to `panel serve` or the `PANEL_OAUTH_PROVIDER` environment variable.
 
 Examples:
 
diff --git a/doc/how_to/authentication/user_info.md b/doc/how_to/authentication/user_info.md
index 7de72f777f..2dd09b1506 100644
--- a/doc/how_to/authentication/user_info.md
+++ b/doc/how_to/authentication/user_info.md
@@ -17,4 +17,4 @@ Please note that the user information above is only available to the users sessi
 
 ## Related Topics
 
-- [Authorization Callbacks](authorization.md): Discover how to configure an authorization callback to perform custom authorization logic based on the user info such as redirects or error pages
+- [Authorization Callbacks](authorization): Discover how to configure an authorization callback to perform custom authorization logic based on the user info such as redirects or error pages
diff --git a/doc/how_to/callbacks/async.md b/doc/how_to/callbacks/async.md
index d43eb3bcfe..ee043277df 100644
--- a/doc/how_to/callbacks/async.md
+++ b/doc/how_to/callbacks/async.md
@@ -118,4 +118,4 @@ pn.Row(button, pane)
 
 ## Related Resources
 
-- See the related [How-to > Link Parameters with Callbacks API](../links/index.md) guides, including [How to > Create Low-Level Python Links Using `.watch`](../links/watchers.md).
+- See the related [How-to > Link Parameters with Callbacks API](../links/index) guides, including [How to > Create Low-Level Python Links Using `.watch`](../links/watchers).
diff --git a/doc/how_to/callbacks/load.md b/doc/how_to/callbacks/load.md
index 056f131f4f..7ae37cdf46 100644
--- a/doc/how_to/callbacks/load.md
+++ b/doc/how_to/callbacks/load.md
@@ -58,9 +58,9 @@ layout.servable()
 
 ![panel-onload-example](https://assets.holoviz.org/panel/gifs/onload_callback.gif)
 
-Note that `pn.state.onload` accepts both *sync* and *async* functions and also accepts a `threaded` argument, which, when combined with [enabling `config.nthreads`](../concurrency/threading.md) will run the callbacks concurrently on separate threads.
+Note that `pn.state.onload` accepts both *sync* and *async* functions and also accepts a `threaded` argument, which, when combined with [enabling `config.nthreads`](../concurrency/threading) will run the callbacks concurrently on separate threads.
 
-This example could also be implemented using a *bound and displayed function*. We recommend using that method together with `defer_load` when possible. See the [Defer Bound and Displayed Functions Guide](defer_load.md).
+This example could also be implemented using a *bound and displayed function*. We recommend using that method together with `defer_load` when possible. See the [Defer Bound and Displayed Functions Guide](defer_load).
 
 ## Defer and Orchestrate Dependent Tasks
 
diff --git a/doc/how_to/callbacks/periodic.md b/doc/how_to/callbacks/periodic.md
index 35962a46a5..632379b87a 100644
--- a/doc/how_to/callbacks/periodic.md
+++ b/doc/how_to/callbacks/periodic.md
@@ -77,4 +77,4 @@ pn.serve(panel_app)
 ```
 
 ## Related Resources
-- See the related [How-to > Link Parameters with Callbacks API](../links/index.md) guides, including [How to > Create High-Level Python Links with `.link`](../links/links.md).
+- See the related [How-to > Link Parameters with Callbacks API](../links/index) guides, including [How to > Create High-Level Python Links with `.link`](../links/links).
diff --git a/doc/how_to/callbacks/schedule.md b/doc/how_to/callbacks/schedule.md
index 901d210795..c051c922a1 100644
--- a/doc/how_to/callbacks/schedule.md
+++ b/doc/how_to/callbacks/schedule.md
@@ -4,7 +4,7 @@ This guide addresses how to schedule tasks that run independently of any user vi
 
 ---
 
-The `pn.state.schedule_task` functionality allows scheduling global tasks at certain times or on a specific schedule. This is distinct from [periodic callbacks](./periodic.md), which are scheduled per user session. Global tasks are useful for performing periodic actions like updating cached data, performing cleanup actions or other housekeeping tasks, while periodic callbacks should be reserved for making periodic updates to an application.
+The `pn.state.schedule_task` functionality allows scheduling global tasks at certain times or on a specific schedule. This is distinct from [periodic callbacks](./periodic), which are scheduled per user session. Global tasks are useful for performing periodic actions like updating cached data, performing cleanup actions or other housekeeping tasks, while periodic callbacks should be reserved for making periodic updates to an application.
 
 The different contexts in which global tasks and periodic callbacks run also has implications on how they should be scheduled. Scheduled task **must not** be declared in the application code itself, i.e. if you are serving `panel serve app.py` the callback you are scheduling must not be declared in the `app.py`. It must be defined in an external module or in a separate script declared as part of the `panel serve` invocation using the `--setup` commandline argument.
 
diff --git a/doc/how_to/components/add_remove.md b/doc/how_to/components/add_remove.md
index e4f8abb208..0baeb5b085 100644
--- a/doc/how_to/components/add_remove.md
+++ b/doc/how_to/components/add_remove.md
@@ -195,4 +195,4 @@ gridspec
 ## Related Resources
 
 - Learn more about Panes in [Explanation > Components](../../explanation/components/components_overview.md#panes).
-- For more detail about `GridSpec` Panels, see the [Component Gallery > GridSpec](../reference/layouts/GridSpec.md).
+- For more detail about `GridSpec` Panels, see the [Component Gallery > GridSpec](../reference/layouts/GridSpec).
diff --git a/doc/how_to/components/construct_panes.md b/doc/how_to/components/construct_panes.md
index 18a0854862..835485293a 100644
--- a/doc/how_to/components/construct_panes.md
+++ b/doc/how_to/components/construct_panes.md
@@ -6,7 +6,7 @@ This guide addresses how to construct Pane objects for displaying visible compon
 
 There are two main ways to construct a pane - explicitly or automatically.
 
-To explicitly construct a pane, use one of the pane types listed in the [component gallery](../../reference/index.rst#panes). For example, you can create a Markdown pane as follows:
+To explicitly construct a pane, use one of the pane types listed in the [component gallery](../../reference/index#panes). For example, you can create a Markdown pane as follows:
 
 ```{pyodide}
 import panel as pn
diff --git a/doc/how_to/concurrency/dask.md b/doc/how_to/concurrency/dask.md
index 316668a35b..6c38300654 100644
--- a/doc/how_to/concurrency/dask.md
+++ b/doc/how_to/concurrency/dask.md
@@ -230,6 +230,6 @@ Try running `panel serve dashboard.py`. If your Dask cluster is working, you wil
 
 ## Additional Resources
 
-- [Panel - Use Async Callbacks](../callbacks/async.md)
+- [Panel - Use Async Callbacks](../callbacks/async)
 - [Dask - Async/Await and Non-Blocking Execution Documentation](https://examples.dask.org/applications/async-await.html#Async/Await-and-Non-Blocking-Execution)
 - [Dask - Async Web Server](https://examples.dask.org/applications/async-web-server.html)
diff --git a/doc/how_to/concurrency/manual_threading.md b/doc/how_to/concurrency/manual_threading.md
index 39dadc6fbc..ef915b6345 100644
--- a/doc/how_to/concurrency/manual_threading.md
+++ b/doc/how_to/concurrency/manual_threading.md
@@ -1,6 +1,6 @@
 # Set Up Manual Threading
 
-Enabling threading in Panel, as demonstrated in the [automatic threading guide](threading.md), provides a simple method to achieve concurrency. However, there are situations where greater control is necessary.
+Enabling threading in Panel, as demonstrated in the [automatic threading guide](threading), provides a simple method to achieve concurrency. However, there are situations where greater control is necessary.
 
 Below, we will demonstrate how to safely implement threads either per session or globally across multiple sessions.
 
diff --git a/doc/how_to/concurrency/sync_to_async.md b/doc/how_to/concurrency/sync_to_async.md
index d18782178d..154d8dd2b3 100644
--- a/doc/how_to/concurrency/sync_to_async.md
+++ b/doc/how_to/concurrency/sync_to_async.md
@@ -37,4 +37,4 @@ Without [`asyncify`](https://asyncer.tiangolo.com/tutorial/asyncify/) the app wo
 
 ## Dask
 
-If you run many cpu bound functions you may consider offloading your functions asynchronously to an external compute engine like [Dask](https://www.dask.org/). See our [Dask how-to Guide](../concurrency/dask.md).
+If you run many cpu bound functions you may consider offloading your functions asynchronously to an external compute engine like [Dask](https://www.dask.org/). See our [Dask how-to Guide](../concurrency/dask).
diff --git a/doc/how_to/concurrency/threading.md b/doc/how_to/concurrency/threading.md
index 78d0306d72..084f2ff951 100644
--- a/doc/how_to/concurrency/threading.md
+++ b/doc/how_to/concurrency/threading.md
@@ -43,5 +43,5 @@ In a threaded context on the other hand the two clicks will be processed concurr
 ```
 
 ```{note}
-Note that the global ThreadPool is used to dispatch events triggered by changes in parameters, events (such as click events), [`defer_load`](../callbacks/defer_load.md) callbacks and optionally [`onload` callbacks](../callbacks/load.md).
+Note that the global ThreadPool is used to dispatch events triggered by changes in parameters, events (such as click events), [`defer_load`](../callbacks/defer_load) callbacks and optionally [`onload` callbacks](../callbacks/load).
 ```
diff --git a/doc/how_to/deployment/pycafe.md b/doc/how_to/deployment/pycafe.md
index ebb8471d68..171e7e5323 100644
--- a/doc/how_to/deployment/pycafe.md
+++ b/doc/how_to/deployment/pycafe.md
@@ -62,30 +62,30 @@ Explore the [`panel-org`](https://py.cafe/panel-org) gallery examples below:
 
 ### Basic Tutorials
 
-- [Animation](https://py.cafe/panel-org/basic-animation) from the [Build an Animation Tutorial](../../tutorials/basic/build_report.md).
-- [Chatbot](https://py.cafe/panel-org/basic-chatbot) from the [Build a Chatbot Tutorial](../../tutorials/basic/build_chatbot.md).
-- [Crossfilter Dashboard](https://py.cafe/panel-org/basic-crossfilter-dashboard) from the [Build Crossfiltering Dashboard Tutorial](../../tutorials/basic/build_crossfilter_dashboard.md).
-- [Dashboard](https://py.cafe/panel-org/basic-dashboard) from the [Build a Dashboard Tutorial](../../tutorials/basic/build_dashboard.md).
-- [Image Classifier](https://py.cafe/panel-org/basic-image-classifier) from the [Build an Image Classifier Tutorial](../../tutorials/basic/build_image_classifier.md).
-- [Monitoring Dashboard](https://py.cafe/panel-org/basic-monitoring-dashboard) from the [Build an Monitoring Dashboard Tutorial](../../tutorials/basic/build_monitoring_dashboard.md).
-- [Report](https://py.cafe/panel-org/basic-report) from the [Build a Report Tutorial](../../tutorials/basic/build_report.md).
-- [Streaming Dashboard](https://py.cafe/panel-org/basic-streaming-dashboard) from the [Build Streaming Dashboard Tutorial](../../tutorials/basic/build_streaming_dashboard.md).
-- [Todo app | Widget approach](https://py.cafe/panel-org/basic-todo) from the [Build a todo app](../../tutorials/basic/build_todo.md).
+- [Animation](https://py.cafe/panel-org/basic-animation) from the [Build an Animation Tutorial](../../tutorials/basic/build_report).
+- [Chatbot](https://py.cafe/panel-org/basic-chatbot) from the [Build a Chatbot Tutorial](../../tutorials/basic/build_chatbot).
+- [Crossfilter Dashboard](https://py.cafe/panel-org/basic-crossfilter-dashboard) from the [Build Crossfiltering Dashboard Tutorial](../../tutorials/basic/build_crossfilter_dashboard).
+- [Dashboard](https://py.cafe/panel-org/basic-dashboard) from the [Build a Dashboard Tutorial](../../tutorials/basic/build_dashboard).
+- [Image Classifier](https://py.cafe/panel-org/basic-image-classifier) from the [Build an Image Classifier Tutorial](../../tutorials/basic/build_image_classifier).
+- [Monitoring Dashboard](https://py.cafe/panel-org/basic-monitoring-dashboard) from the [Build an Monitoring Dashboard Tutorial](../../tutorials/basic/build_monitoring_dashboard).
+- [Report](https://py.cafe/panel-org/basic-report) from the [Build a Report Tutorial](../../tutorials/basic/build_report).
+- [Streaming Dashboard](https://py.cafe/panel-org/basic-streaming-dashboard) from the [Build Streaming Dashboard Tutorial](../../tutorials/basic/build_streaming_dashboard).
+- [Todo app | Widget approach](https://py.cafe/panel-org/basic-todo) from the [Build a todo app](../../tutorials/basic/build_todo).
 
 ### Intermediate Tutorials
 
-- [Todo App | Class approach](https://py.cafe/panel-org/intermediate-todo-app) from the [Build a todo app](../../tutorials/intermediate/build_todo.md).
+- [Todo App | Class approach](https://py.cafe/panel-org/intermediate-todo-app) from the [Build a todo app](../../tutorials/intermediate/build_todo).
 
 ## Expert Tutorials
 
-- [Mario Chime Button | AnyWidget](https://py.cafe/panel-org/panel-mario-chime-anywidget) from the [Custom AnyWidget Tutorial](../../tutorials/expert/custom_anywidget_components.md).
-- [Mario Chime Button | JSComponent](https://py.cafe/panel-org/panel-mario-chime-jscomponent) from the [Custom JSComponent Tutorial](../../tutorials/expert/custom_js_components.md).
+- [Mario Chime Button | AnyWidget](https://py.cafe/panel-org/panel-mario-chime-anywidget) from the [Custom AnyWidget Tutorial](../../tutorials/expert/custom_anywidget_components).
+- [Mario Chime Button | JSComponent](https://py.cafe/panel-org/panel-mario-chime-jscomponent) from the [Custom JSComponent Tutorial](../../tutorials/expert/custom_js_components).
 
 ### App Gallery
 
-- [Altair Brushing](https://py.cafe/panel-org/altair-brushing) from the [Altair Brushing Tutorial](../../gallery/altair_brushing.md).
-- [hvPlot Explorer](https://py.cafe/panel-org/hvplot-explorer) from the [hvPlot Explorer Tutorial](../../gallery/hvplot_explorer.md)
-- [NYC Deck.GL](https://py.cafe/panel-org/nyc-deckgl) from the [NYC Deck.Gl Tutorial](../../gallery/nyc_deckgl.md).
-- [Penguin Crossfilter](https://py.cafe/panel-org/penguin-crossfilter) from the [Penguin Crossfilter Tutorial](../../gallery/penguin_crossfilter.md)
-- [Portfolio Analyzer](https://py.cafe/panel-org/portfolio-analyzer) from the [Portfolio Analyzer Tutorial](../../gallery/portfolio_analyzer.md).
-- [VideoStream Interface](https://py.cafe/panel-org/videostream) from the [VideoStream Interface Tutorial](../../gallery/streaming_videostream.md).
+- [Altair Brushing](https://py.cafe/panel-org/altair-brushing) from the [Altair Brushing Tutorial](../../gallery/altair_brushing).
+- [hvPlot Explorer](https://py.cafe/panel-org/hvplot-explorer) from the [hvPlot Explorer Tutorial](../../gallery/hvplot_explorer)
+- [NYC Deck.GL](https://py.cafe/panel-org/nyc-deckgl) from the [NYC Deck.Gl Tutorial](../../gallery/nyc_deckgl).
+- [Penguin Crossfilter](https://py.cafe/panel-org/penguin-crossfilter) from the [Penguin Crossfilter Tutorial](../../gallery/penguin_crossfilter)
+- [Portfolio Analyzer](https://py.cafe/panel-org/portfolio-analyzer) from the [Portfolio Analyzer Tutorial](../../gallery/portfolio_analyzer).
+- [VideoStream Interface](https://py.cafe/panel-org/videostream) from the [VideoStream Interface Tutorial](../../gallery/streaming_videostream).
diff --git a/doc/how_to/editor/markdown.md b/doc/how_to/editor/markdown.md
index a3e8ed3fa9..31ad86efda 100644
--- a/doc/how_to/editor/markdown.md
+++ b/doc/how_to/editor/markdown.md
@@ -12,7 +12,7 @@ To begin simply create a Markdown file with the `.md` file extension, e.g. `app.
 # My App
 ```
 
-Before adding any actual content add a code block with any imports your application needs. The code block should have one of two type declarations, either `python` or `{pyodide}`. The latter is useful if you also want to use [the Sphinx Pyodide integration](../wasm/sphinx.md). In this case we will simply declare a `python` code block that imports Panel and calls the extension with a specific template:
+Before adding any actual content add a code block with any imports your application needs. The code block should have one of two type declarations, either `python` or `{pyodide}`. The latter is useful if you also want to use [the Sphinx Pyodide integration](../wasm/sphinx). In this case we will simply declare a `python` code block that imports Panel and calls the extension with a specific template:
 
 ````markdown
 ```python
diff --git a/doc/how_to/export/index.md b/doc/how_to/export/index.md
index 97c31517b2..b5b2263284 100644
--- a/doc/how_to/export/index.md
+++ b/doc/how_to/export/index.md
@@ -1,6 +1,6 @@
 # Export Apps
 
-While Panel is primarily a library for building applications [backed by server](../server/index.md) or a [Python process in the browser](../wasm/index.md) it is sometimes useful to export static output, with or without embedded state to add interactivity. This section focuses on exporting Panel as static snapshots, embedding state and accessing the underlying Bokeh models.
+While Panel is primarily a library for building applications [backed by server](../server/index) or a [Python process in the browser](../wasm/index) it is sometimes useful to export static output, with or without embedded state to add interactivity. This section focuses on exporting Panel as static snapshots, embedding state and accessing the underlying Bokeh models.
 
 ::::{grid} 1 2 2 3
 :gutter: 1 1 1 2
diff --git a/doc/how_to/interact/interact_abbreviations.md b/doc/how_to/interact/interact_abbreviations.md
index b3fa26555d..77f734149d 100644
--- a/doc/how_to/interact/interact_abbreviations.md
+++ b/doc/how_to/interact/interact_abbreviations.md
@@ -3,7 +3,7 @@
 This guide addresses how to use abbreviations to create widgets with Panel `interact`.
 
 ```{admonition} Prerequisites
-1. The [How to > Generate Widgets for Function Arguments](./interact_basics.md) guide provides an overview of how to generate widgets for function arguments with Panel interact.
+1. The [How to > Generate Widgets for Function Arguments](interact_basics) guide provides an overview of how to generate widgets for function arguments with Panel interact.
 ```
 
 ___
diff --git a/doc/how_to/interact/interact_fix_values.md b/doc/how_to/interact/interact_fix_values.md
index 6397068935..cf5709dcc1 100644
--- a/doc/how_to/interact/interact_fix_values.md
+++ b/doc/how_to/interact/interact_fix_values.md
@@ -3,7 +3,7 @@
 This guide addresses how to fix the value for certain arguments with Panel `interact`.
 
 ```{admonition} Prerequisites
-1. The [How to > Generate Widgets for Function Arguments](./interact_basics.md) guide covers how to generate widgets for function arguments with Panel interact.
+1. The [How to > Generate Widgets for Function Arguments](interact_basics) guide covers how to generate widgets for function arguments with Panel interact.
 ```
 
 ---
diff --git a/doc/how_to/interact/interact_layout.md b/doc/how_to/interact/interact_layout.md
index 17c3a23762..76932d519b 100644
--- a/doc/how_to/interact/interact_layout.md
+++ b/doc/how_to/interact/interact_layout.md
@@ -3,7 +3,7 @@
 This guide addresses how to customize the layout of the widgets and displays from the output of Panel `interact`.
 
 ```{admonition} Prerequisites
-1. The [How to > Generate Widgets for Function Arguments](./interact_basics.md) guide covers how to generate widgets for function arguments with Panel interact.
+1. The [How to > Generate Widgets for Function Arguments](interact_basics) guide covers how to generate widgets for function arguments with Panel interact.
 ```
 
 ---
diff --git a/doc/how_to/interact/interact_throttle.md b/doc/how_to/interact/interact_throttle.md
index 724b6c28a0..3b3c84e7ee 100644
--- a/doc/how_to/interact/interact_throttle.md
+++ b/doc/how_to/interact/interact_throttle.md
@@ -3,7 +3,7 @@
 When interacting with functions which take a long time to run, realtime feedback can be a burden instead of being helpful. This guide addresses how to disable continuous updates with Panel `interact`.
 
 ```{admonition} Prerequisites
-1. The [How to > Generate Widgets for Function Arguments](./interact_basics.md) guide covers how to generate widgets for function arguments with Panel interact.
+1. The [How to > Generate Widgets for Function Arguments](interact_basics) guide covers how to generate widgets for function arguments with Panel interact.
 ```
 
 ---
diff --git a/doc/how_to/interactivity/bind_component.md b/doc/how_to/interactivity/bind_component.md
index d8e3cd3f33..7e3127f6cf 100644
--- a/doc/how_to/interactivity/bind_component.md
+++ b/doc/how_to/interactivity/bind_component.md
@@ -79,5 +79,5 @@ In this way we can update both the current `object` and the `styles` **Parameter
 
 ## Related Resources
 
-- Learn [how to use generators with `bind`](bind_generators.md)
-- Understand [Param](../../explanation/dependencies/param.md)
+- Learn [how to use generators with `bind`](bind_generators)
+- Understand [Param](../../explanation/dependencies/param)
diff --git a/doc/how_to/interactivity/bind_function.md b/doc/how_to/interactivity/bind_function.md
index 1ee8586526..421e0d7836 100644
--- a/doc/how_to/interactivity/bind_function.md
+++ b/doc/how_to/interactivity/bind_function.md
@@ -43,6 +43,6 @@ Internally the layout will create a so called `ParamFunction` component to wrap
 
 ## Related Resources
 
-- Learn [how to use reactive functions to update components](bind_component.md)
-- Learn [how to use reactive generators to generate interactive components ](bind_generators.md)
-- Understand [Param](../../explanation/dependencies/param.md)
+- Learn [how to use reactive functions to update components](bind_component)
+- Learn [how to use reactive generators to generate interactive components ](bind_generators)
+- Understand [Param](../../explanation/dependencies/param)
diff --git a/doc/how_to/interactivity/hvplot_interactive.md b/doc/how_to/interactivity/hvplot_interactive.md
index dbe9edd997..e29f15c9cd 100644
--- a/doc/how_to/interactivity/hvplot_interactive.md
+++ b/doc/how_to/interactivity/hvplot_interactive.md
@@ -50,7 +50,7 @@ Because we've imported `hvplot.pandas`, we can utilize `.hvplot()` to render the
 df_rx.hvplot(kind="scatter", x="bill_length_mm", y="bill_depth_mm", by="sex")
 ```
 
-We can leverage [`panel.ReactiveExpr`](../../reference/panes/ReactiveExpr.md) to assist in rendering `df_rx`. This allows us to include all widgets related to `df_rx`, while also offering the flexibility to customize the appearance of the widgets. For instance, we can specify `pn.Column` as the `widget_layout` parameter and `top` as the `widget_location` parameter, as shown below:
+We can leverage [`panel.ReactiveExpr`](../../reference/panes/ReactiveExpr) to assist in rendering `df_rx`. This allows us to include all widgets related to `df_rx`, while also offering the flexibility to customize the appearance of the widgets. For instance, we can specify `pn.Column` as the `widget_layout` parameter and `top` as the `widget_location` parameter, as shown below:
 
 ```{pyodide}
 pn.ReactiveExpr(
@@ -81,10 +81,10 @@ pn.Column(
 )
 ```
 
-Finally, if performance is critical, you might want to consider using [Reactive expressions as references](../../reference/panes/ReactiveExpr.md#reactive-expressions-as-references). For instance, you can try replacing `df_rx` with `df_rx.rx()` in this tutorial.
+Finally, if performance is critical, you might want to consider using [Reactive expressions as references](../../reference/panes/ReactiveExpr#reactive-expressions-as-references). For instance, you can try replacing `df_rx` with `df_rx.rx()` in this tutorial.
 
 ## Related Resources
 
 * [Reactive Functions and Expressions of Param](https://param.holoviz.org/user_guide/Reactive_Expressions.html)
-* [Reactive Expressions of Panel](../../tutorials/basic/pn_rx.md)
-* [panel.ReactiveExpr documentation](../../reference/panes/ReactiveExpr.md#reactiveexpr)
+* [Reactive Expressions of Panel](../../tutorials/basic/pn_rx)
+* [panel.ReactiveExpr documentation](../../reference/panes/ReactiveExpr)
diff --git a/doc/how_to/links/jslinks.md b/doc/how_to/links/jslinks.md
index 9b1837afe3..614fa67991 100644
--- a/doc/how_to/links/jslinks.md
+++ b/doc/how_to/links/jslinks.md
@@ -80,5 +80,5 @@ pn.Row(url, button)
 
 ## Related Resources
 
-- See the [Explanation > APIs](../../explanation/api/index.md) for context on this and other Panel APIs
-- The [How to > Link Plot Parameters in Javascript](./link_plots.md) guide addresses how to link Bokeh and HoloViews plot parameters in Javascript.
+- See the [Explanation > APIs](../../explanation/api/index) for context on this and other Panel APIs
+- The [How to > Link Plot Parameters in Javascript](./link_plots) guide addresses how to link Bokeh and HoloViews plot parameters in Javascript.
diff --git a/doc/how_to/links/links.md b/doc/how_to/links/links.md
index 2fbac3806e..71716c18f7 100644
--- a/doc/how_to/links/links.md
+++ b/doc/how_to/links/links.md
@@ -56,4 +56,4 @@ Note that here we explicitly set `t.value` before displaying the panel to trigge
 ---
 
 ## Related Resources
-- See the [Explanation > APIs](../../explanation/api/index.md) for context on this and other Panel APIs
+- See the [Explanation > APIs](../../explanation/api/index) for context on this and other Panel APIs
diff --git a/doc/how_to/migrate/anywidget/index.md b/doc/how_to/migrate/anywidget/index.md
index 576749bb42..c4129b0167 100644
--- a/doc/how_to/migrate/anywidget/index.md
+++ b/doc/how_to/migrate/anywidget/index.md
@@ -18,7 +18,7 @@ The high-level steps needed for converting `AnyWidgets` components to Panel comp
 
 #### Step 1: Base Class Conversion
 
-Convert from the `AnyWidget` base class to the Panel [`JSComponent`](../../../reference/custom_components/JSComponent.md) base class. If the `_esm` script is based on [React](https://react.dev/), use the [`ReactComponent`](../../../reference/custom_components/ReactComponent.md).
+Convert from the `AnyWidget` base class to the Panel [`JSComponent`](../../../reference/custom_components/JSComponent) base class. If the `_esm` script is based on [React](https://react.dev/), use the [`ReactComponent`](../../../reference/custom_components/ReactComponent).
 
 #### Step 2: Attribute Conversion
 
@@ -169,24 +169,24 @@ CounterButton().servable()
 
 ### Mario Button
 
-Check out our [Custom Components Tutorial](../../../tutorials/expert/custom_anywidget_components.md) to see a converted version of the [ipymario](https://github.com/manzt/ipymario) widget.
+Check out our [Custom Components Tutorial](../../../tutorials/expert/custom_anywidget_components) to see a converted version of the [ipymario](https://github.com/manzt/ipymario) widget.
 
-[![Mario Button](https://assets.holoviz.org/panel/tutorials/ipymario.gif)](../../../tutorials/expert/custom_anywidget_components.md)
+[![Mario Button](https://assets.holoviz.org/panel/tutorials/ipymario.gif)](../../../tutorials/expert/custom_anywidget_components)
 
 ## References
 
 ### Tutorials
 
-- [Build Custom AnyWidget Components](../../../tutorials/expert/custom_anywidget_components.md)
+- [Build Custom AnyWidget Components](../../../tutorials/expert/custom_anywidget_components)
 
 ### How-To Guides
 
-- [Convert `AnyWidget` widgets](../../../how_to/migrate/anywidget/index.md)
+- [Convert `AnyWidget` widgets](../../../how_to/migrate/anywidget/index)
 
 ### Reference Guides
 
-- [`JSComponent`](../../../reference/custom_components/JSComponent.md)
-- [`ReactComponent`](../../../reference/custom_components/ReactComponent.md)
-- [`AnyWidgetComponent`](../../../reference/custom_components/AnyWidgetComponent.md)
+- [`JSComponent`](../../../reference/custom_components/JSComponent)
+- [`ReactComponent`](../../../reference/custom_components/ReactComponent)
+- [`AnyWidgetComponent`](../../../reference/custom_components/AnyWidgetComponent)
 
 With these skills, you are now equipped to pioneer and push the boundaries of what can be achieved with Panel. Happy coding!
diff --git a/doc/how_to/notebook/jupyterlabpreview.md b/doc/how_to/notebook/jupyterlabpreview.md
index fdd1715a31..20a2d7c84c 100644
--- a/doc/how_to/notebook/jupyterlabpreview.md
+++ b/doc/how_to/notebook/jupyterlabpreview.md
@@ -6,7 +6,7 @@ This guide addresses how to use the *Preview* functionality in JupyterLab to rap
 
 With this functionality you can preview the app you are building in a JupyterLab tab right next to your code. This is a traditional setup for web developers, who like to  quickly visualize the effects of their code changes.
 
-The Preview in JupyterLab has two different modes depending on whether you marked any component as `.servable()` or not. In this guide we will focus on the explicit mode where you use code to declare which components to publish and how they should be laid out. If you are simply publishing a notebook with or without importing Panel, you will see the [layout builder](./layout_builder.md).
+The Preview in JupyterLab has two different modes depending on whether you marked any component as `.servable()` or not. In this guide we will focus on the explicit mode where you use code to declare which components to publish and how they should be laid out. If you are simply publishing a notebook with or without importing Panel, you will see the [layout builder](layout_builder).
 
 To have your app appear in the *Preview*, you need to mark the objects you want to display with `.servable()`. This is identical to how you would mark objects that you want to serve with `panel serve ...`.
 
@@ -20,7 +20,7 @@ The *Preview* offers two update modes that are configurable in the preview tab:
 - automatic: toggle the *Render on save* checkbox ({far}`square-check`) for the app to be automatically re-rendered when you save your notebook.
 
 :::{tip}
-Panel [built-in templates](../../reference/index.rst#templates) don't render necessarily well in a notebook as their styling can badly interact with the notebook built-in styling. Using the *Preview* is a good way to circumvent this issue, while still being able to work within JupyterLab .
+Panel [built-in templates](../../reference/index#templates) don't render necessarily well in a notebook as their styling can badly interact with the notebook built-in styling. Using the *Preview* is a good way to circumvent this issue, while still being able to work within JupyterLab .
 :::
 
 ## Related Resources
diff --git a/doc/how_to/notebook/layout_builder.md b/doc/how_to/notebook/layout_builder.md
index f3d98ffd1c..5cbfa75d0a 100644
--- a/doc/how_to/notebook/layout_builder.md
+++ b/doc/how_to/notebook/layout_builder.md
@@ -160,4 +160,4 @@ This command will automatically restore the persisted layout data from the noteb
 
 ### Component Gallery
 
-- [EditableTemplate](../../reference/templates/EditableTemplate.md)
+- [EditableTemplate](../../reference/templates/EditableTemplate)
diff --git a/doc/how_to/notebook/other_nb.md b/doc/how_to/notebook/other_nb.md
index f5b1b50d3d..c12e693e6c 100644
--- a/doc/how_to/notebook/other_nb.md
+++ b/doc/how_to/notebook/other_nb.md
@@ -27,20 +27,20 @@ Please note that in Colab rendering for each notebook cell is isolated, which me
 :::
 
 :::{warning}
-The [IpyWidgets](../../reference/panes/IPyWidget.md) pane does not work in Google Colab. Thus you cannot use IpyWidgets with Panel in Colab.
+The [IpyWidgets](../../reference/panes/IPyWidget) pane does not work in Google Colab. Thus you cannot use IpyWidgets with Panel in Colab.
 :::
 
 ## PyCharm Notebook
 
 PyCharm Professional offers support for [notebooks](https://www.jetbrains.com/help/pycharm/ipython-notebook-support.html) and [ipywidgets](https://www.jetbrains.com/help/pycharm/interactive-js-widgets.html). Thanks to the [`jupyter_bokeh`](https://github.com/bokeh/jupyter_bokeh) integration, Panel objects can be utilized as ipywidgets, allowing for interactive use of Panel components within PyCharm Professional. To ensure full functionality, install `jupyter_bokeh` using `pip install jupyter jupyter_bokeh` or `conda install jupyter jupyter_bokeh`, followed by activating the extension with `pn.extension()`.
 
-For additional guidance, refer to the [How-To Configure PyCharm Guide](../editor/pycharm_configure.md).
+For additional guidance, refer to the [How-To Configure PyCharm Guide](../editor/pycharm_configure).
 
 ## VSCode notebook
 
 Visual Studio Code (VS Code) supports notebooks and ipywidgets, and Panel objects can be used as ipywidgets thanks to [`jupyter_bokeh`](https://github.com/bokeh/jupyter_bokeh), which means that you can use Panel components interactively in VS Code. Ensure you install `jupyter_bokeh` with `pip install jupyter_bokeh` or `conda install -c bokeh jupyter_bokeh` and then enable the extension with `pn.extension()`.
 
-See also the [How-To Configure VS Code Guide](../editor/vscode_configure.md).
+See also the [How-To Configure VS Code Guide](../editor/vscode_configure).
 
 ## nteract and other ipywidgets notebooks
 
diff --git a/doc/how_to/param/custom.md b/doc/how_to/param/custom.md
index ebad91206b..327085dcab 100644
--- a/doc/how_to/param/custom.md
+++ b/doc/how_to/param/custom.md
@@ -3,7 +3,7 @@
 This guide addresses how to extend Param based UIs with custom widgets.
 
 ```{admonition} Prerequisites
-1. The [How to > Generate Widgets from Parameters](./uis.md) guide demonstrates the default case of automatically generating widgets.
+1. The [How to > Generate Widgets from Parameters](./uis) guide demonstrates the default case of automatically generating widgets.
 ```
 
 ---
@@ -82,4 +82,4 @@ pn.Param(CustomExample.param, sort=sort_func, name="Sort by Label Length Example
 
 ## Related Resources
 
-- See the [Explanation > APIs](../../explanation/api/index.md) for context on this and other Panel APIs
+- See the [Explanation > APIs](../../explanation/api/index) for context on this and other Panel APIs
diff --git a/doc/how_to/param/dependencies.md b/doc/how_to/param/dependencies.md
index ae51753b16..e5e2da966d 100644
--- a/doc/how_to/param/dependencies.md
+++ b/doc/how_to/param/dependencies.md
@@ -3,7 +3,7 @@
 This guide addresses how to leverage `@param.depends` to express dependencies and trigger events based on UI interactions.
 
 ```{admonition} Prerequisites
-1. The [How to > Generate Widgets from Parameters](./uis.md) guide demonstrates the automatic generation of widgets without dependencies.
+1. The [How to > Generate Widgets from Parameters](uis) guide demonstrates the automatic generation of widgets without dependencies.
 ```
 
 ---
@@ -87,4 +87,4 @@ Whenever the continent changes Param will now eagerly execute the ``_update_coun
 
 ## Related Resources
 
-- See the [Explanation > APIs](../../explanation/api/index.md) for context on this and other Panel APIs
+- See the [Explanation > APIs](../../explanation/api/index) for context on this and other Panel APIs
diff --git a/doc/how_to/param/subobjects.md b/doc/how_to/param/subobjects.md
index 6814c04829..47b6f06afb 100644
--- a/doc/how_to/param/subobjects.md
+++ b/doc/how_to/param/subobjects.md
@@ -3,8 +3,8 @@
 This guide addresses how to structure `Parameterized` classes with subobjects to create nested UIs automatically.
 
 ```{admonition} Prerequisites
-1. The [How to > Generate Widgets from Parameters](./uis.md) guide demonstrates the generation of widgets.
-2. The [How to > ](./dependencies.md) guide demonstrates how to use `@param.depends` to express dependencies between parameters and functions.
+1. The [How to > Generate Widgets from Parameters](./uis) guide demonstrates the generation of widgets.
+2. The [How to > ](./dependencies) guide demonstrates how to use `@param.depends` to express dependencies between parameters and functions.
 
 ```
 
@@ -118,4 +118,4 @@ pn.Row(
 
 ## Related Resources
 
-- See the [Explanation > APIs](../../explanation/api/index.md) for context on this and other Panel APIs
+- See the [Explanation > APIs](../../explanation/api/index) for context on this and other Panel APIs
diff --git a/doc/how_to/param/uis.md b/doc/how_to/param/uis.md
index 613207ce71..676094e8ad 100644
--- a/doc/how_to/param/uis.md
+++ b/doc/how_to/param/uis.md
@@ -104,4 +104,4 @@ Example.timestamps
 
 ## Related Resources
 
-- See the [Explanation > APIs](../../explanation/api/index.md) for context on this and other Panel APIs
+- See the [Explanation > APIs](../../explanation/api/index) for context on this and other Panel APIs
diff --git a/doc/how_to/pipeline/complex_pipeline.md b/doc/how_to/pipeline/complex_pipeline.md
index c0ffc4cb81..1154683d11 100644
--- a/doc/how_to/pipeline/complex_pipeline.md
+++ b/doc/how_to/pipeline/complex_pipeline.md
@@ -3,8 +3,8 @@
 This guide addresses how to build a non-linear Panel Pipeline with branching and converging steps, i.e., an acyclic graph.
 
 ```{admonition} Prerequisites
-1. The [How-to > Param with Panel](../param/index.md) guides describe how to set up classes that declare parameters and link them to some computation or visualization.
-2. The [How-to > Create a Pipeline](./simple_pipeline.md) guide walks through the essential steps of pipeline construction.
+1. The [How-to > Param with Panel](../param/index) guides describe how to set up classes that declare parameters and link them to some computation or visualization.
+2. The [How-to > Create a Pipeline](./simple_pipeline) guide walks through the essential steps of pipeline construction.
 ```
 
 ---
@@ -151,5 +151,5 @@ dag
 
 
 ## Related Resources
-- The [How to > Param with Panel](../param/index.md) guide describe how to set up classes that declare parameters and link them to some computation or visualization.
-- The [How to > Create a Pipeline](./simple_pipeline.md) guide walks through the essential components of a pipeline.
+- The [How to > Param with Panel](../param/index) guide describe how to set up classes that declare parameters and link them to some computation or visualization.
+- The [How to > Create a Pipeline](./simple_pipeline) guide walks through the essential components of a pipeline.
diff --git a/doc/how_to/pipeline/control_flow.md b/doc/how_to/pipeline/control_flow.md
index 9a464ed510..cc337fad7e 100644
--- a/doc/how_to/pipeline/control_flow.md
+++ b/doc/how_to/pipeline/control_flow.md
@@ -3,7 +3,7 @@
 This guide addresses how to programmatically control the `Pipeline` UI flow.
 
 ```{admonition} Prerequisites
-1. The [Create a Non-Linear Pipeline](./complex_pipeline.md) How-to Guide walks through the creation of branching pipeline that commonly used in the context of controlling pipeline flow.
+1. The [Create a Non-Linear Pipeline](complex_pipeline) How-to Guide walks through the creation of branching pipeline that commonly used in the context of controlling pipeline flow.
 ```
 ---
 
@@ -177,5 +177,5 @@ pn.Column(
 ```
 
 ## Related Resources
-- The [How to > Customize Pipeline Layout](./pipeline_layout.md) guide provides some context for the custom layout used here.
-- The [How to > Create a Non-Linear Pipeline](./complex_pipeline.md) guide walks through the creation of branching pipeline that commonly used in the context of controlling pipeline flow.
+- The [How to > Customize Pipeline Layout](pipeline_layout) guide provides some context for the custom layout used here.
+- The [How to > Create a Non-Linear Pipeline](complex_pipeline) guide walks through the creation of branching pipeline that commonly used in the context of controlling pipeline flow.
diff --git a/doc/how_to/pipeline/simple_pipeline.md b/doc/how_to/pipeline/simple_pipeline.md
index 8e3dda748f..616b94e685 100644
--- a/doc/how_to/pipeline/simple_pipeline.md
+++ b/doc/how_to/pipeline/simple_pipeline.md
@@ -164,4 +164,4 @@ pipeline
 
 ## Related Resources
 
-- The [How to > Param with Panel](../param/index.md) guides demonstrate how to set up classes that declare parameters and link them to some computation or visualization.
+- The [How to > Param with Panel](../param/index) guides demonstrate how to set up classes that declare parameters and link them to some computation or visualization.
diff --git a/doc/how_to/state/request.md b/doc/how_to/state/request.md
index 573a69e4eb..aadf2e9665 100644
--- a/doc/how_to/state/request.md
+++ b/doc/how_to/state/request.md
@@ -3,7 +3,7 @@
 This guide addresses how to access information about the HTTP request associated with a session.
 
 ```{admonition} Prerequisites
-1. See the [How to > Access and Manipulate the URL](url.md) guide to learn how to work with the URL.
+1. See the [How to > Access and Manipulate the URL](url) guide to learn how to work with the URL.
 ```
 ---
 
diff --git a/doc/how_to/streamlit_migration/activity.md b/doc/how_to/streamlit_migration/activity.md
index 6cfd7dd0f6..9a772c1440 100644
--- a/doc/how_to/streamlit_migration/activity.md
+++ b/doc/how_to/streamlit_migration/activity.md
@@ -2,7 +2,7 @@
 
 Panel supports many ways of indicating activity
 
-- Indicators. See the [Indicators Section](../../reference/indicators/index.rst#indicators) of the [Component Gallery](../../reference/index.rst).
+- Indicators. See the [Indicators Section](../../reference/indicators/index#indicators) of the [Component Gallery](../../reference/index).
 - `disabled`/ `loading` parameters on Panel components
 - `loading_indicator` parameter for `pn.panel` or `pn.config`. If `True` a loading indicator will be shown on your *bound functions* when they are re-run.
 
@@ -68,4 +68,4 @@ pn.Row(
 
 ![Show Activity](https://user-images.githubusercontent.com/42288570/246325570-11484dd6-4523-401f-b709-6c0cc7996410.gif)
 
-To learn more about migrating activity indicators check out the [Migrate Streamlit Interactivity Guide](interactivity.md).
+To learn more about migrating activity indicators check out the [Migrate Streamlit Interactivity Guide](interactivity).
diff --git a/doc/how_to/streamlit_migration/caching.md b/doc/how_to/streamlit_migration/caching.md
index 29c2a6e6f4..5e073329ba 100644
--- a/doc/how_to/streamlit_migration/caching.md
+++ b/doc/how_to/streamlit_migration/caching.md
@@ -16,7 +16,7 @@ In Panel
 
 Thus with Panel you *may use* caching to make the user experience nice and fast.
 
-In Panel you use `pn.cache` to speed up your apps. Check out the [Cache How-To Guides](../caching/index.md) for more details.
+In Panel you use `pn.cache` to speed up your apps. Check out the [Cache How-To Guides](../caching/index) for more details.
 
 ---
 
diff --git a/doc/how_to/streamlit_migration/chat.md b/doc/how_to/streamlit_migration/chat.md
index 19c0aa4bf9..ca3d38de69 100644
--- a/doc/how_to/streamlit_migration/chat.md
+++ b/doc/how_to/streamlit_migration/chat.md
@@ -4,15 +4,15 @@ Both Streamlit and Panel provides special components to help you build conversat
 
 | Streamlit            | Panel               | Description                            |
 | -------------------- | ------------------- | -------------------------------------- |
-| [`chat_message`](https://docs.streamlit.io/library/api-reference/chat/st.chat_message)    | [`ChatMessage`](../../reference/chat/ChatMessage.md) | Display a chat message  |
+| [`chat_message`](https://docs.streamlit.io/library/api-reference/chat/st.chat_message)    | [`ChatMessage`](../../reference/chat/ChatMessage) | Display a chat message  |
 | [`chat_input`](https://docs.streamlit.io/library/api-reference/chat/st.chat_input) |  [`ChatInput` example](https://holoviz-topics.github.io/panel-chat-examples/components/#chat_input) | Input a chat message |
 | [`status`](https://docs.streamlit.io/library/api-reference/status/st.status) | [`Status` example](https://holoviz-topics.github.io/panel-chat-examples/components/#status) | Display the output of long-running tasks in a container |
-|                      | [`ChatFeed`](../../reference/chat/ChatFeed.md)  | Display multiple chat messages         |
-|                      | [`ChatInterface`](../../reference/chat/ChatInterface.md)  | High-level, easy to use chat interface |
-| [`StreamlitCallbackHandler`](https://python.langchain.com/docs/integrations/callbacks/streamlit) | [`PanelCallbackHandler`](../../reference/chat/PanelCallbackHandler.md) | Display the thoughts and actions of a [LangChain](https://python.langchain.com/docs/get_started/introduction) agent |
+|                      | [`ChatFeed`](../../reference/chat/ChatFeed)  | Display multiple chat messages         |
+|                      | [`ChatInterface`](../../reference/chat/ChatInterface)  | High-level, easy to use chat interface |
+| [`StreamlitCallbackHandler`](https://python.langchain.com/docs/integrations/callbacks/streamlit) | [`PanelCallbackHandler`](../../reference/chat/PanelCallbackHandler) | Display the thoughts and actions of a [LangChain](https://python.langchain.com/docs/get_started/introduction) agent |
 | [`StreamlitChatMessageHistory`](https://python.langchain.com/docs/integrations/memory/streamlit_chat_message_history) |  | Persist the memory of a [LangChain](https://python.langchain.com/docs/get_started/introduction) agent |
 
-The starting point for most Panel users is the *high-level* [`ChatInterface`](../../reference/chat/ChatInterface.md) or [`PanelCallbackHandler`](../../reference/chat/PanelCallbackHandler.md), not the *low-level* [`ChatMessage`](../../reference/chat/ChatMessage.md) and [`ChatFeed`](../../reference/chat/ChatFeed.md) components.
+The starting point for most Panel users is the *high-level* [`ChatInterface`](../../reference/chat/ChatInterface) or [`PanelCallbackHandler`](../../reference/chat/PanelCallbackHandler), not the *low-level* [`ChatMessage`](../../reference/chat/ChatMessage) and [`ChatFeed`](../../reference/chat/ChatFeed) components.
 
 ## Chat Message
 
diff --git a/doc/how_to/streamlit_migration/get_started.md b/doc/how_to/streamlit_migration/get_started.md
index 89762a0ce3..9d3b00a7b7 100644
--- a/doc/how_to/streamlit_migration/get_started.md
+++ b/doc/how_to/streamlit_migration/get_started.md
@@ -17,7 +17,7 @@ You will have to:
 - add `.servable` to the Panel objects you want to include in your apps *template* when served as
 a web app.
 
-For production you will also have to migrate some of your app configuration to `panel serve` [command line options](../server/commandline.md) or environment variables.
+For production you will also have to migrate some of your app configuration to `panel serve` [command line options](../server/commandline) or environment variables.
 
 ## Examples
 
diff --git a/doc/how_to/streamlit_migration/interactivity.md b/doc/how_to/streamlit_migration/interactivity.md
index 4ad03ae26f..5178b7f1a2 100644
--- a/doc/how_to/streamlit_migration/interactivity.md
+++ b/doc/how_to/streamlit_migration/interactivity.md
@@ -41,7 +41,7 @@ Consider the following strategies for effective migration:
 - Transition your core business logic into functions. This includes data loading, transformations, calculations, plot creations, complex computations like galaxy mass estimations, model training, and inference tasks.
 - Enhance interactivity by using `pn.bind` to associate your functions with widgets.
   - For updates that occur multiple times during function execution, consider using generator functions (`yield`).
-- Use visual feedback to indicate activity, as detailed in the [Show Activity Section](activity.md).
+- Use visual feedback to indicate activity, as detailed in the [Show Activity Section](activity).
 
 ## Examples
 
diff --git a/doc/how_to/streamlit_migration/layouts.md b/doc/how_to/streamlit_migration/layouts.md
index 2212e8607f..e3dfee23e0 100644
--- a/doc/how_to/streamlit_migration/layouts.md
+++ b/doc/how_to/streamlit_migration/layouts.md
@@ -13,7 +13,7 @@ To migrate your layouts to Panel
 - replace your Streamlit `st.some_layout` *snake cased* function with the corresponding Panel
 `pn.SomeLayout` *CamelCased* class.
 
-You can identify the relevant layout to migrate to in the [Layouts Section](../../reference/index.rst#layouts) of the [Component Gallery](../../reference/index.rst).
+You can identify the relevant layout to migrate to in the [Layouts Section](../../reference/index.md#layouts) of the [Component Gallery](../../reference/index).
 
 ## Example
 
@@ -66,4 +66,4 @@ pn.Column(row1, row2).servable()
 
 ![Panel Layout Example](../../_static/images/panel_layout_example.png)
 
-Panels `Column` and `Row` are *list like* objects. So you can use familiar methods like `.append`, `.pop` and `[]` indexing when you work with them. For the details check out the [`Column` Guide](../../reference/layouts/Column.md) and the [`Row` Guide](../../reference/layouts/Row.md)
+Panels `Column` and `Row` are *list like* objects. So you can use familiar methods like `.append`, `.pop` and `[]` indexing when you work with them. For the details check out the [`Column` Guide](../../reference/layouts/Column) and the [`Row` Guide](../../reference/layouts/Row)
diff --git a/doc/how_to/streamlit_migration/panes.md b/doc/how_to/streamlit_migration/panes.md
index 5ac58eae06..84190e6d1b 100644
--- a/doc/how_to/streamlit_migration/panes.md
+++ b/doc/how_to/streamlit_migration/panes.md
@@ -5,7 +5,7 @@ In Panel the objects that can display your Python objects are called *panes*. Wi
 - Get notifications about interactions like click events on your plots and tables and react to them.
 - Use unique data visualization ecosystems like HoloViz, ipywidgets and VTK.
 
-Check out the [Panes Section](../../reference/index.rst#panes) of the [Component Gallery](../../reference/index.rst) for the full list of *panes*.
+Check out the [Panes Section](../../reference/index.md#panes) of the [Component Gallery](../../reference/index) for the full list of *panes*.
 
 ---
 
@@ -17,7 +17,7 @@ To display content in Panel:
 `pn.pane.SomeObject` *CamelCased* classes.
 - Replace your Streamlit text elements with `pn.pane.Markdown`.
 
-Identify the relevant Panel *pane*s in the [Panes Section](../../reference/index.rst#panes) of the [Component Gallery](../../reference/index.rst).
+Identify the relevant Panel *pane*s in the [Panes Section](../../reference/index.md#panes) of the [Component Gallery](../../reference/index).
 
 ## Examples
 
@@ -46,7 +46,7 @@ You will find Panels *panes* in the `pn.pane` module.
 
 We use Matplotlibs `Figure` interface instead of the `pyplot` interface to
 avoid memory leaks if you forget to close the figure. This is all described in the
-[Matplotlib Guide](../../reference/panes/Matplotlib.md).
+[Matplotlib Guide](../../reference/panes/Matplotlib).
 
 ```python
 import panel as pn
@@ -68,11 +68,11 @@ pn.pane.Matplotlib(fig, format='svg', sizing_mode='scale_both').servable()
 
 ### Markdown Pane
 
-You can replace `st.markdown` with [`pn.pane.Markdown`](../../reference/panes/Markdown.md).
+You can replace `st.markdown` with [`pn.pane.Markdown`](../../reference/panes/Markdown).
 
 You can also use the `Markdown` pane to replace the text elements `st.title`, `st.header`, `st.sub_header`, `st.code` and `st.text`.
 
-You may use the `Markdown` pane to replace `st.divider` and `st.latex`, but you can also use the *specialized* Panel components [`pn.layout.Divider`](../../reference/layouts/Divider.md) and [`pn.pane.LaTeX`](../../reference/panes/LaTeX.md).
+You may use the `Markdown` pane to replace `st.divider` and `st.latex`, but you can also use the *specialized* Panel components [`pn.layout.Divider`](../../reference/layouts/Divider) and [`pn.pane.LaTeX`](../../reference/panes/LaTeX).
 
 Here is how to do it
 
diff --git a/doc/how_to/streamlit_migration/templates.md b/doc/how_to/streamlit_migration/templates.md
index 501fc0fca0..b48daf1adb 100644
--- a/doc/how_to/streamlit_migration/templates.md
+++ b/doc/how_to/streamlit_migration/templates.md
@@ -11,14 +11,14 @@ With Panel you have the flexibility to use the *default, blank template*, one of
 When migrating you will have to decide which template to use
 
 - Blank (default)
-- A built-in template like *vanilla*, *bootstrap*, *material* or *fast*. See the [Templates Section](../../reference/index.rst#templates) of the [Components Guide](../../reference/index.rst).
-- A [custom template](../../how_to/templates/template_custom.md) declared using Jinja2 syntax.
+- A built-in template like *vanilla*, *bootstrap*, *material* or *fast*. See the [Templates Section](../../reference/index.md#templates) of the [Components Guide](../../reference/index).
+- A [custom template](../../how_to/templates/template_custom) declared using Jinja2 syntax.
 
 ## Example
 
 ### FastListTemplate Example
 
-Here is an example with the [`FastListTemplate`](../../reference/templates/FastListTemplate.md).
+Here is an example with the [`FastListTemplate`](../../reference/templates/FastListTemplate).
 
 ```python
 from asyncio import sleep
diff --git a/doc/how_to/streamlit_migration/widgets.md b/doc/how_to/streamlit_migration/widgets.md
index 71f4b0d741..db96a970d5 100644
--- a/doc/how_to/streamlit_migration/widgets.md
+++ b/doc/how_to/streamlit_migration/widgets.md
@@ -13,7 +13,7 @@ To migrate your app's input widgets to Panel:
 - Replace your Streamlit `st.some_widget` function with the corresponding Panel
 `pn.widgets.SomeWidget` class.
 
-You can identify the corresponding widget via the [Widgets Section](../../reference/index.rst#widgets) of the [Component Gallery](../../reference/index.rst).
+You can identify the corresponding widget via the [Widgets Section](../../reference/index.md#widgets) of the [Component Gallery](../../reference/index.md).
 
 ## Example
 
@@ -51,4 +51,4 @@ pn.Column(bins, pn.pane.Str(bins)).servable()
 
 Please note that in Panel `bins` is an instance of `IntSlider` and not an integer value. To access the value of `bins` in Panel, you would need to call `bins.value`.
 
-Check out the [`IntSlider` Guide](../../reference/widgets/IntSlider.md) if you want to learn more about it.
+Check out the [`IntSlider` Guide](../../reference/widgets/IntSlider) if you want to learn more about it.
diff --git a/doc/how_to/styling/apply_css.md b/doc/how_to/styling/apply_css.md
index c91544c873..570e76f272 100644
--- a/doc/how_to/styling/apply_css.md
+++ b/doc/how_to/styling/apply_css.md
@@ -109,7 +109,7 @@ pn.widgets.FloatSlider(
 
 Inlining stylesheets provides a quick way to override the style of a component but it also means we are sending the stylesheet to the frontend as a string. This can add up when we want to apply this stylesheet to multiple components. Therefore it is recommended that once you move to production the styles are served as an external stylesheet you reference.
 
-You can either provide a full URL to the stylesheet and host it yourself or you can [serve static assets alongside your application](../server/static_files.md). Here we load the stylesheet from an external URL:
+You can either provide a full URL to the stylesheet and host it yourself or you can [serve static assets alongside your application](../server/static_files). Here we load the stylesheet from an external URL:
 
 ```{pyodide}
 pn.widgets.FloatSlider(
diff --git a/doc/how_to/styling/design.md b/doc/how_to/styling/design.md
index 240f1fbc22..f9bd47aa6e 100644
--- a/doc/how_to/styling/design.md
+++ b/doc/how_to/styling/design.md
@@ -50,5 +50,5 @@ pn.Tabs(
 
 ## Related Resources
 
-- Discover [how to customize a design](design_variables.md) next.
-- Discover [how to toggle between themes](themes.md) next.
+- Discover [how to customize a design](design_variables) next.
+- Discover [how to toggle between themes](themes) next.
diff --git a/doc/how_to/styling/design_variables.md b/doc/how_to/styling/design_variables.md
index 8cfe4380ad..7d998f1991 100644
--- a/doc/how_to/styling/design_variables.md
+++ b/doc/how_to/styling/design_variables.md
@@ -7,8 +7,8 @@ The design feature was added in 1.0.0 and is actively being developed and improv
 :::
 
 ```{admonition} Prerequisites
-1. The [How-to > Apply a Design](./design.md) guides describe how to select a design system to apply to the components to achieve a consistent design language.
-2. The [How-to > Apply CSS](./apply_css.md) guide describes how to apply CSS definitions in Panel.
+1. The [How-to > Apply a Design](./design) guides describe how to select a design system to apply to the components to achieve a consistent design language.
+2. The [How-to > Apply CSS](./apply_css) guide describes how to apply CSS definitions in Panel.
 ```
 
 ---
diff --git a/doc/how_to/styling/matplotlib.md b/doc/how_to/styling/matplotlib.md
index 5a760c89a5..9dc14d0d47 100644
--- a/doc/how_to/styling/matplotlib.md
+++ b/doc/how_to/styling/matplotlib.md
@@ -1,6 +1,6 @@
 # Style Matplotlib Plots
 
-This guide addresses how to style Matplotlib plots displayed using the [Matplotlib pane](../..//reference/panes/Matplotlib.md).
+This guide addresses how to style Matplotlib plots displayed using the [Matplotlib pane](../../reference/panes/Matplotlib).
 
 There are nearly 30 builtin styles to Matplotlib that can be activated with the `plt.style.use` function. The style names are listed in the `plt.style.available` array.
 
diff --git a/doc/how_to/styling/plotly.md b/doc/how_to/styling/plotly.md
index 69a1721284..e24a07bf94 100644
--- a/doc/how_to/styling/plotly.md
+++ b/doc/how_to/styling/plotly.md
@@ -1,6 +1,6 @@
 # Style Plotly Plots
 
-This guide addresses how to style Plotly plots displayed using the [Plotly pane](../../reference/panes/Plotly.md).
+This guide addresses how to style Plotly plots displayed using the [Plotly pane](../../reference/panes/Plotly).
 
 Plotly provides a list of built in templates in `plotly.io.templates`. See the [Plotly Templates Guide](https://plotly.com/python/templates/).
 
diff --git a/doc/how_to/styling/themes.md b/doc/how_to/styling/themes.md
index 2cfa5127f3..ee6e7424f9 100644
--- a/doc/how_to/styling/themes.md
+++ b/doc/how_to/styling/themes.md
@@ -18,7 +18,7 @@ All `config` options can also be set via the extension, e.g. to set the theme us
 
 Note that if you do not explicitly override the theme it will default to a light theme. The theme can also be overridden with by setting `theme` as a URL query parameter for your application, i.e. if your app is hosted at `https://mydomain.com/myapp` adding `?theme=dark` will switch the theme automatically.
 
-The theme will apply to all components and combines with the [design](design.md) to provide a consistent visual language.
+The theme will apply to all components and combines with the [design](design) to provide a consistent visual language.
 
 :::{note}
 In JupyterLab and when using the pydata-sphinx-theme Panel components will automatically adapt to the global CSS variables, regardless of what theme you set.
diff --git a/doc/how_to/styling/vega.md b/doc/how_to/styling/vega.md
index f34f74eaf5..72a57a2b17 100644
--- a/doc/how_to/styling/vega.md
+++ b/doc/how_to/styling/vega.md
@@ -1,6 +1,6 @@
 # Style Vega Plots
 
-This guide addresses how to style Vega plots displayed using the [Vega pane](../../reference/panes/Vega.md).
+This guide addresses how to style Vega plots displayed using the [Vega pane](../../reference/panes/Vega).
 
 The gif below displays an example of what can be achieved with a little styling of the Vega plot and the `FastListTemplate`.
 
diff --git a/doc/how_to/templates/template_arrange.md b/doc/how_to/templates/template_arrange.md
index 79f339f611..74b2ffd0fc 100644
--- a/doc/how_to/templates/template_arrange.md
+++ b/doc/how_to/templates/template_arrange.md
@@ -3,14 +3,14 @@
 This guide addresses how to arrange components in a template layout.
 
 ```{admonition} Prerequisites
-1. The [How to > Set a Template](./template_set.md) guide demonstrates how to set a template for a deployable app.
+1. The [How to > Set a Template](./template_set) guide demonstrates how to set a template for a deployable app.
 ```
 
 ---
 
 The default templates that are provided with Panel define four content areas on the page, which can be populated as desired: `header`, `sidebar`, `main`, and `modal` (a dialog box/popup window).
 
-Let's create a simple app and place components in the `header`, `sidebar`, and `main` areas (see the dedicated guide on the [`modal`](./template_modal.md)). We'll first save this script below into a file called `app.py`:
+Let's create a simple app and place components in the `header`, `sidebar`, and `main` areas (see the dedicated guide on the [`modal`](./template_modal)). We'll first save this script below into a file called `app.py`:
 
 :::{card} app.py
 ``` {code-block} python
@@ -55,6 +55,6 @@ panel serve app.py --show --autoreload
 
 ## Related Resources
 
-- See [How-to > Apply Templates > Toggle Modal](./template_modal.md) for a dedicated guide to toggling the modal.
-- See [How-to > Apply Templates > Set a Template](./template_set.md) for alternate approaches to set a template.
-- Read [Explanation > Templates](../../explanation/styling/templates_overview.md) for explanation.
+- See [How-to > Apply Templates > Toggle Modal](./template_modal) for a dedicated guide to toggling the modal.
+- See [How-to > Apply Templates > Set a Template](./template_set) for alternate approaches to set a template.
+- Read [Explanation > Templates](../../explanation/styling/templates_overview) for explanation.
diff --git a/doc/how_to/templates/template_custom.md b/doc/how_to/templates/template_custom.md
index 76d60b5b7c..ae9458956f 100644
--- a/doc/how_to/templates/template_custom.md
+++ b/doc/how_to/templates/template_custom.md
@@ -3,8 +3,8 @@
 This guide addresses how to build a custom template. A custom template gives you full control of the look and feel of your Panel app.
 
 ```{admonition} Prerequisites
-1. The [How to > Set a Template](./template_set.md) guide demonstrates how to set a template for a deployable app.
-2. The [How to > Customize Template Theme](./template_theme.md) guide addresses how to customize the theme of a template, which may be sufficient in many cases.
+1. The [How to > Set a Template](./template_set) guide demonstrates how to set a template for a deployable app.
+2. The [How to > Customize Template Theme](./template_theme) guide addresses how to customize the theme of a template, which may be sufficient in many cases.
 ```
 
 ## Building a Template in a Single File
@@ -229,6 +229,6 @@ tmpl.servable()
 
 ## Related Resources
 
-- See [How-to > Apply Templates > Customize Template Theme](./template_theme.md) to just use a custom theme.
-- See [How-to > Apply Templates > Set a Template](./template_set.md) for alternate approaches to set a template.
-- Read [Explanation > Templates](../../explanation/styling/templates_overview.md) for explanation.
+- See [How-to > Apply Templates > Customize Template Theme](./template_theme) to just use a custom theme.
+- See [How-to > Apply Templates > Set a Template](./template_set) for alternate approaches to set a template.
+- Read [Explanation > Templates](../../explanation/styling/templates_overview) for explanation.
diff --git a/doc/how_to/templates/template_modal.md b/doc/how_to/templates/template_modal.md
index 144f63be10..9b2e481cbe 100644
--- a/doc/how_to/templates/template_modal.md
+++ b/doc/how_to/templates/template_modal.md
@@ -3,7 +3,7 @@
 This guide addresses how to toggle the modal area of a template.
 
 ```{admonition} Prerequisites
-1. The [How to > Set a Template](./template_set.md) guide demonstrates how to set a template for a deployable app.
+1. The [How to > Set a Template](./template_set) guide demonstrates how to set a template for a deployable app.
 ```
 
 ---
@@ -68,5 +68,5 @@ panel serve app.py --show --autoreload
 
 ## Related Resources
 
-- See [How-to > Apply Templates > Set a Template](./template_set.md) for alternate approaches to set a template.
-- Read [Explanation > Templates](../../explanation/styling/templates_overview.md) for explanation.
+- See [How-to > Apply Templates > Set a Template](./template_set) for alternate approaches to set a template.
+- Read [Explanation > Templates](../../explanation/styling/templates_overview) for explanation.
diff --git a/doc/how_to/templates/template_set.md b/doc/how_to/templates/template_set.md
index 3a2e24820c..21b4219d75 100644
--- a/doc/how_to/templates/template_set.md
+++ b/doc/how_to/templates/template_set.md
@@ -110,4 +110,4 @@ panel serve app_global.py --show
 
 ## Related Resources
 
-- Read [Explanation > Templates](../../explanation/styling/templates_overview.md) for explanation.
+- Read [Explanation > Templates](../../explanation/styling/templates_overview) for explanation.
diff --git a/doc/how_to/templates/template_theme.md b/doc/how_to/templates/template_theme.md
index f480532e35..0319853867 100644
--- a/doc/how_to/templates/template_theme.md
+++ b/doc/how_to/templates/template_theme.md
@@ -3,7 +3,7 @@
 This guide addresses how to customize the theme of a template.
 
 ```{admonition} Prerequisites
-1. The [How to > Set a Template](./template_set.md) guide demonstrates how to set a template for a deployable app.
+1. The [How to > Set a Template](./template_set) guide demonstrates how to set a template for a deployable app.
 ```
 
 ---
@@ -74,6 +74,6 @@ panel serve app.py --show --autoreload
 
 ## Related Resources
 
-- See [How-to > Apply Templates > Build a Custom Template](./template_custom.md) to create a completely custom template.
-- See [How-to > Apply Templates > Set a Template](./template_set.md) for alternate approaches to set a template.
-- Read [Background > Templates](../../explanation/styling/templates_overview.md) for explanation.
+- See [How-to > Apply Templates > Build a Custom Template](./template_custom) to create a completely custom template.
+- See [How-to > Apply Templates > Set a Template](./template_set) for alternate approaches to set a template.
+- Read [Background > Templates](../../explanation/styling/templates_overview) for explanation.
diff --git a/examples/reference/panes/Placeholder.ipynb b/examples/reference/panes/Placeholder.ipynb
index ffd48271f7..bc805d57f1 100644
--- a/examples/reference/panes/Placeholder.ipynb
+++ b/examples/reference/panes/Placeholder.ipynb
@@ -6,8 +6,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "import asyncio\n",
     "import panel as pn\n",
+    "import time\n",
     "\n",
     "pn.extension()"
    ]
@@ -89,7 +89,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "placeholder = pn.pane.Placeholder(\"⏳ Idle\")\n",
+    "placeholder = pn.pane.Placeholder(\"⏳ Idle\", stylesheets=[\":host { font-size: 24pt }\"])\n",
     "placeholder"
    ]
   },
@@ -108,11 +108,11 @@
    "source": [
     "with placeholder:\n",
     "    placeholder.update(\"🚀 Starting...\")\n",
-    "    await asyncio.sleep(1)\n",
+    "    time.sleep(1)\n",
     "    placeholder.update(\"🏃 Running...\")\n",
-    "    await asyncio.sleep(1)\n",
+    "    time.sleep(1)\n",
     "    placeholder.update(\"✅ Complete!\")\n",
-    "    await asyncio.sleep(1)"
+    "    time.sleep(1)"
    ]
   }
  ],
diff --git a/examples/reference/widgets/Tabulator.ipynb b/examples/reference/widgets/Tabulator.ipynb
index dae10448ba..e478448f10 100644
--- a/examples/reference/widgets/Tabulator.ipynb
+++ b/examples/reference/widgets/Tabulator.ipynb
@@ -529,7 +529,7 @@
     "    is_max = s == s.max()\n",
     "    return ['background-color: yellow' if v else '' for v in is_max]\n",
     "\n",
-    "styled.style.applymap(color_negative_red).apply(highlight_max)\n",
+    "styled.style.map(color_negative_red).apply(highlight_max)\n",
     "\n",
     "styled"
    ]
diff --git a/panel/reactive.py b/panel/reactive.py
index ac8cff77ef..7f5569365f 100644
--- a/panel/reactive.py
+++ b/panel/reactive.py
@@ -63,7 +63,7 @@
     from bokeh.models.sources import DataDict, Patches
     from pyviz_comms import Comm
 
-    from .layout.base import Panel
+    from .layout.base import Panel as BasePanel
     from .links import Callback, JSLinkTarget, Link
 
 log = logging.getLogger('panel.reactive')
@@ -727,7 +727,7 @@ def link(
           Maps from a parameter in the source object to a callback.
         bidirectional: bool
           Whether to link source and target bi-directionally
-        **links: dict
+        links: dict
           Maps between parameters on this object to the parameters
           on the supplied object.
         """
@@ -781,7 +781,7 @@ def reverse_link(*events):
         self._links.append(link)
         return cb
 
-    def controls(self, parameters: list[str] = [], jslink: bool = True, **kwargs) -> 'Panel':
+    def controls(self, parameters: list[str] = [], jslink: bool = True, **kwargs) -> BasePanel:
         """
         Creates a set of widgets which allow manipulating the parameters
         on this instance. By default all parameters which support
@@ -851,7 +851,7 @@ def jscallback(self, args: dict[str, Any]={}, **callbacks: str) -> Callback:
         ----------
         args: dict
           A mapping of objects to make available to the JS callback
-        **callbacks: dict
+        callbacks: dict
           A mapping between properties on the source model and the code
           to execute when that property changes
 
@@ -888,7 +888,7 @@ def jslink(
           A mapping of objects to make available to the JS callback
         bidirectional: boolean
           Whether to link source and target bi-directionally
-        **links: dict
+        links: dict
           A mapping between properties on the source model and the
           target model property to link it to.
 
diff --git a/panel/template/base.py b/panel/template/base.py
index 970bfd8d43..10c9f54d67 100644
--- a/panel/template/base.py
+++ b/panel/template/base.py
@@ -57,7 +57,7 @@
     from jinja2 import Template as _Template
     from pyviz_comms import Comm
 
-    from ..io.location import Location
+    from ..io.location.base import Location
     from ..io.resources import ResourcesType
 
 
@@ -188,7 +188,7 @@ def _server_destroy(self, session_context: BokehSessionContext):
     def _init_doc(
         self, doc: Optional[Document] = None, comm: Optional[Comm] = None,
         title: Optional[str] = None, notebook: bool = False,
-        location: bool | Location=True
+        location: bool | Location = True
     ):
         # Initialize document
         document: Document = doc or curdoc_locked()
@@ -484,7 +484,7 @@ def server_doc(
         location: bool | Location = True
     ) -> Document:
         """
-        Returns a servable bokeh Document with the panel attached
+        Returns a servable Document with the template attached.
 
         Arguments
         ---------
@@ -500,14 +500,14 @@ def server_doc(
         Returns
         -------
         doc : bokeh.Document
-          The Bokeh document the panel was attached to
+          The Bokeh document the panel was attached to.
         """
         return self._init_doc(doc, title=title, location=location)
 
     def servable(
-        self, title: Optional[str] = None, location: bool | 'Location' = True,
+        self, title: Optional[str] = None, location: bool | Location = True,
         area: str = 'main', target: Optional[str] = None
-    ) -> 'BaseTemplate':
+    ) -> BaseTemplate:
         """
         Serves the template and returns self to allow it to display
         itself in a notebook context.
@@ -530,7 +530,7 @@ def servable(
 
         Returns
         -------
-        The template
+        The template object
         """
         if curdoc_locked().session_context and config.template:
             raise RuntimeError(
diff --git a/pixi.toml b/pixi.toml
index e96e3704f5..3a94e5fd60 100644
--- a/pixi.toml
+++ b/pixi.toml
@@ -181,7 +181,7 @@ OBJC_DISABLE_INITIALIZE_FORK_SAFETY = "YES"
 
 [feature.doc.dependencies]
 lxml = "*"
-nbsite = ">=0.8.6rc5"
+nbsite = ">=0.8.6rc9"
 selenium = "*"
 
 [feature.doc.tasks]

From d4f7d6845a6bf54f4af5af5d0f3fb79bf2d0eebf Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 16 Sep 2024 14:13:00 +0200
Subject: [PATCH 090/164] Bump panel.js version to 1.5.0

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index cc81a06a2b..d9e44b5e98 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-rc.2",
+  "version": "1.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.0-rc.2",
+      "version": "1.5.0",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.5.2",
diff --git a/panel/package.json b/panel/package.json
index fa6d95cb88..c3957b315d 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0-rc.2",
+  "version": "1.5.0",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From 610d8f8279850d57af274f393bcb081db2e8ef74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Wed, 18 Sep 2024 11:02:58 +0200
Subject: [PATCH 091/164] Add cdn urls to be able to build pyodide-lock.json
 (#7286)

---
 .github/workflows/test.yaml             | 4 ----
 scripts/jupyterlite/extra_packages.json | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index baed70a8d0..f330f061b0 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -199,10 +199,6 @@ jobs:
         id: install
       - name: Build pyodide wheels
         run: pixi run -e test-ui "python ./scripts/build_pyodide_wheels.py"
-      - name: Set environment variables for macOS
-        if: contains(matrix.os, 'macos')
-        run: |
-          pixi shell-hook -e test-ui >> $HOME/.bashrc
       - name: Launch JupyterLab
         shell: pixi run -e test-ui bash -el {0}
         run: |
diff --git a/scripts/jupyterlite/extra_packages.json b/scripts/jupyterlite/extra_packages.json
index 3d15b58add..83ae24affc 100644
--- a/scripts/jupyterlite/extra_packages.json
+++ b/scripts/jupyterlite/extra_packages.json
@@ -1,5 +1,5 @@
 [
-  "panel",
-  "bokeh",
+  "https://cdn.holoviz.org/panel/1.5.0/dist/wheels/panel-1.5.0-py3-none-any.whl",
+  "https://cdn.holoviz.org/panel/1.5.0/dist/wheels/bokeh-3.5.2-py3-none-any.whl",
   "pyodide-http"
 ]

From e197f2bf7c721fcfe10679ff20d99e4cfcbfcdea Mon Sep 17 00:00:00 2001
From: Andrew <15331990+ahuang11@users.noreply.github.com>
Date: Wed, 18 Sep 2024 02:25:40 -0700
Subject: [PATCH 092/164] Comment out template output in best practices docs
 (#7288)

---
 doc/how_to/best_practices/dev_experience.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/doc/how_to/best_practices/dev_experience.md b/doc/how_to/best_practices/dev_experience.md
index 7f1307565b..3e9f416788 100644
--- a/doc/how_to/best_practices/dev_experience.md
+++ b/doc/how_to/best_practices/dev_experience.md
@@ -54,7 +54,7 @@ Instead of inheriting from `param.Parameterized`, using `pn.viewable.Viewer` all
 
 For example, it's possible to use `ExampleApp().servable()` instead of `ExampleApp().view().servable()`.
 
-```{pyodide}
+```python
 class ExampleApp(pn.viewable.Viewer):
 
     ...
@@ -65,14 +65,14 @@ class ExampleApp(pn.viewable.Viewer):
             sidebar=[...],
         )
 
-ExampleApp().servable();  # semi-colon to suppress output in notebook
+ExampleApp().servable();
 ```
 
 ### Okay
 
 This method works, but should be reserved for cases where there's no Panel output.
 
-```{pyodide}
+```python
 class ExampleApp(param.Parameterized):
 
     ...
@@ -83,7 +83,7 @@ class ExampleApp(param.Parameterized):
             sidebar=[...],
         )
 
-ExampleApp().view().servable();  # semi-colon to suppress output in notebook
+ExampleApp().view().servable();
 ```
 
 ## Build widgets from parameters

From 37c9ec615cb4765be9cf945e1d814cc8dbff7123 Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Wed, 18 Sep 2024 22:31:27 +0200
Subject: [PATCH 093/164] tabulator gradients (#7291)

Co-authored-by: Philipp Rudiger <prudiger@anaconda.com>
---
 examples/reference/widgets/Tabulator.ipynb | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/examples/reference/widgets/Tabulator.ipynb b/examples/reference/widgets/Tabulator.ipynb
index e478448f10..a95588f737 100644
--- a/examples/reference/widgets/Tabulator.ipynb
+++ b/examples/reference/widgets/Tabulator.ipynb
@@ -534,6 +534,27 @@
     "styled"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "You can style your tables with gradients using the [`.text_gradient`](https://pandas.pydata.org/docs/reference/api/pandas.io.formats.style.Styler.text_gradient.html) or [`.background_gradient`](https://pandas.pydata.org/docs/reference/api/pandas.io.formats.style.Styler.background_gradient.html#pandas.io.formats.style.Styler.background_gradient) methods, along with [named Matplotlib color maps](https://matplotlib.org/stable/gallery/color/colormap_reference.html).\n",
+    "\n",
+    "**Note:** Styling with gradients requires Matplotlib to be installed."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "gradient_table = pn.widgets.Tabulator(style_df)\n",
+    "gradient_table.style.text_gradient(cmap=\"RdYlGn\", subset=[\"B\", \"C\"])\n",
+    "gradient_table.style.background_gradient(cmap=\"RdYlGn\", subset=[\"D\", \"E\"])\n",
+    "gradient_table"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},

From c83c112e5c1216216195a056bb0b77130857086c Mon Sep 17 00:00:00 2001
From: "James A. Bednar" <jbednar@continuum.io>
Date: Wed, 18 Sep 2024 15:31:42 -0500
Subject: [PATCH 094/164] Clarified wording in best practices docs (#7290)

Co-authored-by: Philipp Rudiger <prudiger@anaconda.com>
---
 doc/how_to/best_practices/dev_experience.md  | 14 ++++++-------
 doc/how_to/best_practices/user_experience.md | 21 ++++++++++----------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/doc/how_to/best_practices/dev_experience.md b/doc/how_to/best_practices/dev_experience.md
index 3e9f416788..a17d667f75 100644
--- a/doc/how_to/best_practices/dev_experience.md
+++ b/doc/how_to/best_practices/dev_experience.md
@@ -22,7 +22,7 @@ The best practices described on this page serve as a checklist of items to keep
 
 ### Good
 
-Be sure to bind on `obj.param.{parameter}`, not just `{parameter}`.
+Be sure to bind `obj.param.{parameter}` (the Parameter object), not just `{parameter}` (the current Parameter value).
 
 ```{pyodide}
 def show_clicks(clicks):
@@ -35,7 +35,7 @@ pn.Row(button, clicks)
 
 ### Wrong
 
-If only on `{parameter}`, it will not trigger an update on change.
+Binding to `{parameter}` will bind to the single current value of the parameter, _not_ to the underlying object, and so it will not trigger an update on change.
 
 ```{pyodide}
 def show_clicks(clicks):
@@ -50,7 +50,7 @@ pn.Row(button, clicks)
 
 ### Good
 
-Instead of inheriting from `param.Parameterized`, using `pn.viewable.Viewer` allows direct invocation of the class, resembling a native Panel object.
+`param.Parameterized` is a very general class that can be used separately from Panel for working with Parameters. But if you want a Parameterized class to use with Panel, it is usually appropriate to inherit from the Panel-specific class `pn.viewable.Viewer` instead, because `Viewer` allows direct invocation of the class, resembling a native Panel object.
 
 For example, it's possible to use `ExampleApp().servable()` instead of `ExampleApp().view().servable()`.
 
@@ -70,7 +70,7 @@ ExampleApp().servable();
 
 ### Okay
 
-This method works, but should be reserved for cases where there's no Panel output.
+Inheriting from `param.Parameterized` also works, but should be reserved for cases where there's no Panel output.
 
 ```python
 class ExampleApp(param.Parameterized):
@@ -90,7 +90,7 @@ ExampleApp().view().servable();
 
 ### Good
 
-To translate multiple parameters into widgets, use `pn.Param`.
+To translate multiple Parameters into widgets, use `pn.Param`.
 
 ```{pyodide}
 class ExampleApp(pn.viewable.Viewer):
@@ -225,7 +225,7 @@ ExampleApp()
 
 ### Wrong
 
-Widgets should not be used as parameters since all instances of the class will share the widget class:
+Widgets should not be used as if they were Parameters, because then all instances of your new class will share a single set of instantiated widgets, confusing everyone:
 
 ```{pyodide}
 class ExampleApp(pn.viewable.Viewer):
@@ -312,7 +312,7 @@ pn.Row(slider, output)
 
 ### Good
 
-For functions that trigger side effects, i.e. do not return anything (or returns None), be sure to set `watch=True` on `pn.bind` or `pn.depends`.
+For functions that trigger side effects, i.e. do not return anything (or return None), be sure to set `watch=True` on `pn.bind` or `pn.depends`.
 
 ```{pyodide}
 def print_clicks(clicks):
diff --git a/doc/how_to/best_practices/user_experience.md b/doc/how_to/best_practices/user_experience.md
index 58ce154758..7cb035e752 100644
--- a/doc/how_to/best_practices/user_experience.md
+++ b/doc/how_to/best_practices/user_experience.md
@@ -46,7 +46,7 @@ pn.Row(button, progress)
 
 ### Okay
 
-The following shows setting parameters individually, which could be inefficient.
+The following shows setting parameters individually, which could be inefficient and may temporarily leave the object in an inconsistent state.
 
 ```{pyodide}
 def run(event):
@@ -69,7 +69,7 @@ pn.Row(button, progress)
 
 ### Good
 
-To prevent sliders from triggering excessive callbacks, set `throttled=True` so that it only triggers once upon mouse-up.
+When callbacks are expensive to run, you can prevent sliders from triggering too many callbacks, by setting `throttled=True`. When throttled, callbacks will be triggered only once, upon mouse-up.
 
 ```{pyodide}
 pn.extension(throttled=True)
@@ -85,7 +85,7 @@ pn.Row(slider, output)
 
 ### Good
 
-Alternatively, limit the scope by binding against `value_throttled` instead of `value`.
+Alternatively, you can apply throttling only to the specific widgets with the most expensive callbacks, by binding to `value_throttled` instead of `value`.
 
 ```{pyodide}
 def callback(value):
@@ -99,7 +99,7 @@ pn.Row(slider, output)
 
 ### Bad
 
-If the operation is expensive, binding against `value` can be really slow.
+Binding against `value` can be really slow for expensive callbacks.
 
 ```{pyodide}
 def callback(value):
@@ -115,7 +115,7 @@ pn.Row(slider, output)
 
 ### Good
 
-Its easy defer the execution of all bound and displayed functions with `pn.extension(defer_load=True)` (note this applies to served applications, not to interactive notebook environments):
+It's easy to defer the execution of all bound and displayed functions with `pn.extension(defer_load=True)` (note this applies to served applications, not to interactive notebook environments):
 
 ```{pyodide}
 pn.extension(defer_load=True, loading_indicator=True)
@@ -222,7 +222,7 @@ layout
 
 ### Good
 
-Wrap the decorator `pn.cache` for automatic handling.
+Wrap your callback with a `pn.cache` decorator so that values are automatically cached so that expensive computations are not repeated.
 
 ```{pyodide}
 @pn.cache
@@ -237,7 +237,7 @@ pn.Row(slider, output)
 
 ### Okay
 
-Or, manually handle the cache with `pn.state.cache`.
+Or, manually handle the cache yourself with `pn.state.cache`.
 
 ```{pyodide}
 def callback(value):
@@ -257,7 +257,7 @@ pn.Row(slider, output)
 
 ### Good
 
-To prevent the plot from resetting to its original axes ranges when zoomed in, simply wrap `hv.DynamicMap`.
+When you are working with HoloViews or hvPlot in Panel, you can prevent the plot from resetting to its original axes ranges when zoomed in by wrapping it with `hv.DynamicMap`.
 
 ```{pyodide}
 import numpy as np
@@ -328,13 +328,12 @@ pn.Row(
 
 ### Good
 
-Imagine Panel components as placeholders and use them as such rather than re-creating them on update.
+Imagine Panel components as placeholders and use them as such, rather than re-creating them on update.
 
 ```{pyodide}
 def randomize(event):
     df_pane.object = pd.DataFrame(np.random.randn(10, 3), columns=list("ABC"))
 
-
 button = pn.widgets.Button(name="Compute", on_click=randomize)
 df_pane = pn.pane.DataFrame()
 button.param.trigger("clicks")  # initialize
@@ -344,7 +343,7 @@ pn.Column(button, df_pane)
 
 ### Okay
 
-This instantiates the `pn.pane.DataFrame` on every click.
+If your callback returns a Panel object rather than the underlying object being displayed, you'll end up instantiating the `pn.pane.DataFrame` on every click (which is typically slower and will often have distracting flickering).
 
 ```{pyodide}
 def randomize(clicks):

From 1e8827b1e109a8a8cb0d4679d29b030208227675 Mon Sep 17 00:00:00 2001
From: Andrew <15331990+ahuang11@users.noreply.github.com>
Date: Thu, 19 Sep 2024 02:15:16 -0700
Subject: [PATCH 095/164] Fix langchain import (#7297)

---
 panel/chat/__init__.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/panel/chat/__init__.py b/panel/chat/__init__.py
index 8cac6e04cd..b8b32e8028 100644
--- a/panel/chat/__init__.py
+++ b/panel/chat/__init__.py
@@ -53,8 +53,8 @@ def __getattr__(name):
     Lazily import langchain module when accessed.
     """
     if name == "langchain":
-        from . import langchain
-        return langchain
+        import importlib
+        return importlib.import_module("panel.chat.langchain")
     raise AttributeError(f"module {__name__!r} has no attribute {name!r}")
 
 __dir__ = lambda: list(__all__)

From 2e8597c1ebbd58d16b98c955ac12b381ef9561cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Fri, 20 Sep 2024 12:20:06 +0200
Subject: [PATCH 096/164] Only postpone setup script if --num-procs is greater
 than 1 (#7289)

Co-authored-by: Philipp Rudiger <prudiger@anaconda.com>
---
 panel/command/serve.py            | 17 ++++++++++++++++-
 panel/io/server.py                | 13 ++-----------
 panel/tests/command/test_serve.py | 15 +++++++++++++++
 panel/tests/util.py               |  4 ++--
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/panel/command/serve.py b/panel/command/serve.py
index 949546c9d7..d50fee3d20 100644
--- a/panel/command/serve.py
+++ b/panel/command/serve.py
@@ -249,7 +249,7 @@ class Serve(_BkServe):
         ('--setup', dict(
             action  = 'store',
             type    = str,
-            help    = "Path to a setup script to run before server starts.",
+            help    = "Path to a setup script to run before server starts. If --num-procs is enabled it will be run in each process after the server has started.",
             default = None
         )),
         ('--liveness', dict(
@@ -370,6 +370,21 @@ def customize_kwargs(self, args, server_kwargs):
             module.__dict__['__file__'] = fullpath(args.setup)
             state._setup_module = module
 
+            def setup_file():
+                setup_path = state._setup_module.__dict__['__file__']
+                with open(setup_path) as f:
+                    setup_source = f.read()
+                nodes = ast.parse(setup_source, os.fspath(setup_path))
+                code = compile(nodes, filename=setup_path, mode='exec', dont_inherit=True)
+                exec(code, state._setup_module.__dict__)
+
+            if args.num_procs > 1:
+                # We will run the setup_file for each process
+                state._setup_file_callback = setup_file
+            else:
+                state._setup_file_callback = None
+                setup_file()
+
         if args.warm or config.autoreload:
             argvs = {f: args.args for f in files}
             applications = build_single_handler_applications(files, argvs)
diff --git a/panel/io/server.py b/panel/io/server.py
index 4ee02f5d6f..e2b38dfca2 100644
--- a/panel/io/server.py
+++ b/panel/io/server.py
@@ -3,7 +3,6 @@
 """
 from __future__ import annotations
 
-import ast
 import asyncio
 import datetime as dt
 import importlib
@@ -295,20 +294,12 @@ def __init__(self, *args, **kwargs):
         if state._admin_context:
             state._admin_context._loop = self._loop
 
-    def setup_file(self):
-        setup_path = state._setup_module.__dict__['__file__']
-        with open(setup_path) as f:
-            setup_source = f.read()
-        nodes = ast.parse(setup_source, os.fspath(setup_path))
-        code = compile(nodes, filename=setup_path, mode='exec', dont_inherit=True)
-        exec(code, state._setup_module.__dict__)
-
     def start(self) -> None:
         super().start()
         if state._admin_context:
             self._loop.add_callback(state._admin_context.run_load_hook)
-        if state._setup_module:
-            self._loop.add_callback(self.setup_file)
+        if state._setup_module and state._setup_file_callback:
+            self._loop.add_callback(state._setup_file_callback)
         if config.autoreload:
             from .reload import setup_autoreload_watcher
             self._autoreload_stop_event = stop_event = asyncio.Event()
diff --git a/panel/tests/command/test_serve.py b/panel/tests/command/test_serve.py
index 0100c0a55b..3626391cae 100644
--- a/panel/tests/command/test_serve.py
+++ b/panel/tests/command/test_serve.py
@@ -134,3 +134,18 @@ def test_serve_num_procs_setup(tmp_path):
     with run_panel_serve(["--port", "0", py, "--num-procs", 2, "--setup", setup_py], cwd=tmp_path) as p:
         pid1, pid2 = wait_for_regex(p.stdout, regex=regex, count=2)
         assert pid1 != pid2
+
+
+def test_serve_setup(tmp_path):
+    app = "import panel as pn; pn.panel('Hello').servable()"
+    py = tmp_path / "app.py"
+    py.write_text(app)
+
+    setup_app = 'print(f"Setup running before", flush=True)'
+    setup_py = tmp_path / "setup.py"
+    setup_py.write_text(setup_app)
+
+    regex = re.compile('(Setup running before)')
+    with run_panel_serve(["--port", "0", py, "--setup", setup_py], cwd=tmp_path) as p:
+        _, output = wait_for_regex(p.stdout, regex=regex, return_output=True)
+        assert output[0].strip() == "Setup running before"
diff --git a/panel/tests/util.py b/panel/tests/util.py
index d7af7ab17a..e7d87b3ac7 100644
--- a/panel/tests/util.py
+++ b/panel/tests/util.py
@@ -394,7 +394,7 @@ def readline(self, timeout=None):
         except Empty:
             return None
 
-def wait_for_regex(stdout, regex, count=1):
+def wait_for_regex(stdout, regex, count=1, return_output=False):
     nbsr = NBSR(stdout)
     m = None
     output, found = [], []
@@ -415,7 +415,7 @@ def wait_for_regex(stdout, regex, count=1):
             "No matching log line in process output, following output "
             f"was captured:\n\n   {output}"
         )
-    return found
+    return (found, output) if return_output else found
 
 def wait_for_port(stdout):
     return int(wait_for_regex(stdout, APP_PATTERN)[0])

From 3d016edf02a578fe85e6290065c499ea4ba1deb0 Mon Sep 17 00:00:00 2001
From: Maxime Liquet <35924738+maximlt@users.noreply.github.com>
Date: Fri, 20 Sep 2024 14:29:42 +0200
Subject: [PATCH 097/164] fix add_applications typo (#7306)

---
 doc/how_to/integrations/FastAPI.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/how_to/integrations/FastAPI.md b/doc/how_to/integrations/FastAPI.md
index 874967291b..fec10d37d2 100644
--- a/doc/how_to/integrations/FastAPI.md
+++ b/doc/how_to/integrations/FastAPI.md
@@ -146,7 +146,7 @@ The `add_application` decorator is useful when server an application defined in
 import panel as pn
 
 from fastapi import FastAPI
-from panel.io.fastapi import add_application
+from panel.io.fastapi import add_applications
 
 app = FastAPI()
 

From a8ce24bfe635cb2d018fdfea1c9a93f5985ad752 Mon Sep 17 00:00:00 2001
From: Maxime Liquet <35924738+maximlt@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:57:23 +0200
Subject: [PATCH 098/164] Docs: minor changes to the FileDropper doc (#7307)

* small fixes to the FileDropper doc

* link FileDropper from FileInput
---
 examples/reference/widgets/FileDropper.ipynb | 6 +++---
 examples/reference/widgets/FileInput.ipynb   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/reference/widgets/FileDropper.ipynb b/examples/reference/widgets/FileDropper.ipynb
index 99402bbc7c..c431be94d9 100644
--- a/examples/reference/widgets/FileDropper.ipynb
+++ b/examples/reference/widgets/FileDropper.ipynb
@@ -106,7 +106,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "file_dropper = pn.widgets.FileInput(multiple=True)\n",
+    "file_dropper = pn.widgets.FileDropper(multiple=True)\n",
     "\n",
     "file_dropper"
    ]
@@ -143,7 +143,7 @@
    "source": [
     "### Upload size limits\n",
     "\n",
-    "Unlike the `FileInput` widget the `FileDropper` widget bypasses restrictions to the maximum file size imposed by web browsers, Bokeh, Tornado, notebooks, etc. by chunking large uploads. This makes it feasible to upload much larger files than would otherwise be possible. The default `chunk_size` is 10MB (which is expressed in as 10000000 bytes). Even if it is possible to increase this limit by setting some parameters (described below), bear in mind that the `FileInput` widget is not meant to upload large files. You can configure `max_file_size`, `max_total_file_size` (limiting the total upload size if you have set `multiple=True`) and `max_files` to provide an upper bound on the amount of data that can be uploaded."
+    "Unlike the `FileInput` widget the `FileDropper` widget bypasses restrictions to the maximum file size imposed by web browsers, Bokeh, Tornado, notebooks, etc. by chunking large uploads. This makes it feasible to upload much larger files than would otherwise be possible. The default `chunk_size` is 10MB (which is expressed in as 10000000 bytes). You can configure `max_file_size`, `max_total_file_size` (limiting the total upload size if you have set `multiple=True`) and `max_files` to provide an upper bound on the amount of data that can be uploaded."
    ]
   },
   {
@@ -152,7 +152,7 @@
    "source": [
     "### Controls\n",
     "\n",
-    "The `FileInput` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
+    "The `FileDropper` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
    ]
   },
   {
diff --git a/examples/reference/widgets/FileInput.ipynb b/examples/reference/widgets/FileInput.ipynb
index 73073f3720..299eed3741 100644
--- a/examples/reference/widgets/FileInput.ipynb
+++ b/examples/reference/widgets/FileInput.ipynb
@@ -15,7 +15,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "The ``FileInput`` widget allows uploading one or more files from the frontend and makes the filename, file data and [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) available in Python. To upload large files, use the ``FileDropper`` widget.\n",
+    "The ``FileInput`` widget allows uploading one or more files from the frontend and makes the filename, file data and [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) available in Python. To upload large files, use the [`FileDropper`](FileDropper.ipynb) widget.\n",
     "\n",
     "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.md).\n",
     "\n",

From 821aa4b256e78f726bcfb603a80d4faf7dbf6600 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Fri, 20 Sep 2024 15:57:46 +0200
Subject: [PATCH 099/164] General maintenance (#7303)

* Only install pre-commit

* Update pre-commit

* Move to bash -l instead of bash -el

* Update to holoviz_task to v0
---
 .github/workflows/build.yaml        | 12 ++++++------
 .github/workflows/docs.yaml         |  6 +++---
 .github/workflows/jupyterlite.yaml  |  4 ++--
 .github/workflows/nightly_lock.yaml |  2 +-
 .github/workflows/test.yaml         | 18 +++++++++---------
 .pre-commit-config.yaml             |  2 +-
 pixi.toml                           |  2 +-
 7 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index d3621631a8..24fe4129a3 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -13,7 +13,7 @@ on:
 
 defaults:
   run:
-    shell: bash -el {0}
+    shell: bash -l {0}
 
 env:
   PACKAGE: "panel"
@@ -35,14 +35,14 @@ jobs:
     name: Pixi lock
     runs-on: ubuntu-latest
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_lock@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_lock@v0
 
   conda_build:
     name: Build Conda
     needs: [pixi_lock]
     runs-on: "ubuntu-latest"
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_install@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
         with:
           environments: "build"
           install: false
@@ -90,7 +90,7 @@ jobs:
     needs: [pixi_lock]
     runs-on: "ubuntu-latest"
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_install@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
         with:
           environments: "build"
           install: false
@@ -143,7 +143,7 @@ jobs:
     needs: [pixi_lock]
     runs-on: "ubuntu-latest"
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_install@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
         with:
           environments: "build"
           download-data: false
@@ -198,7 +198,7 @@ jobs:
     needs: [pixi_lock]
     runs-on: "ubuntu-latest"
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_install@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
         with:
           environments: "build"
           install: false
diff --git a/.github/workflows/docs.yaml b/.github/workflows/docs.yaml
index 996758cd76..35094b7978 100644
--- a/.github/workflows/docs.yaml
+++ b/.github/workflows/docs.yaml
@@ -23,7 +23,7 @@ on:
 
 defaults:
   run:
-    shell: bash -el {0}
+    shell: bash -l {0}
 
 env:
   DISPLAY: ":99.0"
@@ -33,7 +33,7 @@ jobs:
     name: Pixi lock
     runs-on: ubuntu-latest
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_lock@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_lock@v0
 
   docs_build:
     name: Build Documentation
@@ -43,7 +43,7 @@ jobs:
     outputs:
       tag: ${{ steps.vars.outputs.tag }}
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_install@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
         with:
           environments: docs
           opengl: true
diff --git a/.github/workflows/jupyterlite.yaml b/.github/workflows/jupyterlite.yaml
index 40523eec7d..a19026c0bd 100644
--- a/.github/workflows/jupyterlite.yaml
+++ b/.github/workflows/jupyterlite.yaml
@@ -26,14 +26,14 @@ jobs:
     name: Pixi lock
     runs-on: ubuntu-latest
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_lock@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_lock@v0
 
   lite_build:
     name: Build Jupyterlite
     needs: [pixi_lock]
     runs-on: "ubuntu-latest"
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_install@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
         with:
           environments: "lite"
           install: false
diff --git a/.github/workflows/nightly_lock.yaml b/.github/workflows/nightly_lock.yaml
index 564a5ca05e..e4be7855fb 100644
--- a/.github/workflows/nightly_lock.yaml
+++ b/.github/workflows/nightly_lock.yaml
@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 5
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_lock@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_lock@v0
       - name: Upload lock-file to S3
         if: '!github.event.pull_request.head.repo.fork'
         env:
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index f330f061b0..933b31a04f 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -29,7 +29,7 @@ concurrency:
 
 defaults:
   run:
-    shell: bash -el {0}
+    shell: bash -l {0}
 
 env:
   DISPLAY: ":99.0"
@@ -125,7 +125,7 @@ jobs:
     name: Pixi lock
     runs-on: ubuntu-latest
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_lock@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_lock@v0
         with:
           cache: ${{ github.event.inputs.cache == 'true' || github.event.inputs.cache == '' }}
 
@@ -139,7 +139,7 @@ jobs:
       matrix: ${{ fromJson(needs.setup.outputs.matrix) }}
     timeout-minutes: 90
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_install@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
         with:
           environments: ${{ matrix.environment }}
           opengl: true
@@ -193,19 +193,19 @@ jobs:
       OKTA_OAUTH_USER: ${{ secrets.OKTA_OAUTH_USER }}
       OKTA_OAUTH_PASSWORD: ${{ secrets.OKTA_OAUTH_PASSWORD }}
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_install@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
         with:
           environments: ${{ matrix.environment }}
         id: install
       - name: Build pyodide wheels
         run: pixi run -e test-ui "python ./scripts/build_pyodide_wheels.py"
       - name: Launch JupyterLab
-        shell: pixi run -e test-ui bash -el {0}
+        shell: pixi run -e test-ui bash -l {0}
         run: |
           jupyter server extension enable panel.io.jupyter_server_extension --sys-prefix
           (jupyter lab --config panel/tests/ui/jupyter_server_test_config.py --port 8887 > /tmp/jupyterlab_server.log 2>&1) &
       - name: Build JupyterLite
-        shell: pixi run -e test-ui bash -el {0}
+        shell: pixi run -e test-ui bash -l {0}
         run: pixi run -e lite lite-build
       - name: Wait for JupyterLab
         uses: ifaxity/wait-on-action@v1.2.1
@@ -227,7 +227,7 @@ jobs:
           if-no-files-found: ignore
       - name: Stop JupyterLab
         if: always()
-        shell: pixi run -e test-ui bash -el {0}
+        shell: pixi run -e test-ui bash -l {0}
         run: |
           jupyter lab stop 8887 || true
       - uses: codecov/codecov-action@v4
@@ -246,7 +246,7 @@ jobs:
         environment: ["test-core"]
     timeout-minutes: 120
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_install@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
         with:
           environments: ${{ matrix.environment }}
       - name: Test Unit
@@ -265,7 +265,7 @@ jobs:
         environment: ["test-type"]
     timeout-minutes: 120
     steps:
-      - uses: holoviz-dev/holoviz_tasks/pixi_install@pixi
+      - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
         with:
           environments: ${{ matrix.environment }}
       - name: Test Type
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 49e563408c..9ac0b97142 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -17,7 +17,7 @@ repos:
         exclude: \.min\.js$
       - id: trailing-whitespace
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.6.4
+    rev: v0.6.6
     hooks:
       - id: ruff
         files: panel/
diff --git a/pixi.toml b/pixi.toml
index 3a94e5fd60..71dd382c21 100644
--- a/pixi.toml
+++ b/pixi.toml
@@ -232,7 +232,7 @@ pre-commit = "*"
 
 [feature.lint.tasks]
 lint = 'pre-commit run --all-files'
-lint-install = 'pre-commit install'
+lint-install = 'pre-commit install -t=pre-commit'
 
 # =============================================
 # =================== LITE ====================

From 32b147d66890f6838b1b573c58dcf1138e012118 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 20 Sep 2024 16:49:34 +0200
Subject: [PATCH 100/164] Ensure Tabulator redraw is called after full render
 (#7305)

---
 panel/models/tabulator.ts | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts
index bfdc4c2b63..33ca68b32f 100644
--- a/panel/models/tabulator.ts
+++ b/panel/models/tabulator.ts
@@ -356,6 +356,7 @@ export class DataTabulatorView extends HTMLBoxView {
   _lastHorizontalScrollbarLeftPosition: number = 0
   _applied_styles: boolean = false
   _building: boolean = false
+  _redrawing: boolean = false
   _debounced_redraw: any = null
   _restore_scroll: boolean | "horizontal" | "vertical" = false
   _updating_scroll: boolean = false
@@ -491,9 +492,10 @@ export class DataTabulatorView extends HTMLBoxView {
   }
 
   redraw(columns: boolean = true, rows: boolean = true): void {
-    if (this._building || this.tabulator != null) {
+    if (this._building || this.tabulator == null || this._redrawing) {
       return
     }
+    this._redrawing = true
     if (columns && (this.tabulator.columnManager.element != null)) {
       this.tabulator.columnManager.redraw(true)
     }
@@ -502,20 +504,22 @@ export class DataTabulatorView extends HTMLBoxView {
       this.renderChildren()
       this.setStyles()
     }
+    this._redrawing = false
     this._restore_scroll = true
   }
 
   override after_layout(): void {
     super.after_layout()
-    if (this.tabulator != null && this._initializing) {
+    const finished = this.root.has_finished()
+    if (this.tabulator != null && this._initializing && !this._building && finished) {
+      this._initializing = false
       this.redraw()
     }
-    this._initializing = false
   }
 
   override after_resize(): void {
     super.after_resize()
-    if (!this._is_scrolling) {
+    if (!this._is_scrolling && !this._redrawing) {
       this._debounced_redraw()
     }
   }
@@ -643,7 +647,6 @@ export class DataTabulatorView extends HTMLBoxView {
   }
 
   tableBuilt(): void {
-    this._building = false
     this.setSelection()
     this.renderChildren()
     this.setStyles()
@@ -690,6 +693,20 @@ export class DataTabulatorView extends HTMLBoxView {
       this.setMaxPage()
       this.tabulator.setPage(this.model.page)
     }
+    this._building = false
+    if (this._initializing && this.root.has_finished()) {
+      this._initializing = false
+      this.redraw()
+    } else if (!this.root.has_finished()) {
+      const finalize = () => {
+        if (this.root.has_finished()) {
+          this._initializing = false
+        } else {
+          setTimeout(finalize, 10)
+        }
+      }
+      setTimeout(finalize, 10)
+    }
   }
 
   requestPage(page: number, sorters: any[]): Promise<void> {

From f426769f720b487408b73e7085548e99caf8c6d3 Mon Sep 17 00:00:00 2001
From: Alex Johnson <alex@plot.ly>
Date: Mon, 23 Sep 2024 02:28:23 -0400
Subject: [PATCH 101/164] filter out empty plotly_selected events (#7312)

---
 panel/models/plotly.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/panel/models/plotly.ts b/panel/models/plotly.ts
index 2c2099e079..3f16accefd 100644
--- a/panel/models/plotly.ts
+++ b/panel/models/plotly.ts
@@ -299,6 +299,10 @@ export class PlotlyPlotView extends HTMLBoxView {
 
     //  - plotly_selected
     this.container.on("plotly_selected", (eventData: any) => {
+      if (eventData === undefined || eventData === null) {
+        // filter out the empty events that come from single-click
+        return
+      }
       const data = filterEventData(this.container, eventData, "selected")
       this.model.trigger_event(new PlotlyEvent({type: "selected", data}))
     })

From 8c6f2d570c3b288a5455c9d84910ad2e16c9fd5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Mon, 23 Sep 2024 08:29:07 +0200
Subject: [PATCH 102/164] Test Python 3.13 rc (#7311)

---
 panel/io/mime_render.py |  7 +++----
 pixi.toml               | 35 +++++++++++++++++++++++++----------
 pyproject.toml          |  1 +
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/panel/io/mime_render.py b/panel/io/mime_render.py
index 730c25c6a1..2cce986733 100644
--- a/panel/io/mime_render.py
+++ b/panel/io/mime_render.py
@@ -104,12 +104,11 @@ def write(self, s):
 
 def _convert_expr(expr: ast.Expr) -> ast.Expression:
     """
-    Converts an ast.Expr to and ast.Expression that can be compiled
+    Converts an ast.Expr to an ast.Expression that can be compiled
     and evaled.
     """
-    expr.lineno = 0
-    expr.col_offset = 0
-    return ast.Expression(expr.value, lineno=0, col_offset = 0)
+    expr.lineno, expr.col_offset = 0, 0
+    return ast.Expression(expr.value)
 
 _OUT_BUFFER = []
 
diff --git a/pixi.toml b/pixi.toml
index 71dd382c21..4c8b9524eb 100644
--- a/pixi.toml
+++ b/pixi.toml
@@ -15,7 +15,7 @@ test-310 = ["py310", "test-core", "test", "example", "test-example", "test-unit-
 test-311 = ["py311", "test-core", "test", "example", "test-example", "test-unit-task"]
 test-312 = ["py312", "test-core", "test", "example", "test-example", "test-unit-task"]
 test-ui = ["py312", "test-core", "test", "test-ui"]
-test-core = ["py312", "test-core", "test-unit-task"]
+test-core = ["py313", "test-core", "test-unit-task"]
 test-type = ["py311", "type"]
 docs = ["py311", "example", "doc"]
 build = ["py311", "build"]
@@ -41,15 +41,6 @@ pyviz_comms = ">=2.0.0"
 requests = "*"
 tqdm = ">=4.48.0"
 typing_extensions = "*"
-# Recommended
-holoviews = ">=1.16.0"
-jupyterlab = "*"
-matplotlib-base = "*"
-pillow = "*"
-plotly = ">=4.0"
-# Standard
-watchfiles = "*"
-bokeh_sampledata = "*"
 
 [feature.py310.dependencies]
 python = "3.10.*"
@@ -60,9 +51,23 @@ python = "3.11.*"
 [feature.py312.dependencies]
 python = "3.12.*"
 
+[feature.py313]
+channels = ["pyviz/label/dev", "conda-forge/label/python_rc", "conda-forge"]
+
+[feature.py313.dependencies]
+python = "3.13.*"
+
 [feature.example.dependencies]
+# Optional dependencies - recommended
+holoviews = ">=1.16.0"
+jupyterlab = "*"
+matplotlib-base = "*"
+pillow = "*"
+plotly = ">=4.0"
+# Example dependencies
 aiohttp = "*"
 altair = "*"
+bokeh_sampledata = "*"
 croniter = "*"
 dask-expr = "*"
 datashader = "*"
@@ -109,8 +114,18 @@ pytest-rerunfailures = "*"
 pytest-xdist = "*"
 
 [feature.test.dependencies]
+# Optional dependencies - recommended
+holoviews = ">=1.16.0"
+jupyterlab = "*"
+matplotlib-base = "*"
+pillow = "*"
+plotly = ">=4.0"
+# Optional dependencies - dev
+watchfiles = "*"
+# Test dependencies
 altair = "*"
 anywidget = "*"
+bokeh_sampledata = "*"
 diskcache = "*"
 fastapi = "*"
 folium = "*"
diff --git a/pyproject.toml b/pyproject.toml
index 61404efaca..6e1fd344cf 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -28,6 +28,7 @@ classifiers = [
     "Programming Language :: Python :: 3.10",
     "Programming Language :: Python :: 3.11",
     "Programming Language :: Python :: 3.12",
+    "Programming Language :: Python :: 3.13",
     "Operating System :: OS Independent",
     "Intended Audience :: Developers",
     "Intended Audience :: Science/Research",

From 85e259ed569bf292126b3ccfab11fdb40946216e Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Mon, 23 Sep 2024 09:14:50 +0200
Subject: [PATCH 103/164] Collection of minor fixes for Panel 1.5.1 (#7285)

---
 doc/explanation/api/examples/outliers_declarative.md        | 2 +-
 doc/explanation/comparisons/compare_streamlit.md            | 2 +-
 doc/getting_started/core_concepts.md                        | 2 +-
 doc/how_to/concurrency/manual_threading.md                  | 2 +-
 doc/how_to/custom_components/esm/build.md                   | 4 ++--
 doc/how_to/deployment/pycafe.md                             | 2 +-
 doc/how_to/editor/markdown.md                               | 2 +-
 doc/how_to/editor/vscode_configure.md                       | 2 +-
 doc/how_to/templates/template_arrange.md                    | 2 +-
 doc/how_to/templates/template_modal.md                      | 2 +-
 doc/how_to/templates/template_theme.md                      | 2 +-
 doc/tutorials/basic/develop_notebook.md                     | 2 +-
 doc/tutorials/expert/custom_anywidget_components.md         | 2 +-
 .../reference/custom_components/AnyWidgetComponent.ipynb    | 6 +++---
 examples/reference/custom_components/JSComponent.ipynb      | 4 ++--
 examples/reference/custom_components/ReactComponent.ipynb   | 4 ++--
 panel/__init__.py                                           | 4 ++--
 panel/command/serve.py                                      | 2 +-
 panel/io/reload.py                                          | 2 +-
 19 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/doc/explanation/api/examples/outliers_declarative.md b/doc/explanation/api/examples/outliers_declarative.md
index 8418b2cbac..a51c3069e8 100644
--- a/doc/explanation/api/examples/outliers_declarative.md
+++ b/doc/explanation/api/examples/outliers_declarative.md
@@ -115,7 +115,7 @@ It should look like this:
 If you prefer developing in a Python Script using an editor, you can copy the code into a file `app.py` and serve it.
 
 ```bash
-panel serve app.py --autoreload
+panel serve app.py --dev
 ```
 
 :::
diff --git a/doc/explanation/comparisons/compare_streamlit.md b/doc/explanation/comparisons/compare_streamlit.md
index 66c627323a..a3461753c6 100644
--- a/doc/explanation/comparisons/compare_streamlit.md
+++ b/doc/explanation/comparisons/compare_streamlit.md
@@ -2,7 +2,7 @@
 
 ![Panel Layout Example](https://user-images.githubusercontent.com/42288570/243362603-45ba78a4-d67b-43bc-b3c2-386105fe6ed8.png)
 
-**Streamlit is an alternative** to Panel, Jupyter, Bokeh, and Dash. Like Jupyter, Streamlit provides an interactive, incremental way to build apps. Streamlit works with Python text files written in a separate editor, while Jupyter uses a web-based notebook cell editor. Although a web-based editor simplifies working locally on remote files, using a local Python text file enables users to maximize productivity by choosing their preferred editor. Dash, Panel, and Bokeh also support bare Python files developed in a local editor. Similarly, like Streamlit, they all watch that file and automatically re-run it when changes occur in the editor (e.g., for Panel, launch `panel serve --show --autoreload file.py` to watch the Python file and re-launch the served app on any changes).
+**Streamlit is an alternative** to Panel, Jupyter, Bokeh, and Dash. Like Jupyter, Streamlit provides an interactive, incremental way to build apps. Streamlit works with Python text files written in a separate editor, while Jupyter uses a web-based notebook cell editor. Although a web-based editor simplifies working locally on remote files, using a local Python text file enables users to maximize productivity by choosing their preferred editor. Dash, Panel, and Bokeh also support bare Python files developed in a local editor. Similarly, like Streamlit, they all watch that file and automatically re-run it when changes occur in the editor (e.g., for Panel, launch `panel serve --show --dev file.py` to watch the Python file and re-launch the served app on any changes).
 
 A key difference with Streamlit is that **the entire Python source file is effectively re-run *every time a widget changes value***, preventing confusing out-of-order execution of notebook cells and simplifying reasoning about state. However, this approach necessitates making all lengthy computations cacheable, which is not always straightforward and can introduce complexities in state management. Moreover, similar to Dash's lack of server-side state, Streamlit's approach can make it challenging to generate responsive apps for complex situations requiring a precise mapping between a widget event and specific Python code. In contrast, Panel offers better support for fully reactive applications, where each widget or plot component is explicitly tied to computation, re-running only the necessary code for that action. Consequently, Panel can support larger, more complex applications, allowing specific behaviors to be implemented and delivered independently.
 
diff --git a/doc/getting_started/core_concepts.md b/doc/getting_started/core_concepts.md
index b2f4d9ec63..5f1eb3726a 100644
--- a/doc/getting_started/core_concepts.md
+++ b/doc/getting_started/core_concepts.md
@@ -55,7 +55,7 @@ Upon running that command, Panel launches a server that serves your app, opens a
 <img src="https://assets.holoviz.org/panel/gifs/vscode_autoreload.gif" style="margin-left: auto; margin-right: auto; display: block;"></img>
 
 ```{tip}
-We recommend installing [`watchfiles`](https://watchfiles.helpmanual.io) to get the best user experience when using `--autoreload`.
+We recommend installing [`watchfiles`](https://watchfiles.helpmanual.io) to get the best user experience when using `--dev` flag.
 ```
 
 ```{tip}
diff --git a/doc/how_to/concurrency/manual_threading.md b/doc/how_to/concurrency/manual_threading.md
index ef915b6345..613e8dc7f2 100644
--- a/doc/how_to/concurrency/manual_threading.md
+++ b/doc/how_to/concurrency/manual_threading.md
@@ -140,7 +140,7 @@ To use threading efficiently:
 
 When we need to share data periodically across all sessions, it is often inefficient to fetch and process this data separately for each session.
 
-Instead, we can utilize a single thread. When initiating global threads, it's crucial to avoid starting them multiple times, especially in sessions or modules subject to `--autoreload`. To circumvent this issue, we can globally share a worker or thread through the Panel cache (`pn.state.cache`).
+Instead, we can utilize a single thread. When initiating global threads, it's crucial to avoid starting them multiple times, especially in sessions or modules subject to the `--dev` flag. To circumvent this issue, we can globally share a worker or thread through the Panel cache (`pn.state.cache`).
 
 Let's create a `GlobalTaskRunner` that accepts a function (`worker`) and executes it repeatedly, pausing for `sleep` seconds between each execution.
 
diff --git a/doc/how_to/custom_components/esm/build.md b/doc/how_to/custom_components/esm/build.md
index 6e0241fae4..92f85148e0 100644
--- a/doc/how_to/custom_components/esm/build.md
+++ b/doc/how_to/custom_components/esm/build.md
@@ -216,7 +216,7 @@ esbuild output:
 ⚡ Done in 9ms
 ```
 
-The compiled JavaScript file will be automatically loaded if it remains alongside the component. If you rename the component or modify its code or `_importmap`, you must recompile the component. For ongoing development, consider using the `--autoreload` option to ignore the compiled file and automatically reload the development version when it changes.
+The compiled JavaScript file will be automatically loaded if it remains alongside the component. If you rename the component or modify its code or `_importmap`, you must recompile the component. For ongoing development, consider using the `--dev` option to ignore the compiled file and automatically reload the development version when it changes.
 
 #### Compilation Steps
 
@@ -280,7 +280,7 @@ custom_build_dir/
 └── <OtherComponent>.js
 ```
 
-The compiled JS file will now be loaded automatically as long as it remains alongside the component. If you rename the component you will have to delete and recompile the JS file. If you make changes to the code or `_importmap` you also have to recompile. During development we recommend using `--autoreload`, which ignores the compiled file.
+The compiled JS file will now be loaded automatically as long as it remains alongside the component. If you rename the component you will have to delete and recompile the JS file. If you make changes to the code or `_importmap` you also have to recompile. During development we recommend using `--dev`, which ignores the compiled file.
 
 ```{caution}
 The `panel compile` CLI tool is still very new and experimental. In our testing it was able to compile and bundle most components but there are bound to be corner cases.
diff --git a/doc/how_to/deployment/pycafe.md b/doc/how_to/deployment/pycafe.md
index 171e7e5323..c42999723e 100644
--- a/doc/how_to/deployment/pycafe.md
+++ b/doc/how_to/deployment/pycafe.md
@@ -48,7 +48,7 @@ pn.template.FastListTemplate(
 
 After updating the file, save it, and the app will reload instantly.
 
-<iframe src="https://py.cafe/app/panel-org/pycafe-reference" title="PyCafe Reference Example" frameborder="0" style="width: 100%; height: 500px;"></iframe>
+<iframe src="https://py.cafe/embed/panel-org/pycafe-reference?theme=light&linkToApp=false" title="PyCafe Reference Example" frameborder="0" style="width: 100%; height: 500px;"></iframe>
 
 Finally you can click **PUSH** to persist your app and click **SHARE** to share it with the world.
 
diff --git a/doc/how_to/editor/markdown.md b/doc/how_to/editor/markdown.md
index 31ad86efda..33e665f428 100644
--- a/doc/how_to/editor/markdown.md
+++ b/doc/how_to/editor/markdown.md
@@ -87,7 +87,7 @@ pn.Row(widget, pn.bind(hello_world, widget)).servable()
 Then, from the command line, launch a server with:
 
 ```bash
-panel serve app.md --show --autoreload
+panel serve app.md --show --dev
 ```
 
 ![The rendered Panel application written as a Markdown file.](../../_static/images/markdown_sample.png)
diff --git a/doc/how_to/editor/vscode_configure.md b/doc/how_to/editor/vscode_configure.md
index abc00bd2d5..1f3bc609f5 100644
--- a/doc/how_to/editor/vscode_configure.md
+++ b/doc/how_to/editor/vscode_configure.md
@@ -173,7 +173,7 @@ To speed up your workflow we recommend configuring a keyboard short cut to `pane
     {
         "key": "ctrl+shift+space",
         "command": "workbench.action.terminal.sendSequence",
-        "args": { "text": "panel serve ${relativeFile} --autoreload --show\u000D" }
+        "args": { "text": "panel serve ${relativeFile} --dev --show\u000D" }
     }
 ]
 ```
diff --git a/doc/how_to/templates/template_arrange.md b/doc/how_to/templates/template_arrange.md
index 74b2ffd0fc..4a9933ac36 100644
--- a/doc/how_to/templates/template_arrange.md
+++ b/doc/how_to/templates/template_arrange.md
@@ -48,7 +48,7 @@ template.servable();
 Now, we can activate this app on the command line:
 
 ``` bash
-panel serve app.py --show --autoreload
+panel serve app.py --show --dev
 ```
 
 <img src="../../_static/images/template_arrange.png" alt="example panel app">
diff --git a/doc/how_to/templates/template_modal.md b/doc/how_to/templates/template_modal.md
index 9b2e481cbe..8c0ed45f54 100644
--- a/doc/how_to/templates/template_modal.md
+++ b/doc/how_to/templates/template_modal.md
@@ -61,7 +61,7 @@ template.servable();
 Now we can activate this app on the command line. When we click the button in the sidebar, we see the modal pop up:
 
 ```bash
-panel serve app.py --show --autoreload
+panel serve app.py --show --dev
 ```
 
 <img src="../../_static/images/template_arrange_modal.png" alt="example panel app with an active modal">
diff --git a/doc/how_to/templates/template_theme.md b/doc/how_to/templates/template_theme.md
index 0319853867..42a308d5da 100644
--- a/doc/how_to/templates/template_theme.md
+++ b/doc/how_to/templates/template_theme.md
@@ -67,7 +67,7 @@ template.servable();
 Now, we can activate this app on the command line:
 
 ``` bash
-panel serve app.py --show --autoreload
+panel serve app.py --show --dev
 ```
 
 <img src="../../_static/images/template_mat_dark.png" alt="dark themed panel app">
diff --git a/doc/tutorials/basic/develop_notebook.md b/doc/tutorials/basic/develop_notebook.md
index 6328c8dc80..588bfddd4c 100644
--- a/doc/tutorials/basic/develop_notebook.md
+++ b/doc/tutorials/basic/develop_notebook.md
@@ -67,7 +67,7 @@ The video shows how a larger app could be developed.
 Alternatively, you can serve your notebook externally with autoreload using the following command:
 
 ```bash
-panel serve app.ipynb --autoreload
+panel serve app.ipynb --dev
 ```
 
 This method provides a faster alternative to the *Jupyter Panel Preview*. Check out the video for inspiration.
diff --git a/doc/tutorials/expert/custom_anywidget_components.md b/doc/tutorials/expert/custom_anywidget_components.md
index 0e4c7f91a2..18cba7c837 100644
--- a/doc/tutorials/expert/custom_anywidget_components.md
+++ b/doc/tutorials/expert/custom_anywidget_components.md
@@ -202,7 +202,7 @@ Create a file named `mario_button.css`:
 To serve the application, run the following command in your terminal:
 
 ```sh
-panel serve mario_button.py --autoreload
+panel serve mario_button.py --dev
 ```
 
 This command will start a Panel server and automatically reload changes as you edit the files.
diff --git a/examples/reference/custom_components/AnyWidgetComponent.ipynb b/examples/reference/custom_components/AnyWidgetComponent.ipynb
index 8ca0f1a7c9..fe82b77d48 100644
--- a/examples/reference/custom_components/AnyWidgetComponent.ipynb
+++ b/examples/reference/custom_components/AnyWidgetComponent.ipynb
@@ -17,9 +17,9 @@
    "id": "9908a714-692d-4513-aca8-b251a627cae4",
    "metadata": {},
    "source": [
-    "Panel's `AnyWidgetComponent` class simplifies the creation of custom Panel components using the [`AnyWidget`](https://anywidget.dev/) JavaScript API.\n",
+    "Panel's `AnyWidgetComponent` class simplifies the creation of custom Panel components using the [AnyWidget Front End Module (AFM) specification](https://anywidget.dev/en/afm/) maintained by [`AnyWidget`](https://anywidget.dev/).\n",
     "\n",
-    "This allows the Panel and Jupyter communities to collaborate and share JavaScript code for widgets."
+    "This allows the Panel, Jupyter and other communities to collaborate and share JavaScript code for widgets."
    ]
   },
   {
@@ -73,7 +73,7 @@
     "\n",
     "### AnyWidgetComponent Attributes\n",
     "\n",
-    "- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `default` object or function that returns an object. The object should contain a `render` function and optionally an `initialize` function. In a development environment such as a notebook or when using `--autoreload`, the module will automatically reload upon saving changes.\n",
+    "- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `default` object or function that returns an object. The object should contain a `render` function and optionally an `initialize` function. In a development environment such as a notebook or when using `--dev` flag, the module will automatically reload upon saving changes.\n",
     "- **`_importmap`** (dict | None): This optional dictionary defines an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap), allowing you to customize how module specifiers are resolved.\n",
     "- **`_stylesheets`** (list[str] | list[PurePath]): This optional attribute accepts a list of CSS strings or paths to CSS files. It supports automatic reloading in development environments. It works similarly to the `AnyWidget` `_css` attribute.\n",
     "\n",
diff --git a/examples/reference/custom_components/JSComponent.ipynb b/examples/reference/custom_components/JSComponent.ipynb
index 9fcf235271..bff646c04c 100644
--- a/examples/reference/custom_components/JSComponent.ipynb
+++ b/examples/reference/custom_components/JSComponent.ipynb
@@ -71,7 +71,7 @@
     "\n",
     "### JSComponent Attributes\n",
     "\n",
-    "- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an  [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `render` function which returns the HTML element to display. In a development environment such as a notebook or when using `--autoreload`, the module will automatically reload upon saving changes.\n",
+    "- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an  [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `render` function which returns the HTML element to display. In a development environment such as a notebook or when using `--dev` flag, the module will automatically reload upon saving changes.\n",
     "- **`_importmap`** (dict | None): This optional dictionary defines an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap), allowing you to customize how module specifiers are resolved.\n",
     "- **`_stylesheets`** (optional list of strings): This optional attribute accepts a list of CSS strings or paths to CSS files. It supports automatic reloading in development environments.\n",
     "\n",
@@ -431,7 +431,7 @@
     "}\n",
     "```\n",
     "\n",
-    "Serve the app with `panel serve counter_button.py --autoreload`.\n",
+    "Serve the app with `panel serve counter_button.py --dev`.\n",
     "\n",
     "You can now edit the JavaScript or CSS file, and the changes will be automatically reloaded.\n",
     "\n",
diff --git a/examples/reference/custom_components/ReactComponent.ipynb b/examples/reference/custom_components/ReactComponent.ipynb
index e5f9912a3b..8fcebc277a 100644
--- a/examples/reference/custom_components/ReactComponent.ipynb
+++ b/examples/reference/custom_components/ReactComponent.ipynb
@@ -68,7 +68,7 @@
     "\n",
     "### ReactComponent Attributes\n",
     "\n",
-    "- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `render` function which returns the HTML element to display. In a development environment such as a notebook or when using `--autoreload`, the module will automatically reload upon saving changes. You can use [`JSX`](https://react.dev/learn/writing-markup-with-jsx) and [`TypeScript`](https://www.typescriptlang.org/). The `_esm` script is transpiled on the fly using [Sucrase](https://sucrase.io/). The global namespace contains a `React` object that provides access to React hooks.\n",
+    "- **`_esm`** (str | PurePath): This attribute accepts either a string or a path that points to an [ECMAScript module](https://nodejs.org/api/esm.html#modules-ecmascript-modules). The ECMAScript module should export a `render` function which returns the HTML element to display. In a development environment such as a notebook or when using `--dev`, the module will automatically reload upon saving changes. You can use [`JSX`](https://react.dev/learn/writing-markup-with-jsx) and [`TypeScript`](https://www.typescriptlang.org/). The `_esm` script is transpiled on the fly using [Sucrase](https://sucrase.io/). The global namespace contains a `React` object that provides access to React hooks.\n",
     "- **`_importmap`** (dict | None): This optional dictionary defines an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap), allowing you to customize how module specifiers are resolved.\n",
     "- **`_stylesheets`** (List[str | PurePath] | None): This optional attribute accepts a list of CSS strings or paths to CSS files. It supports automatic reloading in development environments.\n",
     "\n",
@@ -429,7 +429,7 @@
     "}\n",
     "```\n",
     "\n",
-    "Serve the app with `panel serve counter_button.py --autoreload`.\n",
+    "Serve the app with `panel serve counter_button.py --dev`.\n",
     "\n",
     "You can now edit the JSX or CSS file, and the changes will be automatically reloaded.\n",
     "\n",
diff --git a/panel/__init__.py b/panel/__init__.py
index f07dd0e957..8b48bb58ec 100644
--- a/panel/__init__.py
+++ b/panel/__init__.py
@@ -27,11 +27,11 @@
 
 - Run your app
 
-$ panel serve my_script.py --autoreload --show
+$ panel serve my_script.py --dev --show
 
 or
 
-$ panel serve my_notebook.ipynb --autoreload --show
+$ panel serve my_notebook.ipynb --dev --show
 
 The app will be available in your browser!
 
diff --git a/panel/command/serve.py b/panel/command/serve.py
index d50fee3d20..051ddc4007 100644
--- a/panel/command/serve.py
+++ b/panel/command/serve.py
@@ -238,7 +238,7 @@ class Serve(_BkServe):
         )),
         ('--autoreload', dict(
             action  = 'store_true',
-            help    = "Whether to autoreload source when script changes."
+            help    = "Whether to autoreload source when script changes. We recommend using --dev instead."
         )),
         ('--num-threads', dict(
             action  = 'store',
diff --git a/panel/io/reload.py b/panel/io/reload.py
index c3100f5637..8aee616919 100644
--- a/panel/io/reload.py
+++ b/panel/io/reload.py
@@ -132,7 +132,7 @@ async def setup_autoreload_watcher(stop_event=None):
         import watchfiles  # noqa
     except Exception:
         warnings.warn(
-            '--autoreload functionality now depends on the watchfiles '
+            '--dev and --autoreload functionality now depends on the watchfiles '
             'library. In future versions autoreload will not work without '
             'watchfiles being installed. Since it provides a much better '
             'user experience consider installing it today.', FutureWarning,

From 3f4d443cd30f06779d991fb0cd11b8682a32f472 Mon Sep 17 00:00:00 2001
From: Maxime Liquet <35924738+maximlt@users.noreply.github.com>
Date: Mon, 23 Sep 2024 09:26:48 +0200
Subject: [PATCH 104/164] Timepicker: stricter parameters and minor doc changes
 (#7308)

---
 examples/reference/widgets/TimePicker.ipynb | 14 +++++++-------
 panel/widgets/input.py                      |  8 ++++----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/examples/reference/widgets/TimePicker.ipynb b/examples/reference/widgets/TimePicker.ipynb
index 4938842c8a..e8be1ad923 100644
--- a/examples/reference/widgets/TimePicker.ipynb
+++ b/examples/reference/widgets/TimePicker.ipynb
@@ -30,6 +30,12 @@
     "* **``start``** (str | datetime.time): Inclusive lower bound of the allowed time selection\n",
     "* **``end``** (str | datetime.time): Inclusive upper bound of the allowed time selection\n",
     "\n",
+    "##### Display\n",
+    "\n",
+    "* **``disabled``** (boolean): Whether the widget is editable\n",
+    "* **``name``** (str): The title of the widget\n",
+    "* **``format``** (str): Formatting specification for the display of the picked date.\n",
+    "\n",
     "    ```\n",
     "    +---+------------------------------------+------------+\n",
     "    | H | Hours (24 hours)                   | 00 to 23   |\n",
@@ -44,17 +50,11 @@
     "    See also https://flatpickr.js.org/formatting/#date-formatting-tokens.\n",
     "\n",
     "\n",
-    "\n",
-    "##### Display\n",
-    "\n",
-    "* **``disabled``** (boolean): Whether the widget is editable\n",
-    "* **``name``** (str): The title of the widget\n",
-    "* **``format``** (str): Formatting specification for the display of the picked date.\n",
     "* **``hour_increment``** (int): Defines the granularity of hour value increments in the UI. Default is 1.\n",
     "* **``minute_increment``** (int): Defines the granularity of minute value increments in the UI. Default is 1.\n",
     "* **``second_increment``** (int): Defines the granularity of second value increments in the UI. Default is 1.\n",
     "* **``seconds``** (bool): Allows to select seconds. By default, only hours and minutes are selectable, and AM/PM depending on the `clock` option. Default is False.\n",
-    "* **``clock``** (bool): Whether to use 12 hour or 24 hour clock.\n",
+    "* **``clock``** (str): Whether to use 12 hour or 24 hour clock. Default is `'12h'`.\n",
     "___"
    ]
   },
diff --git a/panel/widgets/input.py b/panel/widgets/input.py
index b088a3dfa9..bcf884579a 100644
--- a/panel/widgets/input.py
+++ b/panel/widgets/input.py
@@ -813,15 +813,15 @@ def _deserialize_value(self, value):
 
 class _TimeCommon(Widget):
 
-    hour_increment = param.Integer(default=1, doc="""
+    hour_increment = param.Integer(default=1, bounds=(1, None), doc="""
     Defines the granularity of hour value increments in the UI.
     """)
 
-    minute_increment = param.Integer(default=1, doc="""
+    minute_increment = param.Integer(default=1, bounds=(1, None), doc="""
     Defines the granularity of minute value increments in the UI.
     """)
 
-    second_increment = param.Integer(default=1, doc="""
+    second_increment = param.Integer(default=1, bounds=(1, None), doc="""
     Defines the granularity of second value increments in the UI.
     """)
 
@@ -830,7 +830,7 @@ class _TimeCommon(Widget):
     selectable, and AM/PM depending on the `clock` option.
     """)
 
-    clock = param.String(default='12h', doc="""
+    clock = param.Selector(default='12h', objects=['12h', '24h'], doc="""
         Whether to use 12 hour or 24 hour clock.""")
 
     __abstract = True

From fbb540dc3825e80537408d501db09044a89940f1 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 23 Sep 2024 14:56:15 +0200
Subject: [PATCH 105/164] Ensure Tabulator selection consistency when
 pagination='local' (#7304)

---
 panel/models/tabulator.ts          |  99 ++++++++++---------
 panel/models/util.ts               |  11 +++
 panel/tests/conftest.py            |  16 ++-
 panel/tests/widgets/test_tables.py | 153 ++++++++++++++++++++++-------
 panel/widgets/tables.py            |  27 +++--
 5 files changed, 215 insertions(+), 91 deletions(-)

diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts
index 33ca68b32f..15153e41cc 100644
--- a/panel/models/tabulator.ts
+++ b/panel/models/tabulator.ts
@@ -15,6 +15,7 @@ import {debounce} from "debounce"
 import {comm_settings} from "./comm_manager"
 import {transform_cds_to_records} from "./data"
 import {HTMLBox, HTMLBoxView} from "./layout"
+import {schedule_when} from "./util"
 
 export class TableEditEvent extends ModelEvent {
   constructor(readonly column: string, readonly row: number, readonly pre: boolean) {
@@ -391,7 +392,7 @@ export class DataTabulatorView extends HTMLBoxView {
       this.tabulator.download(ftype, this.model.filename)
     })
 
-    this.on_change(children, () => this.renderChildren())
+    this.on_change(children, () => this.renderChildren(false))
 
     this.on_change(expanded, () => {
       // The first cell is the cell of the frozen _index column.
@@ -501,25 +502,27 @@ export class DataTabulatorView extends HTMLBoxView {
     }
     if (rows && (this.tabulator.rowManager.renderer != null)) {
       this.tabulator.rowManager.redraw(true)
-      this.renderChildren()
       this.setStyles()
     }
     this._redrawing = false
     this._restore_scroll = true
   }
 
+  get is_drawing(): boolean {
+    return this._building || this._redrawing || !this.root.has_finished()
+  }
+
   override after_layout(): void {
     super.after_layout()
-    const finished = this.root.has_finished()
-    if (this.tabulator != null && this._initializing && !this._building && finished) {
+    if (this.tabulator != null && this._initializing && !this.is_drawing) {
       this._initializing = false
-      this.redraw()
+      this._resize_redraw()
     }
   }
 
   override after_resize(): void {
     super.after_resize()
-    if (!this._is_scrolling && !this._redrawing) {
+    if (!this._is_scrolling && !this._initializing && !this.is_drawing) {
       this._debounced_redraw()
     }
   }
@@ -550,6 +553,7 @@ export class DataTabulatorView extends HTMLBoxView {
     }
     super.render()
     this._initializing = true
+    this._building = true
     const container = div({style: {display: "contents"}})
     const el = div({style: {width: "100%", height: "100%", visibility: "hidden"}})
     this.container = el
@@ -602,7 +606,9 @@ export class DataTabulatorView extends HTMLBoxView {
     }, 50, false))
 
     // Sync state with model
-    this.tabulator.on("rowSelectionChanged", (data: any, rows: any, selected: any, deselected: any) => this.rowSelectionChanged(data, rows, selected, deselected))
+    this.tabulator.on("rowSelectionChanged", (data: any, rows: any, selected: any, deselected: any) => {
+      this.rowSelectionChanged(data, rows, selected, deselected)
+    })
     this.tabulator.on("rowClick", (e: any, row: any) => this.rowClicked(e, row))
     this.tabulator.on("cellEdited", (cell: any) => this.cellEdited(cell))
     this.tabulator.on("dataFiltering", (filters: any) => {
@@ -694,19 +700,13 @@ export class DataTabulatorView extends HTMLBoxView {
       this.tabulator.setPage(this.model.page)
     }
     this._building = false
-    if (this._initializing && this.root.has_finished()) {
+    schedule_when(() => {
+      const initializing = this._initializing
       this._initializing = false
-      this.redraw()
-    } else if (!this.root.has_finished()) {
-      const finalize = () => {
-        if (this.root.has_finished()) {
-          this._initializing = false
-        } else {
-          setTimeout(finalize, 10)
-        }
+      if (initializing) {
+        this._resize_redraw()
       }
-      setTimeout(finalize, 10)
-    }
+    }, () => this.root.has_finished())
   }
 
   requestPage(page: number, sorters: any[]): Promise<void> {
@@ -772,21 +772,13 @@ export class DataTabulatorView extends HTMLBoxView {
       frozenRows: (row: any) => {
         return (this.model.frozen_rows.length > 0) ? this.model.frozen_rows.includes(row._row.data._index) : false
       },
+      rowFormatter: (row: any) => this._render_row(row),
     }
     if (this.model.pagination === "remote") {
       configuration.ajaxURL = "http://panel.pyviz.org"
       configuration.sortMode = "remote"
     }
-    const cds: any = this.model.source
-    let data: any[]
-    if (cds === null || (cds.columns().length === 0)) {
-      data = []
-    } else {
-      data = transform_cds_to_records(cds, true)
-    }
-    if (configuration.dataTree) {
-      data = group_data(data, this.model.columns, this.model.indexes, this.model.aggregators)
-    }
+    const data = this.getData()
     return {
       ...configuration,
       data,
@@ -811,19 +803,27 @@ export class DataTabulatorView extends HTMLBoxView {
     return children
   }
 
-  renderChildren(): void {
+  get row_index(): Map<number, any> {
+    const rows = this.tabulator.getRows()
+    const lookup = new Map()
+    for (const row of rows) {
+      const index = row._row?.data._index
+      if (index != null) {
+        lookup.set(index, row)
+      }
+    }
+    return lookup
+  }
+
+  renderChildren(all: boolean = true): void {
     new Promise(async (resolve: any) => {
-      const new_children = await this.build_child_views()
+      let new_children = await this.build_child_views()
+      if (all) {
+        new_children = this.child_views
+      }
       resolve(new_children)
     }).then((new_children) => {
-      const rows = this.tabulator.getRows()
-      const lookup = new Map()
-      for (const row of rows) {
-        const index = row._row?.data._index
-        if (index != null) {
-          lookup.set(index, row)
-        }
-      }
+      const lookup = this.row_index
       for (const index of this.model.expanded) {
         const model = this.get_child(index)
         const row = lookup.get(index)
@@ -859,14 +859,19 @@ export class DataTabulatorView extends HTMLBoxView {
     let viewEl
     if (prev_child != null && prev_child.className == "row-content") {
       viewEl = prev_child
+      if (viewEl.children.length && viewEl.children[0] === view.el) {
+        return
+      }
     } else {
       viewEl = div({class: "row-content", style: {background_color: bg, margin_left: neg_margin, max_width: "100%", overflow_x: "hidden"}})
+      rowEl.appendChild(viewEl)
     }
     viewEl.appendChild(view.el)
-    rowEl.appendChild(viewEl)
-    if (!view.has_finished() && render) {
-      view.render()
-      view.after_render()
+    if (render) {
+      schedule_when(() => {
+        view.render()
+        view.after_render()
+      }, () => this.root.has_finished())
     }
     if (resize) {
       this._update_children()
@@ -914,7 +919,13 @@ export class DataTabulatorView extends HTMLBoxView {
   }
 
   getData(): any[] {
-    let data = transform_cds_to_records(this.model.source, true)
+    const cds = this.model.source
+    let data: any[]
+    if (cds === null || (cds.columns().length === 0)) {
+      data = []
+    } else {
+      data = transform_cds_to_records(cds, true)
+    }
     if (this.model.configuration.dataTree) {
       data = group_data(data, this.model.columns, this.model.indexes, this.model.aggregators)
     }
@@ -1261,7 +1272,6 @@ export class DataTabulatorView extends HTMLBoxView {
   setPage(): void {
     this.tabulator.setPage(Math.min(this.model.max_page, this.model.page))
     if (this.model.pagination === "local") {
-      this.renderChildren()
       this.setStyles()
     }
   }
@@ -1269,7 +1279,6 @@ export class DataTabulatorView extends HTMLBoxView {
   setPageSize(): void {
     this.tabulator.setPageSize(this.model.page_size)
     if (this.model.pagination === "local") {
-      this.renderChildren()
       this.setStyles()
     }
   }
diff --git a/panel/models/util.ts b/panel/models/util.ts
index 2697a747b2..50a70eba6e 100644
--- a/panel/models/util.ts
+++ b/panel/models/util.ts
@@ -147,3 +147,14 @@ export function find_attributes(text: string, obj: string, ignored: string[]) {
 
   return uniq(matches)
 }
+
+export function schedule_when(func: () => void, predicate: () => boolean, timeout: number = 10): void {
+  const scheduled = () => {
+    if (predicate()) {
+      func()
+    } else {
+      setTimeout(scheduled, timeout)
+    }
+  }
+  scheduled()
+}
diff --git a/panel/tests/conftest.py b/panel/tests/conftest.py
index 3235a4ae96..0842e03aa3 100644
--- a/panel/tests/conftest.py
+++ b/panel/tests/conftest.py
@@ -144,7 +144,8 @@ def pytest_addoption(parser):
     for marker, info in optional_markers.items():
         parser.addoption(f"--{marker}", action="store_true",
                          default=False, help=info['help'])
-
+    parser.addoption('--repeat', action='store',
+        help='Number of times to repeat each test')
 
 def pytest_configure(config):
     for marker, info in optional_markers.items():
@@ -155,6 +156,19 @@ def pytest_configure(config):
 
     config.addinivalue_line("markers", "internet: mark test as requiring an internet connection")
 
+def pytest_generate_tests(metafunc):
+    if metafunc.config.option.repeat is not None:
+        count = int(metafunc.config.option.repeat)
+
+        # We're going to duplicate these tests by parametrizing them,
+        # which requires that each test has a fixture to accept the parameter.
+        # We can add a new fixture like so:
+        metafunc.fixturenames.append('tmp_ct')
+
+        # Now we parametrize. This is what happens when we do e.g.,
+        # @pytest.mark.parametrize('tmp_ct', range(count))
+        # def test_foo(): pass
+        metafunc.parametrize('tmp_ct', range(count))
 
 def pytest_collection_modifyitems(config, items):
     skipped, selected = [], []
diff --git a/panel/tests/widgets/test_tables.py b/panel/tests/widgets/test_tables.py
index 44d3baf3cd..661b7f382f 100644
--- a/panel/tests/widgets/test_tables.py
+++ b/panel/tests/widgets/test_tables.py
@@ -429,15 +429,14 @@ def test_tabulator_remote_sorted_paginated_expanded_content(document, comm):
     assert row0.text == "&lt;pre&gt;2.0&lt;/pre&gt;"
 
 
-@pytest.mark.parametrize('pagination', ['local', 'remote', None])
-def test_tabulator_filtered_expanded_content(document, comm, pagination):
+def test_tabulator_filtered_expanded_content_remote_pagination(document, comm):
     df = makeMixedDataFrame()
 
     table = Tabulator(
         df,
         expanded=[0, 1, 2, 3],
         filters=[{'field': 'B', 'sorter': 'number', 'type': '=', 'value': '1.0'}],
-        pagination=pagination,
+        pagination='remote',
         row_content=lambda r: r.A,
     )
 
@@ -470,6 +469,59 @@ def test_tabulator_filtered_expanded_content(document, comm, pagination):
     assert row0.text == "&lt;pre&gt;0.0&lt;/pre&gt;"
 
 
+@pytest.mark.parametrize('pagination', ['local', None])
+def test_tabulator_filtered_expanded_content(document, comm, pagination):
+    df = makeMixedDataFrame()
+
+    table = Tabulator(
+        df,
+        expanded=[0, 1, 2, 3],
+        filters=[{'field': 'B', 'sorter': 'number', 'type': '=', 'value': '1.0'}],
+        pagination=pagination,
+        row_content=lambda r: r.A,
+    )
+
+    model = table.get_root(document, comm)
+
+    assert len(model.children) == 4
+
+    assert 0 in model.children
+    row0 = model.children[0]
+    assert row0.text == "&lt;pre&gt;0.0&lt;/pre&gt;"
+
+    assert 1 in model.children
+    row1 = model.children[1]
+    assert row1.text == "&lt;pre&gt;1.0&lt;/pre&gt;"
+
+    assert 2 in model.children
+    row2 = model.children[2]
+    assert row2.text == "&lt;pre&gt;2.0&lt;/pre&gt;"
+
+    assert 3 in model.children
+    row3 = model.children[3]
+    assert row3.text == "&lt;pre&gt;3.0&lt;/pre&gt;"
+
+    model.expanded = [1]
+    assert table.expanded == [1]
+
+    table.filters = [{'field': 'B', 'sorter': 'number', 'type': '=', 'value': '0'}]
+
+    assert model.expanded == [1]
+    assert table.expanded == [1]
+
+    table.expanded = [0, 1]
+
+    assert len(model.children) == 2
+
+    assert 0 in model.children
+    row0 = model.children[0]
+    assert row0.text == "&lt;pre&gt;0.0&lt;/pre&gt;"
+
+    assert 1 in model.children
+    row1 = model.children[1]
+    assert row1.text == "&lt;pre&gt;1.0&lt;/pre&gt;"
+
+
 def test_tabulator_index_column(document, comm):
     df = pd.DataFrame({
         'int': [1, 2, 3],
@@ -1428,11 +1480,15 @@ def test_tabulator_patch_with_filters(document, comm):
                       dtype='datetime64[ns]')
     }
     expected_src = {
-        'index': np.array([3]),
-        'A': np.array([3]),
-        'B': np.array([1]),
-        'C': np.array(['foo4']),
-        'D': np.array(['2009-01-06T00:00:00.000000000'],
+        'index': np.array([0, 1, 2, 3, 4]),
+        'A': np.array([2., 1., 2., 3., 1.]),
+        'B': np.array([0., 1., 0., 1., 0.]),
+        'C': np.array(['foo0', 'foo2', 'foo3', 'foo4', 'foo5']),
+        'D': np.array(['2009-01-01T00:00:00.000000000',
+                       '2009-01-02T00:00:00.000000000',
+                       '2009-01-05T00:00:00.000000000',
+                       '2009-01-06T00:00:00.000000000',
+                       '2009-01-07T00:00:00.000000000'],
                       dtype='datetime64[ns]').astype(np.int64) / 10e5
     }
     for col, values in model.source.data.items():
@@ -1723,9 +1779,10 @@ def test_tabulator_stream_dataframe(document, comm):
     for col, values in model.source.data.items():
         np.testing.assert_array_equal(values, expected[col])
 
-def test_tabulator_constant_scalar_filter_client_side(document, comm):
+@pytest.mark.parametrize('pagination', ['local', 'remote', None])
+def test_tabulator_constant_scalar_filter_client_side(document, comm, pagination):
     df = makeMixedDataFrame()
-    table = Tabulator(df)
+    table = Tabulator(df, pagination=pagination)
 
     table.filters = [{'field': 'C', 'type': '=', 'value': 'foo3'}]
 
@@ -1736,11 +1793,14 @@ def test_tabulator_constant_scalar_filter_client_side(document, comm):
         'D': np.array(['2009-01-05T00:00:00.000000000'],
                       dtype='datetime64[ns]')
     }, index=[2])
-    pd.testing.assert_frame_equal(table._processed, expected)
+    pd.testing.assert_frame_equal(
+        table._processed, expected if pagination == 'remote' else df
+    )
 
-def test_tabulator_constant_scalar_filter_on_index_client_side(document, comm):
+@pytest.mark.parametrize('pagination', ['local', 'remote', None])
+def test_tabulator_constant_scalar_filter_on_index_client_side(document, comm, pagination):
     df = makeMixedDataFrame()
-    table = Tabulator(df)
+    table = Tabulator(df, pagination=pagination)
 
     table.filters = [{'field': 'index', 'sorter': 'number', 'type': '=', 'value': 2}]
 
@@ -1751,11 +1811,14 @@ def test_tabulator_constant_scalar_filter_on_index_client_side(document, comm):
         'D': np.array(['2009-01-05T00:00:00.000000000'],
                       dtype='datetime64[ns]')
     }, index=[2])
-    pd.testing.assert_frame_equal(table._processed, expected)
+    pd.testing.assert_frame_equal(
+        table._processed, expected if pagination == 'remote' else df
+    )
 
-def test_tabulator_constant_scalar_filter_on_multi_index_client_side(document, comm):
+@pytest.mark.parametrize('pagination', ['local', 'remote', None])
+def test_tabulator_constant_scalar_filter_on_multi_index_client_side(document, comm, pagination):
     df = makeMixedDataFrame()
-    table = Tabulator(df.set_index(['A', 'C']))
+    table = Tabulator(df.set_index(['A', 'C']), pagination=pagination)
 
     table.filters = [
         {'field': 'A', 'sorter': 'number', 'type': '=', 'value': 2},
@@ -1769,11 +1832,14 @@ def test_tabulator_constant_scalar_filter_on_multi_index_client_side(document, c
         'D': np.array(['2009-01-05T00:00:00.000000000'],
                       dtype='datetime64[ns]')
     })
-    pd.testing.assert_frame_equal(table._processed, expected)
+    pd.testing.assert_frame_equal(
+        table._processed, expected if pagination == 'remote' else df[['A', 'C', 'B', 'D']]
+    )
 
-def test_tabulator_constant_list_filter_client_side(document, comm):
+@pytest.mark.parametrize('pagination', ['local', 'remote', None])
+def test_tabulator_constant_list_filter_client_side(document, comm, pagination):
     df = makeMixedDataFrame()
-    table = Tabulator(df)
+    table = Tabulator(df, pagination=pagination)
 
     table.filters = [{'field': 'C', 'type': 'in', 'value': ['foo3', 'foo5']}]
 
@@ -1785,11 +1851,14 @@ def test_tabulator_constant_list_filter_client_side(document, comm):
                        '2009-01-07T00:00:00.000000000'],
                       dtype='datetime64[ns]')
     }, index=[2, 4])
-    pd.testing.assert_frame_equal(table._processed, expected)
+    pd.testing.assert_frame_equal(
+        table._processed, expected if pagination == 'remote' else df
+    )
 
-def test_tabulator_constant_single_element_list_filter_client_side(document, comm):
+@pytest.mark.parametrize('pagination', ['local', 'remote', None])
+def test_tabulator_constant_single_element_list_filter_client_side(document, comm, pagination):
     df = makeMixedDataFrame()
-    table = Tabulator(df)
+    table = Tabulator(df, pagination=pagination)
 
     table.filters = [{'field': 'C', 'type': 'in', 'value': ['foo3']}]
 
@@ -1800,11 +1869,14 @@ def test_tabulator_constant_single_element_list_filter_client_side(document, com
         'D': np.array(['2009-01-05T00:00:00.000000000'],
                       dtype='datetime64[ns]')
     }, index=[2])
-    pd.testing.assert_frame_equal(table._processed, expected)
+    pd.testing.assert_frame_equal(
+        table._processed, expected if pagination == 'remote' else df
+    )
 
-def test_tabulator_keywords_filter_client_side(document, comm):
+@pytest.mark.parametrize('pagination', ['local', 'remote', None])
+def test_tabulator_keywords_filter_client_side(document, comm, pagination):
     df = makeMixedDataFrame()
-    table = Tabulator(df)
+    table = Tabulator(df, pagination=pagination)
 
     table.filters = [{'field': 'C', 'type': 'keywords', 'value': 'foo3 foo5'}]
 
@@ -1816,11 +1888,18 @@ def test_tabulator_keywords_filter_client_side(document, comm):
                        '2009-01-07T00:00:00.000000000'],
                       dtype='datetime64[ns]')
     }, index=[2, 4])
-    pd.testing.assert_frame_equal(table._processed, expected)
+    pd.testing.assert_frame_equal(
+        table._processed, expected if pagination == 'remote' else df
+    )
 
-def test_tabulator_keywords_match_all_filter_client_side(document, comm):
+@pytest.mark.parametrize('pagination', ['local', 'remote', None])
+def test_tabulator_keywords_match_all_filter_client_side(document, comm, pagination):
     df = makeMixedDataFrame()
-    table = Tabulator(df, header_filters={'C': {'type': 'input', 'func': 'keywords', 'matchAll': True}})
+    table = Tabulator(
+        df,
+        header_filters={'C': {'type': 'input', 'func': 'keywords', 'matchAll': True}},
+        pagination=pagination
+    )
 
     table.filters = [{'field': 'C', 'type': 'keywords', 'value': 'f oo 3'}]
 
@@ -1831,9 +1910,11 @@ def test_tabulator_keywords_match_all_filter_client_side(document, comm):
         'D': np.array(['2009-01-05T00:00:00.000000000'],
                       dtype='datetime64[ns]')
     }, index=[2])
-    pd.testing.assert_frame_equal(table._processed, expected)
+    pd.testing.assert_frame_equal(
+        table._processed, expected if pagination == 'remote' else df
+    )
 
-def test_tabulator_constant_scalar_filter_with_pagination_client_side(document, comm):
+def test_tabulator_constant_scalar_filter_client_side_with_pagination(document, comm):
     df = makeMixedDataFrame()
     table = Tabulator(df, pagination='remote')
 
@@ -1852,7 +1933,7 @@ def test_tabulator_constant_scalar_filter_with_pagination_client_side(document,
     for col, values in model.source.data.items():
         np.testing.assert_array_equal(values, expected[col])
 
-def test_tabulator_constant_scalar_filter_on_index_with_pagination_client_side(document, comm):
+def test_tabulator_constant_scalar_filter_on_index_client_side_with_pagination(document, comm):
     df = makeMixedDataFrame()
     table = Tabulator(df, pagination='remote')
 
@@ -1871,7 +1952,7 @@ def test_tabulator_constant_scalar_filter_on_index_with_pagination_client_side(d
     for col, values in model.source.data.items():
         np.testing.assert_array_equal(values, expected[col])
 
-def test_tabulator_constant_scalar_filter_on_multi_index_with_pagination_client_side(document, comm):
+def test_tabulator_constant_scalar_filter_on_multi_index_client_side_with_pagination(document, comm):
     df = makeMixedDataFrame()
     table = Tabulator(df.set_index(['A', 'C']), pagination='remote')
 
@@ -1893,7 +1974,7 @@ def test_tabulator_constant_scalar_filter_on_multi_index_with_pagination_client_
     for col, values in model.source.data.items():
         np.testing.assert_array_equal(values, expected[col])
 
-def test_tabulator_constant_list_filter_with_pagination_client_side(document, comm):
+def test_tabulator_constant_list_filter_client_side_with_pagination(document, comm):
     df = makeMixedDataFrame()
     table = Tabulator(df, pagination='remote')
 
@@ -1913,8 +1994,7 @@ def test_tabulator_constant_list_filter_with_pagination_client_side(document, co
     for col, values in model.source.data.items():
         np.testing.assert_array_equal(values, expected[col])
 
-
-def test_tabulator_keywords_filter_with_pagination_client_side(document, comm):
+def test_tabulator_keywords_filter_client_side_with_pagination(document, comm):
     df = makeMixedDataFrame()
     table = Tabulator(df, pagination='remote')
 
@@ -1934,8 +2014,7 @@ def test_tabulator_keywords_filter_with_pagination_client_side(document, comm):
     for col, values in model.source.data.items():
         np.testing.assert_array_equal(values, expected[col])
 
-
-def test_tabulator_keywords_match_all_filter_with_pagination_client_side(document, comm):
+def test_tabulator_keywords_match_all_filter_client_side_with_pagination(document, comm):
     df = makeMixedDataFrame()
     table = Tabulator(
         df, header_filters={'C': {'type': 'input', 'func': 'keywords', 'matchAll': True}},
diff --git a/panel/widgets/tables.py b/panel/widgets/tables.py
index ea8b7b9af3..dad733ae6c 100644
--- a/panel/widgets/tables.py
+++ b/panel/widgets/tables.py
@@ -423,7 +423,7 @@ def tabulator_sorter(col):
         df_sorted.drop(columns=['_index_'], inplace=True)
         return df_sorted
 
-    def _filter_dataframe(self, df: pd.DataFrame) -> pd.DataFrame:
+    def _filter_dataframe(self, df: pd.DataFrame, header_filters: bool = True, internal_filters: bool = True) -> pd.DataFrame:
         """
         Filter the DataFrame.
 
@@ -438,7 +438,7 @@ def _filter_dataframe(self, df: pd.DataFrame) -> pd.DataFrame:
             The filtered DataFrame
         """
         filters = []
-        for col_name, filt in self._filters:
+        for col_name, filt in (self._filters if internal_filters else []):
             if col_name is not None and col_name not in df.columns:
                 continue
             if isinstance(filt, (FunctionType, MethodType, partial)):
@@ -477,7 +477,8 @@ def _filter_dataframe(self, df: pd.DataFrame) -> pd.DataFrame:
                                  "tuple or list.")
             filters.append(mask)
 
-        filters.extend(self._get_header_filters(df))
+        if header_filters:
+            filters.extend(self._get_header_filters(df))
 
         if filters:
             mask = filters[0]
@@ -624,8 +625,13 @@ def _get_data(self) -> tuple[pd.DataFrame, DataDict]:
         return self._process_df_and_convert_to_cds(self.value)
 
     def _process_df_and_convert_to_cds(self, df: pd.DataFrame) -> tuple[pd.DataFrame, DataDict]:
+        # By default we potentially have two distinct views of the data
+        # locally we hold the fully filtered data, i.e. with header filters
+        # applied but since header filters are applied on the frontend
+        # we send the unfiltered data
+
         import pandas as pd
-        df = self._filter_dataframe(df)
+        df = self._filter_dataframe(df, header_filters=False)
         if df is None:
             return [], {}
         if isinstance(self.value.index, pd.MultiIndex):
@@ -1337,10 +1343,10 @@ def _process_event(self, event) -> None:
         self._validate_iloc(idx, iloc)
         event.row = iloc
         if event_col not in self.buttons:
-            if event_col not in self.value.columns:
-                event.value = self.value.index[event.row]
-            else:
+            if event_col in self.value.columns:
                 event.value = self.value[event_col].iloc[event.row]
+            else:
+                event.value = self.value.index[event.row]
 
         # Set the old attribute on a table edit event
         if event.event_name == 'table-edit':
@@ -1397,7 +1403,7 @@ def _process_data(self, data):
 
         import pandas as pd
         df = pd.DataFrame(data)
-        filters = self._get_header_filters(df)
+        filters = self._get_header_filters(df) if self.pagination == 'remote' else []
         if filters:
             mask = filters[0]
             for f in filters:
@@ -1414,6 +1420,9 @@ def _process_data(self, data):
     def _get_data(self):
         if self.pagination != 'remote' or self.value is None:
             return super()._get_data()
+
+        # If data is paginated the current view on the frontend
+        # and locally are identical and both paginated
         import pandas as pd
         df = self._filter_dataframe(self.value)
         df = self._sort_df(df)
@@ -1431,6 +1440,7 @@ def _get_data(self):
             indexes = [df.index.name or default_index]
         if len(indexes) > 1:
             page_df = page_df.reset_index()
+            df = df.reset_index()
         data = ColumnDataSource.from_df(page_df).items()
         return df, {k if isinstance(k, str) else str(k): v for k, v in data}
 
@@ -2139,4 +2149,5 @@ def current_view(self) -> pd.DataFrame:
         df = self._processed
         if self.pagination == 'remote':
             return df
+        df = self._filter_dataframe(df, header_filters=True, internal_filters=False)
         return self._sort_df(df)

From ebb040faa9ade57497fe1b894333b2e3c0d43d5a Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 23 Sep 2024 15:15:36 +0200
Subject: [PATCH 106/164] Correctly handle ipv6 localhost in Location (#7316)

---
 panel/io/location.py | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/panel/io/location.py b/panel/io/location.py
index c895897abc..0fcafc4114 100644
--- a/panel/io/location.py
+++ b/panel/io/location.py
@@ -31,8 +31,10 @@ def _get_location_params(protocol: str|None, host: str| None, uri: str| None)->d
     if protocol:
         params['protocol'] = href = f'{protocol}:'
     if host:
-        if host.startswith("::ffff:"):
-            host = host.replace("::ffff:", "")
+        if host.startswith('::ffff:'):
+            host = host.replace('::ffff:', '')
+        elif host == '::1':
+            host = host.replace('::1', 'localhost')
 
         href += f'//{host}'
         if ':' in host:

From 0c83bfb2e1c68d7dd223486b2fa37888f2bbc680 Mon Sep 17 00:00:00 2001
From: Maxime Liquet <35924738+maximlt@users.noreply.github.com>
Date: Mon, 23 Sep 2024 15:16:36 +0200
Subject: [PATCH 107/164] minor changes to Tabulator docs (#7315)

---
 examples/reference/widgets/Tabulator.ipynb | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/reference/widgets/Tabulator.ipynb b/examples/reference/widgets/Tabulator.ipynb
index a95588f737..ab47093d20 100644
--- a/examples/reference/widgets/Tabulator.ipynb
+++ b/examples/reference/widgets/Tabulator.ipynb
@@ -75,7 +75,7 @@
     "* **`sortable`** (`bool | dict[str, bool]`, `default=True`): Whether the table is sortable or whether individual columns are sortable. If specified as a bool applies globally otherwise sorting can be enabled/disabled per column.\n",
     "* **`sorters`** (`list`): A list of sorter definitions mapping where each item should declare the column to sort on and the direction to sort, e.g. `[{'field': 'column_name', 'dir': 'asc'}, {'field': 'another_column', 'dir': 'desc'}]`.\n",
     "* **`text_align`** (`dict` or `str`): A mapping from column name to alignment or a fixed column alignment, which should be one of `'left'`, `'center'`, `'right'`.\n",
-    "* **`theme`** (`str`, `default='simple'`): The CSS theme to apply (note that changing the theme will restyle all tables on the page), which should be one of `'default'`, `'site'`, `'simple'`, `'midnight'`, `'modern'`, `'bootstrap'`, `'bootstrap4'`, `'materialize'`, `'bulma'`, `'semantic-ui'`, or `'fast'`.\n",
+    "* **`theme`** (`str`, `default='simple'`): The CSS theme to apply (note that changing the theme will restyle all tables on the page), which should be one of `'default'`, `'site'`, `'simple'`, `'midnight'`, `'modern'`, `'bootstrap'`, `'bootstrap4'`, `'bootstrap5'`, `'materialize'`, `'bulma'`, `'semantic-ui'`, or `'fast'`.\n",
     "* **`theme_classes`** (`list[str]`): List of extra CSS classes to apply to the Tabulator element to customize the theme.\n",
     "* **`title_formatters`** (`dict`): A dictionary mapping from column name to a *Tabulator* formatter specification.\n",
     "* **`titles`** (`dict`): A mapping from column name to a title to override the name with.\n",
@@ -221,7 +221,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Therefore it is often preferable to use one of the [*Tabulator* editors](https://tabulator.info/docs/5.5/edit#edit) directly. Setting the editor of a column to `None` makes that column non-editable. Note that in addition to the standard *Tabulator* editors the `Tabulator` widget also supports `'date'` and `'datetime'` editors:"
+    "Therefore it is often preferable to use one of the [*Tabulator* editors](https://tabulator.info/docs/6.2/edit#edit) directly. Setting the editor of a column to `None` makes that column non-editable. Note that in addition to the standard *Tabulator* editors the `Tabulator` widget also supports `'date'` and `'datetime'` editors:"
    ]
   },
   {
@@ -585,7 +585,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Additionally, you may provide additional theming classes [as described here](https://tabulator.info/docs/5.5/theme#framework)."
+    "Additionally, you may provide additional theming classes [as described here](https://tabulator.info/docs/6.2/theme#framework)."
    ]
   },
   {

From b60d1f6aa7241487b4e5070a2648a830556d34f4 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 23 Sep 2024 15:17:05 +0200
Subject: [PATCH 108/164] Bump panel.js version to 1.5.1-a.1

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index d9e44b5e98..865479e398 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0",
+  "version": "1.5.1-a.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.0",
+      "version": "1.5.1-a.1",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.5.2",
diff --git a/panel/package.json b/panel/package.json
index c3957b315d..fac08932d8 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.0",
+  "version": "1.5.1-a.1",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From 81ccf039ea8159bab3b2bc333a302f306de1a6bb Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 23 Sep 2024 15:31:21 +0200
Subject: [PATCH 109/164] Safely handle test repeat option

---
 panel/tests/conftest.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/panel/tests/conftest.py b/panel/tests/conftest.py
index 0842e03aa3..ce4e06dd00 100644
--- a/panel/tests/conftest.py
+++ b/panel/tests/conftest.py
@@ -157,8 +157,9 @@ def pytest_configure(config):
     config.addinivalue_line("markers", "internet: mark test as requiring an internet connection")
 
 def pytest_generate_tests(metafunc):
-    if metafunc.config.option.repeat is not None:
-        count = int(metafunc.config.option.repeat)
+    repeat = getattr(metafunc.config.option, 'repeat', None)
+    if repeat is not None:
+        count = int(repeat)
 
         # We're going to duplicate these tests by parametrizing them,
         # which requires that each test has a fixture to accept the parameter.

From 9f51bb4ee2dac3ce99facb25867b78b945f50755 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 24 Sep 2024 13:40:37 +0200
Subject: [PATCH 110/164] Move session prefixes from handlers to Application
 (#7318)

---
 panel/io/application.py |  23 ++++++++
 panel/io/server.py      | 121 +++++++++++++++-------------------------
 panel/io/state.py       |  48 +++++++++++++---
 3 files changed, 109 insertions(+), 83 deletions(-)

diff --git a/panel/io/application.py b/panel/io/application.py
index 90efa39693..f256281e6b 100644
--- a/panel/io/application.py
+++ b/panel/io/application.py
@@ -12,6 +12,7 @@
 from typing import (
     TYPE_CHECKING, Any, Callable, Mapping,
 )
+from urllib.parse import urljoin
 
 import bokeh.command.util
 
@@ -121,8 +122,30 @@ def add(self, handler: Handler) -> None:
             handler._on_session_destroyed = _on_session_destroyed
         super().add(handler)
 
+    def _set_session_prefix(self, doc):
+        session_context = doc.session_context
+        if not (session_context and session_context.server_context):
+            return
+        request = session_context.request
+        app_context = session_context.server_context.application_context
+        prefix = request.uri.replace(app_context._url, '')
+        if not prefix.endswith('/'):
+            prefix += '/'
+        base_url = urljoin('/', prefix)
+        rel_path = '/'.join(['..'] * app_context._url.strip('/').count('/'))
+
+        # Handle autoload.js absolute paths
+        abs_url = request.arguments.get('bokeh-absolute-url')
+        if abs_url:
+            rel_path = abs_url[0].decode('utf-8').replace(app_context._url, '')
+
+        with set_curdoc(doc):
+            state.base_url = base_url
+            state.rel_path = rel_path
+
     def initialize_document(self, doc):
         logger.info(LOG_SESSION_LAUNCHING, id(doc))
+        self._set_session_prefix(doc)
         super().initialize_document(doc)
         if doc in state._templates and doc not in state._templates[doc]._documents:
             template = state._templates[doc]
diff --git a/panel/io/server.py b/panel/io/server.py
index e2b38dfca2..78107b388c 100644
--- a/panel/io/server.py
+++ b/panel/io/server.py
@@ -14,13 +14,12 @@
 import sys
 import uuid
 
-from contextlib import contextmanager
 from functools import partial, wraps
 from html import escape
 from typing import (
     TYPE_CHECKING, Any, Callable, Mapping, Optional,
 )
-from urllib.parse import urljoin, urlparse
+from urllib.parse import urlparse
 
 import bokeh
 import param
@@ -56,7 +55,7 @@
 
 # Internal imports
 from ..config import config
-from ..util import edit_readonly, fullpath
+from ..util import fullpath
 from ..util.warnings import warn
 from .application import build_applications
 from .document import (  # noqa
@@ -325,32 +324,6 @@ async def stop_autoreload():
 
 bokeh.server.server.Server = Server
 
-class SessionPrefixHandler:
-
-    @contextmanager
-    def _session_prefix(self):
-        prefix = self.request.uri.replace(self.application_context._url, '')
-        if not prefix.endswith('/'):
-            prefix += '/'
-        base_url = urljoin('/', prefix)
-        rel_path = '/'.join(['..'] * self.application_context._url.strip('/').count('/'))
-        old_url, old_rel = state.base_url, state.rel_path
-
-        # Handle autoload.js absolute paths
-        abs_url = self.get_argument('bokeh-absolute-url', default=None)
-        if abs_url is not None:
-            rel_path = abs_url.replace(self.application_context._url, '')
-
-        with edit_readonly(state):
-            state.base_url = base_url
-            state.rel_path = rel_path
-        try:
-            yield
-        finally:
-            with edit_readonly(state):
-                state.base_url = old_url
-                state.rel_path = old_rel
-
 class LoginUrlMixin:
     """
     Overrides the AuthRequestHandler.get_login_url implementation to
@@ -369,7 +342,7 @@ def get_login_url(self):
         raise RuntimeError('login_url or get_login_url() must be supplied when authentication hooks are enabled')
 
 
-class DocHandler(LoginUrlMixin, BkDocHandler, SessionPrefixHandler):
+class DocHandler(LoginUrlMixin, BkDocHandler):
 
     @authenticated
     async def get_session(self):
@@ -488,42 +461,41 @@ async def get(self, *args, **kwargs):
                 return
 
         app = self.application
-        with self._session_prefix():
-            key_func = state._session_key_funcs.get(self.request.path, lambda r: r.path)
-            old_request = key_func(self.request) in state._sessions
-            session = await self.get_session()
-            if old_request and state._sessions.get(key_func(self.request)) is session:
-                session_id = generate_session_id(
-                    secret_key=self.application.secret_key,
-                    signed=self.application.sign_sessions
-                )
-                payload = get_token_payload(session.token)
-                payload.update(payload)
-                del payload['session_expiry']
-                token = generate_jwt_token(
-                    session_id,
-                    secret_key=app.secret_key,
-                    signed=app.sign_sessions,
-                    expiration=app.session_token_expiration,
-                    extra_payload=payload
+        key_func = state._session_key_funcs.get(self.request.path, lambda r: r.path)
+        old_request = key_func(self.request) in state._sessions
+        session = await self.get_session()
+        if old_request and state._sessions.get(key_func(self.request)) is session:
+            session_id = generate_session_id(
+                secret_key=self.application.secret_key,
+                signed=self.application.sign_sessions
+            )
+            payload = get_token_payload(session.token)
+            payload.update(payload)
+            del payload['session_expiry']
+            token = generate_jwt_token(
+                session_id,
+                secret_key=app.secret_key,
+                signed=app.sign_sessions,
+                expiration=app.session_token_expiration,
+                extra_payload=payload
+            )
+        else:
+            token = session.token
+        logger.info(LOG_SESSION_CREATED, id(session.document))
+        with set_curdoc(session.document):
+            resources = Resources.from_bokeh(self.application.resources())
+            # Session authorization callback
+            authorized, auth_error = self._authorize(session=True)
+            if authorized:
+                page = server_html_page_for_session(
+                    session, resources=resources, title=session.document.title,
+                    token=token, template=session.document.template,
+                    template_variables=session.document.template_variables,
                 )
+            elif authorized is None:
+                return
             else:
-                token = session.token
-            logger.info(LOG_SESSION_CREATED, id(session.document))
-            with set_curdoc(session.document):
-                resources = Resources.from_bokeh(self.application.resources())
-                # Session authorization callback
-                authorized, auth_error = self._authorize(session=True)
-                if authorized:
-                    page = server_html_page_for_session(
-                        session, resources=resources, title=session.document.title,
-                        token=token, template=session.document.template,
-                        template_variables=session.document.template_variables,
-                    )
-                elif authorized is None:
-                    return
-                else:
-                    page = self._render_auth_error(auth_error)
+                page = self._render_auth_error(auth_error)
 
         self.set_header("Content-Type", 'text/html')
         self.write(page)
@@ -531,7 +503,7 @@ async def get(self, *args, **kwargs):
 per_app_patterns[0] = (r'/?', DocHandler)
 
 # Patch Bokeh Autoload handler
-class AutoloadJsHandler(BkAutoloadJsHandler, SessionPrefixHandler):
+class AutoloadJsHandler(BkAutoloadJsHandler):
     ''' Implements a custom Tornado handler for the autoload JS chunk
 
     '''
@@ -550,16 +522,15 @@ async def get(self, *args, **kwargs) -> None:
         else:
             server_url = None
 
-        with self._session_prefix():
-            session = await self.get_session()
-            with set_curdoc(session.document):
-                resources = Resources.from_bokeh(
-                    self.application.resources(server_url), absolute=True
-                )
-                js = autoload_js_script(
-                    session.document, resources, session.token, element_id,
-                    app_path, absolute_url, absolute=True
-                )
+        session = await self.get_session()
+        with set_curdoc(session.document):
+            resources = Resources.from_bokeh(
+                self.application.resources(server_url), absolute=True
+            )
+            js = autoload_js_script(
+                session.document, resources, session.token, element_id,
+                app_path, absolute_url, absolute=True
+            )
 
         self.set_header("Content-Type", 'application/javascript')
         self.write(js)
diff --git a/panel/io/state.py b/panel/io/state.py
index d4f1ba845e..a16fb5fa70 100644
--- a/panel/io/state.py
+++ b/panel/io/state.py
@@ -89,9 +89,6 @@ class _state(param.Parameterized):
     apps to indicate their state to a user.
     """
 
-    base_url = param.String(default='/', readonly=True, doc="""
-       Base URL for all server paths.""")
-
     busy = param.Boolean(default=False, readonly=True, doc="""
        Whether the application is currently busy processing a user
        callback.""")
@@ -104,11 +101,6 @@ class _state(param.Parameterized):
        Object with encrypt and decrypt methods to support encryption
        of secret variables including OAuth information.""")
 
-    rel_path = param.String(default='', readonly=True, doc="""
-       Relative path from the current app being served to the root URL.
-       If application is embedded in a different server via autoload.js
-       this will instead reflect an absolute path.""")
-
     session_info = param.Dict(default={'total': 0, 'live': 0,
                                        'sessions': {}}, doc="""
        Tracks information and statistics about user sessions.""")
@@ -116,12 +108,20 @@ class _state(param.Parameterized):
     webdriver = param.Parameter(default=None, doc="""
       Selenium webdriver used to export bokeh models to pngs.""")
 
+    _base_url = param.String(default='/', readonly=True, doc="""
+       Base URL for all server paths.""")
+
     _busy_counter = param.Integer(default=0, doc="""
        Count of active callbacks current being processed.""")
 
     _memoize_cache = param.Dict(default={}, doc="""
        A dictionary used by the cache decorator.""")
 
+    _rel_path = param.String(default='', readonly=True, doc="""
+       Relative path from the current app being served to the root URL.
+       If application is embedded in a different server via autoload.js
+       this will instead reflect an absolute path.""")
+
     # Holds temporary curdoc overrides per thread
     _curdoc = ContextVar('curdoc', default=None)
 
@@ -220,6 +220,10 @@ class _state(param.Parameterized):
     _oauth_user_overrides = {}
     _active_users = Counter()
 
+    # Paths
+    _rel_paths: ClassVar[WeakKeyDictionary[Document, str]] = WeakKeyDictionary()
+    _base_urls: ClassVar[WeakKeyDictionary[Document, str]] = WeakKeyDictionary()
+
     # Watchers
     _watch_events: list[asyncio.Event] = []
 
@@ -1019,6 +1023,34 @@ def headers(self) -> dict[str, str | list[str]]:
         """
         return self.curdoc.session_context.request.headers if self.curdoc and self.curdoc.session_context else {}
 
+    @property
+    def base_url(self) -> str:
+        base_url = self._base_url
+        if self.curdoc:
+            return self._base_urls.get(self.curdoc, base_url)
+        return base_url
+
+    @base_url.setter
+    def base_url(self, value: str):
+        if self.curdoc:
+            self._base_urls[self.curdoc] = value
+        else:
+            self._base_url = value
+
+    @property
+    def rel_path(self) -> str | None:
+        rel_path = self._rel_path
+        if self.curdoc:
+            return self._rel_paths.get(self.curdoc, rel_path)
+        return rel_path
+
+    @rel_path.setter
+    def rel_path(self, value: str | None):
+        if self.curdoc:
+            self._rel_paths[self.curdoc] = value
+        else:
+            self._rel_path = value
+
     @property
     def loaded(self) -> bool:
         """

From 79d9ba2901ddc3e5b26545080b39eb24ea57cd07 Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Tue, 24 Sep 2024 14:38:54 +0200
Subject: [PATCH 111/164] fastapi docs (#7317)

---
 doc/how_to/integrations/FastAPI.md | 30 ++++++++++++++++++------------
 pyproject.toml                     |  4 ++--
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/doc/how_to/integrations/FastAPI.md b/doc/how_to/integrations/FastAPI.md
index fec10d37d2..532e1dccb2 100644
--- a/doc/how_to/integrations/FastAPI.md
+++ b/doc/how_to/integrations/FastAPI.md
@@ -2,32 +2,28 @@
 
 Panel generally runs on the Bokeh server, which itself runs on [Tornado](https://tornadoweb.org/en/stable/). However, it is also often useful to embed a Panel app in an existing web application, such as a [FastAPI](https://fastapi.tiangolo.com/) web server.
 
-Since Panel 1.5.0 it is possible to run Panel application(s) natively on a FastAPI and uvicorn based server. Therefore this how-to guide will explain how to add Panel application(s) directly to an existing FastAPI application. This functionality is new and experimental so we also provide a [how-to guide to embed a Tornado based Panel server application inside a FastAPI application](./FastAPI_Tornado).
+Since Panel 1.5.0 it is possible to run Panel application(s) natively on a FastAPI based server. Therefore this how-to guide will explain how to add Panel application(s) directly to an existing FastAPI application. This functionality is new and experimental so we also provide the original [how-to guide to embed a Tornado based Panel server application inside a FastAPI application](./FastAPI_Tornado).
 
 By the end of this guide, you'll be able to run a FastAPI application that serves a simple interactive Panel app. The Panel app will consist of a slider widget that dynamically updates a string of stars (⭐) based on the slider's value.
 
 ## Setup
 
-Following FastAPI's [Tutorial - User Guide](https://fastapi.tiangolo.com/tutorial/) make sure you first have FastAPI installed using:
+Following FastAPI's [Tutorial - User Guide](https://fastapi.tiangolo.com/tutorial/) make sure you first have [FastAPI](https://fastapi.tiangolo.com/) and [bokeh-fastapi] installed using:
 
 ::::{tab-set}
 
-:::{tab-item} `conda`
-```bash
-conda install fastapi
-```
-:::
-
 :::{tab-item} `pip`
 ```bash
-pip install fastapi
+pip install panel[fastapi]
 ```
 :::
 
-:::{tab-item} `panel`
+:::{tab-item} `conda`
 ```bash
-pip install panel[fastapi]
+conda install -c conda-forge bokeh-fastapi
 ```
+
+Note: As of September 24th 2024 this is waiting on [conda-forge/staged-recipes#27575](https://github.com/conda-forge/staged-recipes/pull/27575).
 :::
 
 ::::
@@ -92,7 +88,7 @@ fastapi dev main.py
 
 You should see the following output:
 
-```
+```bash
 INFO     Using path main.py
 INFO     Resolved absolute path /home/user/code/awesomeapp/main.py
 INFO     Searching for package file structure from directories with __init__.py files
@@ -165,6 +161,16 @@ add_applications({
 }, app=app)
 ```
 
+## Tips & Tricks
+
+### Running Behind a Proxy
+
+In some cases, you might be running your FastAPI app behind a reverse proxy, which adds an extra path prefix that your application doesn't directly handle. This is common when working in environments like JupyterHub or deploying to Kubernetes.
+
+For instance, if your FastAPI `/` endpoint is accessed at `https://some.domain/some/path/`, you will need to specify the path prefix when starting your FastAPI server. To do this, use the flag `--root-path /some/path/`. This ensures you can access the OpenAPI docs at `https://some.domain/some/path/docs`.
+
+For more details, refer to the [Behind a Proxy](https://fastapi.tiangolo.com/advanced/behind-a-proxy/) guide.
+
 ## Conclusion
 
 That's it! You now have embedded panel in FastAPI! You can now build off of this to create your own web app tailored to your needs.
diff --git a/pyproject.toml b/pyproject.toml
index 6e1fd344cf..2bcd8dce9f 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -77,8 +77,8 @@ recommended = [
     'plotly',
 ]
 fastapi = [
-    'bokeh-fastapi == 0.1.0',
-    'uvicorn',
+    'bokeh-fastapi >= 0.1.0',
+    'fastapi[standard]',
 ]
 dev = [
     'watchfiles',

From 252a85effa526805dedf242fc3d67cb4f7d5a41e Mon Sep 17 00:00:00 2001
From: Andrew <15331990+ahuang11@users.noreply.github.com>
Date: Tue, 24 Sep 2024 05:39:59 -0700
Subject: [PATCH 112/164] Tweak margins (#7310)

---
 panel/dist/css/chat_copy_icon.css      |  1 +
 panel/dist/css/chat_message.css        | 11 ++++-------
 panel/dist/css/chat_reaction_icons.css |  4 ++--
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/panel/dist/css/chat_copy_icon.css b/panel/dist/css/chat_copy_icon.css
index 034b5c955d..74a021cab1 100644
--- a/panel/dist/css/chat_copy_icon.css
+++ b/panel/dist/css/chat_copy_icon.css
@@ -1,3 +1,4 @@
 :host {
   margin-top: 4px;
+  margin-inline: 3px;
 }
diff --git a/panel/dist/css/chat_message.css b/panel/dist/css/chat_message.css
index 8220b2ed0b..084785ec3a 100644
--- a/panel/dist/css/chat_message.css
+++ b/panel/dist/css/chat_message.css
@@ -39,7 +39,7 @@
 }
 
 .meta {
-  margin-bottom: -8px;
+  margin-bottom: -6px;
 }
 
 .left {
@@ -77,7 +77,6 @@
       1px;
   font-size: 1.25em;
   min-height: 50px;
-  margin-block: 2px;
   margin-left: 10px; /* Space for avatar */
   background-color: var(--panel-surface-color, #f1f1f1);
   min-width: 0;
@@ -101,7 +100,7 @@
 .timestamp {
   opacity: 0.5;
   transition: opacity 0.1s ease-in-out;
-  margin-block: 0px;
+  margin-block: 2px;
 }
 
 .timestamp:hover {
@@ -119,6 +118,8 @@
 
 .icons {
   opacity: 0.5;
+  margin-left: 8px;
+  margin-top: -2px;
   transition: opacity 0.1s ease-in-out;
 }
 
@@ -146,7 +147,3 @@
   font-size: 1.25em;
   line-height: 0.9em;
 }
-
-.copy-icon {
-  margin-left: 10px;
-}
diff --git a/panel/dist/css/chat_reaction_icons.css b/panel/dist/css/chat_reaction_icons.css
index 4d57653f9d..f6a5c453d5 100644
--- a/panel/dist/css/chat_reaction_icons.css
+++ b/panel/dist/css/chat_reaction_icons.css
@@ -1,5 +1,5 @@
 :host {
   width: fit-content;
-  margin-top: 2px;
-  margin-left: 3px;
+  margin-top: 4px;
+  margin-inline: 3px;
 }

From 62073898ad293c9d976d44076ebcb4909f33d4dc Mon Sep 17 00:00:00 2001
From: thuydotm <thuydtm.csk9@gmail.com>
Date: Tue, 24 Sep 2024 22:41:00 +0700
Subject: [PATCH 113/164] Reference notebook - Tabulator theme: notes on
 font-size (#7321)

---
 examples/reference/widgets/Tabulator.ipynb | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/examples/reference/widgets/Tabulator.ipynb b/examples/reference/widgets/Tabulator.ipynb
index ab47093d20..3f63ca0545 100644
--- a/examples/reference/widgets/Tabulator.ipynb
+++ b/examples/reference/widgets/Tabulator.ipynb
@@ -597,6 +597,24 @@
     "pn.widgets.Tabulator(df, theme='bootstrap5', theme_classes=['thead-dark', 'table-sm'])"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Changing font-size\n",
+    "\n",
+    "Font-size may vary from theme to theme. E.g with 'bootstrap' it is 13px while with 'bootstrap5' it is 16px. Below is one way to overwrite the font-size value for theme 'bootstrap5' to 10px."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.widgets.Tabulator(df, theme='bootstrap5', stylesheets=[\":host .tabulator {font-size: 10px;}\"])"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},

From dcfcf2935ffa8254a7f2319ebc83e08b241923e7 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 24 Sep 2024 17:45:25 +0200
Subject: [PATCH 114/164] Convert Plotly datetimes (#7319)

---
 panel/pane/plotly.py            | 31 +++++++++++--------
 panel/tests/pane/test_plotly.py | 55 +++++++++++++++++++++++++++++++++
 panel/util/checks.py            |  2 +-
 3 files changed, 74 insertions(+), 14 deletions(-)

diff --git a/panel/pane/plotly.py b/panel/pane/plotly.py
index f6dc968e67..8b15d81439 100644
--- a/panel/pane/plotly.py
+++ b/panel/pane/plotly.py
@@ -14,7 +14,8 @@
 from bokeh.models import ColumnDataSource
 from pyviz_comms import JupyterComm
 
-from ..util import isdatetime, lazy_load
+from ..util import lazy_load
+from ..util.checks import datetime_types, isdatetime
 from ..viewable import Layoutable
 from .base import ModelPane
 
@@ -132,8 +133,8 @@ def _get_sources_for_trace(json, data, parent_path=''):
         for key, value in list(json.items()):
             full_path = key if not parent_path else f"{parent_path}.{key}"
             if isinstance(value, np.ndarray):
-                # Extract numpy array
-                data[full_path] = [json.pop(key)]
+                array = json.pop(key)
+                data[full_path] = [array]
             elif isinstance(value, dict):
                 # Recurse into dictionaries:
                 Plotly._get_sources_for_trace(value, data=data, parent_path=full_path)
@@ -251,17 +252,21 @@ def _plotly_json_wrapper(fig):
         For #382: Map datetime elements to strings.
         """
         json = fig.to_plotly_json()
+        layout = json['layout']
         data = json['data']
-
-        for idx in range(len(data)):
-            for key in data[idx]:
-                if isdatetime(data[idx][key]):
-                    arr = data[idx][key]
-                    if isinstance(arr, np.ndarray):
-                        arr = arr.astype(str)
-                    else:
-                        arr = [str(v) for v in arr]
-                    data[idx][key] = arr
+        shapes = layout.get('shapes', [])
+        for trace in data+shapes:
+            for key in trace:
+                if not isdatetime(trace[key]):
+                    continue
+                arr = trace[key]
+                if isinstance(arr, np.ndarray):
+                    arr = arr.astype(str)
+                elif isinstance(arr, datetime_types):
+                    arr = str(arr)
+                else:
+                    arr = [str(v) for v in arr]
+                trace[key] = arr
         return json
 
     def _init_params(self):
diff --git a/panel/tests/pane/test_plotly.py b/panel/tests/pane/test_plotly.py
index 88690bc9e0..cb40d7b7b5 100644
--- a/panel/tests/pane/test_plotly.py
+++ b/panel/tests/pane/test_plotly.py
@@ -243,3 +243,58 @@ def test_plotly_swap_traces(document, comm):
 
     assert 'x' not in cds.data
     assert len(cds.data['y'][0]) == 500
+
+
+@plotly_available
+def test_plotly_shape_datetime_converted(document, comm):
+    # see https://github.com/holoviz/panel/issues/5252
+    start = pd.Timestamp('2022-05-11 0:00:00', tz=dt.timezone.utc)
+    date_range = pd.date_range(start=start, periods=20, freq='h')
+
+    df = pd.DataFrame({
+        "x": date_range,
+        "y": list(range(len(date_range))),
+    })
+
+    fig = px.scatter(df, x="x", y="y")
+    fig.add_vline(x=pd.Timestamp('2022-05-11 9:00:00', tz=dt.timezone.utc))
+
+    p = Plotly(fig)
+
+    model = p.get_root(document, comm)
+
+    assert model.layout['shapes'][0]['x0'] == '2022-05-11 09:00:00+00:00'
+
+
+@plotly_available
+def test_plotly_datetime_converted_2d_array(document, comm):
+    # see https://github.com/holoviz/panel/issues/7309
+    n_points = 3
+    data = pd.DataFrame({
+        'timestamp': pd.date_range(start='2023-01-01', periods=n_points, freq='min'),
+        'latitude': np.cumsum(np.random.randn(n_points) * 0.01) + 52.3702,  # Centered around Amsterdam
+        'longitude': np.cumsum(np.random.randn(n_points) * 0.01) + 4.8952,  # Centered around Amsterdam
+    })
+
+    fig = px.scatter_mapbox(data, lon='longitude', lat='latitude', custom_data='timestamp')
+
+    p = Plotly(fig)
+
+    model = p.get_root(document, comm)
+
+    assert len(model.data_sources) == 1
+
+    cds = model.data_sources[0]
+    assert isinstance(cds.data['customdata'], list)
+    assert len(cds.data['customdata']) == 1
+    data = cds.data['customdata'][0]
+    assert isinstance(data, np.ndarray)
+    assert data.dtype.kind == 'U'
+    np.testing.assert_equal(
+        data,
+        np.array([
+            ['2023-01-01 00:00:00'],
+            ['2023-01-01 00:01:00'],
+            ['2023-01-01 00:02:00']
+        ])
+    )
diff --git a/panel/util/checks.py b/panel/util/checks.py
index ed3cf748ca..139c2598ff 100644
--- a/panel/util/checks.py
+++ b/panel/util/checks.py
@@ -109,7 +109,7 @@ def isdatetime(value) -> bool:
         return (
             value.dtype.kind == "M" or
             (value.dtype.kind == "O" and len(value) != 0 and
-             isinstance(value[0], datetime_types))
+             isinstance(np.take(value, 0), datetime_types))
         )
     elif isinstance(value, list):
         return all(isinstance(d, datetime_types) for d in value)

From 8fdd6f6eb2b499e4cd62b53ce856e6f1b2b5d97c Mon Sep 17 00:00:00 2001
From: Andrew <15331990+ahuang11@users.noreply.github.com>
Date: Tue, 24 Sep 2024 08:46:38 -0700
Subject: [PATCH 115/164] Tweak best practices (#7301)

---
 doc/how_to/best_practices/dev_experience.md  | 17 +++++++++++++++--
 doc/how_to/best_practices/user_experience.md | 15 +++++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/doc/how_to/best_practices/dev_experience.md b/doc/how_to/best_practices/dev_experience.md
index a17d667f75..5a20cdcf8b 100644
--- a/doc/how_to/best_practices/dev_experience.md
+++ b/doc/how_to/best_practices/dev_experience.md
@@ -46,11 +46,13 @@ clicks = pn.bind(show_clicks, button.clicks)  # not button.clicks!
 pn.Row(button, clicks)
 ```
 
-## Inherit from `pn.viewer.Viewer`
+## Inherit from `pn.viewer.Viewer` or `pn.custom.PyComponent`
 
 ### Good
 
-`param.Parameterized` is a very general class that can be used separately from Panel for working with Parameters. But if you want a Parameterized class to use with Panel, it is usually appropriate to inherit from the Panel-specific class `pn.viewable.Viewer` instead, because `Viewer` allows direct invocation of the class, resembling a native Panel object.
+`param.Parameterized` is a very general class that can be used separately from Panel for working with Parameters.
+
+But if you want a Parameterized class to use with Panel, it is usually appropriate to inherit from the Panel-specific class `pn.viewable.Viewer` instead, because `Viewer` allows direct instantiation of the `Viewer` class, resembling a native Panel object.
 
 For example, it's possible to use `ExampleApp().servable()` instead of `ExampleApp().view().servable()`.
 
@@ -68,6 +70,17 @@ class ExampleApp(pn.viewable.Viewer):
 ExampleApp().servable();
 ```
 
+`Viewer` is ideal if you're building a class with some fairly specific business logic, *but* if you are building a reusable component assembled from other Panel components use [`PyComponent`](https://panel.holoviz.org/reference/custom_components/PyComponent.html) instead.
+
+```python
+class MultipleChildren(PyComponent):
+
+    objects = Children()
+
+    def __panel__(self):
+        return pn.Column(objects=self.param['objects'], styles={"background": "silver"})
+```
+
 ### Okay
 
 Inheriting from `param.Parameterized` also works, but should be reserved for cases where there's no Panel output.
diff --git a/doc/how_to/best_practices/user_experience.md b/doc/how_to/best_practices/user_experience.md
index 7cb035e752..1023aa0aff 100644
--- a/doc/how_to/best_practices/user_experience.md
+++ b/doc/how_to/best_practices/user_experience.md
@@ -150,6 +150,19 @@ pn.state.onload(onload)
 
 ### Good
 
+Set `loading=pn.state.param.busy` to overlay a spinner while processing to let the user know it's working.
+
+```{pyodide}
+def process_load(event):
+    time.sleep(3)
+
+button = pn.widgets.Button(name="Click me", on_click=process_load)
+widget_box = pn.WidgetBox(button, loading=pn.state.param.busy, height=300, width=300)
+widget_box
+```
+
+### Good
+
 Set `loading=True` to show a spinner while processing to let the user know it's working.
 
 ```{pyodide}
@@ -193,8 +206,6 @@ Use:
 - `finally` block to update values regardless
 
 ```{pyodide}
-import time
-
 def compute(divisor):
     try:
         busy.value = True

From 260da79a5b9f645f8ede4dd3dbfe60e301c61fe5 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Wed, 25 Sep 2024 09:56:13 +0200
Subject: [PATCH 116/164] Add mapboxgl CSS to Plotly (#7320)

---
 panel/models/plotly.py             | 7 +++++++
 panel/tests/pane/test_holoviews.py | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/panel/models/plotly.py b/panel/models/plotly.py
index f33eba1862..8bbb1bf09d 100644
--- a/panel/models/plotly.py
+++ b/panel/models/plotly.py
@@ -25,6 +25,13 @@ class PlotlyPlot(LayoutDOM):
     A bokeh model that wraps around a plotly plot and renders it inside
     a bokeh plot.
     """
+    __css_raw__ = [
+        "https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css",
+    ]
+
+    @classproperty
+    def __css__(cls):
+        return bundled_files(cls, 'css')
 
     __javascript_raw__ = [
         JS_URLS['jQuery'],
diff --git a/panel/tests/pane/test_holoviews.py b/panel/tests/pane/test_holoviews.py
index 7b82e54d8a..cc70cdad69 100644
--- a/panel/tests/pane/test_holoviews.py
+++ b/panel/tests/pane/test_holoviews.py
@@ -240,7 +240,7 @@ def test_holoviews_pane_inherits_design_stylesheets(document, comm):
 
     plotly_model = row.children[0]
 
-    assert len(plotly_model.stylesheets) == 5
+    assert len(plotly_model.stylesheets) == 6
 
 @hv_available
 def test_holoviews_widgets_from_dynamicmap(document, comm):

From df24be1043f4a6b0606c502f497da33d17436f18 Mon Sep 17 00:00:00 2001
From: DJ Lee <dennisjlee@gmail.com>
Date: Thu, 26 Sep 2024 03:06:21 -0700
Subject: [PATCH 117/164] Fix typo in JPG component docs (#7323)

Co-authored-by: DJ Lee <dj@breakwaterresearch.com>
---
 examples/reference/panes/JPG.ipynb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/reference/panes/JPG.ipynb b/examples/reference/panes/JPG.ipynb
index 3aea9c3068..2f08b9a73a 100644
--- a/examples/reference/panes/JPG.ipynb
+++ b/examples/reference/panes/JPG.ipynb
@@ -25,7 +25,7 @@
     "* **``embed``** (boolean, default=False): If given a URL to an image this determines whether the image will be embedded as base64 or merely linked to.\n",
     "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
     "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
-    "* **``object``** (str or object): The JPEG file to display.  Can be a string pointing to a local or remote file, or an object with a ``_repr_jpg_`` method.\n",
+    "* **``object``** (str or object): The JPEG file to display.  Can be a string pointing to a local or remote file, or an object with a ``_repr_jpeg_`` method.\n",
     "* **``style``** (dict): Dictionary specifying CSS styles\n",
     "\n",
     "___"

From 31cabdc22f7167ffbdafd061178b1d4bf3c13da3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Fri, 27 Sep 2024 12:42:51 +0200
Subject: [PATCH 118/164] COMPAT: Bokeh 3.6 and add minimal test for Bokeh 3.5
 (#7322)

---
 .github/workflows/test.yaml              |  2 +-
 doc/how_to/integrations/FastAPI.md       |  2 -
 panel/models/tabulator.ts                |  3 +-
 panel/package-lock.json                  | 68 ++++++++++++------------
 panel/package.json                       |  4 +-
 panel/tests/ui/widgets/test_tabulator.py | 11 ++--
 panel/util/__init__.py                   |  1 +
 pixi.toml                                | 22 +++++---
 pyproject.toml                           |  4 +-
 9 files changed, 64 insertions(+), 53 deletions(-)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 933b31a04f..ed3463dba5 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -243,7 +243,7 @@ jobs:
       fail-fast: false
       matrix:
         os: ["ubuntu-latest"]
-        environment: ["test-core"]
+        environment: ["test-core", "test-minimum"]
     timeout-minutes: 120
     steps:
       - uses: holoviz-dev/holoviz_tasks/pixi_install@v0
diff --git a/doc/how_to/integrations/FastAPI.md b/doc/how_to/integrations/FastAPI.md
index 532e1dccb2..3529f07125 100644
--- a/doc/how_to/integrations/FastAPI.md
+++ b/doc/how_to/integrations/FastAPI.md
@@ -22,8 +22,6 @@ pip install panel[fastapi]
 ```bash
 conda install -c conda-forge bokeh-fastapi
 ```
-
-Note: As of September 24th 2024 this is waiting on [conda-forge/staged-recipes#27575](https://github.com/conda-forge/staged-recipes/pull/27575).
 :::
 
 ::::
diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts
index 15153e41cc..cc48dc0681 100644
--- a/panel/models/tabulator.ts
+++ b/panel/models/tabulator.ts
@@ -1,4 +1,5 @@
 import {undisplay} from "@bokehjs/core/dom"
+import {sum} from "@bokehjs/core/util/arrayable"
 import {isArray, isBoolean, isString, isNumber} from "@bokehjs/core/util/types"
 import {ModelEvent} from "@bokehjs/core/bokeh_events"
 import {div} from "@bokehjs/core/dom"
@@ -80,7 +81,7 @@ function summarize(grouped: any[], columns: any[], aggregators: string[], depth:
     const subsummary = summarize(group._children, columns, aggregators, depth+1)
     for (const col in subsummary) {
       if (isArray(subsummary[col])) {
-        group[col] = subsummary[col].reduce((a: any, b: any) => a + b, 0) / subsummary[col].length
+        group[col] = sum(subsummary[col] as number[]) / subsummary[col].length
       } else {
         group[col] = subsummary[col]
       }
diff --git a/panel/package-lock.json b/panel/package-lock.json
index 865479e398..0e7eeea845 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.1-a.1",
+  "version": "1.5.1-a.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.1-a.1",
+      "version": "1.5.1-a.2",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@bokeh/bokehjs": "3.5.2",
+        "@bokeh/bokehjs": "3.6.0",
         "@types/debounce": "^1.2.0",
         "@types/gl-matrix": "^2.4.5",
         "ace-code": "^1.24.1",
@@ -42,9 +42,9 @@
       }
     },
     "node_modules/@bokeh/bokehjs": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/@bokeh/bokehjs/-/bokehjs-3.5.2.tgz",
-      "integrity": "sha512-XSlCGfKSQ0U70jJdDtbbs7aPN5uXoIv6/jmh0KHjZoBiZI8FaoEZZgduccH2Kegka7fi4HvJ9kuebwMAXTNZaA==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@bokeh/bokehjs/-/bokehjs-3.6.0.tgz",
+      "integrity": "sha512-cP3AlbosWdQ7KpW8Xko0W7amb8gx7Laq+gipqGc+BqAkX9Px8D0EmPMSjFdj7cJAkx1Ud6FbjaQIMEsJ44GvSg==",
       "workspaces": [
         "./make",
         "./src/compiler",
@@ -68,7 +68,7 @@
         "regl": "^2.1.0",
         "sprintf-js": "^1.1.3",
         "timezone": "^1.0.23",
-        "tslib": "^2.6.2",
+        "tslib": "^2.7.0",
         "underscore.template": "^0.1.7"
       },
       "engines": {
@@ -119,9 +119,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
-      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.1.tgz",
+      "integrity": "sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -177,9 +177,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
-      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -187,14 +187,14 @@
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.14",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
-      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
       "deprecated": "Use @eslint/config-array instead",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.2",
+        "@humanwhocodes/object-schema": "^2.0.3",
         "debug": "^4.3.1",
         "minimatch": "^3.0.5"
       },
@@ -497,9 +497,9 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true,
       "license": "MIT"
     },
@@ -516,15 +516,15 @@
       "license": "MIT"
     },
     "node_modules/@types/google.maps": {
-      "version": "3.58.0",
-      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.0.tgz",
-      "integrity": "sha512-rZPrbNHoGxeY70uuQYFLGQqcz5mLd3pZy0u286GSugvN7PLFsHNRF2wN2QXtUgNiC33IC0LX+MD3LGAC3wN7Eg==",
+      "version": "3.58.1",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
+      "integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
       "license": "MIT"
     },
     "node_modules/@types/jquery": {
-      "version": "3.5.30",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.30.tgz",
-      "integrity": "sha512-nbWKkkyb919DOUxjmRVk8vwtDb0/k8FKncmUKFi+NY+QXqWltooxTrswvz4LspQwxvLdvzBN1TImr6cw3aQx2A==",
+      "version": "3.5.31",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.31.tgz",
+      "integrity": "sha512-rf/iB+cPJ/YZfMwr+FVuQbm7IaWC4y3FVYfVDxRGqmUCFjjPII0HWaP0vTPJGp6m4o13AXySCcMbWfrWtBFAKw==",
       "license": "MIT",
       "dependencies": {
         "@types/sizzle": "*"
@@ -1217,17 +1217,17 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
-      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.0",
-        "@humanwhocodes/config-array": "^0.11.14",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -2237,9 +2237,9 @@
       }
     },
     "node_modules/preact": {
-      "version": "10.23.2",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.23.2.tgz",
-      "integrity": "sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==",
+      "version": "10.24.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.1.tgz",
+      "integrity": "sha512-PnBAwFI3Yjxxcxw75n6VId/5TFxNW/81zexzWD9jn1+eSrOP84NdsS38H5IkF/UH3frqRPT+MvuCoVHjTDTnDw==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
diff --git a/panel/package.json b/panel/package.json
index fac08932d8..d39408bad4 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.1-a.1",
+  "version": "1.5.1-a.2",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "https://github.com/holoviz/panel.git"
   },
   "dependencies": {
-    "@bokeh/bokehjs": "3.5.2",
+    "@bokeh/bokehjs": "3.6.0",
     "@types/debounce": "^1.2.0",
     "@types/gl-matrix": "^2.4.5",
     "ace-code": "^1.24.1",
diff --git a/panel/tests/ui/widgets/test_tabulator.py b/panel/tests/ui/widgets/test_tabulator.py
index bd846eecd9..fc69cbf8cc 100644
--- a/panel/tests/ui/widgets/test_tabulator.py
+++ b/panel/tests/ui/widgets/test_tabulator.py
@@ -24,6 +24,7 @@
 from panel.layout.base import Column
 from panel.models.tabulator import _TABULATOR_THEMES_MAPPING
 from panel.tests.util import get_ctrl_modifier, serve_component, wait_until
+from panel.util import BOKEH_GE_3_6
 from panel.widgets import Select, Tabulator, TextInput
 
 pytestmark = pytest.mark.ui
@@ -366,10 +367,12 @@ def test_tabulator_formatters_bokeh_string(page, df_mixed):
 
     serve_component(page, widget)
 
-    expect(page.locator('text="A"')).to_have_attribute(
-        "style",
-        "font-weight: bold; text-align: center; color: rgb(255, 0, 0);"
-    )
+    if BOKEH_GE_3_6:
+        style = "font-weight: bold; text-align: center; color: red;"
+    else:
+        style = "font-weight: bold; text-align: center; color: rgb(255, 0, 0);"
+
+    expect(page.locator('text="A"')).to_have_attribute("style", style)
 
 
 def test_tabulator_formatters_bokeh_html_multiple_columns(page, df_mixed):
diff --git a/panel/util/__init__.py b/panel/util/__init__.py
index 9fdaaaabdb..a8820fcfe4 100644
--- a/panel/util/__init__.py
+++ b/panel/util/__init__.py
@@ -44,6 +44,7 @@
 log = logging.getLogger('panel.util')
 
 bokeh_version = Version(Version(bokeh.__version__).base_version)
+BOKEH_GE_3_6 = bokeh_version >= Version('3.6')
 
 PARAM_NAME_PATTERN = re.compile(r'^.*\d{5}$')
 
diff --git a/pixi.toml b/pixi.toml
index 4c8b9524eb..4dbf55e1c3 100644
--- a/pixi.toml
+++ b/pixi.toml
@@ -1,6 +1,6 @@
 [project]
 name = "panel"
-channels = ["pyviz/label/dev", "bokeh", "conda-forge"]
+channels = ["pyviz/label/dev", "bokeh/label/rc", "conda-forge"]
 platforms = ["linux-64", "osx-arm64", "osx-64", "win-64"]
 
 [activation.env]
@@ -16,6 +16,7 @@ test-311 = ["py311", "test-core", "test", "example", "test-example", "test-unit-
 test-312 = ["py312", "test-core", "test", "example", "test-example", "test-unit-task"]
 test-ui = ["py312", "test-core", "test", "test-ui"]
 test-core = ["py313", "test-core", "test-unit-task"]
+test-minimum = ["py310", "test-core", "test-unit-task", "test-minimum"]
 test-type = ["py311", "type"]
 docs = ["py311", "example", "doc"]
 build = ["py311", "build"]
@@ -28,7 +29,7 @@ nomkl = "*"
 pip = "*"
 # Required
 bleach = "*"
-bokeh = ">=3.5.0,<3.6.0"
+bokeh = ">=3.5.0,<3.7.0"
 linkify-it-py = "*"
 markdown = "*"
 markdown-it-py = "*"
@@ -52,7 +53,7 @@ python = "3.11.*"
 python = "3.12.*"
 
 [feature.py313]
-channels = ["pyviz/label/dev", "conda-forge/label/python_rc", "conda-forge"]
+channels = ["pyviz/label/dev", "bokeh/label/rc", "conda-forge/label/python_rc", "conda-forge"]
 
 [feature.py313.dependencies]
 python = "3.13.*"
@@ -113,6 +114,15 @@ pytest-github-actions-annotate-failures = "*"
 pytest-rerunfailures = "*"
 pytest-xdist = "*"
 
+[feature.test-minimum.dependencies]
+# Lower pin of required dependencies
+bokeh = "3.5.*"
+# numpy = "1.21.*"
+# pandas = "1.3.*"  # Pandas 1.2 is not available for Python 3.10
+# param = "2.1.*"
+# pyviz_comms = "2.0.*"
+# tqdm = "4.48.*"
+
 [feature.test.dependencies]
 # Optional dependencies - recommended
 holoviews = ">=1.16.0"
@@ -125,6 +135,7 @@ watchfiles = "*"
 # Test dependencies
 altair = "*"
 anywidget = "*"
+bokeh-fastapi = "*"
 bokeh_sampledata = "*"
 diskcache = "*"
 fastapi = "*"
@@ -137,9 +148,6 @@ reacton = "*"
 scipy = "*"
 textual = "*"
 
-[feature.test.pypi-dependencies]
-bokeh-fastapi = "~=0.1.0a0"
-
 [feature.test-unit-task.tasks] # So it is not showing up in the test-ui environment
 test-unit = 'pytest panel/tests -n logical --dist loadgroup'
 test-subprocess = 'pytest panel/tests --subprocess'
@@ -152,7 +160,7 @@ test-example = 'pytest -n logical --dist loadscope --nbval-lax examples'
 nbval = "*"
 
 [feature.test-ui]
-channels = ["pyviz/label/dev", "bokeh", "microsoft", "conda-forge"]
+channels = ["pyviz/label/dev", "bokeh/label/rc", "microsoft", "conda-forge"]
 
 [feature.test-ui.dependencies]
 playwright = { version = "*", channel = "microsoft" }
diff --git a/pyproject.toml b/pyproject.toml
index 2bcd8dce9f..3138f65395 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -3,7 +3,7 @@ requires = [
     "hatchling",
     "hatch-vcs",
     "param >=2.1.0",
-    "bokeh >=3.5.0,<3.6.0",
+    "bokeh >=3.5.0,<3.7.0",
     "pyviz_comms >=0.7.4",
     "requests",
     "packaging",
@@ -48,7 +48,7 @@ classifiers = [
 ]
 
 dependencies = [
-    'bokeh >=3.5.0,<3.6.0',
+    'bokeh >=3.5.0,<3.7.0',
     'param >=2.1.0,<3.0',
     'pyviz_comms >=2.0.0',
     'markdown',

From 7172b71c8df07a1265321cb5f1edc58f566f1d3c Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 27 Sep 2024 12:44:51 +0200
Subject: [PATCH 119/164] Add CHANGELOG for 1.5.1 (#7328)

---
 CHANGELOG.md          | 42 ++++++++++++++++++++++++++++++++++++++++++
 doc/about/releases.md | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9d47e80208..eb84d627ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,47 @@
 # Releases
 
+## Version 1.5.1
+
+This release primarily focuses on a number of tweaks and enhancements for the documentation and also resolves a number of bugs related to `Tabulator` rendering and the new `FastAPI` integration. As always, many thanks to our contributors including our new contributors @dennisjlee and @alexcjohnson, our returning contributors @thuydotm and @jbednar and the core maintainer team @hoxbro, @maximlt, @ahuang11, @MarcSkovMadsen and @philippjfr.
+
+### Enhancements
+
+- Add mapboxgl CSS to `Plotly` ([#7320](https://github.com/holoviz/panel/pull/7320))
+- Tweak margins of icons in `ChatMessage` ([#7310](https://github.com/holoviz/panel/pull/7310))
+
+### Bug fixes
+
+- Fix langchain import in `panel.chat.langchain` ([#7297](https://github.com/holoviz/panel/pull/7297))
+- Ensure Tabulator is consistently redrawn after render and resize ([#7305](https://github.com/holoviz/panel/pull/7305))
+- Filter out empty plotly_selected events ([#7312](https://github.com/holoviz/panel/pull/7312))
+- Improve parameter validation on `Timepicker` ([#7308](https://github.com/holoviz/panel/pull/7308))
+- Ensure `Tabulator.selection` consistency when `pagination='local'` ([#7304](https://github.com/holoviz/panel/pull/7304))
+- Correctly handle ipv6 localhost URI in `Location` ([#7316](https://github.com/holoviz/panel/pull/7316))
+- Ensure resource URLs are handled correctly in all server implementations ([#7318](https://github.com/holoviz/panel/pull/7318))
+- Ensure `Plotly` datetime are correctly converted from timestamp to date string ([#7319](https://github.com/holoviz/panel/pull/7319))
+
+### Regressions
+
+- Only postpone `--setup` script until after server startup if `--num-procs` is greater than 1 ([#7289](https://github.com/holoviz/panel/pull/7289))
+
+### Compatibility
+
+- Support for Bokeh 3.6.x releases ([#7322](https://github.com/holoviz/panel/pull/7322))
+
+### Documentation
+
+- Fix and improve JupyterLite pyodide distribution ([#7286](https://github.com/holoviz/panel/pull/7286))
+- Document how to apply gradient styling o `Tabulator` cells ([#7291](https://github.com/holoviz/panel/pull/7291))
+- Clarified wording in best practices docs ([#7290](https://github.com/holoviz/panel/pull/7290))
+- Minor tweaks for the `FileDropper` ([#7307](https://github.com/holoviz/panel/pull/7307))
+- Ensure docs consistently recommend `--dev` over `--autoreload` ([#7285](https://github.com/holoviz/panel/pull/7285))
+- Tweaks for Tabulator docs ([#7315](https://github.com/holoviz/panel/pull/7315))
+- Improve fastapi docs ([#7317](https://github.com/holoviz/panel/pull/7317))
+- Add note about Tabulator font-size ([#7321](https://github.com/holoviz/panel/pull/7321))
+- Tweak best practices ([#7301](https://github.com/holoviz/panel/pull/7301))
+- Fix typo in JPG component docs ([#7323](https://github.com/holoviz/panel/pull/7323))
+
+
 ## Version 1.5.0
 
 This release, while technically a minor release hugely expands the scope of what is possible in Panel. In particular the introduction of the new `panel.custom` module makes it trivially easy to create new JS and React based components using modern tooling, a first-class developer experience and support for compilation and bundling. We are incredibly excited to see which new components you build using this approach. This release also includes native integration with FastAPI, such that you can now run Panel apps natively on an existing FastAPI server. We also introduce a number of new components, improved the developer experience, and squashed a huge number of bugs, particularly for the `Tabulator` component.
diff --git a/doc/about/releases.md b/doc/about/releases.md
index c661cbd5e5..6f5526a86d 100644
--- a/doc/about/releases.md
+++ b/doc/about/releases.md
@@ -2,6 +2,47 @@
 
 See [the HoloViz blog](https://blog.holoviz.org/#category=panel) for a visual summary of the major features added in each release.
 
+## Version 1.5.1
+
+This release primarily focuses on a number of tweaks and enhancements for the documentation and also resolves a number of bugs related to `Tabulator` rendering and the new `FastAPI` integration. As always, many thanks to our contributors including our new contributors @dennisjlee and @alexcjohnson, our returning contributors @thuydotm and @jbednar and the core maintainer team @hoxbro, @maximlt, @ahuang11, @MarcSkovMadsen and @philippjfr.
+
+### Enhancements
+
+- Add mapboxgl CSS to `Plotly` ([#7320](https://github.com/holoviz/panel/pull/7320))
+- Tweak margins of icons in `ChatMessage` ([#7310](https://github.com/holoviz/panel/pull/7310))
+
+### Bug fixes
+
+- Fix langchain import in `panel.chat.langchain` ([#7297](https://github.com/holoviz/panel/pull/7297))
+- Ensure Tabulator is consistently redrawn after render and resize ([#7305](https://github.com/holoviz/panel/pull/7305))
+- Filter out empty plotly_selected events ([#7312](https://github.com/holoviz/panel/pull/7312))
+- Improve parameter validation on `Timepicker` ([#7308](https://github.com/holoviz/panel/pull/7308))
+- Ensure `Tabulator.selection` consistency when `pagination='local'` ([#7304](https://github.com/holoviz/panel/pull/7304))
+- Correctly handle ipv6 localhost URI in `Location` ([#7316](https://github.com/holoviz/panel/pull/7316))
+- Ensure resource URLs are handled correctly in all server implementations ([#7318](https://github.com/holoviz/panel/pull/7318))
+- Ensure `Plotly` datetime are correctly converted from timestamp to date string ([#7319](https://github.com/holoviz/panel/pull/7319))
+
+### Regressions
+
+- Only postpone `--setup` script until after server startup if `--num-procs` is greater than 1 ([#7289](https://github.com/holoviz/panel/pull/7289))
+
+### Compatibility
+
+- Support for Bokeh 3.6.x releases ([#7322](https://github.com/holoviz/panel/pull/7322))
+
+### Documentation
+
+- Fix and improve JupyterLite pyodide distribution ([#7286](https://github.com/holoviz/panel/pull/7286))
+- Document how to apply gradient styling o `Tabulator` cells ([#7291](https://github.com/holoviz/panel/pull/7291))
+- Clarified wording in best practices docs ([#7290](https://github.com/holoviz/panel/pull/7290))
+- Minor tweaks for the `FileDropper` ([#7307](https://github.com/holoviz/panel/pull/7307))
+- Ensure docs consistently recommend `--dev` over `--autoreload` ([#7285](https://github.com/holoviz/panel/pull/7285))
+- Tweaks for Tabulator docs ([#7315](https://github.com/holoviz/panel/pull/7315))
+- Improve fastapi docs ([#7317](https://github.com/holoviz/panel/pull/7317))
+- Add note about Tabulator font-size ([#7321](https://github.com/holoviz/panel/pull/7321))
+- Tweak best practices ([#7301](https://github.com/holoviz/panel/pull/7301))
+- Fix typo in JPG component docs ([#7323](https://github.com/holoviz/panel/pull/7323))
+
 ## Version 1.5.0
 
 This release, while technically a minor release hugely expands the scope of what is possible in Panel. In particular the introduction of the new `panel.custom` module makes it trivially easy to create new JS and React based components using modern tooling, a first-class developer experience and support for compilation and bundling. We are incredibly excited to see which new components you build using this approach. This release also includes native integration with FastAPI, such that you can now run Panel apps natively on an existing FastAPI server. We also introduce a number of new components, improved the developer experience, and squashed a huge number of bugs, particularly for the `Tabulator` component.

From e3514e495aa1d35f59438e3d954d434c12486279 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Fri, 27 Sep 2024 13:34:50 +0200
Subject: [PATCH 120/164] Update panel.js to 1.5.1-a.3

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index 0e7eeea845..03f26afece 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.1-a.2",
+  "version": "1.5.1-a.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.1-a.2",
+      "version": "1.5.1-a.3",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.6.0",
diff --git a/panel/package.json b/panel/package.json
index d39408bad4..1fbabea19e 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.1-a.2",
+  "version": "1.5.1-a.3",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From c5252068be48d27664610bfa03e5ac207ba04935 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 27 Sep 2024 14:04:42 +0200
Subject: [PATCH 121/164] Add patch to fix sidebar toggle (#7330)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Simon Høxbro Hansen <simon.hansen@me.com>
---
 doc/_static/toggle.js | 101 ++++++++++++++++++++++++++++++++++++++++++
 doc/conf.py           |   3 +-
 panel/.eslintrc.js    |   2 +-
 3 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 doc/_static/toggle.js

diff --git a/doc/_static/toggle.js b/doc/_static/toggle.js
new file mode 100644
index 0000000000..799b8cf71b
--- /dev/null
+++ b/doc/_static/toggle.js
@@ -0,0 +1,101 @@
+export function documentReady(callback) {
+  if (document.readyState != "loading") callback();
+  else document.addEventListener("DOMContentLoaded", callback);
+}
+
+function clone(node) {
+  var new_element = node.cloneNode(true);
+  node.parentNode.replaceChild(new_element, node);
+}
+
+export function documentReady(callback) {
+  if (document.readyState != "loading") callback();
+  else document.addEventListener("DOMContentLoaded", callback);
+}
+
+let loaded = false
+
+function setupMobileSidebarKeyboardHandlers() {
+  if (loaded) {
+    return
+  }
+  loaded = true
+
+  // These are hidden checkboxes at the top of the page whose :checked property
+  // allows the mobile sidebars to be hidden or revealed via CSS.
+  const primaryToggle = document.getElementById("pst-primary-sidebar-checkbox");
+  const secondaryToggle = document.getElementById(
+    "pst-secondary-sidebar-checkbox",
+  );
+  const primarySidebar = document.querySelector(".bd-sidebar-primary");
+  const secondarySidebar = document.querySelector(".bd-sidebar-secondary");
+
+  // Toggle buttons -
+  //
+  // These are the hamburger-style buttons in the header nav bar. When the user
+  // clicks, the button transmits the click to the hidden checkboxes used by the
+  // CSS to control whether the sidebar is open or closed.
+  const primaryClickTransmitter = document.querySelector(".primary-toggle");
+  const secondaryClickTransmitter = document.querySelector(".secondary-toggle");
+  [
+    [primaryClickTransmitter, primaryToggle, primarySidebar],
+    [secondaryClickTransmitter, secondaryToggle, secondarySidebar],
+  ].forEach(([clickTransmitter, toggle, sidebar]) => {
+    if (!clickTransmitter) {
+      return;
+    }
+    clone(clickTransmitter)
+    clickTransmitter.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      toggle.checked = !toggle.checked;
+
+      // If we are opening the sidebar, move focus to the first focusable item
+      // in the sidebar
+      if (toggle.checked) {
+        // Note: this selector is not exhaustive, and we may need to update it
+        // in the future
+        const tabStop = sidebar.querySelector("a, button");
+        // use setTimeout because you cannot move focus synchronously during a
+        // click in the handler for the click event
+        setTimeout(() => tabStop.focus(), 100);
+      }
+    });
+  });
+
+  // Escape key -
+  //
+  // When sidebar is open, user should be able to press escape key to close the
+  // sidebar.
+  [
+    [primarySidebar, primaryToggle, primaryClickTransmitter],
+    [secondarySidebar, secondaryToggle, secondaryClickTransmitter],
+  ].forEach(([sidebar, toggle, transmitter]) => {
+    if (!sidebar) {
+      return;
+    }
+    sidebar.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        toggle.checked = false;
+        transmitter.focus();
+      }
+    });
+  });
+
+  // When the <label> overlay is clicked to close the sidebar, return focus to
+  // the opener button in the nav bar.
+  [
+    [primaryToggle, primaryClickTransmitter],
+    [secondaryToggle, secondaryClickTransmitter],
+  ].forEach(([toggle, transmitter]) => {
+    toggle.addEventListener("change", (event) => {
+      if (!event.currentTarget.checked) {
+        transmitter.focus();
+      }
+    });
+  });
+}
+
+documentReady(setupMobileSidebarKeyboardHandlers)
diff --git a/doc/conf.py b/doc/conf.py
index aa190015cf..bf801861ef 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -187,7 +187,8 @@ def get_requirements():
 
 html_js_files = [
     (None, {'body': '{"shimMode": true}', 'type': 'esms-options'}),
-    f'https://cdn.holoviz.org/panel/{js_version}/dist/bundled/reactiveesm/es-module-shims@^1.10.0/dist/es-module-shims.min.js'
+    f'https://cdn.holoviz.org/panel/{js_version}/dist/bundled/reactiveesm/es-module-shims@^1.10.0/dist/es-module-shims.min.js',
+    '_static/toggle.js'
 ]
 
 nbsite_pyodide_conf = {
diff --git a/panel/.eslintrc.js b/panel/.eslintrc.js
index 22c52b0732..abebdc905b 100644
--- a/panel/.eslintrc.js
+++ b/panel/.eslintrc.js
@@ -9,7 +9,7 @@ module.exports = {
   },
   "plugins": ["@typescript-eslint", "@stylistic/eslint-plugin"],
   "extends": [],
-  "ignorePatterns": ["*/dist", "*/theme/**/*.js", ".eslintrc.js", "*/_templates/*.js", "*/template/**/*.js", "examples/*", "scripts/*"],
+  "ignorePatterns": ["*/dist", "*/theme/**/*.js", ".eslintrc.js", "*/_templates/*.js", "*/template/**/*.js", "examples/*", "scripts/*", "doc/_static/*.js"],
   "rules": {
     "@typescript-eslint/ban-types": ["error", {
       "types": {

From d39874c51a0bf13c8303762ecadcfd3b2f05b3bc Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 27 Sep 2024 12:49:01 +0200
Subject: [PATCH 122/164] Bump panel.js version to 1.5.1

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index 03f26afece..799859c56b 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.1-a.3",
+  "version": "1.5.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.1-a.3",
+      "version": "1.5.1",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.6.0",
diff --git a/panel/package.json b/panel/package.json
index 1fbabea19e..d2467022ca 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.1-a.3",
+  "version": "1.5.1",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From 114a60dab050cdda611d0b1c855fe891ca7b2b36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Sat, 28 Sep 2024 11:56:52 +0200
Subject: [PATCH 123/164] CI: Fix bash call (#7331)

* ci: Fix bash script wrongful called

* test

* Revert "test"

This reverts commit 49e8279356a93775738f3aaa79cffdfad4fb087a.
---
 .github/workflows/build.yaml   | 2 +-
 .github/workflows/docs.yaml    | 2 +-
 .github/workflows/gallery.yaml | 2 +-
 .github/workflows/test.yaml    | 8 ++++----
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 24fe4129a3..b726706593 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -13,7 +13,7 @@ on:
 
 defaults:
   run:
-    shell: bash -l {0}
+    shell: bash -e {0}
 
 env:
   PACKAGE: "panel"
diff --git a/.github/workflows/docs.yaml b/.github/workflows/docs.yaml
index 35094b7978..213d5968d7 100644
--- a/.github/workflows/docs.yaml
+++ b/.github/workflows/docs.yaml
@@ -23,7 +23,7 @@ on:
 
 defaults:
   run:
-    shell: bash -l {0}
+    shell: bash -e {0}
 
 env:
   DISPLAY: ":99.0"
diff --git a/.github/workflows/gallery.yaml b/.github/workflows/gallery.yaml
index 101b1c43b6..cc74ad3acd 100644
--- a/.github/workflows/gallery.yaml
+++ b/.github/workflows/gallery.yaml
@@ -23,7 +23,7 @@ jobs:
     runs-on: ubuntu-latest
     defaults:
       run:
-        shell: bash -l {0}
+        shell: bash -e {0}
     steps:
       - name: Checkout
         uses: actions/checkout@v3
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index ed3463dba5..f70ba5d64f 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -29,7 +29,7 @@ concurrency:
 
 defaults:
   run:
-    shell: bash -l {0}
+    shell: bash -e {0}
 
 env:
   DISPLAY: ":99.0"
@@ -200,12 +200,12 @@ jobs:
       - name: Build pyodide wheels
         run: pixi run -e test-ui "python ./scripts/build_pyodide_wheels.py"
       - name: Launch JupyterLab
-        shell: pixi run -e test-ui bash -l {0}
+        shell: pixi run -e test-ui bash -e {0}
         run: |
           jupyter server extension enable panel.io.jupyter_server_extension --sys-prefix
           (jupyter lab --config panel/tests/ui/jupyter_server_test_config.py --port 8887 > /tmp/jupyterlab_server.log 2>&1) &
       - name: Build JupyterLite
-        shell: pixi run -e test-ui bash -l {0}
+        shell: pixi run -e test-ui bash -e {0}
         run: pixi run -e lite lite-build
       - name: Wait for JupyterLab
         uses: ifaxity/wait-on-action@v1.2.1
@@ -227,7 +227,7 @@ jobs:
           if-no-files-found: ignore
       - name: Stop JupyterLab
         if: always()
-        shell: pixi run -e test-ui bash -l {0}
+        shell: pixi run -e test-ui bash -e {0}
         run: |
           jupyter lab stop 8887 || true
       - uses: codecov/codecov-action@v4

From e42736d3bbfbea7bc56006447b955c10a91d78b9 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 30 Sep 2024 12:34:48 +0200
Subject: [PATCH 124/164] Fix regression handling selection on multi-indexed
 Tabulator data (#7336)

---
 panel/tests/ui/widgets/test_tabulator.py | 17 +++++++++++++++++
 panel/tests/widgets/test_tables.py       |  8 ++++----
 panel/widgets/tables.py                  |  7 +++----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/panel/tests/ui/widgets/test_tabulator.py b/panel/tests/ui/widgets/test_tabulator.py
index fc69cbf8cc..403379be83 100644
--- a/panel/tests/ui/widgets/test_tabulator.py
+++ b/panel/tests/ui/widgets/test_tabulator.py
@@ -1543,6 +1543,23 @@ def test_tabulator_selection_selectable_rows(page, df_mixed):
     assert widget.selected_dataframe.equals(expected_selected)
 
 
+@pytest.mark.parametrize('pagination', ['remote', 'local', None])
+def test_tabulator_selection_on_multi_index(page, pagination):
+    index = pd.MultiIndex.from_tuples([(i, j) for i in range(10) for j in range(10)], names=["A", "B"])
+    df = pd.DataFrame(index=index, data={"C": range(100)})
+
+    widget = Tabulator(df, pagination=pagination, selectable='checkbox')
+
+    serve_component(page, widget)
+
+    checkboxes = page.locator('input[type="checkbox"]')
+    expect(checkboxes).to_have_count(widget.initial_page_size+1 if pagination else len(df)+1)
+    checkboxes.nth(1).check()
+    checkboxes.nth(17).check()
+
+    wait_until(lambda: widget.selection == [0, 16], page)
+
+
 def test_tabulator_row_content(page, df_mixed):
     widget = Tabulator(df_mixed, row_content=lambda i: f"{i['str']}-row-content")
 
diff --git a/panel/tests/widgets/test_tables.py b/panel/tests/widgets/test_tables.py
index 661b7f382f..5d82e41070 100644
--- a/panel/tests/widgets/test_tables.py
+++ b/panel/tests/widgets/test_tables.py
@@ -1817,8 +1817,8 @@ def test_tabulator_constant_scalar_filter_on_index_client_side(document, comm, p
 
 @pytest.mark.parametrize('pagination', ['local', 'remote', None])
 def test_tabulator_constant_scalar_filter_on_multi_index_client_side(document, comm, pagination):
-    df = makeMixedDataFrame()
-    table = Tabulator(df.set_index(['A', 'C']), pagination=pagination)
+    df = makeMixedDataFrame().set_index(['A', 'C'])
+    table = Tabulator(df, pagination=pagination)
 
     table.filters = [
         {'field': 'A', 'sorter': 'number', 'type': '=', 'value': 2},
@@ -1831,9 +1831,9 @@ def test_tabulator_constant_scalar_filter_on_multi_index_client_side(document, c
         'B': np.array([0.]),
         'D': np.array(['2009-01-05T00:00:00.000000000'],
                       dtype='datetime64[ns]')
-    })
+    }).set_index(['A', 'C'])
     pd.testing.assert_frame_equal(
-        table._processed, expected if pagination == 'remote' else df[['A', 'C', 'B', 'D']]
+        table._processed, expected if pagination == 'remote' else df
     )
 
 @pytest.mark.parametrize('pagination', ['local', 'remote', None])
diff --git a/panel/widgets/tables.py b/panel/widgets/tables.py
index dad733ae6c..4f1f5748f9 100644
--- a/panel/widgets/tables.py
+++ b/panel/widgets/tables.py
@@ -642,9 +642,7 @@ def _process_df_and_convert_to_cds(self, df: pd.DataFrame) -> tuple[pd.DataFrame
         else:
             default_index = ('level_0' if 'index' in df.columns else 'index')
             indexes = [df.index.name or default_index]
-        if len(indexes) > 1:
-            df = df.reset_index()
-        data = ColumnDataSource.from_df(df)
+        data = ColumnDataSource.from_df(df.reset_index() if len(indexes) > 1 else df)
         if not self.show_index and len(indexes) > 1:
             data = {k: v for k, v in data.items() if k not in indexes}
         return df, {k if isinstance(k, str) else str(k): self._process_column(v) for k, v in data.items()}
@@ -1440,7 +1438,6 @@ def _get_data(self):
             indexes = [df.index.name or default_index]
         if len(indexes) > 1:
             page_df = page_df.reset_index()
-            df = df.reset_index()
         data = ColumnDataSource.from_df(page_df).items()
         return df, {k if isinstance(k, str) else str(k): v for k, v in data}
 
@@ -1448,6 +1445,8 @@ def _get_style_data(self, recompute=True):
         if self.value is None or self.style is None or self.value.empty:
             return {}
         df = self._processed
+        if len(self.indexes) > 1:
+            df = df.reset_index()
         if recompute:
             try:
                 self._computed_styler = styler = df.style

From 45ae5d5778c71e193f02c086176311975a675f41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Mon, 30 Sep 2024 12:35:16 +0200
Subject: [PATCH 125/164] Update panel.js to 1.5.2-a.0

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index 799859c56b..5dfd6d8fe3 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.1",
+  "version": "1.5.2-a.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.1",
+      "version": "1.5.2-a.0",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.6.0",
diff --git a/panel/package.json b/panel/package.json
index d2467022ca..5f4e4ced23 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.1",
+  "version": "1.5.2-a.0",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From 17fc08e3300a2f9eb0dc0ce9c28b34b876e9be9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Mon, 30 Sep 2024 13:33:01 +0200
Subject: [PATCH 126/164] ci: Fixing conda publish step (#7348)

---
 .github/workflows/build.yaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index b726706593..09b47c4e93 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -61,6 +61,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: [conda_build, waiting_room]
     if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    defaults:
+      run:
+        shell: bash -el {0}
     steps:
       - uses: actions/download-artifact@v4
         with:

From 88fb969a4b9b021c8e11c084a9a2cfeb0426b235 Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Mon, 30 Sep 2024 13:49:16 +0200
Subject: [PATCH 127/164] Improve plotly style guide (#7346)

---
 doc/how_to/styling/plotly.md          | 62 +++++++++++++++++++++------
 examples/reference/panes/Plotly.ipynb | 14 +++---
 panel/io/state.py                     |  6 ++-
 3 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/doc/how_to/styling/plotly.md b/doc/how_to/styling/plotly.md
index e24a07bf94..b96ebcd962 100644
--- a/doc/how_to/styling/plotly.md
+++ b/doc/how_to/styling/plotly.md
@@ -1,26 +1,24 @@
 # Style Plotly Plots
 
-This guide addresses how to style Plotly plots displayed using the [Plotly pane](../../reference/panes/Plotly).
+This guide demonstrates how to style Plotly plots using the [Plotly pane](../../reference/panes/Plotly). You can customize your plots with Plotly's built-in templates, available in `plotly.io.templates`. For more details, refer to the [Plotly Templates Guide](https://plotly.com/python/templates/).
 
-Plotly provides a list of built in templates in `plotly.io.templates`. See the [Plotly Templates Guide](https://plotly.com/python/templates/).
-
-The gif below displays an example of what can be achieved with a little styling of the Plotly plot and the `FastListTemplate`.
+The GIF below illustrates the possibilities when you style a Plotly plot with `FastGridTemplate`.
 
 ![PlotlyStyle.gif](https://assets.holoviews.org/panel/thumbnails/gallery/styles/plotly-styles.gif)
 
-## A Plotly Express plot with a custom theme and accent color
+## Creating a Plotly Express Plot with a Custom Theme and Accent Color
 
-In this example we will give the Plotly Express plot a dark theme and a custom accent color.
+In this example, you'll apply a dark theme and a custom accent color to a Plotly Express plot.
 
 ```{pyodide}
 import pandas as pd
 import plotly.express as px
 import plotly.io as pio
-
 import panel as pn
 
 pn.extension("plotly")
 
+# Sample data
 data = pd.DataFrame(
     [
         ("Monday", 7),
@@ -34,23 +32,26 @@ data = pd.DataFrame(
     columns=["Day", "Orders"],
 )
 
+# Function to create the plot
 def plot(template, color):
     fig = px.line(
         data,
         x="Day",
         y="Orders",
         template=template,
-        color_discrete_sequence=(color,),
+        color_discrete_sequence=[color],
         title=f"Template: {template}",
     )
     fig.update_traces(mode="lines+markers", marker=dict(size=10), line=dict(width=4))
     fig.layout.autosize = True
     return fig
 
+# Widget for template selection and color picker
 templates = sorted(pio.templates)
 template = pn.widgets.Select(value="plotly_dark", options=templates, name="Template")
 color = pn.widgets.ColorPicker(value="#F08080", name="Color")
 
+# Display the plot and widgets
 pn.Column(
     pn.Row(template, color),
     pn.pane.Plotly(pn.bind(plot, template, color), sizing_mode="stretch_width"),
@@ -58,29 +59,62 @@ pn.Column(
 ).servable()
 ```
 
-## A Plotly `go.Figure` plot with dark theme
+## Styling a Plotly `go.Figure` Plot with a Dark Theme
 
-In this example we will give the Plotly `go.Figure` plot a dark theme.
+This example shows how to apply a dark theme to a Plotly `go.Figure` plot.
 
 ```{pyodide}
 import pandas as pd
 import plotly.graph_objects as go
-
 import panel as pn
 
 pn.extension("plotly")
 
-TEMPLATE = "plotly_dark"  # "ggplot2", "seaborn", "simple_white", "plotly", "plotly_white", "plotly_dark", "presentation", "xgridoff", "ygridoff", "gridon", "none"
+# Choose a template
+TEMPLATE = "plotly_dark"
 
+# Load data for the plot
 z_data = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv")
 
+# Create a 3D surface plot
 fig = go.Figure(
     data=go.Surface(z=z_data.values),
     layout=go.Layout(
         title="Mt Bruno Elevation",
-    ))
+    )
+)
 fig.layout.autosize = True
-fig.update_layout(template=TEMPLATE, title=f"Mt Bruno Elevation in a '{TEMPLATE}' template")
+fig.update_layout(template=TEMPLATE, title=f"Mt Bruno Elevation in '{TEMPLATE}' template")
 
+# Display the plot
 pn.pane.Plotly(fig, height=500, sizing_mode="stretch_width").servable()
 ```
+
+## Changing the Default Theme in Plotly Express
+
+You can change the default Plotly Express `template` based on the `pn.config.theme` setting:
+
+```python
+import plotly.express as px
+
+px.defaults.template = "plotly_dark" if pn.config.theme == "dark" else "plotly_white"
+```
+
+## Changing Plotly Template Defaults
+
+For example, you can set `paper_bgcolor` and `plot_bgcolor` to transparent:
+
+```python
+import plotly.io as pio
+
+for theme in ["plotly_dark", "plotly_white"]:
+    pio.templates[theme].layout.paper_bgcolor = 'rgba(0,0,0,0)'
+    pio.templates[theme].layout.plot_bgcolor = 'rgba(0,0,0,0)'
+    pio.templates[theme].layout.legend = dict(orientation="h", yanchor="bottom", y=-0.2)
+    pio.templates[theme].layout.bargap = 0.2
+```
+
+## Additional Examples
+
+- [Panel Iris Analysis | PY.CAFE](https://py.cafe/panel-org/panel-iris-analysis).
+- [Plotly Style Dashboard | PY.CAFE](https://py.cafe/panel-org/plotly-style-dashboard).
diff --git a/examples/reference/panes/Plotly.ipynb b/examples/reference/panes/Plotly.ipynb
index aaf9cd22fe..432965b6b3 100644
--- a/examples/reference/panes/Plotly.ipynb
+++ b/examples/reference/panes/Plotly.ipynb
@@ -26,7 +26,7 @@
    "source": [
     "## Parameters:\n",
     "\n",
-    "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
+    "For details on other options for customizing the component see the general [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides as well as the specific [Style Plotly Plots](../../how_to/styling/plotly.md) how-to guide.\n",
     "\n",
     "### Core\n",
     "\n",
@@ -622,12 +622,12 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "\r\n",
-    "\r\n",
-    "### Parent-Child Views\r\n",
-    "\r\n",
-    "A common technique for exploring higher-dimensional datasets is the use of Parent-Child views. This approach allows you to employ a top-down method to initially exing thehree most important dimensions in the parent plot. You can then select a subset of the data points and examine them in greater detail and across additional dimensions.\r\n",
-    "\r\n",
+    "\n",
+    "\n",
+    "### Parent-Child Views\n",
+    "\n",
+    "A common technique for exploring higher-dimensional datasets is the use of Parent-Child views. This approach allows you to employ a top-down method to initially exing thehree most important dimensions in the parent plot. You can then select a subset of the data points and examine them in greater detail and across additional dimensions.\n",
+    "\n",
     "Let's create a plot where Box or Lasso selections in the parent plot update a child plot. We will also customize the action bars using the `config` parameter."
    ]
   },
diff --git a/panel/io/state.py b/panel/io/state.py
index a16fb5fa70..a729100d64 100644
--- a/panel/io/state.py
+++ b/panel/io/state.py
@@ -484,7 +484,11 @@ def as_cached(self, key: str, fn: Callable[[], T], ttl: int = None, **kwargs) ->
 
         Note: Keyword arguments must be hashable.
 
-        Example:
+        Pandas Example:
+
+        >>> data = pn.state.as_cached('data', pd.read_csv, filepath_or_buffer=DATA_URL)
+
+        Function Example:
 
         >>> def load_dataset(name):
         >>>     # some slow operation that uses name to load a dataset....

From e5450ef3766385e6e2f890185be18e7c74fab6e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Mon, 30 Sep 2024 13:49:41 +0200
Subject: [PATCH 128/164] ci: Add result test step (#7345)

---
 .github/workflows/test.yaml | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index f70ba5d64f..f1ce5125cb 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -271,3 +271,13 @@ jobs:
       - name: Test Type
         run: |
           pixi run -e ${{ matrix.environment }} test-type || echo "Failed"
+
+  result_test_suite:
+    name: result:test
+    needs: [unit_test_suite, ui_test_suite, core_test_suite, type_test_suite]
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+      - name: check for failures
+        if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')
+        run: echo job failed && exit 1

From aeab86b1228ebd2eed8f90665274097c2e875dfa Mon Sep 17 00:00:00 2001
From: Jerry Wu <jerry@ycwu.space>
Date: Mon, 30 Sep 2024 19:51:25 +0800
Subject: [PATCH 129/164] Fix typo for FastListTemplate.ipynb (#7339)

---
 examples/reference/templates/FastListTemplate.ipynb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/reference/templates/FastListTemplate.ipynb b/examples/reference/templates/FastListTemplate.ipynb
index e72459ba82..05b91e5bf9 100644
--- a/examples/reference/templates/FastListTemplate.ipynb
+++ b/examples/reference/templates/FastListTemplate.ipynb
@@ -4,7 +4,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "The `FastGridTemplate` is a simple extension of the basic template that uses the [Fast design library](https://www.fast.design/) and applies the `panel.theme.Fast` design system by default. It is a list-like variant where the `main` area acts like a list-like container, unlike the grid-like templates such as `ReactTemplate` and `FastGridTemplate`.\n",
+    "The `FastListTemplate` is a simple extension of the basic template that uses the [Fast design library](https://www.fast.design/) and applies the `panel.theme.Fast` design system by default. It is a list-like variant where the `main` area acts like a list-like container, unlike the grid-like templates such as `ReactTemplate` and `FastGridTemplate`.\n",
     "\n",
     "## Basic Templates\n",
     "\n",

From 394d603314b4fc9a40fc3b7ffdf498dd3b114a0b Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Mon, 30 Sep 2024 13:52:23 +0200
Subject: [PATCH 130/164] fix custom component docstrings (#7342)

---
 panel/custom.py | 120 ++++++++++++++++++++++++++++++++++++------------
 1 file changed, 90 insertions(+), 30 deletions(-)

diff --git a/panel/custom.py b/panel/custom.py
index 8b8ed4bbbe..1e429c8dc9 100644
--- a/panel/custom.py
+++ b/panel/custom.py
@@ -48,14 +48,41 @@
 
 
 class PyComponent(Viewable, Layoutable):
-    """
+    '''
     The `PyComponent` combines the convenience of `Viewer` components
     that allow creating custom components by declaring a `__panel__`
     method with the ability of controlling layout and styling
     related parameters directly on the class. Internally the
     `PyComponent` will forward layout parameters to the underlying
     object, which is created lazily on render.
-    """
+
+    Reference: https://panel.holoviz.org/reference/custom_components/PyComponent.html
+
+    ```python
+    import panel as pn
+    import param
+
+    pn.extension()
+
+    class CounterButton(pn.custom.PyComponent, pn.widgets.WidgetBase):
+
+        value = param.Integer(default=0)
+
+        def __panel__(self):
+            return pn.widgets.Button(
+                name=self._button_name, on_click=self._on_click
+            )
+
+        def _on_click(self, event):
+            self.value += 1
+
+        @param.depends("value")
+        def _button_name(self):
+            return f"count is {self.value}"
+
+    CounterButton().servable()
+    ```
+    '''
 
     def __init__(self, **params):
         super().__init__(**params)
@@ -156,26 +183,26 @@ class ReactiveESM(ReactiveCustomBase, metaclass=ReactiveESMMetaclass):
     variable. Use this to define a `render` function as shown in the
     example below.
 
-    ```
+    ```python
     import panel as pn
     import param
 
     pn.extension()
 
-    class CounterButton(pn.ReactiveESM):
+    class CounterButton(pn.custom.ReactiveESM):
 
         value = param.Integer()
 
         _esm = """
-        export function render({ data }) {
+        export function render({ model }) {
             let btn = document.createElement("button");
-            btn.innerHTML = `count is ${data.value}`;
+            btn.innerHTML = `count is ${model.value}`;
             btn.addEventListener("click", () => {
-                data.value += 1
+                model.value += 1
             });
-            data.watch(() => {
-                btn.innerHTML = `count is ${data.value}`;
-            }, 'value')
+            model.on('value', () => {
+                btn.innerHTML = `count is ${model.value}`;
+            })
             return btn
         }
         """
@@ -503,26 +530,28 @@ class JSComponent(ReactiveESM):
     variable. Use this to define a `render` function as shown in the
     example below.
 
-    ```
+    Reference: https://panel.holoviz.org/reference/custom_components/JSComponent.html
+
+    ```python
     import panel as pn
     import param
 
     pn.extension()
 
-    class CounterButton(JSComponent):
+    class CounterButton(pn.custom.JSComponent):
 
         value = param.Integer()
 
         _esm = """
-        export function render({ data }) {
+        export function render({ model }) {
             let btn = document.createElement("button");
-            btn.innerHTML = `count is ${data.value}`;
+            btn.innerHTML = `count is ${model.value}`;
             btn.addEventListener("click", () => {
-                data.value += 1
+                model.value += 1
             });
-            data.watch(() => {
-                btn.innerHTML = `count is ${data.value}`;
-            }, 'value')
+            model.on('value', () => {
+                btn.innerHTML = `count is ${model.value}`;
+            })
             return btn
         }
         """
@@ -545,23 +574,24 @@ class ReactComponent(ReactiveESM):
     variable. Use this to define a `render` function as shown in the
     example below.
 
-    ```
+    Reference: https://panel.holoviz.org/reference/custom_components/ReactComponent.html
+
+    ```python
     import panel as pn
     import param
 
-    pn.extension()
-
-    class CounterButton(ReactComponent):
+    class CounterButton(pn.custom.ReactComponent):
 
         value = param.Integer()
 
         _esm = """
-        export function render({ data, state }) {
-          return (
-            <>
-              <button onClick={() => { data.value += 1 }}>{state.value}</button>
-            </>
-          )
+        export function render({model}) {
+        const [value, setValue] = model.useState("value");
+        return (
+            <button onClick={e => setValue(value+1)}>
+            count is {value}
+            </button>
+        )
         }
         """
 
@@ -631,12 +661,42 @@ def _process_importmap(cls):
         }
 
 class AnyWidgetComponent(ReactComponent):
-    """
+    '''
     The `AnyWidgetComponent` allows you to create custom Panel components
     in the style of an AnyWidget component. Specifically this component
     type creates shims that make it possible to reuse AnyWidget ESM code
     as is, without having to adapt the callbacks to use Bokeh APIs.
-    """
+
+    Reference: https://panel.holoviz.org/reference/custom_components/AnyWidgetComponent.html
+
+    ```python
+    import param
+    import panel as pn
+
+    pn.extension()
+
+    class CounterWidget(pn.custom.AnyWidgetComponent):
+        _esm = """
+        function render({ model, el }) {
+        let count = () => model.get("value");
+        let btn = document.createElement("button");
+        btn.innerHTML = `count is ${count()}`;
+        btn.addEventListener("click", () => {
+            model.set("value", count() + 1);
+            model.save_changes();
+        });
+        model.on("change:value", () => {
+            btn.innerHTML = `count is ${count()}`;
+        });
+        el.appendChild(btn);
+        }
+        export default { render };
+        """
+        value = param.Integer()
+
+    CounterWidget().servable()
+    ```
+    '''
 
     __abstract = True
 

From 07481b998e06708af38cd826786afdb4cbf726ac Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Tue, 1 Oct 2024 09:25:33 +0200
Subject: [PATCH 131/164] checked-indicator color (#7341)

---
 panel/template/fast/fast.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/panel/template/fast/fast.css b/panel/template/fast/fast.css
index c922c1a925..fce150cd0a 100644
--- a/panel/template/fast/fast.css
+++ b/panel/template/fast/fast.css
@@ -2,6 +2,10 @@
   --track-width: 2;
 }
 
+#header-design-provider fast-switch::part(checked-indicator) {
+  --neutral-foreground-rest: #181818;
+}
+
 html {
   scrollbar-face-color: var(--neutral-fill-rest);
   scrollbar-base-color: var(--neutral-fill-rest);

From 3e06a455d92541e8026813c1bff525053a4a5096 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Wed, 2 Oct 2024 09:35:52 +0200
Subject: [PATCH 132/164] Ensure sidebar toggle patch is loaded correctly
 (#7349)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Ensure sidebar toggle patch is loaded correctly

* Fix toggle.js

* Add listener on cloned button

---------

Co-authored-by: Simon Høxbro Hansen <simon.hansen@me.com>
---
 doc/_static/toggle.js | 12 ++++--------
 doc/conf.py           |  2 +-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/doc/_static/toggle.js b/doc/_static/toggle.js
index 799b8cf71b..d49442cf13 100644
--- a/doc/_static/toggle.js
+++ b/doc/_static/toggle.js
@@ -1,14 +1,10 @@
-export function documentReady(callback) {
-  if (document.readyState != "loading") callback();
-  else document.addEventListener("DOMContentLoaded", callback);
-}
-
 function clone(node) {
   var new_element = node.cloneNode(true);
   node.parentNode.replaceChild(new_element, node);
+  return new_element
 }
 
-export function documentReady(callback) {
+function documentReady(callback) {
   if (document.readyState != "loading") callback();
   else document.addEventListener("DOMContentLoaded", callback);
 }
@@ -44,8 +40,8 @@ function setupMobileSidebarKeyboardHandlers() {
     if (!clickTransmitter) {
       return;
     }
-    clone(clickTransmitter)
-    clickTransmitter.addEventListener("click", (event) => {
+    const cloned = clone(clickTransmitter)
+    cloned.addEventListener("click", (event) => {
       event.preventDefault();
       event.stopPropagation();
       toggle.checked = !toggle.checked;
diff --git a/doc/conf.py b/doc/conf.py
index bf801861ef..a6db371825 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -188,7 +188,7 @@ def get_requirements():
 html_js_files = [
     (None, {'body': '{"shimMode": true}', 'type': 'esms-options'}),
     f'https://cdn.holoviz.org/panel/{js_version}/dist/bundled/reactiveesm/es-module-shims@^1.10.0/dist/es-module-shims.min.js',
-    '_static/toggle.js'
+    'toggle.js'
 ]
 
 nbsite_pyodide_conf = {

From 336b99546037eb8ffbd9403898bfcfc403647c39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Thu, 3 Oct 2024 17:30:23 +0200
Subject: [PATCH 133/164] fix: Step in DateSlider (#7353)

---
 examples/reference/widgets/DateSlider.ipynb | 2 +-
 panel/widgets/slider.py                     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/reference/widgets/DateSlider.ipynb b/examples/reference/widgets/DateSlider.ipynb
index 61f1d8b385..82c5f94c57 100644
--- a/examples/reference/widgets/DateSlider.ipynb
+++ b/examples/reference/widgets/DateSlider.ipynb
@@ -31,7 +31,7 @@
     "* **``end``** (date or datetime): The range's upper bound\n",
     "* **``value``** (date or datetime): The selected value as a datetime type\n",
     "* **``value_throttled``** (datetime): The selected value as a datetime type throttled until mouseup\n",
-    "* **``step``** (number): The selected step i the slider in milliseconds\n",
+    "* **``step``** (integer): The selected step i the slider in days\n",
     "\n",
     "##### Display\n",
     "\n",
diff --git a/panel/widgets/slider.py b/panel/widgets/slider.py
index 3af06d52a1..fc65e60024 100644
--- a/panel/widgets/slider.py
+++ b/panel/widgets/slider.py
@@ -279,8 +279,8 @@ class DateSlider(_SliderBase):
     as_datetime = param.Boolean(default=False, doc="""
         Whether to store the date as a datetime.""")
 
-    step = param.Number(default=None, doc="""
-        The step parameter in milliseconds.""")
+    step = param.Integer(default=1, bounds=(1, None), doc="""
+        The step parameter in days.""")
 
     format = param.String(default=None, doc="""
         Datetime format used for parsing and formatting the date.""")

From 615a43c5ae6e2408f2ec509f1ff2a77f03cd8f6d Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Thu, 3 Oct 2024 18:05:24 +0200
Subject: [PATCH 134/164] Fix and update WebLLM example (#7351)

---
 doc/gallery/index.md          | 4 ++--
 examples/gallery/webllm.ipynb | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/doc/gallery/index.md b/doc/gallery/index.md
index c489586b75..9fc3b161c8 100644
--- a/doc/gallery/index.md
+++ b/doc/gallery/index.md
@@ -182,7 +182,7 @@ Interactively apply a XGBoost classifier on the Iris dataset.
 
 Interact with an LLM running in your browser using the `ChatInterface`.
 +++
-[See source](WebLLM)
+[See source](webllm)
 :::
 
 
@@ -293,7 +293,7 @@ streaming_videostream
 vtk_interactive
 vtk_slicer
 vtk_warp
-WebLLM
+webllm
 windturbines
 xgboost_classifier
 ```
diff --git a/examples/gallery/webllm.ipynb b/examples/gallery/webllm.ipynb
index e2740de81e..f63f9b6679 100644
--- a/examples/gallery/webllm.ipynb
+++ b/examples/gallery/webllm.ipynb
@@ -34,9 +34,9 @@
     "MODELS = {\n",
     "    'SmolLM (130MB)': 'SmolLM-135M-Instruct-q4f16_1-MLC',\n",
     "    'TinyLlama-1.1B-Chat (675 MB)': 'TinyLlama-1.1B-Chat-v1.0-q4f16_1-MLC-1k',\n",
-    "    'Gemma-2b (1895 MB)': 'gemma-2-2b-it-q4f16_1-MLC',\n",
-    "    'Mistral-7b-Instruct (4570 MB)': 'Mistral-7B-Instruct-v0.3-q4f16_1-MLC',\n",
-    "    'Llama-3.1-8b-Instruct (4598 MB)': 'Llama-3-8B-Instruct-q4f16_1-MLC-1k',\n",
+    "    'Gemma-2b (2GB)': 'gemma-2-2b-it-q4f16_1-MLC',\n",
+    "    'Llama-3.2-3B-Instruct (2.2GB)': 'Llama-3.2-3B-Instruct-q4f16_1-MLC',\n",
+    "    'Mistral-7b-Instruct (5GB)': 'Mistral-7B-Instruct-v0.3-q4f16_1-MLC',\n",
     "}\n",
     "\n",
     "class WebLLM(JSComponent):\n",

From a34632568976ab3e3348711c8fcbb8e7e58bad48 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 3 Oct 2024 23:41:20 +0200
Subject: [PATCH 135/164] Update CHANGELOG

---
 CHANGELOG.md          | 25 ++++++++++++++++++++++++-
 doc/about/releases.md | 24 ++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb84d627ef..9562df7ac3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,29 @@
 # Releases
 
+## Version 1.5.2
+
+Date: 2024-10-03
+
+This release is a small patch release primarily addressing a regression handling selections on multi-indexed data on the Tabulator widget along with a number of documentation improvements. Many thanks to @jrycw along with @MarcSkovMadsen, @Hoxbro and @philippjfr for their contributions to this release.
+
+### Bug fixes
+
+- Fix regression handling selection on multi-indexed `Tabulator` data ([#7336](https://github.com/holoviz/panel/pull/7336))
+- Fix Fast template theme toggle color ([#7341](https://github.com/holoviz/panel/pull/7341))
+
+### Documentation
+
+- Fix typo for FastListTemplate reference example ([#7339](https://github.com/holoviz/panel/pull/7339))
+- Fix custom component docstrings ([#7342](https://github.com/holoviz/panel/pull/7342))
+- Improve plotly style guide ([#7346](https://github.com/holoviz/panel/pull/7346))
+- Ensure sidebar toggle patch is loaded correctly ([#7349](https://github.com/holoviz/panel/pull/7349))
+- Fix and update WebLLM example ([#7351](https://github.com/holoviz/panel/pull/7351))
+- Correctly document step unit on `DateSlider` ([#7353](https://github.com/holoviz/panel/pull/7353))
+
 ## Version 1.5.1
 
+Date: 2024-09-27
+
 This release primarily focuses on a number of tweaks and enhancements for the documentation and also resolves a number of bugs related to `Tabulator` rendering and the new `FastAPI` integration. As always, many thanks to our contributors including our new contributors @dennisjlee and @alexcjohnson, our returning contributors @thuydotm and @jbednar and the core maintainer team @hoxbro, @maximlt, @ahuang11, @MarcSkovMadsen and @philippjfr.
 
 ### Enhancements
@@ -41,9 +63,10 @@ This release primarily focuses on a number of tweaks and enhancements for the do
 - Tweak best practices ([#7301](https://github.com/holoviz/panel/pull/7301))
 - Fix typo in JPG component docs ([#7323](https://github.com/holoviz/panel/pull/7323))
 
-
 ## Version 1.5.0
 
+Date: 2024-09-13
+
 This release, while technically a minor release hugely expands the scope of what is possible in Panel. In particular the introduction of the new `panel.custom` module makes it trivially easy to create new JS and React based components using modern tooling, a first-class developer experience and support for compilation and bundling. We are incredibly excited to see which new components you build using this approach. This release also includes native integration with FastAPI, such that you can now run Panel apps natively on an existing FastAPI server. We also introduce a number of new components, improved the developer experience, and squashed a huge number of bugs, particularly for the `Tabulator` component.
 
 We really appreciate all the work that went into this release from 21 separate contributors. In particular we would like to welcome our new contributors @twobitunicorn, @justinwiley, @dwr-psandhu, @jordansamuels, @gandhis1, @jeffrey-hicks, @kdheepak, @sjdemartini, @alfredocarella and @pmeier. Next we want to recognize our returning contributors @cdeil, @Coderambling, @jrycw and @TBym, and finally the dedicated crew of core contributors which includes @Hoxbro, @MarcSkovMadsen, @ahuang11, @maximlt, @mattpap, @jbednar and @philippjfr.
diff --git a/doc/about/releases.md b/doc/about/releases.md
index 6f5526a86d..8ca3667cf5 100644
--- a/doc/about/releases.md
+++ b/doc/about/releases.md
@@ -2,8 +2,30 @@
 
 See [the HoloViz blog](https://blog.holoviz.org/#category=panel) for a visual summary of the major features added in each release.
 
+## Version 1.5.2
+
+Date: 2024-10-03
+
+This release is a small patch release primarily addressing a regression handling selections on multi-indexed data on the Tabulator widget along with a number of documentation improvements. Many thanks to @jrycw along with @MarcSkovMadsen, @Hoxbro and @philippjfr for their contributions to this release.
+
+### Bug fixes
+
+- Fix regression handling selection on multi-indexed `Tabulator` data ([#7336](https://github.com/holoviz/panel/pull/7336))
+- Fix Fast template theme toggle color ([#7341](https://github.com/holoviz/panel/pull/7341))
+
+### Documentation
+
+- Fix typo for FastListTemplate reference example ([#7339](https://github.com/holoviz/panel/pull/7339))
+- Fix custom component docstrings ([#7342](https://github.com/holoviz/panel/pull/7342))
+- Improve plotly style guide ([#7346](https://github.com/holoviz/panel/pull/7346))
+- Ensure sidebar toggle patch is loaded correctly ([#7349](https://github.com/holoviz/panel/pull/7349))
+- Fix and update WebLLM example ([#7351](https://github.com/holoviz/panel/pull/7351))
+- Correctly document step unit on `DateSlider` ([#7353](https://github.com/holoviz/panel/pull/7353))
+
 ## Version 1.5.1
 
+Date: 2024-09-27
+
 This release primarily focuses on a number of tweaks and enhancements for the documentation and also resolves a number of bugs related to `Tabulator` rendering and the new `FastAPI` integration. As always, many thanks to our contributors including our new contributors @dennisjlee and @alexcjohnson, our returning contributors @thuydotm and @jbednar and the core maintainer team @hoxbro, @maximlt, @ahuang11, @MarcSkovMadsen and @philippjfr.
 
 ### Enhancements
@@ -45,6 +67,8 @@ This release primarily focuses on a number of tweaks and enhancements for the do
 
 ## Version 1.5.0
 
+Date: 2024-09-13
+
 This release, while technically a minor release hugely expands the scope of what is possible in Panel. In particular the introduction of the new `panel.custom` module makes it trivially easy to create new JS and React based components using modern tooling, a first-class developer experience and support for compilation and bundling. We are incredibly excited to see which new components you build using this approach. This release also includes native integration with FastAPI, such that you can now run Panel apps natively on an existing FastAPI server. We also introduce a number of new components, improved the developer experience, and squashed a huge number of bugs, particularly for the `Tabulator` component.
 
 We really appreciate all the work that went into this release from 21 separate contributors. In particular we would like to welcome our new contributors @twobitunicorn, @justinwiley, @dwr-psandhu, @jordansamuels, @gandhis1, @jeffrey-hicks, @kdheepak, @sjdemartini, @alfredocarella and @pmeier. Next we want to recognize our returning contributors @cdeil, @Coderambling, @jrycw and @TBym, and finally the dedicated crew of core contributors which includes @Hoxbro, @MarcSkovMadsen, @ahuang11, @maximlt, @mattpap, @jbednar and @philippjfr.

From 5ef8909aeacde7f0896f4b352e751d9a405a8867 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 3 Oct 2024 23:41:59 +0200
Subject: [PATCH 136/164] Bump panel.js version to 1.5.2

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index 5dfd6d8fe3..2c28446633 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.2-a.0",
+  "version": "1.5.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.2-a.0",
+      "version": "1.5.2",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.6.0",
diff --git a/panel/package.json b/panel/package.json
index 5f4e4ced23..d03fcdd0c2 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.2-a.0",
+  "version": "1.5.2",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From 43ae5a11a7298324f313b0ba745dc92b6f74fbd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Mon, 7 Oct 2024 11:12:45 +0200
Subject: [PATCH 137/164] chore: Update pre-commit (#7366)

---
 .pre-commit-config.yaml | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 9ac0b97142..32e84421e8 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -1,10 +1,7 @@
-# This is the configuration for pre-commit, a local framework for managing pre-commit hooks
-#   Check out the docs at: https://pre-commit.com/
-
-default_stages: [commit]
+default_stages: [pre-commit]
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.6.0
+    rev: v5.0.0
     hooks:
       - id: check-builtin-literals
       - id: check-case-conflict
@@ -17,7 +14,7 @@ repos:
         exclude: \.min\.js$
       - id: trailing-whitespace
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.6.6
+    rev: v0.6.9
     hooks:
       - id: ruff
         files: panel/
@@ -50,7 +47,7 @@ repos:
       - id: oxipng
         stages: [manual]
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.10.0
+    rev: v9.12.0
     hooks:
       - id: eslint
         args: ['-c', 'panel/.eslintrc.js', 'panel/*.ts', 'panel/models/**/*.ts', '--fix']

From 25ec66dac0dc68b695191655a55a17722141c422 Mon Sep 17 00:00:00 2001
From: Christian Ibeto <152868422+chryshumble@users.noreply.github.com>
Date: Tue, 8 Oct 2024 08:23:51 +0100
Subject: [PATCH 138/164] Corrected styles in doc (#7371)

---
 examples/reference/panes/GIF.ipynb   | 2 +-
 examples/reference/panes/Image.ipynb | 2 +-
 examples/reference/panes/JPG.ipynb   | 2 +-
 examples/reference/panes/PDF.ipynb   | 2 +-
 examples/reference/panes/PNG.ipynb   | 2 +-
 examples/reference/panes/SVG.ipynb   | 2 +-
 examples/reference/panes/Str.ipynb   | 2 +-
 examples/reference/panes/WebP.ipynb  | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/examples/reference/panes/GIF.ipynb b/examples/reference/panes/GIF.ipynb
index ad2ec1a320..ba11c903d1 100644
--- a/examples/reference/panes/GIF.ipynb
+++ b/examples/reference/panes/GIF.ipynb
@@ -26,7 +26,7 @@
     "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
     "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
     "* **``object``** (str or object): The string to display. If a non-string type is supplied the repr is displayed. \n",
-    "* **``style``** (dict): Dictionary specifying CSS styles\n",
+    "* **``styles``** (dict): Dictionary specifying CSS styles\n",
     "\n",
     "___"
    ]
diff --git a/examples/reference/panes/Image.ipynb b/examples/reference/panes/Image.ipynb
index 58090f3cf3..bcd5f62efe 100644
--- a/examples/reference/panes/Image.ipynb
+++ b/examples/reference/panes/Image.ipynb
@@ -37,7 +37,7 @@
     "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
     "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
     "* **``object``** (str or object): The Image file to display. Can be a string pointing to a local or remote file, or an object with a ``_repr_extension_`` method, where extension is an image file extension.\n",
-    "* **``style``** (dict): Dictionary specifying CSS styles\n",
+    "* **``styles``** (dict): Dictionary specifying CSS styles\n",
     "\n",
     "___"
    ]
diff --git a/examples/reference/panes/JPG.ipynb b/examples/reference/panes/JPG.ipynb
index 2f08b9a73a..e12ee8e049 100644
--- a/examples/reference/panes/JPG.ipynb
+++ b/examples/reference/panes/JPG.ipynb
@@ -26,7 +26,7 @@
     "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
     "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
     "* **``object``** (str or object): The JPEG file to display.  Can be a string pointing to a local or remote file, or an object with a ``_repr_jpeg_`` method.\n",
-    "* **``style``** (dict): Dictionary specifying CSS styles\n",
+    "* **``styles``** (dict): Dictionary specifying CSS styles\n",
     "\n",
     "___"
    ]
diff --git a/examples/reference/panes/PDF.ipynb b/examples/reference/panes/PDF.ipynb
index 7a9306b36e..3e7a3f0c69 100644
--- a/examples/reference/panes/PDF.ipynb
+++ b/examples/reference/panes/PDF.ipynb
@@ -24,7 +24,7 @@
     "* **``embed``** (boolean, default=False): If given a URL to a file this determines whether the image will be embedded as base64 or merely linked to.\n",
     "* **``object``** (str or object): The PDF file to display. Can be a string pointing to a local or remote file, or an object with a ``_repr_pdf_`` method.\n",
     "* **``start_page``** (int): Start page of the `.pdf` file when loading the page. \n",
-    "* **``style``** (dict): Dictionary specifying CSS styles.\n",
+    "* **``styles``** (dict): Dictionary specifying CSS styles.\n",
     "\n",
     "___"
    ]
diff --git a/examples/reference/panes/PNG.ipynb b/examples/reference/panes/PNG.ipynb
index 5769b6f1e2..121d584e61 100644
--- a/examples/reference/panes/PNG.ipynb
+++ b/examples/reference/panes/PNG.ipynb
@@ -26,7 +26,7 @@
     "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
     "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
     "* **``object``** (str or object): The PNG file to display. Can be a string pointing to a local or remote file, or an object with a ``_repr_png_`` method.\n",
-    "* **``style``** (dict): Dictionary specifying CSS styles\n",
+    "* **``styles``** (dict): Dictionary specifying CSS styles\n",
     "\n",
     "___"
    ]
diff --git a/examples/reference/panes/SVG.ipynb b/examples/reference/panes/SVG.ipynb
index ad7e3f45a6..7f990fb28d 100644
--- a/examples/reference/panes/SVG.ipynb
+++ b/examples/reference/panes/SVG.ipynb
@@ -27,7 +27,7 @@
     "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
     "* **``encode``** (bool, default=True): Whether to base64 encode the SVG, when enabled SVG links may not work while disabling encoding will prevent image scaling from working.\n",
     "* **``object``** (str or object): The svg file to display. Can be a string pointing to a local or remote file, or an object with a ``_repr_svg_`` method.\n",
-    "* **``style``** (dict): Dictionary specifying CSS styles\n",
+    "* **``styles``** (dict): Dictionary specifying CSS styles\n",
     "\n",
     "___"
    ]
diff --git a/examples/reference/panes/Str.ipynb b/examples/reference/panes/Str.ipynb
index 62478ab457..70d68a3297 100644
--- a/examples/reference/panes/Str.ipynb
+++ b/examples/reference/panes/Str.ipynb
@@ -26,7 +26,7 @@
     "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
     "\n",
     "* **``object``** (str or object): The string to display. If a non-string type is supplied, the `repr` of that object is displayed. \n",
-    "* **``style``** (dict): Dictionary specifying CSS styles\n",
+    "* **``styles``** (dict): Dictionary specifying CSS styles\n",
     "\n",
     "___"
    ]
diff --git a/examples/reference/panes/WebP.ipynb b/examples/reference/panes/WebP.ipynb
index c511ae8e07..bec9e03502 100644
--- a/examples/reference/panes/WebP.ipynb
+++ b/examples/reference/panes/WebP.ipynb
@@ -26,7 +26,7 @@
     "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
     "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
     "* **``object``** (str or object): The PNG file to display. Can be a string pointing to a local or remote file, or an object with a ``_repr_png_`` method.\n",
-    "* **``style``** (dict): Dictionary specifying CSS styles\n",
+    "* **``styles``** (dict): Dictionary specifying CSS styles\n",
     "\n",
     "___"
    ]

From 4e146af86c1c6d81147e499a5705841a0512c3ed Mon Sep 17 00:00:00 2001
From: Theom <49269671+TheoMathurin@users.noreply.github.com>
Date: Tue, 8 Oct 2024 10:12:21 +0200
Subject: [PATCH 139/164] Prevent pipeline network plot from linking with other
 plots (#7372)

---
 panel/pipeline.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/panel/pipeline.py b/panel/pipeline.py
index 84eacc7eab..aa475b983a 100644
--- a/panel/pipeline.py
+++ b/panel/pipeline.py
@@ -523,9 +523,10 @@ def tap_renderer(plot, element):
             yoffset=-.30, default_tools=[], axiswise=True, backend='bokeh'
         )
         plot = (graph * labels * nodes) if self._linear else (graph * nodes)
+        xlim = (-0.25, depth + 0.25)
         plot.opts(
             xaxis=None, yaxis=None, min_width=400, responsive=True,
-            show_frame=False, height=height, xlim=(-0.25, depth+0.25),
+            show_frame=False, height=height, xlim=xlim, shared_axes=False,
             ylim=(0, 1), default_tools=['hover'], toolbar=None, backend='bokeh'
         )
         return plot

From 114a25bfec0b43dcc0a721a6bbbb38550f14d8e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Wed, 9 Oct 2024 14:13:07 +0200
Subject: [PATCH 140/164] docs: Update nested tabulator example (#7379)

---
 examples/reference/widgets/Tabulator.ipynb | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/examples/reference/widgets/Tabulator.ipynb b/examples/reference/widgets/Tabulator.ipynb
index 3f63ca0545..1feb474bf3 100644
--- a/examples/reference/widgets/Tabulator.ipynb
+++ b/examples/reference/widgets/Tabulator.ipynb
@@ -282,16 +282,20 @@
    "outputs": [],
    "source": [
     "options = {\n",
-    "    \"A\": [1, 2, 3, 4, 5],\n",
-    "    \"B\": {\"1\": [6, 7, 8, 9, 10], \"2\": [11, 12, 13, 14, 15]},\n",
+    "    \"A\": [\"A.1\", \"A.2\", \"A.3\", \"A.4\", \"A.5\"],\n",
+    "    \"B\": {\n",
+    "        \"1\": [\"B1.1\", \"B1.2\", \"B1.3\"],\n",
+    "        \"2\": [\"B2.1\", \"B2.2\", \"B2.3\"],\n",
+    "        \"3\": [\"B3.1\", \"B3.2\", \"B3.3\"],\n",
+    "    },\n",
     "}\n",
     "tabulator_editors = {\n",
     "    \"0\": {\"type\": \"list\", \"values\": [\"A\", \"B\"]},\n",
-    "    \"1\": {\"type\": \"list\", \"values\": [1, 2]},\n",
-    "    \"2\": {\"type\": \"nested\", \"options\": options, \"lookup_order\": [\"0\", \"1\"]},\n",
+    "    \"1\": {\"type\": \"list\", \"values\": [1, 2, 3]},\n",
+    "    \"Nested Selection\": {\"type\": \"nested\", \"options\": options, \"lookup_order\": [\"0\", \"1\"]},\n",
     "}\n",
     "\n",
-    "nested_df = pd.DataFrame({\"0\": [\"A\", \"B\"], \"1\": [1, 2], \"2\": [None, None]})\n",
+    "nested_df = pd.DataFrame({\"0\": [\"A\", \"B\", \"A\"], \"1\": [1, 2, 3], \"Nested Selection\": [None, None, None]})\n",
     "nested_table = pn.widgets.Tabulator(nested_df, editors=tabulator_editors, show_index=False)\n",
     "nested_table"
    ]

From 6c0aaaa432f6d973f68c4613692058f5098ac4ce Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 9 Oct 2024 14:13:51 +0200
Subject: [PATCH 141/164] Bump django from 3.2.25 to 4.2.16 in
 /examples/apps/django_multi_apps (#7376)

---
 examples/apps/django_multi_apps/requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/apps/django_multi_apps/requirements.txt b/examples/apps/django_multi_apps/requirements.txt
index 796ea42098..4f6ab137f3 100644
--- a/examples/apps/django_multi_apps/requirements.txt
+++ b/examples/apps/django_multi_apps/requirements.txt
@@ -10,7 +10,7 @@ colorcet==2.0.5
 constantly==15.1.0
 cryptography==43.0.1
 daphne==2.4.1
-Django==3.2.25
+Django==4.2.16
 holoviews==1.13.2
 hvplot==0.5.2
 hyperlink==20.0.1

From 7dd8908108700611a55de646cac26207f0f5c0a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Wed, 9 Oct 2024 14:40:27 +0200
Subject: [PATCH 142/164] ci: Update pixi channels (#7378)

---
 pixi.toml | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/pixi.toml b/pixi.toml
index 4dbf55e1c3..d9b80db49c 100644
--- a/pixi.toml
+++ b/pixi.toml
@@ -52,9 +52,6 @@ python = "3.11.*"
 [feature.py312.dependencies]
 python = "3.12.*"
 
-[feature.py313]
-channels = ["pyviz/label/dev", "bokeh/label/rc", "conda-forge/label/python_rc", "conda-forge"]
-
 [feature.py313.dependencies]
 python = "3.13.*"
 
@@ -160,7 +157,7 @@ test-example = 'pytest -n logical --dist loadscope --nbval-lax examples'
 nbval = "*"
 
 [feature.test-ui]
-channels = ["pyviz/label/dev", "bokeh/label/rc", "microsoft", "conda-forge"]
+channels = ["microsoft"]
 
 [feature.test-ui.dependencies]
 playwright = { version = "*", channel = "microsoft" }

From d491f91df3e9c158e159b0684c2ec364121e3c63 Mon Sep 17 00:00:00 2001
From: Amit Kumar <dtu.amit@gmail.com>
Date: Thu, 10 Oct 2024 13:48:00 +0530
Subject: [PATCH 143/164] Fix oauth guest endpoint (#7385)

---
 panel/io/server.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/panel/io/server.py b/panel/io/server.py
index 78107b388c..53ab85ec6c 100644
--- a/panel/io/server.py
+++ b/panel/io/server.py
@@ -1021,7 +1021,8 @@ def flask_handler(slug, app):
             logout_endpoint=logout_endpoint,
             login_template=login_template,
             logout_template=logout_template,
-            error_template=oauth_error_template
+            error_template=oauth_error_template,
+            guest_endpoints=oauth_guest_endpoints,
         )
     if oauth_key:
         config.oauth_key = oauth_key # type: ignore

From ef3135428387358b9f331807d12faeab67553a06 Mon Sep 17 00:00:00 2001
From: Amit Kumar <dtu.amit@gmail.com>
Date: Thu, 10 Oct 2024 13:48:33 +0530
Subject: [PATCH 144/164] Fix type hint for `oauth_guest_endpoints` (#7383)

* Fix type hint for oauth_guest_endpoints

* fix pre-commit
---
 panel/io/server.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/io/server.py b/panel/io/server.py
index 53ab85ec6c..6165b9f4dc 100644
--- a/panel/io/server.py
+++ b/panel/io/server.py
@@ -825,7 +825,7 @@ def get_server(
     oauth_encryption_key: Optional[str] = None,
     oauth_jwt_user: Optional[str] = None,
     oauth_refresh_tokens: Optional[bool] = None,
-    oauth_guest_endpoints: Optional[bool] = None,
+    oauth_guest_endpoints: Optional[list[str]] = None,
     oauth_optional: Optional[bool] = None,
     login_endpoint: Optional[str] = None,
     logout_endpoint: Optional[str] = None,

From 323b2ab38f0d453472fb266f3e0218ec5f8a3a23 Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <marc.skov.madsen@gmail.com>
Date: Sun, 13 Oct 2024 11:38:29 +0200
Subject: [PATCH 145/164] fix import map typing (#7392)

---
 panel/custom.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/custom.py b/panel/custom.py
index 1e429c8dc9..e07f2e10a7 100644
--- a/panel/custom.py
+++ b/panel/custom.py
@@ -223,7 +223,7 @@ class CounterButton(pn.custom.ReactiveESM):
     # 3. Named export (`{ <export>, ... }`): ("<export>", ...)
     _exports__: ClassVar[ExportSpec] = {}
 
-    _importmap: ClassVar[dict[Literal['imports', 'scopes'], str]] = {}
+    _importmap: ClassVar[dict[Literal['imports', 'scopes'], dict[str,str]]] = {}
 
     __abstract = True
 

From 78ccc7e0b8b9c055faf0005b92a1226a75b2fbd7 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 14 Oct 2024 17:01:58 +0200
Subject: [PATCH 146/164] Ensure that autoreload records modules to watch
 before startup (#7399)

* Ensure that autoreload records modules to watch before startup

* Apply suggestions from code review

* Apply suggestions from code review

* Add test

* Fix test
---
 panel/command/serve.py            |  2 +-
 panel/tests/command/test_serve.py | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/panel/command/serve.py b/panel/command/serve.py
index 051ddc4007..35e9a6d16a 100644
--- a/panel/command/serve.py
+++ b/panel/command/serve.py
@@ -388,7 +388,7 @@ def setup_file():
         if args.warm or config.autoreload:
             argvs = {f: args.args for f in files}
             applications = build_single_handler_applications(files, argvs)
-            initialize_session = not (args.num_procs and sys.version_info < (3, 12))
+            initialize_session = not (args.num_procs != 1 and sys.version_info < (3, 12))
             if config.autoreload:
                 with record_modules(list(applications.values())):
                     self.warm_applications(
diff --git a/panel/tests/command/test_serve.py b/panel/tests/command/test_serve.py
index 3626391cae..f15c451420 100644
--- a/panel/tests/command/test_serve.py
+++ b/panel/tests/command/test_serve.py
@@ -1,6 +1,7 @@
 import os
 import re
 import tempfile
+import time
 
 import pytest
 import requests
@@ -31,6 +32,31 @@ def test_autoreload_app(py_file):
         assert r2.status_code == 200
         assert "<title>B</title>" in r2.content.decode('utf-8')
 
+
+@linux_only
+def test_autoreload_app_local_module(py_files):
+    py_file1, py_file2 = py_files
+    app_name = os.path.basename(py_file1.name)[:-3]
+    mod_name = os.path.basename(py_file2.name)[:-3]
+    app = f"import panel as pn; from {mod_name} import title; pn.Row('# Example').servable(title=title)"
+    write_file(app, py_file1.file)
+    write_file("title = 'A'", py_file2.file)
+
+    with run_panel_serve(["--port", "0", '--autoreload', py_file1.name]) as p:
+        port = wait_for_port(p.stdout)
+        r = requests.get(f"http://localhost:{port}/{app_name}")
+        assert r.status_code == 200
+        assert "<title>A</title>" in r.content.decode('utf-8')
+
+        write_file("title = 'B'", py_file2.file)
+        py_file2.file.close()
+        time.sleep(1)
+
+        r2 = requests.get(f"http://localhost:{port}/{app_name}")
+        assert r2.status_code == 200
+        assert "<title>B</title>" in r2.content.decode('utf-8')
+
+
 @linux_only
 def test_serve_admin(py_file):
     app = "import panel as pn; pn.Row('# Example').servable(title='A')"

From cb63cd7c5416869afeb6313f4e7048a99057bc1b Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 15 Oct 2024 13:06:20 +0200
Subject: [PATCH 147/164] Various fixes for custom component compilation
 (#7381)

* Various fixes for custom component compilation

* Apply suggestions from code review

---------

Co-authored-by: Philipp Rudiger <philipp.rudiger@blackstone.com>
---
 panel/custom.py                 | 7 +++----
 panel/io/compile.py             | 4 ++--
 panel/models/react_component.ts | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/panel/custom.py b/panel/custom.py
index e07f2e10a7..2c5eea69c1 100644
--- a/panel/custom.py
+++ b/panel/custom.py
@@ -358,12 +358,11 @@ def _init_params(self) -> dict[str, Any]:
                 params.pop(k)
             data_params[k] = v
         bundle_path = self._bundle_path
+        importmap = self._process_importmap()
         if bundle_path:
             bundle_hash = hashlib.sha256(str(bundle_path).encode('utf-8')).hexdigest()
-            importmap = {}
         else:
             bundle_hash = None
-            importmap = self._process_importmap()
         data_props = self._process_param_change(data_params)
         params.update({
             'bundle': bundle_hash,
@@ -614,8 +613,8 @@ def _exports__(cls) -> ExportSpec:
         }
         if any('@mui' in v for v in imports.values()):
             exports.update({
-                "@emotion/cache": "createCache",
-                "@emotion/react": ("CacheProvider",)
+                "@emotion/cache": ["createCache"],
+                "@emotion/react": [("CacheProvider",)],
             })
         return exports
 
diff --git a/panel/io/compile.py b/panel/io/compile.py
index 70b105f29f..0df128571a 100644
--- a/panel/io/compile.py
+++ b/panel/io/compile.py
@@ -385,8 +385,8 @@ def compile_components(
             if result.stdout and out:
                 print(f"npm output:\n{GREEN}{result.stdout}{RESET}")  # noqa
             if result.stderr:
-                print("npm errors:\n{RED}{result.stderr}{RESET}")  # noqa
-                return None
+                print(f"npm errors:\n{RED}{result.stderr}{RESET}")  # noqa
+
         except subprocess.CalledProcessError as e:
             print(f"An error occurred while running npm install:\n{RED}{e.stderr}{RESET}")  # noqa
             return None
diff --git a/panel/models/react_component.ts b/panel/models/react_component.ts
index a9013e6e72..73e6646121 100644
--- a/panel/models/react_component.ts
+++ b/panel/models/react_component.ts
@@ -67,7 +67,7 @@ import { CacheProvider } from "@emotion/react"`
       render_code = `
   if (rendered) {
     const cache = createCache({
-      key: 'css-${this.model.id}',
+      key: 'css-${btoa(this.model.id).replace("=", "-").toLowerCase()}',
       prepend: true,
       container: view.style_cache,
     })

From 46061e61fff81dd8a10b6aa4bc5408cae86c3aec Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 15 Oct 2024 14:40:02 +0200
Subject: [PATCH 148/164] Address issues with Tabulator embed_content and
 optimize row expansion (#7364)

---
 panel/models/tabulator.py                |  2 +
 panel/models/tabulator.ts                | 97 +++++++++++++-----------
 panel/tests/ui/widgets/test_tabulator.py | 37 +++++++--
 panel/widgets/tables.py                  | 29 ++++---
 4 files changed, 102 insertions(+), 63 deletions(-)

diff --git a/panel/models/tabulator.py b/panel/models/tabulator.py
index 22eb3a7f7f..1d37c57ab7 100644
--- a/panel/models/tabulator.py
+++ b/panel/models/tabulator.py
@@ -129,6 +129,8 @@ class DataTabulator(HTMLBox):
 
     editable = Bool(default=True)
 
+    embed_content = Bool(default=False)
+
     expanded = List(Int)
 
     filename = String(default="table.csv")
diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts
index cc48dc0681..c6221c8309 100644
--- a/panel/models/tabulator.ts
+++ b/panel/models/tabulator.ts
@@ -1,4 +1,4 @@
-import {undisplay} from "@bokehjs/core/dom"
+import {display, undisplay} from "@bokehjs/core/dom"
 import {sum} from "@bokehjs/core/util/arrayable"
 import {isArray, isBoolean, isString, isNumber} from "@bokehjs/core/util/types"
 import {ModelEvent} from "@bokehjs/core/bokeh_events"
@@ -8,7 +8,6 @@ import type * as p from "@bokehjs/core/properties"
 import type {LayoutDOM} from "@bokehjs/models/layouts/layout_dom"
 import {ColumnDataSource} from "@bokehjs/models/sources/column_data_source"
 import {TableColumn} from "@bokehjs/models/widgets/tables"
-import type {UIElementView} from "@bokehjs/models/ui/ui_element"
 import type {Attrs} from "@bokehjs/core/types"
 
 import {debounce} from "debounce"
@@ -350,6 +349,7 @@ export class DataTabulatorView extends HTMLBoxView {
   container: HTMLDivElement | null = null
   _tabulator_cell_updating: boolean=false
   _updating_page: boolean = false
+  _updating_expanded: boolean = false
   _updating_sort: boolean = false
   _selection_updating: boolean = false
   _last_selected_row: any = null
@@ -393,7 +393,7 @@ export class DataTabulatorView extends HTMLBoxView {
       this.tabulator.download(ftype, this.model.filename)
     })
 
-    this.on_change(children, () => this.renderChildren(false))
+    this.on_change(children, () => this.renderChildren())
 
     this.on_change(expanded, () => {
       // The first cell is the cell of the frozen _index column.
@@ -411,6 +411,12 @@ export class DataTabulatorView extends HTMLBoxView {
           row.cells[1].element.innerText = icon
         }
       }
+      // If content is embedded, views may not have been
+      // rendered so if expanded is updated server side
+      // we have to trigger a render
+      if (this.model.embed_content && !this._updating_expanded) {
+        this.renderChildren()
+      }
     })
 
     this.on_change(cell_styles, () => {
@@ -773,7 +779,7 @@ export class DataTabulatorView extends HTMLBoxView {
       frozenRows: (row: any) => {
         return (this.model.frozen_rows.length > 0) ? this.model.frozen_rows.includes(row._row.data._index) : false
       },
-      rowFormatter: (row: any) => this._render_row(row),
+      rowFormatter: (row: any) => this._render_row(row, false),
     }
     if (this.model.pagination === "remote") {
       configuration.ajaxURL = "http://panel.pyviz.org"
@@ -816,33 +822,23 @@ export class DataTabulatorView extends HTMLBoxView {
     return lookup
   }
 
-  renderChildren(all: boolean = true): void {
-    new Promise(async (resolve: any) => {
-      let new_children = await this.build_child_views()
-      if (all) {
-        new_children = this.child_views
-      }
-      resolve(new_children)
-    }).then((new_children) => {
+  renderChildren(): void {
+    void new Promise(async () => {
+      await this.build_child_views()
       const lookup = this.row_index
-      for (const index of this.model.expanded) {
+      const expanded = this.model.expanded
+      for (const index of expanded) {
         const model = this.get_child(index)
         const row = lookup.get(index)
         const view = model == null ? null : this._child_views.get(model)
         if (view != null) {
-          const render = (new_children as UIElementView[]).includes(view)
-          this._render_row(row, false, render)
+          this._render_row(row, index === expanded[expanded.length-1])
         }
       }
-      this._update_children()
-      if (this.tabulator.rowManager.renderer != null) {
-        this.tabulator.rowManager.adjustTableSize()
-      }
-      this.invalidate_layout()
     })
   }
 
-  _render_row(row: any, resize: boolean = true, render: boolean = true): void {
+  _render_row(row: any, resize: boolean = true): void {
     const index = row._row?.data._index
     if (!this.model.expanded.includes(index)) {
       return
@@ -852,33 +848,42 @@ export class DataTabulatorView extends HTMLBoxView {
     if (view == null) {
       return
     }
-    const rowEl = row.getElement()
-    const style = getComputedStyle(this.tabulator.element.children[1].children[0])
-    const bg = style.backgroundColor
-    const neg_margin = rowEl.style.paddingLeft ? `-${rowEl.style.paddingLeft}` : "0"
-    const prev_child = rowEl.children[rowEl.children.length-1]
-    let viewEl
-    if (prev_child != null && prev_child.className == "row-content") {
-      viewEl = prev_child
-      if (viewEl.children.length && viewEl.children[0] === view.el) {
-        return
+    schedule_when(() => {
+      const rowEl = row.getElement()
+      const style = getComputedStyle(this.tabulator.element.children[1].children[0])
+      const bg = style.backgroundColor
+      const neg_margin = rowEl.style.paddingLeft ? `-${rowEl.style.paddingLeft}` : "0"
+      const prev_child = rowEl.children[rowEl.children.length-1]
+      let viewEl
+      if (prev_child != null && prev_child.className == "row-content") {
+        viewEl = prev_child
+        if (viewEl.children.length && viewEl.children[0] === view.el) {
+          return
+        }
+      } else {
+        viewEl = div({class: "row-content", style: {background_color: bg, margin_left: neg_margin, max_width: "100%", overflow_x: "hidden"}})
+        rowEl.appendChild(viewEl)
       }
-    } else {
-      viewEl = div({class: "row-content", style: {background_color: bg, margin_left: neg_margin, max_width: "100%", overflow_x: "hidden"}})
-      rowEl.appendChild(viewEl)
-    }
-    viewEl.appendChild(view.el)
-    if (render) {
-      schedule_when(() => {
+      display(view.el)
+      viewEl.appendChild(view.el)
+      if (view.shadow_el.children.length === 0) {
         view.render()
         view.after_render()
-      }, () => this.root.has_finished())
-    }
-    if (resize) {
-      this._update_children()
-      this.tabulator.rowManager.adjustTableSize()
-      this.invalidate_layout()
+      }
+      if (resize) {
+        this._update_children()
+        this.resize_table()
+      }
+    }, () => this.root.has_finished())
+  }
+
+  resize_table(): void {
+    if (this.tabulator.rowManager.renderer != null) {
+      try {
+        this.tabulator.rowManager.adjustTableSize()
+      } catch (e) {}
     }
+    this.invalidate_layout()
   }
 
   _expand_render(cell: any): string {
@@ -903,7 +908,9 @@ export class DataTabulatorView extends HTMLBoxView {
         }
       }
     }
+    this._updating_expanded = true
     this.model.expanded = expanded
+    this._updating_expanded = false
     if (!expanded.includes(index)) {
       return
     }
@@ -1468,6 +1475,7 @@ export namespace DataTabulator {
     configuration: p.Property<any>
     download: p.Property<boolean>
     editable: p.Property<boolean>
+    embed_content: p.Property<boolean>
     expanded: p.Property<number[]>
     filename: p.Property<string>
     filters: p.Property<any[]>
@@ -1513,6 +1521,7 @@ export class DataTabulator extends HTMLBox {
       columns:        [ List(Ref(TableColumn)), [] ],
       download:       [ Bool,              false ],
       editable:       [ Bool,               true ],
+      embed_content:  [ Bool,               false ],
       expanded:       [ List(Float),           [] ],
       filename:       [ Str,         "table.csv" ],
       filters:        [ List(Any),              [] ],
diff --git a/panel/tests/ui/widgets/test_tabulator.py b/panel/tests/ui/widgets/test_tabulator.py
index 403379be83..959e9a9d24 100644
--- a/panel/tests/ui/widgets/test_tabulator.py
+++ b/panel/tests/ui/widgets/test_tabulator.py
@@ -1560,8 +1560,13 @@ def test_tabulator_selection_on_multi_index(page, pagination):
     wait_until(lambda: widget.selection == [0, 16], page)
 
 
-def test_tabulator_row_content(page, df_mixed):
-    widget = Tabulator(df_mixed, row_content=lambda i: f"{i['str']}-row-content")
+@pytest.mark.parametrize('embed_content', [False, True])
+def test_tabulator_row_content(page, df_mixed, embed_content):
+    widget = Tabulator(
+        df_mixed,
+        row_content=lambda i: f"{i['str']}-row-content",
+        embed_content=embed_content
+    )
 
     serve_component(page, widget)
 
@@ -1586,17 +1591,22 @@ def test_tabulator_row_content(page, df_mixed):
         closables.first.click()
 
         row_content = page.locator(f'text="{df_mixed.iloc[i]["str"]}-row-content"')
-        expect(row_content).to_have_count(0)
+        if embed_content:
+            expect(row_content).not_to_be_visible()
+        else:
+            expect(row_content).to_have_count(0)
 
         expected_expanded.remove(i)
         wait_until(lambda: widget.expanded == expected_expanded, page)
 
 
-def test_tabulator_row_content_expand_from_python_init(page, df_mixed):
+@pytest.mark.parametrize('embed_content', [False, True])
+def test_tabulator_row_content_expand_from_python_init(page, df_mixed, embed_content):
     widget = Tabulator(
         df_mixed,
         row_content=lambda i: f"{i['str']}-row-content",
         expanded = [0, 2],
+        embed_content=embed_content
     )
 
     serve_component(page, widget)
@@ -1614,8 +1624,13 @@ def test_tabulator_row_content_expand_from_python_init(page, df_mixed):
     expect(openables).to_have_count(len(df_mixed) - len(widget.expanded))
 
 
-def test_tabulator_row_content_expand_from_python_after(page, df_mixed):
-    widget = Tabulator(df_mixed, row_content=lambda i: f"{i['str']}-row-content")
+@pytest.mark.parametrize('embed_content', [False, True])
+def test_tabulator_row_content_expand_from_python_after(page, df_mixed, embed_content):
+    widget = Tabulator(
+        df_mixed,
+        row_content=lambda i: f"{i['str']}-row-content",
+        embed_content=embed_content
+    )
 
     serve_component(page, widget)
 
@@ -1638,8 +1653,14 @@ def test_tabulator_row_content_expand_from_python_after(page, df_mixed):
     expect(page.locator('text="►"')).to_have_count(len(df_mixed))
 
 
-def test_tabulator_row_content_expand_after_filtered(page, df_mixed):
-    table = Tabulator(df_mixed, row_content=lambda e: f"Hello {e.int}", header_filters=True)
+@pytest.mark.parametrize('embed_content', [False, True])
+def test_tabulator_row_content_expand_after_filtered(page, df_mixed, embed_content):
+    table = Tabulator(
+        df_mixed,
+        row_content=lambda e: f"Hello {e.int}",
+        header_filters=True,
+        embed_content=embed_content
+    )
 
     serve_component(page, table)
 
diff --git a/panel/widgets/tables.py b/panel/widgets/tables.py
index 4f1f5748f9..2ac704603b 100644
--- a/panel/widgets/tables.py
+++ b/panel/widgets/tables.py
@@ -1228,8 +1228,8 @@ class Tabulator(BaseTable):
 
     _rename: ClassVar[Mapping[str, str | None]] = {
         'selection': None, 'row_content': None, 'row_height': None,
-        'text_align': None, 'embed_content': None, 'header_align': None,
-        'header_filters': None, 'header_tooltips': None, 'styles': 'cell_styles',
+        'text_align': None, 'header_align': None, 'header_filters': None,
+        'header_tooltips': None, 'styles': 'cell_styles',
         'title_formatters': None, 'sortable': None, 'initial_page_size': None
     }
 
@@ -1536,10 +1536,14 @@ def _get_children(self):
             start = (self.page-1)*nrows
             df = df.iloc[start:(start+nrows)]
         indexed_children, children = {}, {}
-        expanded = []
         if self.embed_content:
-            for i in range(len(df)):
-                expanded.append(i)
+            indexes = list(range(len(df)))
+            mapped = self._map_indexes(indexes)
+            expanded = [
+                i for i, m in zip(indexes, mapped)
+                if m in self.expanded
+            ]
+            for i in indexes:
                 idx = df.index[i]
                 if idx in self._indexed_children:
                     child = self._indexed_children[idx]
@@ -1547,6 +1551,7 @@ def _get_children(self):
                     child = panel(self.row_content(df.iloc[i]))
                 indexed_children[idx] = children[i] = child
         else:
+            expanded = []
             for i in self.expanded:
                 idx = self.value.index[i]
                 if idx in self._indexed_children:
@@ -1579,7 +1584,8 @@ def _get_model_children(self, doc, root, parent, comm=None):
         return models
 
     def _update_children(self, *events):
-        if all(e.name in ('page', 'page_size', 'pagination', 'sorters') for e in events) and self.pagination != 'remote':
+        page_event = all(e.name in ('page', 'page_size', 'pagination', 'sorters') for e in events)
+        if (page_event and self.pagination != 'remote'):
             return
         for event in events:
             if event.name == 'value' and self._indexes_changed(event.old, event.new):
@@ -1590,11 +1596,12 @@ def _update_children(self, *events):
                 self._indexed_children.clear()
         self._child_panels, removed, expanded = self._get_children()
         for ref, (m, _) in self._models.copy().items():
-            root, doc, comm = state._views[ref][1:]
-            for child_panel in removed:
-                child_panel._cleanup(root)
-            children = self._get_model_children(doc, root, m, comm)
-            msg = {'expanded': expanded, 'children': children}
+            msg = {'expanded': expanded}
+            if not self.embed_content or any(e.name == 'row_content' for e in events):
+                root, doc, comm = state._views[ref][1:]
+                for child_panel in removed:
+                    child_panel._cleanup(root)
+                msg['children'] = self._get_model_children(doc, root, m, comm)
             self._apply_update([], msg, m, ref)
 
     @updating

From 3febd336cd4c22dc97d214b1408f63dd10f55242 Mon Sep 17 00:00:00 2001
From: Coderambling <159031875+Coderambling@users.noreply.github.com>
Date: Tue, 15 Oct 2024 14:53:09 +0200
Subject: [PATCH 149/164] Update components_overview.md with text fixes (#7335)

---
 .../components/components_overview.md         | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/doc/explanation/components/components_overview.md b/doc/explanation/components/components_overview.md
index 46b6aa24f0..1a78bffca2 100644
--- a/doc/explanation/components/components_overview.md
+++ b/doc/explanation/components/components_overview.md
@@ -11,16 +11,16 @@ pn.extension(notifications=True)
 The main objects that Panel provides, and that we are going to call *components* hereafter, short for *visual components*, include:
 
 - *Widgets*: widgets are components, usually quite small even if there are exceptions, that allow your users to interact with your app. Most importantly, they allow you to get user input! Examples include a text input, a checkbox, a slider, etc.
-- *Panes*: panes are wrappers around some data that allow you to render that data, possibly customizing the rendering. Panel is known to support many date types, especially from the PyData ecosystem. You can indeed display a Pandas DataFrame, a Plotly plot, a Matplotlib plot, an Altair plot, all together on the same app! You can of course display HTML text or just raw text. Panes aren't limited to rendering data statically, they can allow for some user interactions and state syncing, like for instance the `Audio` or `Vega` panes.
-- *Indicators*: indicators are useful to display some static state, they are indeed implemented as widgets that you can only control programmatically. You'll find for instance a progress indicator or a tooltip.
+- *Panes*: panes are wrappers around some data that allow you to render that data, possibly customizing the rendering. Panel is known to support many data types, especially from the PyData ecosystem. You can indeed display a Pandas DataFrame, a Plotly plot, a Matplotlib plot, an Altair plot, all together on the same app! You can of course display HTML text or just raw text. Panes aren't limited to rendering data statically, they can allow for some user interactions and state syncing, like for instance the `Audio` or `Vega` panes.
+- *Indicators*: indicators are useful to display some static state. They are implemented as widgets that you can only control programmatically. Examples include a progress indicator or a tooltip.
 - *Layouts*: after having built various widgets, panes and indicators, it's time to display them together. Panel provides a dozen of layout components, including of course the most common `Row` and `Column` layouts.
-- *Templates*: templates are components that render multiple Panel objects in an HTML document. The basic template, which you get when you serve an app without setting any template, is basically a blank canvas. Instead when you use one of the built-in templates you can easily improve the design and branding of your app, which will get for free a header, a sidebar, etc.
+- *Templates*: templates are components that render multiple Panel objects in an HTML document. The basic template, which you get when you serve an app without setting any template, is basically a blank canvas. When you use one of the built-in templates instead, you can easily improve the design and branding of your app, as the templates include elements like a header, a sidebar, etc.
 - *Notifications*: notifications are components that display so called "toasts", designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
 
-All the Panel components can be visualized on the [Component Gallery](../../reference/index).
+All the Panel components can be found in the [Component Gallery](../../reference/index).
 
 :::{tip}
-Components usually have in their docstring a link to their documentation page, use `<component>?` in a notebook or your IDE inspection capabilities to access the link.
+Components usually have a link to their documentation page in their docstring, use `<component>?` in a notebook or your IDE inspection capabilities to access the link.
 :::
 
 ## Parameterized components
@@ -31,7 +31,7 @@ All components in Panel are built on the [Param](https://param.holoviz.org/) lib
 pn.widgets.IntRangeSlider.width = 350
 ```
 
-or on each instance:
+and on each instance:
 
 ```{pyodide}
 pn.widgets.IntRangeSlider(width=100)
@@ -60,9 +60,9 @@ w_text.width = 100
 w_text.value = 'new text'
 ```
 
-What you just experimented is one-way syncing from your code to the user interface, i.e. from your running Python interpreter to your browser tab.
+What you just experienced is one-way syncing from your code to the user interface, i.e. from your running Python interpreter to your browser tab.
 
-This can also work the other way around, i.e. when you modify a component from the user interface directly its Python state gets updated accordingly. Try this out by typing some text in one of the widgets above and then execute the cell below. You will see that what you typed is now reflected in the widget `value`. In this case we say that the `value` *Parameter* is bi-directionally synced (or linked).
+This can also work the other way around, i.e. when you modify a component from the user interface directly, its Python state gets updated accordingly. Try this out by typing some text in one of the widgets above and then execute the cell below. You will see that what you typed is now reflected in the widget `value`. In this case we say that the `value` *Parameter* is bi-directionally synced (or linked).
 
 ```{pyodide}
 w_text.value
@@ -80,7 +80,7 @@ Widgets **all** have a `value` *Parameter* that holds the widget state and that
 
 :::{note}
 
-One gotcha that doesn't only apply to the `value` *Parameter* but that you are more likely to encounter with this *Parameter* than others is when it is referencing a mutable data structure that you mutate inplace. Take for example a `MultiSelect` widget whose `value` is a `list`. If you programmatically update that list directly, with for example `append` or `extend`, Panel will not be able to detect that change. In which case you need to explicitly trigger updates with `w_multiselect.param.trigger('value')` that will run all the same underlying machinery as if you were setting the *Parameter* to a new value. A notable widget that holds a multable datastructure is the `Tabulator` widget whose `value` is a Pandas DataFrame that can be updated inplace with e.g. `df.loc[0, 'A'] = new_value`, its `patch` method allows to both update the data and the user interface.
+One gotcha that doesn't only apply to the `value` *Parameter* but that you are more likely to encounter with this *Parameter* than others is when it is referencing a mutable data structure that you mutate in-place. Take for example a `MultiSelect` widget whose `value` is a `list`. If you programmatically update that list directly, with for example `append` or `extend`, Panel will not be able to detect that change. In which case you need to explicitly trigger updates with `w_multiselect.param.trigger('value')` that will run all the same underlying machinery as if you were setting the *Parameter* to a new value. A notable widget that holds a multable datastructure is the `Tabulator` widget whose `value` is a Pandas DataFrame that can be updated in-place with e.g. `df.loc[0, 'A'] = new_value`, its `patch` method allows to both update the data and the user interface.
 :::
 
 ```{pyodide}
@@ -276,7 +276,7 @@ tabs.insert(0, ('Slider', pn.widgets.FloatSlider()))
 
 #### Grid-like API
 
-Grid-like layouts are initialized empty and populated setting 2D assignments to specify the index or span on indices the object in the grid should occupy. Just like a Python array, the indexing is zero-based and specifies the rows first and the columns second, i.e. `gridlike[0, 1]` would assign an object to the first row and second column.
+Grid-like layouts are initialized empty and populated by setting 2D assignments to specify the index or span on indices the object in the grid should occupy. Just like a Python array, the indexing is zero-based and specifies the rows first and the columns second, i.e. `gridlike[0, 1]` would assign an object to the first row and second column.
 
 To demonstrate the abilities, let us declare a grid with a wide range of different objects, including `Spacers`, HoloViews objects, images, and widgets.
 
@@ -340,7 +340,7 @@ w_text.visible = True
 
 #### Style
 
-A few *Parameters* allow to control the style of components, including `styles`, `stylesheets`, `css_classes` and `design`. These will be explored in more details in one of the next guides. As a teaser, the next cell is a simple example leveraging the `styles` *Parameter* only, that accepts a dictionary of CSS styles.
+A few *Parameters* allow to control the style of components, including `styles`, `stylesheets`, `css_classes` and `design`. These will be explored in more detail in one of the next guides. As a teaser, the next cell is a simple example leveraging the `styles` *Parameter* only, that accepts a dictionary of CSS styles.
 
 ```{pyodide}
 custom_style = {
@@ -355,11 +355,11 @@ pn.widgets.FloatSlider(name='Number', styles=custom_style)
 
 #### Size and responsivity
 
-A few *Parameters* allow to control the size and responsivity of components, including `height`, `width`, `min_height`, `min_width` and `sizing_mode`. These will be explored in more details in one of the next guides.
+A few *Parameters* allow to control the size and responsivity of components, including `height`, `width`, `min_height`, `min_width` and `sizing_mode`. These will be explored in more detail in one of the next guides.
 
 #### `margin`
 
-The `margin` *Parameter* can be used to create space around an element defined as the number of pixels at the (top, right, bottom, and left). When you set it with a single value the margin is going to be applied to each side of the element, `margin` allows for more fine-grained distributio of the margin.
+The `margin` *Parameter* can be used to create space around an element defined as the number of pixels at the (top, right, bottom, and left). When you set it with a single value, the margin is going to be applied to each side of the element. `margin` allows for more fine-grained distributio of the margin.
 
 ```{pyodide}
 pn.widgets.Button(name='Click', margin=(25, 0, 0, 0))
@@ -377,12 +377,11 @@ pn.Row(
     styles={'background': 'lightgrey'},
 )
 ```
-
 ## Templates
 
-A template is the HTML document that ends up being served by your app, it defines what resources (Javascript, CSS) need to be loaded, the page title, where the Panel objects are supposed to be rendered on the page, etc.
+A template is the HTML document that ends up being served by your app. It defines what resources (Javascript, CSS) need to be loaded, the page title, where the Panel objects are supposed to be rendered on the page, etc.
 
-When you serve an app without defining a particular template Panel serves it with its default template, that is pretty much a blank canvas where the served objects, if there are a few of them, will be rendered vertically one after the other.
+When you serve an app without defining a particular template Panel serves it with its default template, which is pretty much a blank canvas where the served objects, if there are a few of them, will be rendered vertically one after the other.
 
 Try saving the following snippet in a `app.py` file and serving it with `panel serve app.py --show`
 
@@ -394,7 +393,7 @@ pn.panel('Some text').servable()
 pn.panel('More text').servable()
 ```
 
-When developing an app, someone (possibly you!) will require at some point to make it prettier! A quick way to achieve that is to wrap your app in one of the templates that Panel provides, that are defined by declaring four main content areas on the page, which can be populated as desired:
+When developing an app, someone (possibly you!) will be required at some point to make it prettier! A quick way to achieve that is to wrap your app in one of the templates that Panel provides, that are defined by declaring four main content areas on the page, which can be populated as desired:
 
 - `header`: The header area of the HTML page
 - `sidebar`: A collapsible sidebar
@@ -429,7 +428,6 @@ template.sidebar.append(w_number)
 template.main.append(p_hearts)
 template.show()
 ```
-
 ## Notifications
 
 The web apps you end up building with Panel are often quite interactive. Therefore you will be interested in finding a way to let your users know what's going on, when their operations succeed or abort, etc. This is exactly what notifications are for! Contrary to the components we have just covered, notifications are objects you don't manipulate directly, instead you just call `pn.state.notifications` with one the following methods: `success`, `info`, `warning` and `error`.

From ced01e4ea9823577696597be5187d7726d0e873d Mon Sep 17 00:00:00 2001
From: Andrew <15331990+ahuang11@users.noreply.github.com>
Date: Tue, 15 Oct 2024 15:25:58 -0700
Subject: [PATCH 150/164] Prevent tabulator from overlapping when max_height is
 set (#7403)

* limit tabulator height with max height

* use maxHeight config

* reverse logic
---
 panel/models/tabulator.ts                |  3 +++
 panel/tests/ui/widgets/test_tabulator.py | 26 ++++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts
index c6221c8309..3cc745b2a3 100644
--- a/panel/models/tabulator.ts
+++ b/panel/models/tabulator.ts
@@ -781,6 +781,9 @@ export class DataTabulatorView extends HTMLBoxView {
       },
       rowFormatter: (row: any) => this._render_row(row, false),
     }
+    if (this.model.max_height != null) {
+      configuration.maxHeight = this.model.max_height
+    }
     if (this.model.pagination === "remote") {
       configuration.ajaxURL = "http://panel.pyviz.org"
       configuration.sortMode = "remote"
diff --git a/panel/tests/ui/widgets/test_tabulator.py b/panel/tests/ui/widgets/test_tabulator.py
index 959e9a9d24..8663a597f2 100644
--- a/panel/tests/ui/widgets/test_tabulator.py
+++ b/panel/tests/ui/widgets/test_tabulator.py
@@ -1159,6 +1159,32 @@ def test_tabulator_patch_no_height_resize(page):
     wait_until(lambda: page.locator('.pnx-tabulator').evaluate(at_bottom_script), page)
 
 
+def test_tabulator_max_height_set(page):
+    df = pd.DataFrame({'col': np.random.random(100)})
+    widget = Tabulator(df, max_height=200)
+
+    serve_component(page, widget)
+
+    table = page.locator('.pnx-tabulator')
+    expect(table).to_have_css('max-height', '200px')
+    assert table.bounding_box()['height'] <= 200
+
+
+def test_tabulator_max_height_unset(page):
+    """
+    If max_height is not set, Tabulator should not set it to null;
+    else there's some recursion issues in the console and lag
+    """
+    df = pd.DataFrame({'col': np.random.random(100)})
+    widget = Tabulator(df)
+
+    serve_component(page, widget)
+
+    table = page.locator('.pnx-tabulator')
+    expect(table).to_have_css('max-height', 'none')
+    assert table.bounding_box()['height'] >= 200
+
+
 @pytest.mark.parametrize(
     'pagination', ('local', 'remote', None)
 )

From 0bb5cd3b5d6ac9c655ed98a17aa652cc3014073c Mon Sep 17 00:00:00 2001
From: Nick Chen <haojungc@gmail.com>
Date: Wed, 16 Oct 2024 07:52:45 -0600
Subject: [PATCH 151/164] docs: fix typo in panel.io.server docstring (#7405)

Replaced `panel` with `panels`
---
 panel/io/server.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/io/server.py b/panel/io/server.py
index 6165b9f4dc..1aadb42285 100644
--- a/panel/io/server.py
+++ b/panel/io/server.py
@@ -703,7 +703,7 @@ def serve(
 
     Arguments
     ---------
-    panel: Viewable, function or {str: Viewable or function}
+    panels: Viewable, function or {str: Viewable or function}
       A Panel object, a function returning a Panel object or a
       dictionary mapping from the URL slug to either.
     port: int (optional, default=0)

From 0b59d530445505a8fcfa3562bab501463b1767f7 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Wed, 16 Oct 2024 10:11:48 -0400
Subject: [PATCH 152/164] Sync dark mode on browser_info object (#7382)

---
 panel/models/browser.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/panel/models/browser.ts b/panel/models/browser.ts
index 8aa69ccb81..1d2b1e4b7b 100644
--- a/panel/models/browser.ts
+++ b/panel/models/browser.ts
@@ -9,7 +9,11 @@ export class BrowserInfoView extends View {
     super.initialize()
 
     if (window.matchMedia != null) {
-      this.model.dark_mode = window.matchMedia("(prefers-color-scheme: dark)").matches
+      const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+      darkModeMediaQuery.addEventListener("change", (e) => {
+        this.model.dark_mode = e.matches
+      })
+      this.model.dark_mode = darkModeMediaQuery.matches
     }
     this.model.device_pixel_ratio = window.devicePixelRatio
     if (navigator != null) {

From f621f0c0782cc5437ee43a894085536bef430dd4 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 17 Oct 2024 07:00:48 -0400
Subject: [PATCH 153/164] Allow loading ESM bundles from URL (#7410)

---
 doc/how_to/custom_components/esm/build.md | 55 +++++++++++++++++++++++
 panel/custom.py                           | 27 ++++++++---
 panel/io/server.py                        |  2 +-
 panel/models/react_component.ts           | 13 +++---
 panel/models/reactive_esm.ts              | 21 ++++++---
 5 files changed, 98 insertions(+), 20 deletions(-)

diff --git a/doc/how_to/custom_components/esm/build.md b/doc/how_to/custom_components/esm/build.md
index 92f85148e0..c2f888c150 100644
--- a/doc/how_to/custom_components/esm/build.md
+++ b/doc/how_to/custom_components/esm/build.md
@@ -252,6 +252,7 @@ panel compile my_package.my_module my_package.subpackage.other_module
 
 you will end up with a single `custom.bundle.js` file placed in the `my_package/dist` directory.
 
+(build-dir)=
 #### Using the `--build-dir` Option
 
 The `--build-dir` option allows you to specify a custom directory where the `package.json` and raw JavaScript/JSX modules will be written. This is useful if you need to manually modify the dependencies before the bundling process and/or debug issues while bundling. To use this feature, follow these steps:
@@ -348,6 +349,8 @@ export function render() {
 
 ::::
 
+#### Build
+
 Once you have set up these three files you have to install the packages with `npm`:
 
 ```bash
@@ -361,3 +364,55 @@ esbuild confetti.js --bundle --format=esm --minify --outfile=ConfettiButton.bund
 ```
 
 This will create a new file called `ConfettiButton.bundle.js`, which includes all the dependencies (even CSS, image files and other static assets if you have imported them).
+
+
+#### Complex Bundles
+
+If you want to bundle multiple components into a singular bundle and do not want to leverage the built-in compilation you can make do without specifying the `_esm` class variable entirely and always load the bundle directly. If you organize your Javascript/TypeScript/React code in the same way as described in the [--build-dir](#build-dir) section you can have a manual compilation workflow with all the benefits of automatic reload.
+
+As an example let's say you have a module with multiple components:
+
+```
+panel_custom/
+├── build/
+    ├── index.js
+    ├── package.json
+    ├── <Component>.js<x>
+    └── <OtherComponent>.js<x>
+├── __init__.py
+├── components.py
+```
+
+Ensure that the `index.js` file exports each component:
+
+::::{tab-set}
+
+:::{tab-item} `JSComponent`
+```javascript
+import * as Component from "./Component"
+import * as OtherComponent from "./OtherComponent"
+export default {Component, OtherComponent}
+```
+:::
+
+:::{tab-item} `ReactComponent`
+A `ReactComponent` library MUST also export `React` and `createRoot`:
+
+```javascript
+import * as Component from "./Component"
+import * as OtherComponent from "./OtherComponent"
+import * as React from "react"
+import {createRoot} from "react-dom/client"
+export default {Component, OtherComponent, React, createRoot}
+```
+:::
+
+::::
+
+You can now develop your JS components as if it were a normal JS library. During the build step you would then run:
+
+```bash
+esbuild panel-custom/build/index.js --bundle --format=esm --minify --outfile=panel_custom/panel_custom.components.bundle.js
+```
+
+or replace `panel_custom.components.bundle.js` with the path specified on your component's `_bundle` attribute.
diff --git a/panel/custom.py b/panel/custom.py
index 2c5eea69c1..cbec8d288a 100644
--- a/panel/custom.py
+++ b/panel/custom.py
@@ -20,6 +20,7 @@
 
 from .config import config
 from .io.datamodel import construct_data_model
+from .io.resources import component_resource_path
 from .io.state import state
 from .models import (
     AnyWidgetComponent as _BkAnyWidgetComponent,
@@ -235,7 +236,7 @@ def __init__(self, **params):
 
     @classproperty
     def _bundle_path(cls) -> os.PathLike | None:
-        if config.autoreload:
+        if config.autoreload and cls._esm:
             return
         try:
             mod_path = pathlib.Path(inspect.getfile(cls)).parent
@@ -272,7 +273,7 @@ def _bundle_path(cls) -> os.PathLike | None:
 
     @classmethod
     def _esm_path(cls, compiled: bool = True) -> os.PathLike | None:
-        if compiled:
+        if compiled or not cls._esm:
             bundle_path = cls._bundle_path
             if bundle_path:
                 return bundle_path
@@ -295,8 +296,21 @@ def _esm_path(cls, compiled: bool = True) -> os.PathLike | None:
 
     @classmethod
     def _render_esm(cls, compiled: bool | Literal['compiling'] = True):
-        if (esm_path:= cls._esm_path(compiled=compiled is True)):
-            esm = esm_path.read_text(encoding='utf-8')
+        esm_path = cls._esm_path(compiled=compiled is True)
+        if esm_path:
+            if esm_path == cls._bundle_path and cls.__module__ in sys.modules:
+                base_cls = cls
+                for scls in cls.__mro__[1:][::-1]:
+                    if not issubclass(scls, ReactiveESM):
+                        continue
+                    if esm_path == scls._esm_path(compiled=compiled is True):
+                        base_cls = scls
+                esm = component_resource_path(base_cls, '_bundle_path', esm_path)
+                if config.autoreload:
+                    modified = hashlib.sha256(str(esm_path.stat().st_mtime).encode('utf-8')).hexdigest()
+                    esm += f'?{modified}'
+            else:
+                esm = esm_path.read_text(encoding='utf-8')
         else:
             esm = cls._esm
         esm = textwrap.dedent(esm)
@@ -360,7 +374,10 @@ def _init_params(self) -> dict[str, Any]:
         bundle_path = self._bundle_path
         importmap = self._process_importmap()
         if bundle_path:
-            bundle_hash = hashlib.sha256(str(bundle_path).encode('utf-8')).hexdigest()
+            if bundle_path == self._esm_path(not config.autoreload) and cls.__module__ in sys.modules:
+                bundle_hash = 'url'
+            else:
+                bundle_hash = hashlib.sha256(str(bundle_path).encode('utf-8')).hexdigest()
         else:
             bundle_hash = None
         data_props = self._process_param_change(data_params)
diff --git a/panel/io/server.py b/panel/io/server.py
index 1aadb42285..153a8c76cb 100644
--- a/panel/io/server.py
+++ b/panel/io/server.py
@@ -596,7 +596,7 @@ class ComponentResourceHandler(StaticFileHandler):
 
     _resource_attrs = [
         '__css__', '__javascript__', '__js_module__', '__javascript_modules__',  '_resources',
-        '_css', '_js', 'base_css', 'css', '_stylesheets', 'modifiers'
+        '_css', '_js', 'base_css', 'css', '_stylesheets', 'modifiers', '_bundle_path'
     ]
 
     def initialize(self, path: Optional[str] = None, default_filename: Optional[str] = None):
diff --git a/panel/models/react_component.ts b/panel/models/react_component.ts
index 73e6646121..c6a6219892 100644
--- a/panel/models/react_component.ts
+++ b/panel/models/react_component.ts
@@ -34,7 +34,7 @@ export class ReactComponentView extends ReactiveESMView {
 
   protected override _render_code(): string {
     let render_code = `
-if (rendered && view.model.usesReact) {
+if (rendered) {
   view._changing = true
   const root = createRoot(view.container)
   try {
@@ -44,9 +44,10 @@ if (rendered && view.model.usesReact) {
   }
 }`
     let import_code
+    const cache_key = (this.model.bundle === "url") ? this.model.esm : (this.model.bundle || `${this.model.class_name}-${this.model.esm.length}`)
     if (this.model.bundle) {
       import_code = `
-const ns = await view._module_cache.get(view.model.bundle)
+const ns = await view._module_cache.get("${cache_key}")
 const {React, createRoot} = ns.default`
     } else {
       import_code = `
@@ -56,7 +57,7 @@ import { createRoot } from "react-dom/client"`
     if (this.model.usesMui) {
       if (this.model.bundle) {
         import_code = `
-const ns = await view._module_cache.get(view.model.bundle)
+const ns = await view._module_cache.get("${cache_key}")
 const {CacheProvider, React, createCache, createRoot} = ns.default`
       } else {
         import_code = `
@@ -67,7 +68,7 @@ import { CacheProvider } from "@emotion/react"`
       render_code = `
   if (rendered) {
     const cache = createCache({
-      key: 'css-${btoa(this.model.id).replace("=", "-").toLowerCase()}',
+      key: 'css-${this.model.id.replace("-", "").replace(/\d/g, (digit) => String.fromCharCode(digit.charCodeAt(0) + 49)).toLowerCase()}',
       prepend: true,
       container: view.style_cache,
     })
@@ -248,10 +249,6 @@ export class ReactComponent extends ReactiveESM {
     return false
   }
 
-  get usesReact(): boolean {
-    return this.compiled !== null && this.compiled.includes("React")
-  }
-
   override compile(): string | null {
     const compiled = super.compile()
     if (this.bundle) {
diff --git a/panel/models/reactive_esm.ts b/panel/models/reactive_esm.ts
index b0a6698007..2e8a47bd69 100644
--- a/panel/models/reactive_esm.ts
+++ b/panel/models/reactive_esm.ts
@@ -630,17 +630,26 @@ export class ReactiveESM extends HTMLBox {
     this.compiled = compiled
     this._declare_importmap()
     let esm_module
-    const cache_key = this.bundle || `${this.class_name}-${this.esm.length}`
+    const use_cache = (!this.dev || this.bundle)
+    const cache_key = (this.bundle === "url") ? this.esm : (this.bundle || `${this.class_name}-${this.esm.length}`)
     let resolve: (value: any) => void
-    if (!this.dev && MODULE_CACHE.has(cache_key)) {
+    if (use_cache && MODULE_CACHE.has(cache_key)) {
       esm_module = Promise.resolve(MODULE_CACHE.get(cache_key))
     } else {
-      if (!this.dev) {
+      if (use_cache) {
         MODULE_CACHE.set(cache_key, new Promise((res) => { resolve = res }))
       }
-      const url = URL.createObjectURL(
-        new Blob([this.compiled], {type: "text/javascript"}),
-      )
+      let url
+      if (this.bundle === "url") {
+        const parts = location.pathname.split("/")
+        let path = parts.slice(0, parts.length-1).join("/")
+        if (path.length) {
+          path += "/"
+        }
+        url = `${location.origin}/${path}${this.esm}`
+      } else {
+        url = URL.createObjectURL(new Blob([this.compiled], {type: "text/javascript"}))
+      }
       esm_module = (window as any).importShim(url)
     }
     this.compiled_module = (esm_module as Promise<any>).then((mod: any) => {

From 70800fb18c73945157228d55abc9193712af523d Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 17 Oct 2024 08:38:20 -0400
Subject: [PATCH 154/164] Only attempt loading ESM bundles from URL when
 running server (#7412)

* Only attempt loading ESM bundles from URL when running server

* Handle pyodide
---
 panel/custom.py | 47 +++++++++++++++++++++++++----------------------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/panel/custom.py b/panel/custom.py
index cbec8d288a..f7d858ee67 100644
--- a/panel/custom.py
+++ b/panel/custom.py
@@ -295,10 +295,10 @@ def _esm_path(cls, compiled: bool = True) -> os.PathLike | None:
         return
 
     @classmethod
-    def _render_esm(cls, compiled: bool | Literal['compiling'] = True):
+    def _render_esm(cls, compiled: bool | Literal['compiling'] = True, server: bool = False):
         esm_path = cls._esm_path(compiled=compiled is True)
         if esm_path:
-            if esm_path == cls._bundle_path and cls.__module__ in sys.modules:
+            if esm_path == cls._bundle_path and cls.__module__ in sys.modules and server:
                 base_cls = cls
                 for scls in cls.__mro__[1:][::-1]:
                     if not issubclass(scls, ReactiveESM):
@@ -343,8 +343,12 @@ async def _watch_esm(self):
             self._update_esm()
 
     def _update_esm(self):
-        esm = self._render_esm(not config.autoreload)
         for ref, (model, _) in self._models.copy().items():
+            if ref not in state._views:
+                continue
+            doc = state._views[ref][2]
+            is_session = doc.session_context and doc.session_context.server_context
+            esm = self._render_esm(not config.autoreload, server=is_session)
             if esm == model.esm:
                 continue
             self._apply_update({}, {'esm': esm}, model, ref)
@@ -353,44 +357,43 @@ def _update_esm(self):
     def _linked_properties(self) -> list[str]:
         return [p for p in self._data_model.properties() if p not in ('js_property_callbacks',)]
 
-    def _init_params(self) -> dict[str, Any]:
+    def _get_properties(self, doc: Document) -> dict[str, Any]:
+        props = super()._get_properties(doc)
         cls = type(self)
-        ignored = [p for p in Reactive.param if not issubclass(cls.param[p].owner, ReactiveESM)]
-        params = {
-            p : getattr(self, p) for p in list(Layoutable.param)
-            if getattr(self, p) is not None and p != 'name'
-        }
         data_params = {}
+        ignored = [p for p in Reactive.param if not issubclass(cls.param[p].owner, ReactiveESM)]
         for k, v in self.param.values().items():
-            if (
-                (k in ignored and k != 'name') or
-                (((p:= self.param[k]).precedence or 0) < 0) or
-                is_viewable_param(p)
-            ):
+            p = self.param[k]
+            is_viewable = is_viewable_param(p)
+            if (k in ignored and k != 'name') or ((p.precedence or 0) < 0) or is_viewable:
+                if is_viewable and k in props:
+                    props.pop(k)
                 continue
-            if k in params:
-                params.pop(k)
+            if k in props:
+                props.pop(k)
             data_params[k] = v
         bundle_path = self._bundle_path
         importmap = self._process_importmap()
+        is_session = False
         if bundle_path:
-            if bundle_path == self._esm_path(not config.autoreload) and cls.__module__ in sys.modules:
+            is_session = (doc.session_context and doc.session_context.server_context)
+            if bundle_path == self._esm_path(not config.autoreload) and cls.__module__ in sys.modules and is_session:
                 bundle_hash = 'url'
             else:
                 bundle_hash = hashlib.sha256(str(bundle_path).encode('utf-8')).hexdigest()
         else:
             bundle_hash = None
         data_props = self._process_param_change(data_params)
-        params.update({
+        props.update({
             'bundle': bundle_hash,
             'class_name': camel_to_kebab(cls.__name__),
             'data': self._data_model(**{p: v for p, v in data_props.items() if p not in ignored}),
             'dev': config.autoreload or getattr(self, '_debug', False),
-            'esm': self._render_esm(not config.autoreload),
+            'esm': self._render_esm(not config.autoreload, server=is_session),
             'importmap': importmap,
             'name': cls.__name__
         })
-        return params
+        return props
 
     @classmethod
     def _process_importmap(cls):
@@ -636,8 +639,8 @@ def _exports__(cls) -> ExportSpec:
         return exports
 
     @classmethod
-    def _render_esm(cls, compiled: bool | Literal['compiling'] = True):
-        esm = super()._render_esm(compiled=compiled)
+    def _render_esm(cls, compiled: bool | Literal['compiling'] = True, server: bool = False):
+        esm = super()._render_esm(compiled=compiled, server=server)
         if compiled == 'compiling':
             esm = 'import * as React from "react"\n' + esm
         return esm

From 494850d2426f40ea3c68accc2f23fef7bc2e2097 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 17 Oct 2024 08:39:14 -0400
Subject: [PATCH 155/164] Add CHANGELOG for 1.5.3 (#7409)

* Add CHANGELOG for 1.5.3

* Update CHANGELOG
---
 CHANGELOG.md          | 25 +++++++++++++++++++++++++
 doc/about/releases.md | 25 +++++++++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9562df7ac3..8374fd560c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,30 @@
 # Releases
 
+## Version 1.5.3
+
+This release fixes a number of smaller regressions related to `Tabulator` `row_content`, ensures `--dev`/`--autoreload` picks up on external modules correctly and resolves OAuth guest endpoints correctly. Additionally it introduces some enhancements and bug fixes for custom components, such as adding support for loading custom components ESM Javascript bundles from the inbuilt endpoint ensuring that the bundle can be cached by the browser. Many thanks and welcome to our new contributors @chryshumble and @haojungc, our returning contributors @TheoMathurin, @aktech and @Coderambling and the core maintainer team @Hoxbro, @ahuang11, @MarcSkovMadsen and @philippjfr for their contributions to this release.
+
+### Enhancements
+
+- Sync dark mode on `browser_info` object ([#7382](https://github.com/holoviz/panel/pull/7382))
+- Allow loading custom component ESM bundles from URL ([#7410](https://github.com/holoviz/panel/pull/7410))
+
+### Bug fixes
+
+- Address issues with `Tabulator` embed_content and optimize row expansion ([#7364](https://github.com/holoviz/panel/pull/7364))
+- Prevent pipeline network plot from linking with other plots ([#7372](https://github.com/holoviz/panel/pull/7372))
+- Various fixes for custom component compilation ([#7381](https://github.com/holoviz/panel/pull/7381))
+- Fix OAuth guest endpoint ([#7385](https://github.com/holoviz/panel/pull/7385))
+- Fix `ReactiveESM._importmap` typing ([#7392](https://github.com/holoviz/panel/pull/7392))
+- Ensure that autoreload records modules to watch before startup ([#7399](https://github.com/holoviz/panel/pull/7399))
+- Prevent `Tabulator` from overlapping when `max_height` is set ([#7403](https://github.com/holoviz/panel/pull/7403))
+
+### Documentation
+
+- Update components_overview.md with text fixes ([#7335](https://github.com/holoviz/panel/pull/7335))
+- Corrected styles in doc ([#7371](https://github.com/holoviz/panel/pull/7371))
+- Fix typo in `panel.io.server` docstring ([#7405](https://github.com/holoviz/panel/pull/7405))
+
 ## Version 1.5.2
 
 Date: 2024-10-03
diff --git a/doc/about/releases.md b/doc/about/releases.md
index 8ca3667cf5..b6050cec82 100644
--- a/doc/about/releases.md
+++ b/doc/about/releases.md
@@ -2,6 +2,31 @@
 
 See [the HoloViz blog](https://blog.holoviz.org/#category=panel) for a visual summary of the major features added in each release.
 
+## Version 1.5.3
+
+This release fixes a number of smaller regressions related to `Tabulator` `row_content`, ensures `--dev`/`--autoreload` picks up on external modules correctly and resolves OAuth guest endpoints correctly. Additionally it introduces some enhancements and bug fixes for custom components, such as adding support for loading custom components ESM Javascript bundles from the inbuilt endpoint ensuring that the bundle can be cached by the browser. Many thanks and welcome to our new contributors @chryshumble and @haojungc, our returning contributors @TheoMathurin, @aktech and @Coderambling and the core maintainer team @Hoxbro, @ahuang11, @MarcSkovMadsen and @philippjfr for their contributions to this release.
+
+### Enhancements
+
+- Sync dark mode on `browser_info` object ([#7382](https://github.com/holoviz/panel/pull/7382))
+- Allow loading custom component ESM bundles from URL ([#7410](https://github.com/holoviz/panel/pull/7410))
+
+### Bug fixes
+
+- Address issues with `Tabulator` embed_content and optimize row expansion ([#7364](https://github.com/holoviz/panel/pull/7364))
+- Prevent pipeline network plot from linking with other plots ([#7372](https://github.com/holoviz/panel/pull/7372))
+- Various fixes for custom component compilation ([#7381](https://github.com/holoviz/panel/pull/7381))
+- Fix OAuth guest endpoint ([#7385](https://github.com/holoviz/panel/pull/7385))
+- Fix `ReactiveESM._importmap` typing ([#7392](https://github.com/holoviz/panel/pull/7392))
+- Ensure that autoreload records modules to watch before startup ([#7399](https://github.com/holoviz/panel/pull/7399))
+- Prevent `Tabulator` from overlapping when `max_height` is set ([#7403](https://github.com/holoviz/panel/pull/7403))
+
+### Documentation
+
+- Update components_overview.md with text fixes ([#7335](https://github.com/holoviz/panel/pull/7335))
+- Corrected styles in doc ([#7371](https://github.com/holoviz/panel/pull/7371))
+- Fix typo in `panel.io.server` docstring ([#7405](https://github.com/holoviz/panel/pull/7405))
+
 ## Version 1.5.2
 
 Date: 2024-10-03

From 912cc327c567a2312447d11ea66cec6a9c70321a Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 17 Oct 2024 14:39:51 +0200
Subject: [PATCH 156/164] Bump panel.js version to 1.5.3-a.1

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index 2c28446633..e0c750f4cf 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.2",
+  "version": "1.5.3-a.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.2",
+      "version": "1.5.3-a.1",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.6.0",
diff --git a/panel/package.json b/panel/package.json
index d03fcdd0c2..b662a64d84 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.2",
+  "version": "1.5.3-a.1",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From f7dcc2c32a5f44b73165be98ac5d230599270d54 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 18 Oct 2024 08:58:20 -0400
Subject: [PATCH 157/164] Add test (#7418)

---
 panel/reactive.py                  |  7 ++++---
 panel/tests/widgets/test_tables.py | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/panel/reactive.py b/panel/reactive.py
index 7f5569365f..81b0a076ba 100644
--- a/panel/reactive.py
+++ b/panel/reactive.py
@@ -1405,9 +1405,10 @@ def _process_data(self, data: Mapping[str, list | dict[int, Any] | np.ndarray])
         old_data = getattr(self, self._data_params[0])
         try:
             if old_data is self.value: # type: ignore
-                with param.discard_events(self):
-                    self.value = old_raw
-                self.value = old_data
+                with _syncing(self, ['value']):
+                    with param.discard_events(self):
+                        self.value = old_raw
+                    self.value = old_data
             else:
                 self.param.trigger('value')
         finally:
diff --git a/panel/tests/widgets/test_tables.py b/panel/tests/widgets/test_tables.py
index 5d82e41070..5d93c50773 100644
--- a/panel/tests/widgets/test_tables.py
+++ b/panel/tests/widgets/test_tables.py
@@ -165,6 +165,24 @@ def test_dataframe_process_data_event(dataframe):
     pd.testing.assert_frame_equal(table.value, df)
 
 
+@pytest.mark.parametrize('widget', [DataFrame, Tabulator])
+def test_dataframe_process_data_no_unsync(dataframe, widget):
+    df = dataframe.copy()
+
+    table1 = widget(dataframe.copy())
+    table2 = widget(table1.param.value.rx().copy())
+    table1._process_events({'data': {'int': [5, 7, 9]}})
+    df['int'] = [5, 7, 9]
+    pd.testing.assert_frame_equal(table1.value, df)
+    pd.testing.assert_frame_equal(table2.value, df)
+
+    # Simulate edit to unsync
+    table2._process_events({'data': {'int': [3, 2, 4]}})
+
+    table1.value = dataframe.copy()
+    pd.testing.assert_frame_equal(table2.value, dataframe)
+
+
 def test_dataframe_duplicate_column_name(document, comm):
     df = pd.DataFrame([[1, 1], [2, 2]], columns=['col', 'col'])
     with pytest.raises(ValueError):

From 95a4480a1cd7705745e019975c86dac9209202eb Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 18 Oct 2024 11:02:26 -0400
Subject: [PATCH 158/164] Bump Tabulator version to 6.3 (#7419)

---
 panel/compiler.py                                           | 6 +++++-
 .../dist/css/tabulator_fast.min.css                         | 0
 panel/models/tabulator.py                                   | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)
 rename panel/dist/bundled/datatabulator/{tabulator-tables@6.2.1 => tabulator-tables@6.3.0}/dist/css/tabulator_fast.min.css (100%)

diff --git a/panel/compiler.py b/panel/compiler.py
index 159d33f4cd..108b1b7095 100644
--- a/panel/compiler.py
+++ b/panel/compiler.py
@@ -350,12 +350,16 @@ def bundle_icons(verbose=False, external=True, download_list=None):
 
 def patch_tabulator():
     # https://github.com/olifolkerd/tabulator/issues/4421
-    path = BUNDLE_DIR / 'datatabulator' / 'tabulator-tables@6.2.1' / 'dist' / 'js' / 'tabulator.min.js'
+    path = BUNDLE_DIR / 'datatabulator' / 'tabulator-tables@6.3.0' / 'dist' / 'js' / 'tabulator.min.js'
     text = path.read_text()
     old = '"focus"!==this.options("editTriggerEvent")&&"click"!==this.options("editTriggerEvent")'
     new = '"click"!==this.options("editTriggerEvent")'
     assert text.count(old) == 1
     text = text.replace(old, new)
+    old = '(i=!0,this.subscribed("table-resize")?this.dispatch("table-resize"):this.redraw())'
+    new = '(i=!0,this.redrawing||(this.redrawing=!0,this.subscribed("table-resize")?this.dispatch("table-resize"):this.redraw(),this.redrawing=!1))'
+    assert text.count(old) == 1
+    text = text.replace(old, new)
     path.write_text(text)
 
 def bundle_resources(verbose=False, external=True):
diff --git a/panel/dist/bundled/datatabulator/tabulator-tables@6.2.1/dist/css/tabulator_fast.min.css b/panel/dist/bundled/datatabulator/tabulator-tables@6.3.0/dist/css/tabulator_fast.min.css
similarity index 100%
rename from panel/dist/bundled/datatabulator/tabulator-tables@6.2.1/dist/css/tabulator_fast.min.css
rename to panel/dist/bundled/datatabulator/tabulator-tables@6.3.0/dist/css/tabulator_fast.min.css
diff --git a/panel/models/tabulator.py b/panel/models/tabulator.py
index 1d37c57ab7..a98b5b0f84 100644
--- a/panel/models/tabulator.py
+++ b/panel/models/tabulator.py
@@ -16,7 +16,7 @@
 from ..util import classproperty
 from .layout import HTMLBox
 
-TABULATOR_VERSION = "6.2.1"
+TABULATOR_VERSION = "6.3.0"
 
 JS_SRC = f"{config.npm_cdn}/tabulator-tables@{TABULATOR_VERSION}/dist/js/tabulator.min.js"
 MOMENT_SRC = f"{config.npm_cdn}/luxon/build/global/luxon.min.js"

From 8ba8d7820bf7298d3c6749910f0eb2bc4fc21158 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 18 Oct 2024 11:12:21 -0400
Subject: [PATCH 159/164] Set table null formatter to empty string (#7421)

---
 panel/widgets/tables.py | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/panel/widgets/tables.py b/panel/widgets/tables.py
index 2ac704603b..6feb6d61e5 100644
--- a/panel/widgets/tables.py
+++ b/panel/widgets/tables.py
@@ -28,7 +28,7 @@
 from ..io.state import state
 from ..reactive import Reactive, ReactiveData
 from ..util import (
-    clone_model, datetime_as_utctimestamp, isdatetime, lazy_load,
+    BOKEH_GE_3_6, clone_model, datetime_as_utctimestamp, isdatetime, lazy_load,
     styler_update, updating,
 )
 from ..util.warnings import warn
@@ -241,7 +241,10 @@ def _get_column_definitions(self, col_names: list[str], df: pd.DataFrame) -> lis
                         date_format = '%Y-%m-%d %H:%M:%S'
                     formatter = DateFormatter(format=date_format, text_align='right')
                 else:
-                    formatter = StringFormatter()
+                    params = {}
+                    if BOKEH_GE_3_6:
+                        params['null_format'] = ''
+                    formatter = StringFormatter(**params)
 
                 default_text_align = True
             else:

From 8f8ed23858596fe53e74f14b4e7958213bf200c0 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 18 Oct 2024 17:12:46 +0200
Subject: [PATCH 160/164] Bump django from 3.2.25 to 4.2.16 in
 /examples/apps/django (#7413)

Bumps [django](https://github.com/django/django) from 3.2.25 to 4.2.16.
- [Commits](https://github.com/django/django/compare/3.2.25...4.2.16)

---
updated-dependencies:
- dependency-name: django
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 examples/apps/django/requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/apps/django/requirements.txt b/examples/apps/django/requirements.txt
index 5784247ed4..fe8429e5cd 100644
--- a/examples/apps/django/requirements.txt
+++ b/examples/apps/django/requirements.txt
@@ -1,4 +1,4 @@
-django==3.2.25
+django==4.2.16
 channels==2.2.0
 panel==0.9.3
 bokeh==2.0.2

From 6c0599da880884807b1c0d567200f785a48507a1 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 18 Oct 2024 11:12:58 -0400
Subject: [PATCH 161/164] Do not mutate Children inplace (#7417)

---
 panel/tests/layout/test_base.py | 28 ++++++++++++++++++++++++++++
 panel/viewable.py               | 24 ++++++++++++++++--------
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/panel/tests/layout/test_base.py b/panel/tests/layout/test_base.py
index 2b180e9a0d..422cbce9fc 100644
--- a/panel/tests/layout/test_base.py
+++ b/panel/tests/layout/test_base.py
@@ -441,6 +441,34 @@ def test_layout_clone_objects_in_kwargs(panel):
     assert clone.sizing_mode == 'stretch_height'
 
 
+@pytest.mark.parametrize('panel', [Column, Row])
+def test_layout_children_not_copied(panel):
+    layout = panel()
+
+    objects = [Markdown(), Markdown()]
+    layout.objects = objects
+
+    assert layout.objects is objects
+
+
+@pytest.mark.parametrize('panel', [Column, Row])
+def test_layout_children_not_mutated_inplace(panel):
+    layout = panel()
+
+    objects = [Div(), Div()]
+    layout.objects = objects
+
+    assert layout.objects is not objects
+    assert layout.objects[0].object is objects[0]
+    assert layout.objects[1].object is objects[1]
+
+    layout[:] = objects
+
+    assert layout.objects is not objects
+    assert layout.objects[0].object is objects[0]
+    assert layout.objects[1].object is objects[1]
+
+
 @pytest.mark.parametrize('panel', [Column, Row])
 def test_layout_clone_objects_in_args_and_kwargs(panel):
     div1 = Div()
diff --git a/panel/viewable.py b/panel/viewable.py
index 92e5ea4670..f346df18e6 100644
--- a/panel/viewable.py
+++ b/panel/viewable.py
@@ -1149,10 +1149,14 @@ def __init__(
     def _transform_value(self, val):
         if isinstance(val, list) and val:
             from .pane import panel
-            val[:] = [
-                v if isinstance(v, Viewable) else panel(v)
-                for v in val
-            ]
+            new = []
+            mutated = False
+            for v in val:
+                n = panel(v)
+                mutated |= v is not n
+                new.append(n)
+            if mutated:
+                val = new
         return val
 
     @instance_descriptor
@@ -1173,10 +1177,14 @@ def __init__(
     def _transform_value(self, val):
         if isinstance(val, dict) and val:
             from .pane import panel
-            val.update({
-                k: v if isinstance(v, Viewable) else panel(v)
-                for k, v in val.items()
-            })
+            new = {}
+            mutated = False
+            for k, v in val.items():
+                n = panel(v)
+                mutated |= v is not n
+                new[k] = n
+            if mutated:
+                val = new
         return val
 
     @instance_descriptor

From d8dab9b2eaff031ea8b0c5d6057275dd44b529e3 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 18 Oct 2024 17:17:50 +0200
Subject: [PATCH 162/164] Update CHANGELOG for 1.5.3b1

---
 CHANGELOG.md          | 8 +++++++-
 doc/about/releases.md | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8374fd560c..2b25aac1b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,7 @@ This release fixes a number of smaller regressions related to `Tabulator` `row_c
 ### Enhancements
 
 - Sync dark mode on `browser_info` object ([#7382](https://github.com/holoviz/panel/pull/7382))
-- Allow loading custom component ESM bundles from URL ([#7410](https://github.com/holoviz/panel/pull/7410))
+- Allow loading custom component ESM bundles from URL ([#7410](https://github.com/holoviz/panel/pull/7410), [#7412](https://github.com/holoviz/panel/pull/7412))
 
 ### Bug fixes
 
@@ -18,6 +18,12 @@ This release fixes a number of smaller regressions related to `Tabulator` `row_c
 - Fix `ReactiveESM._importmap` typing ([#7392](https://github.com/holoviz/panel/pull/7392))
 - Ensure that autoreload records modules to watch before startup ([#7399](https://github.com/holoviz/panel/pull/7399))
 - Prevent `Tabulator` from overlapping when `max_height` is set ([#7403](https://github.com/holoviz/panel/pull/7403))
+- Do not mutate layout `Children` inplace ([#7417](https://github.com/holoviz/panel/pull/7403))
+- Set `Tabulator` null formatter to empty string ([#7421](https://github.com/holoviz/panel/pull/7421))
+
+### Compatibility
+
+- Upgraded `Tabulator` version to 6.3 ([#7419](https://github.com/holoviz/panel/pull/7419))
 
 ### Documentation
 
diff --git a/doc/about/releases.md b/doc/about/releases.md
index b6050cec82..1972d30591 100644
--- a/doc/about/releases.md
+++ b/doc/about/releases.md
@@ -9,7 +9,7 @@ This release fixes a number of smaller regressions related to `Tabulator` `row_c
 ### Enhancements
 
 - Sync dark mode on `browser_info` object ([#7382](https://github.com/holoviz/panel/pull/7382))
-- Allow loading custom component ESM bundles from URL ([#7410](https://github.com/holoviz/panel/pull/7410))
+- Allow loading custom component ESM bundles from URL ([#7410](https://github.com/holoviz/panel/pull/7410), [#7412](https://github.com/holoviz/panel/pull/7412))
 
 ### Bug fixes
 
@@ -20,6 +20,12 @@ This release fixes a number of smaller regressions related to `Tabulator` `row_c
 - Fix `ReactiveESM._importmap` typing ([#7392](https://github.com/holoviz/panel/pull/7392))
 - Ensure that autoreload records modules to watch before startup ([#7399](https://github.com/holoviz/panel/pull/7399))
 - Prevent `Tabulator` from overlapping when `max_height` is set ([#7403](https://github.com/holoviz/panel/pull/7403))
+- Do not mutate layout `Children` inplace ([#7417](https://github.com/holoviz/panel/pull/7403))
+- Set `Tabulator` null formatter to empty string ([#7421](https://github.com/holoviz/panel/pull/7421))
+
+### Compatibility
+
+- Upgraded `Tabulator` version to 6.3 ([#7419](https://github.com/holoviz/panel/pull/7419))
 
 ### Documentation
 

From 87ef0193f3fed66a6a6d4523e88698c243cb6554 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 18 Oct 2024 17:20:14 +0200
Subject: [PATCH 163/164] Bump panel.js version to 1.5.3-b.1

---
 panel/package-lock.json | 4 ++--
 panel/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index e0c750f4cf..bfbae0483d 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.3-a.1",
+  "version": "1.5.3-b.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@holoviz/panel",
-      "version": "1.5.3-a.1",
+      "version": "1.5.3-b.1",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@bokeh/bokehjs": "3.6.0",
diff --git a/panel/package.json b/panel/package.json
index b662a64d84..248b178691 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holoviz/panel",
-  "version": "1.5.3-a.1",
+  "version": "1.5.3-b.1",
   "description": "The powerful data exploration & web app framework for Python.",
   "license": "BSD-3-Clause",
   "repository": {

From 0930d27fbdb82b9c3732494a0f9d2f50ef2214bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8xbro=20Hansen?= <simon.hansen@me.com>
Date: Mon, 21 Oct 2024 11:22:58 +0200
Subject: [PATCH 164/164] ci: Use Microsoft channel for pytest-playwright
 (#7424)

---
 pixi.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pixi.toml b/pixi.toml
index d9b80db49c..dec24c81d6 100644
--- a/pixi.toml
+++ b/pixi.toml
@@ -161,7 +161,7 @@ channels = ["microsoft"]
 
 [feature.test-ui.dependencies]
 playwright = { version = "*", channel = "microsoft" }
-pytest-playwright = "*"
+pytest-playwright = { version = "*", channel = "microsoft" }
 pytest-asyncio = "*"
 jupyter_server = "*"
 esbuild = "*"