@juspay/svelte-ui-components 4.53.0 → 4.54.0

package/README.md

@@ -154,6 +154,20 @@ fix to something that did not work.
 | **RelativeTime**   | Auto-updating relative time display ("5 minutes ago") with locale support and optional tooltip.                                                | [docs](docs/RelativeTime.md)   |
 | **AspectRatio**    | Constrains content to a fixed width-to-height ratio using CSS `aspect-ratio`, reserving layout space before an image, video or iframe loads.   | [docs](docs/AspectRatio.md)    |
 
+### Charts
+
+Pure-SVG charts with no charting-library dependency; each takes plain data arrays.
+
+| Component | Description | Docs |
+| --- | --- | --- |
+| **AreaChart**         | Responsive area chart for volume under a trend: multiple series, regular or 100% stacking, gradient fill, data labels and a hover overlay. | [docs](docs/AreaChart.md) |
+| **BarChart**          | Responsive bar chart for comparing categories: vertical or horizontal, single or multi-series (grouped or stacked), value labels, per-point colours and hover tooltips. | [docs](docs/BarChart.md) |
+| **DualAxisBarChart**  | Two independent Y-axes over one categorical X-axis; each series declares its own axis and render type. | [docs](docs/DualAxisBarChart.md) |
+| **FunnelChart**       | Horizontal funnel: one bar per stage, proportional to its value, with connectors between stages. | [docs](docs/FunnelChart.md) |
+| **LineChart**         | Responsive line chart for trends: multiple series, five curve interpolations, gradient fill and an optional area mode. | [docs](docs/LineChart.md) |
+| **PieChart**          | Responsive pie or donut chart with slice hover highlighting, a delta badge, custom labels, a legend and donut centre content. | [docs](docs/PieChart.md) |
+| **SankeyChart**       | Sankey diagram for flows between nodes, positioned into columns automatically. | [docs](docs/SankeyChart.md) |
+
 ### Feedback & Loading
 
 | Component       | Description                                                                                     | Docs                        |

package/dist/ChatComposer/ChatComposer.svelte

@@ -134,15 +134,27 @@
   let slashSelected = $state(0);
   let slashList: HTMLUListElement | null = $state(null);
 
