kennel 0.2.1 → 0.2.2

package/kernel/packages/ui/src/components/field.tsx

@@ -0,0 +1,260 @@
+"use client"
+
+import type { VariantProps } from "class-variance-authority"
+import { useMemo } from "react"
+import { cva } from "class-variance-authority"
+
+import { Label } from "@raggle-ai/ui/components/label"
+import { Separator } from "@raggle-ai/ui/components/separator"
+import { cn } from "@raggle-ai/ui/lib/utils"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        `has-[>[data-slot=checkbox-group]]:gap-3
+        has-[>[data-slot=radio-group]]:gap-3`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        `group/field-group @container/field-group flex w-full flex-col gap-7
+        data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        `group/field-label peer/field-label flex w-fit gap-2 leading-snug
+        group-data-[disabled=true]/field:opacity-50`,
+        `has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col
+        has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border
+        [&>*]:data-[slot=field]:p-4`,
+        `has-data-[state=checked]:bg-primary/5
+        has-data-[state=checked]:border-primary
+        dark:has-data-[state=checked]:bg-primary/10`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        `flex w-fit items-center gap-2 text-sm leading-snug font-medium
+        group-data-[disabled=true]/field:opacity-50`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        `text-muted-foreground text-sm leading-normal font-normal
+        group-has-[[data-orientation=horizontal]]/field:text-balance`,
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        `relative -my-2 h-5 text-sm
+        group-data-[variant=outline]/field-group:-mb-2`,
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block
+            w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

package/kernel/packages/ui/src/components/file-preview.tsx

@@ -0,0 +1,152 @@
+import { useState } from "react"
+import { openPath } from "kennel-client"
+import { FileText } from "lucide-react"
+
+import { toast } from "./sonner"
+
+/**
+ * Extensions the browser can render inline through `/api/raw`'s mime map
+ * (kennel-kinds `previewRawMime`). Everything else falls back to an icon.
+ */
+const inlinePreviewExtensions = new Set([
+  ".avif",
+  ".bmp",
+  ".gif",
+  ".jpeg",
+  ".jpg",
+  ".pdf",
+  ".png",
+  ".webp",
+])
+
+const imageExtensions = new Set([
+  ".avif",
+  ".bmp",
+  ".gif",
+  ".jpeg",
+  ".jpg",
+  ".png",
+  ".webp",
+])
+
+function extensionOf(path: string) {
+  const index = path.lastIndexOf(".")
+  return index < 0 ? "" : path.slice(index).toLowerCase()
+}
+
+/**
+ * Serves the attachment bytes inline through the viewer's raw endpoint.
+ * Attachments are absolute host paths, so the parent directory becomes the
+ * endpoint's folder and the file name its document key.
+ */
+export function filePreviewRawHref(path: string) {
+  const index = path.lastIndexOf("/")
+  const folder = index > 0 ? path.slice(0, index) : "/"
+  const file = path.slice(index + 1)
+  return `/api/raw?${new URLSearchParams({ path: folder, file })}`
+}
+
+/**
+ * Opens the attachment in the host's default app through the api-client
+ * open-path helper, without navigating the viewer.
+ */
+function openAttachment(path: string) {
+  void openPath(path).catch((error: unknown) =>
+    toast.error(
+      error instanceof Error
+        ? error.message
+        : "Could not open the default app.",
+    ),
+  )
+}
+
+/**
+ * Card preview for one file attachment. Shows an inline thumbnail for
+ * image and PDF files (the icon of the well-known type otherwise) plus the
+ * file name. The thumbnail links to the raw file in a new browser tab and
+ * the Open button opens it in the host's default application without
+ * navigating the viewer, so the sender can check exactly what will go out
+ * with the draft.
+ */
+function FilePreview({ path }: { path: string }) {
+  const [broken, setBroken] = useState(false)
+  const extension = extensionOf(path)
+  const name = path.slice(path.lastIndexOf("/") + 1)
+  const previewable = inlinePreviewExtensions.has(extension) && !broken
+  const isImage = imageExtensions.has(extension)
+
+  return (
+    <figure
+      className="m-0 flex w-44 shrink-0 flex-col overflow-hidden rounded-lg
+        border border-[#e7ebe7] bg-white shadow-[0_1px_2px_rgb(31_41_55/0.05)]"
+    >
+      <a
+        aria-label={`Preview ${name}`}
+        className="block h-28 bg-[#f3f5f2] transition-colors hover:bg-[#e9ede8]"
+        href={previewable ? filePreviewRawHref(path) : undefined}
+        target="_blank"
+        rel="noreferrer"
+        onClick={
+          previewable
+            ? undefined
+            : (event) => {
+                event.preventDefault()
+              }
+        }
+      >
+        {previewable ? (
+          isImage ? (
+            <img
+              alt={`Preview of ${name}`}
+              className="size-full object-contain"
+              onError={() => setBroken(true)}
+              src={filePreviewRawHref(path)}
+            />
+          ) : (
+            <iframe
+              className="pointer-events-none size-full border-0"
+              src={`${filePreviewRawHref(path)}#page=1&toolbar=0`}
+              title={`Preview of ${name}`}
+            />
+          )
+        ) : (
+          <span className="flex size-full items-center justify-center">
+            <FileText aria-hidden="true" className="size-8 text-[#8a968b]" />
+          </span>
+        )}
+      </a>
+      <figcaption
+        className="flex min-w-0 items-center gap-2 border-t border-[#e7ebe7]
+          px-2 py-1.5"
+      >
+        <span
+          className="min-w-0 flex-1 truncate text-xs text-[#2f382f]"
+          title={name}
+        >
+          {name}
+        </span>
+        <button
+          className="shrink-0 cursor-pointer rounded-md border border-[#dde1dc]
+            bg-white px-2 py-0.5 text-xs text-[#4a554b] hover:bg-[#f3f5f2]"
+          type="button"
+          onClick={() => openAttachment(path)}
+        >
+          Open
+        </button>
+      </figcaption>
+    </figure>
+  )
+}
+
+/** Row of attachment preview cards, one card per absolute file path. */
+function FilePreviewList({ paths }: { paths: string[] }) {
+  return (
+    <span className="flex min-w-0 flex-wrap gap-2">
+      {paths.map((path) => (
+        <FilePreview key={path} path={path} />
+      ))}
+    </span>
+  )
+}
+
+export { FilePreview, FilePreviewList }