@yuneta/gobj-ui 7.23.2 → 7.23.3

package/README.md

@@ -448,6 +448,13 @@ stays. Note the close contract: `C_YUI_WINDOW.close_window()` calls `on_close`
 and THEN destroys itself, so a host must drop its reference rather than destroy
 the window too.
 
+Its camera speaks the **same vocabulary as the treedb graph** (`7.23.3`): zoom
+in / zoom out, a live **zoom readout**, `yi-fit` for fit — the same corner
+brackets the SVG sprite draws for `g6-icon-fit` — and the WRITTEN `1:1` for
+actual size, which is written in every editor that offers it and never drawn.
+The readout hangs off G6's `aftertransform`, the one hook that also covers the
+wheel.
+
 The graph carries **its own** toolbar, a **layout picker**
 (`EV_CHANGE_LAYOUT {layout}`: `vertical tree`, `dagre top-down`,
 `dagre left-right` — the layout and the edge type move together), and since

package/dist/gobj-ui.cjs.js

@@ -9556,6 +9556,7 @@ var PRIVATE_DATA$11 = {
 	find_timer: null,
 	fold_listener: null,
 	$layout_select: null,
+	$zoom_readout: null,
 	$find_input: null,
 	$find_result: null,
 	$find_count: null
@@ -9753,6 +9754,54 @@ function destroy_ui$6(gobj) {
 	}
 }
 /************************************************************
+*   One camera button.
+************************************************************/
+function camera_button(gobj, icon, event_name, label_key, wide) {
+	return [
+		"button",
+		{
+			class: `button ${event_name}`,
+			type: "button",
+			style: {
+				height: wide,
+				width: "2.5em"
+			},
+			title: (0, i18next.t)(label_key),
+			"data-i18n-title": label_key,
+			"aria-label": (0, i18next.t)(label_key),
+			"data-i18n-aria-label": label_key
+		},
+		["i", {
+			style: "font-size:1.5em; color:inherit;",
+			class: icon
+		}],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
+		} }
+	];
+}
+/************************************************************
+*   The zoom, as a percentage.  What the two magnifiers
+*   change: an editor that offers a zoom shows the number.
+************************************************************/
+function zoom_percent_text$1(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph) return "100%";
+	try {
+		return Math.round(graph.getZoom() * 100) + "%";
+	} catch (e) {
+		return "100%";
+	}
+}
+/************************************************************
+*   Repaint the readout after anything that moves the camera.
+************************************************************/
+function update_zoom_readout$1(gobj) {
+	let priv = gobj.priv;
+	if (priv.$zoom_readout) priv.$zoom_readout.textContent = zoom_percent_text$1(gobj);
+}
+/************************************************************
 *   One fold button.  `open` rotates the chevron to the open
 *   state, mirroring the per-node toggle of the lazy tree.
 ************************************************************/
@@ -9832,62 +9881,52 @@ function make_toolbar$3(gobj) {
 		]]
 	]];
 	let center_items = [];
