@perspective-dev/viewer 5.4.0 → 5.5.1

package/dist/wasm/perspective-viewer.wasm.d.ts

@@ -17,7 +17,7 @@ export const perspectivedebugpluginelement_save: (a: number, b: number) => void;
 export const perspectivedebugpluginelement_select_mode: (a: number, b: number) => void;
 export const perspectivedebugpluginelement_update: (a: number, b: number) => number;
 export const perspectiveviewerelement___get_model: (a: number) => number;
-export const perspectiveviewerelement_addPanel: (a: number, b: number) => number;
+export const perspectiveviewerelement_addPanel: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_agentConfig: (a: number, b: number, c: number) => void;
 export const perspectiveviewerelement_agentPrompt: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_agentReset: (a: number) => number;
@@ -48,7 +48,7 @@ export const perspectiveviewerelement_resetError: (a: number) => number;
 export const perspectiveviewerelement_resetThemes: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_resize: (a: number, b: number) => number;
 export const perspectiveviewerelement_restore: (a: number, b: number, c: number) => number;
-export const perspectiveviewerelement_restoreWorkspace: (a: number, b: number) => number;
+export const perspectiveviewerelement_restoreWorkspace: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_restyleElement: (a: number) => number;
 export const perspectiveviewerelement_save: (a: number, b: number) => number;
 export const perspectiveviewerelement_saveWorkspace: (a: number, b: number) => number;
