@djangocfg/ui-tools 2.1.417 → 2.1.418

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.417",
+  "version": "2.1.418",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -116,6 +116,11 @@
       "import": "./src/tools/forms/MarkdownEditor/lazy.tsx",
       "require": "./src/tools/forms/MarkdownEditor/lazy.tsx"
     },
+    "./notion-editor": {
+      "types": "./src/tools/forms/NotionEditor/lazy.tsx",
+      "import": "./src/tools/forms/NotionEditor/lazy.tsx",
+      "require": "./src/tools/forms/NotionEditor/lazy.tsx"
+    },
     "./markdown-message": {
       "types": "./src/tools/dev/MarkdownMessage/index.ts",
       "import": "./src/tools/dev/MarkdownMessage/index.ts",
@@ -259,8 +264,8 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.417",
-    "@djangocfg/ui-core": "^2.1.417",
+    "@djangocfg/i18n": "^2.1.418",
+    "@djangocfg/ui-core": "^2.1.418",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -279,14 +284,25 @@
     "@rjsf/utils": "^6.1.2",
     "@rjsf/validator-ajv8": "^6.1.2",
     "@rpldy/uploady": "^1.8.5",
-    "@tiptap/core": "^3.20.1",
-    "@tiptap/extension-mention": "^3.20.1",
-    "@tiptap/extension-placeholder": "^3.20.1",
-    "@tiptap/markdown": "^3.20.1",
-    "@tiptap/pm": "^3.20.1",
-    "@tiptap/react": "^3.20.1",
-    "@tiptap/starter-kit": "^3.20.1",
-    "@tiptap/suggestion": "^3.20.1",
+    "@tiptap/core": "^3.23.0",
+    "@tiptap/extension-bubble-menu": "^3.23.0",
+    "@tiptap/extension-code-block-lowlight": "^3.23.0",
+    "@tiptap/extension-highlight": "^3.23.0",
+    "@tiptap/extension-mention": "^3.23.0",
+    "@tiptap/extension-placeholder": "^3.23.0",
+    "@tiptap/extension-table": "^3.23.0",
+    "@tiptap/extension-table-cell": "^3.23.0",
+    "@tiptap/extension-table-header": "^3.23.0",
+    "@tiptap/extension-table-row": "^3.23.0",
+    "@tiptap/extension-task-item": "^3.23.0",
+    "@tiptap/extension-task-list": "^3.23.0",
+    "@tiptap/markdown": "^3.23.0",
+    "@tiptap/pm": "^3.23.0",
+    "@tiptap/react": "^3.23.0",
+    "@tiptap/starter-kit": "^3.23.0",
+    "@tiptap/suggestion": "^3.23.0",
+    "lowlight": "^3.3.0",
+    "tiptap-extension-global-drag-handle": "^0.1.18",
     "@wavesurfer/react": "^1.0.12",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-direction": "^1.1.1",
@@ -324,9 +340,9 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.417",
-    "@djangocfg/typescript-config": "^2.1.417",
-    "@djangocfg/ui-core": "^2.1.417",
+    "@djangocfg/i18n": "^2.1.418",
+    "@djangocfg/typescript-config": "^2.1.418",
+    "@djangocfg/ui-core": "^2.1.418",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^25.2.3",

package/src/tools/data/Tree/components/TreeRow.tsx

@@ -180,17 +180,6 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
       }}
       {...(dnd.active ? draggable.listeners : {})}
       {...(dnd.active ? draggable.attributes : {})}
-      // Block the browser's native "click moves focus into the
-      // focusable target" behaviour. Tree owns its own focus model
-      // (arrow keys drive `setFocus`, click only selects + activates),
-      // and stealing focus on every click stops downstream auto-focus
-      // patterns from working — e.g. clicking a file in a tree-plus-
-      // preview layout would let the row grab focus after the preview
-      // viewer tries to take it. The synthetic `onClick` below still
-      // fires; only the focus side-effect of mousedown is suppressed.
-      onMouseDown={(e) => {
-        if (e.button === 0) e.preventDefault();
-      }}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       onContextMenu={handleContextMenu}

package/src/tools/forms/CodeEditor/components/Editor.tsx

@@ -46,6 +46,8 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
     autoHeight = false,
     minHeight = 100,
     maxHeight = 600,
