@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/waveform/index.js

@@ -26,7 +26,7 @@ import"@lostgradient/cinder/waveform/styles";
 
 // src/components/waveform/waveform.svelte
 import"svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import * as $2 from "svelte/internal/client";
 
 // src/_internal/chart/chart-utilities.ts
 var chartPalette = [
@@ -690,21 +690,56 @@ function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// src/utilities/use-resize-observer.svelte.ts
+import * as $ from "svelte/internal/client";
+function useResizeObserver(onResize, options = {}) {
+  const { box, enabled = () => true } = options;
+  return (node) => {
+    if (typeof ResizeObserver === "undefined") {
+      return () => {};
+    }
+    let observer = null;
+    const disconnectObserver = () => {
+      observer?.disconnect();
+      observer = null;
+    };
+    $.user_effect(() => {
+      if (!enabled()) {
+        disconnectObserver();
+        return;
+      }
+      observer = new ResizeObserver((entries) => {
+        if (!enabled()) {
+          return;
+        }
+        onResize(entries);
+      });
+      observer.observe(node, box !== undefined ? { box } : undefined);
+      return () => {
+        disconnectObserver();
+      };
+    });
+    return () => {
+      disconnectObserver();
+    };
+  };
+}
+
 // src/components/waveform/waveform.svelte
-var root_1 = $.from_html(`<p class="cinder-waveform__description"> </p>`);
-var root_2 = $.from_html(`<div class="cinder-waveform__state"><!></div>`);
-var root_5 = $.from_html(`<div class="cinder-waveform__state"><!></div>`);
-var root_8 = $.from_svg(`<title> </title>`);
-var root_11 = $.from_svg(`<rect class="cinder-waveform__bar" aria-hidden="true"></rect>`);
-var root_12 = $.from_svg(`<path class="cinder-waveform__path" aria-hidden="true"></path>`);
-var root_9 = $.from_svg(`<line class="cinder-waveform__baseline" x1="0" aria-hidden="true"></line><!>`, 1);
-var root_14 = $.from_html(`<tr><td> </td><td> </td></tr>`);
-var root_13 = $.from_html(`<table><caption> </caption><thead><tr><th scope="col">Sample index</th><th scope="col">Amplitude</th></tr></thead><tbody></tbody></table>`);
-var root = $.from_html(`<figure><!> <div class="cinder-waveform__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
+var root_1 = $2.from_html(`<p class="cinder-waveform__description"> </p>`);
+var root_2 = $2.from_html(`<div class="cinder-waveform__state"><!></div>`);
+var root_5 = $2.from_html(`<div class="cinder-waveform__state"><!></div>`);
+var root_8 = $2.from_svg(`<title> </title>`);
+var root_11 = $2.from_svg(`<rect class="cinder-waveform__bar" aria-hidden="true"></rect>`);
+var root_12 = $2.from_svg(`<path class="cinder-waveform__path" aria-hidden="true"></path>`);
+var root_9 = $2.from_svg(`<line class="cinder-waveform__baseline" x1="0" aria-hidden="true"></line><!>`, 1);
+var root_14 = $2.from_html(`<tr><td> </td><td> </td></tr>`);
+var root_13 = $2.from_html(`<table><caption> </caption><thead><tr><th scope="col">Sample index</th><th scope="col">Amplitude</th></tr></thead><tbody></tbody></table>`);
+var root = $2.from_html(`<figure><!> <div class="cinder-waveform__viewport"><!> <svg role="img"><!><!></svg></div> <!></figure>`);
 function Waveform($$anchor, $$props) {
-  const generatedId = $.props_id();
-  $.push($$props, true);
-  let renderMode = $.prop($$props, "renderMode", 3, "path"), height = $.prop($$props, "height", 3, 80), loading = $.prop($$props, "loading", 3, false), dataTableVisibility = $.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $.rest_props($$props, [
+  const generatedId = $2.props_id();
+  $2.push($$props, true);
+  let renderMode = $2.prop($$props, "renderMode", 3, "path"), height = $2.prop($$props, "height", 3, 80), loading = $2.prop($$props, "loading", 3, false), dataTableVisibility = $2.prop($$props, "dataTableVisibility", 3, "screen-reader-only"), rest = $2.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -721,35 +756,21 @@ function Waveform($$anchor, $$props) {
     "loadingContent",
     "id"
   ]);
-  const rootId = $.derived(() => $$props.id ?? generatedId);
-  const descriptionId = $.derived(() => $$props.description ? `${$.get(rootId)}-description` : undefined);
-  let measuredWidth = $.state(400);
-  let rootElement = $.state(undefined);
-  $.user_effect(() => {
-    const element = $.get(rootElement);
-    if (!element)
-      return;
-    if (typeof ResizeObserver === "undefined") {
-      const rect = element.getBoundingClientRect();
-      if (rect.width > 0)
-        $.set(measuredWidth, rect.width, true);
-      return;
-    }
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry && entry.contentRect.width > 0)
-        $.set(measuredWidth, entry.contentRect.width, true);
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
+  const rootId = $2.derived(() => $$props.id ?? generatedId);
+  const descriptionId = $2.derived(() => $$props.description ? `${$2.get(rootId)}-description` : undefined);
+  let measuredWidth = $2.state(400);
+  const observeResize = useResizeObserver((entries) => {
+    const entry = entries[0];
+    if (entry && entry.contentRect.width > 0)
+      $2.set(measuredWidth, entry.contentRect.width, true);
   });
-  const isEmpty = $.derived(() => $$props.data.length === 0);
-  const midY = $.derived(() => height() / 2);
+  const isEmpty = $2.derived(() => $$props.data.length === 0);
+  const midY = $2.derived(() => height() / 2);
   const MAX_RENDER_POINTS = 2000;
   function clampSample(sample) {
     return sample !== undefined && Number.isFinite(sample) ? Math.max(-1, Math.min(1, sample)) : 0;
   }
-  const renderSamples = $.derived(() => {
+  const renderSamples = $2.derived(() => {
     const length = $$props.data.length;
     if (length <= MAX_RENDER_POINTS)
       return $$props.data.map(clampSample);
@@ -781,45 +802,45 @@ function Waveform($$anchor, $$props) {
     }
     return out;
   });
-  const waveformPath = $.derived(() => {
-    const samples = $.get(renderSamples);
+  const waveformPath = $2.derived(() => {
+    const samples = $2.get(renderSamples);
     if (samples.length === 0)
       return "";
     if (samples.length === 1) {
-      const x = $.get(measuredWidth) / 2;
-      const y = $.get(midY) - samples[0] * $.get(midY);
+      const x = $2.get(measuredWidth) / 2;
+      const y = $2.get(midY) - samples[0] * $2.get(midY);
       return `M${(x - 1).toFixed(2)},${y.toFixed(2)}L${(x + 1).toFixed(2)},${y.toFixed(2)}`;
     }
     const points = samples.map((sample, index2) => {
-      const x = index2 / (samples.length - 1) * $.get(measuredWidth);
-      const y = $.get(midY) - sample * $.get(midY);
+      const x = index2 / (samples.length - 1) * $2.get(measuredWidth);
+      const y = $2.get(midY) - sample * $2.get(midY);
       return { x, y };
     });
     const firstPoint = points[0];
     const restPoints = points.slice(1);
     return `M${firstPoint.x.toFixed(2)},${firstPoint.y.toFixed(2)}` + restPoints.map((point) => `L${point.x.toFixed(2)},${point.y.toFixed(2)}`).join("");
   });
-  const waveformBars = $.derived(() => {
-    const samples = $.get(renderSamples);
+  const waveformBars = $2.derived(() => {
+    const samples = $2.get(renderSamples);
     if (samples.length === 0)
       return [];
-    const step = $.get(measuredWidth) / samples.length;
+    const step = $2.get(measuredWidth) / samples.length;
     const visualWidth = Math.max(1, step - 1);
     return samples.map((sample, index2) => {
       const amplitude = Math.abs(sample);
-      const barHeight = amplitude * $.get(midY);
+      const barHeight = amplitude * $2.get(midY);
       return {
         x: index2 * step,
-        y: $.get(midY) - barHeight,
+        y: $2.get(midY) - barHeight,
         height: barHeight * 2,
         width: visualWidth
       };
     });
   });
-  const hasDataTable = $.derived(() => dataTableVisibility() !== "hidden");
+  const hasDataTable = $2.derived(() => dataTableVisibility() !== "hidden");
   const TABLE_SAMPLE_LIMIT = 20;
-  const isTableSampled = $.derived(() => $$props.data.length > TABLE_SAMPLE_LIMIT);
-  const tableSamples = $.derived(() => {
+  const isTableSampled = $2.derived(() => $$props.data.length > TABLE_SAMPLE_LIMIT);
+  const tableSamples = $2.derived(() => {
     if ($$props.data.length === 0)
       return [];
     const step = Math.max(1, Math.ceil($$props.data.length / TABLE_SAMPLE_LIMIT));
@@ -829,210 +850,210 @@ function Waveform($$anchor, $$props) {
     }
     return out;
   });
-  const tableCaption = $.derived(() => {
+  const tableCaption = $2.derived(() => {
     const base = $$props.dataTableCaption ?? $$props.label;
-    if (!$.get(isTableSampled))
+    if (!$2.get(isTableSampled))
       return base;
-    return `${base} (${$.get(tableSamples).length} of ${$$props.data.length} samples shown)`;
+    return `${base} (${$2.get(tableSamples).length} of ${$$props.data.length} samples shown)`;
   });
   var figure = root();
-  $.attribute_effect(figure, ($0) => ({
+  $2.attribute_effect(figure, ($0) => ({
     ...rest,
-    id: $.get(rootId),
+    id: $2.get(rootId),
     class: $0,
     "aria-label": $$props.label,
-    "aria-describedby": $.get(descriptionId),
+    "aria-describedby": $2.get(descriptionId),
     "data-cinder-render-mode": renderMode()
   }), [() => classNames("cinder-waveform", $$props.class)]);
-  var node = $.child(figure);
+  var node = $2.child(figure);
   {
     var consequent = ($$anchor2) => {
       var p = root_1();
-      var text2 = $.child(p, true);
-      $.reset(p);
-      $.template_effect(() => {
-        $.set_attribute(p, "id", $.get(descriptionId));
-        $.set_text(text2, $$props.description);
+      var text2 = $2.child(p, true);
+      $2.reset(p);
+      $2.template_effect(() => {
+        $2.set_attribute(p, "id", $2.get(descriptionId));
+        $2.set_text(text2, $$props.description);
       });
-      $.append($$anchor2, p);
+      $2.append($$anchor2, p);
     };
-    $.if(node, ($$render) => {
+    $2.if(node, ($$render) => {
       if ($$props.description)
         $$render(consequent);
     });
   }
-  var div = $.sibling(node, 2);
+  var div = $2.sibling(node, 2);
   let styles;
-  var node_1 = $.child(div);
+  var node_1 = $2.child(div);
   {
     var consequent_2 = ($$anchor2) => {
       var div_1 = root_2();
-      var node_2 = $.child(div_1);
+      var node_2 = $2.child(div_1);
       {
         var consequent_1 = ($$anchor3) => {
-          var fragment = $.comment();
-          var node_3 = $.first_child(fragment);
-          $.snippet(node_3, () => $$props.loadingContent);
-          $.append($$anchor3, fragment);
+          var fragment = $2.comment();
+          var node_3 = $2.first_child(fragment);
+          $2.snippet(node_3, () => $$props.loadingContent);
+          $2.append($$anchor3, fragment);
         };
         var alternate = ($$anchor3) => {
-          var text_1 = $.text("Loading…");
-          $.append($$anchor3, text_1);
+          var text_1 = $2.text("Loading…");
+          $2.append($$anchor3, text_1);
         };
-        $.if(node_2, ($$render) => {
+        $2.if(node_2, ($$render) => {
           if ($$props.loadingContent)
             $$render(consequent_1);
           else
             $$render(alternate, -1);
         });
       }
-      $.reset(div_1);
-      $.append($$anchor2, div_1);
+      $2.reset(div_1);
+      $2.append($$anchor2, div_1);
     };
     var consequent_4 = ($$anchor2) => {
       var div_2 = root_5();
-      var node_4 = $.child(div_2);
+      var node_4 = $2.child(div_2);
       {
         var consequent_3 = ($$anchor3) => {
-          var fragment_1 = $.comment();
-          var node_5 = $.first_child(fragment_1);
-          $.snippet(node_5, () => $$props.empty);
-          $.append($$anchor3, fragment_1);
+          var fragment_1 = $2.comment();
+          var node_5 = $2.first_child(fragment_1);
+          $2.snippet(node_5, () => $$props.empty);
+          $2.append($$anchor3, fragment_1);
         };
         var alternate_1 = ($$anchor3) => {
-          var text_2 = $.text("No waveform data");
-          $.append($$anchor3, text_2);
+          var text_2 = $2.text("No waveform data");
+          $2.append($$anchor3, text_2);
         };
-        $.if(node_4, ($$render) => {
+        $2.if(node_4, ($$render) => {
           if ($$props.empty)
             $$render(consequent_3);
           else
             $$render(alternate_1, -1);
         });
       }
-      $.reset(div_2);
-      $.append($$anchor2, div_2);
+      $2.reset(div_2);
+      $2.append($$anchor2, div_2);
     };
-    $.if(node_1, ($$render) => {
+    $2.if(node_1, ($$render) => {
       if (loading())
         $$render(consequent_2);
-      else if ($.get(isEmpty))
+      else if ($2.get(isEmpty))
         $$render(consequent_4, 1);
     });
   }
-  var svg = $.sibling(node_1, 2);
-  var node_6 = $.child(svg);
+  var svg = $2.sibling(node_1, 2);
+  var node_6 = $2.child(svg);
   {
     var consequent_5 = ($$anchor2) => {
       var title = root_8();
-      var text_3 = $.child(title, true);
-      $.reset(title);
-      $.template_effect(() => {
-        $.set_attribute(title, "id", `${$.get(rootId) ?? ""}-svg-title`);
-        $.set_text(text_3, $$props.label);
+      var text_3 = $2.child(title, true);
+      $2.reset(title);
+      $2.template_effect(() => {
+        $2.set_attribute(title, "id", `${$2.get(rootId) ?? ""}-svg-title`);
+        $2.set_text(text_3, $$props.label);
       });
-      $.append($$anchor2, title);
+      $2.append($$anchor2, title);
     };
-    $.if(node_6, ($$render) => {
-      if (!loading() && !$.get(isEmpty))
+    $2.if(node_6, ($$render) => {
+      if (!loading() && !$2.get(isEmpty))
         $$render(consequent_5);
     });
   }
-  var node_7 = $.sibling(node_6);
+  var node_7 = $2.sibling(node_6);
   {
     var consequent_7 = ($$anchor2) => {
       var fragment_2 = root_9();
-      var line = $.first_child(fragment_2);
-      var node_8 = $.sibling(line);
+      var line = $2.first_child(fragment_2);
+      var node_8 = $2.sibling(line);
       {
         var consequent_6 = ($$anchor3) => {
-          var fragment_3 = $.comment();
-          var node_9 = $.first_child(fragment_3);
-          $.each(node_9, 17, () => $.get(waveformBars), $.index, ($$anchor4, bar) => {
-            var rect_1 = root_11();
-            $.template_effect(() => {
-              $.set_attribute(rect_1, "x", $.get(bar).x);
-              $.set_attribute(rect_1, "y", $.get(bar).y);
-              $.set_attribute(rect_1, "width", $.get(bar).width);
-              $.set_attribute(rect_1, "height", $.get(bar).height);
+          var fragment_3 = $2.comment();
+          var node_9 = $2.first_child(fragment_3);
+          $2.each(node_9, 17, () => $2.get(waveformBars), $2.index, ($$anchor4, bar) => {
+            var rect = root_11();
+            $2.template_effect(() => {
+              $2.set_attribute(rect, "x", $2.get(bar).x);
+              $2.set_attribute(rect, "y", $2.get(bar).y);
+              $2.set_attribute(rect, "width", $2.get(bar).width);
+              $2.set_attribute(rect, "height", $2.get(bar).height);
             });
-            $.append($$anchor4, rect_1);
+            $2.append($$anchor4, rect);
           });
-          $.append($$anchor3, fragment_3);
+          $2.append($$anchor3, fragment_3);
         };
         var alternate_2 = ($$anchor3) => {
           var path = root_12();
-          $.template_effect(() => $.set_attribute(path, "d", $.get(waveformPath)));
-          $.append($$anchor3, path);
+          $2.template_effect(() => $2.set_attribute(path, "d", $2.get(waveformPath)));
+          $2.append($$anchor3, path);
         };
-        $.if(node_8, ($$render) => {
+        $2.if(node_8, ($$render) => {
           if (renderMode() === "bars")
             $$render(consequent_6);
           else
             $$render(alternate_2, -1);
         });
       }
-      $.template_effect(() => {
-        $.set_attribute(line, "x2", $.get(measuredWidth));
-        $.set_attribute(line, "y1", $.get(midY));
-        $.set_attribute(line, "y2", $.get(midY));
+      $2.template_effect(() => {
+        $2.set_attribute(line, "x2", $2.get(measuredWidth));
+        $2.set_attribute(line, "y1", $2.get(midY));
+        $2.set_attribute(line, "y2", $2.get(midY));
       });
-      $.append($$anchor2, fragment_2);
+      $2.append($$anchor2, fragment_2);
     };
-    $.if(node_7, ($$render) => {
-      if (!loading() && !$.get(isEmpty))
+    $2.if(node_7, ($$render) => {
+      if (!loading() && !$2.get(isEmpty))
         $$render(consequent_7);
     });
   }
-  $.reset(svg);
-  $.reset(div);
-  var node_10 = $.sibling(div, 2);
+  $2.reset(svg);
+  $2.reset(div);
+  var node_10 = $2.sibling(div, 2);
   {
     var consequent_8 = ($$anchor2) => {
       var table = root_13();
-      var caption = $.child(table);
-      var text_4 = $.child(caption, true);
-      $.reset(caption);
-      var tbody = $.sibling(caption, 2);
-      $.each(tbody, 21, () => $.get(tableSamples), (sample) => sample.index, ($$anchor3, sample) => {
+      var caption = $2.child(table);
+      var text_4 = $2.child(caption, true);
+      $2.reset(caption);
+      var tbody = $2.sibling(caption, 2);
+      $2.each(tbody, 21, () => $2.get(tableSamples), (sample) => sample.index, ($$anchor3, sample) => {
         var tr = root_14();
-        var td = $.child(tr);
-        var text_5 = $.child(td, true);
-        $.reset(td);
-        var td_1 = $.sibling(td);
-        var text_6 = $.child(td_1, true);
-        $.reset(td_1);
-        $.reset(tr);
-        $.template_effect(($0) => {
-          $.set_text(text_5, $.get(sample).index);
-          $.set_text(text_6, $0);
-        }, [() => $.get(sample).value.toFixed(4)]);
-        $.append($$anchor3, tr);
+        var td = $2.child(tr);
+        var text_5 = $2.child(td, true);
+        $2.reset(td);
+        var td_1 = $2.sibling(td);
+        var text_6 = $2.child(td_1, true);
+        $2.reset(td_1);
+        $2.reset(tr);
+        $2.template_effect(($0) => {
+          $2.set_text(text_5, $2.get(sample).index);
+          $2.set_text(text_6, $0);
+        }, [() => $2.get(sample).value.toFixed(4)]);
+        $2.append($$anchor3, tr);
       });
-      $.reset(tbody);
-      $.reset(table);
-      $.template_effect(($0) => {
-        $.set_class(table, 1, $0);
-        $.set_text(text_4, $.get(tableCaption));
-      }, [() => $.clsx(dataTableClass(dataTableVisibility()))]);
-      $.append($$anchor2, table);
+      $2.reset(tbody);
+      $2.reset(table);
+      $2.template_effect(($0) => {
+        $2.set_class(table, 1, $0);
+        $2.set_text(text_4, $2.get(tableCaption));
+      }, [() => $2.clsx(dataTableClass(dataTableVisibility()))]);
+      $2.append($$anchor2, table);
     };
-    $.if(node_10, ($$render) => {
-      if ($.get(hasDataTable))
+    $2.if(node_10, ($$render) => {
+      if ($2.get(hasDataTable))
         $$render(consequent_8);
     });
   }
-  $.reset(figure);
-  $.bind_this(figure, ($$value) => $.set(rootElement, $$value), () => $.get(rootElement));
-  $.template_effect(() => {
-    $.set_attribute(div, "data-cinder-loading", loading() || undefined);
-    styles = $.set_style(div, "", styles, { height: `${height() ?? ""}px` });
-    $.set_attribute(svg, "viewBox", `0 0 ${$.get(measuredWidth)} ${height()}`);
-    $.set_attribute(svg, "aria-hidden", loading() || $.get(isEmpty) ? "true" : undefined);
-    $.set_attribute(svg, "aria-labelledby", !loading() && !$.get(isEmpty) ? `${$.get(rootId)}-svg-title` : undefined);
+  $2.reset(figure);
+  $2.attach(figure, () => observeResize);
+  $2.template_effect(() => {
+    $2.set_attribute(div, "data-cinder-loading", loading() || undefined);
+    styles = $2.set_style(div, "", styles, { height: `${height() ?? ""}px` });
+    $2.set_attribute(svg, "viewBox", `0 0 ${$2.get(measuredWidth)} ${height()}`);
+    $2.set_attribute(svg, "aria-hidden", loading() || $2.get(isEmpty) ? "true" : undefined);
+    $2.set_attribute(svg, "aria-labelledby", !loading() && !$2.get(isEmpty) ? `${$2.get(rootId)}-svg-title` : undefined);
   });
-  $.append($$anchor, figure);
-  $.pop();
+  $2.append($$anchor, figure);
+  $2.pop();
 }
 
 // src/components/waveform/index.ts
@@ -1042,4 +1063,4 @@ export {
   Waveform
 };
 
-//# debugId=8709EABEF26A4D1064756E2164756E21
+//# debugId=21FC66B5112EC03D64756E2164756E21

package/dist/editor/attach.d.ts

@@ -19,8 +19,8 @@ import type { EditorAttachmentOptions } from './types.js';
  *   const editorAttachment = createEditorAttachment({
  *     getInitialValue: () => markdown,
  *     getReadonly: () => readonly,
- *     onReady: (state) => { editorState = state; },
- *     onChange: (md) => { markdown = md; },
+ *     onready: (state) => { editorState = state; },
+ *     onchange: (md) => { markdown = md; },
  *   });
  * </script>
  *

package/dist/editor/attach.js

@@ -20,8 +20,8 @@ import { DEFAULT_DEBOUNCE_MS } from './types.js';
  *   const editorAttachment = createEditorAttachment({
  *     getInitialValue: () => markdown,
  *     getReadonly: () => readonly,
- *     onReady: (state) => { editorState = state; },
- *     onChange: (md) => { markdown = md; },
+ *     onready: (state) => { editorState = state; },
+ *     onchange: (md) => { markdown = md; },
  *   });
  * </script>
  *
@@ -29,7 +29,7 @@ import { DEFAULT_DEBOUNCE_MS } from './types.js';
  * ```
  */
 export function createEditorAttachment(options) {
-    const { getInitialValue, getReadonly, getAriaLabel, onReady, onChange, onSelectionChange, onLinkShortcut, onCommentShortcut, debounceMs = DEFAULT_DEBOUNCE_MS, getPlugins, getPlaceholderCompletion, getPlaceholderDecoration, } = options;
+    const { getInitialValue, getReadonly, getAriaLabel, onready, onchange, onselectionchange, onlinkshortcut, oncommentshortcut, debounceMs = DEFAULT_DEBOUNCE_MS, getPlugins, getPlaceholderCompletion, getPlaceholderDecoration, } = options;
     return (element) => {
         let editorState = null;
         let destroyed = false;
@@ -48,19 +48,13 @@ export function createEditorAttachment(options) {
             ariaLabel,
             changeDebounceMs: debounceMs,
             plugins,
+            ...(onchange && { onchange }),
+            ...(onselectionchange && { onselectionchange }),
+            ...(onlinkshortcut && { onlinkshortcut }),
+            ...(oncommentshortcut && { oncommentshortcut }),
+            ...(placeholderCompletion && { placeholderCompletion }),
+            ...(placeholderDecoration && { placeholderDecoration }),
         };
-        if (onChange)
-            editorConfiguration.onChange = onChange;
-        if (onSelectionChange)
-            editorConfiguration.onSelectionChange = onSelectionChange;
-        if (onLinkShortcut)
-            editorConfiguration.onLinkShortcut = onLinkShortcut;
-        if (onCommentShortcut)
-            editorConfiguration.onCommentShortcut = onCommentShortcut;
-        if (placeholderCompletion)
-            editorConfiguration.placeholderCompletion = placeholderCompletion;
-        if (placeholderDecoration)
-            editorConfiguration.placeholderDecoration = placeholderDecoration;
         // Initialize editor asynchronously
         void (async () => {
             try {
@@ -71,7 +65,7 @@ export function createEditorAttachment(options) {
                     return;
                 }
                 editorState = state;
-                onReady?.(state);
+                onready?.(state);
             }
             catch (error) {
                 // If we were unmounted mid-init, swallow the error to avoid unhandled rejections

package/dist/editor/editor.js

@@ -35,7 +35,7 @@ export async function createEditor(container, config = {}) {
         import('./template-invalid-decoration-plugin.js'),
     ]);
     await preloadCommandRuntime();
-    const { initialContent = '', readonly = false, ariaLabel, changeDebounceMs = DEFAULT_DEBOUNCE_MS, onChange, onSelectionChange, onLinkShortcut, onCommentShortcut, plugins = [], placeholderCompletion, placeholderDecoration, } = config;
+    const { initialContent = '', readonly = false, ariaLabel, changeDebounceMs = DEFAULT_DEBOUNCE_MS, onchange, onselectionchange, onlinkshortcut, oncommentshortcut, plugins = [], placeholderCompletion, placeholderDecoration, } = config;
     // Track if we're updating from external source to prevent loops
     let isExternalUpdate = false;
     // Track if editor is destroyed to prevent accessing context after cleanup
@@ -66,7 +66,7 @@ export async function createEditor(container, config = {}) {
             debounceTimeout = setTimeout(() => {
                 if (isDestroyed)
                     return; // Guard after debounce
-                onChange?.(markdown);
+                onchange?.(markdown);
             }, changeDebounceMs);
         });
         // Selection change tracking (for DEP-39 comment anchoring and toolbar state)
@@ -74,7 +74,7 @@ export async function createEditor(container, config = {}) {
         // 1. selectionUpdated - fires on selection-only changes (user clicks without editing)
         // 2. updated - fires on document changes (which also change the selection position)
         // Together, these ensure the toolbar always reflects the current cursor position.
-        if (onSelectionChange) {
+        if (onselectionchange) {
             const notifySelectionChange = (listenerContext) => {
                 // Skip if editor is destroyed
                 if (isDestroyed)
@@ -98,7 +98,7 @@ export async function createEditor(container, config = {}) {
                     to,
                     isCollapsed: from === to,
                 };
-                onSelectionChange(selection);
+                onselectionchange(selection);
             };
             // Listen for selection-only changes (clicking without editing)
             listenerManager.selectionUpdated(notifySelectionChange);
@@ -112,8 +112,8 @@ export async function createEditor(container, config = {}) {
         .use(clipboardPlugin)
         .use(history)
         .use(createEditorKeymap({
-        ...(onLinkShortcut ? { onLinkShortcut } : {}),
-        ...(onCommentShortcut ? { onCommentShortcut } : {}),
+        ...(onlinkshortcut ? { onlinkshortcut } : {}),
+        ...(oncommentshortcut ? { oncommentshortcut } : {}),
     })) // DEP-37/47: Keyboard shortcuts
         .use(listener)
         .use(placeholderPlugin);

package/dist/editor/keymap-plugin.d.ts

@@ -10,9 +10,9 @@ import type { MilkdownPlugin } from '@milkdown/ctx';
  */
 export interface EditorKeymapOptions {
     /** Called when Mod-k (link shortcut) is pressed */
-    onLinkShortcut?: () => void;
+    onlinkshortcut?: () => void;
     /** Called when Ctrl-Alt-c (comment shortcut) is pressed (DEP-47) */
-    onCommentShortcut?: () => void;
+    oncommentshortcut?: () => void;
 }
 /**
  * Create keyboard shortcuts plugin for the Milkdown editor.