@bendyline/squisq-editor-react 2.4.5 → 2.4.6

package/README.md

@@ -69,7 +69,14 @@ and block-at-a-time / timeline editing primitives (`useBlockNavigator`,
   (`versioningPrunePolicy`, default keep-last-50); a Version History panel
   appears in the toolbar.
 - **Recording** — with a `mediaProvider` wired, a record button appears in the
-  toolbar (`allowRecording`, default `true`).
+  toolbar (`allowRecording`, default `true`). The recorder's Advanced device
+  settings expando discovers microphones/cameras, shows only capture
+  constraints advertised by the browser, separates camera and screen
+  constraints for dual recordings, and exposes MediaRecorder codec, bitrate,
+  and keyframe hints. Preferred constraints use the closest available setting;
+  Required microphone/camera constraints fail when the selected input cannot
+  satisfy them (screen settings remain preferences, as required by
+  `getDisplayMedia`).
 - **Presentation mode** — every Use view can fill the Squisq control, open a
   synchronized audience window, or take over the entire screen. Slideshow/video
   playback, Page/Document scrolling, and the Narrate surface remain linked to

package/dist/{chunk-PEI5EBEN.js → chunk-4F7SN6WU.js}

@@ -1,6 +1,6 @@
 import {
   RecorderModal
-} from "./chunk-PKGBWNUQ.js";
+} from "./chunk-ZSQN6IO7.js";
 
 // src/recorder/RecorderButton.tsx
 import { useCallback, useState } from "react";

package/dist/{chunk-7OKWPWEQ.js → chunk-55DQFHK5.js}

@@ -6,7 +6,7 @@ import {
 import {
   markdownToTiptap,
   tiptapToMarkdown
-} from "./chunk-WLJ623UZ.js";
+} from "./chunk-K2WJYVS4.js";
 import {
   ImageEditor,
   ImageViewer,
@@ -15,13 +15,13 @@ import {
 import {
   RecorderPanel,
   useModalDialog
-} from "./chunk-PKGBWNUQ.js";
+} from "./chunk-ZSQN6IO7.js";
 import {
   Icon
 } from "./chunk-GS7QWYFT.js";
 import {
   TeleprompterView
-} from "./chunk-V6Z7GG55.js";
+} from "./chunk-IQFPX2CE.js";
 
 // src/fileKind.ts
 var EXT_TO_LANGUAGE = {
@@ -18602,6 +18602,28 @@ function parseSquisqMediaPayload(raw) {
   }
   return null;
 }
+function squisqMediaKind(mimeType) {
+  const normalized = mimeType.toLowerCase();
+  if (normalized.startsWith("image/")) return "image";
+  if (normalized.startsWith("video/")) return "video";
+  if (normalized.startsWith("audio/")) return "audio";
+  return "file";
+}
+function escapeHtmlAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function buildSquisqMediaReference(payload) {
+  switch (squisqMediaKind(payload.mimeType)) {
+    case "image":
+      return `![${payload.alt}](${payload.name})`;
+    case "video":
+      return `<video src="${escapeHtmlAttribute(payload.name)}" controls width="480"></video>`;
+    case "audio":
+      return `<audio src="${escapeHtmlAttribute(payload.name)}" controls></audio>`;
+    default:
+      return `[${payload.alt}](${payload.name})`;
+  }
+}
 
 // src/rawEditorIsolation.ts
 var markdownFenceMaskCache = /* @__PURE__ */ new WeakMap();
