@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/server/components/tree-item/index.js

@@ -60,8 +60,8 @@ function Tree_item($$renderer, $$props) {
       draggable = false,
       branch = false,
       loadChildren,
-      onLoadError,
-      onRename,
+      onloaderror,
+      onrename,
       selectionScopeIds,
       row,
       children,
@@ -98,16 +98,19 @@ function Tree_item($$renderer, $$props) {
     const isExpanded = $2.derived(() => context.expandedIds.includes(id));
     const isSelected = $2.derived(() => context.selectedIds.includes(id));
     const isFocused = $2.derived(() => context.focusedId === id);
+    const positionInSet = $2.derived(() => context.positionInSet(id));
+    const setSize = $2.derived(() => context.setSize(id));
     const isFiltering = $2.derived(() => context.filtering);
     const isVisible = $2.derived(() => !isFiltering() || context.isVisible(id) || !context.hasRegisteredItems && (isBranch() || context.matchesFilter(label, id)));
     const hasVisibleDescendant = $2.derived(() => context.hasVisibleDescendant(id));
     const renderedExpanded = $2.derived(() => isExpanded() || isFiltering() && hasVisibleDescendant());
+    const filterForcedOpen = $2.derived(() => isBranch() && isFiltering() && hasVisibleDescendant() && !isExpanded());
     const shouldProbeFilterChildren = $2.derived(() => isBranch() && isFiltering() && !isExpanded() && probedFilterValue !== context.filterValue);
     const shouldRenderChildren = $2.derived(() => isBranch() && (isExpanded() || hasVisibleDescendant() || shouldProbeFilterChildren()));
     const checkboxSelectionActive = $2.derived(() => context.checkboxSelectionActive());
     const selectionState = $2.derived(() => context.selectionStateFor(id));
     const labelSegments = $2.derived(() => splitLabelForHighlight(label, context.filterValue));
-    const canRename = $2.derived(() => !disabled && onRename != null);
+    const canRename = $2.derived(() => !disabled && onrename != null);
     const editingLabel = $2.derived(() => `Editing: ${label}`);
     const dragController = $2.derived(() => context.dragController);
     const canDrag = $2.derived(() => draggable && !disabled && dragController() != null);
@@ -177,8 +180,8 @@ function Tree_item($$renderer, $$props) {
         busy = false;
         loaded = false;
         context.setExpanded(id, false);
-        if (onLoadError) {
-          onLoadError(error, id);
+        if (onloaderror) {
+          onloaderror(error, id);
         } else {
           console.error("[cinder-tree] loadChildren failed for item", id, error);
         }
@@ -250,7 +253,7 @@ function Tree_item($$renderer, $$props) {
       editing = true;
       announceRename(`Editing ${label}. Press Enter to confirm, Escape to cancel.`);
     }
-    function finishEdit(afterFocus) {
+    function finishEdit(afterFocus = undefined) {
       editing = false;
       renameError = "";
       renamePending = false;
@@ -264,7 +267,7 @@ function Tree_item($$renderer, $$props) {
       announceRename("Rename cancelled.");
       finishEdit();
     }
-    async function commitEdit(afterFocus) {
+    async function commitEdit(afterFocus = undefined) {
       if (!editing || renamePending)
         return false;
       if (editValue.trim().length === 0) {
@@ -273,14 +276,14 @@ function Tree_item($$renderer, $$props) {
         queueMicrotask(() => renameInputElement?.focus());
         return false;
       }
-      if (!onRename) {
+      if (!onrename) {
         finishEdit(afterFocus);
         return true;
       }
       renamePending = true;
       renameError = "";
       try {
-        await onRename(id, editValue);
+        await onrename(id, editValue);
         announceRename(`${editValue}, renamed.`);
         finishEdit(afterFocus);
         return true;
@@ -533,12 +536,22 @@ function Tree_item($$renderer, $$props) {
       outerElement?.focus();
       if (event.detail > 1)
         return;
-      if (!disabled && !checkboxSelectionActive())
+      if (disabled) {
+        if (isBranch())
+          context.setExpanded(id, !isExpanded());
+        return;
+      }
+      if (!checkboxSelectionActive())
         context.toggleSelected(id, event);
       if (isBranch() && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
         context.setExpanded(id, !isExpanded());
       }
     }
+    function handleDisclosureClick(event) {
+      event.stopPropagation();
+      outerElement?.focus();
+      context.setExpanded(id, !isExpanded());
+    }
     function handleLabelDoubleClick(event) {
       event.preventDefault();
       event.stopPropagation();
@@ -603,7 +616,15 @@ function Tree_item($$renderer, $$props) {
       }
       $$renderer3.push(`<!--]-->`);
     }
-    $$renderer2.push(`<div role="treeitem"${$2.attr("id", treeItemElementId)}${$2.attr_class($2.clsx(classNames("cinder-tree-item", className)))}${$2.attr("aria-label", editing ? editingLabel() : undefined)}${$2.attr("aria-labelledby", editing ? undefined : `${treeItemElementId}-label`)}${$2.attr("aria-level", level)}${$2.attr("aria-expanded", isBranch() ? renderedExpanded() : undefined)}${$2.attr("aria-selected", context.selectionMode === "none" || checkboxSelectionActive() ? undefined : isSelected())}${$2.attr("aria-checked", ariaChecked())}${$2.attr("aria-busy", busy || undefined)}${$2.attr("aria-disabled", disabled || undefined)}${$2.attr("aria-describedby", canDrag() ? context.dragInstructionsId : undefined)}${$2.attr("tabindex", isFocused() ? 0 : -1)}${$2.attr("data-cinder-expanded", isBranch() && isExpanded() ? "" : undefined)}${$2.attr("data-cinder-selected", isSelected() ? "" : undefined)}${$2.attr("data-cinder-disabled", disabled ? "" : undefined)}${$2.attr("data-cinder-busy", busy ? "" : undefined)}${$2.attr("data-cinder-hidden", !isVisible() ? "" : undefined)}${$2.attr("data-cinder-editing", editing ? "" : undefined)}${$2.attr("data-cinder-tree-item-id", id)}${$2.attr("data-cinder-dragging", isDraggingItem() ? "" : undefined)}${$2.attr("data-cinder-drop-target", isDropBefore() ? "before" : isDropAfter() ? "after" : undefined)}${$2.attr("data-cinder-drop-into", isDropInto() ? "" : undefined)}><span${$2.attr("id", `${treeItemElementId}-label`)} class="cinder-sr-only">${$2.escape(label)}</span> <div class="cinder-tree-item__row">`);
+    $$renderer2.push(`<div role="treeitem"${$2.attr("id", treeItemElementId)}${$2.attr_class($2.clsx(classNames("cinder-tree-item", className)))}${$2.attr("aria-label", editing ? editingLabel() : undefined)}${$2.attr("aria-labelledby", editing ? undefined : `${treeItemElementId}-label`)}${$2.attr("aria-level", level)}${$2.attr("aria-expanded", isBranch() ? renderedExpanded() : undefined)}${$2.attr("aria-posinset", positionInSet())}${$2.attr("aria-setsize", setSize())}${$2.attr("aria-selected", context.selectionMode === "none" || checkboxSelectionActive() ? undefined : isSelected())}${$2.attr("aria-checked", ariaChecked())}${$2.attr("aria-busy", busy || undefined)}${$2.attr("aria-disabled", disabled || undefined)}${$2.attr("aria-describedby", canDrag() ? context.dragInstructionsId : undefined)}${$2.attr("tabindex", isFocused() ? 0 : -1)}${$2.attr("data-cinder-expanded", isBranch() && isExpanded() ? "" : undefined)}${$2.attr("data-cinder-selected", isSelected() ? "" : undefined)}${$2.attr("data-cinder-disabled", disabled ? "" : undefined)}${$2.attr("data-cinder-busy", busy ? "" : undefined)}${$2.attr("data-cinder-hidden", !isVisible() ? "" : undefined)}${$2.attr("data-cinder-editing", editing ? "" : undefined)}${$2.attr("data-cinder-tree-item-id", id)}${$2.attr("data-cinder-dragging", isDraggingItem() ? "" : undefined)}${$2.attr("data-cinder-drop-target", isDropBefore() ? "before" : isDropAfter() ? "after" : undefined)}${$2.attr("data-cinder-drop-into", isDropInto() ? "" : undefined)}><span${$2.attr("id", `${treeItemElementId}-label`)} class="cinder-sr-only">${$2.escape(label)}</span> <div class="cinder-tree-item__row">`);
+    if (isBranch() && !filterForcedOpen()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<button type="button" class="cinder-tree-item__disclosure"${$2.attr("aria-label", `${renderedExpanded() ? "Collapse" : "Expand"} ${label}`)}${$2.attr("aria-expanded", renderedExpanded())} tabindex="-1"><span aria-hidden="true"></span></button>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<span class="cinder-tree-item__disclosure-spacer" aria-hidden="true"></span>`);
+    }
+    $$renderer2.push(`<!--]--> `);
     if (canDrag()) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<button type="button" class="cinder-tree-item__drag-handle"${$2.attr("aria-label", dragHandleLabel())}${$2.attr("aria-pressed", isDraggingItem())}${$2.attr("aria-describedby", context.dragInstructionsId)} tabindex="-1"><span aria-hidden="true">::</span></button>`);
@@ -656,7 +677,7 @@ function Tree_item($$renderer, $$props) {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]--> `);
-    if (onRename) {
+    if (onrename) {
       $$renderer2.push("<!--[0-->");
       _visually_hidden_live_region($$renderer2, {
         message: renameAnnouncement,
@@ -677,4 +698,4 @@ export {
   Tree_item as TreeItem
 };
 
-//# debugId=633B3CC4EB2A5A0B64756E2164756E21
+//# debugId=DA209AD5C2ED31C864756E2164756E21

package/dist/server/components/tree-item/tree-item.schema.js

@@ -21,7 +21,7 @@ var schema = {
     },
     draggable: {
       type: "boolean",
-      description: "Render a reorder handle when the parent Tree provides onReorder."
+      description: "Render a reorder handle when the parent Tree provides onreorder."
     },
     branch: {
       type: "boolean",
@@ -51,15 +51,15 @@ var schema = {
       {
         name: "loadChildren",
         reason: "function-or-snippet",
-        description: "Async loader called the first time the item is expanded. Implies `branch=true`.\nThe loader mutates consumer-owned reactive state; it returns no data.\nErrors are forwarded to `onLoadError` if provided, otherwise logged via\n`console.error` with a `[cinder-tree]` prefix."
+        description: "Async loader called the first time the item is expanded. Implies `branch=true`.\nThe loader mutates consumer-owned reactive state; it returns no data.\nErrors are forwarded to `onloaderror` if provided, otherwise logged via\n`console.error` with a `[cinder-tree]` prefix."
       },
       {
-        name: "onLoadError",
+        name: "onloaderror",
         reason: "function-or-snippet",
         description: "Called when `loadChildren` rejects with a non-abort error."
       },
       {
-        name: "onRename",
+        name: "onrename",
         reason: "function-or-snippet",
         description: "Called when inline label editing commits a new label."
       },
@@ -76,4 +76,4 @@ export {
   tree_item_schema_default as default
 };
 
-//# debugId=8FB28746CD6B4B1E64756E2164756E21
+//# debugId=0259D3781633429564756E2164756E21

package/dist/server/components/virtual-list/index.js

@@ -3,7 +3,7 @@ var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/virtual-list/virtual-list.svelte
-import * as $ from "svelte/internal/server";
+import * as $2 from "svelte/internal/server";
 import { tick } from "svelte";
 
 // src/utilities/class-names.ts
@@ -11,6 +11,25 @@ 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/server";
+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;
+    };
+    return () => {
+      disconnectObserver();
+    };
+  };
+}
+
 // src/utilities/fixed-virtual-window.ts
 function resolveVirtualItemHeight(itemHeight, fallback = 1) {
   if (Number.isFinite(itemHeight) && itemHeight > 0)
@@ -107,10 +126,10 @@ function Virtual_list($$renderer, $$props) {
     let previousItemCount = 0;
     let hasObservedItemCount = false;
     let shouldStickAfterAppend = false;
-    const resolvedItemHeight = $.derived(() => resolveVirtualItemHeight(itemHeight));
-    const resolvedOverscan = $.derived(() => resolveVirtualOverscan(overscan));
-    const viewportHeight = $.derived(() => measuredViewportHeight || estimateViewportHeight(height, resolvedItemHeight()));
-    const virtualWindow = $.derived(() => getFixedVirtualWindow({
+    const resolvedItemHeight = $2.derived(() => resolveVirtualItemHeight(itemHeight));
+    const resolvedOverscan = $2.derived(() => resolveVirtualOverscan(overscan));
+    const viewportHeight = $2.derived(() => measuredViewportHeight || estimateViewportHeight(height, resolvedItemHeight()));
+    const virtualWindow = $2.derived(() => getFixedVirtualWindow({
       itemCount: items.length,
       itemHeight: resolvedItemHeight(),
       scrollOffset,
@@ -121,10 +140,14 @@ function Virtual_list($$renderer, $$props) {
         return item === undefined ? index : getKey?.(item, index) ?? index;
       }
     }));
-    const renderedItems = $.derived(() => virtualWindow().items.flatMap((virtualItem) => {
+    const renderedItems = $2.derived(() => virtualWindow().items.flatMap((virtualItem) => {
       const item = items[virtualItem.index];
       return item === undefined ? [] : [{ ...virtualItem, item }];
     }));
+    const observeResize = useResizeObserver(() => {
+      if (scrollElement)
+        syncViewport(scrollElement);
+    });
     function estimateViewportHeight(value, resolvedRowHeight) {
       return parsePixelLength(value) ?? resolvedRowHeight * 10;
     }
@@ -145,20 +168,20 @@ function Virtual_list($$renderer, $$props) {
     function isAtBottom(element2, totalSize, height2) {
       return element2.scrollTop >= maxScrollOffset(totalSize, height2) - 1;
     }
-    $.element($$renderer2, "div", () => {
-      $$renderer2.push(`${$.attributes({
+    $2.element($$renderer2, "div", () => {
+      $$renderer2.push(`${$2.attributes({
         ...rest,
-        class: $.clsx(classNames("cinder-virtual-list", className)),
+        class: $2.clsx(classNames("cinder-virtual-list", className)),
         role,
         tabindex,
         "data-cinder-stick-to-bottom": stickToBottom ? "true" : undefined
       }, undefined, undefined, { "--cinder-virtual-list-height": height })}`);
     }, () => {
-      $$renderer2.push(`<div class="cinder-virtual-list__spacer"${$.attr("aria-hidden", items.length === 0 ? "true" : undefined)}${$.attr_style("", { height: `${virtualWindow().totalSize}px` })}><div class="cinder-virtual-list__window"${$.attr_style("", { top: `${virtualWindow().leadingSize}px` })}><!--[-->`);
-      const each_array = $.ensure_array_like(renderedItems());
+      $$renderer2.push(`<div class="cinder-virtual-list__spacer"${$2.attr("aria-hidden", items.length === 0 ? "true" : undefined)}${$2.attr_style("", { height: `${virtualWindow().totalSize}px` })}><div class="cinder-virtual-list__window"${$2.attr_style("", { top: `${virtualWindow().leadingSize}px` })}><!--[-->`);
+      const each_array = $2.ensure_array_like(renderedItems());
       for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
         let virtualItem = each_array[$$index];
-        $$renderer2.push(`<div class="cinder-virtual-list__row"${$.attr("role", role === "list" ? "listitem" : undefined)}${$.attr("data-cinder-virtual-index", virtualItem.index)}${$.attr_style("", { height: `${virtualItem.size}px` })}>`);
+        $$renderer2.push(`<div class="cinder-virtual-list__row"${$2.attr("role", role === "list" ? "listitem" : undefined)}${$2.attr("data-cinder-virtual-index", virtualItem.index)}${$2.attr_style("", { height: `${virtualItem.size}px` })}>`);
         row($$renderer2, virtualItem.item, {
           index: virtualItem.index,
           key: virtualItem.key,
@@ -183,4 +206,4 @@ export {
   Virtual_list as VirtualList
 };
 
-//# debugId=C8EBAF819D2675C264756E2164756E21
+//# debugId=0B058C296E868F7864756E2164756E21

package/dist/server/components/waveform/index.js

@@ -3,7 +3,7 @@ var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/waveform/waveform.svelte
-import * as $ from "svelte/internal/server";
+import * as $2 from "svelte/internal/server";
 
 // src/_internal/chart/chart-utilities.ts
 var chartPalette = [
@@ -662,10 +662,29 @@ 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/server";
+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;
+    };
+    return () => {
+      disconnectObserver();
+    };
+  };
+}
+
 // src/components/waveform/waveform.svelte
 function Waveform($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    const generatedId = $.props_id($$renderer2);
+    const generatedId = $2.props_id($$renderer2);
     let {
       label,
       description,
@@ -683,17 +702,21 @@ function Waveform($$renderer, $$props) {
       $$events,
       ...rest
     } = $$props;
-    const rootId = $.derived(() => id ?? generatedId);
-    const descriptionId = $.derived(() => description ? `${rootId()}-description` : undefined);
+    const rootId = $2.derived(() => id ?? generatedId);
+    const descriptionId = $2.derived(() => description ? `${rootId()}-description` : undefined);
     let measuredWidth = 400;
-    let rootElement = undefined;
-    const isEmpty = $.derived(() => data.length === 0);
-    const midY = $.derived(() => height / 2);
+    const observeResize = useResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry && entry.contentRect.width > 0)
+        measuredWidth = entry.contentRect.width;
+    });
+    const isEmpty = $2.derived(() => 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 = data.length;
       if (length <= MAX_RENDER_POINTS)
         return data.map(clampSample);
@@ -725,7 +748,7 @@ function Waveform($$renderer, $$props) {
       }
       return out;
     });
-    const waveformPath = $.derived(() => {
+    const waveformPath = $2.derived(() => {
       const samples = renderSamples();
       if (samples.length === 0)
         return "";
@@ -743,7 +766,7 @@ function Waveform($$renderer, $$props) {
       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 waveformBars = $2.derived(() => {
       const samples = renderSamples();
       if (samples.length === 0)
         return [];
@@ -760,10 +783,10 @@ function Waveform($$renderer, $$props) {
         };
       });
     });
-    const hasDataTable = $.derived(() => dataTableVisibility !== "hidden");
+    const hasDataTable = $2.derived(() => dataTableVisibility !== "hidden");
     const TABLE_SAMPLE_LIMIT = 20;
-    const isTableSampled = $.derived(() => data.length > TABLE_SAMPLE_LIMIT);
-    const tableSamples = $.derived(() => {
+    const isTableSampled = $2.derived(() => data.length > TABLE_SAMPLE_LIMIT);
+    const tableSamples = $2.derived(() => {
       if (data.length === 0)
         return [];
       const step = Math.max(1, Math.ceil(data.length / TABLE_SAMPLE_LIMIT));
@@ -773,27 +796,27 @@ function Waveform($$renderer, $$props) {
       }
       return out;
     });
-    const tableCaption = $.derived(() => {
+    const tableCaption = $2.derived(() => {
       const base = dataTableCaption ?? label;
       if (!isTableSampled())
         return base;
       return `${base} (${tableSamples().length} of ${data.length} samples shown)`;
     });
-    $$renderer2.push(`<figure${$.attributes({
+    $$renderer2.push(`<figure${$2.attributes({
       ...rest,
       id: rootId(),
-      class: $.clsx(classNames("cinder-waveform", customClassName)),
+      class: $2.clsx(classNames("cinder-waveform", customClassName)),
       "aria-label": label,
       "aria-describedby": descriptionId(),
       "data-cinder-render-mode": renderMode
     })}>`);
     if (description) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<p${$.attr("id", descriptionId())} class="cinder-waveform__description">${$.escape(description)}</p>`);
+      $$renderer2.push(`<p${$2.attr("id", descriptionId())} class="cinder-waveform__description">${$2.escape(description)}</p>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
-    $$renderer2.push(`<!--]--> <div class="cinder-waveform__viewport"${$.attr("data-cinder-loading", loading || undefined)}${$.attr_style("", { height: `${$.stringify(height)}px` })}>`);
+    $$renderer2.push(`<!--]--> <div class="cinder-waveform__viewport"${$2.attr("data-cinder-loading", loading || undefined)}${$2.attr_style("", { height: `${$2.stringify(height)}px` })}>`);
     if (loading) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<div class="cinder-waveform__state">`);
@@ -821,29 +844,29 @@ function Waveform($$renderer, $$props) {
     } else {
       $$renderer2.push("<!--[-1-->");
     }
-    $$renderer2.push(`<!--]--> <svg role="img"${$.attr("viewBox", `0 0 ${measuredWidth} ${height}`)}${$.attr("aria-hidden", loading || isEmpty() ? "true" : undefined)}${$.attr("aria-labelledby", !loading && !isEmpty() ? `${rootId()}-svg-title` : undefined)}>`);
+    $$renderer2.push(`<!--]--> <svg role="img"${$2.attr("viewBox", `0 0 ${measuredWidth} ${height}`)}${$2.attr("aria-hidden", loading || isEmpty() ? "true" : undefined)}${$2.attr("aria-labelledby", !loading && !isEmpty() ? `${rootId()}-svg-title` : undefined)}>`);
     if (!loading && !isEmpty()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<title${$.attr("id", `${$.stringify(rootId())}-svg-title`)}>${$.escape(label)}</title>`);
+      $$renderer2.push(`<title${$2.attr("id", `${$2.stringify(rootId())}-svg-title`)}>${$2.escape(label)}</title>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]-->`);
     if (!loading && !isEmpty()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<line class="cinder-waveform__baseline" x1="0"${$.attr("x2", measuredWidth)}${$.attr("y1", midY())}${$.attr("y2", midY())} aria-hidden="true"></line>`);
+      $$renderer2.push(`<line class="cinder-waveform__baseline" x1="0"${$2.attr("x2", measuredWidth)}${$2.attr("y1", midY())}${$2.attr("y2", midY())} aria-hidden="true"></line>`);
       if (renderMode === "bars") {
         $$renderer2.push("<!--[0-->");
         $$renderer2.push(`<!--[-->`);
-        const each_array = $.ensure_array_like(waveformBars());
+        const each_array = $2.ensure_array_like(waveformBars());
         for (let index = 0, $$length = each_array.length;index < $$length; index++) {
           let bar = each_array[index];
-          $$renderer2.push(`<rect class="cinder-waveform__bar"${$.attr("x", bar.x)}${$.attr("y", bar.y)}${$.attr("width", bar.width)}${$.attr("height", bar.height)} aria-hidden="true"></rect>`);
+          $$renderer2.push(`<rect class="cinder-waveform__bar"${$2.attr("x", bar.x)}${$2.attr("y", bar.y)}${$2.attr("width", bar.width)}${$2.attr("height", bar.height)} aria-hidden="true"></rect>`);
         }
         $$renderer2.push(`<!--]-->`);
       } else {
         $$renderer2.push("<!--[-1-->");
-        $$renderer2.push(`<path class="cinder-waveform__path"${$.attr("d", waveformPath())} aria-hidden="true"></path>`);
+        $$renderer2.push(`<path class="cinder-waveform__path"${$2.attr("d", waveformPath())} aria-hidden="true"></path>`);
       }
       $$renderer2.push(`<!--]-->`);
     } else {
@@ -852,11 +875,11 @@ function Waveform($$renderer, $$props) {
     $$renderer2.push(`<!--]--></svg></div> `);
     if (hasDataTable()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<table${$.attr_class($.clsx(dataTableClass(dataTableVisibility)))}><caption>${$.escape(tableCaption())}</caption><thead><tr><th scope="col">Sample index</th><th scope="col">Amplitude</th></tr></thead><tbody><!--[-->`);
-      const each_array_1 = $.ensure_array_like(tableSamples());
+      $$renderer2.push(`<table${$2.attr_class($2.clsx(dataTableClass(dataTableVisibility)))}><caption>${$2.escape(tableCaption())}</caption><thead><tr><th scope="col">Sample index</th><th scope="col">Amplitude</th></tr></thead><tbody><!--[-->`);
+      const each_array_1 = $2.ensure_array_like(tableSamples());
       for (let $$index_1 = 0, $$length = each_array_1.length;$$index_1 < $$length; $$index_1++) {
         let sample = each_array_1[$$index_1];
-        $$renderer2.push(`<tr><td>${$.escape(sample.index)}</td><td>${$.escape(sample.value.toFixed(4))}</td></tr>`);
+        $$renderer2.push(`<tr><td>${$2.escape(sample.index)}</td><td>${$2.escape(sample.value.toFixed(4))}</td></tr>`);
       }
       $$renderer2.push(`<!--]--></tbody></table>`);
     } else {
@@ -873,4 +896,4 @@ export {
   Waveform
 };
 
-//# debugId=74F3074682D8023964756E2164756E21
+//# debugId=2F388A7D0EEDE30B64756E2164756E21

package/dist/server/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/server/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/server/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/server/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.

package/dist/server/editor/keymap-plugin.js

@@ -68,15 +68,15 @@ export function createEditorKeymap(options = {}) {
                 'Mod-Shift-z': () => call(runtime.redoCommand.key),
                 'Mod-y': () => call(runtime.redoCommand.key),
             };
-            if (options.onLinkShortcut) {
+            if (options.onlinkshortcut) {
                 bindings['Mod-k'] = () => {
-                    options.onLinkShortcut?.();
+                    options.onlinkshortcut?.();
                     return true;
                 };
             }
-            if (options.onCommentShortcut) {
+            if (options.oncommentshortcut) {
                 bindings['Ctrl-Alt-c'] = () => {
-                    options.onCommentShortcut?.();
+                    options.oncommentshortcut?.();
                     return true;
                 };
             }