@svgrid/enterprise 3.0.2 → 3.1.0

package/dist/SvGridAlerts.svelte

@@ -24,6 +24,7 @@
   import { applyAlertEvents, type FlashTarget } from './alerts/alert-engine-attach'
   import { rulesToConditionalFormats } from './alerts/alert-formats'
   import { alertStore } from './alerts/alert-store.svelte'
+  import { createScheduler, type Schedule } from './scheduling'
   import {
     createAlertRules,
     localStorageAlertRules,
@@ -100,19 +101,37 @@
     onJump,
   }: Props = $props()
 
-  const manager: AlertRulesManager = createAlertRules(
-    storageKey ? localStorageAlertRules(storageKey) : memoryAlertRules(),
+  // The store is chosen and seeded once, from the props' first values: a
+  // storage key does not move at runtime and the seed is only for an empty
+  // store.
+  const manager: AlertRulesManager = untrack(() =>
+    createAlertRules(storageKey ? localStorageAlertRules(storageKey) : memoryAlertRules()),
   )
-  // Seed once if the store is empty.
-  if (initialRules.length && manager.list().length === 0) {
-    for (const r of initialRules) manager.save(r)
-  }
+  untrack(() => {
+    if (initialRules.length && manager.list().length === 0) {
+      for (const r of initialRules) manager.save(r)
+    }
+  })
 
   let rules = $state<AlertRule[]>(manager.list())
   let rulesVersion = $state(0)
-  let flashFormats = $state<ConditionalFormat<TRow>[]>([])
+  // Raw on purpose: a flash is removed by identity 900 ms later, and a deep
+  // proxy never equals the object that was pushed, so the flashes never went.
+  let flashFormats = $state.raw<ConditionalFormat<TRow>[]>([])
 
-  const engine = createAlertEngine<TRow>({ rules, getRowId, getValue, locale })
+  // The engine and the observer are built once; `getRowId`, `getValue` and
+  // `locale` are props that may change after mount, so they go in as
+  // closures and getters that read the current value rather than a copy of
+  // the first one.
+  const rowIdOf = (row: TRow) => getRowId(row)
+  const engine = createAlertEngine<TRow>({
+    // The first list; later lists reach the observer through the
+    // rulesVersion effect below.
+    rules: untrack(() => rules),
+    getRowId: rowIdOf,
+    get getValue() { return getValue },
+    get locale() { return locale },
+  })
 
   // The observer owns all scheduling + change tracking. It runs evaluation on a
   // post-paint frame (never inside the grid's render flush) and only clones prev
@@ -132,7 +151,7 @@
 
   const observer = createAlertObserver<TRow>({
     engine,
-    getRowId,
+    getRowId: rowIdOf,
     schedule: 'raf',
     onEvents: (events) => {
       const { flashes } = applyAlertEvents(events, getRowId, { shouldToast: allowToast })
@@ -142,6 +161,27 @@
 
   let seededVersion = -1
 
+  // A `scheduled` rule is re-checked on its cron by the enterprise scheduler
+  // rather than on a data change: on each fire the pass lists every row the
+  // predicate matches at that moment, whether or not anything moved. The
+  // scheduler is rebuilt when the rules change, and stopped with the overlay.
+  $effect(() => {
+    void rulesVersion
+    const scheduled = rules.filter((r): r is AlertRule & { trigger: { type: 'scheduled'; schedule: Schedule } } => r.enabled && r.trigger.type === 'scheduled')
+    if (scheduled.length === 0) return
+    const scheduler = createScheduler({
+      schedules: scheduled.map((r) => ({ ...r.trigger.schedule, id: r.id })),
+      onFire: (schedule) => {
+        const events = engine.evaluateScheduled(schedule.id, untrack(() => data))
+        if (events.length === 0) return
+        const { flashes } = applyAlertEvents(events, getRowId, { shouldToast: allowToast })
+        for (const f of flashes) addFlash(f)
+      },
+    })
+    scheduler.start()
+    return () => scheduler.stop()
+  })
+
   function addFlash(target: FlashTarget) {
     const fmt: ConditionalFormat<TRow> = {
       type: 'rule',

package/dist/SvGridBoard.svelte

@@ -12,7 +12,7 @@
   //     as a per-row overlay keyed by row id, so consumers write no move code;
   //     `onCardMove` fires purely as a notification for persistence / mirroring
   // Themes entirely from the grid's `--sg-*` tokens.
-  import { tick } from "svelte";
+  import { tick, untrack } from "svelte";
   import type {
     ColumnDef,
     RowData,
@@ -165,10 +165,11 @@
       collapsedSwim: { ...collapsedSwim },
     };
   }
-  // Restore once at init (before first paint).
-  if (board.persistKey && getRowId && typeof localStorage !== "undefined") {
+  // Restore once at init (before first paint), from the first persistKey.
+  const persistKey = untrack(() => (getRowId ? board.persistKey : undefined));
+  if (persistKey && typeof localStorage !== "undefined") {
     try {
-      const raw = localStorage.getItem(board.persistKey);
+      const raw = localStorage.getItem(persistKey);
       if (raw) {
         const s = JSON.parse(raw);
         laneOf = s.laneOf ?? {};
@@ -1264,6 +1265,8 @@
     style={lane.color ? `--sv-board-accent: ${lane.color};` : undefined}
     aria-label={laneTitle(lane)}
   >
+    <!-- A reorderable lane header is a keyboard handle (Ctrl+arrows move the lane). -->
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <header
       class="sv-board-lane-head"
@@ -1344,7 +1347,9 @@
       <div
         class="sv-board-lane-body"
         class:is-virtual={virtualized}
-        role="list"
+        role="listbox"
+        tabindex="-1"
+        aria-multiselectable={board.selectable ? true : undefined}
         class:is-dropover={overLane === lane.id && overSwim === swimId}
         use:trackLane={cellKey(lane.id, swimId)}
         ondragover={(e) => onLaneDragOver(e, lane.id, swimId)}
@@ -1359,7 +1364,7 @@
             <div class="sv-board-drop-marker" aria-hidden="true"></div>
           {/if}
           {@const isEditing = editingKey === key(row)}
-          <article
+          <div
             class="sv-board-card"
             class:is-dragging={dragRow === row}
             class:is-grabbed={grabbed === row}
@@ -1367,7 +1372,7 @@
             class:is-flagged={isFlagged(row)}
             class:is-locked={!movable(row)}
             class:is-selected={board.selectable && selected[key(row)]}
-            role="listitem"
+            role="option"
             tabindex="0"
             data-card-key={key(row)}
             aria-roledescription="Draggable card"
@@ -1531,7 +1536,7 @@
                 {@render commentThread(row)}
               </div>
             {/if}
-          </article>
+          </div>
         {/each}
         {#if win.bottom > 0}
           <div style={`height:${win.bottom}px`} aria-hidden="true"></div>

package/dist/SvGridBulkEditDrawer.svelte

@@ -35,7 +35,17 @@
 
   const messages = $derived(ctrl.messages)
   const columns = $derived(bulkEditableFields(ctrl) as BulkEditField[])
-  const count = $derived((ctrl.selectionBarTarget?.ids ?? []).length as number)
+  const count = $derived(
+    ((ctrl.selectionBarCount as number | undefined) ?? (ctrl.selectionBarTarget?.ids ?? []).length) as number,
+  )
+  // A selection model with `bulkUpdate` owns the write: the rule it stores
+  // covers rows this grid never loaded, which writing the loaded cells
+  // would silently miss.
+  const remoteUpdate = $derived(
+    (ctrl.props?.rowSelectionModel?.bulkUpdate ?? null) as
+      | ((patch: Record<string, unknown>) => Promise<number>)
+      | null,
+  )
 
   /** A column's editor type mapped onto the form's control vocabulary. */
   function controlFor(editorType: string, hasOptions: boolean): FormFieldType {
@@ -85,7 +95,8 @@
     })),
   )
 
-  const fill = (t: string, n: number) => t.replace(/\{count\}/g, String(n))
+  const locale = $derived(ctrl.props?.localization?.locale as string | string[] | undefined)
+  const fill = (t: string, n: number) => t.replace(/\{count\}/g, n.toLocaleString(locale))
 
   function submit(values: Record<string, unknown>) {
     const byId = new Map(columns.map((c) => [c.id, c]))
@@ -100,6 +111,19 @@
       if (mixed.has(name) && (raw === '' || raw == null)) continue
       edits[name] = next
     }
+    if (remoteUpdate) {
+      // Keyed by field, not column id: the write goes to the datasource.
+      const byField: Record<string, unknown> = {}
+      for (const [columnId, value] of Object.entries(edits)) {
+        const field = byId.get(columnId)?.field
+        if (field) byField[field] = value
+      }
+      open = false
+      void remoteUpdate(byField).then((changed) =>
+        onApplied?.({ changed, skipped: 0, fields: Object.keys(byField).length }),
+      )
+      return
+    }
     const result = applyBulkEdit(ctrl, edits)
     open = false
     onApplied?.(result)

package/dist/SvGridEditPanel.svelte

@@ -715,6 +715,9 @@
                    (no scrollbar), unlike an in-flow popup. -->
               <div class="sv-ep-field__dropdown">
                 <SvGridDropdown
+                  id={`sv-ef-${f.field}`}
+                  invalid={!!err}
+                  {describedBy}
                   options={selectOptions(f)}
                   value={values[f.field]}
                   autoOpen={false}

package/dist/SvGridScheduler.svelte

@@ -78,6 +78,7 @@
   } from "@svgrid/grid";
   // Scheduler Pro feature models (this package).
   import { cascade, violations, type SchedulerDependency } from "./scheduler-dependencies";
+  import { arrowHeadPath, dependencyArrows, type Arrow } from "./gantt/timeline-arrows";
   import { expandAssignments, resourceLoad, type SchedulerAssignment } from "./scheduler-assignments";
   import { columnSummaries } from "./scheduler-summary";
   import { buildAxis, timeToX, xToTime, resolveZoom, zoomPresets, type Axis, type ZoomLevel } from "./scheduler-axis";
@@ -568,33 +569,18 @@
     }
     return { byKey, height: top };
   });
-  // SVG path + state for each dependency arrow (elbow connector, pred finish -> succ start).
-  const tlDepArrows = $derived.by(() => {
-    if (!isTimeline || !hasDeps) return [] as Array<{ id: string; d: string; bad: boolean; hx: number; hy: number }>;
-    const rects = tlBarRects.byKey;
-    const bad = new Set(depViolations.map((d) => d.id));
-    const out: Array<{ id: string; d: string; bad: boolean; hx: number; hy: number }> = [];
-    for (const dep of depList) {
-      const a = rects.get(dep.from);
-      const b = rects.get(dep.to);
-      if (!a || !b) continue;
-      const type = dep.type ?? "FS";
-      const x1 = type === "SS" || type === "SF" ? a.left : a.right;
-      const x2 = type === "FF" || type === "SF" ? b.right : b.left;
-      out.push({ id: dep.id, d: depElbow(x1, a.midY, x2, b.midY), bad: bad.has(dep.id), hx: x2, hy: b.midY });
-    }
-    return out;
+  // SVG path + state for each dependency arrow (elbow connector, pred finish ->
+  // succ start). The geometry lives in ./gantt/timeline-arrows, shared with the
+  // Gantt chart so the two views draw the same link the same way.
+  const tlDepArrows = $derived.by<Arrow[]>(() => {
+    if (!isTimeline || !hasDeps) return [];
+    return dependencyArrows(
+      tlBarRects.byKey,
+      depList,
+      new Set(depViolations.map((d) => d.id)),
+      tlLaneH,
+    );
   });
-  // Orthogonal elbow connector between two anchor points; loops around when the
-  // successor sits left of the predecessor (a backward / violating link).
-  function depElbow(x1: number, y1: number, x2: number, y2: number): string {
-    const s = 10;
-    const p = x1 + s;
-    if (x2 >= p) return `M${x1},${y1} L${p},${y1} L${p},${y2} L${x2},${y2}`;
-    const q = x2 - s;
-    const midY = y2 >= y1 ? y1 + tlLaneH : y1 - tlLaneH;
-    return `M${x1},${y1} L${p},${y1} L${p},${midY} L${q},${midY} L${q},${y2} L${x2},${y2}`;
-  }
   // Cascade successors forward after a move / resize, writing the shifts into the
   // overlay and reporting them (never mutating source rows).
   function cascadeDeps(movedKey: string, ns: Date, ne: Date) {
@@ -602,7 +588,9 @@
     const times = new Map<string, { start: Date; end: Date }>();
     for (const [k, v] of depTimes) times.set(k, v);
     times.set(movedKey, { start: ns, end: ne });
-    const shifts = cascade(times, depList, { snapForward: depSnapForward });
+    // Successors only: the moved event stays where it was dropped, and a link
+    // it now breaks is drawn as violated rather than the drop being undone.
+    const shifts = cascade(times, depList, { from: [movedKey], snapForward: depSnapForward });
     if (!shifts.size) return;
     const moves: Array<{ id: string; start: Date; end: Date }> = [];
     for (const [k, t] of shifts) {
@@ -882,16 +870,45 @@
     return monthWeekSegments(rowEvents, gridDays[0] ?? anchor);
   });
 
-  const monthWeeks = $derived(monthMatrix(anchor, weekStartsOn, 6));
+  // `monthMatrix` returns exactly the rows it is asked for, because the date
+  // picker wants a grid that keeps its height as you page through the months.
+  // A full-page calendar wants the opposite: September 2026 spans five weeks,
+  // and a sixth row of October dates only takes height away from the five that
+  // carry the month - enough, at this demo's size, to cost every cell a lane.
+  // So trailing rows that are entirely outside the month are dropped. Only
+  // trailing rows can be: the first row always holds the 1st.
+  const monthWeeks = $derived.by(() => {
+    const weeks = monthMatrix(anchor, weekStartsOn, 6);
+    let used = weeks.length;
+    while (used > 1 && weeks[used - 1]!.every((cell) => !cell.inMonth)) used--;
+    return used === weeks.length ? weeks : weeks.slice(0, used);
+  });
   const agenda = $derived(agendaGroups(viewEvents));
 
   // --- month spanning-bar layout ---
   const MONTH_DAYNUM_H = 22; // px reserved at the top of each cell for the date
   const MONTH_LANE_H = 20; // px per event-bar lane
   const MONTH_MORE_H = 16; // px reserved for the "+N more" row
+  // The floor a week row never shrinks past, fed to the CSS below so the two
+  // cannot drift apart. It is the sum above rather than a round number on
+  // purpose: it is exactly the height that still shows the date, one lane and
+  // the "+N more" that reaches the rest, so every event stays reachable at the
+  // floor. It used to be a flat 84, which is taller than six rows of a short
+  // body can be - so a month that needs six (August 2026, say) pushed its last
+  // row past the bottom of a `overflow: visible` box, and the 31st could not
+  // be seen or scrolled to. Rows shrink to fit now, and the body scrolls only
+  // if even the floor does not.
+  const MONTH_WEEK_MIN_H = MONTH_DAYNUM_H + MONTH_LANE_H + MONTH_MORE_H;
   let monthBodyH = $state(0);
   const visibleMonthLanes = $derived.by(() => {
-    const weekH = monthBodyH / Math.max(1, monthWeeks.length);
+    // A week row is `flex: 1 1 0` with that min-height, so its real height is
+    // the larger of the two - the rows only divide the body evenly while the
+    // body is tall enough for all of them. Dividing unconditionally
+    // under-counts the lanes and puts a "+N more" in cells with a whole lane
+    // of empty space below it. September 2026 did exactly that: 418px over
+    // six rows reads as 69px and one lane, while every row really was 84px
+    // and fit two.
+    const weekH = Math.max(MONTH_WEEK_MIN_H, monthBodyH / Math.max(1, monthWeeks.length));
     return Math.max(1, Math.floor((weekH - MONTH_DAYNUM_H - MONTH_MORE_H) / MONTH_LANE_H));
   });
   // Events hidden (beyond the visible lanes) that cover a given day column.
@@ -1971,6 +1988,9 @@
     e.preventDefault();
     const s = new Date(ev.start.getTime() + dDay * 86400000 + dMin * 60000);
     const en = new Date(ev.end.getTime() + dDay * 86400000 + dMin * 60000);
+    // The same booking rules as a drag: an arrow key must not land an event
+    // on another one, outside the working hours or on a blocked day.
+    if (bookingBlocked(s, en, ev.resourceId, ev.rowKey, ev.row)) return;
     startOfE[ev.rowKey] = s;
     endOfE[ev.rowKey] = en;
     emitMove({ row: ev.row, start: s, end: en, allDay: ev.allDay, toResource: ev.resourceId });
@@ -3191,9 +3211,9 @@
       {/if}
       {#if zoomOn && proAxisData}
         <div class="sv-sched-slots sv-sched-zoom" role="group" aria-label="Zoom">
-          <button type="button" class="sv-sched-btn sv-sched-btn-slot" onclick={() => stepZoom(-1)} aria-label="Zoom in">-</button>
+          <button type="button" class="sv-sched-btn sv-sched-btn-slot" onclick={() => stepZoom(1)} aria-label="Zoom out">-</button>
           <span class="sv-sched-zoom-label">{proAxisData.level?.label ?? "Zoom"}</span>
-          <button type="button" class="sv-sched-btn sv-sched-btn-slot" onclick={() => stepZoom(1)} aria-label="Zoom out">+</button>
+          <button type="button" class="sv-sched-btn sv-sched-btn-slot" onclick={() => stepZoom(-1)} aria-label="Zoom in">+</button>
         </div>
       {/if}
       {#each views as v (v)}
@@ -3266,7 +3286,7 @@
           <div class="sv-sched-dow">{wd(dowIdx)}</div>
         {/each}
       </div>
-      <div class="sv-sched-monthbody" bind:clientHeight={monthBodyH}>
+      <div class="sv-sched-monthbody" style={`--sv-sched-week-min-h:${MONTH_WEEK_MIN_H}px`} bind:clientHeight={monthBodyH}>
         {#each monthWeeks as week, wi (wi)}
           {@const weekStart = week[0]!.date}
           {@const seg = monthWeekSegments(viewEvents, weekStart)}
@@ -3428,7 +3448,7 @@
               <path
                 class="sv-sched-dep-arrow"
                 class:sv-sched-dep-bad={arr.bad}
-                d={`M${arr.hx},${arr.hy} l-6,-3.5 l0,7 z`}
+                d={arrowHeadPath(arr.hx, arr.hy, arr.dir)}
               />
             {/each}
           </svg>
@@ -4272,8 +4292,16 @@
     border-bottom: 1px solid var(--sg-border, #e5e7eb);
     text-align: right;
   }
-  .sv-sched-monthbody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
-  .sv-sched-week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); flex: 1 1 0; min-height: 84px; }
+  /* `auto`, not `visible`: the rows shrink to fit, so this only ever engages
+     when the body is shorter than the rows' own floor - and then a scrollbar
+     is the difference between a day you can reach and one that is simply
+     painted outside the box. */
+  .sv-sched-monthbody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+  /* min-height comes from MONTH_WEEK_MIN_H: the lane count reads the same
+     floor, so a change here that did not reach the script would put "+N more"
+     in cells that have room for the bar. The rows are `flex: 1 1 0`, so they
+     grow to fill a tall body and shrink to this floor in a short one. */
+  .sv-sched-week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); flex: 1 1 0; min-height: var(--sv-sched-week-min-h, 58px); }
   .sv-sched-daycell {
     position: relative;
     border-right: 1px solid var(--sg-border, #e5e7eb);
@@ -5149,14 +5177,15 @@
   .sv-sched-dep-arrow {
     fill: var(--sv-sched-dep, color-mix(in srgb, var(--sg-fg, #1f2937) 45%, transparent));
   }
-  .sv-sched-dep-line.sv-sched-dep-bad,
-  .sv-sched-dep-arrow.sv-sched-dep-bad {
-    stroke: var(--sv-sched-dep-bad, #dc2626);
-    fill: var(--sv-sched-dep-bad, #dc2626);
-  }
+  /* The line keeps `fill: none` - a fill on the elbow path paints the polygon
+     it encloses, and a violated link showed up as a solid red slab. */
   .sv-sched-dep-line.sv-sched-dep-bad {
+    stroke: var(--sv-sched-dep-bad, #dc2626);
     stroke-dasharray: 4 3;
   }
+  .sv-sched-dep-arrow.sv-sched-dep-bad {
+    fill: var(--sv-sched-dep-bad, #dc2626);
+  }
   /* Resource utilization histogram (Scheduler Pro) - a subtle meter strip at the
      bottom of each resource row, clearly separated from the event lanes above. */
   .sv-sched-hist {

package/dist/SvGridSelectionBar.svelte

@@ -27,7 +27,13 @@
   }
 
   const target = $derived(ctrl.selectionBarTarget as Target)
-  const count = $derived(target.ids.length)
+  // The count the controller resolved: a selection model that stores the
+  // rule knows about rows the grid never loaded, so "1,000,000 selected"
+  // is honest even with twenty rows on screen.
+  const count = $derived((ctrl.selectionBarCount as number | undefined) ?? target.ids.length)
+  // Grouped the way the grid's own numbers are: 1,000,000, not 1000000.
+  const locale = $derived(ctrl.props?.localization?.locale as string | string[] | undefined)
+  const countText = $derived(count.toLocaleString(locale))
   const messages = $derived(ctrl.messages)
   const position = $derived(ctrl.selectionBarPosition as 'top' | 'bottom')
   const maxVisible = $derived(ctrl.selectionBarMaxVisible as number)
@@ -85,7 +91,7 @@
   let overflowOpen = $state(false)
   let barEl = $state<HTMLElement | null>(null)
 
-  const fill = (template: string, n: number) => template.replace(/\{count\}/g, String(n))
+  const fill = (template: string, n: number) => template.replace(/\{count\}/g, n.toLocaleString(locale))
   const clearSelection = () => ctrl.grid.setRowSelection(() => ({}))
 
   function run(a: Action) {
@@ -138,12 +144,13 @@
   class="sv-selbar"
   data-position={position}
   role="toolbar"
+  tabindex="-1"
   aria-label={messages.selectionBarLabel}
   aria-orientation="horizontal"
   onkeydown={onKeydown}
 >
   <span class="sv-selbar-count" aria-live="polite">
-    <span class="sv-selbar-chip">{count}</span>
+    <span class="sv-selbar-chip">{countText}</span>
     <span class="sv-selbar-count-label">{messages.selectionBarCount}</span>
   </span>