@lapismd/design-core 0.1.0 → 0.2.0

package/src/shared/diff/file-diff/FileDiff.css

@@ -26,12 +26,41 @@
 }
 
 .ui-diff-file-diff__row {
+  position: relative;
   display: flex;
   align-items: stretch;
   min-width: 0;
   width: 100%;
 }
 
+.ui-diff-file-diff__accessory {
+  position: sticky;
+  left: 0.125rem;
+  z-index: 2;
+  display: flex;
+  width: 0;
+  min-width: 0;
+  align-items: center;
+  align-self: stretch;
+  overflow: visible;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.ui-diff-file-diff__row:hover .ui-diff-file-diff__accessory,
+.ui-diff-file-diff__row:focus-within .ui-diff-file-diff__accessory {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (hover: none) {
+  .ui-diff-file-diff__accessory {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
 .ui-diff-file-diff__row[data-variant="added"] {
   background: var(--ui-diff-added-background);
 }
@@ -223,12 +252,50 @@
 .ui-diff-file-diff-composer__file {
   border: var(--ui-diff-frame-border);
   border-radius: var(--ui-diff-frame-radius);
-  overflow: hidden;
+  overflow: clip;
+  scroll-margin-top: var(--ui-diff-file-sticky-offset, 3.5rem);
+}
+
+.ui-diff-file-diff-composer__file[data-selected="true"] {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
 }
 
 .ui-diff-file-diff-composer__header {
+  display: flex;
+  min-height: 2.25rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
   padding: 0.375rem 0.75rem;
   border-bottom: 1px solid var(--ui-diff-border);
   background: var(--muted);
   font-weight: 650;
 }
+
+.ui-diff-file-diff-composer__file[data-collapsed="true"]
+  .ui-diff-file-diff-composer__header {
+  border-bottom: 0;
+}
+
+.ui-diff-file-diff-composer[data-sticky-headers="true"]
+  .ui-diff-file-diff-composer__header {
+  position: sticky;
+  top: var(--ui-diff-file-sticky-offset, 0);
+  z-index: 3;
+}
+
+.ui-diff-file-diff-composer__header-start,
+.ui-diff-file-diff-composer__header-leading,
+.ui-diff-file-diff-composer__header-trailing {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ui-diff-file-diff-composer__header-start > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/shared/diff/file-diff/FileDiff.svelte

@@ -40,6 +40,7 @@
     language,
     scrollTo,
     lineAccessory,
+    lineAnnotation,
   }: {
     path: string;
     oldText?: string | null;
@@ -51,6 +52,8 @@
     language?: string;
     scrollTo?: FileDiffScrollTarget | null;
     lineAccessory?: Snippet<[FileDiffLineContext]>;
+    /** Host-owned content inserted after each matching unified diff row. */
+    lineAnnotation?: Snippet<[FileDiffLineContext]>;
   } = $props();
 
   let expandedBlocks = $state<ExpandedBlockState>({});
@@ -107,10 +110,7 @@
           if (candidate.scrollTop !== target.scrollTop) {
             candidate.scrollTop = target.scrollTop;
           }
-          if (
-            syncHorizontal &&
-            candidate.scrollLeft !== target.scrollLeft
-          ) {
+          if (syncHorizontal && candidate.scrollLeft !== target.scrollLeft) {
             candidate.scrollLeft = target.scrollLeft;
           }
         }
@@ -200,6 +200,14 @@
     data-diff-line-variant={row.variant}
     data-variant={row.variant}
   >
+    {#if lineAccessory}
+      <div
+        class="ui-diff-file-diff__accessory"
+        data-ui-part="diff-row-accessory"
+      >
+        {@render lineAccessory(lineContext(row))}
+      </div>
+    {/if}
     <span class="ui-diff-file-diff__gutter" aria-hidden="true">
       {row.lineNumber ?? ""}
     </span>
@@ -207,17 +215,17 @@
       {row.variant === "added" ? "+" : row.variant === "removed" ? "-" : " "}
     </span>
     {@render highlightedText(row)}
-    {#if lineAccessory}
-      {@render lineAccessory(lineContext(row))}
-    {/if}
   </div>
+  {#if lineAnnotation}
+    {@render lineAnnotation(lineContext(row))}
+  {/if}
 {/snippet}
 
 {#snippet splitCell(
-    row: UnifiedDiffRow | null,
-    side: "left" | "right",
-    pairKey: string,
-  )}
+  row: UnifiedDiffRow | null,
+  side: "left" | "right",
+  pairKey: string,
+)}
   {#if row}
     <div
       class="ui-diff-file-diff__row"
@@ -229,13 +237,18 @@
       data-side={side}
       data-pair-key={pairKey}
     >
+      {#if lineAccessory}
+        <div
+          class="ui-diff-file-diff__accessory"
+          data-ui-part="diff-row-accessory"
+        >
+          {@render lineAccessory(lineContext(row))}
+        </div>
+      {/if}
       <span class="ui-diff-file-diff__gutter" aria-hidden="true">
         {lineNumberForSplitSide(row, side) ?? ""}
       </span>
       {@render highlightedText(row)}
-      {#if lineAccessory}
-        {@render lineAccessory(lineContext(row))}
-      {/if}
     </div>
   {:else}
     <div

package/src/shared/diff/file-diff/FileDiffComposer.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import { tick } from "svelte";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { Button } from "../../shadcn/button/index.js";
   import { truncatePathMiddle } from "../core/unified-diff.js";
   import FileDiff from "./FileDiff.svelte";
   import type {
+    FileDiffComposerFileContext,
     FileDiffFile,
+    FileDiffFileScrollTarget,
     FileDiffLineContext,
     FileDiffScrollTarget,
     FileDiffViewMode,
@@ -13,48 +19,124 @@
   let {
     files,
     viewMode = "unified",
+    selectedPath,
+    collapsedFilePaths = [],
+    scrollToFile,
+    stickyHeaders = false,
     scrollTo,
+    onFileToggle,
+    fileHeaderLeading,
+    fileHeaderTrailing,
     lineAccessory,
+    lineAnnotation,
   }: {
     files: FileDiffFile[];
     viewMode?: FileDiffViewMode;
+    selectedPath?: string;
+    collapsedFilePaths?: readonly string[];
+    scrollToFile?: FileDiffFileScrollTarget | null;
+    stickyHeaders?: boolean;
     scrollTo?: FileDiffScrollTarget | null;
+    onFileToggle?: (path: string, collapsed: boolean) => void;
+    fileHeaderLeading?: Snippet<[FileDiffComposerFileContext]>;
+    fileHeaderTrailing?: Snippet<[FileDiffComposerFileContext]>;
     lineAccessory?: Snippet<[FileDiffLineContext]>;
+    /** Host-owned content inserted after each matching unified diff row. */
+    lineAnnotation?: Snippet<[FileDiffLineContext]>;
   } = $props();
+
+  let rootEl: HTMLElement | null = $state(null);
+
+  function fileContext(file: FileDiffFile): FileDiffComposerFileContext {
+    return {
+      file,
+      path: file.path,
+      collapsed: collapsedFilePaths.includes(file.path),
+      selected: selectedPath === file.path,
+    };
+  }
+
+  $effect(() => {
+    const target = scrollToFile;
+    if (!target || !rootEl) return;
+    target.requestId;
+    void tick().then(() => {
+      const section = [
+        ...(rootEl?.querySelectorAll<HTMLElement>("[data-diff-file-path]") ??
+          []),
+      ].find((candidate) => candidate.dataset.diffFilePath === target.path);
+      section?.scrollIntoView({ block: "start", inline: "nearest" });
+    });
+  });
 </script>
 
 <div
+  bind:this={rootEl}
   class="ui-diff-file-diff-composer"
   data-ui-component="file-diff-composer"
   data-ui-part="file-diff-composer"
+  data-sticky-headers={stickyHeaders}
 >
   {#if files.length === 0}
     <p class="ui-diff-file-diff__empty">No file diffs</p>
   {:else}
     {#each files as file (file.path)}
+      {@const context = fileContext(file)}
       <section
         class="ui-diff-file-diff-composer__file"
         data-ui-part="file-section"
         data-diff-file-path={file.path}
+        data-selected={context.selected}
+        data-collapsed={context.collapsed}
       >
         <header class="ui-diff-file-diff-composer__header">
-          <span title={file.path}>{truncatePathMiddle(file.path)}</span>
+          <div class="ui-diff-file-diff-composer__header-start">
+            {#if fileHeaderLeading}
+              <div class="ui-diff-file-diff-composer__header-leading">
+                {@render fileHeaderLeading(context)}
+              </div>
+            {/if}
+            {#if onFileToggle}
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-xs"
+                aria-label={`${context.collapsed ? "Expand" : "Collapse"} ${file.path}`}
+                onclick={() => onFileToggle?.(file.path, !context.collapsed)}
+              >
+                {#if context.collapsed}
+                  <ChevronRightIcon aria-hidden="true" />
+                {:else}
+                  <ChevronDownIcon aria-hidden="true" />
+                {/if}
+              </Button>
+            {/if}
+            <span title={file.path}>{truncatePathMiddle(file.path)}</span>
+          </div>
+          {#if fileHeaderTrailing}
+            <div class="ui-diff-file-diff-composer__header-trailing">
+              {@render fileHeaderTrailing(context)}
+            </div>
+          {/if}
         </header>
-        <FileDiff
-          path={file.path}
-          oldText={file.oldText}
-          newText={file.newText}
-          patch={file.patch}
-          language={file.language}
-          {viewMode}
-          scrollTo={scrollTo?.path === file.path ||
-          (scrollTo != null &&
-            scrollTo.path == null &&
-            files[0]?.path === file.path)
-            ? scrollTo
-            : null}
-          {lineAccessory}
-        />
+        {#if !context.collapsed}
+          <FileDiff
+            path={file.path}
+            oldText={file.oldText}
+            newText={file.newText}
+            patch={file.patch}
+            language={file.language}
+            {viewMode}
+            scrollTo={scrollTo?.path === file.path ||
+            (scrollTo != null &&
+              scrollTo.path == null &&
+              files[0]?.path === file.path)
+              ? scrollTo
+              : null}
+            {lineAccessory}
+            {lineAnnotation}
+          />
+        {/if}
       </section>
     {/each}
   {/if}

package/src/shared/diff/file-diff/index.ts

@@ -2,7 +2,9 @@ export { default as FileDiff } from "./FileDiff.svelte";
 export { default as FileDiffComposer } from "./FileDiffComposer.svelte";
 export { resolveDiffLanguage } from "./language.js";
 export type {
+  FileDiffComposerFileContext,
   FileDiffFile,
+  FileDiffFileScrollTarget,
   FileDiffLineContext,
   FileDiffScrollTarget,
   FileDiffViewMode,

package/src/shared/diff/file-diff/types.ts

@@ -17,6 +17,19 @@ export interface FileDiffFile {
   language?: string;
 }
 
+export interface FileDiffComposerFileContext {
+  file: FileDiffFile;
+  path: string;
+  collapsed: boolean;
+  selected: boolean;
+}
+
+export interface FileDiffFileScrollTarget {
+  path: string;
+  /** Changes for every scroll request, including repeated requests for one path. */
+  requestId: string | number;
+}
+
 export interface FileDiffScrollTarget {
   path?: string;
   lineNumber: number;

package/src/shared/diff/file-listing/FileListingViewModeToggle.css

@@ -1,14 +1,51 @@
 @import "../diff.tokens.css";
 
-[data-ui-component="file-listing-view-mode-toggle"] svg {
-  width: 0.875rem;
-  height: 0.875rem;
+[data-ui-component="file-listing-view-mode-toggle"][data-ui-part="toggle-group"] {
+  display: inline-flex;
+  align-items: stretch;
+  width: fit-content;
+  height: 1.375rem;
+  gap: 0;
+  overflow: hidden;
+  border: 1px solid var(--ui-diff-border, var(--border, #d4d4d4));
+  border-radius: calc(var(--radius, 0.5rem) * 0.6);
+  background: var(--ui-diff-surface, var(--background, #fff));
+  box-shadow: none;
 }
 
 [data-ui-component="file-listing-view-mode-toggle"]
-  [data-ui-part="toggle-group-item"][data-state="on"],
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-size="sm"],
 [data-ui-component="file-listing-view-mode-toggle"]
-  [data-ui-part="toggle-group-item"][data-state="on"]:hover {
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-variant="outline"] {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  width: 1.375rem;
+  min-width: 1.375rem;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background-color: transparent;
+}
+
+[data-ui-component="file-listing-view-mode-toggle"]
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"]
+  + [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"] {
+  border-left: 1px solid var(--ui-diff-border, var(--border, #d4d4d4));
+}
+
+[data-ui-component="file-listing-view-mode-toggle"]
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"]
+  svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+[data-ui-component="file-listing-view-mode-toggle"]
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-state="on"],
+[data-ui-component="file-listing-view-mode-toggle"]
+  [data-ui-component="toggle-group"][data-ui-part="toggle-group-item"][data-state="on"]:hover {
   background-color: var(--ui-diff-selected);
   color: inherit;
 }

package/src/shared/diff/index.ts

@@ -14,7 +14,9 @@ export {
   FileDiff,
   FileDiffComposer,
   resolveDiffLanguage,
+  type FileDiffComposerFileContext,
   type FileDiffFile,
+  type FileDiffFileScrollTarget,
   type FileDiffLineContext,
   type FileDiffScrollTarget,
   type FileDiffViewMode,

package/src/shared/diff/merge-editor/MergeEditor.svelte

@@ -187,9 +187,7 @@
       const viewport = view.querySelector<HTMLElement>(
         "[data-ui-part='scroll-area-viewport']",
       );
-      return viewport
-        ? [{ side: view.dataset.mergeSide, viewport }]
-        : [];
+      return viewport ? [{ side: view.dataset.mergeSide, viewport }] : [];
     });
     if (targets.length === 0) return;
     let syncing = false;
@@ -202,10 +200,7 @@
           if (candidate.viewport.scrollTop !== target.viewport.scrollTop) {
             candidate.viewport.scrollTop = target.viewport.scrollTop;
           }
-          if (
-            !syncAcross &&
-            candidate.side !== target.side
-          ) {
+          if (!syncAcross && candidate.side !== target.side) {
             continue;
           }
           if (candidate.viewport.scrollLeft !== target.viewport.scrollLeft) {

package/src/shared/filter/filter-query/filters.ts

@@ -350,14 +350,14 @@ export class BooleanFilter extends Filter {
     const size = this.args.length;
     if (this.op == FilterType.NOT) {
       if (size == 1) {
-        return `-${this.args[0]}`;
+        return `-${this.args[0]!}`;
       }
       return `-(${this.args.map((it) => it.toString()).join("")})`;
     }
 
     const separator = this.op === FilterType.AND ? " " : ",";
     return size == 1
-      ? this.args[0].toString()
+      ? this.args[0]!.toString()
       : `(${this.args.map((it) => it.toString()).join(separator)})`;
   }
 

package/src/shared/filter/filter-query/parser.ts

@@ -310,13 +310,14 @@ export class DateExpression {
 
   resolve(): DateExpressionInput | DateRange {
     if (this.#operands.length == 1) {
-      if (this.#operands[0] instanceof DateExpression) {
-        return this.#operands[0].resolve();
+      const operand = this.#operands[0]!;
+      if (operand instanceof DateExpression) {
+        return operand.resolve();
       } else {
-        return this.#operands[0];
+        return operand;
       }
     }
-    return this.eval(this.#operands[0], this.#operands[1]);
+    return this.eval(this.#operands[0]!, this.#operands[1]!);
   }
 
   private eval(left: DateExpressionInput, right: DateExpressionInput) {
@@ -510,9 +511,9 @@ export class Parser {
     }, this.leave.bind(this));
 
     if (this.stack.length == 1) {
-      const filter = this.stack[0];
+      const filter = this.stack[0]!;
       if (filter instanceof BooleanFilter) {
-        this.predicate = filter.args.length == 1 ? filter.args[0] : filter;
+        this.predicate = filter.args.length == 1 ? filter.args[0]! : filter;
       } else {
         this.errors.push(
           `Expected {${filter}} to be instance of BooleanFilter`,
@@ -658,7 +659,7 @@ export class Parser {
       return new NumberFilter(this.content(node));
     } else if (node.name === "Regex") {
       const value = this.content(node).match(/\/(.+)\/([a-z]+)?/) || [];
-      return new PatternFilter(new RegExp(value[1], value[2] ?? ""));
+      return new PatternFilter(new RegExp(value[1] ?? "", value[2] ?? ""));
     } else if (node.name === "AccountName") {
       return new AccountFilter(this.content(node));
     }
@@ -704,7 +705,7 @@ export class Parser {
   private dateExpression(node: SyntaxNode | null | undefined) {
     return dateExpression(node, {
       content: this.content.bind(this),
-      now: this.options.now,
+      ...(this.options.now === undefined ? {} : { now: this.options.now }),
     });
   }
 }

package/src/shared/filter/power-search/PowerSearch.svelte

@@ -207,7 +207,7 @@
         {disabled}
         ariaLabel="Add filter field"
         onSelectField={openAddForField}
-        onCommitText={contentSearchFieldKey ? handleCommitText : undefined}
+        {...contentSearchFieldKey ? { onCommitText: handleCommitText } : {}}
       />
     </div>
 

package/src/shared/filter/search-filter-bar/SearchFilterBar.svelte

@@ -112,12 +112,12 @@
       {ariaLabel}
       shortcut={!showFilterToggle || filtersExpanded ? shortcut : ""}
       {disabled}
-      {inputId}
+      {...inputId === undefined ? {} : { inputId }}
       {inputMode}
       {clearSearchLabel}
       {error}
       {editorExtensions}
-      {filterSyntax}
+      {...filterSyntax === undefined ? {} : { filterSyntax }}
       {onValueChange}
       {onClearSearch}
     >

package/src/shared/filter/search-filter-bar/SearchFilterInput.svelte

@@ -403,7 +403,7 @@
   {#key `${chipEditSession.from}:${chipEditSession.to}:${chipEditSession.field}`}
     <SearchFilterPredicateEditor
       session={chipEditSession}
-      {filterSyntax}
+      {...filterSyntax === undefined ? {} : { filterSyntax }}
       {disabled}
       onCancel={closePredicateChipEditor}
       onApply={applyPredicateChipEdit}

package/src/shared/filter/search-filter-bar/SearchFilterPredicateEditor.svelte

@@ -158,7 +158,7 @@
   <div class="cv-search-filter-bar__predicate-editor-row">
     <SearchFilterFieldAutocomplete
       value={field}
-      {filterSyntax}
+      {...filterSyntax === undefined ? {} : { filterSyntax }}
       {disabled}
       onValueChange={handleFieldChange}
     />

package/src/shared/filter/search-filter-bar/search-filter-syntax.ts

@@ -261,7 +261,7 @@ function operatorDescription(operator: string) {
 function valueCompletions(field: SearchFilterField): Completion[] {
   return uniqueValues(field).map((value) => ({
     label: value.label ?? value.value,
-    detail: value.description,
+    ...(value.description === undefined ? {} : { detail: value.description }),
     type: "constant",
     apply: value.apply ?? value.value,
   }));

package/src/shared/forms/autocomplete-input/AutocompleteInput.svelte

@@ -52,6 +52,7 @@
   let editing = $state(false);
   let filterValue = $state("");
   let activeIndex = $state(0);
+  let blurFocusTarget: HTMLElement | null = null;
   const listId = `autocomplete-list-${Math.random().toString(36).slice(2)}`;
 
   const normalizedSuggestions = $derived.by(() => {
@@ -115,10 +116,10 @@
     void onCommit(suggestion);
   }
 
-  function commitValue() {
+  function commitValue(close = true) {
     const committed = value.trim();
     if (!committed) return;
-    if (!forceOpen) open = false;
+    if (close && !forceOpen) open = false;
     editing = false;
     filterValue = "";
     void onCommit(committed);
@@ -132,6 +133,13 @@
     activeIndex = 0;
   }
 
+  function handleCloseAutoFocus(event: Event) {
+    event.preventDefault();
+    const target = blurFocusTarget;
+    blurFocusTarget = null;
+    target?.focus({ preventScroll: true });
+  }
+
   function handleKeydown(event: KeyboardEvent) {
     if (event.key === "ArrowDown") {
       event.preventDefault();
@@ -166,9 +174,8 @@
     }
     if (event.key === "Tab") {
       if (commitOnTab && value.trim()) {
-        commitValue();
+        commitValue(false);
       }
-      closeList();
       return;
     }
     if (event.key === "Backspace" && !value) {
@@ -213,11 +220,16 @@
         activeIndex = 0;
       }}
       onkeydown={handleKeydown}
-      onblur={() => {
+      onblur={(event) => {
+        blurFocusTarget =
+          event.relatedTarget instanceof HTMLElement
+            ? event.relatedTarget
+            : null;
         if (commitOnBlur) {
           commitValue();
+        } else {
+          closeList();
         }
-        closeList();
       }}
     />
     <Popover.Content
@@ -227,7 +239,7 @@
       customAnchor={input}
       {portalProps}
       onOpenAutoFocus={(event) => event.preventDefault()}
-      onCloseAutoFocus={(event) => event.preventDefault()}
+      onCloseAutoFocus={handleCloseAutoFocus}
     >
       <div id={listId} class="ui-autocomplete-input__list" role="listbox">
         {#each normalizedSuggestions as suggestion, index (suggestion)}