-	for (let item of [
-		[
-			"yi-magnifying-glass-plus",
-			"EV_ZOOM_IN",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass",
-			"EV_ZOOM_RESET",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass-minus",
-			"EV_ZOOM_OUT",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-to-eye",
-			"EV_CENTER",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-rotate",
-			"EV_REFRESH",
-			false,
-			"i"
-		]
-	]) {
-		let icon_name = item[0];
-		let event_name = item[1];
-		let disabled = item[2];
-		let button = {
-			class: `button ${event_name}`,
+	for (let item of [[
+		"yi-magnifying-glass-plus",
+		"EV_ZOOM_IN",
+		"zoom in"
+	], [
+		"yi-magnifying-glass-minus",
+		"EV_ZOOM_OUT",
+		"zoom out"
+	]]) center_items.push(camera_button(gobj, item[0], item[1], item[2], toolbar_wide));
+	priv.$zoom_readout = (0, _yuneta_gobj_js.createElement2)([
+		"span",
+		{
+			class: "JSON_GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey",
+			style: "font-size:.85rem; min-width:3.5em; justify-content:center;",
+			title: (0, i18next.t)("zoom level"),
+			"data-i18n-title": "zoom level"
+		},
+		zoom_percent_text$1(gobj)
+	]);
+	center_items.push(priv.$zoom_readout);
+	center_items.push(camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", toolbar_wide));
+	center_items.push([
+		"button",
+		{
+			class: "button EV_ZOOM_RESET",
+			type: "button",
 			style: {
 				height: toolbar_wide,
 				width: "2.5em"
-			}
-		};
-		if (disabled) button.disabled = true;
-		center_items.push([
-			"button",
-			button,
-			["i", {
-				style: "font-size:1.5em; color:inherit;",
-				class: icon_name
-			}],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
-			} }
-		]);
-	}
+			},
+			title: (0, i18next.t)("actual size"),
+			"data-i18n-title": "actual size",
+			"aria-label": (0, i18next.t)("actual size"),
+			"data-i18n-aria-label": "actual size"
+		},
+		[
+			"span",
+			{ style: "font-weight:700;" },
+			"1:1"
+		],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_ZOOM_RESET", { evt }, gobj);
+		} }
+	]);
+	center_items.push(camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", toolbar_wide));
 	let current_layout = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout") || DEFAULT_LAYOUT;
 	let options = Object.keys(LAYOUTS$1).map(function(key) {
 		let attrs = {
@@ -9971,6 +10010,9 @@ function build_graph$3(gobj) {
 	graph.on(_antv_g6.NodeEvent.CLICK, (evt) => {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_CLICK", { evt }, gobj);
 	});
+	graph.on("aftertransform", () => {
+		update_zoom_readout$1(gobj);
+	});
 	graph.on(_antv_g6.CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
 		let $canvas = document.getElementById(priv.canvas_id);
@@ -10230,6 +10272,7 @@ function load_json(gobj) {
 		});
 		graph.render().then(() => {
 			if (!preserve_view) graph.fitView();
+			update_zoom_readout$1(gobj);
 		});
 	}
 }

package/dist/gobj-ui.es.js

@@ -9551,6 +9551,7 @@ var PRIVATE_DATA$11 = {
 	find_timer: null,
 	fold_listener: null,
 	$layout_select: null,
+	$zoom_readout: null,
 	$find_input: null,
 	$find_result: null,
 	$find_count: null
@@ -9748,6 +9749,54 @@ function destroy_ui$6(gobj) {
 	}
 }
 /************************************************************
+*   One camera button.
+************************************************************/
+function camera_button(gobj, icon, event_name, label_key, wide) {
+	return [
+		"button",
+		{
+			class: `button ${event_name}`,
+			type: "button",
+			style: {
+				height: wide,
+				width: "2.5em"
+			},
+			title: t(label_key),
+			"data-i18n-title": label_key,
+			"aria-label": t(label_key),
+			"data-i18n-aria-label": label_key
+		},
+		["i", {
+			style: "font-size:1.5em; color:inherit;",
+			class: icon
+		}],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, event_name, { evt }, gobj);
+		} }
+	];
+}
+/************************************************************
+*   The zoom, as a percentage.  What the two magnifiers
+*   change: an editor that offers a zoom shows the number.
+************************************************************/
+function zoom_percent_text$1(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph) return "100%";
+	try {
+		return Math.round(graph.getZoom() * 100) + "%";
+	} catch (e) {
+		return "100%";
+	}
+}
+/************************************************************
+*   Repaint the readout after anything that moves the camera.
+************************************************************/
+function update_zoom_readout$1(gobj) {
+	let priv = gobj.priv;
+	if (priv.$zoom_readout) priv.$zoom_readout.textContent = zoom_percent_text$1(gobj);
+}
+/************************************************************
 *   One fold button.  `open` rotates the chevron to the open
 *   state, mirroring the per-node toggle of the lazy tree.
 ************************************************************/