+    autoFocus = false,
+    onSave,
   },
   ref
 ) {
@@ -67,9 +69,11 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
   // without going stale when the parent passes new function identities.
   const onChangeRef = useRef(onChange);
   const onMountRef = useRef(onMount);
+  const onSaveRef = useRef(onSave);
   useEffect(() => {
     onChangeRef.current = onChange;
     onMountRef.current = onMount;
+    onSaveRef.current = onSave;
   });
 
   // Expose editor methods via ref
@@ -126,6 +130,21 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
       updateContentHeight(editor);
     }
 
+    // Cmd/Ctrl+S → save. Registered as a Monaco command so it wins over
+    // the browser's "save page" default whenever the editor has focus.
+    // Read through the ref so swapping handlers does not need to rebuild.
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      onSaveRef.current?.(editor.getValue());
+    });
+
+    // autoFocus on first mount — Monaco refuses focus during layout
+    // measurement otherwise.
+    if (autoFocus) {
+      // queueMicrotask: defer past Monaco's own post-create layout so the
+      // focus call lands on a fully laid-out editor.
+      queueMicrotask(() => editorRef.current?.focus());
+    }
+
     // Call onMount callback
     onMountRef.current?.(editor);
 

package/src/tools/forms/CodeEditor/types/index.ts

