@pie-players/pie-assessment-toolkit 0.3.58 → 0.3.59

package/dist/components/ItemToolBar.custom-element.js

@@ -4073,6 +4073,23 @@ function if_block(node, fn, elseif = false) {
 }
 // ../../node_modules/.bun/svelte@5.56.0/node_modules/svelte/src/internal/client/dom/blocks/key.js
 var NAN = Symbol("NaN");
+function key(node, get_key, render_fn) {
+  if (hydrating) {
+    hydrate_next();
+  }
+  var branches = new BranchManager(node);
+  var legacy = !is_runes();
+  block(() => {
+    var key2 = get_key();
+    if (key2 !== key2) {
+      key2 = NAN;
+    }
+    if (legacy && key2 !== null && typeof key2 === "object") {
+      key2 = {};
+    }
+    branches.ensure(key2, render_fn);
+  });
+}
 // ../../node_modules/.bun/svelte@5.56.0/node_modules/svelte/src/internal/client/dom/blocks/each.js
 function pause_effects(state2, to_destroy, controlled_anchor) {
   var transitions = [];
@@ -4121,8 +4138,8 @@ function destroy_effects(state2, to_destroy, remove_dom = true) {
   if (state2.pending.size > 0) {
     preserved_effects = new Set;
     for (const keys of state2.pending.values()) {
-      for (const key of keys) {
-        preserved_effects.add(state2.items.get(key).e);
+      for (const key2 of keys) {
+        preserved_effects.add(state2.items.get(key2).e);
       }
     }
   }
@@ -4208,14 +4225,14 @@ function each(node, flags2, get_collection, get_key, render_fn, fallback_fn = nu
         set_hydrating(false);
       }
       var value = array[index];
-      var key = get_key(value, index);
+      var key2 = get_key(value, index);
       if (true_default) {
         var key_again = get_key(value, index);
-        if (key !== key_again) {
-          each_key_volatile(String(index), String(key), String(key_again));
+        if (key2 !== key_again) {
+          each_key_volatile(String(index), String(key2), String(key_again));
         }
       }
-      var item = first_run ? null : items.get(key);
+      var item = first_run ? null : items.get(key2);
       if (item) {
         if (item.v)
           internal_set(item.v, value);
@@ -4225,13 +4242,13 @@ function each(node, flags2, get_collection, get_key, render_fn, fallback_fn = nu
           batch.unskip_effect(item.e);
         }
       } else {
-        item = create_item(items, first_run ? anchor : offscreen_anchor ??= create_text(), value, key, index, render_fn, flags2, get_collection);
+        item = create_item(items, first_run ? anchor : offscreen_anchor ??= create_text(), value, key2, index, render_fn, flags2, get_collection);
         if (!first_run) {
           item.e.f |= EFFECT_OFFSCREEN;
         }
-        items.set(key, item);
+        items.set(key2, item);
       }
-      keys.add(key);
+      keys.add(key2);
     }
     if (length === 0 && fallback_fn && !fallback) {
       if (first_run) {
@@ -4254,8 +4271,8 @@ function each(node, flags2, get_collection, get_key, render_fn, fallback_fn = nu
     if (!first_run) {
       pending.set(batch, keys);
       if (defer) {
-        for (const [key2, item2] of items) {
-          if (!keys.has(key2)) {
+        for (const [key3, item2] of items) {
+          if (!keys.has(key3)) {
             batch.skip_effect(item2.e);
           }
         }
@@ -4293,14 +4310,14 @@ function reconcile(state2, array, anchor, flags2, get_key) {
   var matched = [];
   var stashed = [];
   var value;
-  var key;
+  var key2;
   var effect2;
   var i;
   if (is_animated) {
     for (i = 0;i < length; i += 1) {
       value = array[i];
-      key = get_key(value, i);
-      effect2 = items.get(key).e;
+      key2 = get_key(value, i);
+      effect2 = items.get(key2).e;
       if ((effect2.f & EFFECT_OFFSCREEN) === 0) {
         effect2.nodes?.a?.measure();
         (to_animate ??= new Set).add(effect2);
@@ -4309,8 +4326,8 @@ function reconcile(state2, array, anchor, flags2, get_key) {
   }
   for (i = 0;i < length; i += 1) {
     value = array[i];
-    key = get_key(value, i);
-    effect2 = items.get(key).e;
+    key2 = get_key(value, i);
+    effect2 = items.get(key2).e;
     if (state2.outrogroups !== null) {
       for (const group of state2.outrogroups) {
         group.pending.delete(effect2);
@@ -4446,7 +4463,7 @@ function reconcile(state2, array, anchor, flags2, get_key) {
     });
   }
 }
-function create_item(items, anchor, value, key, index, render_fn, flags2, get_collection) {
+function create_item(items, anchor, value, key2, index, render_fn, flags2, get_collection) {
   var v = (flags2 & EACH_ITEM_REACTIVE) !== 0 ? (flags2 & EACH_ITEM_IMMUTABLE) === 0 ? mutable_source(value, false, false) : source(value) : null;
   var i = (flags2 & EACH_INDEX_REACTIVE) !== 0 ? source(index) : null;
   if (true_default && v) {
@@ -4460,7 +4477,7 @@ function create_item(items, anchor, value, key, index, render_fn, flags2, get_co
     e: branch(() => {
       render_fn(anchor, v ?? value, i ?? index, get_collection);
       return () => {
-        items.delete(key);
+        items.delete(key2);
       };
     })
   };
@@ -4496,16 +4513,16 @@ function validate_each_keys(array, key_fn) {
   const keys = new Map;
   const length = array.length;
   for (let i = 0;i < length; i++) {
-    const key = key_fn(array[i], i);
-    if (keys.has(key)) {
-      const a = String(keys.get(key));
+    const key2 = key_fn(array[i], i);
+    if (keys.has(key2)) {
+      const a = String(keys.get(key2));
       const b = String(i);
-      let k = String(key);
+      let k = String(key2);
       if (k.startsWith("[object "))
         k = null;
       each_key_duplicate(a, b, k);
     }
-    keys.set(key, i);
+    keys.set(key2, i);
   }
 }
 // ../../node_modules/.bun/svelte@5.56.0/node_modules/svelte/src/internal/client/dom/blocks/html.js
@@ -4644,13 +4661,13 @@ function to_class(value, hash2, directives) {
     classname = classname ? classname + " " + hash2 : hash2;
   }
   if (directives) {
-    for (var key of Object.keys(directives)) {
-      if (directives[key]) {
-        classname = classname ? classname + " " + key : key;
+    for (var key2 of Object.keys(directives)) {
+      if (directives[key2]) {
+        classname = classname ? classname + " " + key2 : key2;
       } else if (classname.length) {
-        var len = key.length;
+        var len = key2.length;
         var a = 0;
-        while ((a = classname.indexOf(key, a)) >= 0) {
+        while ((a = classname.indexOf(key2, a)) >= 0) {
           var b = a + len;
           if ((a === 0 || whitespace.includes(classname[a - 1])) && (b === classname.length || whitespace.includes(classname[b]))) {
             classname = (a === 0 ? "" : classname.substring(0, a)) + classname.substring(b + 1);
@@ -4663,6 +4680,99 @@ function to_class(value, hash2, directives) {
   }
   return classname === "" ? null : classname;
 }
+function append_styles2(styles, important = false) {
+  var separator = important ? " !important;" : ";";
+  var css = "";
+  for (var key2 of Object.keys(styles)) {
+    var value = styles[key2];
+    if (value != null && value !== "") {
+      css += " " + key2 + ": " + value + separator;
+    }
+  }
+  return css;
+}
+function to_css_name(name) {
+  if (name[0] !== "-" || name[1] !== "-") {
+    return name.toLowerCase();
+  }
+  return name;
+}
+function to_style(value, styles) {
+  if (styles) {
+    var new_style = "";
+    var normal_styles;
+    var important_styles;
+    if (Array.isArray(styles)) {
+      normal_styles = styles[0];
+      important_styles = styles[1];
+    } else {
+      normal_styles = styles;
+    }
+    if (value) {
+      value = String(value).replaceAll(/\s*\/\*.*?\*\/\s*/g, "").trim();
+      var in_str = false;
+      var in_apo = 0;
+      var in_comment = false;
+      var reserved_names = [];
+      if (normal_styles) {
+        reserved_names.push(...Object.keys(normal_styles).map(to_css_name));
+      }
+      if (important_styles) {
+        reserved_names.push(...Object.keys(important_styles).map(to_css_name));
+      }
+      var start_index = 0;
+      var name_index = -1;
+      const len = value.length;
+      for (var i = 0;i < len; i++) {
+        var c = value[i];
+        if (in_comment) {
+          if (c === "/" && value[i - 1] === "*") {
+            in_comment = false;
+          }
+        } else if (in_str) {
+          if (in_str === c) {
+            in_str = false;
+          }
+        } else if (c === "/" && value[i + 1] === "*") {
+          in_comment = true;
+        } else if (c === '"' || c === "'") {
+          in_str = c;
+        } else if (c === "(") {
+          in_apo++;
+        } else if (c === ")") {
+          in_apo--;
+        }
+        if (!in_comment && in_str === false && in_apo === 0) {
+          if (c === ":" && name_index === -1) {
+            name_index = i;
+          } else if (c === ";" || i === len - 1) {
+            if (name_index !== -1) {
+              var name = to_css_name(value.substring(start_index, name_index).trim());
+              if (!reserved_names.includes(name)) {
+                if (c !== ";") {
+                  i++;
+                }
+                var property = value.substring(start_index, i).trim();
+                new_style += " " + property + ";";
+              }
+            }
+            start_index = i + 1;
+            name_index = -1;
+          }
+        }
+      }
+    }
+    if (normal_styles) {
+      new_style += append_styles2(normal_styles);
+    }
+    if (important_styles) {
+      new_style += append_styles2(important_styles, true);
+    }
+    new_style = new_style.trim();
+    return new_style === "" ? null : new_style;
+  }
+  return value == null ? null : String(value);
+}
 
 // ../../node_modules/.bun/svelte@5.56.0/node_modules/svelte/src/internal/client/dom/elements/class.js
 function set_class(dom, is_html, value, hash2, prev_classes, next_classes) {
@@ -4680,16 +4790,52 @@ function set_class(dom, is_html, value, hash2, prev_classes, next_classes) {
     }
     dom[CLASS_CACHE] = value;
   } else if (next_classes && prev_classes !== next_classes) {
-    for (var key in next_classes) {
-      var is_present = !!next_classes[key];
-      if (prev_classes == null || is_present !== !!prev_classes[key]) {
-        dom.classList.toggle(key, is_present);
+    for (var key2 in next_classes) {
+      var is_present = !!next_classes[key2];
+      if (prev_classes == null || is_present !== !!prev_classes[key2]) {
+        dom.classList.toggle(key2, is_present);
       }
     }
   }
   return next_classes;
 }
 
+// ../../node_modules/.bun/svelte@5.56.0/node_modules/svelte/src/internal/client/dom/elements/style.js
+function update_styles(dom, prev = {}, next2, priority) {
+  for (var key2 in next2) {
+    var value = next2[key2];
+    if (prev[key2] !== value) {
+      if (next2[key2] == null) {
+        dom.style.removeProperty(key2);
+      } else {
+        dom.style.setProperty(key2, value, priority);
+      }
+    }
+  }
+}
+function set_style(dom, value, prev_styles, next_styles) {
+  var prev = dom[STYLE_CACHE];
+  if (hydrating || prev !== value) {
+    var next_style_attr = to_style(value, next_styles);
+    if (!hydrating || next_style_attr !== dom.getAttribute("style")) {
+      if (next_style_attr == null) {
+        dom.removeAttribute("style");
+      } else {
+        dom.style.cssText = next_style_attr;
+      }
+    }
+    dom[STYLE_CACHE] = value;
+  } else if (next_styles) {
+    if (Array.isArray(next_styles)) {
+      update_styles(dom, prev_styles?.[0], next_styles[0]);
+      update_styles(dom, prev_styles?.[1], next_styles[1], "important");
+    } else {
+      update_styles(dom, prev_styles, next_styles);
+    }
+  }
+  return next_styles;
+}
+
 // ../../node_modules/.bun/svelte@5.56.0/node_modules/svelte/src/internal/client/dom/elements/attributes.js
 var CLASS = Symbol("class");
 var STYLE = Symbol("style");
@@ -4761,9 +4907,9 @@ function get_setters(element) {
   var element_proto = Element.prototype;
   while (element_proto !== proto) {
     descriptors = get_descriptors(proto);
-    for (var key in descriptors) {
-      if (descriptors[key].set && key !== "innerHTML" && key !== "textContent" && key !== "innerText") {
-        setters.push(key);
+    for (var key2 in descriptors) {
+      if (descriptors[key2].set && key2 !== "innerHTML" && key2 !== "textContent" && key2 !== "innerText") {
+        setters.push(key2);
       }
     }
     proto = get_prototype_of(proto);
@@ -4870,7 +5016,7 @@ function bind_this(element_or_component = {}, update2, get_value, get_parts) {
   return element_or_component;
 }
 // ../../node_modules/.bun/svelte@5.56.0/node_modules/svelte/src/internal/client/reactivity/props.js
-function prop(props, key, flags2, fallback) {
+function prop(props, key2, flags2, fallback) {
   var runes = !legacy_mode_flag || (flags2 & PROPS_IS_RUNES) !== 0;
   var bindable = (flags2 & PROPS_IS_BINDABLE) !== 0;
   var lazy = (flags2 & PROPS_IS_LAZY_INITIAL) !== 0;
@@ -4891,27 +5037,27 @@ function prop(props, key, flags2, fallback) {
   let setter;
   if (bindable) {
     var is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
-    setter = get_descriptor(props, key)?.set ?? (is_entry_props && key in props ? (v) => props[key] = v : undefined);
+    setter = get_descriptor(props, key2)?.set ?? (is_entry_props && key2 in props ? (v) => props[key2] = v : undefined);
   }
   var initial_value;
   var is_store_sub = false;
   if (bindable) {
-    [initial_value, is_store_sub] = capture_store_binding(() => props[key]);
+    [initial_value, is_store_sub] = capture_store_binding(() => props[key2]);
   } else {
-    initial_value = props[key];
+    initial_value = props[key2];
   }
   if (initial_value === undefined && fallback !== undefined) {
     initial_value = get_fallback();
     if (setter) {
       if (runes)
-        props_invalid_value(key);
+        props_invalid_value(key2);
       setter(initial_value);
     }
   }
   var getter;
   if (runes) {
     getter = () => {
-      var value = props[key];
+      var value = props[key2];
       if (value === undefined)
         return get_fallback();
       fallback_dirty = true;
@@ -4919,7 +5065,7 @@ function prop(props, key, flags2, fallback) {
     };
   } else {
     getter = () => {
-      var value = props[key];
+      var value = props[key2];
       if (value !== undefined) {
         fallback_value = undefined;
       }
@@ -4947,7 +5093,7 @@ function prop(props, key, flags2, fallback) {
     return getter();
   });
   if (true_default) {
-    d.label = key;
+    d.label = key2;
   }
   if (bindable)
     get2(d);
@@ -4977,9 +5123,9 @@ class Svelte4Component {
   #instance;
   constructor(options) {
     var sources = new Map;
-    var add_source = (key, value) => {
+    var add_source = (key2, value) => {
       var s = mutable_source(value, false, false);
-      sources.set(key, s);
+      sources.set(key2, s);
       return s;
     };
     const props = new Proxy({ ...options.props || {}, $$events: {} }, {
@@ -5010,15 +5156,15 @@ class Svelte4Component {
       flushSync();
     }
     this.#events = props.$$events;
-    for (const key of Object.keys(this.#instance)) {
-      if (key === "$set" || key === "$destroy" || key === "$on")
+    for (const key2 of Object.keys(this.#instance)) {
+      if (key2 === "$set" || key2 === "$destroy" || key2 === "$on")
         continue;
-      define_property(this, key, {
+      define_property(this, key2, {
         get() {
-          return this.#instance[key];
+          return this.#instance[key2];
         },
         set(value) {
-          this.#instance[key] = value;
+          this.#instance[key2] = value;
         },
         enumerable: true
       });
@@ -5121,10 +5267,10 @@ if (typeof HTMLElement === "function") {
             this.$$d[name] = get_custom_element_value(name, attribute.value, this.$$p_d, "toProp");
           }
         }
-        for (const key in this.$$p_d) {
-          if (!(key in this.$$d) && this[key] !== undefined) {
-            this.$$d[key] = this[key];
-            delete this[key];
+        for (const key2 in this.$$p_d) {
+          if (!(key2 in this.$$d) && this[key2] !== undefined) {
+            this.$$d[key2] = this[key2];
+            delete this[key2];
           }
         }
         this.$$c = createClassComponent({
@@ -5139,15 +5285,15 @@ if (typeof HTMLElement === "function") {
         this.$$me = effect_root(() => {
           render_effect(() => {
             this.$$r = true;
-            for (const key of object_keys(this.$$c)) {
-              if (!this.$$p_d[key]?.reflect)
+            for (const key2 of object_keys(this.$$c)) {
+              if (!this.$$p_d[key2]?.reflect)
                 continue;
-              this.$$d[key] = this.$$c[key];
-              const attribute_value = get_custom_element_value(key, this.$$d[key], this.$$p_d, "toAttribute");
+              this.$$d[key2] = this.$$c[key2];
+              const attribute_value = get_custom_element_value(key2, this.$$d[key2], this.$$p_d, "toAttribute");
               if (attribute_value == null) {
-                this.removeAttribute(this.$$p_d[key].attribute || key);
+                this.removeAttribute(this.$$p_d[key2].attribute || key2);
               } else {
-                this.setAttribute(this.$$p_d[key].attribute || key, attribute_value);
+                this.setAttribute(this.$$p_d[key2].attribute || key2, attribute_value);
               }
             }
             this.$$r = false;
@@ -5180,7 +5326,7 @@ if (typeof HTMLElement === "function") {
       });
     }
     $$g_p(attribute_name) {
-      return object_keys(this.$$p_d).find((key) => this.$$p_d[key].attribute === attribute_name || !this.$$p_d[key].attribute && key.toLowerCase() === attribute_name) || attribute_name;
+      return object_keys(this.$$p_d).find((key2) => this.$$p_d[key2].attribute === attribute_name || !this.$$p_d[key2].attribute && key2.toLowerCase() === attribute_name) || attribute_name;
     }
   };
 }
@@ -5229,7 +5375,7 @@ function create_custom_element(Component, props_definition, slots, exports, shad
       this.$$p_d = props_definition;
     }
     static get observedAttributes() {
-      return object_keys(props_definition).map((key) => (props_definition[key].attribute || key).toLowerCase());
+      return object_keys(props_definition).map((key2) => (props_definition[key2].attribute || key2).toLowerCase());
     }
   };
   object_keys(props_definition).forEach((prop2) => {
@@ -5355,6 +5501,11 @@ function isExternalIconUrl(icon) {
 
 // dist/components/.ItemToolBar.custom-element.unbundled.js
 import { sanitizeSvgIcon } from "@pie-players/pie-players-shared/security";
+import {
+  approximateZoomFromWidths,
+  computeZoomCompensation,
+  ICON_BUTTON_ZOOM_OPTIONS
+} from "@pie-players/pie-players-shared/ui/zoom-compensation";
 import {
   createFocusTrap,
   FOCUSABLE_SELECTOR,
@@ -7843,7 +7994,7 @@ var __pieDefineSafely = (tagName, ctor) => {
   }
 };
 var root_1 = from_html(`<span class="item-toolbar__element-host svelte-rnx3ie"></span>`);
-var root_2 = from_html(`<nds-icon-button></nds-icon-button>`, 2);
+var root_2 = from_html(`<span class="item-toolbar__nds-button-zoom svelte-rnx3ie"><nds-icon-button></nds-icon-button></span>`, 2);
 var root_3 = from_html(`<span aria-hidden="true"></span>`);
 var root_4 = from_html(`<img class="item-toolbar__icon-image svelte-rnx3ie" alt=""/>`);
 var root_5 = from_html(`<i aria-hidden="true"></i>`);
@@ -7854,7 +8005,10 @@ var root_9 = from_html(`<div></div>`);
 var root_10 = from_html(`<div><div class="item-toolbar__tools-row svelte-rnx3ie"><!> <!> <!></div> <!></div>`);
 var $$css = {
   hash: "svelte-rnx3ie",
-  code: `.item-toolbar.svelte-rnx3ie {display:flex;flex-direction:column;align-items:flex-end;gap:0;--pie-toolbar-tools-row-height: 2rem;--pie-tts-controls-row-height: 2.875rem;}.item-toolbar__tools-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:0.5rem;min-height:var(--pie-toolbar-tools-row-height);}.item-toolbar__controls-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:0;height:auto;}.item-toolbar__controls-row--reserve.svelte-rnx3ie {min-height:var(--pie-tts-controls-row-height);height:var(--pie-tts-controls-row-height);}.item-toolbar__controls-row--active.svelte-rnx3ie {min-height:var(--pie-tts-controls-row-height);height:var(--pie-tts-controls-row-height);}.item-toolbar__controls-row--align-start.svelte-rnx3ie {justify-content:flex-start;}.item-toolbar__controls-host.svelte-rnx3ie {display:inline-flex;align-items:center;justify-content:flex-end;width:100%;}.item-toolbar--top.svelte-rnx3ie,
+  code: `.item-toolbar.svelte-rnx3ie {display:flex;flex-direction:column;align-items:flex-end;gap:0;--pie-toolbar-tools-row-height: 2rem;--pie-tts-controls-row-height: 2.875rem;}.item-toolbar__tools-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;
+		/* Cap the gap between toolbar items (e.g. TTS play ↔ calculator) at its
+		   200%-zoom size with the same factor the buttons use, so the spacing
+		   doesn't keep growing past 200% while the buttons themselves freeze. */gap:calc(0.5rem * var(--pie-toolbar-zoom-comp, 1));min-height:var(--pie-toolbar-tools-row-height);}.item-toolbar__controls-row.svelte-rnx3ie {display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:0;height:auto;}.item-toolbar__controls-row--reserve.svelte-rnx3ie {min-height:var(--pie-tts-controls-row-height);height:var(--pie-tts-controls-row-height);}.item-toolbar__controls-row--active.svelte-rnx3ie {min-height:var(--pie-tts-controls-row-height);height:var(--pie-tts-controls-row-height);}.item-toolbar__controls-row--align-start.svelte-rnx3ie {justify-content:flex-start;}.item-toolbar__controls-host.svelte-rnx3ie {display:inline-flex;align-items:center;justify-content:flex-end;width:100%;}.item-toolbar--top.svelte-rnx3ie,
 	.item-toolbar--bottom.svelte-rnx3ie {align-items:flex-end;}.item-toolbar--left.svelte-rnx3ie,
 	.item-toolbar--right.svelte-rnx3ie {align-items:stretch;}.item-toolbar--left.svelte-rnx3ie .item-toolbar__tools-row:where(.svelte-rnx3ie),
 	.item-toolbar--right.svelte-rnx3ie .item-toolbar__tools-row:where(.svelte-rnx3ie) {flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;}.item-toolbar--left.svelte-rnx3ie .item-toolbar__controls-row:where(.svelte-rnx3ie),
@@ -7864,7 +8018,9 @@ var $$css = {
 	   custom property so its light-DOM inner button matches the toolbar's
 	   md/sm/lg dimensions (32 / 44 / 40 px) without a layout shift. The glyph
 	   keeps the NDS-native icon size (we render size="small"), so it isn't
-	   oversized. */.item-toolbar.svelte-rnx3ie nds-icon-button:where(.svelte-rnx3ie) {
+	   oversized. */
+	/* Freeze the calculator's header open/close button at its 200%-zoom size
+	   (factor is 1 at zoom <= 200%). Zoom on this wrapper, not the host. */.item-toolbar__nds-button-zoom.svelte-rnx3ie {display:inline-flex;zoom:var(--pie-toolbar-zoom-comp, 1);}.item-toolbar.svelte-rnx3ie nds-icon-button:where(.svelte-rnx3ie) {
 		/* Host-settable button size per toolbar size (drives the NDS outer button
 		   via its own --height-32). */--height-32: var(--pie-calculator-button-size, 2rem);
 		/* Host-settable accent for the calculator button: the NDS tertiary glyph
@@ -7962,7 +8118,24 @@ function ItemToolBar($$anchor, $$props) {
   let activeToolState = state(proxy({}));
   let level = prop($$props, "level", 7, "item"), scopeId = prop($$props, "scopeId", 7, ""), itemId = prop($$props, "itemId", 7, ""), sectionId = prop($$props, "sectionId", 7, ""), catalogId = prop($$props, "catalogId", 7, ""), tools = prop($$props, "tools", 7, "calculator,textToSpeech,answerEliminator"), contentKind = prop($$props, "contentKind", 7, "assessment-item"), position = prop($$props, "position", 7, "bottom"), scopeElement = prop($$props, "scopeElement", 7, null), toolRegistry = prop($$props, "toolRegistry", 7, null), item = prop($$props, "item", 7, null), hostButtons = prop($$props, "hostButtons", 23, () => []), className = prop($$props, "class", 7, ""), size = prop($$props, "size", 7, "md"), language = prop($$props, "language", 7, "en-US");
   let toolbarRootElement = state(null);
+  function currentCalculatorZoomCompensation() {
+    if (typeof window === "undefined")
+      return 1;
+    return computeZoomCompensation(approximateZoomFromWidths(window.outerWidth, window.innerWidth), ICON_BUTTON_ZOOM_OPTIONS.maxZoom, ICON_BUTTON_ZOOM_OPTIONS.minCompensation);
+  }
+  let calculatorButtonZoomComp = state(1);
+  user_effect(() => {
+    if (typeof window === "undefined")
+      return;
+    const update2 = () => {
+      set(calculatorButtonZoomComp, currentCalculatorZoomCompensation(), true);
+    };
+    update2();
+    window.addEventListener("resize", update2);
+    return () => window.removeEventListener("resize", update2);
+  });
   let runtimeContext = state(null);
+  const useNdsIcons = user_derived(() => get2(runtimeContext)?.ndsIcons === true);
   let shellContext = state(null);
   let moduleLoadVersion = state(0);
   let policyChangeVersion = state(0);
@@ -8778,6 +8951,7 @@ function ItemToolBar($$anchor, $$props) {
       shellEl.style.width = `${width}px`;
       shellEl.style.height = `${height}px`;
       shellEl.style.display = currentArgs.active ? "flex" : "none";
+      shellEl.style.setProperty("--pie-tool-shell-zoom-comp", String(currentCalculatorZoomCompensation()));
     };
     const mountContent = () => {
       if (!contentEl)
@@ -9094,7 +9268,8 @@ function ItemToolBar($$anchor, $$props) {
     };
     if (isBrowser && currentArgs.mounted.entry.shell) {
       const isCalculatorShell = currentArgs.mounted.toolId === "calculator";
-      if (isCalculatorShell)
+      const useNdsShellIcons = isCalculatorShell && get2(useNdsIcons);
+      if (useNdsShellIcons)
         ensureNdsAssets();
       shellEl = document.createElement("div");
       shellEl.className = "pie-tool-shell";
@@ -9153,7 +9328,7 @@ function ItemToolBar($$anchor, $$props) {
       const appendControl = (label, glyph, iconName, onActivate, faVariant = "fa-regular") => {
         if (!controlsEl)
           return;
-        controlsEl.appendChild(isCalculatorShell ? createShellIconButton(label, iconName, onActivate, faVariant) : createShellControlButton(label, glyph, onActivate));
+        controlsEl.appendChild(useNdsShellIcons ? createShellIconButton(label, iconName, onActivate, faVariant) : createShellControlButton(label, glyph, onActivate));
       };
       if (shellConfig?.draggable !== false) {
         appendControl("Move tool left", "←", "chevron-left", () => moveBy(-24, 0));
@@ -9175,12 +9350,13 @@ function ItemToolBar($$anchor, $$props) {
         rightClusterEl.style.display = "inline-flex";
         rightClusterEl.style.alignItems = "center";
         rightClusterEl.style.gap = "6px";
+        rightClusterEl.style.setProperty("zoom", "var(--pie-tool-shell-zoom-comp, 1)");
         rightClusterEl.appendChild(controlsEl);
         headerEl.appendChild(rightClusterEl);
       } else {
         headerEl.appendChild(controlsEl);
       }
-      if (isCalculatorShell) {
+      if (useNdsShellIcons) {
         closeButtonEl = createShellIconButton("Close tool", "xmark", closeShell, "fa-regular");
         closeButtonEl.style.display = currentArgs.mounted.entry.shell.closeable === false ? "none" : "inline-block";
       } else {
@@ -9214,7 +9390,7 @@ function ItemToolBar($$anchor, $$props) {
         closeButton.style.cursor = "pointer";
         closeButton.style.display = "inline-flex";
         closeButton.style.alignItems = "center";
-        closeButton.style.justifyContent = "center";
+        closeButton.style.justifyItems = "center";
         closeButton.style.width = "28px";
         closeButton.style.height = "28px";
         closeButton.style.padding = "0";
@@ -9571,12 +9747,17 @@ function ItemToolBar($$anchor, $$props) {
         var node_3 = first_child(fragment_1);
         {
           var consequent = ($$anchor4) => {
-            var span = root_1();
-            action(span, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
-              mounted: get2(mounted),
-              active: get2(renderedToolActiveById)[get2(mounted).toolId] ?? false
-            }));
-            append($$anchor4, span);
+            var fragment_2 = comment();
+            var node_4 = first_child(fragment_2);
+            key(node_4, () => get2(useNdsIcons), ($$anchor5) => {
+              var span = root_1();
+              action(span, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
+                mounted: get2(mounted),
+                active: get2(renderedToolActiveById)[get2(mounted).toolId] ?? false
+              }));
+              append($$anchor5, span);
+            });
+            append($$anchor4, fragment_2);
           };
           var alternate = ($$anchor4) => {
             var span_1 = root_1();
@@ -9592,14 +9773,15 @@ function ItemToolBar($$anchor, $$props) {
         }
         append($$anchor3, fragment_1);
       });
-      var node_4 = sibling(node_2, 2);
-      each(node_4, 17, () => get2(toolbarItems), (item2) => item2.id, ($$anchor3, item2, $$index_1, $$array) => {
-        const faIconName = user_derived(() => isToolbarLinkItem(get2(item2)) ? null : resolveFaIconName(get2(item2)));
-        var fragment_2 = comment();
-        var node_5 = first_child(fragment_2);
+      var node_5 = sibling(node_2, 2);
+      each(node_5, 17, () => get2(toolbarItems), (item2) => item2.id, ($$anchor3, item2, $$index_1, $$array) => {
+        const faIconName = user_derived(() => get2(useNdsIcons) && !isToolbarLinkItem(get2(item2)) ? resolveFaIconName(get2(item2)) : null);
+        var fragment_3 = comment();
+        var node_6 = first_child(fragment_3);
         {
           var consequent_1 = ($$anchor4) => {
-            var nds_icon_button = root_2();
+            var span_2 = root_2();
+            var nds_icon_button = child(span_2);
             set_class(nds_icon_button, 1, "item-toolbar__nds-button svelte-rnx3ie");
             set_custom_element_data(nds_icon_button, "type", "circle");
             set_custom_element_data(nds_icon_button, "size", "small");
@@ -9610,25 +9792,26 @@ function ItemToolBar($$anchor, $$props) {
             template_effect(() => set_custom_element_data(nds_icon_button, "disabled", get2(item2).disabled));
             action(nds_icon_button, ($$node) => ndsIconButtonAction?.($$node));
             action(nds_icon_button, ($$node, $$action_arg) => reflectToggleState?.($$node, $$action_arg), () => isToolbarItemActive(get2(item2)));
+            reset(span_2);
             delegated("click", nds_icon_button, function(...$$args) {
               get2(item2).onClick?.apply(this, $$args);
             });
-            append($$anchor4, nds_icon_button);
+            append($$anchor4, span_2);
           };
           var consequent_6 = ($$anchor4) => {
             var a = root_6();
             let classes_1;
-            var node_6 = child(a);
+            var node_7 = child(a);
             {
               var consequent_5 = ($$anchor5) => {
-                var fragment_3 = comment();
-                var node_7 = first_child(fragment_3);
+                var fragment_4 = comment();
+                var node_8 = first_child(fragment_4);
                 {
                   var consequent_2 = ($$anchor6) => {
-                    var span_2 = root_3();
-                    html(span_2, () => sanitizeSvgIcon(get2(item2).icon), true);
-                    reset(span_2);
-                    append($$anchor6, span_2);
+                    var span_3 = root_3();
+                    html(span_3, () => sanitizeSvgIcon(get2(item2).icon), true);
+                    reset(span_3);
+                    append($$anchor6, span_3);
                   };
                   var d = user_derived(() => isInlineSvgIcon(get2(item2).icon));
                   var consequent_3 = ($$anchor6) => {
@@ -9639,30 +9822,30 @@ function ItemToolBar($$anchor, $$props) {
                   var d_1 = user_derived(() => isExternalIconUrl(get2(item2).icon));
                   var alternate_2 = ($$anchor6) => {
                     const fallbackIcon = user_derived(() => getFallbackIconSvg(get2(item2).icon));
-                    var fragment_4 = comment();
-                    var node_8 = first_child(fragment_4);
+                    var fragment_5 = comment();
+                    var node_9 = first_child(fragment_5);
                     {
                       var consequent_4 = ($$anchor7) => {
-                        var span_3 = root_3();
-                        html(span_3, () => sanitizeSvgIcon(get2(fallbackIcon)), true);
-                        reset(span_3);
-                        append($$anchor7, span_3);
+                        var span_4 = root_3();
+                        html(span_4, () => sanitizeSvgIcon(get2(fallbackIcon)), true);
+                        reset(span_4);
+                        append($$anchor7, span_4);
                       };
                       var alternate_1 = ($$anchor7) => {
                         var i_1 = root_5();
                         template_effect(() => set_class(i_1, 1, `icon icon-${get2(item2).icon}`, "svelte-rnx3ie"));
                         append($$anchor7, i_1);
                       };
-                      if_block(node_8, ($$render) => {
+                      if_block(node_9, ($$render) => {
                         if (get2(fallbackIcon))
                           $$render(consequent_4);
                         else
                           $$render(alternate_1, -1);
                       });
                     }
-                    append($$anchor6, fragment_4);
+                    append($$anchor6, fragment_5);
                   };
-                  if_block(node_7, ($$render) => {
+                  if_block(node_8, ($$render) => {
                     if (get2(d))
                       $$render(consequent_2);
                     else if (get2(d_1))
@@ -9671,9 +9854,9 @@ function ItemToolBar($$anchor, $$props) {
                       $$render(alternate_2, -1);
                   });
                 }
-                append($$anchor5, fragment_3);
+                append($$anchor5, fragment_4);
               };
-              if_block(node_6, ($$render) => {
+              if_block(node_7, ($$render) => {
                 if (get2(item2).icon)
                   $$render(consequent_5);
               });
@@ -9703,17 +9886,17 @@ function ItemToolBar($$anchor, $$props) {
           var alternate_5 = ($$anchor4) => {
             var button_1 = root_7();
             let classes_2;
-            var node_9 = child(button_1);
+            var node_10 = child(button_1);
             {
               var consequent_10 = ($$anchor5) => {
-                var fragment_5 = comment();
-                var node_10 = first_child(fragment_5);
+                var fragment_6 = comment();
+                var node_11 = first_child(fragment_6);
                 {
                   var consequent_7 = ($$anchor6) => {
-                    var span_4 = root_3();
-                    html(span_4, () => sanitizeSvgIcon(get2(item2).icon), true);
-                    reset(span_4);
-                    append($$anchor6, span_4);
+                    var span_5 = root_3();
+                    html(span_5, () => sanitizeSvgIcon(get2(item2).icon), true);
+                    reset(span_5);
+                    append($$anchor6, span_5);
                   };
                   var d_3 = user_derived(() => isInlineSvgIcon(get2(item2).icon));
                   var consequent_8 = ($$anchor6) => {
@@ -9724,30 +9907,30 @@ function ItemToolBar($$anchor, $$props) {
                   var d_4 = user_derived(() => isExternalIconUrl(get2(item2).icon));
                   var alternate_4 = ($$anchor6) => {
                     const fallbackIcon = user_derived(() => getFallbackIconSvg(get2(item2).icon));
-                    var fragment_6 = comment();
-                    var node_11 = first_child(fragment_6);
+                    var fragment_7 = comment();
+                    var node_12 = first_child(fragment_7);
                     {
                       var consequent_9 = ($$anchor7) => {
-                        var span_5 = root_3();
-                        html(span_5, () => sanitizeSvgIcon(get2(fallbackIcon)), true);
-                        reset(span_5);
-                        append($$anchor7, span_5);
+                        var span_6 = root_3();
+                        html(span_6, () => sanitizeSvgIcon(get2(fallbackIcon)), true);
+                        reset(span_6);
+                        append($$anchor7, span_6);
                       };
                       var alternate_3 = ($$anchor7) => {
                         var i_2 = root_5();
                         template_effect(() => set_class(i_2, 1, `icon icon-${get2(item2).icon}`, "svelte-rnx3ie"));
                         append($$anchor7, i_2);
                       };
-                      if_block(node_11, ($$render) => {
+                      if_block(node_12, ($$render) => {
                         if (get2(fallbackIcon))
                           $$render(consequent_9);
                         else
                           $$render(alternate_3, -1);
                       });
                     }
-                    append($$anchor6, fragment_6);
+                    append($$anchor6, fragment_7);
                   };
-                  if_block(node_10, ($$render) => {
+                  if_block(node_11, ($$render) => {
                     if (get2(d_3))
                       $$render(consequent_7);
                     else if (get2(d_4))
@@ -9756,9 +9939,9 @@ function ItemToolBar($$anchor, $$props) {
                       $$render(alternate_4, -1);
                   });
                 }
-                append($$anchor5, fragment_5);
+                append($$anchor5, fragment_6);
               };
-              if_block(node_9, ($$render) => {
+              if_block(node_10, ($$render) => {
                 if (get2(item2).icon)
                   $$render(consequent_10);
               });
@@ -9781,7 +9964,7 @@ function ItemToolBar($$anchor, $$props) {
             });
             append($$anchor4, button_1);
           };
-          if_block(node_5, ($$render) => {
+          if_block(node_6, ($$render) => {
             if (get2(faIconName))
               $$render(consequent_1);
             else if (get2(d_2))
@@ -9790,66 +9973,76 @@ function ItemToolBar($$anchor, $$props) {
               $$render(alternate_5, -1);
           });
         }
-        append($$anchor3, fragment_2);
+        append($$anchor3, fragment_3);
       });
-      var node_12 = sibling(node_4, 2);
-      each(node_12, 17, () => get2(mountedElementsAfterButtons), (mounted) => mounted.key, ($$anchor3, mounted) => {
-        var fragment_7 = comment();
-        var node_13 = first_child(fragment_7);
+      var node_13 = sibling(node_5, 2);
+      each(node_13, 17, () => get2(mountedElementsAfterButtons), (mounted) => mounted.key, ($$anchor3, mounted) => {
+        var fragment_8 = comment();
+        var node_14 = first_child(fragment_8);
         {
           var consequent_11 = ($$anchor4) => {
-            var span_6 = root_1();
-            action(span_6, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
-              mounted: get2(mounted),
-              active: get2(renderedToolActiveById)[get2(mounted).toolId] ?? false
-            }));
-            append($$anchor4, span_6);
+            var fragment_9 = comment();
+            var node_15 = first_child(fragment_9);
+            key(node_15, () => get2(useNdsIcons), ($$anchor5) => {
+              var span_7 = root_1();
+              action(span_7, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
+                mounted: get2(mounted),
+                active: get2(renderedToolActiveById)[get2(mounted).toolId] ?? false
+              }));
+              append($$anchor5, span_7);
+            });
+            append($$anchor4, fragment_9);
           };
           var alternate_6 = ($$anchor4) => {
-            var span_7 = root_1();
-            action(span_7, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => get2(mounted).entry.element);
-            append($$anchor4, span_7);
+            var span_8 = root_1();
+            action(span_8, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => get2(mounted).entry.element);
+            append($$anchor4, span_8);
           };
-          if_block(node_13, ($$render) => {
+          if_block(node_14, ($$render) => {
             if (get2(mounted).entry.shell)
               $$render(consequent_11);
             else
               $$render(alternate_6, -1);
           });
         }
-        append($$anchor3, fragment_7);
+        append($$anchor3, fragment_8);
       });
       reset(div_1);
-      var node_14 = sibling(div_1, 2);
+      var node_16 = sibling(div_1, 2);
       {
         var consequent_13 = ($$anchor3) => {
           var div_2 = root_9();
           let classes_3;
           each(div_2, 21, () => get2(mountedElementsControlsRow), (mounted) => mounted.key, ($$anchor4, mounted) => {
-            var fragment_8 = comment();
-            var node_15 = first_child(fragment_8);
+            var fragment_10 = comment();
+            var node_17 = first_child(fragment_10);
             {
               var consequent_12 = ($$anchor5) => {
-                var span_8 = root_8();
-                action(span_8, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
-                  mounted: get2(mounted),
-                  active: get2(renderedToolActiveById)[get2(mounted).toolId] ?? false
-                }));
-                append($$anchor5, span_8);
+                var fragment_11 = comment();
+                var node_18 = first_child(fragment_11);
+                key(node_18, () => get2(useNdsIcons), ($$anchor6) => {
+                  var span_9 = root_8();
+                  action(span_9, ($$node, $$action_arg) => mountElementWithShell?.($$node, $$action_arg), () => ({
+                    mounted: get2(mounted),
+                    active: get2(renderedToolActiveById)[get2(mounted).toolId] ?? false
+                  }));
+                  append($$anchor6, span_9);
+                });
+                append($$anchor5, fragment_11);
               };
               var alternate_7 = ($$anchor5) => {
-                var span_9 = root_8();
-                action(span_9, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => get2(mounted).entry.element);
-                append($$anchor5, span_9);
+                var span_10 = root_8();
+                action(span_10, ($$node, $$action_arg) => mountElement?.($$node, $$action_arg), () => get2(mounted).entry.element);
+                append($$anchor5, span_10);
               };
-              if_block(node_15, ($$render) => {
+              if_block(node_17, ($$render) => {
                 if (get2(mounted).entry.shell)
                   $$render(consequent_12);
                 else
                   $$render(alternate_7, -1);
               });
             }
-            append($$anchor4, fragment_8);
+            append($$anchor4, fragment_10);
           });
           reset(div_2);
           template_effect(() => classes_3 = set_class(div_2, 1, "item-toolbar__controls-row svelte-rnx3ie", null, classes_3, {
@@ -9859,7 +10052,7 @@ function ItemToolBar($$anchor, $$props) {
           }));
           append($$anchor3, div_2);
         };
-        if_block(node_14, ($$render) => {
+        if_block(node_16, ($$render) => {
           if (get2(shouldRenderControlsRow))
             $$render(consequent_13);
         });
@@ -9876,6 +10069,7 @@ function ItemToolBar($$anchor, $$props) {
         });
         set_attribute2(div, "data-content-kind", get2(effectiveContentKind));
         set_attribute2(div, "data-level", get2(effectiveLevel));
+        set_style(div, `--pie-toolbar-zoom-comp: ${get2(calculatorButtonZoomComp)};`);
       });
       append($$anchor2, div);
     };