+  // A command opens on the first character of its name: "/model" on "/",
+  // "@support" on "@". Letters, digits and whitespace never trigger, so a
+  // plain word typed into the composer never opens the menu. Read as a whole
+  // code point, so an emoji trigger is never split into half a surrogate pair.
+  function slashTrigger(text: string): string | null {
+    const [first = ''] = text;
+    return /^[^\p{L}\p{N}\s]$/u.test(first) ? first : null;
+  }
+
   const slashMatches = $derived.by((): ChatComposerSlashCommand[] => {
-    if (slashCommands === null || slashDismissed || !/^\/\S*$/.test(value)) {
+    const trigger = slashTrigger(value);
+    if (slashCommands === null || slashDismissed || trigger === null || /\s/.test(value)) {
       return [];
     }
     const query = value.toLowerCase();
     return slashCommands.filter(
       (command) =>
-        command.name.toLowerCase().startsWith(query) ||
-        (query.length > 1 && (command.description ?? '').toLowerCase().includes(query.slice(1)))
+        slashTrigger(command.name) === trigger &&
+        (command.name.toLowerCase().startsWith(query) ||
+          (query.length > trigger.length &&
+            (command.description ?? '').toLowerCase().includes(query.slice(trigger.length))))
     );
   });
   const slashArg = $derived.by(
@@ -150,8 +162,8 @@
       if (slashCommands === null || slashDismissed) {
         return null;
       }
-      const parsed = /^(\/\S+)\s(\S*)$/.exec(value);
-      if (parsed === null) {
+      const parsed = /^(\S+)\s(\S*)$/.exec(value);
+      if (parsed === null || slashTrigger(parsed[1] ?? '') === null) {
         return null;
       }
       const name = (parsed[1] ?? '').toLowerCase();

package/dist/ChatComposer/properties.d.ts

@@ -100,9 +100,11 @@ export type OptionalChatComposerProperties = {
     /** Test id on the status region (see `statusText`). */
     statusTestId?: string;
     /**
-     * Opt-in slash-command menu. With commands passed, typing "/" opens a
-     * listbox of the ones that match (name prefix, or the text after "/" found
-     * in a description); arrows move, Tab completes, Enter picks (Enter on a
+     * Opt-in slash-command menu. With commands passed, typing a command's
+     * trigger -- the first character of its name, "/" for "/model" or "@" for
+     * "@support" -- opens a listbox of the commands sharing that trigger that
+     * match (name prefix, or the text after the trigger found in a
+     * description); arrows move, Tab completes, Enter picks (Enter on a
      * complete match submits), Escape dismisses -- through the shared
      * dismissible stack, so an overlay above the composer closes first. A
      * command with `choices` keeps the menu open past the space for a second
@@ -197,7 +199,11 @@ export type ChatComposerSlashCommandChoice = {
 };
 /** One entry of ChatComposer's slash-command menu. */
 export type ChatComposerSlashCommand = {
-    /** Including the slash, e.g. "/model". */
+    /**
+     * Including its trigger character, e.g. "/model" or "@support". The first
+     * character opens the menu, so it must be punctuation or a symbol: a name
+     * starting with a letter, digit or space is never offered.
+     */
     name: string;
     description?: string;
     /** Shown after the name, e.g. "[model]". */

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {
+    DateRangeCompareDraft,
     DateRangePickerProperties,
     DateRangePreset,
     TimeDisplayBoundary
@@ -95,8 +96,11 @@
   let draftStart: Date | null = $state(null);
   let draftEnd: Date | null = $state(null);
   let draftValue: Date | null = $state(null);
-  let draftCompareStart: Date | null = $state(null);
-  let draftCompareEnd: Date | null = $state(null);
+  // The compare range is a draft too. It is handed to `compareCalendar` so a consumer's calendar
+  // has somewhere to write that Apply commits and Cancel discards; `compareSnapshot` is what the
+  // committed range was when the session opened, which is what Cancel restores.
+  const compareDraft: DateRangeCompareDraft = $state({ start: null, end: null });
+  let compareSnapshot: DateRangeCompareDraft = $state({ start: null, end: null });
 
   // Tracks the label of the currently active preset, or null when the user
   // made a custom calendar selection (or before any selection is made).
@@ -339,6 +343,67 @@
     }
   }
 
+  const sameInstant = (a: Date | null, b: Date | null): boolean =>
+    (a === null ? null : a.getTime()) === (b === null ? null : b.getTime());
+
+  // The compare calendar lives in the main panel unless a standalone `compareTrigger` gives it
+  // its own panel and its own Apply/Cancel.
+  const compareInMain: boolean = $derived(
+    typeof compareCalendar === 'function' && typeof compareTrigger !== 'function'
+  );
+
+  function seedCompareSession(): void {
+    compareSnapshot = { start: compareStart, end: compareEnd };
+    compareDraft.start = compareStart;
+    compareDraft.end = compareEnd;
+  }
+
+  // What Apply commits. A calendar bound to `compareDraft` edits the draft. A calendar bound
+  // straight to `compareStart`/`compareEnd` (how this component's docs wired it before the draft
+  // was exposed) edits the committed values in place and leaves the draft at its seed; Apply used
+  // to write that stale seed back over the pick, and could not be pressed at all on first use.
+  const pendingCompare = $derived.by(() => {
+    const edited =
+      !sameInstant(compareDraft.start, compareSnapshot.start) ||
+      !sameInstant(compareDraft.end, compareSnapshot.end);
+    return edited
+      ? { start: compareDraft.start, end: compareDraft.end }
+      : { start: compareStart, end: compareEnd };
+  });
+  const canApplyCompare: boolean = $derived(
+    pendingCompare.start !== null && pendingCompare.end !== null
+  );
+
+  function commitCompare(): void {
+    const { start, end } = pendingCompare;
+    if (start === null || end === null) {
+      return;
+    }
+    compareStart = start;
+    compareEnd = end;
+    onapplycompare?.({ compareStart: start, compareEnd: end, presetLabel: selectedPresetLabel });
+  }
+
+  // Cancel, Escape and an outside press all land here: whatever the session did to the draft or
+  // to the committed range goes back to what it was when the session opened.
+  function discardCompare(): void {
+    if (!sameInstant(compareStart, compareSnapshot.start)) {
+      compareStart = compareSnapshot.start;
+    }
+    if (!sameInstant(compareEnd, compareSnapshot.end)) {
+      compareEnd = compareSnapshot.end;
+    }
+    compareDraft.start = compareSnapshot.start;
+    compareDraft.end = compareSnapshot.end;
+  }
+
+  function abandonPicker(): void {
+    if (compareInMain) {
+      discardCompare();
+    }
+    closePicker();
+  }
+
   function openPicker(): void {
     // Pointer activation need not focus a button in WebKit. Return to the
     // invoking control, not an unrelated previously focused field or body.
@@ -347,8 +412,9 @@
     draftStart = rangeStart;
     draftEnd = rangeEnd;
     draftValue = value;
-    draftCompareStart = compareStart;
-    draftCompareEnd = compareEnd;
+    if (compareInMain) {
+      seedCompareSession();
+    }
 
     // Re-seed the session from the committed preset so the sidebar re-highlights it
     // by label. A direct calendar click later clears this, reverting to date matching.
@@ -500,7 +566,7 @@
   // a second click feeling dead — the panel could only be closed by clicking away.
   function togglePicker(): void {
     if (isOpen) {
-      closePicker();
+      abandonPicker();
     } else {
       openPicker();
     }
@@ -508,8 +574,7 @@
 
   function openComparePicker(): void {
     compareFocusReturnEl = compareTriggerRef ? findInteractive(compareTriggerRef) : null;
-    draftCompareStart = compareStart ?? null;
-    draftCompareEnd = compareEnd ?? null;
+    seedCompareSession();
     openCompare = true;
     tick().then(() => focusFirstElement(comparePanelRef));
   }
@@ -524,19 +589,12 @@
   }
 
   function handleApplyCompare(): void {
-    if (draftCompareStart !== null && draftCompareEnd !== null) {
-      compareStart = draftCompareStart;
-      compareEnd = draftCompareEnd;
-      onapplycompare?.({
-        compareStart: draftCompareStart,
-        compareEnd: draftCompareEnd,
-        presetLabel: selectedPresetLabel
-      });
-    }
+    commitCompare();
     closeComparePicker();
   }
 
   function handleCancelCompare(): void {
+    discardCompare();
     closeComparePicker();
   }
 
@@ -568,18 +626,8 @@
           presetLabel: selectedPresetLabel
         });
       }
-      if (
-        typeof compareCalendar === 'function' &&
-        draftCompareStart !== null &&
-        draftCompareEnd !== null
-      ) {
-        compareStart = draftCompareStart;
-        compareEnd = draftCompareEnd;
-        onapplycompare?.({
-          compareStart: draftCompareStart,
-          compareEnd: draftCompareEnd,
-          presetLabel: selectedPresetLabel
-        });
+      if (typeof compareCalendar === 'function') {
+        commitCompare();
       }
     } else {
       if (draftValue !== null) {
@@ -601,7 +649,7 @@
 
   function handleCancel(): void {
     oncancel?.();
-    closePicker();
+    abandonPicker();
   }
 
   function handlePreset(preset: DateRangePreset): void {
@@ -893,9 +941,10 @@
      outside both at once. */
   function handleDismissOutside(): void {
     if (isOpen) {
-      closePicker();
+      abandonPicker();
     }
     if (openCompare) {
+      discardCompare();
       closeComparePicker();
     }
   }
@@ -1053,7 +1102,7 @@
         >
           {#if typeof compareCalendar === 'function'}
             <div class="drp-compare-panel-body">
-              {@render compareCalendar()}
+              {@render compareCalendar(compareDraft)}
             </div>
           {/if}
           <div class="drp-footer">
@@ -1066,7 +1115,7 @@
               onclick={handleApplyCompare}
               ariaLabel="Apply compare selection"
               classes="drp-btn-apply"
-              disabled={draftCompareStart === null || draftCompareEnd === null}>Apply</Button
+              disabled={!canApplyCompare}>Apply</Button
             >
           </div>
         </div>
@@ -1442,7 +1491,7 @@
                causes a Svelte 5 runtime error. -->
           {#if typeof compareCalendar === 'function' && typeof compareTrigger !== 'function'}
             <div class="drp-compare-section">
-              {@render compareCalendar()}
+              {@render compareCalendar(compareDraft)}
             </div>
           {/if}
         </div>

package/dist/DateRangePicker/properties.d.ts

@@ -1,4 +1,12 @@
 import type { Snippet } from 'svelte';
+/**
+ * The compare range a `compareCalendar` snippet edits before Apply commits it. A plain
+ * reactive object, so a Calendar can bind to its fields.
+ */
+export type DateRangeCompareDraft = {
+    start: Date | null;
+    end: Date | null;
+};
 export type DateRangePreset = {
     label: string;
     getValue: () => {
@@ -102,8 +110,16 @@ export type OptionalDateRangePickerProperties = {
     compareStart?: Date | null;
     /** End of compare range (bindable). Used when compareCalendar snippet is provided. */
     compareEnd?: Date | null;
-    /** Snippet rendered in the compare-calendar slot. Consumer controls all compare UI. */
-    compareCalendar?: Snippet;
+    /**
+     * Snippet rendered in the compare-calendar slot. Consumer controls all compare UI.
+     *
+     * It receives the compare draft, a reactive `{ start, end }` that Apply commits and that
+     * Cancel, Escape and an outside press discard. Bind a Calendar to it:
+     * `bind:rangeStart={draft.start} bind:rangeEnd={draft.end}`. A snippet that takes no
+     * argument and edits `compareStart`/`compareEnd` directly still works: Apply keeps what
+     * it wrote, and Cancel restores the range the session opened with.
+     */
+    compareCalendar?: Snippet<[DateRangeCompareDraft]>;
     /** Which day of the week starts the calendar. 0=Sunday, 1=Monday. */
     weekStartsOn?: 0 | 1;
     /** BCP-47 locale string for date formatting. */

package/dist/ToolCallLog/ToolCallLog.svelte

@@ -289,10 +289,10 @@
     gap: var(--tool-call-log-gap, 8px);
   }
 
-  /* Bespoke <button> markup (Pill's root is a non-interactive <div> and can't carry
-     aria-expanded/button semantics — see docs), but its sizing recipe is deliberately
-     pulled from Pill's own tokens (line-height, cursor) so it reads as the same family
-     of control as the diffstat Pill badges nested inside it. */
+  /* Bespoke <button> markup (the chip holds mixed content -- spinner, label, meta and nested
+     diffstat Pill badges -- where Pill renders one `text` string; see docs), but its sizing
+     recipe is deliberately pulled from Pill's own tokens (line-height, cursor) so it reads as
+     the same family of control as the diffstat Pill badges nested inside it. */
   .chip {
     display: inline-flex;
     align-items: center;