@@ -9827,62 +9876,52 @@ function make_toolbar$3(gobj) {
 		]]
 	]];
 	let center_items = [];
-	for (let item of [
-		[
-			"yi-magnifying-glass-plus",
-			"EV_ZOOM_IN",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass",
-			"EV_ZOOM_RESET",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass-minus",
-			"EV_ZOOM_OUT",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-to-eye",
-			"EV_CENTER",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-rotate",
-			"EV_REFRESH",
-			false,
-			"i"
-		]
-	]) {
-		let icon_name = item[0];
-		let event_name = item[1];
-		let disabled = item[2];
-		let button = {
-			class: `button ${event_name}`,
+	for (let item of [[
+		"yi-magnifying-glass-plus",
+		"EV_ZOOM_IN",
+		"zoom in"
+	], [
+		"yi-magnifying-glass-minus",
+		"EV_ZOOM_OUT",
+		"zoom out"
+	]]) center_items.push(camera_button(gobj, item[0], item[1], item[2], toolbar_wide));
+	priv.$zoom_readout = createElement2([
+		"span",
+		{
+			class: "JSON_GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey",
+			style: "font-size:.85rem; min-width:3.5em; justify-content:center;",
+			title: t("zoom level"),
+			"data-i18n-title": "zoom level"
+		},
+		zoom_percent_text$1(gobj)
+	]);
+	center_items.push(priv.$zoom_readout);
+	center_items.push(camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", toolbar_wide));
+	center_items.push([
+		"button",
+		{
+			class: "button EV_ZOOM_RESET",
+			type: "button",
 			style: {
 				height: toolbar_wide,
 				width: "2.5em"
-			}
-		};
-		if (disabled) button.disabled = true;
-		center_items.push([
-			"button",
-			button,
-			["i", {
-				style: "font-size:1.5em; color:inherit;",
-				class: icon_name
-			}],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, event_name, { evt }, gobj);
-			} }
-		]);
-	}
+			},
+			title: t("actual size"),
+			"data-i18n-title": "actual size",
+			"aria-label": t("actual size"),
+			"data-i18n-aria-label": "actual size"
+		},
+		[
+			"span",
+			{ style: "font-weight:700;" },
+			"1:1"
+		],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, "EV_ZOOM_RESET", { evt }, gobj);
+		} }
+	]);
+	center_items.push(camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", toolbar_wide));
 	let current_layout = gobj_read_str_attr(gobj, "layout") || DEFAULT_LAYOUT;
 	let options = Object.keys(LAYOUTS$1).map(function(key) {
 		let attrs = {
@@ -9966,6 +10005,9 @@ function build_graph$3(gobj) {
 	graph.on(NodeEvent.CLICK, (evt) => {
 		gobj_send_event(gobj, "EV_NODE_CLICK", { evt }, gobj);
 	});
+	graph.on("aftertransform", () => {
+		update_zoom_readout$1(gobj);
+	});
 	graph.on(CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
 		let $canvas = document.getElementById(priv.canvas_id);
@@ -10225,6 +10267,7 @@ function load_json(gobj) {
 		});
 		graph.render().then(() => {
 			if (!preserve_view) graph.fitView();
+			update_zoom_readout$1(gobj);
 		});
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.2",
+  "version": "7.23.3",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_json_graph.js

@@ -179,6 +179,7 @@ let PRIVATE_DATA = {
     find_timer:     null,   // rate-limits the find box
     fold_listener:  null,   // delegated click on the card fold handles
     $layout_select: null,   // the layout picker
+    $zoom_readout:  null,   // the zoom percentage
     $find_input:    null,
     $find_result:   null,
     $find_count:    null,
@@ -454,6 +455,53 @@ function destroy_ui(gobj)
     }
 }
 
+/************************************************************
+ *   One camera button.
+ ************************************************************/
+function camera_button(gobj, icon, event_name, label_key, wide)
+{
+    return ['button', {class: `button ${event_name}`, type: 'button',
+                       style: {height: wide, width: '2.5em'},
+                       title: t(label_key), 'data-i18n-title': label_key,
+                       'aria-label': t(label_key), 'data-i18n-aria-label': label_key},
+        ['i', {style: 'font-size:1.5em; color:inherit;', class: icon}],
+        {
+            click: (evt) => {
+                evt.stopPropagation();
+                gobj_send_event(gobj, event_name, {evt: evt}, gobj);
+            }
+        }
+    ];
+}
+
+/************************************************************
+ *   The zoom, as a percentage.  What the two magnifiers
+ *   change: an editor that offers a zoom shows the number.
+ ************************************************************/
+function zoom_percent_text(gobj)
+{
+    let graph = gobj.priv.graph;
+    if(!graph) {
+        return "100%";
+    }
+    try {
+        return Math.round(graph.getZoom() * 100) + "%";
+    } catch(e) {
+        return "100%";
+    }
+}
+
+/************************************************************
+ *   Repaint the readout after anything that moves the camera.
+ ************************************************************/
+function update_zoom_readout(gobj)
+{
+    let priv = gobj.priv;
+    if(priv.$zoom_readout) {
+        priv.$zoom_readout.textContent = zoom_percent_text(gobj);
+    }
+}
+
 /************************************************************
  *   One fold button.  `open` rotates the chevron to the open
  *   state, mirroring the per-node toggle of the lazy tree.
@@ -544,39 +592,56 @@ function make_toolbar(gobj)
     ];
     let center_items = [];
 
+    /*
+     *  The camera, in the SAME vocabulary the treedb graph uses
+     *  (`c_g6_nodes_tree.js`): zoom in / zoom out, then what those two
+     *  change — the zoom READOUT, because without it "1:1" is a jump to
+     *  a value nobody was told — then fit, then actual size.
+     *
+     *  Two of these used to be a different picture for the same action
+     *  in a sibling view, which is the worst thing an icon can be:
+     *  `EV_ZOOM_RESET` was a bare magnifier and `EV_CENTER` was
+     *  `yi-arrows-to-eye`.  Now fit is the same bracket glyph as the
+     *  sprite's `g6-icon-fit`, and actual size is WRITTEN — `1:1` is
+     *  written in every editor that offers it, never drawn, because
+     *  there is no glyph for it.
+     */
     let c_icons = [
-        ["yi-magnifying-glass-plus", "EV_ZOOM_IN",       false, 'i'],
-        ["yi-magnifying-glass",      "EV_ZOOM_RESET",    false, 'i'],
-        ["yi-magnifying-glass-minus","EV_ZOOM_OUT",      false, 'i'],
-        ["yi-arrows-to-eye",         "EV_CENTER",        false, 'i'],
-        ["yi-arrows-rotate",         "EV_REFRESH",       false, 'i'],
+        ["yi-magnifying-glass-plus",  "EV_ZOOM_IN",  "zoom in"],
+        ["yi-magnifying-glass-minus", "EV_ZOOM_OUT", "zoom out"],
     ];
 
     for(let item of c_icons) {
-        let icon_name = item[0];
-        let event_name = item[1];
-        let disabled = item[2];
-
-        let button = {
-            class: `button ${event_name}`,
-            style: {height: toolbar_wide, width: '2.5em'}
-        };
-        if(disabled) {
-            button.disabled = true;
-        }
-        center_items.push(
-            ['button', button,
-                ['i', {style: 'font-size:1.5em; color:inherit;', class: icon_name}],
-                {
-                    click: (evt) => {
-                        evt.stopPropagation();
-                        gobj_send_event(gobj, event_name, {evt: evt}, gobj);
-                    }
-                }
-            ]
-        );
+        center_items.push(camera_button(gobj, item[0], item[1], item[2], toolbar_wide));
     }
 
+    priv.$zoom_readout = createElement2(
+        ['span', {class: 'JSON_GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey',
+                  style: 'font-size:.85rem; min-width:3.5em; justify-content:center;',
+                  title: t('zoom level'), 'data-i18n-title': 'zoom level'},
+         zoom_percent_text(gobj)]
+    );
+    center_items.push(priv.$zoom_readout);
+
+    center_items.push(camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", toolbar_wide));
+
+    /*  Written, not drawn — see above.  */
+    center_items.push(
+        ['button', {class: 'button EV_ZOOM_RESET', type: 'button',
+                    style: {height: toolbar_wide, width: '2.5em'},
+                    title: t('actual size'), 'data-i18n-title': 'actual size',
+                    'aria-label': t('actual size'), 'data-i18n-aria-label': 'actual size'},
+         ['span', {style: 'font-weight:700;'}, '1:1'],
+         {
+             click: (evt) => {
+                 evt.stopPropagation();
+                 gobj_send_event(gobj, "EV_ZOOM_RESET", {evt: evt}, gobj);
+             }
+         }]
+    );
+
+    center_items.push(camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", toolbar_wide));
+
     /*
      *  Right: fold the tree.
      *
@@ -677,6 +742,15 @@ function build_graph(gobj)
         gobj_send_event(gobj, "EV_NODE_CLICK", {evt: evt}, gobj);
     });
 
+    /*  ONE hook for the readout, the same one the treedb graph uses:
+     *  G6 fires it on any camera change, and the WHEEL is a camera
+     *  change that passes through no action of ours — patching the text
+     *  node from each zoom action would have left the readout lying
+     *  after every notch.  */
+    graph.on('aftertransform', () => {
+        update_zoom_readout(gobj);
+    });
+
     graph.on(CanvasEvent.CLICK, (evt) => {
         // Canvas click
     });
@@ -1071,6 +1145,7 @@ function load_json(gobj)
             if(!preserve_view) {
                 graph.fitView();
             }
+            update_zoom_readout(gobj);
         });
     }
 }

package/src/yui_icons.css

@@ -376,3 +376,13 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M208 80c0-26.5 21.5-48 48-48l64 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-8 0 0 40 152 0c30.9 0 56 25.1 56 56l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-4.4-3.6-8-8-8l-152 0 0 40 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-40-152 0c-4.4 0-8 3.6-8 8l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-30.9 25.1-56 56-56l152 0 0-40-8 0c-26.5 0-48-21.5-48-48l0-64z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M208 80c0-26.5 21.5-48 48-48l64 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-8 0 0 40 152 0c30.9 0 56 25.1 56 56l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-4.4-3.6-8-8-8l-152 0 0 40 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-40-152 0c-4.4 0-8 3.6-8 8l0 32 8 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l8 0 0-32c0-30.9 25.1-56 56-56l152 0 0-40-8 0c-26.5 0-48-21.5-48-48l0-64z'/%3E%3C/svg%3E");
 }
+
+/*  The camera's "fit" bracket, the SAME glyph the treedb graph's SVG
+ *  sprite uses for the same action (`g6-icon-fit` in lib_icons.js).
+ *  One action, one drawing: the JSON graph used to say it with
+ *  `yi-arrows-to-eye`, which is a different picture for the same
+ *  button in a sibling view.  */
+.yi-fit::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32S0 334.3 0 352l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M32 32C14.3 32 0 46.3 0 64l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-64 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 32zM64 352c0-17.7-14.3-32-32-32S0 334.3 0 352l0 96c0 17.7 14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0 0-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0 0 64c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32l-96 0zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 64-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32l0-96z'/%3E%3C/svg%3E");
+}