@svgrid/enterprise 3.1.9 → 3.1.11

package/dist/designer/index.html

@@ -4,7 +4,7 @@
     <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-BPU2KNc5.js"></script>
+    <script type="module" crossorigin src="./assets/index-BnjAONWv.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">
@@ -20,8 +20,8 @@
     <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">
@@ -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-CLQXR_oM.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

package/dist/fields/base-schema.js

@@ -6,6 +6,9 @@ const title = (s) => s.replace(/[_-]+/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2'
 const linkName = (column) => column.replace(/_?id$/i, '') || column;
 const MONEY = /(^|_)(price|amount|cost|budget|revenue|salary|total|fee|value|spend|mrr|arr)($|_)/i;
 const LONG = /(^|_)(notes?|description|body|comment|comments|summary|details|bio|content|message)($|_)/i;
+// Who changed or added a row, as the app (or an agent) writes it: a user id the base names from its people list.
+const MODIFIED_BY = /^(updated|modified|last_modified|edited)_?by$/i;
+const CREATED_BY = /^created_?by$/i;
 function fieldOf(f) {
     const header = f.label ?? title(f.field);
     const base = { id: f.field, field: f.field, header };
@@ -35,6 +38,10 @@ function fieldOf(f) {
                 return { ...base, fieldType: 'url' };
             if (editor === 'phone')
                 return { ...base, fieldType: 'phone' };
+            if (MODIFIED_BY.test(f.field))
+                return { ...base, fieldType: 'lastModifiedBy' };
+            if (CREATED_BY.test(f.field))
+                return { ...base, fieldType: 'createdBy' };
             if (LONG.test(f.field))
                 return { ...base, fieldType: 'longText' };
             return { ...base, fieldType: 'text' };

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

@@ -119,6 +119,25 @@ export type BaseSyncStatus = {
     table: string;
     limit: number;
 };
+/**
+ * A change made in the database by someone else (another user, another tab,
+ * a script, an AI agent), as the base found it when it read the table again.
+ */
+export type BaseRemoteChange = {
+    /** The base table's id. */
+    table: string;
+    type: 'insert' | 'update' | 'delete';
+    /** The record's page id. */
+    id: string;
+    /** The record as it is now; for a delete, as it was. */
+    record: Row;
+    /** For an update: each stored field that moved, from what to what. */
+    fields?: Array<{
+        field: string;
+        from: unknown;
+        to: unknown;
+    }>;
+};
 export type BaseSyncOptions = {
     getTables: () => BaseTable[] | undefined;
     /** Put tables in the page without writing them (loaded, undone, changed elsewhere). */
@@ -129,6 +148,8 @@ export type BaseSyncOptions = {
         action: 'insert' | 'update' | 'delete' | 'load';
         message: string;
     }) => void;
+    /** Changes made elsewhere, after they are in the page. Never called for the page's own writes. */
+    onRemoteChange?: (changes: BaseRemoteChange[]) => void;
 };
 export declare function createBaseSync(options: BaseSyncOptions): {
     load: () => Promise<void>;