@@ -157,22 +157,22 @@ export const virtualdataslice_setIntegerCol: (a: number, b: number, c: number, d
 export const virtualdataslice_setStringCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
 export const virtualserver_handleRequest: (a: number, b: number, c: number) => number;
 export const virtualserver_new: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_18575: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_19286: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_20199: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_4417: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_24952: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_33110: (a: number, b: number, c: number, d: number) => void;
-export const __wasm_bindgen_func_elem_18694: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_19291: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_7737: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_7738: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_7739: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_7735: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_24969: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_21238: (a: number, b: number) => number;
-export const __wasm_bindgen_func_elem_19290: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_21239: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18919: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_4482: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_19628: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_20538: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_25347: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_33507: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_19039: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7893: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7894: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7895: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7891: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_19633: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_25364: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_21577: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_19632: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_21578: (a: number, b: number) => void;
 export const __wbindgen_export: (a: number, b: number) => number;
 export const __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;
 export const __wbindgen_export3: (a: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer",
-  "version": "5.4.0",
+  "version": "5.5.1",
   "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective",
   "keywords": [
     "perspective",
@@ -56,12 +56,12 @@
   "dependencies": {
     "pro_self_extracting_wasm": "0.0.9",
     "regular-layout": "=0.6.1",
-    "@perspective-dev/client": "^5.4.0"
+    "@perspective-dev/client": "^5.5.1"
   },
   "devDependencies": {
     "lightningcss": "^1.29.0",
-    "@playwright/test": "=1.58.0",
-    "@playwright/experimental-ct-react": "=1.58.0",
+    "@playwright/test": "=1.62.0",
+    "@playwright/experimental-ct-react": "=1.62.0",
     "@types/react": ">17 <20",
     "@types/node": ">=22",
     "@types/react-dom": ">17 <20",
@@ -70,9 +70,9 @@
     "typedoc": "^0.28.7",
     "typescript": ">=5 <6",
     "zx": ">=8 <9",
-    "@perspective-dev/esbuild-plugin": "^5.4.0",
-    "@perspective-dev/metadata": "^5.4.0",
-    "@perspective-dev/test": "^5.4.0"
+    "@perspective-dev/test": "^5.5.1",
+    "@perspective-dev/esbuild-plugin": "^5.5.1",
+    "@perspective-dev/metadata": "^5.5.1"
   },
   "scripts": {
     "build": "node ./build.mjs",

package/src/css/column-selector.css

@@ -201,13 +201,15 @@
         /* Expression column toolbar buttons */
         span.expression-edit-button,
         span.expression-delete-button {
-            padding-top: 1px;
+            height: 19px;
+            width: 21px;
             font-family: var(--psp-button--font-family, inherit);
             cursor: pointer;
-            padding: 2px 4px 0 4px;
-            margin-right: 1px;
+            padding: 1.5px 2.5px 0;
+            margin-right: 2px;
             margin-left: auto;
             border-radius: 3px;
+            border: 1px solid transparent;
             &:hover,
             &.is-editing {
                 background-color: var(--psp--color);
@@ -507,6 +509,12 @@
         }
     }
 
+    .column-selector-column.is-modified {
+        .expression-edit-button:not(.is-editing) {
+            border: 1px dashed var(--psp--color);
+        }
+    }
+
     #active-columns .column-selector-column.dragdrop-hover,
     #active-columns.dragdrop-highlight .column-selector-column,
     .column-selector-column.dragdrop-hover {

package/src/css/column-style.css

@@ -61,6 +61,68 @@
             }
         }
 
+        .alignment-grid {
+            display: grid;
+            flex: 0 1 100%;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 0px;
+            padding: 1px;
+            border: 1px solid var(--psp-inactive--color);
+            border-radius: 5px;
+        }
+
+        .alignment-cell {
+            display: grid;
+            place-items: center;
+            width: 100%;
+            height: 16px;
+            padding: 0;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            background: none;
+            cursor: pointer;
+
+            &::before {
+                content: "";
+                width: 100%;
+                height: 100%;
+                border-radius: 3px;
+                background: #00000020;
+            }
+
+            &[aria-checked="true"]::before {
+                background: var(--psp-inactive--color);
+            }
+
+            &:hover:not(:disabled) {
+                border-color: var(--psp--color);
+            }
+
+            &:disabled {
+                cursor: default;
+
+                &::before {
+                    opacity: 0.25;
+                }
+            }
+
+            &[data-align^="top"] {
+                align-items: start;
+            }
+
+            &[data-align^="bottom"] {
+                align-items: end;
+            }
+
+            &[data-align$="left"] {
+                justify-items: start;
+            }
+
+            &[data-align$="right"] {
+                justify-items: end;
+            }
+        }
+
         &.no-style {
             font-style: italic;
             background-color: var(--psp-placeholder--background);
@@ -211,6 +273,7 @@
 
         div.section {
             display: flex;
+            justify-content: space-between;
             align-items: center;
             flex: 1 1 100%;
         }
@@ -537,6 +600,105 @@
             }
         }
 
+        .font-style-toggle {
+            flex: 0 0 24px;
+            height: 24px;
+            margin-left: 4px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid var(--psp-inactive--color, #666);
+            border-radius: 2px;
+            cursor: pointer;
+            user-select: none;
+            font-size: 12px;
+            color: var(--psp-inactive--color, #666);
+
+            &.bold:before {
+                content: "B";
+                font-weight: bold;
+            }
+
+            &.italic:before {
+                content: "I";
+                font-style: italic;
+                font-family: serif;
+            }
+
+            &:hover {
+                color: var(--psp--color, inherit);
+                border-color: var(--psp--color, inherit);
+            }
+
+            &[aria-pressed="true"] {
+                color: var(--psp--background-color);
+                background-color: var(--psp--color);
+                border-color: var(--psp--color);
+            }
+        }
+
+        .font-group {
+            display: flex;
+            flex: 1 1 100%;
+            flex-wrap: wrap;
+            contain: inline-size;
+            & > input {
+                flex: 1 1 auto;
+            }
+
+            .font-group-family {
+                flex: 1 1 100%;
+                margin-bottom: 3px;
+            }
+        }
+
+        .local-fonts-controls {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            flex: 1 1 100%;
+            height: 0;
+            margin-top: 10px;
+            margin-bottom: -10px;
+            margin-right: 24px;
+            position: relative;
+            z-index: 1;
+            font-size: var(--label--font-size, 0.75em);
+            color: var(--psp-inactive--color);
+
+            .local-fonts-request {
+                cursor: pointer;
+                user-select: none;
+                line-height: 15px;
+
+                &:before {
+                    font-family: var(--psp-button--font-family, inherit);
+                    color: var(--psp-inactive--color, #666);
+                    content: var(
+                        --psp-label--request-local-fonts--content,
+                        "Local Fonts"
+                    );
+                }
+
+                &:hover:before {
+                    color: var(--psp--color, inherit);
+                }
+
+                &.blocked {
+                    cursor: help;
+
+                    &:before,
+                    &:hover:before {
+                        color: var(--psp-inactive--color, #666);
+                        content: var(
+                            --psp-label--local-fonts-blocked--content,
+                            "No Access"
+                        );
+                    }
+                }
+            }
+        }
+
         input[type="color"] {
             width: 100%;
             height: 24px;

package/src/css/config-selector.css

@@ -408,7 +408,7 @@
     .sort-icon {
         display: inline-flex;
         margin-left: auto;
-        /* margin-right: 8px; */
+        margin-right: 3px;
         cursor: pointer;
         font-family: var(--psp-button--font-family, inherit);
         background-repeat: no-repeat;

package/src/css/form/debug.css

@@ -93,6 +93,15 @@
             flex: 0 1 auto;
             overflow: hidden;
             padding: 8px 8px 8px 0;
+
+            #debug-panel-error {
+                flex: 0 0 auto;
+                padding-top: 6px;
+                font-size: 10px;
+                color: var(--psp-error--color);
+                white-space: pre-wrap;
+                overflow-wrap: anywhere;
+            }
         }
 
         #editor {

package/src/css/status-bar.css

@@ -210,6 +210,17 @@
             background-color: transparent;
         }
 
+        span#status.pending {
+            background-color: var(--psp-inactive--color);
+            mask-image: var(--psp-icon--status-pending--mask-image);
+            -webkit-mask-image: var(--psp-icon--status-pending--mask-image);
+            &:before {
+                visibility: hidden;
+                content: var(--psp-icon--status-pending--mask-image);
+                line-height: 0;
+            }
+        }
+
         span#status.connected,
         span#status.updating {
             mask-image: var(--psp-icon--status-ok--mask-image);

package/src/css/ui/containers/tabs.css

@@ -13,7 +13,8 @@
 
 :host {
     #format-tab {
-        overflow: auto;
+        overflow-y: auto;
+        overflow-x: hidden;
         scrollbar-gutter: stable;
     }
 

package/src/rust/agent/tools.rs

@@ -22,7 +22,7 @@ use wasm_bindgen::prelude::*;
 
 use super::client::protocol::{FunctionDef, ToolDef};
 use super::docs::{DocsBundle, DocsCell};
-use crate::config::{ColumnConfigSchema, ControlSpec};
+use crate::config::{Alignment, ColumnConfigSchema, ControlSpec};
 use crate::custom_elements::viewer::PerspectiveViewerElement;
 use crate::queries::{
     get_column_config_schema, get_plugin_config_schema, get_viewer_config, validate_expr,
@@ -628,6 +628,78 @@ fn control_schema_entries(spec: &ControlSpec) -> Vec<(String, Value)> {
         ControlSpec::String { key, default, .. } => {
             vec![(key.clone(), json!({ "type": "string", "default": default }))]
         },
+        ControlSpec::Font {
+            key,
+            default,
+            size,
+            bold,
+            italic,
+        } => {
+            let mut out = vec![(
+                key.clone(),
+                json!({
+                    "type": "string",
+                    "description": "A CSS font family: a generic keyword (`inherit`, `monospace`, `sans-serif`, `serif`, `system-ui`) or an installed font name",
+                    "default": default,
+                }),
+            )];
+
+            if let Some(size) = size {
+                let mut node = json!({
+                    "type": "number",
+                    "description": "Font size in CSS pixels",
+                    "default": size.default,
+                });
+
+                if let Some(min) = size.min {
+                    node["minimum"] = json!(min);
+                }
+
+                if let Some(max) = size.max {
+                    node["maximum"] = json!(max);
+                }
+
+                out.push((size.key.clone(), node));
+            }
+
+            for (toggle, description) in [(bold, "Bold text"), (italic, "Italic text")] {
+                if let Some(toggle) = toggle {
+                    out.push((
+                        toggle.key.clone(),
+                        json!({ "type": "boolean", "description": description, "default": toggle.default }),
+                    ));
+                }
+            }
+
+            out
+        },
+        ControlSpec::Alignment {
+            key,
+            default,
+            corners,
+        } => {
+            let cells: &[Alignment] = if *corners {
+                &Alignment::CORNERS
+            } else {
+                &Alignment::ALL
+            };
+
+            let mut node = json!({
+                "type": "string",
+                "enum": cells.iter().map(|x| x.as_str()).collect::<Vec<_>>(),
+                "description": if *corners {
+                    "Anchor corner of a 3×3 grid: `top-left`, `top-right`, `bottom-left` or `bottom-right`"
+                } else {
+                    "Anchor cell of a 3×3 grid: a corner `top-left|top-right|bottom-left|bottom-right`, an edge `top|left|right|bottom`, or `center`"
+                },
+            });
+
+            if let Some(default) = default {
+                node["default"] = json!(default.as_str());
+            }
+
+            vec![(key.clone(), node)]
+        },
         ControlSpec::Color { key, default } => vec![(
             key.clone(),
             json!({
@@ -683,10 +755,6 @@ fn control_schema_entries(spec: &ControlSpec) -> Vec<(String, Value)> {
             "date_format".to_owned(),
             json!({ "description": "Datetime display format: a style preset or custom format fields" }),
         )],
-        ControlSpec::StringFormat => vec![(
-            "format".to_owned(),
-            json!({ "description": "String display format" }),
-        )],
         ControlSpec::NumberSeriesStyle { .. } => vec![
             (
                 "chart_type".to_owned(),
@@ -977,7 +1045,7 @@ impl PerspectiveViewerElement {
 
         let before = self.agent_panel_names();
         let js_config = js_sys::JSON::parse(&args.config.to_string())?;
-        let added = self.addPanel(js_config.unchecked_into());
+        let added = self.addPanel(js_config.unchecked_into(), None);
         let result = wasm_bindgen_futures::JsFuture::from(js_sys::Promise::from(added)).await;
         let id = match result {
             Ok(id) => id
@@ -1048,7 +1116,12 @@ impl PerspectiveViewerElement {
         let columns_config = serde_json::to_value(&viewer_config.columns_config)?;
         let plugin_schema = {
             let view_config = panel.session.get_view_config();
-            get_plugin_config_schema(&panel.renderer, &view_config).ok()
+            get_plugin_config_schema(
+                &panel.renderer,
+                &view_config,
+                Some(&viewer_config.panel.plugin_config),
+            )
+            .ok()
         };
 
         let column_schema = match &args.column {

package/src/rust/components/column_selector/active_column.rs

@@ -70,6 +70,10 @@ pub struct ActiveColumnProps {
     #[prop_or_default]
     pub is_window: bool,
 
+    /// Whether this column's `columns_config` entry holds overridden keys.
+    #[prop_or_default]
+    pub is_modified: bool,
+
     #[prop_or_default]
     pub is_last_column: bool,
 
@@ -103,6 +107,7 @@ impl PartialEq for ActiveColumnProps {
             && self.is_editing == rhs.is_editing
             && self.is_expression == rhs.is_expression
             && self.is_window == rhs.is_window
+            && self.is_modified == rhs.is_modified
             && self.show_edit_btn == rhs.show_edit_btn
             && self.col_type == rhs.col_type
             && self.metadata == rhs.metadata
@@ -219,6 +224,10 @@ impl Component for ActiveColumn {
             outer_classes.push("dragdrop-hover");
         }
 
+        if ctx.props().is_modified {
+            outer_classes.push("is-modified");
+        }
+
         let name = match &ctx.props().name {
             ActiveColumnState {
                 label,

package/src/rust/components/column_selector.rs

@@ -67,6 +67,10 @@ pub struct ColumnSelectorProps {
     /// prop on `SettingsPanelProps`.
     pub plugin_static_config: Rc<PluginStaticConfig>,
     pub view_config: PtrEqRc<ViewConfig>,
+
+    /// Snapshot of the active plugin's `columns_config` bucket, whose
+    /// non-empty entries mark their active columns as modified.
+    pub columns_config: PtrEqRc<ColumnConfigMap>,
     pub drag_column: Option<String>,
 
     /// Cloned session metadata snapshot — threaded from `SessionProps`
@@ -110,6 +114,7 @@ impl PartialEq for ColumnSelectorProps {
             && self.named_column_count == rhs.named_column_count
             && self.plugin_static_config == rhs.plugin_static_config
             && self.view_config == rhs.view_config
+            && self.columns_config == rhs.columns_config
             && self.drag_column == rhs.drag_column
             && self.metadata == rhs.metadata
             && self.selected_theme == rhs.selected_theme
@@ -455,6 +460,11 @@ impl Component for ColumnSelector {
                     name.get_name().is_some() && renderer.can_render_column_styles();
 
                 let show_edit_btn = is_expression || is_window || can_render_styles;
+                let is_modified = name
+                    .get_name()
+                    .and_then(|n| ctx.props().columns_config.get(n))
+                    .is_some_and(|entry| !entry.is_empty());
+
                 let on_open_expr_panel = &ctx.props().on_open_expr_panel;
                 html_nested! {
                     <ScrollPanelItem {key} {size_hint}>
@@ -465,6 +475,7 @@ impl Component for ColumnSelector {
                             {is_editing}
                             {is_expression}
                             {is_window}
+                            {is_modified}
                             {show_edit_btn}
                             {col_type}
                             {is_last_column}

package/src/rust/components/column_settings_sidebar/style_tab/alignment_field.rs

@@ -0,0 +1,90 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use serde_json::Value;
+use web_sys::MouseEvent;
+use yew::prelude::*;
+
+use super::primitive_field::emit;
+use crate::config::{Alignment, ColumnConfigFieldUpdate};
+use crate::ui::OptionalField;
+
+#[derive(Properties, PartialEq)]
+pub struct AlignmentFieldProps {
+    pub field_key: String,
+    pub default: Option<Alignment>,
+    pub corners: bool,
+    pub current: Option<Alignment>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+}
+
+/// The `ControlSpec::Alignment` widget: a 3×3 grid of cells whose dot sits
+/// where the cell's token anchors.
+#[function_component]
+pub fn AlignmentField(props: &AlignmentFieldProps) -> Html {
+    let selected = props.current.or(props.default);
+    let checked = props.current.is_some() && props.current != props.default;
+    let on_reset = use_callback(
+        (props.field_key.clone(), props.on_change.clone()),
+        |_: MouseEvent, (key, on_change)| emit(on_change, key, None),
+    );
+
+    let cells = Alignment::ALL.into_iter().map(|align| {
+        let onclick = {
+            let key = props.field_key.clone();
+            let default = props.default;
+            let on_change = props.on_change.clone();
+            Callback::from(move |_: MouseEvent| {
+                if Some(align) == default {
+                    emit(&on_change, &key, None);
+                } else {
+                    emit(
+                        &on_change,
+                        &key,
+                        Some(Value::String(align.as_str().to_owned())),
+                    );
+                }
+            })
+        };
+
+        let is_selected = selected == Some(align);
+        html! {
+            <button
+                type="button"
+                role="radio"
+                class={classes!(
+                    "alignment-cell",
+                    (is_selected && props.current.is_none()).then_some("is-default")
+                )}
+                data-align={align.as_str()}
+                aria-checked={is_selected.to_string()}
+                aria-label={align.humanized()}
+                disabled={props.corners && !align.is_corner()}
+                {onclick}
+            />
+        }
+    });
+
+    html! {
+        <div class="row">
+            <OptionalField label={props.field_key.clone()} on_check={on_reset} {checked}>
+                <div
+                    class="alignment-grid"
+                    role="radiogroup"
+                    id={format!("{}-alignment", props.field_key)}
+                >
+                    { for cells }
+                </div>
+            </OptionalField>
+        </div>
+    }
+}