@svgrid/enterprise 3.1.10 → 3.1.12

package/dist/designer/assets/{src-C_U1NKOY.js → src-hO8VnnI5.js}

@@ -1,5 +1,5 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./jszip.min-CX2fPs3O.js","./rolldown-runtime-Dd_uD5pT.js","./pdfmake-BpIYFHoG.js","./vfs_fonts-BV-Ul9v2.js","./src-CITpcm6b.js","./chart-export-B6bkQ3X8.js"])))=>i.map(i=>d[i]);
-import{i as e,n as t}from"./rolldown-runtime-Dd_uD5pT.js";import{i as n,r,t as i}from"./conditional-formatting-MDWbF8_Y.js";import{a,c as o,d as s,i as c,l,n as u,o as d,s as f,t as p,u as m}from"./export-format-DGscOjS9.js";import{t as h}from"./preload-helper-HclGiUj8.js";var g=new Uint32Array([1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298]),_=(e,t)=>e>>>t|e<<32-t;function v(e){let t=new TextEncoder().encode(e),n=t.length*8,r=Math.ceil((t.length+9)/64)*64,i=new Uint8Array(r);i.set(t),i[t.length]=128;let a=new DataView(i.buffer);a.setUint32(r-8,Math.floor(n/4294967296)),a.setUint32(r-4,n>>>0);let o=new Uint32Array([1779033703,3144134277,1013904242,2773480762,1359893119,2600822924,528734635,1541459225]),s=new Uint32Array(64);for(let e=0;e<r;e+=64){for(let t=0;t<16;t++)s[t]=a.getUint32(e+t*4);for(let e=16;e<64;e++){let t=_(s[e-15],7)^_(s[e-15],18)^s[e-15]>>>3,n=_(s[e-2],17)^_(s[e-2],19)^s[e-2]>>>10;s[e]=s[e-16]+t+s[e-7]+n>>>0}let t=o[0],n=o[1],r=o[2],i=o[3],c=o[4],l=o[5],u=o[6],d=o[7];for(let e=0;e<64;e++){let a=_(c,6)^_(c,11)^_(c,25),o=c&l^~c&u,f=d+a+o+g[e]+s[e]>>>0,p=(_(t,2)^_(t,13)^_(t,22))+(t&n^t&r^n&r)>>>0;d=u,u=l,l=c,c=i+f>>>0,i=r,r=n,n=t,t=f+p>>>0}o[0]=o[0]+t>>>0,o[1]=o[1]+n>>>0,o[2]=o[2]+r>>>0,o[3]=o[3]+i>>>0,o[4]=o[4]+c>>>0,o[5]=o[5]+l>>>0,o[6]=o[6]+u>>>0,o[7]=o[7]+d>>>0}let c=``;for(let e of o)c+=e.toString(16).padStart(8,`0`);return c}function y(e,t){return e===`suite`||t===`grid`}function b(e,t=new Date){return e==null||e.trim()===``?{status:`unset`,valid:!1,edition:`suite`}:v(e.trim().toLowerCase())===`dabe98638cdc5760637bb2a741e65680a6ff0fb590d8b1018c9597650486cb10`?{status:`licensed`,valid:!0,edition:`suite`}:{status:`invalid`,valid:!1,edition:`suite`}}var x=new Set([`svgrid.com`,`www.svgrid.com`]);function S(){let e=globalThis.location?.hostname;return typeof e==`string`&&x.has(e.toLowerCase())}var C=`data-svgrid-enterprise-watermark`,w=`data-svgrid-enterprise-nudged`,ee=`https://svgrid.com/pricing/?utm_source=svgrid-enterprise&utm_medium=watermark`,te=`www.svgrid.com`,ne=5e3,T=700,E=!1,D=null;function O(){S()||(ie(),!(typeof document>`u`||typeof window>`u`)&&(queueMicrotask(()=>j()),D||(D=new MutationObserver(A),D.observe(document.body,{childList:!0,subtree:!0}))))}var k=!1;function A(e){for(let t of e){let e=t.target;if(!(e.nodeType===1&&e.closest?.(`.sv-grid-root[${w}]`))){re();return}}}function re(){if(k)return;k=!0;let e=()=>{k=!1,j()};typeof requestAnimationFrame==`function`?requestAnimationFrame(e):setTimeout(e,16)}function ie(){E||(E=!0,!(typeof console>`u`)&&console.log(`%c @svgrid/enterprise %c User is using a Commercial version which requires a license.
+import{i as e,n as t}from"./rolldown-runtime-Dd_uD5pT.js";import{i as n,r,t as i}from"./conditional-formatting-MDWbF8_Y.js";import{a,c as o,d as s,i as c,l,n as u,o as d,s as f,t as p,u as m}from"./export-format-BCuqcexA.js";import{t as h}from"./preload-helper-HclGiUj8.js";var g=new Uint32Array([1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298]),_=(e,t)=>e>>>t|e<<32-t;function v(e){let t=new TextEncoder().encode(e),n=t.length*8,r=Math.ceil((t.length+9)/64)*64,i=new Uint8Array(r);i.set(t),i[t.length]=128;let a=new DataView(i.buffer);a.setUint32(r-8,Math.floor(n/4294967296)),a.setUint32(r-4,n>>>0);let o=new Uint32Array([1779033703,3144134277,1013904242,2773480762,1359893119,2600822924,528734635,1541459225]),s=new Uint32Array(64);for(let e=0;e<r;e+=64){for(let t=0;t<16;t++)s[t]=a.getUint32(e+t*4);for(let e=16;e<64;e++){let t=_(s[e-15],7)^_(s[e-15],18)^s[e-15]>>>3,n=_(s[e-2],17)^_(s[e-2],19)^s[e-2]>>>10;s[e]=s[e-16]+t+s[e-7]+n>>>0}let t=o[0],n=o[1],r=o[2],i=o[3],c=o[4],l=o[5],u=o[6],d=o[7];for(let e=0;e<64;e++){let a=_(c,6)^_(c,11)^_(c,25),o=c&l^~c&u,f=d+a+o+g[e]+s[e]>>>0,p=(_(t,2)^_(t,13)^_(t,22))+(t&n^t&r^n&r)>>>0;d=u,u=l,l=c,c=i+f>>>0,i=r,r=n,n=t,t=f+p>>>0}o[0]=o[0]+t>>>0,o[1]=o[1]+n>>>0,o[2]=o[2]+r>>>0,o[3]=o[3]+i>>>0,o[4]=o[4]+c>>>0,o[5]=o[5]+l>>>0,o[6]=o[6]+u>>>0,o[7]=o[7]+d>>>0}let c=``;for(let e of o)c+=e.toString(16).padStart(8,`0`);return c}function y(e,t){return e===`suite`||t===`grid`}function b(e,t=new Date){return e==null||e.trim()===``?{status:`unset`,valid:!1,edition:`suite`}:v(e.trim().toLowerCase())===`dabe98638cdc5760637bb2a741e65680a6ff0fb590d8b1018c9597650486cb10`?{status:`licensed`,valid:!0,edition:`suite`}:{status:`invalid`,valid:!1,edition:`suite`}}var x=new Set([`svgrid.com`,`www.svgrid.com`]);function S(){let e=globalThis.location?.hostname;return typeof e==`string`&&x.has(e.toLowerCase())}var C=`data-svgrid-enterprise-watermark`,w=`data-svgrid-enterprise-nudged`,ee=`https://svgrid.com/pricing/?utm_source=svgrid-enterprise&utm_medium=watermark`,te=`www.svgrid.com`,ne=5e3,T=700,E=!1,D=null;function O(){S()||(ie(),!(typeof document>`u`||typeof window>`u`)&&(queueMicrotask(()=>j()),D||(D=new MutationObserver(A),D.observe(document.body,{childList:!0,subtree:!0}))))}var k=!1;function A(e){for(let t of e){let e=t.target;if(!(e.nodeType===1&&e.closest?.(`.sv-grid-root[${w}]`))){re();return}}}function re(){if(k)return;k=!0;let e=()=>{k=!1,j()};typeof requestAnimationFrame==`function`?requestAnimationFrame(e):setTimeout(e,16)}function ie(){E||(E=!0,!(typeof console>`u`)&&console.log(`%c @svgrid/enterprise %c User is using a Commercial version which requires a license.
 Contact sales@jqwidgets.com for details or visit the license page: https://svgrid.com/pricing/?utm_source=svgrid-enterprise&utm_medium=console`,`background:#4f46e5;color:#fff;padding:2px 6px;border-radius:3px;font-weight:600`,`color:inherit`))}function j(){if(typeof document>`u`)return;let e=document.querySelectorAll(`.sv-grid-root, [role="grid"]`);if(e.length===0){ae();return}document.querySelectorAll(`[${C}="fixed"]`).forEach(e=>e.remove());let t=new Set;e.forEach(e=>{let n=M(e);n&&t.add(n)}),t.forEach(N)}function M(e){let t=e.closest(`.sv-grid-root`);if(t)return t;let n=e;for(;n&&/^(TABLE|THEAD|TBODY|TFOOT|TR|COLGROUP)$/.test(n.tagName);)n=n.parentElement;return n}function N(e){if(e.hasAttribute(w))return;e.setAttribute(w,`1`),getComputedStyle(e).position===`static`&&(e.style.position=`relative`);let t=oe(`grid`);ce(t,!1),e.appendChild(t),se(t)}function ae(){if(typeof document>`u`||document.querySelector(`[${C}="fixed"]`))return;let e=oe(`fixed`);ce(e,!0),document.body.appendChild(e),se(e)}function oe(e){let t=document.createElement(`a`);return t.setAttribute(C,e),t.href=ee,t.target=`_blank`,t.rel=`noopener noreferrer`,t.textContent=te,t.title=`Unlicensed @svgrid/enterprise. Contact sales@jqwidgets.com or visit www.svgrid.com.`,t}function se(e){if(typeof window>`u`){e.remove();return}window.setTimeout(()=>{if(typeof window>`u`){e.remove();return}e.style.opacity=`0`,window.setTimeout(()=>e.remove(),T)},ne)}function ce(e,t){Object.assign(e.style,{position:t?`fixed`:`absolute`,bottom:t?`12px`:`6px`,right:t?`12px`:`8px`,zIndex:`2147483647`,background:`rgba(15,23,42,0.85)`,color:`#fff`,padding:t?`6px 10px`:`4px 8px`,borderRadius:t?`4px`:`3px`,fontFamily:`-apple-system, "Segoe UI", Roboto, sans-serif`,fontSize:t?`11px`:`10px`,lineHeight:`1.2`,textDecoration:`none`,boxShadow:t?`0 2px 12px rgba(0,0,0,0.35)`:`0 1px 4px rgba(0,0,0,0.3)`,border:`1px solid rgba(255,255,255,0.18)`,pointerEvents:`auto`,letterSpacing:`0.02em`,opacity:`1`,transition:`opacity ${T}ms ease`})}var le=`data-svgrid-enterprise-upgrade`,ue=`https://svgrid.com/pricing?ref=in-app&utm_source=svgrid-enterprise&utm_medium=upgrade-prompt`,de=`https://svgrid.com/docs/enterprise/evaluation/?utm_source=svgrid-enterprise&utm_medium=upgrade-prompt`,fe=!1;function P(e,t){if(fe||typeof document>`u`||typeof window>`u`||S()||document.querySelector(`[${le}]`))return;fe=!0;let n=pe(e,t?.expired===!0);document.body.appendChild(n),requestAnimationFrame(()=>{n.style.opacity=`1`,n.style.transform=`translateY(0)`})}function F(e){e.style.opacity=`0`,e.style.transform=`translateY(8px)`,window.setTimeout(()=>e.remove(),220)}function pe(e,t=!1){let n=document.createElement(`div`);n.setAttribute(le,`1`),n.setAttribute(`role`,`dialog`),n.setAttribute(`aria-label`,t?`Your evaluation has ended`:`SvGrid Enterprise`),Object.assign(n.style,{position:`fixed`,bottom:`16px`,right:`16px`,zIndex:`2147483646`,width:`320px`,maxWidth:`calc(100vw - 32px)`,boxSizing:`border-box`,padding:`16px 16px 14px`,background:`#0f172a`,color:`#e2e8f0`,borderRadius:`12px`,border:`1px solid rgba(99,102,241,0.4)`,boxShadow:`0 12px 40px rgba(0,0,0,0.45)`,fontFamily:`-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`,fontSize:`13px`,lineHeight:`1.45`,opacity:`0`,transform:`translateY(8px)`,transition:`opacity 220ms ease, transform 220ms ease`});let r=e?`<strong style="color:#fff">${me(e?String(e):`This`)}</strong> is part of SvGrid Enterprise.`:`You just used a <strong style="color:#fff">SvGrid Enterprise</strong> feature.`,i=t?`EVALUATION ENDED`:`ENTERPRISE`,a=t?`Your evaluation has ended`:`SvGrid Enterprise`,o=t?`${r} Everything still works, but this notice stays until a
        license key is set.`:`${r} It keeps working as it is, here and in production. A
        license key removes the watermark and this notice.`;return n.innerHTML=`

package/dist/designer/index.html

@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SvGrid Studio - Designer</title>
-    <script type="module" crossorigin src="./assets/index-CJodU3tU.js"></script>
+    <script type="module" crossorigin src="./assets/index-DUaUUFEm.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-Dd_uD5pT.js">
     <link rel="modulepreload" crossorigin href="./assets/disclose-version-CIm4S9xS.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-formatting-BWrW_O0n.js">
-    <link rel="modulepreload" crossorigin href="./assets/SvGrid.helpers-CIrmIo9U.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-formatting-JoxA0t65.js">
+    <link rel="modulepreload" crossorigin href="./assets/SvGrid.helpers-BF2QRcNt.js">
     <link rel="modulepreload" crossorigin href="./assets/sv-grid-scrollbar-B9N6Wuj0.js">
     <link rel="modulepreload" crossorigin href="./assets/editor-contract-Bpoa7A5g.js">
     <link rel="modulepreload" crossorigin href="./assets/date-format-B8JbEtIG.js">
@@ -20,22 +20,22 @@
     <link rel="modulepreload" crossorigin href="./assets/popover-CUkLsvRX.js">
     <link rel="modulepreload" crossorigin href="./assets/SvGridDropdown-Cjz0H-fI.js">
     <link rel="modulepreload" crossorigin href="./assets/dismissable-ChWRPkoa.js">
-    <link rel="modulepreload" crossorigin href="./assets/SvDateTimePicker-DCPg7WGN.js">
-    <link rel="modulepreload" crossorigin href="./assets/SvDateRangeInput-BBRzrQeg.js">
+    <link rel="modulepreload" crossorigin href="./assets/SvDateTimePicker-r4FqmR6R.js">
+    <link rel="modulepreload" crossorigin href="./assets/SvDateRangeInput-DbfmXqJj.js">
     <link rel="modulepreload" crossorigin href="./assets/focus-trap-V2-6Fy9I.js">
     <link rel="modulepreload" crossorigin href="./assets/SvTabs-2mHC6oaz.js">
     <link rel="modulepreload" crossorigin href="./assets/SvMenuList-Dgq2D5VN.js">
-    <link rel="modulepreload" crossorigin href="./assets/chart-trend-CLsn5Hgd.js">
-    <link rel="modulepreload" crossorigin href="./assets/chart-BIl-dIRv.js">
+    <link rel="modulepreload" crossorigin href="./assets/chart-trend-_gDVw3bP.js">
+    <link rel="modulepreload" crossorigin href="./assets/chart-Bmu-KAet.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-export-B6bkQ3X8.js">
-    <link rel="modulepreload" crossorigin href="./assets/SvGridChart-Fg43Yi0M.js">
-    <link rel="modulepreload" crossorigin href="./assets/chart-panel-messages-4cF2vw7L.js">
-    <link rel="modulepreload" crossorigin href="./assets/SvGridChartPanel-BsiXRAnx.js">
+    <link rel="modulepreload" crossorigin href="./assets/SvGridChart-DYtGHM3F.js">
+    <link rel="modulepreload" crossorigin href="./assets/chart-panel-messages-B3y8y3kL.js">
+    <link rel="modulepreload" crossorigin href="./assets/SvGridChartPanel-Cm9_K7BV.js">
     <link rel="modulepreload" crossorigin href="./assets/sparkline-C-NcnB2i.js">
     <link rel="modulepreload" crossorigin href="./assets/server-block-cache-CXJKkJpy.js">
     <link rel="modulepreload" crossorigin href="./assets/conditional-formatting-MDWbF8_Y.js">
-    <link rel="modulepreload" crossorigin href="./assets/export-format-DGscOjS9.js">
-    <link rel="modulepreload" crossorigin href="./assets/src-C_U1NKOY.js">
+    <link rel="modulepreload" crossorigin href="./assets/export-format-BCuqcexA.js">
+    <link rel="modulepreload" crossorigin href="./assets/src-hO8VnnI5.js">
     <link rel="stylesheet" crossorigin href="./assets/date-format-DKS-z0xS.css">
     <link rel="stylesheet" crossorigin href="./assets/SvListBox-BXfyqy4a.css">
     <link rel="stylesheet" crossorigin href="./assets/SvGridDropdown-CcidB3rm.css">
@@ -45,7 +45,7 @@
     <link rel="stylesheet" crossorigin href="./assets/SvMenuList-DJ47ba1h.css">
     <link rel="stylesheet" crossorigin href="./assets/SvGridChart-BgLuPO7I.css">
     <link rel="stylesheet" crossorigin href="./assets/SvGridChartPanel-4Pc8y5yO.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-BmvG99kR.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-B2WZFQ5M.css">
   </head>
   <body>
     <div id="app"></div>

package/dist/fields/BaseTableView.svelte

@@ -9,6 +9,10 @@
    * With a `runner`, the view bar has the table's Automations; an
    * automation's "Color the record" action paints the grid while a record
    * matches its condition.
+   *
+   * A record someone else changed (read from the database, `base-sync.ts`)
+   * has the cells that moved tinted, and a record added elsewhere the whole
+   * row, until the record is opened.
    */
   import { SvGrid, hasGanttView } from '@svgrid/grid'
   import SvBaseViewBar from './SvBaseViewBar.svelte'
@@ -16,6 +20,8 @@
   import BaseChartView from './BaseChartView.svelte'
   import BaseAutomations from './BaseAutomations.svelte'
   import { gridOf } from './grid-access'
+  import { markAllSeen, unseenIn } from './activity.svelte'
+  import { findFieldUser } from './sources.svelte'
   import { fieldCopyText } from './copy-text'
   import { recordMenu } from './record-menu'
   import { matches, type AutomationRun, type AutomationRunner, type BaseAutomation } from './automations.svelte'
@@ -106,7 +112,42 @@
     }
     return out
   })
