@mdbase-dev/ui 0.1.0-beta.119 → 0.1.0-beta.121

package/dist/Dialog.d.ts

@@ -3,10 +3,11 @@ import { type JSX, type ReactNode } from "react";
  * A modal dialog on the native <dialog>: the browser keeps focus inside it and the page
  * behind it inert. Escape, the close button or a press on the backdrop closes it.
  */
-export declare function Dialog({ open, onClose, title, className, children }: {
+export declare function Dialog({ open, onClose, title, className, closeDisabled, children }: {
     readonly open: boolean;
     readonly onClose: () => void;
     readonly title: string;
     readonly className?: string | undefined;
+    readonly closeDisabled?: boolean;
     readonly children: ReactNode;
 }): JSX.Element;

package/dist/Dialog.js

@@ -4,8 +4,12 @@ import { useLayoutEffect, useRef } from "react";
  * A modal dialog on the native <dialog>: the browser keeps focus inside it and the page
  * behind it inert. Escape, the close button or a press on the backdrop closes it.
  */
-export function Dialog({ open, onClose, title, className, children }) {
+export function Dialog({ open, onClose, title, className, closeDisabled = false, children }) {
     const ref = useRef(null);
+    useLayoutEffect(() => {
+        const previous = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
+        return () => { ref.current?.close(); previous?.focus(); };
+    }, []);
     // A layout effect, so the dialog is open before fields inside it ask to be focused.
     useLayoutEffect(() => {
         const dialog = ref.current;
@@ -16,8 +20,13 @@ export function Dialog({ open, onClose, title, className, children }) {
         else if (!open && dialog.open)
             dialog.close();
     }, [open]);
-    return _jsx("dialog", { ref: ref, className: ["mdbase-dialog", className].filter(Boolean).join(" "), "aria-label": title, onClose: onClose, onMouseDown: (event) => {
-            if (event.target === event.currentTarget)
+    return _jsx("dialog", { ref: ref, className: ["mdbase-dialog", className].filter(Boolean).join(" "), "aria-label": title, onCancel: (event) => {
+            event.preventDefault();
+            if (!closeDisabled)
+                onClose();
+        }, onClose: () => { if (!closeDisabled)
+            onClose(); }, onMouseDown: (event) => {
+            if (!closeDisabled && event.target === event.currentTarget)
                 onClose();
-        }, children: open && _jsxs("div", { className: "mdbase-dialog-body", children: [_jsxs("header", { className: "mdbase-dialog-header", children: [_jsx("h2", { children: title }), _jsx("button", { type: "button", className: "mdbase-icon-button", onClick: onClose, "aria-label": "Close", children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }) })] }), children] }) });
+        }, children: open && _jsxs("div", { className: "mdbase-dialog-body", children: [_jsxs("header", { className: "mdbase-dialog-header", children: [_jsx("h2", { children: title }), _jsx("button", { type: "button", className: "mdbase-icon-button", disabled: closeDisabled, onClick: onClose, "aria-label": "Close", children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }) })] }), children] }) });
 }

package/dist/permission-selection.d.ts

@@ -0,0 +1,7 @@
+/** A permission review survives polling, but never silently rebases onto changed access. */
+export declare function usePermissionSelection(id: string, allowed: readonly string[]): {
+    selected: string[];
+    needsReview: boolean;
+    setSelected: (selected: string[] | ((current: string[]) => string[])) => void;
+    acknowledge: () => void;
+};

package/dist/permission-selection.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+/** A permission review survives polling, but never silently rebases onto changed access. */
+export function usePermissionSelection(id, allowed) {
+    const key = JSON.stringify([id, [...allowed].sort()]);
+    const [review, setReview] = useState(() => ({ key, selected: [...allowed], needsReview: false }));
+    const changedExternally = review.key !== key;
+    const needsReview = changedExternally && JSON.stringify([id, [...review.selected].sort()]) !== key;
+    useEffect(() => {
+        if (changedExternally)
+            setReview({ key, selected: [...allowed], needsReview });
+    }, [key, changedExternally, needsReview]);
+    return {
+        selected: changedExternally ? [...allowed] : review.selected,
+        needsReview: changedExternally ? needsReview : review.needsReview,
+        setSelected: (selected) => setReview((current) => ({
+            ...current,
+            selected: typeof selected === "function" ? selected(current.selected) : selected
+        })),
+        acknowledge: () => setReview((current) => ({ ...current, needsReview: false }))
+    };
+}

package/dist/text-diff.d.ts

@@ -0,0 +1,8 @@
+export type DiffKind = "same" | "local" | "remote" | "omitted";
+export interface DiffLine {
+    kind: DiffKind;
+    text: string;
+    localLine?: number;
+    remoteLine?: number;
+}
+export declare function compareLines(localText: string, remoteText: string): DiffLine[];

package/dist/text-diff.js

