@vvedantb/ui 0.13.0 → 0.13.1

package/README.md

@@ -982,7 +982,7 @@ const store: ArtifactStateStore = {
 - `ArtifactListToolbar`: controlled `ToolbarSearchInput` (`query`, `onQueryChange`), a type filter menu (`type`, `onTypeChange`, `types`; `undefined` is "All types") and a grid or list toggle (`layout`, `onLayoutChange`). The filter and the toggle show only with their callbacks. `children` go at the end.
 - `ArtifactViewer`: the ai-elements `Artifact` container with a header (`headerStart`, type icon, title) and actions: versions menu (`versions`), Rename, Copy, Download (the format's extension and MIME type from `ARTIFACT_FORMAT_FILES`), Open in new tab (`href`), your `actions`, and Delete. Below it, `ArtifactRender` of `artifact.body`. Pass the body of the version on screen.
 - `ArtifactVersionsMenu`: a "vN" button listing `versions` newest first, with the current one marked. With `onViewVersion`, picking a version shows it, and "Restore vN" (`onRestoreVersion`) appears while an older version is on screen. Without it, picking an older version restores it.
-- Rename and delete use `ConfirmDialog` (`ArtifactRenameDialog`, `ArtifactDeleteDialog`, and `useArtifactEditDialogs` for custom surfaces). Rename sends the trimmed title, and does nothing when it is unchanged. Alt-click on Delete skips the dialog, as with `useRequestConfirm`. A callback that rejects keeps its dialog open and shows an error toast; copy and load failures toast too, so mount `SonnerToaster`.
+- Rename and delete use `ConfirmDialog` (`ArtifactRenameDialog`, `ArtifactDeleteDialog`, and `useArtifactEditDialogs` for custom surfaces). Rename sends the trimmed title, and does nothing when it is unchanged. Alt-click on Delete skips the dialog, as with `useRequestConfirm`. The delete dialog says "This cannot be undone."; pass `deleteDescription` to `ArtifactViewer`, `ArtifactCard` or `ArtifactList` to change it (0.13.1), for example when your delete can be undone. A callback that rejects keeps its dialog open and shows an error toast; copy and load failures toast too, so mount `SonnerToaster`.
 - `ArtifactTypeIcon` (`type`, `size`, `stroke`) and `ARTIFACT_TYPE_LABELS` (`mindmap` is "Mind map"). Helpers `downloadArtifactBody(title, format, body)`, `copyArtifactBody(body)`, `openArtifactInNewTab(href)`. Row types: `ArtifactSummary` (any `ArtifactListRow` fits), `ArtifactDocument`, `ArtifactVersionSummary`.
 
 ## Toaster

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/src/artifacts/artifact-card.tsx

@@ -33,6 +33,8 @@ export type ArtifactCardActions = {
   onRename?: (artifact: ArtifactSummary, title: string) => void | Promise<void>;
   /** Called after the delete dialog, or straight away on an Alt-click. */
   onDelete?: (artifact: ArtifactSummary) => void | Promise<void>;
+  /** Text under the delete dialog's title, e.g. for a host that can undo. Defaults to "This cannot be undone." */
+  deleteDescription?: ReactNode;
 };
 
 export type ArtifactCardProps = ArtifactCardActions & {
@@ -69,12 +71,14 @@ export function ArtifactCard({
   getBody,
   onRename,
   onDelete,
+  deleteDescription,
   className,
 }: ArtifactCardProps) {
   const edit = useArtifactEditDialogs({
     title: artifact.title,
     onRename: onRename && ((title) => onRename(artifact, title)),
     onDelete: onDelete && (() => onDelete(artifact)),
+    deleteDescription,
   });
   const href = getHref?.(artifact);
 

package/src/artifacts/artifact-dialogs.tsx

@@ -51,16 +51,25 @@ export type ArtifactDeleteDialogProps = {
   title: string;
   onConfirm: () => void;
   pending?: boolean;
+  /** Text under the title. Defaults to "This cannot be undone." */
+  description?: ReactNode;
 };
 
 /** "Delete <title>?" confirmation. Cancel is focused on open. */
-export function ArtifactDeleteDialog({ open, onOpenChange, title, onConfirm, pending }: ArtifactDeleteDialogProps) {
+export function ArtifactDeleteDialog({
+  open,
+  onOpenChange,
+  title,
+  onConfirm,
+  pending,
+  description = "This cannot be undone.",
+}: ArtifactDeleteDialogProps) {
   return (
     <ConfirmDialog.Root alert={false} focusCancel pending={pending} open={open} onOpenChange={onOpenChange}>
       <ConfirmDialog.Content className="max-w-sm" role="alertdialog">
         <ConfirmDialog.Header>
           <ConfirmDialog.Title>Delete &quot;{title}&quot;?</ConfirmDialog.Title>
-          <ConfirmDialog.Description>This cannot be undone.</ConfirmDialog.Description>
+          <ConfirmDialog.Description>{description}</ConfirmDialog.Description>
         </ConfirmDialog.Header>
         <ConfirmDialog.Footer>
           <ConfirmDialog.Cancel variant="secondary" />
@@ -78,13 +87,15 @@ export type ArtifactEditCallbacks = {
   onRename?: (title: string) => void | Promise<void>;
   /** Called after the delete dialog, or straight away on an Alt-click. */
   onDelete?: () => void | Promise<void>;
+  /** Text under the delete dialog's title, e.g. for a host that can undo. Defaults to "This cannot be undone." */
+  deleteDescription?: ReactNode;
 };
 
 /**
  * Rename and delete dialog state shared by the card and the viewer. `dialogs`
  * must be rendered; `requestDelete(event)` skips the dialog on an Alt-click.
  */
-export function useArtifactEditDialogs({ title, onRename, onDelete }: ArtifactEditCallbacks & { title: string }) {
+export function useArtifactEditDialogs({ title, onRename, onDelete, deleteDescription }: ArtifactEditCallbacks & { title: string }) {
   const [renameOpen, setRenameOpen] = useState(false);
   const [renameValue, setRenameValue] = useState(title);
   const [deleteOpen, setDeleteOpen] = useState(false);
@@ -137,6 +148,7 @@ export function useArtifactEditDialogs({ title, onRename, onDelete }: ArtifactEd
           title={title}
           onConfirm={remove}
           pending={pending}
+          description={deleteDescription}
         />
       ) : null}
     </>

package/src/artifacts/artifact-viewer.tsx

@@ -45,11 +45,12 @@ export function ArtifactViewer({
   href,
   onRename,
   onDelete,
+  deleteDescription,
   headerStart,
   actions,
   className,
 }: ArtifactViewerProps) {
-  const edit = useArtifactEditDialogs({ title: artifact.title, onRename, onDelete });
+  const edit = useArtifactEditDialogs({ title: artifact.title, onRename, onDelete, deleteDescription });
   const extension = ARTIFACT_FORMAT_FILES[artifact.format].extension;
   const actionClass = "h-8 min-w-8";