-  const conditionalFormats = $derived(highlightFormats.length ? [...((grid.conditionalFormats as any[]) ?? []), ...highlightFormats] : grid.conditionalFormats)
+  // ---- Changes made elsewhere ------------------------------------------------
+  const UNSEEN = 'color-mix(in srgb, var(--sg-accent, #2563eb) 20%, transparent)'
+  // A format per changed column, drawn on the records that changed it and are not seen yet.
+  const unseenFormats = $derived.by(() => {
+    const tableId = grid.baseTableId
+    const getRowId = grid.getRowId
+    if (typeof tableId !== 'string' || !tableId || typeof getRowId !== 'function') return []
+    const marks = unseenIn({ base: grid.baseScope, tableId })
+    if (!marks.size) return []
+    const idOf = (row: Record<string, unknown>) => String(getRowId(row, 0))
+    const columns = new Set<string>()
+    let added = false
+    for (const m of marks.values()) {
+      if (m.added) added = true
+      for (const c of m.columns) columns.add(c)
+    }
+    const out: any[] = []
+    if (added) out.push({ type: 'rule', when: ({ row }: { row: Record<string, unknown> }) => !!marks.get(idOf(row))?.added, background: UNSEEN })
+    for (const c of columns) out.push({ type: 'rule', columns: [c], when: ({ row }: { row: Record<string, unknown> }) => !!marks.get(idOf(row))?.columns.has(c), background: UNSEEN })
+    return out
+  })
+  // The view bar's "3 changed by Ana" chip: one name when one person made them all.
+  const changed = $derived.by(() => {
+    const tableId = grid.baseTableId
+    if (typeof tableId !== 'string' || !tableId) return null
+    const scope = { base: grid.baseScope, tableId }
+    const marks = unseenIn(scope)
+    if (!marks.size) return null
+    const authors = new Set([...marks.values()].map((m) => m.by ?? ''))
+    const only = authors.size === 1 ? [...authors][0] : ''
+    const who = only ? (findFieldUser(only)?.name ?? 'someone else') : authors.size === 1 ? 'someone else' : 'others'
+    return { label: `${marks.size} changed by ${who}`, onSeen: () => markAllSeen(scope) }
+  })
+  const conditionalFormats = $derived(
+    highlightFormats.length || unseenFormats.length ? [...((grid.conditionalFormats as any[]) ?? []), ...highlightFormats, ...unseenFormats] : grid.conditionalFormats,
+  )
 </script>
 
 <div class="sv-fbase" class:is-bare={bare} style:height>