@@ -0,0 +1,89 @@
+const MAX_MATRIX_LINES = 240;
+const MAX_VISIBLE_CHANGES = 80;
+const CONTEXT_LINES = 3;
+export function compareLines(localText, remoteText) {
+    const local = localText.split("\n");
+    const remote = remoteText.split("\n");
+    const compared = local.length <= MAX_MATRIX_LINES && remote.length <= MAX_MATRIX_LINES
+        ? lcsDiff(local, remote)
+        : boundedDiff(local, remote);
+    return compactDiff(compared);
+}
+function lcsDiff(local, remote) {
+    const lengths = Array.from({ length: local.length + 1 }, () => new Uint16Array(remote.length + 1));
+    for (let localIndex = local.length - 1; localIndex >= 0; localIndex -= 1) {
+        for (let remoteIndex = remote.length - 1; remoteIndex >= 0; remoteIndex -= 1) {
+            lengths[localIndex][remoteIndex] = local[localIndex] === remote[remoteIndex]
+                ? lengths[localIndex + 1][remoteIndex + 1] + 1
+                : Math.max(lengths[localIndex + 1][remoteIndex], lengths[localIndex][remoteIndex + 1]);
+        }
+    }
+    const lines = [];
+    let localIndex = 0;
+    let remoteIndex = 0;
+    while (localIndex < local.length || remoteIndex < remote.length) {
+        if (localIndex < local.length && remoteIndex < remote.length && local[localIndex] === remote[remoteIndex]) {
+            lines.push({ kind: "same", text: local[localIndex], localLine: localIndex + 1, remoteLine: remoteIndex + 1 });
+            localIndex += 1;
+            remoteIndex += 1;
+        }
+        else if (remoteIndex >= remote.length || (localIndex < local.length && lengths[localIndex + 1][remoteIndex] >= lengths[localIndex][remoteIndex + 1])) {
+            lines.push({ kind: "local", text: local[localIndex], localLine: localIndex + 1 });
+            localIndex += 1;
+        }
+        else {
+            lines.push({ kind: "remote", text: remote[remoteIndex], remoteLine: remoteIndex + 1 });
+            remoteIndex += 1;
+        }
+    }
+    return lines;
+}
+function boundedDiff(local, remote) {
+    let prefix = 0;
+    while (prefix < local.length && prefix < remote.length && local[prefix] === remote[prefix])
+        prefix += 1;
+    let suffix = 0;
+    while (suffix < local.length - prefix
+        && suffix < remote.length - prefix
+        && local[local.length - suffix - 1] === remote[remote.length - suffix - 1])
+        suffix += 1;
+    return [
+        ...local.slice(0, prefix).map((text, index) => ({ kind: "same", text, localLine: index + 1, remoteLine: index + 1 })),
+        ...local.slice(prefix, local.length - suffix).map((text, index) => ({ kind: "local", text, localLine: prefix + index + 1 })),
+        ...remote.slice(prefix, remote.length - suffix).map((text, index) => ({ kind: "remote", text, remoteLine: prefix + index + 1 })),
+        ...local.slice(local.length - suffix).map((text, index) => ({
+            kind: "same",
+            text,
+            localLine: local.length - suffix + index + 1,
+            remoteLine: remote.length - suffix + index + 1
+        }))
+    ];
+}
+function compactDiff(lines) {
+    const changes = lines.reduce((count, line) => count + (line.kind === "same" ? 0 : 1), 0);
+    if (changes === 0)
+        return [];
+    const visible = [];
+    let shownChanges = 0;
+    for (let index = 0; index < lines.length; index += 1) {
+        const line = lines[index];
+        if (line.kind !== "same") {
+            if (shownChanges >= MAX_VISIBLE_CHANGES) {
+                visible.push({ kind: "omitted", text: `${changes - shownChanges} more changed lines` });
+                break;
+            }
+            visible.push(line);
+            shownChanges += 1;
+            continue;
+        }
+        const previousChange = lines.slice(Math.max(0, index - CONTEXT_LINES), index).some((candidate) => candidate.kind !== "same");
+        const nextChange = lines.slice(index + 1, index + CONTEXT_LINES + 1).some((candidate) => candidate.kind !== "same");
+        if (previousChange || nextChange) {
+            visible.push(line);
+        }
+        else if (visible.at(-1)?.kind !== "omitted") {
+            visible.push({ kind: "omitted", text: "Unchanged lines" });
+        }
+    }
+    return visible;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdbase-dev/ui",
-  "version": "0.1.0-beta.119",
+  "version": "0.1.0-beta.121",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -38,6 +38,10 @@
       "types": "./dist/Dialog.d.ts",
       "import": "./dist/Dialog.js"
     },
+    "./permission-selection": {
+      "types": "./dist/permission-selection.d.ts",
+      "import": "./dist/permission-selection.js"
+    },
     "./popover": {
       "types": "./dist/popover.d.ts",
       "import": "./dist/popover.js"
@@ -54,6 +58,10 @@
       "types": "./dist/Select.d.ts",
       "import": "./dist/Select.js"
     },
+    "./text-diff": {
+      "types": "./dist/text-diff.d.ts",
+      "import": "./dist/text-diff.js"
+    },
     "./theme": {
       "types": "./dist/theme.d.ts",
       "import": "./dist/theme.js"