@adecore/editor-react 0.31.12 → 0.32.0

package/dist/AnchoredPopup.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useLayoutEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { placePopup } from './popup-placement.js';
@@ -6,21 +6,75 @@ import { placePopup } from './popup-placement.js';
  * A card next to a character of the editor, portaled to the page: inside a scaled canvas node it would be
  * drawn at that scale and clipped by the node. Placed from the character's screen rectangle, so it holds at any zoom.
  */
-export function AnchoredPopup({ rect, className, overflow = 'scroll', children, placement, onPointerEnter, onPointerLeave }) {
-    const element = useRef(null);
-    // Every render, since the character moves when the editor scrolls and the card's own size follows its content.
-    useLayoutEffect(() => {
-        const popup = element.current;
-        if (popup === null) {
-            return;
-        }
-        popup.style.maxHeight = '';
-        const size = { width: popup.offsetWidth, height: popup.offsetHeight };
-        const placed = placePopup(rect, size, { width: window.innerWidth, height: window.innerHeight }, placement);
-        popup.style.left = `${Math.round(placed.left)}px`;
-        popup.style.top = `${Math.round(placed.top)}px`;
-        popup.style.maxHeight = `${Math.floor(placed.maxHeight)}px`;
-        popup.style.visibility = 'visible';
-    });
-    return createPortal(_jsx("div", { ref: element, className: `fixed top-0 left-0 z-(--z-popup) ${overflow === 'clip' ? 'overflow-hidden' : 'overflow-y-auto'} rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow) ${className ?? ''}`, style: { visibility: 'hidden' }, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: children }), document.body);
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+export function AnchoredPopup(t0) {
+  const $ = _c(9);
+  const {
+    rect,
+    className,
+    overflow: t1,
+    children,
+    placement,
+    onPointerEnter,
+    onPointerLeave
+  } = t0;
+  const overflow = t1 === undefined ? "scroll" : t1;
+  const element = useRef(null);
+  let t2;
+  if ($[0] !== placement || $[1] !== rect) {
+    t2 = () => {
+      const popup = element.current;
+      if (popup === null) {
+        return;
+      }
+      popup.style.maxHeight = "";
+      const size = {
+        width: popup.offsetWidth,
+        height: popup.offsetHeight
+      };
+      const placed = placePopup(rect, size, {
+        width: window.innerWidth,
+        height: window.innerHeight
+      }, placement);
+      popup.style.left = `${Math.round(placed.left)}px`;
+      popup.style.top = `${Math.round(placed.top)}px`;
+      popup.style.maxHeight = `${Math.floor(placed.maxHeight)}px`;
+      popup.style.visibility = "visible";
+    };
+    $[0] = placement;
+    $[1] = rect;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  useLayoutEffect(t2);
+  const t3 = `fixed top-0 left-0 z-(--z-popup) ${overflow === "clip" ? "overflow-hidden" : "overflow-y-auto"} rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow) ${className ?? ""}`;
+  let t4;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      visibility: "hidden"
+    };
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] !== children || $[5] !== onPointerEnter || $[6] !== onPointerLeave || $[7] !== t3) {
+    t5 = createPortal(/*#__PURE__*/_jsx("div", {
+      ref: element,
+      className: t3,
+      style: t4,
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave,
+      children: children
+    }), document.body);
+    $[4] = children;
+    $[5] = onPointerEnter;
+    $[6] = onPointerLeave;
+    $[7] = t3;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  return t5;
+}

package/dist/AttributionCard.js