@@ -119,6 +160,7 @@
       viewTypes={types}
       {rowHeights}
       automations={runner && table ? { count: automationList.length, onManage: () => (automationsOpen = true) } : null}
+      {changed}
     />
   {/if}
   <div class="sv-fbase-body">

package/dist/fields/LongTextEditor.svelte

@@ -6,7 +6,7 @@
    * outside saves, and Escape leaves the cell as it was. With rich text on,
    * the footer names the markup the cell draws.
    */
-  import { portalToBody } from '@svgrid/grid'
+  import { createDismissableLayer, portalToBody } from '@svgrid/grid'
   import { onMount } from 'svelte'
   import { fieldPropsOf } from './registry.svelte'
 
@@ -74,7 +74,12 @@
     window.addEventListener('resize', place)
     window.addEventListener('scroll', onScroll, true)
     document.addEventListener('pointerdown', onDown, true)
+    // Drawn at the end of the page, outside the record view's dialog: as the
+    // top layer it keeps a click in the panel from closing that dialog.
+    const layer = createDismissableLayer({ element: () => [panel ?? null, anchor ?? null], onDismiss: () => {}, closeOnEscape: false, closeOnOutside: false })
+    layer.activate()
     return () => {
+      layer.release()
       cancelAnimationFrame(frame)
       window.removeEventListener('resize', place)
       window.removeEventListener('scroll', onScroll, true)

package/dist/fields/RecordView.svelte

@@ -7,7 +7,9 @@
    * is written through the grid's own edit path, so undo, validation,
    * onCellValueChange and "last modified" fields behave as in the cell.
    * Fields hidden in the grid are listed under the others, folded. Beside
-   * the fields, the record's activity: its changes and its comments.
+   * the fields, the record's activity: its changes and its comments. A
+   * change made elsewhere (another user, an agent) shows who made it and what
+   * the field held before, and opening the record marks it seen.
    * Previous and next step through the rows in the grid's order.
    */
   import { onMount, untrack } from 'svelte'
@@ -16,7 +18,7 @@
   import FieldInput from './FieldInput.svelte'
   import { getFieldType } from './registry.svelte'
   import { cellText, fieldColumns, primaryIdOf, type FieldColumn } from './grid-access'
-  import { addComment, changesOf, commentsOf, timeAgo } from './activity.svelte'
+  import { addComment, changesOf, commentsOf, markSeen, timeAgo, unseenOf } from './activity.svelte'
   import { findFieldUser } from './sources.svelte'
 
   let {
@@ -141,17 +143,36 @@
 
   // ---- Activity ---------------------------------------------------------------
   const allCols = $derived([...columns, ...hidden])
+  type FeedItem = { key: string; at: number; by?: string; automation?: string; remote?: boolean; kind: 'edit' | 'added' | 'comment'; field: string; text: string; from?: string }
   const feed = $derived.by(() => {
     if (!row) return []
-    const edits = changesOf(ctrl, row.id).map((ch) => {
+    const edits = changesOf(ctrl, row.id).map((ch): FeedItem => {
+      if (ch.added) return { key: `a${ch.at}`, at: ch.at, by: ch.by, remote: true, kind: 'added', field: '', text: '' }
       const c = allCols.find((x) => x.id === ch.columnId)
-      return { key: `e${ch.at}${ch.columnId}`, at: ch.at, by: ch.by, automation: ch.automation, kind: 'edit' as const, field: c ? label(c) : ch.columnId, text: c ? cellText(asField(c), ch.value, row) : String(ch.value ?? '') }
+      const show = (v: unknown) => (c ? cellText(asField(c), v, row) : String(v ?? ''))
+      return {
+        key: `e${ch.at}${ch.columnId}`,
+        at: ch.at,
+        by: ch.by,
+        automation: ch.automation,
+        remote: ch.remote,
+        kind: 'edit',
+        field: c ? label(c) : ch.columnId,
+        text: show(ch.value),
+        // What it held before, for a change made elsewhere (nothing to show when it was empty).
+        ...('from' in ch && show(ch.from) ? { from: show(ch.from) } : {}),
+      }
     })
-    const notes = commentsOf(ctrl, row.id).map((n) => ({ key: n.id, at: n.at, by: n.by, automation: undefined, kind: 'comment' as const, field: '', text: n.text }))
+    const notes = commentsOf(ctrl, row.id).map((n): FeedItem => ({ key: n.id, at: n.at, by: n.by, kind: 'comment', field: '', text: n.text }))
     return [...edits, ...notes].sort((a, b) => a.at - b.at)
   })
-  const who = (item: { by?: string; automation?: string }) =>
-    item.automation ? `Automation: ${item.automation}` : item.by ? (findFieldUser(item.by)?.name ?? 'Someone') : 'You'
+  const who = (item: FeedItem) =>
+    item.automation ? `Automation: ${item.automation}` : item.by ? (findFieldUser(item.by)?.name ?? 'Someone') : item.remote ? 'Someone else' : 'You'
+  // Shown here: a change made elsewhere is seen, so the grid stops marking it.
+  $effect(() => {
+    const id = row?.id
+    if (id != null && unseenOf(ctrl, id)) untrack(() => markSeen(ctrl, id))
+  })
   function send() {
     if (!row || !comment.trim()) return
     addComment(ctrl, row.id, comment)
@@ -208,8 +229,12 @@
         <ol class="sv-frv-feed">
           {#each feed as item (item.key)}
             <li class="sv-frv-item" class:is-comment={item.kind === 'comment'}>
-              <div class="sv-frv-item-head"><strong>{who(item)}</strong>{item.kind === 'edit' ? ` changed ${item.field}` : ''}<span class="sv-frv-when">{timeAgo(item.at)}</span></div>
-              <div class="sv-frv-item-body">{item.text || (item.kind === 'edit' ? '(cleared)' : '')}</div>
+              <div class="sv-frv-item-head"><strong>{who(item)}</strong>{item.kind === 'edit' ? ` changed ${item.field}` : item.kind === 'added' ? ' added this record' : ''}<span class="sv-frv-when">{timeAgo(item.at)}</span></div>
+              {#if item.kind !== 'added'}
+                <div class="sv-frv-item-body">
+                  {#if item.from !== undefined}<span class="sv-frv-from">{item.from}</span><span class="sv-frv-arrow" aria-label="to">→</span>{/if}{item.text || (item.kind === 'edit' ? '(cleared)' : '')}
+                </div>
+              {/if}
             </li>
           {:else}
             <li class="sv-frv-none">No changes or comments yet.</li>
@@ -281,6 +306,8 @@
   .sv-frv-item { font-size: 12px; }
   .sv-frv-item-head { color: var(--sg-muted, #64748b); }
   .sv-frv-item-head strong { color: var(--sg-fg, #0f172a); font-weight: 600; }
+  .sv-frv-from { color: var(--sg-muted, #64748b); text-decoration: line-through; }
+  .sv-frv-arrow { margin: 0 5px; color: var(--sg-muted, #64748b); }
   .sv-frv-when { margin-inline-start: 6px; opacity: 0.8; }
   .sv-frv-item-body { margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
   .sv-frv-item.is-comment .sv-frv-item-body {

package/dist/fields/RowHeader.svelte

@@ -3,18 +3,27 @@
    * The row-number cell with `expandRows`: the number, which on hover (or
    * while the row is selected) turns into a checkbox that selects the row,
    * and an expand button that opens the row as a record. A record with
-   * comments shows how many; a click opens it at its discussion.
+   * comments shows how many; a click opens it at its discussion. A record
+   * someone else changed, not opened here since, has a dot in the corner.
    */
   import { openRecord } from './editor-request.svelte'
-  import { commentsOf } from './activity.svelte'
+  import { commentsOf, timeAgo, unseenOf } from './activity.svelte'
+  import { findFieldUser } from './sources.svelte'
 
   let { ctrl, row, rowIndex }: { ctrl: any; row: { id: string; original: unknown }; rowIndex: number } = $props()
 
   const selected = $derived(!!ctrl.isRowSelected?.(row.id, row.original))
   const comments = $derived(commentsOf(ctrl, row.id).length)
+  const unseen = $derived(unseenOf(ctrl, row.id))
+  const unseenText = $derived.by(() => {
+    if (!unseen) return ''
+    const who = unseen.by ? (findFieldUser(unseen.by)?.name ?? 'Someone else') : 'Someone else'
+    return `${who} ${unseen.added ? 'added' : 'changed'} this record ${timeAgo(unseen.at)}`
+  })
 </script>
 
 <span class="sv-frh" class:is-selected={selected} class:has-comments={comments > 0}>
+  {#if unseen}<span class="sv-frh-unseen" role="img" aria-label={unseenText} title={unseenText}></span>{/if}
   <span class="sv-frh-num" aria-hidden="true">{rowIndex + 1}</span>
   <button
     type="button"
@@ -61,7 +70,17 @@
 </span>
 
 <style>
-  .sv-frh { display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 4px 0 8px; box-sizing: border-box; }
+  .sv-frh { position: relative; display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 4px 0 8px; box-sizing: border-box; }
+  .sv-frh-unseen {
+    position: absolute; top: 4px; inset-inline-end: 3px; width: 7px; height: 7px; border-radius: 50%;
+    background: var(--sg-accent, #2563eb); box-shadow: 0 0 0 2px var(--sg-bg, #fff);
+    animation: sv-frh-unseen-in 1.2s ease-out 2;
+  }
+  @keyframes sv-frh-unseen-in {
+    0% { box-shadow: 0 0 0 2px var(--sg-bg, #fff), 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 60%, transparent); }
+    100% { box-shadow: 0 0 0 2px var(--sg-bg, #fff), 0 0 0 9px transparent; }
+  }
+  @media (prefers-reduced-motion: reduce) { .sv-frh-unseen { animation: none; } }
   .sv-frh-num { flex: 1; min-width: 0; text-align: center; color: var(--sg-muted, #64748b); font-variant-numeric: tabular-nums; }
   .sv-frh-check {
     display: none; flex: none; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0;

package/dist/fields/SelectEditor.svelte

@@ -15,7 +15,7 @@
    * outside keep what is chosen. Escape on a single select leaves the cell as
    * it was.
    */
-  import { portalToBody } from '@svgrid/grid'
+  import { createDismissableLayer, portalToBody } from '@svgrid/grid'
   import { onMount } from 'svelte'
   import { fieldPropsOf } from './registry.svelte'
   import { addSelectOptions } from './field-ops'
@@ -133,7 +133,14 @@
     window.addEventListener('resize', place)
     window.addEventListener('scroll', onScroll, true)
     document.addEventListener('pointerdown', onDown, true)
+    // The panel is drawn at the end of the page, outside any dialog the editor
+    // sits in (the record view). As the top layer it keeps that dialog from
+    // reading a click on an option as a click outside and closing: the editor
+    // handles outside clicks and Escape itself.
+    const layer = createDismissableLayer({ element: () => [panel ?? null, anchor ?? null], onDismiss: () => {}, closeOnEscape: false, closeOnOutside: false })
+    layer.activate()
     return () => {
+      layer.release()
       cancelAnimationFrame(frame)
       window.removeEventListener('resize', place)
       window.removeEventListener('scroll', onScroll, true)

package/dist/fields/SvBase.svelte

@@ -17,11 +17,16 @@
    *
    * A table with a `source` (`baseSource`) loads its records from a database
    * or an API and writes each change back (`base-sync.ts`); the end of the
-   * tab bar says when it is loading, saving, or a save failed.
+   * tab bar says when it is loading, saving, or a save failed. A change made
+   * in the database by someone else (another user, a script, an AI agent)
+   * shows up in the page: its cells are tinted and its row marked until the
+   * record is opened, and the record's activity says who changed what, from
+   * the row's "last modified by" field. `onRemoteChange` hears of each one.
    */
   import { onMount, untrack } from 'svelte'
   import { toast } from '@svgrid/grid'
-  import { createBaseSync, type BaseSyncStatus } from './base-sync'
+  import { createBaseSync, type BaseRemoteChange, type BaseSyncStatus } from './base-sync'
+  import { noteRemoteChange } from './activity.svelte'
   import BaseTableView from './BaseTableView.svelte'
   import BaseTabs from './BaseTabs.svelte'
   import { registerLinkedTable, unregisterLinkedTable } from './sources.svelte'
@@ -66,6 +71,7 @@
     onApiReady,
     serverRuns,
     automations = true,
+    onRemoteChange,
     ...grid
   }: {
     /** Several tables, shown as tabs. Without it, `data` and `columns` are the one table. */
@@ -86,6 +92,8 @@
     serverRuns?: () => Promise<ReadonlyArray<AutomationRun>>
     /** The view bar's Automations; false hides it (automations already set still run). */
     automations?: boolean
+    /** Changes made in the database by someone else, once they are in the page (tables with a `source` that has `realtime`). */
+    onRemoteChange?: (changes: BaseRemoteChange[]) => void
     [prop: string]: any
   } = $props()
 
@@ -179,7 +187,39 @@
       syncState = s
     },
     onError: (e) => toast.error(`Could not ${e.action === 'load' ? 'load' : 'save'} ${e.table}: ${e.message}`),
+    onRemoteChange: (list) => {
+      for (const c of list) noteRemote(c)
+      onRemoteChange?.(list)
+    },
   })
+
+  // Fields the database or the page stamps: a change to one says nothing new.
+  const STAMPS = new Set(['createdTime', 'createdBy', 'lastModifiedTime', 'lastModifiedBy', 'autoNumber'])
+
+  /** Who made a change elsewhere: the record's "last modified by" (or, when added, "created by"). */
+  function authorOf(t: BaseTable, record: Row, added: boolean): string | undefined {
+    const order = added ? ['createdBy', 'lastModifiedBy'] : ['lastModifiedBy']
+    for (const type of order) {
+      const d = t.columns.find((x) => x.fieldType === type && x.field != null)
+      const v = d ? record[String(d.field)] : undefined
+      if (v != null && v !== '') return String(v)
+    }
+    return undefined
+  }
+
+  /** A change made elsewhere goes into the record's activity, and marks it unseen. */
+  function noteRemote(c: BaseRemoteChange) {
+    const t = tableOf(c.table)
+    if (!t || c.type === 'delete') return
+    const scope = { base: baseScope, tableId: t.id }
+    const by = authorOf(t, c.record, c.type === 'insert')
+    if (c.type === 'insert') return noteRemoteChange(scope, c.id, { by, added: true })
+    const fields = (c.fields ?? []).flatMap((f) => {
+      const d = t.columns.find((x) => x.field != null && String(x.field) === f.field)
+      return d && !STAMPS.has(d.fieldType) ? [{ columnId: colId(d), from: f.from, to: f.to }] : []
+    })
+    noteRemoteChange(scope, c.id, { by, fields })
+  }
   onMount(() => {
     void sync.load()
     return () => {

package/dist/fields/SvBase.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type BaseRemoteChange } from './base-sync.js';
 import { type BaseTable } from './base-tables.js';
 import type { FieldView, FieldViewType } from './view-model.js';
 import { type AutomationRun } from './automations.svelte.js';
@@ -23,6 +24,8 @@ type $$ComponentProps = {
     serverRuns?: () => Promise<ReadonlyArray<AutomationRun>>;
     /** The view bar's Automations; false hides it (automations already set still run). */
     automations?: boolean;
+    /** Changes made in the database by someone else, once they are in the page (tables with a `source` that has `realtime`). */
+    onRemoteChange?: (changes: BaseRemoteChange[]) => void;
     [prop: string]: any;
 };
 declare const SvBase: import("svelte").Component<$$ComponentProps, {}, "tables" | "views" | "activeView" | "activeTable">;

package/dist/fields/SvBaseViewBar.svelte

@@ -49,6 +49,8 @@
     rowHeights?: ReadonlyArray<{ label: string; height: number }>
     /** The Automations button: how many rules, and what its buttons open. */
     automations?: { count: number; onManage: () => void } | null
+    /** Records someone else changed that nobody here opened yet: what to say, and how to mark them all seen. */
+    changed?: { label: string; onSeen: () => void } | null
   }
 
   let {
@@ -58,6 +60,7 @@
     onViewsChange,
     viewTypes,
     automations = null,
+    changed = null,
     rowHeights = [
       { label: 'Short', height: 34 },
       { label: 'Medium', height: 56 },
@@ -509,6 +512,11 @@
     {/if}
 
     <span class="sv-fvb-spacer"></span>
+    {#if changed}
+      <button type="button" class="sv-fvb-btn sv-fvb-changed" title="Mark all as seen" onclick={changed.onSeen}>
+        <span class="sv-fvb-changed-dot" aria-hidden="true"></span><span>{changed.label}</span>
+      </button>
+    {/if}
     {#if automations}
       <button type="button" class="sv-fvb-btn" class:is-set={automations.count > 0} onclick={automations.onManage}>
         {@render glyph(ICON.bolt)}<span>{automations.count ? plural(automations.count, 'automation', 'automations') : 'Automations'}</span>
@@ -554,6 +562,8 @@
 {/if}
 
 <style>
+  .sv-fvb-changed { color: var(--sg-fg, #0f172a); }
+  .sv-fvb-changed-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sg-accent, #2563eb); flex: none; }
   .sv-fvb {
     container-type: inline-size;
     display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-height: 40px; padding: 4px 6px;

package/dist/fields/SvBaseViewBar.svelte.d.ts

@@ -20,6 +20,11 @@ type Props = {
         count: number;
         onManage: () => void;
     } | null;
+    /** Records someone else changed that nobody here opened yet: what to say, and how to mark them all seen. */
+    changed?: {
+        label: string;
+        onSeen: () => void;
+    } | null;
 };
 declare const SvBaseViewBar: import("svelte").Component<Props, {}, "views" | "activeView">;
 type SvBaseViewBar = ReturnType<typeof SvBaseViewBar>;

package/dist/fields/activity.svelte.d.ts

@@ -25,8 +25,28 @@ export type RecordChange = {
     by?: string;
     /** The automation that made it, by name. */
     automation?: string;
+    /** Made elsewhere (another user, a script, an agent) and read from the database. */
+    remote?: boolean;
+    /** The record was added elsewhere: one entry, with no field. */
+    added?: boolean;
     columnId: string;
     value: unknown;
+    /** What the field held before, when known (a change made elsewhere). */
+    from?: unknown;
+};
+/**
+ * A record someone else changed that nobody here has looked at yet: the
+ * cells that moved are tinted and the row header shows a dot until the record
+ * is opened, or `markAllSeen` runs.
+ */
+export type UnseenChange = {
+    at: number;
+    /** Who changed it, when the record says (its "last modified by" field). */
+    by?: string;
+    /** The column ids that changed. */
+    columns: ReadonlySet<string>;
+    /** Added elsewhere: the whole record is new. */
+    added?: boolean;
 };
 /** A grid, or a table of a base named by id (an automation's change). */
 export type ActivityScope = object | string | {
@@ -44,6 +64,28 @@ export declare function setRecordComments(next: RecordCommentStore | null): void
  */
 export declare function noteChange(scope: ActivityScope, rowId: string, columnId: string, value: unknown, automation?: string): void;
 export declare function changesOf(scope: ActivityScope, rowId: string): ReadonlyArray<RecordChange>;
+/**
+ * Note a change made elsewhere and read from the database: an activity entry
+ * per field (with what it held before), credited to `by`, and the record
+ * marked unseen. `added` notes a record added elsewhere.
+ */
+export declare function noteRemoteChange(scope: ActivityScope, rowId: string, change: {
+    by?: string;
+    added?: boolean;
+    fields?: ReadonlyArray<{
+        columnId: string;
+        from: unknown;
+        to: unknown;
+    }>;
+}): void;
+/** The record's change made elsewhere that nobody here has seen, if any. */
+export declare function unseenOf(scope: ActivityScope, rowId: string): UnseenChange | undefined;
+/** Every unseen record of a grid or table, by row id. */
+export declare function unseenIn(scope: ActivityScope): ReadonlyMap<string, UnseenChange>;
+/** The record was looked at: its cells and row header go back to normal. */
+export declare function markSeen(scope: ActivityScope, rowId: string): void;
+/** Every record of a grid or table was looked at. */
+export declare function markAllSeen(scope: ActivityScope): void;
 export declare function commentsOf(ctrl: any, rowId: string): ReadonlyArray<RecordComment>;
 export declare function addComment(ctrl: any, rowId: string, text: string): void;
 /** "just now", "5 minutes ago", "3 hours ago", else the date. */

package/dist/fields/activity.svelte.js

@@ -13,6 +13,8 @@ import { getCurrentUser } from './sources.svelte.js';
 let version = $state(0);
 const changes = { bases: new WeakMap(), grids: new WeakMap() };
 const memory = { bases: new WeakMap(), grids: new WeakMap() };
+// One entry per record at most: its unseen change, merged as more arrive.
+const unseen = { bases: new WeakMap(), grids: new WeakMap() };
 // The base of a table named by id alone.
 const ANY_BASE = {};
 let store = null;
@@ -64,6 +66,61 @@ export function changesOf(scope, rowId) {
     void version;
     return rowsOf(changes, scope, false)?.get(rowId) ?? [];
 }
+/**
+ * Note a change made elsewhere and read from the database: an activity entry
+ * per field (with what it held before), credited to `by`, and the record
+ * marked unseen. `added` notes a record added elsewhere.
+ */
+export function noteRemoteChange(scope, rowId, change) {
+    const at = Date.now();
+    const fields = change.fields ?? [];
+    if (!change.added && !fields.length)
+        return;
+    const byRow = rowsOf(changes, scope, true);
+    const list = byRow.get(rowId) ?? [];
+    const by = change.by ? { by: change.by } : {};
+    if (change.added)
+        list.push({ at, ...by, remote: true, added: true, columnId: '', value: undefined });
+    for (const f of fields)
+        list.push({ at, ...by, remote: true, columnId: f.columnId, value: copy(f.to), from: copy(f.from) });
+    if (list.length > 50)
+        list.splice(0, list.length - 50);
+    byRow.set(rowId, list);
+    const marks = rowsOf(unseen, scope, true);
+    const was = marks.get(rowId)?.[0];
+    const columns = new Set([...(was?.columns ?? []), ...fields.map((f) => f.columnId)]);
+    marks.set(rowId, [{ at, ...by, columns, ...(change.added || was?.added ? { added: true } : {}) }]);
+    version += 1;
+}
+const copy = (v) => (Array.isArray(v) ? [...v] : v);
+/** The record's change made elsewhere that nobody here has seen, if any. */
+export function unseenOf(scope, rowId) {
+    void version;
+    return rowsOf(unseen, scope, false)?.get(rowId)?.[0];
+}
+/** Every unseen record of a grid or table, by row id. */
+export function unseenIn(scope) {
+    void version;
+    const out = new Map();
+    for (const [id, list] of rowsOf(unseen, scope, false) ?? [])
+        if (list[0])
+            out.set(id, list[0]);
+    return out;
+}
+/** The record was looked at: its cells and row header go back to normal. */
+export function markSeen(scope, rowId) {
+    const marks = rowsOf(unseen, scope, false);
+    if (marks?.delete(rowId))
+        version += 1;
+}
+/** Every record of a grid or table was looked at. */
+export function markAllSeen(scope) {
+    const marks = rowsOf(unseen, scope, false);
+    if (marks?.size) {
+        marks.clear();
+        version += 1;
+    }
+}
 const contextOf = (ctrl) => ({ tableId: tableIdOf(ctrl), api: ctrl?.buildApi?.() });
 export function commentsOf(ctrl, rowId) {
     void version;

package/dist/fields/base-schema.d.ts

@@ -4,7 +4,7 @@
  * read.
  *
  * Column types become field types, helped by the column's name (`email`,
- * `phone`, `price`, `notes`, `rating`); an enum, or a text column that keeps
+ * `phone`, `price`, `notes`, `rating`, `updated_by`); an enum, or a text column that keeps
  * repeating a handful of values, becomes a single select with colored
  * options; a foreign key becomes a link to the table it names, with a field
  * in that table that links back; a table that only pairs two others