@lapismd/design-core 0.1.2 → 0.2.0

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>({});
@@ -197,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>
@@ -204,10 +215,10 @@
       {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(
@@ -226,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/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/forms/confirm-button/ConfirmButton.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Button, type ButtonProps } from "../../shadcn/button/index.js";
+  import ConfirmDialog, {
+    type ConfirmDialogProps,
+  } from "../confirm-dialog/ConfirmDialog.svelte";
+  import type { Snippet } from "svelte";
+  let {
+    children,
+    disabled = false,
+    variant,
+    size = "default",
+    ...confirmation
+  }: Omit<ConfirmDialogProps, "open"> & {
+    children: Snippet;
+    disabled?: boolean;
+    variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
+  } = $props();
+  let open = $state(false);
+  let trigger = $state<HTMLButtonElement | null>(null);
+</script>
+
+<Button
+  bind:ref={trigger}
+  {disabled}
+  {size}
+  variant={variant ?? (confirmation.destructive ? "destructive" : "outline")}
+  onclick={() => (open = true)}>{@render children()}</Button
+>
+<ConfirmDialog
+  {...confirmation}
+  bind:open
+  onCloseAutoFocus={(event) => {
+    event.preventDefault();
+    trigger?.focus();
+    confirmation.onCloseAutoFocus?.(event);
+  }}
+/>

package/src/shared/forms/confirm-button/ConfirmButtonExample.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { ConfirmButton } from "@lapismd/design-core/forms/dialog";
+  let count = $state(0);
+</script>
+
+<ConfirmButton
+  title="Clear history?"
+  description="Remove saved history from this device."
+  destructive
+  onConfirm={() => {
+    count += 1;
+  }}>Clear history</ConfirmButton
+>
+<p>Cleared {count} time</p>

package/src/shared/forms/confirm-button/index.ts

@@ -0,0 +1 @@
+export { default as ConfirmButton } from "./ConfirmButton.svelte";

package/src/shared/forms/confirm-dialog/ConfirmDialog.css

@@ -0,0 +1,21 @@
+[data-ui-confirm-dialog][data-ui-part="alert-dialog-content"] {
+  width: min(28rem, calc(100vw - 2rem));
+  max-width: 28rem;
+  max-height: calc(100dvh - 2rem);
+  overflow: auto;
+  font-family: var(--font-sans, sans-serif);
+  font-size: var(--ui-dialog-frame-font-size, 0.875rem);
+}
+[data-ui-confirm-dialog] [data-slot="alert-dialog-title"] {
+  font-size: var(--ui-dialog-frame-title-size, 1.125rem);
+}
+[data-ui-confirm-dialog] [data-slot="alert-dialog-footer"] {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+[data-ui-confirm-dialog] [role="alert"] {
+  color: var(--destructive);
+  margin: 0;
+}

package/src/shared/forms/confirm-dialog/ConfirmDialog.svelte

@@ -0,0 +1,116 @@
+<script lang="ts" module>
+  import type { ComponentProps, Snippet } from "svelte";
+  import type * as AlertDialogTypes from "../../shadcn/alert-dialog/index.js";
+  export interface ConfirmDialogProps {
+    open?: boolean;
+    title: string | Snippet;
+    description: string | Snippet;
+    confirmLabel?: string | Snippet;
+    children?: Snippet;
+    confirmDisabled?: boolean;
+    cancelLabel?: string;
+    destructive?: boolean;
+    pending?: boolean;
+    error?: string;
+    /** Resolve false to retain an externally reported validation error. Reject to show a retryable error. */
+    onConfirm: () => void | boolean | Promise<void | boolean>;
+    onCancel?: () => void;
+    onOpenChange?: (open: boolean) => void;
+    onCloseAutoFocus?: ComponentProps<
+      typeof AlertDialogTypes.Content
+    >["onCloseAutoFocus"];
+    portalProps?: ComponentProps<
+      typeof AlertDialogTypes.Content
+    >["portalProps"];
+  }
+</script>
+
+<script lang="ts">
+  import * as AlertDialog from "../../shadcn/alert-dialog/index.js";
+  import { Button } from "../../shadcn/button/index.js";
+  import "./ConfirmDialog.css";
+  let {
+    open = $bindable(false),
+    title,
+    description,
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    children,
+    confirmDisabled = false,
+    destructive = false,
+    pending = false,
+    error = "",
+    onConfirm,
+    onCancel,
+    onOpenChange,
+    onCloseAutoFocus,
+    portalProps,
+  }: ConfirmDialogProps = $props();
+  let submitting = $state(false);
+  let failure = $state("");
+  const busy = $derived(pending || submitting);
+  $effect(() => {
+    if (!open) failure = "";
+  });
+  function changeOpen(next: boolean) {
+    if (busy) return;
+    open = next;
+    onOpenChange?.(next);
+    if (!next) onCancel?.();
+  }
+  async function confirm() {
+    if (busy) return;
+    submitting = true;
+    failure = "";
+    try {
+      if ((await onConfirm()) !== false) {
+        open = false;
+        onOpenChange?.(false);
+      }
+    } catch (cause) {
+      failure =
+        cause instanceof Error
+          ? cause.message
+          : "The action failed. Please try again.";
+    } finally {
+      submitting = false;
+    }
+  }
+</script>
+
+<AlertDialog.Root {open} onOpenChange={changeOpen}>
+  <AlertDialog.Content
+    data-ui-confirm-dialog=""
+    {...portalProps === undefined ? {} : { portalProps }}
+    {...onCloseAutoFocus === undefined ? {} : { onCloseAutoFocus }}
+    onEscapeKeydown={(event) => {
+      if (busy) event.preventDefault();
+    }}
+  >
+    <AlertDialog.Header>
+      <AlertDialog.Title
+        >{#if typeof title === "string"}{title}{:else}{@render title()}{/if}</AlertDialog.Title
+      >
+      <AlertDialog.Description
+        >{#if typeof description === "string"}{description}{:else}{@render description()}{/if}</AlertDialog.Description
+      >
+    </AlertDialog.Header>
+    {@render children?.()}
+    {#if failure || error}<p role="alert">{failure || error}</p>{/if}
+    <AlertDialog.Footer>
+      <Button
+        variant="outline"
+        disabled={busy}
+        onclick={() => changeOpen(false)}
+        autofocus>{cancelLabel}</Button
+      >
+      <Button
+        variant={destructive ? "destructive" : "default"}
+        disabled={busy || confirmDisabled}
+        aria-busy={busy}
+        onclick={confirm}
+        >{#if busy}Working…{:else if typeof confirmLabel === "string"}{confirmLabel}{:else}{@render confirmLabel()}{/if}</Button
+      >
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>

package/src/shared/forms/confirm-dialog/ConfirmDialogExample.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { ConfirmDialog } from "@lapismd/design-core/forms/dialog";
+  let open = $state(true);
+  let removed = $state(false);
+</script>
+
+<ConfirmDialog
+  bind:open
+  title="Remove record?"
+  description="Remove the selected record."
+  confirmLabel="Remove"
+  destructive
+  onConfirm={async () => {
+    removed = true;
+  }}
+/>
+<p>{removed ? "Removed" : "Available"}</p>

package/src/shared/forms/confirm-dialog/index.ts

@@ -0,0 +1,2 @@
+export { default as ConfirmDialog } from "./ConfirmDialog.svelte";
+export type { ConfirmDialogProps } from "./ConfirmDialog.svelte";

package/src/shared/forms/dialog-frame/DialogFrame.css

@@ -0,0 +1,130 @@
+[data-ui-dialog-frame][data-ui-part="dialog-content"] {
+  --ui-dialog-frame-width: 40rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: min(var(--ui-dialog-frame-width), calc(100vw - 2rem));
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100dvh - 2rem);
+  padding: 0;
+  overflow: hidden;
+  font-family: var(--font-sans, sans-serif);
+  font-size: var(--ui-dialog-frame-font-size, 0.875rem);
+  line-height: 1.5;
+}
+[data-ui-dialog-frame][data-frame-size="compact"] {
+  --ui-dialog-frame-width: 28rem;
+}
+[data-ui-dialog-frame][data-frame-size="wide"] {
+  --ui-dialog-frame-width: 68rem;
+}
+[data-ui-dialog-frame][data-frame-size="large"] {
+  --ui-dialog-frame-width: 56rem;
+  max-height: min(42rem, calc(100dvh - 2rem));
+}
+[data-ui-dialog-frame][data-frame-surface="inset"] {
+  background: var(--muted);
+}
+[data-ui-dialog-frame] > [data-ui-part="dialog-frame-header"] {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  flex: none;
+  padding: 1.25rem 1.5rem;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-heading"] {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 0.5rem;
+}
+[data-ui-dialog-frame] [data-slot="dialog-title"] {
+  font-size: var(--ui-dialog-frame-title-size, 1.125rem);
+  line-height: 1.4;
+  font-weight: 600;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-close"] {
+  flex: none;
+}
+[data-ui-dialog-frame][data-frame-surface="inset"]
+  > [data-ui-part="dialog-frame-header"] {
+  background: var(--muted);
+}
+[data-ui-dialog-frame][data-frame-surface="inset"]
+  [data-ui-part="dialog-frame-close"]:is(:hover, :focus-visible) {
+  background: var(--background);
+  color: var(--foreground);
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-layout"] {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-sidebar"] {
+  flex: 0 0 10rem;
+  padding: 0.5rem 1rem 1rem;
+  background: var(--muted);
+}
+[data-ui-dialog-frame][data-frame-surface="inset"]
+  [data-ui-part="dialog-frame-sidebar"] {
+  flex-basis: 13rem;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-main"] {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+[data-ui-dialog-frame][data-frame-surface="inset"]
+  [data-ui-part="dialog-frame-main"] {
+  margin: 0 1rem 1rem 0;
+  border-radius: 1rem;
+  background: var(--background);
+  overflow: hidden;
+}
+[data-ui-dialog-frame] .ui-dialog-frame-scroll {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+[data-ui-dialog-frame]
+  .ui-dialog-frame-scroll
+  > [data-ui-part="scroll-area-viewport"] {
+  flex: 1;
+  height: auto;
+  min-height: 0;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-body"] {
+  padding: 0.5rem 1.5rem 1.5rem;
+}
+[data-ui-dialog-frame][data-frame-padding="none"]
+  [data-ui-part="dialog-frame-body"] {
+  padding: 0;
+}
+[data-ui-dialog-frame] [data-ui-part="dialog-frame-footer"] {
+  display: flex;
+  flex: none;
+  flex-direction: row;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 1rem 1.5rem;
+  background: var(--popover);
+}
+@media (max-width: 40rem) {
+  [data-ui-dialog-frame] [data-ui-part="dialog-frame-layout"] {
+    flex-direction: column;
+  }
+  [data-ui-dialog-frame] [data-ui-part="dialog-frame-sidebar"] {
+    flex: none;
+  }
+  [data-ui-dialog-frame][data-frame-surface="inset"]
+    [data-ui-part="dialog-frame-main"] {
+    margin-left: 1rem;
+  }
+}