@@ -19003,13 +19025,13 @@ function RawEditor({
           const raw = dt.getData(SQUISQ_MEDIA_MIME);
           if (!raw) return;
           const payload = parseSquisqMediaPayload(raw);
-          if (!payload || !payload.mimeType.startsWith("image/")) return;
+          if (!payload) return;
           e2.preventDefault();
           e2.stopPropagation();
           const target = editor.getTargetAtClientPoint(e2.clientX, e2.clientY);
           const position = target?.position ?? editor.getPosition();
           if (!position) return;
-          const markdown = `![${payload.alt}](${payload.name})`;
+          const markdown = buildSquisqMediaReference(payload);
           editor.executeEdits("squisq-media-drop", [
             {
               range: new monaco.Range(
@@ -27681,17 +27703,26 @@ var TiptapVideo = Node3.create({
       startAt: {
         default: null,
         parseHTML: (el) => el.getAttribute("data-squisq-video-start-at"),
-        renderHTML: (attrs) => normalizeVideoPlacement(attrs.placement) !== "content" && !normalizeLockToBlock(attrs.lockToBlock) && attrs.startAt != null ? { "data-squisq-video-start-at": String(attrs.startAt) } : {}
+        renderHTML: (attrs) => {
+          const placement = normalizeVideoPlacement(attrs.placement);
+          return (placement === "content" || !normalizeLockToBlock(attrs.lockToBlock)) && attrs.startAt != null ? { "data-squisq-video-start-at": String(attrs.startAt) } : {};
+        }
       },
       clipStart: {
         default: null,
         parseHTML: (el) => el.getAttribute("data-squisq-video-clip-start"),
-        renderHTML: (attrs) => normalizeVideoPlacement(attrs.placement) !== "content" && !normalizeLockToBlock(attrs.lockToBlock) && attrs.clipStart != null ? { "data-squisq-video-clip-start": String(attrs.clipStart) } : {}
+        renderHTML: (attrs) => {
+          const placement = normalizeVideoPlacement(attrs.placement);
+          return (placement === "content" || !normalizeLockToBlock(attrs.lockToBlock)) && attrs.clipStart != null ? { "data-squisq-video-clip-start": String(attrs.clipStart) } : {};
+        }
       },
       clipEnd: {
         default: null,
         parseHTML: (el) => el.getAttribute("data-squisq-video-clip-end"),
-        renderHTML: (attrs) => normalizeVideoPlacement(attrs.placement) !== "content" && !normalizeLockToBlock(attrs.lockToBlock) && attrs.clipEnd != null ? { "data-squisq-video-clip-end": String(attrs.clipEnd) } : {}
+        renderHTML: (attrs) => {
+          const placement = normalizeVideoPlacement(attrs.placement);
+          return (placement === "content" || !normalizeLockToBlock(attrs.lockToBlock)) && attrs.clipEnd != null ? { "data-squisq-video-clip-end": String(attrs.clipEnd) } : {};
+        }
       },
       // The HTML5 `controls` attribute is boolean-presence; parse its
       // existence (even with an empty string value) as `true`, otherwise
@@ -27748,6 +27779,21 @@ var TiptapAudio = Node4.create({
         default: true,
         parseHTML: (el) => el.hasAttribute("controls"),
         renderHTML: (attrs) => attrs.controls ? { controls: "" } : {}
+      },
+      startAt: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-squisq-audio-start-at"),
+        renderHTML: (attrs) => attrs.startAt != null ? { "data-squisq-audio-start-at": String(attrs.startAt) } : {}
+      },
+      clipStart: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-squisq-audio-clip-start"),
+        renderHTML: (attrs) => attrs.clipStart != null ? { "data-squisq-audio-clip-start": String(attrs.clipStart) } : {}
+      },
+      clipEnd: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-squisq-audio-clip-end"),
+        renderHTML: (attrs) => attrs.clipEnd != null ? { "data-squisq-audio-clip-end": String(attrs.clipEnd) } : {}
       }
     };
   },
@@ -28145,8 +28191,8 @@ var LinkWithTitle = Link2.extend({
   }
 });
 var EMPTY_PROMPTS = [
-  "Start typing your content, or drop images on top of me...",
-  "Write anything -- paste markdown, drag in images, or just start typing...",
+  "Start typing your content, or drop files on top of me...",
+  "Write anything -- paste markdown, drag in media, or just start typing...",
   "Type away. Markdown syntax works too...",
   "Chapter 1 begins here...",
   "Once upon a time...",
@@ -28378,8 +28424,8 @@ function WysiwygEditor({
       },
       // When image files are dropped onto the editor, upload them via the
       // MediaProvider and insert <img> nodes referencing the relative paths.
-      // Also handles drags from the MediaBin, which reference existing
-      // entries via a custom MIME type and skip the upload step.
+      // Drags from the MediaBin can also insert existing image, video, audio,
+      // or generic-file references without uploading them again.
       // Falls through to default handling for non-image drops or when no
       // MediaProvider is available.
       handleDrop: (view, event, _slice, moved) => {
@@ -28389,11 +28435,10 @@ function WysiwygEditor({
         const squisqRaw = dt.getData(SQUISQ_MEDIA_MIME);
         if (squisqRaw) {
           const payload = parseSquisqMediaPayload(squisqRaw);
-          if (payload && payload.mimeType.startsWith("image/")) {
+          if (payload) {
             event.preventDefault();
             moveSelectionToDropPoint(view, event);
-            insertImageNode(view, payload.name, payload.alt);
-            return true;
+            return insertExistingMediaReference(view, payload);
           }
         }
         const imageFiles = filesFromDataTransfer(dt);
@@ -28720,6 +28765,30 @@ function insertImageNode(view, src, alt) {
   const tr = view.state.tr.replaceSelectionWith(node2);
   view.dispatch(tr);
 }
+function insertExistingMediaReference(view, payload) {
+  const kind = squisqMediaKind(payload.mimeType);
+  if (kind === "image") {
+    insertImageNode(view, payload.name, payload.alt);
+    return true;
+  }
+  const { state } = view;
+  if (kind === "video" || kind === "audio") {
+    const nodeType = state.schema.nodes[kind];
+    if (!nodeType) return false;
+    const attrs = kind === "video" ? { src: payload.name, controls: true, width: 480 } : { src: payload.name, controls: true };
+    const node3 = nodeType.create(attrs);
+    const { $from } = state.selection;
+    const pos = $from.depth >= 1 ? $from.after(1) : state.doc.content.size;
+    view.dispatch(state.tr.insert(pos, node3).scrollIntoView());
+    return true;
+  }
+  const linkType = state.schema.marks.link;
+  if (!linkType) return false;
+  const label = payload.alt || payload.name;
+  const node2 = state.schema.text(label, [linkType.create({ href: payload.name })]);
+  view.dispatch(state.tr.replaceSelectionWith(node2).scrollIntoView());
+  return true;
+}
 function moveSelectionToDropPoint(view, event) {
   const coords = view.posAtCoords({ left: event.clientX, top: event.clientY });
   if (!coords) return;
@@ -30659,53 +30728,56 @@ function setHtmlAttribute(openingTag, name, value) {
   if (attr.test(openingTag)) return openingTag.replace(attr, ` ${name}="${value}"`);
   return openingTag.replace(/\s*\/?>(?=$)/, (end) => ` ${name}="${value}"${end.trimStart()}`);
 }
-function setHtmlVideoClipInLine(original, patch) {
-  if (!/^\s*<video\b/i.test(original)) return null;
-  const opening = /<video\b[^>]*>/i.exec(original);
+function setHtmlMediaClipInLine(original, patch) {
+  const tagMatch = /^\s*<(video|audio)\b/i.exec(original);
+  if (!tagMatch) return null;
+  const tag = tagMatch[1].toLowerCase();
+  const opening = new RegExp(`<${tag}\\b[^>]*>`, "i").exec(original);
   if (!opening) return null;
   let next = opening[0];
+  const timingPrefix = `data-squisq-${tag}`;
   if (patch.startAt !== void 0) {
     next = setHtmlAttribute(
       next,
-      "data-squisq-video-start-at",
+      `${timingPrefix}-start-at`,
       patch.startAt == null ? null : formatSeconds(patch.startAt)
     );
   }
   if (patch.clipStart !== void 0) {
     next = setHtmlAttribute(
       next,
-      "data-squisq-video-clip-start",
+      `${timingPrefix}-clip-start`,
       patch.clipStart == null ? null : formatSeconds(patch.clipStart)
     );
   }
   if (patch.clipEnd !== void 0) {
     next = setHtmlAttribute(
       next,
-      "data-squisq-video-clip-end",
+      `${timingPrefix}-clip-end`,
       patch.clipEnd == null ? null : formatSeconds(patch.clipEnd)
     );
   }
-  if (patch.placement !== void 0) {
+  if (tag === "video" && patch.placement !== void 0) {
     next = setHtmlAttribute(
       next,
       "data-squisq-video-placement",
       patch.placement == null || patch.placement === "content" ? null : patch.placement
     );
   }
-  if (patch.lockToBlock !== void 0) {
+  if (tag === "video" && patch.lockToBlock !== void 0) {
     next = setHtmlAttribute(
       next,
       "data-squisq-video-lock-to-block",
       patch.lockToBlock == null || patch.lockToBlock ? null : "false"
     );
   }
-  if (patch.pipSize !== void 0) {
+  if (tag === "video" && patch.pipSize !== void 0) {
     next = setHtmlAttribute(next, "data-squisq-video-pip-size", patch.pipSize);
   }
-  if (patch.pipShape !== void 0) {
+  if (tag === "video" && patch.pipShape !== void 0) {
     next = setHtmlAttribute(next, "data-squisq-video-pip-shape", patch.pipShape);
   }
-  if (patch.pipPosition !== void 0) {
+  if (tag === "video" && patch.pipPosition !== void 0) {
     next = setHtmlAttribute(next, "data-squisq-video-pip-position", patch.pipPosition);
   }
   return `${original.slice(0, opening.index)}${next}${original.slice(opening.index + opening[0].length)}`;
@@ -30715,9 +30787,9 @@ function setMediaClipInSource(source, line, patch) {
   const idx = line - 1;
   if (idx < 0 || idx >= lines2.length) return null;
   const original = lines2[idx];
-  const htmlVideo = setHtmlVideoClipInLine(original, patch);
-  if (htmlVideo != null) {
-    lines2[idx] = htmlVideo;
+  const htmlMedia = setHtmlMediaClipInLine(original, patch);
+  if (htmlMedia != null) {
+    lines2[idx] = htmlMedia;
     return lines2.join("\n");
   }
   const m = matchTrailingTemplateAnnotation3(original);
@@ -30797,8 +30869,27 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
   if (fromIdx < 0 || fromIdx >= lines2.length) return null;
   const targetIdx0 = targetHeadingLine - 1;
   if (targetIdx0 < 0 || targetIdx0 >= lines2.length) return null;
-  const annotation = buildClipAnnotation(spec, Math.max(0, startAt));
-  if (headingIndexAbove(lines2, fromIdx) === targetIdx0) {
+  const normalizedStartAt = Math.max(0, startAt);
+  const sameBlock = headingIndexAbove(lines2, fromIdx) === targetIdx0;
+  if (/^\s*<(?:video|audio)\b/i.test(lines2[fromIdx])) {
+    const html = setHtmlMediaClipInLine(lines2[fromIdx], {
+      startAt: normalizedStartAt > 0 ? normalizedStartAt : null,
+      ...spec.clipStart !== void 0 ? { clipStart: spec.clipStart } : {},
+      ...spec.clipEnd !== void 0 ? { clipEnd: spec.clipEnd } : {}
+    });
+    if (html == null) return null;
+    if (sameBlock) {
+      lines2[fromIdx] = html;
+      return lines2.join("\n");
+    }
+    lines2.splice(fromIdx, 1);
+    let targetIdx2 = targetIdx0;
+    if (fromIdx < targetIdx2) targetIdx2 -= 1;
+    lines2.splice(targetIdx2 + 1, 0, "", html);
+    return lines2.join("\n");
+  }
+  const annotation = buildClipAnnotation(spec, normalizedStartAt);
+  if (sameBlock) {
     lines2[fromIdx] = annotation;
     return lines2.join("\n");
   }
@@ -30820,6 +30911,7 @@ import { flattenBlocks as flattenBlocks6, DEFAULT_THEME as DEFAULT_THEME6, getPi
 import { MediaClipLayer, MediaContext as MediaContext5 } from "@bendyline/squisq-react";
 
 // src/embeddedMedia.ts
+import { parseTimeSeconds as parseTimeSeconds2 } from "@bendyline/squisq/markdown";
 var VIDEO_EXT = /* @__PURE__ */ new Set(["webm", "mp4", "mov", "m4v", "ogv"]);
 var AUDIO_EXT = /* @__PURE__ */ new Set(["mp3", "wav", "ogg", "oga", "m4a", "aac", "flac", "opus"]);
 function mediaKindFromUrl(url) {
@@ -30829,6 +30921,11 @@ function mediaKindFromUrl(url) {
   if (AUDIO_EXT.has(ext)) return "audio";
   return null;
 }
+function mediaTimeAttribute(attributes, kind, name) {
+  const raw = attributes?.[`data-squisq-${kind}-${name}`];
+  if (raw == null) return void 0;
+  return parseTimeSeconds2(raw) ?? void 0;
+}
 function collectEmbeddedMedia(block) {
   const out = [];
   const visit = (node2, line) => {
@@ -30851,7 +30948,19 @@ function collectEmbeddedMedia(block) {
           }
         }
       }
-      if (src) out.push({ src, kind, sourceLine: here });
+      if (src) {
+        const startAt = mediaTimeAttribute(n.attributes, kind, "start-at");
+        const clipStart = mediaTimeAttribute(n.attributes, kind, "clip-start");
+        const clipEnd = mediaTimeAttribute(n.attributes, kind, "clip-end");
+        out.push({
+          src,
+          kind,
+          sourceLine: here,
+          ...startAt != null ? { startAt } : {},
+          ...clipStart != null ? { clipStart } : {},
+          ...clipEnd != null ? { clipEnd } : {}
+        });
+      }
     }
     if (Array.isArray(n.children)) n.children.forEach((c) => visit(c, here));
     if (Array.isArray(n.htmlChildren)) n.htmlChildren.forEach((c) => visit(c, here));
@@ -30859,18 +30968,30 @@ function collectEmbeddedMedia(block) {
   (block.contents ?? []).forEach((node2) => visit(node2, void 0));
   return out;
 }
+function resolveEmbeddedMediaTiming(block, media) {
+  const startAt = Math.max(0, media.startAt ?? 0);
+  const sourceIn = Math.max(0, media.clipStart ?? 0);
+  const absoluteStart = block.startTime + startAt;
+  const blockEnd = block.startTime + block.duration;
+  const authoredLength = media.clipEnd == null ? null : Math.max(0, media.clipEnd - sourceIn);
+  const absoluteEnd = authoredLength == null ? blockEnd : Math.min(blockEnd, absoluteStart + authoredLength);
+  return {
+    absoluteStart,
+    absoluteEnd: Math.max(absoluteStart, absoluteEnd),
+    sourceIn
+  };
+}
 function collectEmbeddedMediaSchedule(doc) {
   const schedule = [];
   const visit = (blocks) => {
     for (const block of blocks) {
       collectEmbeddedMedia(block).forEach((media, index2) => {
+        const timing = resolveEmbeddedMediaTiming(block, media);
         schedule.push({
           id: `embedded:${block.id}:${index2}`,
           kind: media.kind,
           src: media.src,
-          absoluteStart: block.startTime,
-          absoluteEnd: block.startTime + block.duration,
-          sourceIn: 0,
+          ...timing,
           anchor: "block",
           blockId: block.id,
           ...media.sourceLine != null ? { sourceLine: media.sourceLine } : {}
@@ -31990,16 +32111,29 @@ function TimelineTrack({
         blocks.flatMap(
           (b, i) => collectEmbeddedMedia(b).map((m, j) => {
             const id = `embed:${b.id}:${j}`;
-            const absStart = b.startTime;
-            const length = b.duration;
+            const timing = resolveEmbeddedMediaTiming(b, m);
+            const absStart = timing.absoluteStart;
+            const length = timing.absoluteEnd - timing.absoluteStart;
+            const sourceIn = timing.sourceIn ?? 0;
+            const startAt = Math.max(0, m.startAt ?? 0);
+            const authoredLength = m.clipEnd == null ? null : Math.max(0, m.clipEnd - sourceIn);
+            const previewBlockRemainder = Math.max(0, previewWidth(i) / pxPerSecond - startAt);
+            const previewLength = authoredLength == null ? previewBlockRemainder : Math.min(authoredLength, previewBlockRemainder);
             let left = previewLeft(i);
             let clipWidth = previewWidth(i);
+            left += startAt * pxPerSecond;
+            clipWidth = Math.max(previewLength * pxPerSecond, 4);
             if (drag?.targetId === id && drag.kind === "embed-move") {
               left = drag.preview * pxPerSecond;
             } else if (drag?.targetId === id && drag.kind === "embed-right") {
               clipWidth = Math.max(drag.preview * pxPerSecond, 4);
             }
-            const spec = { kind: m.kind, src: m.src };
+            const spec = {
+              kind: m.kind,
+              src: m.src,
+              ...m.clipStart != null ? { clipStart: m.clipStart } : {},
+              ...m.clipEnd != null ? { clipEnd: m.clipEnd } : {}
+            };
             return /* @__PURE__ */ jsx64(
               "div",
               {
@@ -32020,7 +32154,7 @@ function TimelineTrack({
                       (newAbsStart) => {
                         placeEmbeddedClip(
                           m.sourceLine,
-                          { ...spec, clipEnd: length },
+                          { ...spec, clipEnd: sourceIn + length },
                           newAbsStart
                         );
                       },
@@ -32031,7 +32165,7 @@ function TimelineTrack({
                         TimelineVideoFilmstrip,
                         {
                           src: m.src,
-                          sourceStart: 0,
+                          sourceStart: sourceIn,
                           sourceLength: length,
                           width: clipWidth
                         }
@@ -32067,7 +32201,11 @@ function TimelineTrack({
                         {
                           className: "squisq-timeline-edge squisq-timeline-edge--right",
                           onPointerDown: (e2) => beginDrag(e2, "embed-right", id, length, (len) => {
-                            placeEmbeddedClip(m.sourceLine, { ...spec, clipEnd: len }, absStart);
+                            placeEmbeddedClip(
+                              m.sourceLine,
+                              { ...spec, clipEnd: sourceIn + len },
+                              absStart
+                            );
                           })
                         }
                       )
@@ -34406,18 +34544,16 @@ function MediaBin({
           entries.map((entry) => {
             const thumb = thumbUrls[entry.name];
             const basename = basenameForPath(entry.name);
-            const isImage = isImageMime(entry.mimeType);
             const altText = basename.replace(/\.[^.]+$/, "").replace(/[-_]/g, " ");
             const isUnused = !!usedMediaPaths && !usedMediaPaths.has(entry.name);
             const handleDragStart = (e2) => {
-              if (!isImage) return;
-              const payload = JSON.stringify({
+              const payload = {
                 name: entry.name,
                 mimeType: entry.mimeType,
                 alt: altText
-              });
-              e2.dataTransfer.setData(SQUISQ_MEDIA_MIME, payload);
-              e2.dataTransfer.setData("text/plain", `![${altText}](${entry.name})`);
+              };
+              e2.dataTransfer.setData(SQUISQ_MEDIA_MIME, JSON.stringify(payload));
+              e2.dataTransfer.setData("text/plain", buildSquisqMediaReference(payload));
               e2.dataTransfer.effectAllowed = "copy";
             };
             return /* @__PURE__ */ jsxs58(
@@ -34427,7 +34563,7 @@ function MediaBin({
                 title: `${entry.name}
 ${entry.mimeType}
 ${formatSize(entry.size)}`,
-                draggable: isImage,
+                draggable: true,
                 tabIndex: 0,
                 onContextMenu: (e2) => {
                   e2.preventDefault();

package/dist/{chunk-V6Z7GG55.js → chunk-IQFPX2CE.js}

@@ -1,7 +1,7 @@
 import {
   NarrationStage,
   useNarrationStage
-} from "./chunk-PDCKJCOS.js";
+} from "./chunk-OWOKKZAU.js";
 
 // src/teleprompter/TeleprompterView.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-WLJ623UZ.js → chunk-K2WJYVS4.js}

@@ -728,9 +728,10 @@ function serializeMediaTag(tag, attrs) {
   const pipSize = tag === "video" ? /\bdata-squisq-video-pip-size="([^"]*)"/i.exec(attrs)?.[1] : void 0;
   const pipShape = tag === "video" ? /\bdata-squisq-video-pip-shape="([^"]*)"/i.exec(attrs)?.[1] : void 0;
   const pipPosition = tag === "video" ? /\bdata-squisq-video-pip-position="([^"]*)"/i.exec(attrs)?.[1] : void 0;
-  const startAt = tag === "video" ? /\bdata-squisq-video-start-at="([^"]*)"/i.exec(attrs)?.[1] : void 0;
-  const clipStart = tag === "video" ? /\bdata-squisq-video-clip-start="([^"]*)"/i.exec(attrs)?.[1] : void 0;
-  const clipEnd = tag === "video" ? /\bdata-squisq-video-clip-end="([^"]*)"/i.exec(attrs)?.[1] : void 0;
+  const timingPrefix = `data-squisq-${tag}`;
+  const startAt = new RegExp(`\\b${timingPrefix}-start-at="([^"]*)"`, "i").exec(attrs)?.[1];
+  const clipStart = new RegExp(`\\b${timingPrefix}-clip-start="([^"]*)"`, "i").exec(attrs)?.[1];
+  const clipEnd = new RegExp(`\\b${timingPrefix}-clip-end="([^"]*)"`, "i").exec(attrs)?.[1];
   const parts = [`<${tag} src="${src}"`];
   if (controls) parts.push(" controls");
   if (width) parts.push(` width="${width}"`);
@@ -749,9 +750,9 @@ function serializeMediaTag(tag, attrs) {
   if (pipPosition === "top-left" || pipPosition === "top-right" || pipPosition === "bottom-left" || pipPosition === "bottom-right") {
     parts.push(` data-squisq-video-pip-position="${pipPosition}"`);
   }
-  if (startAt != null) parts.push(` data-squisq-video-start-at="${startAt}"`);
-  if (clipStart != null) parts.push(` data-squisq-video-clip-start="${clipStart}"`);
-  if (clipEnd != null) parts.push(` data-squisq-video-clip-end="${clipEnd}"`);
+  if (startAt != null) parts.push(` ${timingPrefix}-start-at="${startAt}"`);
+  if (clipStart != null) parts.push(` ${timingPrefix}-clip-start="${clipStart}"`);
+  if (clipEnd != null) parts.push(` ${timingPrefix}-clip-end="${clipEnd}"`);
   parts.push(`></${tag}>`);
   return parts.join("");
 }

package/dist/{chunk-PDCKJCOS.js → chunk-OWOKKZAU.js}

@@ -175,13 +175,18 @@ async function registerPcmWorklet(ctx) {
 
 // src/teleprompter/useMicAnalysis.ts
 import { useCallback, useEffect as useEffect2, useRef, useState } from "react";
-function useMicAnalysis() {
+function useMicAnalysis(constraints) {
   const [status, setStatus] = useState("idle");
   const [error, setError] = useState(null);
   const [devices, setDevices] = useState([]);
   const [stream, setStream] = useState(null);
   const [sampleRate, setSampleRate] = useState(null);
   const graphRef = useRef(null);
+  const constraintsRef = useRef(constraints);
+  constraintsRef.current = constraints;
+  const constraintKey = JSON.stringify(constraints ?? {});
+  const previousConstraintKeyRef = useRef(constraintKey);
+  const currentDeviceIdRef = useRef(null);
   const listenersRef = useRef(/* @__PURE__ */ new Set());
   const generationRef = useRef(0);
   const refreshDevices = useCallback(async () => {
@@ -226,13 +231,16 @@ function useMicAnalysis() {
   const start = useCallback(
     async (deviceId) => {
       const generation = ++generationRef.current;
+      currentDeviceIdRef.current = deviceId;
       teardown();
       setStatus("starting");
       setError(null);
       try {
-        const micStream = await requestMicStream(
-          deviceId ? { deviceId: { exact: deviceId } } : void 0
-        );
+        const baseConstraints = constraintsRef.current;
+        const micStream = await requestMicStream({
+          ...baseConstraints ?? {},
+          ...deviceId ? { deviceId: { exact: deviceId } } : {}
+        });
         if (generation !== generationRef.current) {
           for (const track of micStream.getTracks()) track.stop();
           return null;
@@ -311,6 +319,11 @@ function useMicAnalysis() {
       listenersRef.current.delete(listener);
     };
   }, []);
+  useEffect2(() => {
+    if (previousConstraintKeyRef.current === constraintKey) return;
+    previousConstraintKeyRef.current = constraintKey;
+    if (graphRef.current) void start(currentDeviceIdRef.current);
+  }, [constraintKey, start]);
   useEffect2(() => {
     return () => {
       generationRef.current += 1;
@@ -449,7 +462,7 @@ function useTeleprompter(opts) {
   const [transport, setTransport] = useState2("stopped");
   const [countdownRemaining, setCountdownRemaining] = useState2(null);
   const [view, setView] = useState2({ wordPos: 0, micLevel: 0, voiceActive: false });
-  const mic = useMicAnalysis();
+  const mic = useMicAnalysis(opts.micConstraints);
   const scriptRef = useRef2(script);
   const prefsRef = useRef2(prefs);
   const transportRef = useRef2(transport);
@@ -1429,20 +1442,36 @@ function useNarrationRecorder(options) {
       const micStream = opts.mic.status === "live" && opts.mic.stream ? opts.mic.stream : await opts.mic.start(opts.getMicDeviceId());
       if (superseded()) throw new StartAborted();
       if (!micStream) throw opts.mic.error ?? new Error("Microphone unavailable");
-      const audioFormat = resolveFormat("audio");
+      const audioFormat = resolveFormat("audio", opts.audioRecorderOptions?.mimeType);
+      const audioRecorderOptions = {
+        ...opts.audioRecorderOptions
+      };
+      if (audioFormat.mimeType) audioRecorderOptions.mimeType = audioFormat.mimeType;
+      else delete audioRecorderOptions.mimeType;
       audioRecorder = new MediaRecorder(
         micStream,
-        audioFormat.mimeType ? { mimeType: audioFormat.mimeType } : void 0
+        Object.keys(audioRecorderOptions).length > 0 ? audioRecorderOptions : void 0
       );
       let cameraMime = null;
       let cameraExt = null;
       if (withCamera) {
-        camera = await requestCameraStream({ video: true, audio: false });
+        camera = await requestCameraStream({
+          video: opts.cameraConstraints ?? true,
+          audio: false
+        });
         if (superseded()) throw new StartAborted();
-        const videoFormat = resolveFormat("video");
+        const videoFormat = resolveFormat("video", opts.cameraRecorderOptions?.mimeType);
+        const cameraRecorderOptions = {
+          ...opts.cameraRecorderOptions
+        };
+        if (cameraRecorderOptions.videoKeyFrameIntervalDuration !== void 0 && cameraRecorderOptions.videoKeyFrameIntervalCount !== void 0) {
+          delete cameraRecorderOptions.videoKeyFrameIntervalCount;
+        }
+        if (videoFormat.mimeType) cameraRecorderOptions.mimeType = videoFormat.mimeType;
+        else delete cameraRecorderOptions.mimeType;
         cameraRecorder = new MediaRecorder(
           camera,
-          videoFormat.mimeType ? { mimeType: videoFormat.mimeType } : void 0
+          Object.keys(cameraRecorderOptions).length > 0 ? cameraRecorderOptions : void 0
         );
         cameraMime = videoFormat.mimeType;
         cameraExt = videoFormat.extension;
@@ -1775,7 +1804,7 @@ import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMem
 import { wordIndexAtTime } from "@bendyline/squisq/narration";
 function useNarrationStage(opts) {
   const { doc, recording = null, getAudioBasename } = opts;
-  const controller = useTeleprompter({ doc });
+  const controller = useTeleprompter({ doc, micConstraints: opts.micConstraints });
   const float = useFloatingWindow(TELEPROMPTER_CSS);
   const controllerRef = useRef5(controller);
   controllerRef.current = controller;
@@ -1785,6 +1814,9 @@ function useNarrationStage(opts) {
     getScript: () => controllerRef.current.script,
     getWordPos: () => controllerRef.current.wordPos,
     getMicDeviceId: () => controllerRef.current.prefs.micDeviceId,
+    cameraConstraints: opts.cameraConstraints,
+    audioRecorderOptions: opts.audioRecorderOptions,
+    cameraRecorderOptions: opts.cameraRecorderOptions,
     onRecordingStart: () => controllerRef.current.play(),
     onRecordingStop: () => controllerRef.current.pause()
   });

package/dist/{chunk-WDX6UDL5.js → chunk-YPRX32GY.js}

@@ -1,7 +1,7 @@
 import {
   markdownToTiptap,
   tiptapToMarkdown
-} from "./chunk-WLJ623UZ.js";
+} from "./chunk-K2WJYVS4.js";
 
 // src/jsonEditor/JsonEditorContext.tsx
 import { createContext, useContext, useEffect, useMemo } from "react";