@@ -61,6 +61,13 @@ export interface EditorProps {
   minHeight?: number;
   /** Max height in px when autoHeight is enabled (default: 600) */
   maxHeight?: number;
+  /** Focus the editor once Monaco mounts. Pair with `key={path}` upstream
+   *  for per-file focus reset. */
+  autoFocus?: boolean;
+  /** Bound to Cmd/Ctrl+S inside the editor via Monaco's command palette.
+   *  Receives the current value. The browser default is suppressed by
+   *  Monaco when a command is registered for that chord. */
+  onSave?: (value: string) => void;
 }
 
 export interface DiffEditorProps {

package/src/tools/forms/MarkdownEditor/MarkdownEditor.tsx

@@ -7,6 +7,7 @@ import Mention from '@tiptap/extension-mention';
 import { Markdown } from '@tiptap/markdown';
 import type { AnyExtension } from '@tiptap/core';
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { useHotkey } from '@djangocfg/ui-core/hooks';
 import {
   Bold, Italic, Strikethrough, Heading1, Heading2, Heading3,
   List, ListOrdered, Quote, Minus, Code, type LucideIcon,
@@ -125,6 +126,17 @@ export interface MarkdownEditorProps {
    * empty draft".
    */
   onSubmit?: () => boolean | void;
+  /**
+   * Focus the editor on mount. Pair with `key={file}` upstream when the
+   *  host wants a fresh focus per file change (inspector / editor tab).
+   */
+  autoFocus?: boolean;
+  /**
+   * Called when the user presses Cmd/Ctrl+S inside the editor. Receives
+   * the current markdown. The browser's "save page" default is suppressed
+   *  only when this handler is supplied — otherwise Cmd+S falls through.
+   */
+  onSave?: (markdown: string) => void;
 }
 
 /**
@@ -159,6 +171,8 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
     slashCommands,
     onMentionIdsChange,
     onSubmit,
+    autoFocus = false,
+    onSave,
   },
   ref,
 ) {
@@ -380,6 +394,32 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
     editor?.setEditable(!disabled);
   }, [editor, disabled]);
 
+  // Declarative autoFocus — runs once the editor instance exists. Hosts
+  // that want per-file focus reset should pair this with `key={path}`.
+  useEffect(() => {
+    if (!autoFocus || !editor) return;
+    editor.commands.focus('end');
+  }, [autoFocus, editor]);
+
+  // Cmd/Ctrl+S → save. Uses the shared `useHotkey` (inInput=true by
+  // default for modifier combos). Guarded to fire only when focus is
+  // inside this editor's ProseMirror DOM, so multiple sibling editors
+  // don't all fire on one chord.
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+  useHotkey(
+    'mod+s',
+    () => {
+      const h = onSaveRef.current;
+      if (!h || !editor) return;
+      const dom = editor.view.dom;
+      const active = document.activeElement;
+      if (!active || !dom.contains(active)) return;
+      h(getMarkdown(editor));
+    },
+    { enabled: !!editor && !!onSave },
+  );
+
   // Imperative API for hosts that drive the editor without owning a
   // TipTap ref directly — chat composer registration, voice slot,
   // focus-on-stream-end.

package/src/tools/forms/MarkdownEditor/styles.css

@@ -2,49 +2,88 @@
   outline: none;
 }
 
-/* Inherit semantic foreground so the editor renders correctly in both
-   light + dark themes (and under any active preset). Without this the
-   browser falls back to UA black on a token-driven background. */
+/* ─────────────────────────────────────────────────────────────────────
+ * Typography — Notion-inspired: comfy line-height, generous heading
+ * scale, restrained spacing. Calibrated so the chat composer (compact,
+ * single-paragraph) and the document-preview editor (long-form, with
+ * many headings) both feel right without a variant prop.
+ *
+ * Inherit semantic foreground so the editor renders correctly in both
+ * light + dark themes (and under any active preset).
+ * ───────────────────────────────────────────────────────────────────── */
 .markdown-editor .tiptap,
 .markdown-editor .ProseMirror {
   color: var(--color-foreground, var(--foreground));
+  font-family:
+    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
 .markdown-editor .tiptap a,
 .markdown-editor .ProseMirror a {
   color: var(--color-primary, var(--primary));
   text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
 }
 
+.markdown-editor .tiptap a:hover,
+.markdown-editor .ProseMirror a:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* Headings — Notion scale. Top-padding > bottom so a heading sits
+ * visually grouped with the paragraph below it. */
 .markdown-editor .tiptap h1 {
-  font-size: 1.5em;
+  font-size: 1.875em;
   font-weight: 700;
-  margin: 0.5em 0 0.25em;
-  line-height: 1.3;
+  line-height: 1.25;
+  margin: 1em 0 0.25em;
+  letter-spacing: -0.015em;
 }
 
 .markdown-editor .tiptap h2 {
-  font-size: 1.25em;
+  font-size: 1.5em;
   font-weight: 600;
-  margin: 0.5em 0 0.25em;
   line-height: 1.3;
+  margin: 0.9em 0 0.25em;
+  letter-spacing: -0.01em;
 }
 
 .markdown-editor .tiptap h3 {
+  font-size: 1.25em;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 0.8em 0 0.2em;
+}
+
+.markdown-editor .tiptap h4 {
   font-size: 1.1em;
   font-weight: 600;
-  margin: 0.4em 0 0.2em;
-  line-height: 1.3;
+  line-height: 1.4;
+  margin: 0.7em 0 0.2em;
+}
+
+/* First heading at the very top of the document has no leading air —
+ * Notion convention. */
+.markdown-editor .tiptap > :is(h1, h2, h3, h4):first-child {
+  margin-top: 0;
 }
 
 .markdown-editor .tiptap p {
   margin: 0.25em 0;
 }
 
+/* Lists — Notion uses tighter row spacing than browser default. */
 .markdown-editor .tiptap ul,
 .markdown-editor .tiptap ol {
   padding-left: 1.5em;
-  margin: 0.25em 0;
+  margin: 0.35em 0;
 }
 
 .markdown-editor .tiptap ul {
@@ -56,29 +95,138 @@
 }
 
 .markdown-editor .tiptap li {
-  margin: 0.1em 0;
+  margin: 0.15em 0;
+}
+
+.markdown-editor .tiptap li > p {
+  margin: 0;
+}
+
+/* Nested lists get a subtler marker. */
+.markdown-editor .tiptap ul ul {
+  list-style: circle;
+}
+.markdown-editor .tiptap ul ul ul {
+  list-style: square;
+}
+
+/* Task list (GFM `- [ ] item`). StarterKit ships TaskList extension. */
+.markdown-editor .tiptap ul[data-type="taskList"] {
+  list-style: none;
+  padding-left: 0.25em;
+}
+
+.markdown-editor .tiptap ul[data-type="taskList"] li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5em;
+}
+
+.markdown-editor .tiptap ul[data-type="taskList"] li > label {
+  flex-shrink: 0;
+  margin-top: 0.3em;
+  user-select: none;
+}
+
+.markdown-editor .tiptap ul[data-type="taskList"] li > div {
+  flex: 1;
+  min-width: 0;
+}
+
+.markdown-editor .tiptap ul[data-type="taskList"] li[data-checked="true"] > div {
+  opacity: 0.55;
+  text-decoration: line-through;
 }
 
+/* Blockquote — Notion uses a chunky left bar without italic. */
 .markdown-editor .tiptap blockquote {
   border-left: 3px solid var(--color-border, var(--border));
-  padding-left: 1em;
-  margin: 0.5em 0;
-  opacity: 0.8;
+  padding: 0.2em 0 0.2em 1em;
+  margin: 0.6em 0;
+  color: color-mix(in oklab, var(--color-foreground, var(--foreground)) 80%, transparent);
+}
+
+.markdown-editor .tiptap blockquote > :first-child {
+  margin-top: 0;
+}
+.markdown-editor .tiptap blockquote > :last-child {
+  margin-bottom: 0;
 }
 
+/* Divider — full-width thin rule with breathing room. */
 .markdown-editor .tiptap hr {
   border: none;
   border-top: 1px solid var(--color-border, var(--border));
-  margin: 0.75em 0;
+  margin: 1.5em 0;
 }
 
+/* Inline code — monospace pill, restrained tint. */
 .markdown-editor .tiptap code {
+  background: color-mix(in oklab, var(--color-muted, var(--muted)) 70%, transparent);
+  color: var(--color-foreground, var(--foreground));
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+  font-size: 0.875em;
+  font-family:
+    "SF Mono", ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas,
+    monospace;
+  border: 1px solid color-mix(in oklab, var(--color-border, var(--border)) 60%, transparent);
+}
+
+/* Code block — darker surface so it stands apart from inline code. */
+.markdown-editor .tiptap pre {
   background: var(--color-muted, var(--muted));
-  color: var(--color-muted-foreground, var(--muted-foreground));
-  padding: 0.15em 0.3em;
-  border-radius: 0.25em;
-  font-size: 0.9em;
-  font-family: monospace;
+  color: var(--color-foreground, var(--foreground));
+  padding: 0.9em 1em;
+  border-radius: 6px;
+  margin: 0.75em 0;
+  font-family:
+    "SF Mono", ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas,
+    monospace;
+  font-size: 0.875em;
+  line-height: 1.55;
+  overflow-x: auto;
+  border: 1px solid color-mix(in oklab, var(--color-border, var(--border)) 50%, transparent);
+}
+
+.markdown-editor .tiptap pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* Tables — borderless, subtle row separators (Notion-flavour). */
+.markdown-editor .tiptap table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.75em 0;
+  font-size: 0.95em;
+  table-layout: fixed;
+}
+
+.markdown-editor .tiptap th,
+.markdown-editor .tiptap td {
+  border: 1px solid var(--color-border, var(--border));
+  padding: 0.45em 0.75em;
+  vertical-align: top;
+  text-align: left;
+  min-width: 4ch;
+}
+
+.markdown-editor .tiptap th {
+  background: color-mix(in oklab, var(--color-muted, var(--muted)) 60%, transparent);
+  font-weight: 600;
+}
+
+/* Images — rounded, never overflow. */
+.markdown-editor .tiptap img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  margin: 0.5em 0;
 }
 
 .markdown-editor .tiptap strong {
@@ -93,6 +241,11 @@
   text-decoration: line-through;
 }
 
