Details dialog

import { DetailsDialog } from "@/pages/library/parts";
import "@/pages/library/library.css";

DetailsDialog is the form behind "Edit details, folder and tags" on a workspace card and behind "Save as template" in the page builder. Its fields are not only labels for people: the agent reads the name, description, folder and tags when it decides which component or template to build a page from. The hint under the fields says so.

It is a medium Dialog (650px) inside the library's scrim, with its own state for each field. It closes on Escape, on a click outside, on the close icon and on Cancel.

Editing a componentCopy Anchor Link

Everything can change. The folder buttons under the fields set the folder in one click, and the one that matches the folder field turns blue.

{editing && (
  <DetailsDialog
    title="Component details"
    item={editing}
    folders={folders}
    onClose={() => setEditing(null)}
    onSave={(details) => { updateDetails(editing.uid, details); toast.success("Saved."); }}
  />
)}

onSave gets { name, description, folder, tags }. Text is trimmed, and tags are split on commas, trimmed, lowercased and de-duplicated by parseTags in src/mocks/library.js. The dialog then calls onClose itself, so onSave does not have to close it.

A template from the libraryCopy Anchor Link

With fixed, the name and description are hidden. A template taken from the library keeps the library's wording, so only its folder and tags are the workspace's to change. onSave then gets only { folder, tags }.

<DetailsDialog
  title="Template details"
  noun="template"
  item={template}
  folders={folders}
  fixed={!template.saved}
  onClose={close}
  onSave={(details) => updateTemplate(template.id, details)}
/>

Saving a page as a templateCopy Anchor Link

The page builder reuses the dialog with its own confirm label and hint, and a name worked out from the page's name.

<DetailsDialog
  title="Save as template"
  noun="template"
  confirmLabel="Save template"
  item={{ name: `${page.name.replace(/ page$/i, "")} template`, description: "", folder: "", tags: [] }}
  folders={folders}
  hint="The page is saved as it is now. Describe when to use it: the agent reads the name, description, folder and tags to pick a template."
  onClose={() => setSaving(false)}
  onSave={(details) => library.saveTemplate(details, page.sections)}
/>

StatesCopy Anchor Link

LayoutCopy Anchor Link

PropsCopy Anchor Link

AccessibilityCopy Anchor Link

• The wrapper has role="dialog", aria-modal="true" and aria-label set to title.
• The Name field has autoFocus, so focus lands there when the dialog opens. With fixed nothing is focused, and focus stays on the button that opened it, behind the scrim.
• The name error is linked to the field with aria-describedby and announced with role="alert".
• Escape closes it through a keydown listener on window.
• Focus is not kept inside the dialog and is not returned to the trigger on close. See Dialog for the wrapper that does both.

Do and don'tCopy Anchor Link

• Do write the description as when to use the component ("Use when the only goal is a booked demo"). That sentence is what the agent follows.
• Do pass folders so people reuse folder names instead of typing near-duplicates.
• Do use fixed for anything whose wording belongs to the library.
• Don't use this dialog for page settings or publishing. Those have their own dialogs: Page settings and Publish.

When to use itCopy Anchor Link

Use it for any library item the agent chooses from by description. For a plain rename or a single field elsewhere, use a small Dialog from @/ui with one TextInput.

Where it is usedCopy Anchor Link