@lostgradient/cinder 0.1.0 → 0.2.0

package/dist/components/review-editor/index.js

@@ -3,25 +3,43 @@ var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
 var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
   target = mod != null ? __create(__getProtoOf(mod)) : {};
   const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
   for (let key of __getOwnPropNames(mod))
     if (!__hasOwnProp.call(to, key))
       __defProp(to, key, {
-        get: () => mod[key],
+        get: __accessProp.bind(mod, key),
         enumerable: true
       });
+  if (canCache)
+    cache.set(mod, to);
   return to;
 };
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: (newValue) => all[name] = () => newValue
+      set: __exportSetter.bind(all, name)
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -4451,7 +4469,8 @@ function Dropdown_menu($$anchor, $$props) {
 // src/components/dropdown-item/dropdown-item.svelte
 import"svelte/internal/disclose-version";
 import * as $36 from "svelte/internal/client";
-var root12 = $36.from_html(`<button><!></button>`);
+var root_16 = $36.from_html(`<a><!></a>`);
+var root_32 = $36.from_html(`<button><!></button>`);
 function Dropdown_item($$anchor, $$props) {
   $36.push($$props, true);
   let variant = $36.prop($$props, "variant", 3, "default"), inset = $36.prop($$props, "inset", 3, false), closeOnSelect = $36.prop($$props, "closeOnSelect", 3, true), rest = $36.rest_props($$props, [
@@ -4464,55 +4483,123 @@ function Dropdown_item($$anchor, $$props) {
     "closeOnSelect",
     "class",
     "onclick",
+    "onkeydown",
+    "href",
     "children"
   ]);
   const context = getDropdownContext();
+  const isLink = $36.derived(() => $$props.href !== undefined);
+  const sharedClass = $36.derived(() => classNames("cinder-_option-row", "cinder-dropdown-item", inset() && "cinder-dropdown-item--inset", $$props.class));
   function handleClick(event3) {
-    if ($$props.disabled)
+    if ($$props.disabled) {
+      event3.preventDefault();
       return;
+    }
     if (typeof $$props.onclick === "function") {
-      $$props.onclick(event3);
+      if ($36.get(isLink)) {
+        $$props.onclick(event3);
+      } else {
+        $$props.onclick(event3);
+      }
     }
     if (closeOnSelect()) {
       context.close();
     }
   }
-  var button = root12();
-  $36.attribute_effect(button, ($0) => ({
-    ...rest,
-    type: "button",
-    role: "menuitem",
-    class: $0,
-    "data-cinder-variant": variant(),
-    tabindex: -1,
-    "data-disabled": $$props.disabled ? "" : undefined,
-    "aria-disabled": $$props.disabled ? "true" : undefined,
-    onclick: handleClick
-  }), [
-    () => classNames("cinder-_option-row", "cinder-dropdown-item", inset() && "cinder-dropdown-item--inset", $$props.class)
-  ]);
-  var node = $36.child(button);
+  function handleAnchorKeydown(event3) {
+    if (typeof $$props.onkeydown === "function") {
+      $$props.onkeydown(event3);
+    }
+    if (event3.defaultPrevented)
+      return;
+    if (event3.key !== " " && event3.key !== "Spacebar")
+      return;
+    event3.preventDefault();
+    if ($$props.disabled)
+      return;
+    event3.currentTarget.click();
+  }
+  const anchorAttributes = rest;
+  const buttonAttributes = rest;
+  const buttonType = $36.derived(() => $$props.type ?? "button");
+  var fragment = $36.comment();
+  var node = $36.first_child(fragment);
   {
-    var consequent = ($$anchor2) => {
-      var fragment = $36.comment();
-      var node_1 = $36.first_child(fragment);
-      $36.snippet(node_1, () => $$props.children);
-      $36.append($$anchor2, fragment);
+    var consequent_1 = ($$anchor2) => {
+      var a = root_16();
+      $36.attribute_effect(a, () => ({
+        ...anchorAttributes,
+        href: $$props.href,
+        role: "menuitem",
+        class: $36.get(sharedClass),
+        "data-cinder-variant": variant(),
+        tabindex: -1,
+        "data-disabled": $$props.disabled ? "" : undefined,
+        "aria-disabled": $$props.disabled ? "true" : undefined,
+        onclick: handleClick,
+        onkeydown: handleAnchorKeydown
+      }));
+      var node_1 = $36.child(a);
+      {
+        var consequent = ($$anchor3) => {
+          var fragment_1 = $36.comment();
+          var node_2 = $36.first_child(fragment_1);
+          $36.snippet(node_2, () => $$props.children);
+          $36.append($$anchor3, fragment_1);
+        };
+        $36.if(node_1, ($$render) => {
+          if ($$props.children)
+            $$render(consequent);
+        });
+      }
+      $36.reset(a);
+      $36.append($$anchor2, a);
+    };
+    var alternate = ($$anchor2) => {
+      var button = root_32();
+      $36.attribute_effect(button, () => ({
+        ...buttonAttributes,
+        type: $36.get(buttonType),
+        role: "menuitem",
+        class: $36.get(sharedClass),
+        "data-cinder-variant": variant(),
+        tabindex: -1,
+        "data-disabled": $$props.disabled ? "" : undefined,
+        "aria-disabled": $$props.disabled ? "true" : undefined,
+        onclick: handleClick,
+        onkeydown: $$props.onkeydown
+      }));
+      var node_3 = $36.child(button);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var fragment_2 = $36.comment();
+          var node_4 = $36.first_child(fragment_2);
+          $36.snippet(node_4, () => $$props.children);
+          $36.append($$anchor3, fragment_2);
+        };
+        $36.if(node_3, ($$render) => {
+          if ($$props.children)
+            $$render(consequent_2);
+        });
+      }
+      $36.reset(button);
+      $36.append($$anchor2, button);
     };
     $36.if(node, ($$render) => {
-      if ($$props.children)
-        $$render(consequent);
+      if ($36.get(isLink))
+        $$render(consequent_1);
+      else
+        $$render(alternate, -1);
     });
   }
-  $36.reset(button);
-  $36.append($$anchor, button);
+  $36.append($$anchor, fragment);
   $36.pop();
 }
 
 // src/components/markdown-editor/editor-toolbar/toolbar-dropdown.svelte
 var root_23 = $37.from_html(`<!> <span class="toolbar-dropdown-label svelte-1v28aut"> </span>`, 1);
 var root_6 = $37.from_html(`<!> <span class="dropdown-item-label svelte-1v28aut"> </span> <!>`, 1);
-var root_16 = $37.from_html(`<!> <!>`, 1);
+var root_17 = $37.from_html(`<!> <!>`, 1);
 function Toolbar_dropdown($$anchor, $$props) {
   $37.push($$props, true);
   let disabled = $37.prop($$props, "disabled", 3, false);
@@ -4525,7 +4612,7 @@ function Toolbar_dropdown($$anchor, $$props) {
       return $$props.id;
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment_1 = root_16();
+      var fragment_1 = root_17();
       var node = $37.first_child(fragment_1);
       {
         let $0 = $37.derived(() => classNames("toolbar-dropdown-trigger", $$props.class));
@@ -4619,7 +4706,7 @@ function Toolbar_dropdown($$anchor, $$props) {
 
 // src/components/markdown-editor/editor-toolbar/editor-toolbar.svelte
 var root_24 = $38.from_html(`<div class="toolbar-spacer svelte-1m9m099"></div> <!>`, 1);
-var root_17 = $38.from_html(`<div class="toolbar-group svelte-1m9m099" role="group" aria-label="History"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block type"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Text formatting"><!> <!> <!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Links"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Lists"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block operations"><!></div> <!>`, 1);
+var root_18 = $38.from_html(`<div class="toolbar-group svelte-1m9m099" role="group" aria-label="History"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block type"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Text formatting"><!> <!> <!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Links"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Lists"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block operations"><!></div> <!>`, 1);
 function Editor_toolbar($$anchor, $$props) {
   $38.push($$props, true);
   let canUndo = $38.prop($$props, "canUndo", 3, false), canRedo = $38.prop($$props, "canRedo", 3, false), disabled = $38.prop($$props, "disabled", 3, false), rest = $38.rest_props($$props, [
@@ -4739,7 +4826,7 @@ function Editor_toolbar($$anchor, $$props) {
       }
     }, () => rest, {
       children: ($$anchor2, $$slotProps) => {
-        var fragment_1 = root_17();
+        var fragment_1 = root_18();
         var div = $38.first_child(fragment_1);
         var node = $38.child(div);
         {
@@ -5028,15 +5115,15 @@ import * as $39 from "svelte/internal/client";
 var root_25 = $39.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
 var root_4 = $39.from_html(`<span class="cinder-sr-only"> </span>`);
 var root_52 = $39.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_32 = $39.from_html(`<!> <!>`, 1);
+var root_33 = $39.from_html(`<!> <!>`, 1);
 var root_8 = $39.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_18 = $39.from_html(`<!> <!> <!>`, 1);
+var root_19 = $39.from_html(`<!> <!> <!>`, 1);
 var root_9 = $39.from_html(`<a><!></a>`);
 var root_10 = $39.from_html(`<button><!></button>`);
 function Button($$anchor, $$props) {
   $39.push($$props, true);
   const buttonContent = ($$anchor2) => {
-    var fragment = root_18();
+    var fragment = root_19();
     var node = $39.first_child(fragment);
     {
       var consequent = ($$anchor3) => {
@@ -5054,7 +5141,7 @@ function Button($$anchor, $$props) {
     var node_2 = $39.sibling(node, 2);
     {
       var consequent_3 = ($$anchor3) => {
-        var fragment_1 = root_32();
+        var fragment_1 = root_33();
         var node_3 = $39.first_child(fragment_1);
         {
           var consequent_1 = ($$anchor4) => {
@@ -5140,7 +5227,10 @@ function Button($$anchor, $$props) {
     "aria-disabled",
     "aria-busy",
     "aria-label",
-    "aria-labelledby"
+    "aria-labelledby",
+    "aria-expanded",
+    "aria-controls",
+    "aria-haspopup"
   ]);
   const mergedClassName = $39.derived(() => classNames("cinder-button", $$props.class));
   const dataAttributes = $39.derived(() => ({
@@ -5198,6 +5288,9 @@ function Button($$anchor, $$props) {
         "aria-busy": $39.get(resolvedAriaBusy),
         "aria-label": $39.get(resolvedAriaLabel),
         "aria-labelledby": $39.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
         onclick: handleClick
       }));
       var node_10 = $39.child(a);
@@ -5217,6 +5310,9 @@ function Button($$anchor, $$props) {
         "aria-busy": $39.get(resolvedAriaBusy),
         "aria-label": $39.get(resolvedAriaLabel),
         "aria-labelledby": $39.get(resolvedAriaLabelledBy),
+        "aria-expanded": $$props["aria-expanded"],
+        "aria-controls": $$props["aria-controls"],
+        "aria-haspopup": $$props["aria-haspopup"],
         onclick: handleClick
       }));
       var node_11 = $39.child(button);
@@ -5300,19 +5396,19 @@ var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
 // src/components/input/input.svelte
 var calendarIcon = ($$anchor) => {
-  var svg = root_19();
+  var svg = root_110();
   $40.append($$anchor, svg);
 };
-var root_19 = $40.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
+var root_110 = $40.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
 var root_26 = $40.from_html(`<input/>`);
-var root_33 = $40.from_html(`<label class="cinder-input-field__label"> </label>`);
+var root_34 = $40.from_html(`<label class="cinder-input-field__label"> </label>`);
 var root_53 = $40.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
 var root_62 = $40.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
 var root_7 = $40.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
 var root_42 = $40.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
 var root_92 = $40.from_html(`<p class="cinder-input-field__description"> </p>`);
 var root_102 = $40.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
-var root13 = $40.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
+var root12 = $40.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
 function Input($$anchor, $$props) {
   $40.push($$props, true);
   const inputElement = ($$anchor2) => {
@@ -5371,11 +5467,11 @@ function Input($$anchor, $$props) {
   const hasTrailing = $40.derived(() => !!$$props.trailing || $40.get(isNativeDateInput));
   const hasGroupWrapper = $40.derived(() => !!$$props.leading || $40.get(hasTrailing));
   const isInvalid = $40.derived(() => $40.get(resolvedAriaInvalid) === "true" || $40.get(resolvedAriaInvalid) === true);
-  var div = root13();
+  var div = root12();
   var node = $40.child(div);
   {
     var consequent = ($$anchor2) => {
-      var label_1 = root_33();
+      var label_1 = root_34();
       var text2 = $40.child(label_1, true);
       $40.reset(label_1);
       $40.template_effect(() => {
@@ -5555,8 +5651,8 @@ function X($$anchor, $$props) {
   }));
 }
 // src/components/markdown-editor/editor-toolbar/link-popover.svelte
-var root_34 = $43.from_html(`<!> Remove`, 1);
-var root14 = $43.from_html(`<div role="dialog" aria-modal="true" tabindex="-1"><header class="link-popover-header svelte-13b14j2"><h2 class="link-popover-title svelte-13b14j2"><!> </h2> <button type="button" class="link-popover-close svelte-13b14j2" aria-label="Close"><!></button></header> <div class="link-popover-content svelte-13b14j2"><!> <!></div> <footer class="link-popover-footer svelte-13b14j2"><div class="link-popover-actions svelte-13b14j2"><!></div> <div class="link-popover-primary-actions svelte-13b14j2"><!> <!></div></footer></div>`);
+var root_35 = $43.from_html(`<!> Remove`, 1);
+var root13 = $43.from_html(`<div role="dialog" aria-modal="true" tabindex="-1"><header class="link-popover-header svelte-13b14j2"><h2 class="link-popover-title svelte-13b14j2"><!> </h2> <button type="button" class="link-popover-close svelte-13b14j2" aria-label="Close"><!></button></header> <div class="link-popover-content svelte-13b14j2"><!> <!></div> <footer class="link-popover-footer svelte-13b14j2"><div class="link-popover-actions svelte-13b14j2"><!></div> <div class="link-popover-primary-actions svelte-13b14j2"><!> <!></div></footer></div>`);
 function Link_popover($$anchor, $$props) {
   $43.push($$props, true);
   let mode = $43.prop($$props, "mode", 3, "insert"), initialUrl = $43.prop($$props, "initialUrl", 3, ""), initialText = $43.prop($$props, "initialText", 3, ""), hasSelection = $43.prop($$props, "hasSelection", 3, false), anchorElement = $43.prop($$props, "anchorElement", 3, null);
@@ -5635,7 +5731,7 @@ function Link_popover($$anchor, $$props) {
   function handleRemove() {
     $$props.onremove?.();
   }
-  var div = root14();
+  var div = root13();
   var header = $43.child(div);
   var h2 = $43.child(header);
   var node = $43.child(h2);
@@ -5708,7 +5804,7 @@ function Link_popover($$anchor, $$props) {
         size: "sm",
         onclick: handleRemove,
         children: ($$anchor3, $$slotProps) => {
-          var fragment_2 = root_34();
+          var fragment_2 = root_35();
           var node_5 = $43.first_child(fragment_2);
           Unlink(node_5, { class: "icon-sm" });
           $43.next();
@@ -5788,10 +5884,10 @@ var root_43 = $44.from_html(`<div class="toolbar-leading svelte-1mxvqjb"><!></di
 var root_54 = $44.from_html(`<div class="toolbar-actions svelte-1mxvqjb"><!></div>`);
 var root_72 = $44.from_html(`<!> <!>`, 1);
 var root_63 = $44.from_html(`<div class="toolbar-mode-toggle svelte-1mxvqjb"><!></div>`);
-var root_35 = $44.from_html(`<div class="editor-toolbar-wrapper svelte-1mxvqjb"><!> <!> <!> <!></div>`);
+var root_36 = $44.from_html(`<div class="editor-toolbar-wrapper svelte-1mxvqjb"><!> <!> <!> <!></div>`);
 var root_11 = $44.from_html(`<div class="cinder-markdown-content prose markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
 var root_122 = $44.from_html(`<textarea class="markdown-editor surface source-mode svelte-1mxvqjb"></textarea>`);
-var root15 = $44.from_html(`<div><!> <!> <!></div>`);
+var root14 = $44.from_html(`<div><!> <!> <!></div>`);
 function Markdown_editor($$anchor, $$props) {
   $44.push($$props, true);
   let label = $44.prop($$props, "label", 3, "Markdown editor"), value = $44.prop($$props, "value", 15, ""), mode = $44.prop($$props, "mode", 15, "wysiwyg"), showModeToggle = $44.prop($$props, "showModeToggle", 3, false), modeLabel = $44.prop($$props, "modeLabel", 3, "Editor mode"), readonly = $44.prop($$props, "readonly", 3, false), placeholder = $44.prop($$props, "placeholder", 3, "Start writing..."), showToolbar = $44.prop($$props, "showToolbar", 3, true), plugins = $44.prop($$props, "plugins", 19, () => []), snapshotMode = $44.prop($$props, "snapshotMode", 3, false), rest = $44.rest_props($$props, [
@@ -6214,7 +6310,7 @@ function Markdown_editor($$anchor, $$props) {
     getView,
     getEditor
   };
-  var div = root15();
+  var div = root14();
   $44.attribute_effect(div, ($0) => ({
     class: $0,
     "data-initializing": $44.get(isInitializing) || undefined,
@@ -6237,7 +6333,7 @@ function Markdown_editor($$anchor, $$props) {
           $44.append($$anchor3, fragment_1);
         };
         var alternate = ($$anchor3) => {
-          var div_1 = root_35();
+          var div_1 = root_36();
           var node_3 = $44.child(div_1);
           {
             var consequent_1 = ($$anchor4) => {
@@ -6583,14 +6679,14 @@ function Trash_2($$anchor, $$props) {
 }
 // src/components/review-editor/comment-list.svelte
 var root_27 = $47.from_html(`<span class="comment-edited svelte-11dydst">(edited)</span>`);
-var root_36 = $47.from_html(`<div class="comment-edit svelte-11dydst"><label class="sr-only svelte-11dydst">Edit comment</label> <textarea class="comment-edit-textarea svelte-11dydst"></textarea> <div class="comment-edit-actions svelte-11dydst"><!> <!></div></div>`);
+var root_37 = $47.from_html(`<div class="comment-edit svelte-11dydst"><label class="sr-only svelte-11dydst">Edit comment</label> <textarea class="comment-edit-textarea svelte-11dydst"></textarea> <div class="comment-edit-actions svelte-11dydst"><!> <!></div></div>`);
 var root_64 = $47.from_html(`<div class="comment-body svelte-11dydst"> </div>`);
 var root_82 = $47.from_html(`<button type="button" class="comment-action svelte-11dydst" aria-label="Edit comment" title="Edit comment"><!></button>`);
 var root_93 = $47.from_html(`<button type="button" class="comment-action comment-action-danger svelte-11dydst" aria-label="Delete comment" title="Delete comment"><!></button>`);
 var root_73 = $47.from_html(`<div class="comment-actions svelte-11dydst"><!> <!></div>`);
-var root_110 = $47.from_html(`<article class="comment svelte-11dydst"><header class="comment-header svelte-11dydst"><div class="comment-author svelte-11dydst"><div class="comment-avatar svelte-11dydst" aria-hidden="true"> </div> <span class="comment-author-name svelte-11dydst"> </span></div> <div class="comment-meta svelte-11dydst"><time class="comment-time svelte-11dydst"> </time> <!></div></header> <!> <!></article>`);
+var root_111 = $47.from_html(`<article class="comment svelte-11dydst"><header class="comment-header svelte-11dydst"><div class="comment-author svelte-11dydst"><div class="comment-avatar svelte-11dydst" aria-hidden="true"> </div> <span class="comment-author-name svelte-11dydst"> </span></div> <div class="comment-meta svelte-11dydst"><time class="comment-time svelte-11dydst"> </time> <!></div></header> <!> <!></article>`);
 var root_103 = $47.from_html(`<p class="comment-list-empty svelte-11dydst">No comments yet.</p>`);
-var root16 = $47.from_html(`<div><!> <!></div>`);
+var root15 = $47.from_html(`<div><!> <!></div>`);
 function Comment_list($$anchor, $$props) {
   $47.push($$props, true);
   let mode = $47.prop($$props, "mode", 3, "edit");
@@ -6625,10 +6721,10 @@ function Comment_list($$anchor, $$props) {
   function canDeleteComment(comment29) {
     return mode() !== "readonly" && comment29.authorId === $$props.currentUserId;
   }
-  var div = root16();
+  var div = root15();
   var node = $47.child(div);
   $47.each(node, 17, () => $47.get(visibleComments), (comment29) => comment29.id, ($$anchor2, comment29) => {
-    var article = root_110();
+    var article = root_111();
     var header = $47.child(article);
     var div_1 = $47.child(header);
     var div_2 = $47.child(div_1);
@@ -6659,7 +6755,7 @@ function Comment_list($$anchor, $$props) {
     var node_2 = $47.sibling(header, 2);
     {
       var consequent_1 = ($$anchor3) => {
-        var div_4 = root_36();
+        var div_4 = root_37();
         var label = $47.child(div_4);
         var textarea = $47.sibling(label, 2);
         $47.remove_textarea_child(textarea);
@@ -6799,7 +6895,7 @@ $47.delegate(["keydown", "click"]);
 import"svelte/internal/disclose-version";
 import * as $48 from "svelte/internal/client";
 var root_28 = $48.from_html(`<p class="comment-composer-error svelte-uu92gn" role="alert"> </p>`);
-var root17 = $48.from_html(`<form><label class="sr-only svelte-uu92gn">Comment</label> <div class="comment-composer-textarea-container svelte-uu92gn"><textarea></textarea> <div class="comment-composer-inline-submit svelte-uu92gn"><!></div></div> <!> <div class="comment-composer-footer svelte-uu92gn"><span class="comment-composer-hint svelte-uu92gn"><kbd class="svelte-uu92gn"> </kbd><kbd class="svelte-uu92gn">↵</kbd> to submit</span> <div class="comment-composer-actions svelte-uu92gn"><!></div></div></form>`);
+var root16 = $48.from_html(`<form><label class="sr-only svelte-uu92gn">Comment</label> <div class="comment-composer-textarea-container svelte-uu92gn"><textarea></textarea> <div class="comment-composer-inline-submit svelte-uu92gn"><!></div></div> <!> <div class="comment-composer-footer svelte-uu92gn"><span class="comment-composer-hint svelte-uu92gn"><kbd class="svelte-uu92gn"> </kbd><kbd class="svelte-uu92gn">↵</kbd> to submit</span> <div class="comment-composer-actions svelte-uu92gn"><!></div></div></form>`);
 function Comment_composer($$anchor, $$props) {
   $48.push($$props, true);
   let value = $48.prop($$props, "value", 15, ""), placeholder = $48.prop($$props, "placeholder", 3, "Write a comment..."), disabled = $48.prop($$props, "disabled", 3, false), loading = $48.prop($$props, "loading", 3, false), minRows = $48.prop($$props, "minRows", 3, 3), autoExpand = $48.prop($$props, "autoExpand", 3, true), rest = $48.rest_props($$props, [
@@ -6875,7 +6971,7 @@ function Comment_composer($$anchor, $$props) {
     $48.get(textareaElement)?.focus();
   }
   var $$exports = { focus, selectAll, clear };
-  var form = root17();
+  var form = root16();
   var label = $48.child(form);
   var div = $48.sibling(label, 2);
   var textarea = $48.child(div);
@@ -7023,10 +7119,10 @@ function File_text($$anchor, $$props) {
   }));
 }
 // src/components/review-editor/thread-popover.svelte
-var root_111 = $50.from_html(`<span class="thread-popover-document-label svelte-jqotwh"><!> Document comment</span>`);
+var root_112 = $50.from_html(`<span class="thread-popover-document-label svelte-jqotwh"><!> Document comment</span>`);
 var root_29 = $50.from_html(`<span class="thread-popover-quote svelte-jqotwh"> </span>`);
 var root_55 = $50.from_html(`<div class="thread-popover-composer svelte-jqotwh"><!></div>`);
-var root18 = $50.from_html(`<div role="dialog" aria-modal="true" tabindex="-1"><header class="thread-popover-header svelte-jqotwh"><div class="thread-popover-title-row svelte-jqotwh"><h2 class="thread-popover-title svelte-jqotwh"><!></h2> <div class="thread-popover-header-actions svelte-jqotwh"><!> <button type="button" class="thread-popover-close svelte-jqotwh" aria-label="Close"><!></button></div></div></header> <div class="thread-popover-content svelte-jqotwh"><!></div> <!></div>`);
+var root17 = $50.from_html(`<div role="dialog" aria-modal="true" tabindex="-1"><header class="thread-popover-header svelte-jqotwh"><div class="thread-popover-title-row svelte-jqotwh"><h2 class="thread-popover-title svelte-jqotwh"><!></h2> <div class="thread-popover-header-actions svelte-jqotwh"><!> <button type="button" class="thread-popover-close svelte-jqotwh" aria-label="Close"><!></button></div></div></header> <div class="thread-popover-content svelte-jqotwh"><!></div> <!></div>`);
 function Thread_popover($$anchor, $$props) {
   $50.push($$props, true);
   let mode = $50.prop($$props, "mode", 3, "edit");
@@ -7082,14 +7178,14 @@ function Thread_popover($$anchor, $$props) {
     const quote = $$props.thread.anchor.quote;
     return quote.length > 30 ? `${quote.slice(0, 30)}...` : quote;
   });
-  var div = root18();
+  var div = root17();
   var header = $50.child(div);
   var div_1 = $50.child(header);
   var h2 = $50.child(div_1);
   var node = $50.child(h2);
   {
     var consequent = ($$anchor2) => {
-      var span = root_111();
+      var span = root_112();
       var node_1 = $50.child(span);
       File_text(node_1, { class: "icon-xs" });
       $50.next();
@@ -7208,7 +7304,7 @@ $50.delegate(["keydown", "click"]);
 // src/components/review-editor/live-region.svelte
 import"svelte/internal/disclose-version";
 import * as $51 from "svelte/internal/client";
-var root_112 = $51.from_html(`<div role="status" aria-live="polite" aria-atomic="true"> </div>`);
+var root_113 = $51.from_html(`<div role="status" aria-live="polite" aria-atomic="true"> </div>`);
 var root_210 = $51.from_html(`<div role="alert" aria-live="assertive" aria-atomic="true"> </div>`);
 function Live_region($$anchor, $$props) {
   $51.push($$props, true);
@@ -7253,7 +7349,7 @@ function Live_region($$anchor, $$props) {
   var node = $51.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var div = root_112();
+      var div = root_113();
       var text_1 = $51.child(div, true);
       $51.reset(div);
       $51.template_effect(($0) => {
@@ -7478,7 +7574,7 @@ function Message_square($$anchor, $$props) {
   }));
 }
 // src/components/review-editor/export-actions.svelte
-var root_37 = $57.from_html(`<!> <span class="cinder-sr-only">Copy</span>`, 1);
+var root_38 = $57.from_html(`<!> <span class="cinder-sr-only">Copy</span>`, 1);
 var root_94 = $57.from_html(`<span class="copied-label svelte-1cj1bq5">Copied!</span>`);
 var root_65 = $57.from_html(`<!> <span> </span> <!>`, 1);
 var root_132 = $57.from_html(`<span class="copied-label svelte-1cj1bq5">Copied!</span>`);
@@ -7491,7 +7587,7 @@ var root_262 = $57.from_html(`<span class="copied-label svelte-1cj1bq5">Copied!<
 var root_232 = $57.from_html(`<!> <span> </span> <!>`, 1);
 var root_44 = $57.from_html(`<!> <!> <!> <!> <!>`, 1);
 var root_211 = $57.from_html(`<!> <!>`, 1);
-var root19 = $57.from_html(`<div><div class="cinder-sr-only" aria-live="polite" aria-atomic="true"><!></div> <!></div>`);
+var root18 = $57.from_html(`<div><div class="cinder-sr-only" aria-live="polite" aria-atomic="true"><!></div> <!></div>`);
 function Export_actions($$anchor, $$props) {
   $57.push($$props, true);
   const copyState = createCopyState();
@@ -7527,7 +7623,7 @@ function Export_actions($$anchor, $$props) {
     diff: "Git Diff",
     comments: "Comments"
   };
-  var div = root19();
+  var div = root18();
   var div_1 = $57.child(div);
   var node = $57.child(div_1);
   {
@@ -7555,7 +7651,7 @@ function Export_actions($$anchor, $$props) {
         "aria-label": "Copy to clipboard",
         showCaret: false,
         children: ($$anchor3, $$slotProps2) => {
-          var fragment_2 = root_37();
+          var fragment_2 = root_38();
           var node_3 = $57.first_child(fragment_2);
           Copy(node_3, { class: "icon-sm" });
           $57.next(2);
@@ -7859,7 +7955,7 @@ var root_143 = $60.from_html(`<div class="empty-state svelte-1g8l8sh"><p class="
 var root_162 = $60.from_html(`<button type="button" class="thread-item svelte-1g8l8sh" data-document="true"><div class="thread-document-label svelte-1g8l8sh"><!> <span>Document comment</span></div> <p class="thread-preview svelte-1g8l8sh"> </p></button>`);
 var root_173 = $60.from_html(`<button type="button" class="thread-item svelte-1g8l8sh"><blockquote class="thread-quote svelte-1g8l8sh"> </blockquote> <p class="thread-preview svelte-1g8l8sh"> </p></button>`);
 var root_152 = $60.from_html(`<!> <!>`, 1);
-var root20 = $60.from_html(`<aside aria-label="Comment threads"><div class="sidebar-header svelte-1g8l8sh"><!> <h2 class="sidebar-title svelte-1g8l8sh">Comments</h2> <span class="thread-count svelte-1g8l8sh"> </span> <!> <!></div> <!> <!> <div class="thread-list svelte-1g8l8sh"><!></div></aside>`);
+var root19 = $60.from_html(`<aside aria-label="Comment threads"><div class="sidebar-header svelte-1g8l8sh"><!> <h2 class="sidebar-title svelte-1g8l8sh">Comments</h2> <span class="thread-count svelte-1g8l8sh"> </span> <!> <!></div> <!> <!> <div class="thread-list svelte-1g8l8sh"><!></div></aside>`);
 function Comment_sidebar($$anchor, $$props) {
   $60.push($$props, true);
   let activeThreadId = $60.prop($$props, "activeThreadId", 3, null), readonly = $60.prop($$props, "readonly", 3, false);
@@ -7906,7 +8002,7 @@ function Comment_sidebar($$anchor, $$props) {
   function handleCancelClear() {
     $60.set(showConfirmClear, false);
   }
-  var aside = root20();
+  var aside = root19();
   var div = $60.child(aside);
   var node = $60.child(div);
   Message_square(node, { class: "icon-sm" });
@@ -8161,10 +8257,10 @@ import { parseFrontMatter as parseFrontMatter2, validateFrontMatter as validateF
 // src/components/checkbox/checkbox.svelte
 import"svelte/internal/disclose-version";
 import * as $61 from "svelte/internal/client";
-var root_113 = $61.from_html(`<label class="cinder-checkbox-field__label"> </label>`);
+var root_114 = $61.from_html(`<label class="cinder-checkbox-field__label"> </label>`);
 var root_212 = $61.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
-var root_38 = $61.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
-var root21 = $61.from_html(`<div class="cinder-checkbox-field"><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
+var root_39 = $61.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
+var root20 = $61.from_html(`<div class="cinder-checkbox-field"><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
 function Checkbox($$anchor, $$props) {
   const generatedId = $61.props_id();
   $61.push($$props, true);
@@ -8208,7 +8304,7 @@ function Checkbox($$anchor, $$props) {
       $61.get(inputElement).indeterminate = indeterminate() && !checked();
     }
   });
-  var div = root21();
+  var div = root20();
   var div_1 = $61.child(div);
   var span = $61.child(div_1);
   var input = $61.child(span);
@@ -8228,7 +8324,7 @@ function Checkbox($$anchor, $$props) {
   var node = $61.sibling(span, 2);
   {
     var consequent = ($$anchor2) => {
-      var label_1 = root_113();
+      var label_1 = root_114();
       var text8 = $61.child(label_1, true);
       $61.reset(label_1);
       $61.template_effect(() => {
@@ -8264,7 +8360,7 @@ function Checkbox($$anchor, $$props) {
   var node_2 = $61.sibling(node_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var p_1 = root_38();
+      var p_1 = root_39();
       var text_2 = $61.child(p_1, true);
       $61.reset(p_1);
       $61.template_effect(() => {
@@ -8304,11 +8400,11 @@ function resolveMaximumLength(value) {
 }
 
 // src/components/textarea/textarea.svelte
-var root_114 = $62.from_html(`<label class="cinder-textarea-label"> </label>`);
+var root_115 = $62.from_html(`<label class="cinder-textarea-label"> </label>`);
 var root_213 = $62.from_html(`<p class="cinder-textarea-description"> </p>`);
-var root_39 = $62.from_html(`<output class="cinder-textarea-count" aria-live="polite" aria-atomic="true"> </output>`);
+var root_310 = $62.from_html(`<output class="cinder-textarea-count" aria-live="polite" aria-atomic="true"> </output>`);
 var root_45 = $62.from_html(`<p class="cinder-textarea-error" aria-live="polite"> </p>`);
-var root22 = $62.from_html(`<div class="cinder-textarea-field"><!> <textarea></textarea> <!> <!> <!></div>`);
+var root21 = $62.from_html(`<div class="cinder-textarea-field"><!> <textarea></textarea> <!> <!> <!></div>`);
 function Textarea($$anchor, $$props) {
   $62.push($$props, true);
   let value = $62.prop($$props, "value", 15, ""), rows = $62.prop($$props, "rows", 3, 4), showCount = $62.prop($$props, "showCount", 3, false), rest = $62.rest_props($$props, [
@@ -8347,11 +8443,11 @@ function Textarea($$anchor, $$props) {
     required: $62.get(ownRequired),
     disabled: $$props.disabled
   }));
-  var div = root22();
+  var div = root21();
   var node = $62.child(div);
   {
     var consequent = ($$anchor2) => {
-      var label_1 = root_114();
+      var label_1 = root_115();
       var text8 = $62.child(label_1, true);
       $62.reset(label_1);
       $62.template_effect(() => {
@@ -8400,7 +8496,7 @@ function Textarea($$anchor, $$props) {
   var node_2 = $62.sibling(node_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var output = root_39();
+      var output = root_310();
       var text_2 = $62.child(output);
       $62.reset(output);
       $62.template_effect(() => {
@@ -8600,7 +8696,7 @@ function textOffsetToLineColumn(documentText, offset3, fallback) {
 // src/components/review-editor/front-matter-fields.svelte
 var root_214 = $63.from_html(`<div class="review-editor-front-matter__field"><!></div>`);
 var root_96 = $63.from_html(`<p class="review-editor-front-matter__empty">No front matter fields.</p>`);
-var root23 = $63.from_html(`<section class="review-editor-front-matter"><div class="review-editor-front-matter__header"><h3 class="review-editor-front-matter__title">Front matter</h3></div> <div class="review-editor-front-matter__body"><!></div></section>`);
+var root22 = $63.from_html(`<section class="review-editor-front-matter"><div class="review-editor-front-matter__header"><h3 class="review-editor-front-matter__title">Front matter</h3></div> <div class="review-editor-front-matter__body"><!></div></section>`);
 function Front_matter_fields($$anchor, $$props) {
   $63.push($$props, true);
   let readonly = $63.prop($$props, "readonly", 3, false);
@@ -8678,7 +8774,7 @@ ${rawValue}
   function isComplexValue(value) {
     return typeof value === "object" && value !== null;
   }
-  var section = root23();
+  var section = root22();
   var div = $63.child(section);
   var h3 = $63.child(div);
   $63.reset(div);
@@ -8883,23 +8979,25 @@ import * as $67 from "svelte/internal/client";
 // src/components/badge/badge.svelte
 import"svelte/internal/disclose-version";
 import * as $64 from "svelte/internal/client";
-var root24 = $64.from_html(`<span><!></span>`);
+var root23 = $64.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
   $64.push($$props, true);
-  let variant = $64.prop($$props, "variant", 3, "neutral"), size2 = $64.prop($$props, "size", 3, "md"), rest = $64.rest_props($$props, [
+  let variant = $64.prop($$props, "variant", 3, "neutral"), size2 = $64.prop($$props, "size", 3, "md"), mono = $64.prop($$props, "mono", 3, false), rest = $64.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "variant",
     "size",
+    "mono",
     "class",
     "children"
   ]);
-  var span = root24();
+  var span = root23();
   $64.attribute_effect(span, ($0) => ({
     class: $0,
     "data-cinder-variant": variant(),
     "data-cinder-size": size2(),
+    "data-cinder-mono": mono() ? "" : undefined,
     ...rest
   }), [() => classNames("cinder-badge", $$props.class)]);
   var node = $64.child(span);
@@ -8912,15 +9010,15 @@ function Badge($$anchor, $$props) {
 // src/components/diff-statistics/diff-statistics.svelte
 import"svelte/internal/disclose-version";
 import * as $65 from "svelte/internal/client";
-var root_310 = $65.from_html(`<span class="cinder-diff-statistics__label">added</span>`);
+var root_311 = $65.from_html(`<span class="cinder-diff-statistics__label">added</span>`);
 var root_215 = $65.from_html(`<span class="cinder-diff-statistics__stat cinder-diff-statistics__stat--added"><span class="cinder-diff-statistics__prefix" aria-hidden="true">+</span> <span class="cinder-diff-statistics__value"> </span> <!></span>`);
 var root_56 = $65.from_html(`<span class="cinder-diff-statistics__label">removed</span>`);
 var root_46 = $65.from_html(`<span class="cinder-diff-statistics__stat cinder-diff-statistics__stat--removed"><span class="cinder-diff-statistics__prefix" aria-hidden="true">-</span> <span class="cinder-diff-statistics__value"> </span> <!></span>`);
 var root_74 = $65.from_html(`<span class="cinder-diff-statistics__label">modified</span>`);
 var root_67 = $65.from_html(`<span class="cinder-diff-statistics__stat cinder-diff-statistics__stat--modified"><span class="cinder-diff-statistics__prefix" aria-hidden="true">~</span> <span class="cinder-diff-statistics__value"> </span> <!></span>`);
-var root_115 = $65.from_html(`<!> <!> <!>`, 1);
+var root_116 = $65.from_html(`<!> <!> <!>`, 1);
 var root_83 = $65.from_html(`<span class="cinder-diff-statistics__stat cinder-diff-statistics__stat--none">No changes</span>`);
-var root25 = $65.from_html(`<div><!></div>`);
+var root24 = $65.from_html(`<div><!></div>`);
 function Diff_statistics($$anchor, $$props) {
   $65.push($$props, true);
   let variant = $65.prop($$props, "variant", 3, "default"), hideZero = $65.prop($$props, "hideZero", 3, false), rest = $65.rest_props($$props, [
@@ -8944,7 +9042,7 @@ function Diff_statistics($$anchor, $$props) {
   const showRemoved = $65.derived(() => !hideZero() || $$props.removed > 0);
   const showModified = $65.derived(() => !hideZero() || $$props.modified > 0);
   const hasAnyStatistics = $65.derived(() => $65.get(showAdded) || $65.get(showRemoved) || $65.get(showModified));
-  var div = root25();
+  var div = root24();
   $65.attribute_effect(div, ($0, $1) => ({
     class: $0,
     "data-cinder-variant": variant(),
@@ -8959,7 +9057,7 @@ function Diff_statistics($$anchor, $$props) {
   var node = $65.child(div);
   {
     var consequent_6 = ($$anchor2) => {
-      var fragment = root_115();
+      var fragment = root_116();
       var node_1 = $65.first_child(fragment);
       {
         var consequent_1 = ($$anchor3) => {
@@ -8970,7 +9068,7 @@ function Diff_statistics($$anchor, $$props) {
           var node_2 = $65.sibling(span_1, 2);
           {
             var consequent = ($$anchor4) => {
-              var span_2 = root_310();
+              var span_2 = root_311();
               $65.append($$anchor4, span_2);
             };
             $65.if(node_2, ($$render) => {
@@ -9096,12 +9194,12 @@ function Rotate_ccw($$anchor, $$props) {
 }
 // src/components/review-editor/review-editor-controls.svelte
 var root_47 = $67.from_html(`<!> <!>`, 1);
-var root_116 = $67.from_html(`<!> <!>`, 1);
-var root_117 = $67.from_html(`<!> <!> <!>`, 1);
+var root_117 = $67.from_html(`<!> <!>`, 1);
+var root_118 = $67.from_html(`<!> <!> <!>`, 1);
 var root_106 = $67.from_html(`<div class="controls-separator svelte-161pl7w" aria-hidden="true"></div> <!>`, 1);
 var root_163 = $67.from_html(`<!> <span class="sr-only">Revert All</span>`, 1);
 var root_174 = $67.from_html(`<!> <!>`, 1);
-var root26 = $67.from_html(`<div role="toolbar" aria-label="Review editor controls"><div class="controls-leading svelte-161pl7w"><!> <!> <!></div> <div class="controls-trailing svelte-161pl7w"><!> <div class="comments-toggle-wrapper svelte-161pl7w"><!></div> <!></div></div> <div role="status" aria-live="polite" aria-atomic="true" class="comments-count-announcer sr-only"> </div>`, 1);
+var root25 = $67.from_html(`<div role="toolbar" aria-label="Review editor controls"><div class="controls-leading svelte-161pl7w"><!> <!> <!></div> <div class="controls-trailing svelte-161pl7w"><!> <div class="comments-toggle-wrapper svelte-161pl7w"><!></div> <!></div></div> <div role="status" aria-live="polite" aria-atomic="true" class="comments-count-announcer sr-only"> </div>`, 1);
 function Review_editor_controls($$anchor, $$props) {
   $67.push($$props, true);
   let showDiffTabs = $67.prop($$props, "showDiffTabs", 3, true), diffViewMode = $67.prop($$props, "diffViewMode", 15, "unified"), hasContentChanges = $67.prop($$props, "hasContentChanges", 3, false), readonly = $67.prop($$props, "readonly", 3, false), commentCount = $67.prop($$props, "commentCount", 3, 0), sidebarOpen = $67.prop($$props, "sidebarOpen", 3, false);
@@ -9121,7 +9219,7 @@ function Review_editor_controls($$anchor, $$props) {
       $67.set(liveAnnouncementText, `${commentCount()} ${commentCount() === 1 ? "comment" : "comments"}`);
     }
   });
-  var fragment = root26();
+  var fragment = root25();
   var div = $67.first_child(fragment);
   var div_1 = $67.child(div);
   var node = $67.child(div_1);
@@ -9139,7 +9237,7 @@ function Review_editor_controls($$anchor, $$props) {
     },
     onchange: handleViewChange,
     children: ($$anchor2, $$slotProps) => {
-      var fragment_1 = root_116();
+      var fragment_1 = root_117();
       var node_1 = $67.first_child(fragment_1);
       {
         const leading = ($$anchor3) => {
@@ -9259,7 +9357,7 @@ function Review_editor_controls($$anchor, $$props) {
           diffViewMode($$value);
         },
         children: ($$anchor3, $$slotProps) => {
-          var fragment_8 = root_117();
+          var fragment_8 = root_118();
           var node_8 = $67.first_child(fragment_8);
           Segment(node_8, {
             value: "unified",
@@ -9440,7 +9538,7 @@ function setSurfaceContext(context) {
 var getSurfaceContext = optionalContext(getSurfaceContextStrict);
 
 // src/components/surface/surface.svelte
-var root27 = $68.from_html(`<div><!></div>`);
+var root26 = $68.from_html(`<div><!></div>`);
 function Surface($$anchor, $$props) {
   $68.push($$props, true);
   let tone = $68.prop($$props, "tone", 3, "default"), rest = $68.rest_props($$props, [
@@ -9457,7 +9555,7 @@ function Surface($$anchor, $$props) {
     }
   };
   setSurfaceContext(context);
-  var div = root27();
+  var div = root26();
   $68.attribute_effect(div, ($0) => ({ class: $0, "data-cinder-tone": tone(), ...rest }), [() => classNames("cinder-surface", $$props.class)]);
   var node = $68.child(div);
   $68.snippet(node, () => $$props.children ?? $68.noop);
@@ -9692,7 +9790,7 @@ function Chevron_right($$anchor, $$props) {
   }));
 }
 // src/components/diff-viewer/front-matter-header.svelte
-var root28 = $72.from_html(`<button><span class="front-matter-icon svelte-1rp9so4"><!></span> <!> <span class="front-matter-label svelte-1rp9so4"> </span> <!></button>`);
+var root27 = $72.from_html(`<button><span class="front-matter-icon svelte-1rp9so4"><!></span> <!> <span class="front-matter-label svelte-1rp9so4"> </span> <!></button>`);
 function Front_matter_header($$anchor, $$props) {
   $72.push($$props, true);
   let label = $72.prop($$props, "label", 3, "Front Matter"), expanded = $72.prop($$props, "expanded", 15, true), badgeVariant = $72.prop($$props, "badgeVariant", 3, "neutral"), badgeSize = $72.prop($$props, "badgeSize", 3, "xs"), variant = $72.prop($$props, "variant", 3, "panel"), rest = $72.rest_props($$props, [
@@ -9722,7 +9820,7 @@ function Front_matter_header($$anchor, $$props) {
       expanded(false);
     }
   }
-  var button = root28();
+  var button = root27();
   $72.attribute_effect(button, ($0) => ({
     type: "button",
     id: $$props.id,
@@ -9795,7 +9893,7 @@ var root_48 = $73.from_html(`<button type="button"><span class="diff-gutter svel
 var root_57 = $73.from_html(`<div><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb"> </span></div>`);
 var root_84 = $73.from_html(`<del class="svelte-hc3elb"> </del>`);
 var root_75 = $73.from_html(`<button type="button"><span class="diff-gutter svelte-hc3elb"> </span> <span class="diff-text svelte-hc3elb"><!></span></button>`);
-var root_119 = $73.from_html(`<del class="svelte-hc3elb"> </del>`);
+var root_1110 = $73.from_html(`<del class="svelte-hc3elb"> </del>`);
 var root_107 = $73.from_html(`<div><span class="diff-gutter svelte-hc3elb"> </span> <span class="diff-text svelte-hc3elb"><!></span></div>`);
 var root_193 = $73.from_html(`<span> </span>`);
 var root_20 = $73.from_html(`<del class="word-removed svelte-hc3elb"> </del>`);
@@ -9942,7 +10040,7 @@ function Diff_line($$anchor, $$props) {
               var node_5 = $73.child(span_6);
               {
                 var consequent_5 = ($$anchor5) => {
-                  var del_1 = root_119();
+                  var del_1 = root_1110();
                   var text_7 = $73.child(del_1, true);
                   $73.reset(del_1);
                   $73.template_effect(() => $73.set_text(text_7, $$props.diff.text || " "));
@@ -10196,8 +10294,8 @@ function Diff_line($$anchor, $$props) {
 $73.delegate(["click"]);
 
 // src/components/diff-viewer/diff-front-matter.svelte
-var root_118 = $74.from_html(`<div class="front-matter-content svelte-113383m"></div>`);
-var root29 = $74.from_html(`<div><!> <!></div>`);
+var root_119 = $74.from_html(`<div class="front-matter-content svelte-113383m"></div>`);
+var root28 = $74.from_html(`<div><!> <!></div>`);
 function Diff_front_matter($$anchor, $$props) {
   $74.push($$props, true);
   let id = $74.prop($$props, "id", 3, "front-matter"), expanded = $74.prop($$props, "expanded", 15, true), badgeLabel = $74.prop($$props, "badgeLabel", 3, null), badgeVariant = $74.prop($$props, "badgeVariant", 3, "warning"), rest = $74.rest_props($$props, [
@@ -10216,7 +10314,7 @@ function Diff_front_matter($$anchor, $$props) {
   const hasChanges = $74.derived(() => $$props.diffs.some((d) => d.type !== "same"));
   const toggleId = $74.derived(() => `${id()}-toggle`);
   const contentId = $74.derived(() => `${id()}-content`);
-  var div = root29();
+  var div = root28();
   $74.attribute_effect(div, ($0) => ({ class: $0, "data-has-changes": $74.get(hasChanges), ...rest }), [() => classNames("front-matter-section", $$props.class)], undefined, undefined, "svelte-113383m");
   var node = $74.child(div);
   Front_matter_header(node, {
@@ -10243,7 +10341,7 @@ function Diff_front_matter($$anchor, $$props) {
   var node_1 = $74.sibling(node, 2);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_118();
+      var div_1 = root_119();
       $74.each(div_1, 23, () => $$props.diffs, (lineDiff, idx) => `fm-${idx}:${lineDiff.type}:${lineDiff.type === "modified" ? lineDiff.newText : lineDiff.text}`, ($$anchor3, lineDiff) => {
         Diff_line($$anchor3, {
           get diff() {
@@ -10278,7 +10376,7 @@ import * as $79 from "svelte/internal/client";
 // src/components/kbd/kbd.svelte
 import"svelte/internal/disclose-version";
 import * as $75 from "svelte/internal/client";
-var root30 = $75.from_html(`<kbd><!></kbd>`);
+var root29 = $75.from_html(`<kbd><!></kbd>`);
 function Kbd($$anchor, $$props) {
   $75.push($$props, true);
   let size2 = $75.prop($$props, "size", 3, "md"), rest = $75.rest_props($$props, [
@@ -10290,7 +10388,7 @@ function Kbd($$anchor, $$props) {
     "label",
     "children"
   ]);
-  var kbd = root30();
+  var kbd = root29();
   $75.attribute_effect(kbd, ($0) => ({ class: $0, "data-cinder-size": size2(), ...rest }), [() => classNames("cinder-kbd", $$props.class)]);
   var node = $75.child(kbd);
   {
@@ -10320,11 +10418,11 @@ function Kbd($$anchor, $$props) {
 // src/components/spinner/spinner.svelte
 import"svelte/internal/disclose-version";
 import * as $76 from "svelte/internal/client";
-var root31 = $76.from_html(`<span><span class="cinder-spinner__sr-only"> </span></span>`);
+var root30 = $76.from_html(`<span><span class="cinder-spinner__sr-only"> </span></span>`);
 function Spinner($$anchor, $$props) {
   $76.push($$props, true);
   const size2 = $76.prop($$props, "size", 3, "md"), label = $76.prop($$props, "label", 3, "Loading"), rest = $76.rest_props($$props, ["$$slots", "$$events", "$$legacy", "size", "label", "class"]);
-  var span = root31();
+  var span = root30();
   $76.attribute_effect(span, ($0) => ({
     ...rest,
     class: $0,
@@ -10393,13 +10491,13 @@ function Refresh_cw($$anchor, $$props) {
   }));
 }
 // src/components/diff-viewer/diff-toolbar.svelte
-var root_120 = $79.from_html(`<!> <!> <!>`, 1);
-var root_1110 = $79.from_html(`<span class="no-changes svelte-1p8ursg">No changes</span>`);
+var root_121 = $79.from_html(`<!> <!> <!>`, 1);
+var root_1111 = $79.from_html(`<span class="no-changes svelte-1p8ursg">No changes</span>`);
 var root_176 = $79.from_html(`<!> Revert All`, 1);
 var root_194 = $79.from_html(`<!> Compute Diff`, 1);
 var root_217 = $79.from_html(`<div class="navigation svelte-1p8ursg"><!> <span class="change-counter svelte-1p8ursg"> </span> <!></div> <div class="shortcuts svelte-1p8ursg"><!> <!></div>`, 1);
 var root_242 = $79.from_html(`<span class="front-matter-only-hint svelte-1p8ursg">Front matter only</span>`);
-var root32 = $79.from_html(`<div><div class="toolbar-left svelte-1p8ursg"><!> <div class="stats svelte-1p8ursg"><!> <!> <!> <!> <!> <!></div></div> <div class="toolbar-right svelte-1p8ursg"><!> <!> <!> <!></div></div>`);
+var root31 = $79.from_html(`<div><div class="toolbar-left svelte-1p8ursg"><!> <div class="stats svelte-1p8ursg"><!> <!> <!> <!> <!> <!></div></div> <div class="toolbar-right svelte-1p8ursg"><!> <!> <!> <!></div></div>`);
 function Diff_toolbar($$anchor, $$props) {
   $79.push($$props, true);
   let viewMode = $79.prop($$props, "viewMode", 15, "unified"), readonly = $79.prop($$props, "readonly", 3, false), rest = $79.rest_props($$props, [
@@ -10423,7 +10521,7 @@ function Diff_toolbar($$anchor, $$props) {
   const tier = $79.derived(() => $$props.diffState?.tier ?? "realtime");
   const isStale = $79.derived(() => $$props.diffState?.isStale ?? false);
   const isComputing = $79.derived(() => $$props.diffState?.isComputing ?? false);
-  var div = root32();
+  var div = root31();
   $79.attribute_effect(div, ($0) => ({ class: $0, ...rest }), [() => classNames("diff-toolbar", $$props.class)], undefined, undefined, "svelte-1p8ursg");
   var div_1 = $79.child(div);
   var node = $79.child(div_1);
@@ -10440,7 +10538,7 @@ function Diff_toolbar($$anchor, $$props) {
       viewMode($$value);
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment = root_120();
+      var fragment = root_121();
       var node_1 = $79.first_child(fragment);
       Segment(node_1, {
         value: "unified",
@@ -10542,7 +10640,7 @@ function Diff_toolbar($$anchor, $$props) {
   var node_7 = $79.sibling(node_6, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var span = root_1110();
+      var span = root_1111();
       $79.append($$anchor2, span);
     };
     $79.if(node_7, ($$render) => {
@@ -10735,10 +10833,10 @@ function Diff_toolbar($$anchor, $$props) {
 // src/components/diff-viewer/diff-viewer.svelte
 var root_76 = $80.from_html(`<span class="compute-time svelte-1fvc2en"> </span>`);
 var root_68 = $80.from_html(`<div class="diff-warning svelte-1fvc2en" role="status"> <!></div>`);
-var root_1111 = $80.from_html(`<!> Revert`, 1);
+var root_1112 = $80.from_html(`<!> Revert`, 1);
 var root_108 = $80.from_html(`<div class="hunk-header svelte-1fvc2en"><span class="hunk-range svelte-1fvc2en"> </span> <!></div>`);
 var root_97 = $80.from_html(`<!> <!>`, 1);
-var root_121 = $80.from_html(`<!> <!> <div class="diff-content svelte-1fvc2en"><!> <!></div>`, 1);
+var root_123 = $80.from_html(`<!> <!> <div class="diff-content svelte-1fvc2en"><!> <!></div>`, 1);
 function Diff_viewer($$anchor, $$props) {
   const instanceId = $80.props_id();
   $80.push($$props, true);
@@ -10900,7 +10998,7 @@ ${match[1] ?? ""}
         return $80.get($1);
       },
       children: ($$anchor2, $$slotProps) => {
-        var fragment_1 = root_121();
+        var fragment_1 = root_123();
         var node = $80.first_child(fragment_1);
         {
           var consequent = ($$anchor3) => {
@@ -11054,7 +11152,7 @@ ${match[1] ?? ""}
                 onclick: () => handleRevertHunk($80.get(hunkAtLine)),
                 "aria-label": "Revert this change",
                 children: ($$anchor5, $$slotProps2) => {
-                  var fragment_8 = root_1111();
+                  var fragment_8 = root_1112();
                   var node_10 = $80.first_child(fragment_8);
                   Rotate_ccw(node_10, { class: "icon-xs" });
                   $80.next();
@@ -11100,9 +11198,9 @@ ${match[1] ?? ""}
 import"svelte/internal/disclose-version";
 import * as $81 from "svelte/internal/client";
 import { tick as tick2 } from "svelte";
-var root_123 = $81.from_html(`<div class="cinder-selection-popover__form"><textarea class="cinder-selection-popover__textarea" aria-label="Comment text" placeholder="Add a comment..."></textarea> <div class="cinder-selection-popover__actions"><button type="button" class="cinder-selection-popover__cancel" aria-label="Cancel"><svg class="cinder-selection-popover__icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button> <button type="button" class="cinder-selection-popover__submit" aria-label="Submit comment" title="Submit comment"><svg class="cinder-selection-popover__icon" aria-hidden="true" viewBox="0 0 24 24"><path d="m22 2-7 20-4-9-9-4Z"></path><path d="M22 2 11 13"></path></svg></button></div></div>`);
+var root_125 = $81.from_html(`<div class="cinder-selection-popover__form"><textarea class="cinder-selection-popover__textarea" aria-label="Comment text" placeholder="Add a comment..."></textarea> <div class="cinder-selection-popover__actions"><button type="button" class="cinder-selection-popover__cancel" aria-label="Cancel"><svg class="cinder-selection-popover__icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button> <button type="button" class="cinder-selection-popover__submit" aria-label="Submit comment" title="Submit comment"><svg class="cinder-selection-popover__icon" aria-hidden="true" viewBox="0 0 24 24"><path d="m22 2-7 20-4-9-9-4Z"></path><path d="M22 2 11 13"></path></svg></button></div></div>`);
 var root_218 = $81.from_html(`<button type="button" class="cinder-selection-popover__button" aria-label="Add comment" title="Add comment to selection"><svg class="cinder-selection-popover__icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h6"></path><path d="M19 3v6"></path><path d="M16 6h6"></path></svg></button>`);
-var root33 = $81.from_html(`<div><!></div>`);
+var root32 = $81.from_html(`<div><!></div>`);
 function Selection_popover($$anchor, $$props) {
   $81.push($$props, true);
   let open = $81.prop($$props, "open", 3, false), rest = $81.rest_props($$props, [
@@ -11230,7 +11328,7 @@ function Selection_popover($$anchor, $$props) {
       rememberFocus();
     }
   });
-  var div = root33();
+  var div = root32();
   $81.attribute_effect(div, ($0) => ({
     id: $$props.id,
     class: $0,
@@ -11246,7 +11344,7 @@ function Selection_popover($$anchor, $$props) {
   var node = $81.child(div);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_123();
+      var div_1 = root_125();
       var textarea = $81.child(div_1);
       $81.remove_textarea_child(textarea);
       $81.set_attribute(textarea, "rows", 2);
@@ -11292,11 +11390,11 @@ import {
   generateCommentsExport
 } from "@lostgradient/cinder/commentary/export";
 var root_220 = $82.from_html(`<input type="hidden" class="svelte-1rnat08"/> <input type="hidden" class="svelte-1rnat08"/> <input type="hidden" class="svelte-1rnat08"/> <input type="hidden" class="svelte-1rnat08"/> <input type="hidden" class="svelte-1rnat08"/>`, 1);
-var root_311 = $82.from_html(`<div class="review-editor-view-panel svelte-1rnat08" role="tabpanel" aria-label="Editor view"><!> <!></div>`);
+var root_312 = $82.from_html(`<div class="review-editor-view-panel svelte-1rnat08" role="tabpanel" aria-label="Editor view"><!> <!></div>`);
 var root_58 = $82.from_html(`<div class="review-editor-view-panel svelte-1rnat08" role="tabpanel" aria-label="Diff view"><!></div>`);
 var root_85 = $82.from_html(`<div class="summary-view svelte-1rnat08" role="region" aria-label="Review summary"><div class="summary-empty svelte-1rnat08"><p class="svelte-1rnat08">No changes or comments to summarize.</p> <p class="summary-hint svelte-1rnat08">Edit the document or add comments to generate a summary.</p></div></div>`);
 var root_69 = $82.from_html(`<div class="review-editor-view-panel svelte-1rnat08" role="tabpanel" aria-label="Summary view"><!></div>`);
-var root34 = $82.from_html(`<div data-testid="review-editor"><!> <!> <!> <div class="review-editor-main svelte-1rnat08"><!></div> <!> <!> <!></div>`);
+var root33 = $82.from_html(`<div data-testid="review-editor"><!> <!> <!> <div class="review-editor-main svelte-1rnat08"><!></div> <!> <!> <!></div>`);
 function Review_editor_impl($$anchor, $$props) {
   $82.push($$props, true);
   const exportActionsSnippet = ($$anchor2) => {
@@ -12125,7 +12223,7 @@ function Review_editor_impl($$anchor, $$props) {
     deleteComment,
     createBlockThread
   };
-  var div = root34();
+  var div = root33();
   var node_1 = $82.child(div);
   $82.bind_this(Live_region(node_1, {}), ($$value) => $82.set(liveRegionRef, $$value, true), () => $82.get(liveRegionRef));
   var node_2 = $82.sibling(node_1, 2);
@@ -12228,7 +12326,7 @@ function Review_editor_impl($$anchor, $$props) {
   var node_4 = $82.child(div_1);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_2 = root_311();
+      var div_2 = root_312();
       var node_5 = $82.child(div_2);
       {
         var consequent_1 = ($$anchor3) => {
@@ -13337,4 +13435,4 @@ export {
   Comment_composer as CommentComposer
 };
 
-//# debugId=DAFAF275021C973564756E2164756E21
+//# debugId=B427787C8860415464756E2164756E21