@lapismd/mira 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @lapismd/mira
 
+## 0.0.2
+
+### Patch Changes
+
+- [`dd83f89`](https://github.com/lapismd/mira-mde/commit/dd83f89e474e9ae0e4fdd8c7cdfc9825e62b4a0d) Thanks [@stevejuma](https://github.com/stevejuma)! - Refresh unfocused frontmatter text controls after an external controller update, including after prior user editing, and preserve Live Preview disclosure across CodeMirror widget remounts.
+
+- [`9e5d84f`](https://github.com/lapismd/mira-mde/commit/9e5d84f8148cd2d0a6008b31f04d943e1c0d9477) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep ordinary parentheses visible in live preview, wrap editable table cells without overflow, and let source table rows scroll without scrollbar chrome.
+
+- [`99fdddc`](https://github.com/lapismd/mira-mde/commit/99fdddcbe134eec42abfdfe4de951cc4a48f3aab) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep Find and Replace input and placeholder typography compact across consumer base styles with a public size token.
+
+- [`a9ea809`](https://github.com/lapismd/mira-mde/commit/a9ea8098a843452d7c4e122ab7ed190c48c84dcd) Thanks [@stevejuma](https://github.com/stevejuma)! - Present Find and Replace with pill-shaped fields, a search glyph, inline options, borderless actions, and no panel divider.
+
+- [`990662d`](https://github.com/lapismd/mira-mde/commit/990662d2f7fc9fbdfa1cff6ee9c643aa2f9478b0) Thanks [@stevejuma](https://github.com/stevejuma)! - Preserve an internal-link trigger's inherited Mira theme and color mode when its hover preview portals to the owner document.
+
+- [`bfc57f4`](https://github.com/lapismd/mira-mde/commit/bfc57f4fe8084e20644a34a7bb6c5b96719fb442) Thanks [@stevejuma](https://github.com/stevejuma)! - Avoid repeating an image embed's visible figure caption through its nested image alternative text.
+
+- [`937ecd0`](https://github.com/lapismd/mira-mde/commit/937ecd04fe49b5c83b64df7d3dcd31257e2e57ff) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep live-preview continuation indentation stable while CodeMirror rebuilds
+  line decorations after focus and selection changes.
+
+- [`5165834`](https://github.com/lapismd/mira-mde/commit/5165834d3dd32a21f9d9703cd282511341c1ecf0) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep contextual block-toolbar portals out of document layout and remove them
+  with their owning CodeMirror view.
+
+- [`f83553a`](https://github.com/lapismd/mira-mde/commit/f83553a5fbf6f3fc9dfb6b1057ddac82b6a1b2c8) Thanks [@stevejuma](https://github.com/stevejuma)! - Align editable Markdown hover cards around a minimal padded presentation and persistence-safe outside-click dismissal.
+
+- [`74963d2`](https://github.com/lapismd/mira-mde/commit/74963d237be51561a6d5282ec6f48e90736a1dd1) Thanks [@stevejuma](https://github.com/stevejuma)! - Preserve the active pipe-table column when Enter moves to the next row.
+
+- [`7d2dd4b`](https://github.com/lapismd/mira-mde/commit/7d2dd4bdb2f9d78a760589f1e11450e4de5eb501) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep the Find and Replace panel wrapper transparent so it does not paint a separate surface behind the editor controls.
+
+- [`f573127`](https://github.com/lapismd/mira-mde/commit/f573127bb1d89c7da313eb897ba23ceef3b2236a) Thanks [@stevejuma](https://github.com/stevejuma)! - Allow consumers to compose Mira's complete portable authoring stack without its duplicate base CodeMirror setup.
+
 ## 0.0.1
 
 ### Patch Changes

package/dist/internal/codemirror/rich/index.test.js

@@ -11,6 +11,69 @@ describe("createRichEditorExtensions", () => {
     it("can be disabled", () => {
         expect(createRichEditorExtensions({ enabled: false })).toEqual([]);
     });
+    it("preserves a local frontmatter disclosure across preview widget remounts", async () => {
+        const parent = document.createElement("div");
+        document.body.append(parent);
+        const source = "---\ntitle: Portable\n---\n\n# Note";
+        const view = new EditorView({
+            doc: source,
+            selection: { anchor: source.length },
+            extensions: [
+                createMarkdownCodeMirrorExtensions(),
+                createRichEditorExtensions({
+                    livePreview: true,
+                    frontmatterOpen: false,
+                }),
+            ],
+            parent,
+        });
+        await nextFrame();
+        await nextFrame();
+        const expand = parent.querySelector('.mira-rich-widget--frontmatter button[aria-label="Expand properties"]');
+        expect(expand).not.toBeNull();
+        expand?.click();
+        await nextFrame();
+        expect(parent.querySelector(".md-frontmatter__content")).not.toBeNull();
+        view.dispatch({ selection: { anchor: 2 } });
+        await nextFrame();
+        expect(parent.querySelector(".mira-rich-widget--frontmatter")).toBeNull();
+        view.dispatch({ selection: { anchor: source.length } });
+        await nextFrame();
+        await nextFrame();
+        expect(parent.querySelector('.mira-rich-widget--frontmatter button[aria-label="Collapse properties"]')).not.toBeNull();
+        expect(parent.querySelector(".md-frontmatter__content")).not.toBeNull();
+        view.destroy();
+        parent.remove();
+    });
+    it("keeps an interactive frontmatter menu mounted while its trigger receives focus", async () => {
+        const parent = document.createElement("div");
+        document.body.append(parent);
+        const source = "---\ntitle: Portable\n---\n\n# Note";
+        const view = new EditorView({
+            doc: source,
+            selection: { anchor: source.length },
+            extensions: [
+                createMarkdownCodeMirrorExtensions(),
+                createRichEditorExtensions({
+                    livePreview: true,
+                    frontmatterOpen: true,
+                }),
+            ],
+            parent,
+        });
+        await nextFrame();
+        await nextFrame();
+        const trigger = parent.querySelector('button[aria-label="Property options for title"]');
+        expect(trigger).not.toBeNull();
+        trigger?.focus();
+        trigger?.click();
+        await nextFrame();
+        expect(trigger?.isConnected).toBe(true);
+        expect(trigger?.getAttribute("aria-expanded")).toBe("true");
+        expect(document.body.querySelector('[role="menu"][aria-label="Property options for title"]')).not.toBeNull();
+        view.destroy();
+        parent.remove();
+    });
     it("renders and reveals a seeded divider comment and rule as one widget", async () => {
         const parent = document.createElement("div");
         document.body.append(parent);

package/dist/internal/codemirror/rich/widgets/preview-widgets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-widgets.d.ts","sourceRoot":"","sources":["../../../../../src/internal/codemirror/rich/widgets/preview-widgets.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAc1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAUtD,qBAAa,kBAAmB,SAAQ,UAAU;IAE9C,OAAO,CAAC,QAAQ,CAAC,MAAM;gBAAN,MAAM,EAAE;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,0BAA0B,CAAC,EAAE,MAAM,EAAE,CAAC;QACtC,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,qBAAqB,CAAC;KAChC;IAKM,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,OAAO;IAgB/C,IAAa,eAAe,IAAI,MAAM,CAErC;IAEQ,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,WAAW;IA6H7C,OAAO,CAAC,sBAAsB;IAU9B,OAAO,CAAC,2BAA2B;IAiBnC,OAAO,CAAC,0BAA0B;IAwDzB,OAAO,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI;IAQ/B,WAAW,IAAI,OAAO;CAGhC;AAED,qBAAa,oBAAqB,SAAQ,UAAU;IAEhD,OAAO,CAAC,QAAQ,CAAC,MAAM;gBAAN,MAAM,EAAE;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,qBAAqB,CAAC;KAChC;IAKM,EAAE,CAAC,KAAK,EAAE,oBAAoB,GAAG,OAAO;IAQxC,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,WAAW;IA+CpC,OAAO,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI;IAQ/B,WAAW,IAAI,OAAO;CAGhC;AAED,qBAAa,gBAAiB,SAAQ,UAAU;IAE5C,OAAO,CAAC,QAAQ,CAAC,MAAM;gBAAN,MAAM,EAAE;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,qBAAqB,CAAC;KAChC;IAKM,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO;IAQpC,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,WAAW;IAwCpC,OAAO,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI;IAQ/B,WAAW,IAAI,OAAO;CAGhC"}
+{"version":3,"file":"preview-widgets.d.ts","sourceRoot":"","sources":["../../../../../src/internal/codemirror/rich/widgets/preview-widgets.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAc1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAetD,qBAAa,kBAAmB,SAAQ,UAAU;IAE9C,OAAO,CAAC,QAAQ,CAAC,MAAM;gBAAN,MAAM,EAAE;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,0BAA0B,CAAC,EAAE,MAAM,EAAE,CAAC;QACtC,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,qBAAqB,CAAC;KAChC;IAKM,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,OAAO;IAgB/C,IAAa,eAAe,IAAI,MAAM,CAErC;IAEQ,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,WAAW;IAoK7C,OAAO,CAAC,sBAAsB;IAU9B,OAAO,CAAC,2BAA2B;IAiBnC,OAAO,CAAC,0BAA0B;IAwDzB,OAAO,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI;IAU/B,WAAW,IAAI,OAAO;CAGhC;AAED,qBAAa,oBAAqB,SAAQ,UAAU;IAEhD,OAAO,CAAC,QAAQ,CAAC,MAAM;gBAAN,MAAM,EAAE;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,qBAAqB,CAAC;KAChC;IAKM,EAAE,CAAC,KAAK,EAAE,oBAAoB,GAAG,OAAO;IAQxC,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,WAAW;IA+CpC,OAAO,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI;IAQ/B,WAAW,IAAI,OAAO;CAGhC;AAED,qBAAa,gBAAiB,SAAQ,UAAU;IAE5C,OAAO,CAAC,QAAQ,CAAC,MAAM;gBAAN,MAAM,EAAE;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,qBAAqB,CAAC;KAChC;IAKM,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO;IAQpC,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,WAAW;IAwCpC,OAAO,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI;IAQ/B,WAAW,IAAI,OAAO;CAGhC"}

package/dist/internal/codemirror/rich/widgets/preview-widgets.js

@@ -8,6 +8,8 @@ import { shouldActivateEditablePreview, PREVIEW_INTERACTIVE_SELECTOR, } from "..
 import { estimateMarkdownBlockHeight } from "../utils/height-estimates";
 import { createSourceToggleButton, selectWidgetSource } from "./source-toggle";
 const previewWidgetMounts = new WeakMap();
+const previewWidgetObservers = new WeakMap();
+const frontmatterDisclosureByView = new WeakMap();
 export class BlockPreviewWidget extends WidgetType {
     config;
     constructor(config) {
@@ -65,6 +67,20 @@ export class BlockPreviewWidget extends WidgetType {
             selectWidgetSource(view, this.config.from, this.config.to);
         }));
         let pendingFrontmatterValue = "";
+        const configuredFrontmatterOpen = this.config.options.frontmatterOpen ?? true;
+        const retainedFrontmatterDisclosure = this.config.nodeName === "Frontmatter"
+            ? frontmatterDisclosureByView.get(view)
+            : undefined;
+        const frontmatterOpen = retainedFrontmatterDisclosure?.configuredOpen ===
+            configuredFrontmatterOpen
+            ? retainedFrontmatterDisclosure.open
+            : configuredFrontmatterOpen;
+        if (this.config.nodeName === "Frontmatter") {
+            frontmatterDisclosureByView.set(view, {
+                configuredOpen: configuredFrontmatterOpen,
+                open: frontmatterOpen,
+            });
+        }
         const component = mount(MarkdownPreview, {
             target: container,
             props: {
@@ -75,7 +91,7 @@ export class BlockPreviewWidget extends WidgetType {
                 linkResolver: this.config.options.linkResolver,
                 assetResolver: this.config.options.assetResolver,
                 fileAdapter: this.config.options.fileAdapter,
-                frontmatterOpen: this.config.options.frontmatterOpen ?? true,
+                frontmatterOpen,
                 frontmatterConfig: this.config.options.frontmatterConfig,
                 onChange: (replacement, from, to) => {
                     const absoluteFrom = this.absoluteMarkdownOffset(from);
@@ -94,6 +110,28 @@ export class BlockPreviewWidget extends WidgetType {
             },
         });
         previewWidgetMounts.set(container, component);
+        if (this.config.nodeName === "Frontmatter") {
+            const retainDisclosure = () => {
+                const expanded = container
+                    .querySelector(".md-frontmatter__trigger")
+                    ?.getAttribute("aria-expanded");
+                if (expanded !== "true" && expanded !== "false")
+                    return;
+                frontmatterDisclosureByView.set(view, {
+                    configuredOpen: configuredFrontmatterOpen,
+                    open: expanded === "true",
+                });
+            };
+            retainDisclosure();
+            const observer = new MutationObserver(retainDisclosure);
+            observer.observe(container, {
+                attributes: true,
+                attributeFilter: ["aria-expanded"],
+                childList: true,
+                subtree: true,
+            });
+            previewWidgetObservers.set(container, observer);
+        }
         if (this.config.nodeName === "HorizontalRule") {
             container.addEventListener(MIRA_DOODLE_DIVIDER_CONTROL_EVENT, (event) => {
                 this.handleDoodleDividerControl(view, event);
@@ -182,6 +220,8 @@ export class BlockPreviewWidget extends WidgetType {
         view.scrollDOM.scrollLeft = scrollLeft;
     }
     destroy(dom) {
+        previewWidgetObservers.get(dom)?.disconnect();
+        previewWidgetObservers.delete(dom);
         const component = previewWidgetMounts.get(dom);
         if (component) {
             void unmount(component);

package/dist/preview/components/frontmatter-property-text-input.svelte

@@ -46,8 +46,12 @@
   });
 
   $effect(() => {
+    const nextValue = value;
     if (editorEl?.ownerDocument.activeElement !== editorEl) {
-      query = value;
+      query = nextValue;
+      if (editorEl && editorEl.textContent !== nextValue) {
+        editorEl.textContent = nextValue;
+      }
     }
   });
 

package/dist/preview/components/frontmatter-property-text-input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frontmatter-property-text-input.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/frontmatter-property-text-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAI7B,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAoLJ,QAAA,MAAM,4BAA4B,2CAAwC,CAAC;AAC3E,KAAK,4BAA4B,GAAG,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAAC;AACpF,eAAe,4BAA4B,CAAC"}
+{"version":3,"file":"frontmatter-property-text-input.svelte.d.ts","sourceRoot":"","sources":["../../../src/preview/components/frontmatter-property-text-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAI7B,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAwLJ,QAAA,MAAM,4BAA4B,2CAAwC,CAAC;AAC3E,KAAK,4BAA4B,GAAG,UAAU,CAAC,OAAO,4BAA4B,CAAC,CAAC;AACpF,eAAe,4BAA4B,CAAC"}

package/dist/preview/portable-surfaces.test.js

@@ -451,6 +451,37 @@ describe("portable preview surfaces", () => {
         expect(controller.propertyManager.properties(controller.getRecord())[0]?.kind).toBe("number");
         await unmount(component);
     });
+    it("refreshes an edited text property after focus leaves the control", async () => {
+        const target = document.createElement("div");
+        document.body.append(target);
+        const controller = new FrontmatterController({
+            record: { status: "ready" },
+        });
+        const component = mount(FrontmatterEditor, {
+            target,
+            props: {
+                controller,
+            },
+        });
+        await settle();
+        const status = target.querySelector('[role="combobox"][aria-label="status value"]');
+        expect(status?.textContent).toBe("ready");
+        status?.focus();
+        expect(document.activeElement).toBe(status);
+        if (status)
+            status.textContent = "local";
+        status?.dispatchEvent(new InputEvent("input", { bubbles: true }));
+        controller.syncRecord({ status: "planned" }, { commit: false });
+        await settle();
+        expect(status?.textContent).toBe("local");
+        status?.blur();
+        await settle();
+        controller.syncRecord({ status: "review" }, { commit: false });
+        await settle();
+        expect(status?.textContent).toBe("review");
+        await unmount(component);
+        target.remove();
+    });
     it("keeps read-only list callouts passive and makes editable markers selectable", async () => {
         const readOnlyTarget = document.createElement("div");
         const editableTarget = document.createElement("div");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lapismd/mira",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Composable Markdown editor, extension SDK, preview renderer, and UI for Mira.",
   "author": "Steve Juma <help@lapis.md>",
   "license": "AGPL-3.0-or-later",