@@ -1,5 +1,163 @@
+import { c as _c } from "react/compiler-runtime";
+import { AnchoredPopup } from "./AnchoredPopup.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnchoredPopup } from './AnchoredPopup.js';
-export function AttributionCard({ rect, title, subtitle, metadata, prompt, color, icon, actions, onHold }) {
-    return (_jsxs(AnchoredPopup, { rect: rect, className: "flex w-105 flex-col text-xs", onPointerEnter: () => onHold?.(true), onPointerLeave: () => onHold?.(false), children: [_jsxs("div", { className: "flex flex-col gap-2 px-3 pt-3 pb-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex shrink-0 items-center", style: { color: color?.startsWith('--') ? `var(${color})` : color }, children: icon ?? _jsx("span", { className: "size-2 rounded-full bg-current" }) }), _jsx("span", { className: "shrink-0 text-sm font-semibold text-text", children: title }), subtitle !== undefined && _jsx("span", { className: "min-w-0 truncate text-sm text-text-muted", children: subtitle })] }), metadata !== undefined && _jsx("div", { className: "text-text-muted", children: metadata }), prompt !== undefined && prompt !== '' && (_jsx("q", { className: "line-clamp-4 rounded-md bg-surface-hover px-2.5 py-2 text-sm leading-4.5 text-text select-text", children: prompt }))] }), actions !== undefined && _jsx("div", { className: "flex gap-1 border-t border-border px-1.5 py-1.25", children: actions })] }));
-}
+export function AttributionCard(t0) {
+  const $ = _c(34);
+  const {
+    rect,
+    title,
+    subtitle,
+    metadata,
+    prompt,
+    color,
+    icon,
+    actions,
+    onHold
+  } = t0;
+  let t1;
+  let t2;
+  if ($[0] !== onHold) {
+    t1 = () => onHold?.(true);
+    t2 = () => onHold?.(false);
+    $[0] = onHold;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  const t3 = color?.startsWith("--") ? `var(${color})` : color;
+  let t4;
+  if ($[3] !== t3) {
+    t4 = {
+      color: t3
+    };
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== icon) {
+    t5 = icon ?? /*#__PURE__*/_jsx("span", {
+      className: "size-2 rounded-full bg-current"
+    });
+    $[5] = icon;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== t4 || $[8] !== t5) {
+    t6 = /*#__PURE__*/_jsx("span", {
+      className: "flex shrink-0 items-center",
+      style: t4,
+      children: t5
+    });
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== title) {
+    t7 = /*#__PURE__*/_jsx("span", {
+      className: "shrink-0 text-sm font-semibold text-text",
+      children: title
+    });
+    $[10] = title;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] !== subtitle) {
+    t8 = subtitle !== undefined && /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 truncate text-sm text-text-muted",
+      children: subtitle
+    });
+    $[12] = subtitle;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  let t9;
+  if ($[14] !== t6 || $[15] !== t7 || $[16] !== t8) {
+    t9 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center gap-2",
+      children: [t6, t7, t8]
+    });
+    $[14] = t6;
+    $[15] = t7;
+    $[16] = t8;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  let t10;
+  if ($[18] !== metadata) {
+    t10 = metadata !== undefined && /*#__PURE__*/_jsx("div", {
+      className: "text-text-muted",
+      children: metadata
+    });
+    $[18] = metadata;
+    $[19] = t10;
+  } else {
+    t10 = $[19];
+  }
+  let t11;
+  if ($[20] !== prompt) {
+    t11 = prompt !== undefined && prompt !== "" && /*#__PURE__*/_jsx("q", {
+      className: "line-clamp-4 rounded-md bg-surface-hover px-2.5 py-2 text-sm leading-4.5 text-text select-text",
+      children: prompt
+    });
+    $[20] = prompt;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  let t12;
+  if ($[22] !== t10 || $[23] !== t11 || $[24] !== t9) {
+    t12 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-2 px-3 pt-3 pb-2.5",
+      children: [t9, t10, t11]
+    });
+    $[22] = t10;
+    $[23] = t11;
+    $[24] = t9;
+    $[25] = t12;
+  } else {
+    t12 = $[25];
+  }
+  let t13;
+  if ($[26] !== actions) {
+    t13 = actions !== undefined && /*#__PURE__*/_jsx("div", {
+      className: "flex gap-1 border-t border-border px-1.5 py-1.25",
+      children: actions
+    });
+    $[26] = actions;
+    $[27] = t13;
+  } else {
+    t13 = $[27];
+  }
+  let t14;
+  if ($[28] !== rect || $[29] !== t1 || $[30] !== t12 || $[31] !== t13 || $[32] !== t2) {
+    t14 = /*#__PURE__*/_jsxs(AnchoredPopup, {
+      rect: rect,
+      className: "flex w-105 flex-col text-xs",
+      onPointerEnter: t1,
+      onPointerLeave: t2,
+      children: [t12, t13]
+    });
+    $[28] = rect;
+    $[29] = t1;
+    $[30] = t12;
+    $[31] = t13;
+    $[32] = t2;
+    $[33] = t14;
+  } else {
+    t14 = $[33];
+  }
+  return t14;
+}

package/dist/BaselineStatus.js

@@ -1,13 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { CircleCheck, Sparkles, TriangleAlert } from 'lucide-react';
 import { Icon } from '@adecore/ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BASELINE_MARKS = {
-    widely: { icon: CircleCheck, color: 'text-status-idle' },
-    newly: { icon: Sparkles, color: 'text-status-running' },
-    limited: { icon: TriangleAlert, color: 'text-status-needs-you' }
+  widely: {
+    icon: CircleCheck,
+    color: 'text-status-idle'
+  },
+  newly: {
+    icon: Sparkles,
+    color: 'text-status-running'
+  },
+  limited: {
+    icon: TriangleAlert,
+    color: 'text-status-needs-you'
+  }
 };
 /* Where a web feature stands across browsers, as one line under a CSS property. */
-export function BaselineStatus({ baseline }) {
-    const { icon, color } = BASELINE_MARKS[baseline.level];
-    return (_jsxs("div", { className: "flex items-start gap-1.5 text-xs/[18px] text-text-muted select-text", children: [_jsx(Icon, { icon: icon, size: 14, className: `mt-px shrink-0 ${color}` }), _jsx("span", { className: "min-w-0", children: baseline.text })] }));
-}
+export function BaselineStatus(t0) {
+  const $ = _c(8);
+  const {
+    baseline
+  } = t0;
+  const {
+    icon,
+    color
+  } = BASELINE_MARKS[baseline.level];
+  const t1 = `mt-px shrink-0 ${color}`;
+  let t2;
+  if ($[0] !== icon || $[1] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      size: 14,
+      className: t1
+    });
+    $[0] = icon;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== baseline.text) {
+    t3 = /*#__PURE__*/_jsx("span", {
+      className: "min-w-0",
+      children: baseline.text
+    });
+    $[3] = baseline.text;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-start gap-1.5 text-xs/[18px] text-text-muted select-text",
+      children: [t2, t3]
+    });
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
+}