+/* Selection highlight — semantic ring colour, not browser-blue. */
+.markdown-editor .tiptap ::selection {
+  background: color-mix(in oklab, var(--color-primary, var(--primary)) 25%, transparent);
+}
+
 .markdown-editor .tiptap p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;

package/src/tools/forms/NotionEditor/CustomKeymap.ts

@@ -0,0 +1,48 @@
+import { Extension } from '@tiptap/core';
+import { TextSelection } from '@tiptap/pm/state';
+
+/**
+ * Notion-style smart Cmd/Ctrl+A:
+ *   1st press → select the current text block
+ *   2nd press → select the whole document
+ *
+ * Default editor behaviour selects everything on first press, which is
+ * jarring in long documents where the user almost always wants "select
+ * paragraph" first. Ported from Novel (`extensions/custom-keymap.ts`).
+ */
+export const CustomKeymap = Extension.create({
+  name: 'notion-custom-keymap',
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-a': ({ editor }) => {
+        const { selection, doc } = editor.state;
+        const { $from, $to, from, to } = selection;
+
+        // Resolve the boundaries of the current text block. `start`/`end`
+        // on $from/$to give the inclusive content range of the parent
+        // textblock (a paragraph, heading, code block, list item body).
+        const blockStart = $from.start();
+        const blockEnd = $to.end();
+
+        const isWholeBlockSelected = from === blockStart && to === blockEnd;
+        // If the block is already fully selected → escalate to whole doc.
+        if (isWholeBlockSelected) {
+          editor
+            .chain()
+            .setTextSelection({ from: 0, to: doc.content.size })
+            .run();
+          return true;
+        }
+
+        editor
+          .chain()
+          .setTextSelection(
+            TextSelection.create(editor.state.doc, blockStart, blockEnd),
+          )
+          .run();
+        return true;
+      },
+    };
+  },
+});

