@adea-ai/ui 0.60.3 → 0.61.0

package/src/components/ui/dialog/dialog.tsx

@@ -0,0 +1,138 @@
+import { Dialog as KobalteDialog } from '@kobalte/core/dialog'
+import { X } from 'lucide-solid'
+import type { ComponentProps, JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '#lib/overlay'
+import { cn } from '#lib/utils'
+
+/**
+ * Dialog.
+ *
+ * A modal surface for a decision or a short task. `Dialog.Portal` keeps the
+ * panel out of the app's stacking and overflow contexts, `Dialog.Overlay`
+ * dims what is behind it, and Kobalte handles the focus trap, the escape key,
+ * scroll locking and returning focus to the trigger on close.
+ *
+ * The close button is part of the content rather than optional, because every
+ * modal needs a way out that is not the keyboard. A dialog whose only exit is
+ * Escape is a trap for anyone using a pointer.
+ */
+export function Dialog(props: ComponentProps<typeof KobalteDialog>) {
+  return <KobalteDialog {...props} />
+}
+
+export function DialogTrigger(props: ComponentProps<typeof KobalteDialog.Trigger>) {
+  return <KobalteDialog.Trigger {...props} />
+}
+
+export function DialogPortal(props: ComponentProps<typeof KobalteDialog.Portal>) {
+  return <KobalteDialog.Portal {...props} />
+}
+
+export function DialogOverlay(props: ComponentProps<typeof KobalteDialog.Overlay>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteDialog.Overlay
+      class={cn(
+        overlayScrim,
+        'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export type DialogContentProps = ComponentProps<typeof KobalteDialog.Content> & {
+  /**
+   * Replaces the default close button. Pass `false` to remove it — only for a
+   * dialog that cannot be dismissed (an update that must finish); anything the
+   * user can escape from needs the button.
+   */
+  closeButton?: JSX.Element | false
+}
+
+export function DialogContent(props: DialogContentProps) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'closeButton'])
+
+  return (
+    <KobalteDialog.Portal>
+      <DialogOverlay />
+      <div class={overlayPositioner}>
+        <KobalteDialog.Content
+          class={cn(overlaySurface, overlayMotion, 'grid w-full max-w-lg gap-4 p-5', local.class)}
+          {...rest}
+        >
+          {local.children}
+          <Show when={local.closeButton !== false}>
+            <KobalteDialog.CloseButton
+              aria-label="Close"
+              class={cn(
+                'absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground',
+                'transition-colors ease-out hover:bg-surface-hover hover:text-foreground',
+                'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle outline-none'
+              )}
+            >
+              {local.closeButton ?? <X class="size-4" />}
+            </KobalteDialog.CloseButton>
+          </Show>
+        </KobalteDialog.Content>
+      </div>
+    </KobalteDialog.Portal>
+  )
+}
+
+export function DialogHeader(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="dialog-header"
+      class={cn('flex flex-col gap-1.5 pe-6 text-start', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function DialogFooter(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="dialog-footer"
+      class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function DialogTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteDialog.Title
+      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function DialogDescription(props: ComponentProps<typeof KobalteDialog.Description>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteDialog.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />
+  )
+}
+
+export function DialogCloseButton(props: ComponentProps<typeof KobalteDialog.CloseButton>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteDialog.CloseButton class={cn('focus-ring', local.class)} {...rest} />
+}
+
+/**
+ * The close control, unstyled and polymorphic — for a footer's text "Cancel" or
+ * "Close", which is a different control from the corner icon `DialogCloseButton`
+ * draws. Take it as `as={Button}` so it carries the button's variants rather than
+ * a copied class string.
+ */
+export function DialogClose(props: ComponentProps<typeof KobalteDialog.CloseButton>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteDialog.CloseButton class={cn('focus-ring', local.class)} {...rest} />
+}

package/src/components/ui/dialog/index.ts

@@ -0,0 +1,14 @@
+export {
+  Dialog,
+  DialogClose,
+  DialogCloseButton,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  type DialogContentProps,
+} from './dialog'

package/src/components/ui/diff-block/diff-block.tsx

@@ -0,0 +1,286 @@
+import { createMemo, For, Show, splitProps, type ComponentProps, type JSX } from 'solid-js'
+import { cva, type VariantProps } from '#lib/variants'
+import { cn } from '#lib/utils'
+
+/**
+ * DiffBlock.
+ *
+ * A unified diff, classified and toned. Parsing lives here because the
+ * classification is the part that is easy to get subtly wrong and impossible to
+ * fix from a caller: whether a line is an addition, a deletion, a hunk header,
+ * a file header, or context depends on state — a line beginning with `+++` is a
+ * file header *before* the first hunk and an added line beginning with `++`
+ * *inside* one — and a renderer that tested prefixes without that state would
+ * mis-colour real patches.
+ *
+ * The line grammar:
+ *
+ * | Prefix | Meaning |
+ * | --- | --- |
+ * | `diff --git`, `index`, `---`, `+++` (before a hunk) | file header |
+ * | `@@` | hunk header |
+ * | `+` | addition |
+ * | `-` | deletion |
+ * | `\` | the "no newline at end of file" marker |
+ * | anything else, including a leading space | context |
+ *
+ * Tones are pairs of surface and text, so an addition is readable in both
+ * polarities and with any accent — the greens and reds are the theme's own
+ * `success` and `destructive` at low alpha, not fixed hexes. Colour is never the
+ * only signal: the gutter carries `+` or `-` as well, which is what makes the
+ * block usable in greyscale and by anyone who cannot separate the two hues.
+ *
+ * Split (side-by-side) view is deliberately not implemented. It is a different
+ * layout algorithm — pairing deletions with additions across hunks — and a
+ * half-correct one is worse than none. `view="unified"` is the only value, and
+ * the prop exists so that adding the second is not a breaking change.
+ */
+
+export type DiffLineKind = 'add' | 'delete' | 'context' | 'hunk' | 'header' | 'meta'
+
+export type DiffLine = Readonly<{
+  kind: DiffLineKind
+  /** The line without its diff prefix. */
+  text: string
+  /** The prefix as written: `+`, `-`, a space, or nothing for a header. */
+  marker: string
+  /** The old-side line number, when the line exists on the old side. */
+  oldLine?: number
+  /** The new-side line number, when the line exists on the new side. */
+  newLine?: number
+}>
+
+const HUNK_HEADER = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/
+
+/**
+ * Classify a unified diff.
+ *
+ * `headerState` is what makes `---` and `+++` unambiguous: git writes them as
+ * file headers before the first `@@` and as content after it, and the two need
+ * different tones. `oldLine`/`newLine` are tracked so the gutter can number both
+ * sides — the numbers a reader uses to find the change in their editor.
+ */
+export function parseDiff(patch: string): readonly DiffLine[] {
+  const lines: DiffLine[] = []
+  let inHunk = false
+  let oldLine = 0
+  let newLine = 0
+
+  for (const raw of patch.replace(/\n$/, '').split('\n')) {
+    if (HUNK_HEADER.test(raw)) {
+      const match = HUNK_HEADER.exec(raw)!
+      oldLine = Number(match[1])
+      newLine = Number(match[2])
+      inHunk = true
+      lines.push({ kind: 'hunk', text: raw, marker: '' })
+      continue
+    }
+
+    if (!inHunk) {
+      const isFileHeader =
+        raw.startsWith('diff --git') ||
+        raw.startsWith('index ') ||
+        raw.startsWith('new file') ||
+        raw.startsWith('deleted file') ||
+        raw.startsWith('similarity index') ||
+        raw.startsWith('rename ') ||
+        raw.startsWith('--- ') ||
+        raw.startsWith('+++ ')
+      lines.push({ kind: isFileHeader ? 'header' : 'meta', text: raw, marker: '' })
+      continue
+    }
+
+    if (raw.startsWith('\\')) {
+      lines.push({ kind: 'meta', text: raw, marker: '' })
+      continue
+    }
+
+    const marker = raw[0] ?? ' '
+    if (marker === '+') {
+      lines.push({ kind: 'add', text: raw.slice(1), marker, newLine })
+      newLine += 1
+    } else if (marker === '-') {
+      lines.push({ kind: 'delete', text: raw.slice(1), marker, oldLine })
+      oldLine += 1
+    } else {
+      lines.push({ kind: 'context', text: raw.slice(1), marker: ' ', oldLine, newLine })
+      oldLine += 1
+      newLine += 1
+    }
+  }
+
+  return lines
+}
+
+/**
+ * Whether a line gets gutter numbers. A hunk header and a file header are
+ * structural, so numbering them would put a number on a line that has none.
+ */
+function numbered(line: DiffLine, show: boolean | undefined): boolean {
+  return Boolean(show) && line.kind !== 'hunk' && line.kind !== 'header' && line.kind !== 'meta'
+}
+
+/** The counts a diff summary reports: how much was added and removed. */
+export function diffStats(
+  lines: readonly DiffLine[]
+): Readonly<{ added: number; removed: number }> {
+  let added = 0
+  let removed = 0
+  for (const line of lines) {
+    if (line.kind === 'add') added += 1
+    else if (line.kind === 'delete') removed += 1
+  }
+  return { added, removed }
+}
+
+/**
+ * The target path from a unified diff's file header. Prefers `+++ b/<path>` —
+ * git's explicit new-side marker — and skips `/dev/null`, which marks an added
+ * or deleted side rather than naming a file. Only lines outside a hunk are
+ * considered, for the same reason the parser tracks state.
+ */
+export function diffTargetPath(patch: string): string | null {
+  for (const line of patch.split('\n')) {
+    if (line.startsWith('@@')) break
+    const git = /^\+\+\+ b\/(.+?)(?:\t|$)/.exec(line)
+    if (git) return git[1]!
+    const plain = /^\+\+\+ ([^\s/][^\t]*?)(?:\t|$)/.exec(line)
+    if (plain && plain[1] !== '/dev/null') return plain[1]!
+    const fromHeader = /^diff --git a\/.+ b\/(.+)/.exec(line)
+    if (fromHeader) return fromHeader[1]!
+  }
+  return null
+}
+
+export const diffLineVariants = cva('flex items-baseline font-mono text-xs', {
+  variants: {
+    kind: {
+      add: 'bg-success-subtle text-foreground',
+      delete: 'bg-destructive-subtle text-foreground',
+      context: 'text-foreground',
+      hunk: 'bg-muted text-muted-foreground',
+      header: 'bg-muted font-semibold text-foreground',
+      meta: 'text-muted-foreground italic',
+    },
+  },
+  defaultVariants: { kind: 'context' },
+})
+
+export type DiffBlockProps = Omit<ComponentProps<'div'>, 'children'> &
+  VariantProps<typeof diffLineVariants> & {
+    /** The unified diff. */
+    patch: string
+    /** A filename. Defaults to the path in the patch's header, or "diff". */
+    title?: string
+    /** False while the patch is still streaming. */
+    complete?: boolean
+    /** Show the two line-number gutters. Off for a fragment with no line numbers. */
+    showLineNumbers?: boolean
+    /** Extra header controls. */
+    actions?: JSX.Element
+  }
+
+export function DiffBlock(props: DiffBlockProps) {
+  const [local, rest] = splitProps(props, [
+    'patch',
+    'title',
+    'complete',
+    'showLineNumbers',
+    'actions',
+    'class',
+  ])
+
+  const lines = createMemo(() => parseDiff(local.patch))
+  const stats = createMemo(() => diffStats(lines()))
+  const name = () => local.title ?? diffTargetPath(local.patch)?.split('/').pop() ?? 'diff'
+
+  return (
+    <div
+      class={cn('overflow-hidden rounded-xl border border-border bg-card', local.class)}
+      {...rest}
+    >
+      <div class="flex items-center justify-between gap-2 border-b border-border px-3 py-1">
+        <span class="flex min-w-0 items-baseline gap-2">
+          <span class="truncate font-mono text-xs text-foreground">{name()}</span>
+          {/* The counts are text, so the summary survives greyscale and a reader
+              who cannot separate the two line tones still gets the shape of it. */}
+          <span class="shrink-0 font-mono text-2xs text-muted-foreground">
+            <span class="text-success">+{stats().added}</span>{' '}
+            <span class="text-destructive">−{stats().removed}</span>
+          </span>
+        </span>
+        {local.actions}
+      </div>
+      <div
+        class="scroll-fade overflow-x-auto"
+        tabindex="0"
+        role="region"
+        aria-label={`Diff for ${name()}`}
+      >
+        <div class="min-w-fit">
+          <For each={lines()}>
+            {(line) => (
+              <div class={diffLineVariants({ kind: line.kind })}>
+                <Show when={numbered(line, local.showLineNumbers)}>
+                  <span
+                    class="w-10 shrink-0 pr-2 text-right text-2xs text-muted-foreground tabular-nums select-none"
+                    aria-hidden="true"
+                  >
+                    {line.oldLine ?? ''}
+                  </span>
+                  <span
+                    class="w-10 shrink-0 pr-2 text-right text-2xs text-muted-foreground tabular-nums select-none"
+                    aria-hidden="true"
+                  >
+                    {line.newLine ?? ''}
+                  </span>
+                </Show>
+                {/* The marker is the signal that is not a colour. */}
+                <span class="w-4 shrink-0 text-center select-none" aria-hidden="true">
+                  {line.kind === 'add' ? '+' : line.kind === 'delete' ? '−' : ''}
+                </span>
+                <span class="min-w-0 whitespace-pre pr-4">
+                  {/* A screen reader gets the kind as a word, not a glyph. */}
+                  <span class="visually-hidden">
+                    {line.kind === 'add' ? 'Added: ' : line.kind === 'delete' ? 'Removed: ' : ''}
+                  </span>
+                  {line.text || ' '}
+                </span>
+              </div>
+            )}
+          </For>
+        </div>
+        <Show when={!local.complete}>
+          <p class="px-3 py-1 text-xs text-muted-foreground italic">Generating diff…</p>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * A diff summary line, for a list of changes rather than one patch: the file and
+ * its counts. Uses `CodeBlock`'s height rules and nothing else, because a summary
+ * is a row and not a surface.
+ */
+export function DiffSummary(props: { patch: string; class?: string; onSelect?: () => void }) {
+  const stats = createMemo(() => diffStats(parseDiff(props.patch)))
+  const name = () => diffTargetPath(props.patch) ?? 'diff'
+
+  return (
+    <button
+      type="button"
+      class={cn(
+        'flex w-full items-baseline justify-between gap-3 rounded-md px-2 py-1 text-left font-mono text-xs hover:bg-muted',
+        props.class
+      )}
+      onClick={() => props.onSelect?.()}
+    >
+      <span class="truncate text-foreground">{name()}</span>
+      <span class="shrink-0 text-2xs">
+        <span class="text-success">+{stats().added}</span>{' '}
+        <span class="text-destructive">−{stats().removed}</span>
+      </span>
+    </button>
+  )
+}

package/src/components/ui/diff-block/index.ts

@@ -0,0 +1,11 @@
+export {
+  DiffBlock,
+  DiffSummary,
+  diffLineVariants,
+  diffStats,
+  diffTargetPath,
+  parseDiff,
+  type DiffBlockProps,
+  type DiffLine,
+  type DiffLineKind,
+} from './diff-block'

package/src/components/ui/drawer/drawer.tsx

@@ -0,0 +1,144 @@
+import DrawerPrimitive from '@corvu/drawer'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Drawer.
+ *
+ * A sheet the user can drag away: it opens from an edge, carries a handle, and
+ * closes by swipe as well as by button. That drag affordance is the reason to
+ * choose it over Sheet — the gesture is for content the user is *finishing*
+ * with (a summary, a queue, a confirmation), not for browsing.
+ *
+ * On a large window a Drawer is usually the wrong control: dragging is a touch
+ * idiom, and on a desktop the same content is better as a Sheet or a Dialog.
+ * The exceptions are the surfaces a pointer also drags naturally — a bottom
+ * console, a media panel.
+ *
+ * corvu supplies the drag physics, the snap points and the pointer capture.
+ */
+export function Drawer(props: ComponentProps<typeof DrawerPrimitive>) {
+  return <DrawerPrimitive {...props} />
+}
+
+export function DrawerTrigger(props: ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger {...props} />
+}
+
+export function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <DrawerPrimitive.Overlay
+      class={cn(
+        'fixed inset-0 z-(--z-drawer) bg-scrim/50',
+        'data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
+  /**
+   * Draw the grabber at the leading edge of the sheet.
+   *
+   * It is an affordance, not the drag target: corvu makes the whole sheet
+   * draggable, exactly as the platform's own sheets behave. So this is
+   * `aria-hidden` decoration that tells the user the sheet can be pulled — it
+   * carries no behaviour and must not be the only thing that moves.
+   */
+  withHandle?: boolean
+}
+
+export function DrawerContent(props: DrawerContentProps) {
+  const [local, rest] = splitProps(props, ['class', 'withHandle', 'children'])
+
+  return (
+    <DrawerPrimitive.Portal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        class={cn(
+          'group/drawer bg-popover text-popover-foreground fixed z-(--z-drawer) flex flex-col border-border shadow-lg',
+          'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:max-h-[85vh] data-[side=bottom]:rounded-t-xl data-[side=bottom]:border-t',
+          'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:max-h-[85vh] data-[side=top]:rounded-b-xl data-[side=top]:border-b',
+          'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:w-80 data-[side=left]:rounded-e-xl data-[side=left]:border-e',
+          'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:w-80 data-[side=right]:rounded-s-xl data-[side=right]:border-s',
+          local.class
+        )}
+        {...rest}
+      >
+        {local.withHandle ? (
+          <span
+            aria-hidden="true"
+            class={cn(
+              'bg-muted shrink-0 self-center',
+              'group-data-[side=bottom]/drawer:mt-2 group-data-[side=bottom]/drawer:h-1.5 group-data-[side=bottom]/drawer:w-10 group-data-[side=bottom]/drawer:rounded-full'
+            )}
+          />
+        ) : null}
+        {local.children}
+      </DrawerPrimitive.Content>
+    </DrawerPrimitive.Portal>
+  )
+}
+
+export function DrawerTitle(props: ComponentProps<typeof DrawerPrimitive.Label>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <DrawerPrimitive.Label
+      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function DrawerDescription(props: ComponentProps<typeof DrawerPrimitive.Description>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <DrawerPrimitive.Description
+      class={cn('text-muted-foreground text-sm', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function DrawerCloseButton(props: ComponentProps<typeof DrawerPrimitive.Close>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <DrawerPrimitive.Close class={cn('focus-ring', local.class)} {...rest} />
+}
+
+export function DrawerHeader(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="drawer-header"
+      class={cn('flex flex-col gap-1.5 p-5 pb-3 text-start', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function DrawerBody(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="drawer-body"
+      class={cn('min-h-0 flex-1 overflow-y-auto px-5 pb-4', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function DrawerFooter(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="drawer-footer"
+      class={cn('flex flex-col-reverse gap-2 p-5 pt-3 sm:flex-row sm:justify-end', local.class)}
+      {...rest}
+    />
+  )
+}

package/src/components/ui/drawer/index.ts

@@ -0,0 +1,13 @@
+export {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerTitle,
+  DrawerTrigger,
+  type DrawerContentProps,
+} from './drawer'