package/src/tools/forms/NotionEditor/LinkDialog.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+/**
+ * Cmd/Ctrl+K link prompt. Modeless dialog with a single URL input and
+ * Save/Remove/Cancel actions. Mounted as a side-channel above the editor
+ * so it survives selection collapse — without this, focusing the input
+ * would unset the selection and TipTap couldn't apply the mark.
+ *
+ * We snapshot `from`/`to` of the selection on open and re-apply it
+ * before running the link command. ProseMirror tolerates this because
+ * the dialog is rendered in a portal (Radix's `DialogPortal`) and the
+ * editor's view does not lose its `state` — only its DOM focus.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+} from '@djangocfg/ui-core';
+import type { Editor } from '@tiptap/react';
+
+/** Reject `javascript:`, `data:`, `vbscript:` schemes. Plain anchors,
+ *  http(s), mailto, tel, and relative paths pass. Same allow-list TipTap
+ *  uses internally when `validate` is omitted, made explicit here. */
+function isSafeHref(value: string): boolean {
+  const trimmed = value.trim();
+  const colon = trimmed.indexOf(':');
+  if (colon === -1) return true; // relative or hash link
+  const scheme = trimmed.slice(0, colon).toLowerCase();
+  return ['http', 'https', 'mailto', 'tel', 'sms', 'ftp'].includes(scheme);
+}
+
+interface LinkDialogProps {
+  editor: Editor;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function LinkDialog({ editor, open, onOpenChange }: LinkDialogProps) {
+  const [href, setHref] = useState('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // Remember the selection range when the dialog opened — focusing the
+  // input collapses selection in the editor; we re-apply the snapshot
+  // before running the link command.
+  const rangeRef = useRef<{ from: number; to: number } | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const { from, to } = editor.state.selection;
+    rangeRef.current = { from, to };
+    const existing = editor.getAttributes('link').href as string | undefined;
+    setHref(existing ?? '');
+    // Focus is handled by Radix's `onOpenAutoFocus` below — that fires
+    // after the dialog DOM is in the document and avoids racing the
+    // built-in focus trap.
+  }, [open, editor]);
+
+  const applyLink = (value: string) => {
+    const range = rangeRef.current;
+    if (range) {
+      editor.chain().focus().setTextSelection(range).run();
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+      editor.chain().focus().unsetLink().run();
+    } else if (isSafeHref(trimmed)) {
+      editor.chain().focus().extendMarkRange('link').setLink({ href: trimmed }).run();
+    }
+    onOpenChange(false);
+  };
+
+  const removeLink = () => {
+    const range = rangeRef.current;
+    if (range) {
+      editor.chain().focus().setTextSelection(range).run();
+    }
+    editor.chain().focus().unsetLink().run();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="sm:max-w-md"
+        // Override Radix's default auto-focus (first focusable). We want
+        // the URL input focused + selected — combining `preventDefault`
+        // here with a direct `focus()` call sequences cleanly with the
+        // dialog mount; the earlier queueMicrotask version raced Radix.
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          inputRef.current?.focus();
+          inputRef.current?.select();
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Link</DialogTitle>
+        </DialogHeader>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            applyLink(href);
+          }}
+        >
+          <Input
+            ref={inputRef}
+            type="url"
+            placeholder="https://example.com"
+            value={href}
+            onChange={(e) => setHref(e.target.value)}
+            autoComplete="off"
+            spellCheck={false}
+          />
+          <DialogFooter className="mt-4 gap-2 sm:gap-2">
+            {editor.isActive('link') ? (
+              <Button type="button" variant="outline" onClick={removeLink}>
+                Remove
+              </Button>
+            ) : null}
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit">Save</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}