@eventcatalog/core 5.0.0-beta.3 → 5.0.0-beta.30

package/eventcatalog/src/features/studio/components/Dialog.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+
+/**
+ * Studio's dialogs: a card over the page, closed by Escape or clicking outside it (not while it's busy). Focus stays
+ * in it: anything that moves focus outside (e.g. the menu it was opened from, closing) sends it back to its first
+ * field or button.
+ */
+
+export const SECONDARY_BUTTON =
+  'rounded-lg border px-4 py-2 text-sm font-medium border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)] disabled:opacity-50';
+export const PRIMARY_BUTTON =
+  'rounded-lg px-4 py-2 text-sm font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))] disabled:opacity-60';
+
+export default function Dialog({
+  labelledBy,
+  role = 'dialog',
+  busy = false,
+  onClose,
+  children,
+}: {
+  /** The id of its heading */
+  labelledBy: string;
+  /** `alertdialog` when it asks to confirm something that can't be undone */
+  role?: 'dialog' | 'alertdialog';
+  /** Doing what was asked: it can't be closed until it's done */
+  busy?: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => event.key === 'Escape' && !busy && onClose();
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onClose, busy]);
+
+  const card = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const keepFocus = (event: FocusEvent) => {
+      if (!card.current || card.current.contains(event.target as globalThis.Node)) return;
+      card.current.querySelector<HTMLElement>('input, button')?.focus();
+    };
+    document.addEventListener('focusin', keepFocus);
+    return () => document.removeEventListener('focusin', keepFocus);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={() => !busy && onClose()}>
+      <div
+        ref={card}
+        role={role}
+        aria-modal="true"
+        aria-labelledby={labelledBy}
+        onClick={(event) => event.stopPropagation()}
+        className="w-full max-w-md rounded-xl border shadow-2xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]"
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/eventcatalog/src/features/studio/components/JoinForm.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { Users } from 'lucide-react';
+import { MAX_NAME_LENGTH, PERSON_COLORS } from '../identity';
+
+const initials = (name: string) =>
+  name
+    .trim()
+    .split(/\s+/)
+    .map((word) => word[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+
+/**
+ * Joining a canvas the first time (without signing in), as Studio on the web joins a live session: the name and colour
+ * you'll be seen by (your pointer, your avatar, your comments), picked before you start, with how you'll look to the
+ * others. Remembered in this browser for next time.
+ */
+export default function JoinForm({
+  color,
+  onJoin,
+}: {
+  /** The colour picked to start with (the one kept in this browser, if there is one) */
+  color?: string | null;
+  onJoin: (me: { name: string; color: string }) => void;
+}) {
+  const [draft, setDraft] = useState('');
+  const [picked, setPicked] = useState(() => color ?? PERSON_COLORS[Math.floor(Math.random() * PERSON_COLORS.length)]);
+  const name = draft.trim();
+
+  return (
+    <div className="fixed inset-0 z-[80] flex items-center justify-center bg-black/40 p-4">
+      <form
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="join-canvas-title"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (name) onJoin({ name, color: picked });
+        }}
+        className="w-full max-w-md rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] p-6 text-center text-[rgb(var(--ec-page-text))] shadow-2xl"
+      >
+        <span className="mx-auto flex h-11 w-11 items-center justify-center rounded-full bg-[color-mix(in_srgb,rgb(var(--ec-accent))_12%,transparent)] text-[rgb(var(--ec-accent))]">
+          <Users aria-hidden className="h-5 w-5" />
+        </span>
+        <h1 id="join-canvas-title" className="mt-3 text-base font-semibold">
+          Join this canvas
+        </h1>
+        <p className="mt-1.5 text-sm leading-relaxed text-[rgb(var(--ec-page-text-muted))]">
+          Everyone here sees your pointer and edits with you, live.
+        </p>
+
+        <label className="mt-5 block text-left text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">
+          Your name
+          <input
+            autoFocus
+            value={draft}
+            maxLength={MAX_NAME_LENGTH}
+            placeholder="What should others call you?"
+            onChange={(event) => setDraft(event.target.value)}
+            className="mt-1.5 block h-9 w-full rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-3 text-sm text-[rgb(var(--ec-page-text))] outline-none placeholder:text-[rgb(var(--ec-page-text-muted))] focus:border-[rgb(var(--ec-accent))]"
+          />
+        </label>
+        <div className="mt-4 text-left text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">
+          Your colour
+          <div role="radiogroup" aria-label="Your colour" className="mt-2 flex gap-2">
+            {PERSON_COLORS.map((option) => (
+              <button
+                key={option}
+                type="button"
+                role="radio"
+                aria-checked={option === picked}
+                aria-label={option}
+                onClick={() => setPicked(option)}
+                className={`h-6 w-6 rounded-full transition-transform hover:scale-110 ${
+                  option === picked
+                    ? 'ring-2 ring-[rgb(var(--ec-page-text))] ring-offset-2 ring-offset-[rgb(var(--ec-card-bg))]'
+                    : ''
+                }`}
+                style={{ background: option }}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* How you'll look to the others */}
+        {name && (
+          <div className="mt-5 flex items-center justify-center gap-2 text-sm">
+            <span
+              className="flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-semibold text-white"
+              style={{ background: picked }}
+            >
+              {initials(name)}
+            </span>
+            <span className="font-medium">{name}</span>
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={!name}
+          className="mt-5 inline-flex h-10 w-full items-center justify-center rounded-lg bg-[rgb(var(--ec-page-text))] text-sm font-medium text-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-page-text)/0.85)] disabled:opacity-40"
+        >
+          Join canvas
+        </button>
+      </form>
+    </div>
+  );
+}

package/eventcatalog/src/features/studio/components/LeftPanel.tsx

@@ -0,0 +1,206 @@
+import { memo, useMemo, useState } from 'react';
+import { Check, Search } from 'lucide-react';
+import type { CatalogResource } from '../catalog-resources';
+import { catalogNodeData } from '../catalog';
+import {
+  isShownOnLevel,
+  type Level,
+  type StartDrag,
+  CATALOG_GROUPS,
+  STATUS,
+  Palette,
+  PaletteItem,
+  PaletteSection,
+  type PaletteTab,
+} from '@eventcatalog/visualiser/studio';
+
+/** What's dragged from the left panel onto the canvas: a component's key, or a catalog resource's key */
+export { COMPONENT_DRAG_TYPE } from '@eventcatalog/visualiser/studio';
+export const CATALOG_DRAG_TYPE = 'application/eventcatalog-studio-resource';
+
+/** A catalog group shows this many resources until it's expanded, so big catalogs stay quick */
+const GROUP_PREVIEW_SIZE = 50;
+
+export type LeftPanelTab = 'components' | 'catalog';
+
+/**
+ * Studio's palette (as Studio on the web's): components to drag onto the canvas, and here also the catalog's
+ * resources, as a tab in the same card (the comments are listed from the bottom left controls)
+ */
+export default memo(function LeftPanel({
+  level,
+  onShowAll,
+  resources,
+  keysOnCanvas,
+  onAddComponent,
+  onAddResource,
+  tab,
+  onTabChange,
+  startCollapsed,
+}: {
+  /** The level shown: only what it shows is listed, so what's added stays on it */
+  level: Level;
+  /** Goes to L3, which shows everything */
+  onShowAll: () => void;
+  resources: CatalogResource[];
+  /** The catalog resources on the canvas */
+  keysOnCanvas: Set<string>;
+  onAddComponent: (type: string) => void;
+  onAddResource: (key: string) => void;
+  /** The tab shown, when the canvas chooses it */
+  tab?: LeftPanelTab;
+  onTabChange?: (tab: LeftPanelTab) => void;
+  /** Starts folded away (e.g. in a chat, where there's little room) */
+  startCollapsed?: boolean;
+}) {
+  const shownResources = useMemo(
+    () => (level === 3 ? resources : resources.filter((resource) => isShownOnLevel(resource.node.type, level))),
+    [resources, level]
+  );
+  const tabs = useMemo(
+    (): PaletteTab[] => [
+      {
+        id: 'catalog',
+        label: 'Catalog Resources',
+        render: (startDrag) => (
+          <>
+            {level !== 3 && <LevelHint level={level} onShowAll={onShowAll} />}
+            <CatalogList resources={shownResources} keysOnCanvas={keysOnCanvas} onAdd={onAddResource} startDrag={startDrag} />
+          </>
+        ),
+      },
+    ],
+    [level, onShowAll, shownResources, keysOnCanvas, onAddResource]
+  );
+
+  return (
+    <Palette
+      level={level}
+      onAddComponent={onAddComponent}
+      tabs={tabs}
+      tab={tab}
+      onTabChange={onTabChange as ((tab: string) => void) | undefined}
+      startCollapsed={startCollapsed}
+    />
+  );
+});
+
+/** On L1 and L2: only what the level shows is listed (added there, it stays there), the rest is on L3 */
+function LevelHint({ level, onShowAll }: { level: Level; onShowAll: () => void }) {
+  return (
+    <p className="text-[11px] leading-snug text-[rgb(var(--ec-page-text-muted))]">
+      Showing what L{level} shows.{' '}
+      <button onClick={onShowAll} className="font-medium text-[rgb(var(--ec-accent))] hover:underline">
+        Go to L3 for everything
+      </button>
+    </p>
+  );
+}
+
+function CatalogList({
+  resources,
+  keysOnCanvas,
+  onAdd,
+  startDrag,
+}: {
+  resources: CatalogResource[];
+  keysOnCanvas: Set<string>;
+  onAdd: (key: string) => void;
+  startDrag: StartDrag;
+}) {
+  const [search, setSearch] = useState('');
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
+  const groups = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    const matches = term
+      ? resources.filter((resource) => resource.name.toLowerCase().includes(term) || resource.id.toLowerCase().includes(term))
+      : resources;
+    return CATALOG_GROUPS.map((group) => ({
+      ...group,
+      items: matches.filter((resource) => resource.collection === group.collection),
+    })).filter((group) => group.items.length > 0);
+  }, [resources, search]);
+
+  return (
+    <>
+      <div className="relative">
+        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[rgb(var(--ec-icon-color))]" />
+        <input
+          // The list shows when its tab is chosen: typing then searches it, rather than reaching the canvas's shortcuts
+          // (from the tab button, typing "Order Service" picked the Comment tool)
+          autoFocus
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search the catalog"
+          className="w-full rounded-lg border py-1.5 pl-8 pr-2 text-xs bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))]"
+        />
+      </div>
+      {groups.length === 0 && (
+        <p className="py-6 text-center text-xs text-[rgb(var(--ec-page-text-muted))]">No resources found.</p>
+      )}
+      {groups.map(({ collection, label, icon, className, items }) => {
+        const shown = expanded.has(collection) ? items : items.slice(0, GROUP_PREVIEW_SIZE);
+        return (
+          <PaletteSection key={collection} title={`${label} (${items.length})`}>
+            {shown.map((resource) => (
+              <CatalogItem
+                key={resource.key}
+                resource={resource}
+                icon={icon}
+                iconClassName={className}
+                onCanvas={keysOnCanvas.has(resource.key)}
+                onAdd={onAdd}
+                startDrag={startDrag}
+              />
+            ))}
+            {shown.length < items.length && (
+              <button
+                onClick={() => setExpanded((current) => new Set(current).add(collection))}
+                className="w-full rounded-md px-2 py-1.5 text-xs font-medium text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))]"
+              >
+                Show all {items.length} {label.toLowerCase()}
+              </button>
+            )}
+          </PaletteSection>
+        );
+      })}
+    </>
+  );
+}
+
+const CatalogItem = memo(function CatalogItem({
+  resource,
+  icon,
+  iconClassName,
+  onCanvas,
+  onAdd,
+  startDrag,
+}: {
+  resource: CatalogResource;
+  icon: (typeof CATALOG_GROUPS)[number]['icon'];
+  iconClassName: string;
+  onCanvas: boolean;
+  onAdd: (key: string) => void;
+  startDrag: StartDrag;
+}) {
+  // Drawn like the card it becomes (domains and systems can become containers too, but start as cards)
+  const preview = useMemo(() => ({ type: resource.node.type, data: catalogNodeData(resource) }), [resource]);
+  return (
+    <PaletteItem
+      icon={icon}
+      iconClassName={iconClassName}
+      label={resource.name}
+      description={resource.summary ? `v${resource.version} · ${resource.summary}` : `v${resource.version}`}
+      onDragStart={startDrag(CATALOG_DRAG_TYPE, resource.key, preview)}
+      onClick={() => onAdd(resource.key)}
+      title={`${resource.name}: drag onto the canvas, or click to add`}
+      trailing={
+        onCanvas ? (
+          <span title="On the canvas" className="flex-none">
+            <Check size={14} className={STATUS.success.text} />
+          </span>
+        ) : undefined
+      }
+    />
+  );
+});

package/eventcatalog/src/features/studio/components/NodeDetails.tsx

@@ -0,0 +1,183 @@
+import { memo, type RefObject } from 'react';
+import type { Node } from '@xyflow/react';
+import { Box, ExternalLink, Library } from 'lucide-react';
+import { getCatalogLink } from '../catalog';
+import {
+  EditableText,
+  EditStatus,
+  Field,
+  NodeCard,
+  getNodeLabel,
+  getResource,
+  isVersioned,
+  updateResource,
+  useSavedFlash,
+  type UpdateNodeData,
+  NODE_ICONS,
+} from '@eventcatalog/visualiser/studio';
+
+/** Something it's connected to: the node at the other end, and the connection's label */
+export type NodeConnection = { id: string; name: string; type?: string; label?: string; outgoing: boolean };
+
+/**
+ * A node's details, in a card next to it (as Studio on the web's): its type and where it is, and its name, version
+ * and summary, saved as they're typed, and what it's connected to (click one to go to it). Catalog resources are read only (they're changed in the catalog), as is
+ * everything on a locked canvas. Notes and text are edited on the canvas.
+ */
+export default memo(function NodeDetails({
+  node,
+  parentName,
+  connections,
+  onOpenNode,
+  containerRef,
+  locked,
+  onChange,
+  onClose,
+}: {
+  /** What's shown of the node (not its position: the card follows the node on screen by itself) */
+  node: Pick<Node, 'id' | 'type' | 'data'>;
+  /** The domain or system it's in, if it's in one */
+  parentName?: string;
+  connections: NodeConnection[];
+  /** Goes to a node it's connected to (and shows its card) */
+  onOpenNode: (id: string) => void;
+  /** The canvas, to put the card next to the node */
+  containerRef: RefObject<HTMLElement | null>;
+  locked: boolean;
+  onChange: UpdateNodeData;
+  onClose: () => void;
+}) {
+  const { saved, showSaved } = useSavedFlash();
+  const resource = getResource(node.type, node.data);
+  const link = getCatalogLink(node);
+  const label = getNodeLabel(node.type);
+  const { icon: Icon, className: iconClassName } = NODE_ICONS[node.type ?? ''] ?? { icon: Box, className: '' };
+  const versioned = isVersioned(node.type);
+  const name = String(resource.name ?? '');
+  const version = String(link?.version ?? resource.version ?? '');
+  const summary = String(resource.summary ?? '');
+  const save = (fields: Record<string, string>) => onChange(node.id, (data) => updateResource(node.type, data, fields));
+
+  return (
+    <NodeCard
+      nodeId={node.id}
+      containerRef={containerRef}
+      label={name || label}
+      onClose={onClose}
+      kicker={
+        <>
+          {/* Its type, in its colour (as the web's type pill) */}
+          <span className={`flex-none ${iconClassName}`}>
+            <span className="inline-flex items-center gap-1 rounded bg-current px-1.5 text-[9px] font-bold uppercase leading-4 tracking-wider">
+              <Icon aria-hidden size={10} className="text-white" />
+              <span className="text-white">{label}</span>
+            </span>
+          </span>
+          {parentName && <span className="ec-doc-card-breadcrumb">in {parentName}</span>}
+        </>
+      }
+      header={
+        link || locked ? (
+          <>
+            <h2 className="ec-doc-card-title">
+              {name}
+              {version && <span className="ec-doc-card-version">v{version}</span>}
+            </h2>
+            {summary && <p className="ec-doc-card-summary">{summary}</p>}
+            {link && (
+              <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-[rgb(var(--ec-page-text-muted))]">
+                <span className="inline-flex items-center gap-1.5">
+                  <Library aria-hidden size={13} className="text-[rgb(var(--ec-accent))]" />
+                  From your catalog: change it there
+                </span>
+                <a
+                  href={link.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="inline-flex items-center gap-1 font-medium text-[rgb(var(--ec-accent))] hover:underline"
+                >
+                  Open in EventCatalog <ExternalLink aria-hidden size={12} />
+                </a>
+              </div>
+            )}
+          </>
+        ) : (
+          // A small form: what's typed is saved as it's typed (there's nothing to press), and shown on the node
+          <div className="ec-edit-form" key={node.id}>
+            <Field label="Name">
+              <EditableText
+                label="Name"
+                value={name}
+                onSave={(next) => save({ name: next })}
+                onSaved={showSaved}
+                placeholder={`Name this ${label.toLowerCase()}`}
+                className="ec-editable-title"
+                required
+              />
+            </Field>
+            {versioned && (
+              <Field label="Version" className="ec-field-version">
+                <EditableText
+                  label="Version"
+                  value={version || '0.0.1'}
+                  onSave={(next) => save({ version: next })}
+                  onSaved={showSaved}
+                  placeholder="0.0.1"
+                  required
+                />
+              </Field>
+            )}
+            <Field label="Summary">
+              <EditableText
+                label="Summary"
+                value={summary}
+                onSave={(next) => save({ summary: next })}
+                onSaved={showSaved}
+                placeholder="What it does, in a sentence or two"
+                className="ec-editable-summary"
+                multiline
+              />
+            </Field>
+            <EditStatus saved={saved} />
+          </div>
+        )
+      }
+    >
+      <div className="ec-doc-card-body px-4 pb-3.5 pt-1 empty:hidden">
+        {(['Connects to', 'Connected from'] as const).map((heading) => {
+          const items = connections.filter((connection) => connection.outgoing === (heading === 'Connects to'));
+          if (!items.length) return null;
+          return (
+            <section key={heading} className="mt-3">
+              <h3 className="mb-1.5 text-xs font-semibold text-[rgb(var(--ec-page-text-muted))]">{heading}</h3>
+              <ul className="space-y-0.5">
+                {items.map((item) => {
+                  const { icon: ItemIcon, className: itemIconClassName } = NODE_ICONS[item.type ?? ''] ?? {
+                    icon: Box,
+                    className: '',
+                  };
+                  return (
+                    <li key={`${item.id}-${item.label}`}>
+                      <button
+                        type="button"
+                        title={`Go to ${item.name}`}
+                        onClick={() => onOpenNode(item.id)}
+                        className="flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-sm hover:bg-[rgb(var(--ec-content-hover))]"
+                      >
+                        <ItemIcon aria-hidden size={15} className={`flex-none ${itemIconClassName}`} />
+                        <span className="min-w-0 flex-1 truncate">{item.name}</span>
+                        {item.label && (
+                          <span className="flex-none text-[11px] text-[rgb(var(--ec-page-text-muted))]">{item.label}</span>
+                        )}
+                      </button>
+                    </li>
+                  );
+                })}
+              </ul>
+            </section>
+          );
+        })}
+      </div>
+    </NodeCard>
+  );
+});

package/eventcatalog/src/features/studio/components/OpenInStudioDialog.tsx

@@ -0,0 +1,79 @@
+import { useState, type FormEvent } from 'react';
+import { MAX_TITLE_LENGTH } from '../limits';
+import Dialog, { PRIMARY_BUTTON, SECONDARY_BUTTON } from './Dialog';
+import { STATUS } from '@eventcatalog/visualiser/studio';
+
+/**
+ * Naming the canvas a diagram is opened in (the visualiser's "Open in Studio"), named after the diagram to start
+ * with, like a new canvas on the Studio page. Loaded with the visualiser, so it imports nothing that loads a canvas.
+ */
+export default function OpenInStudioDialog({
+  title,
+  onOpen,
+  onClose,
+}: {
+  /** The diagram's title */
+  title?: string;
+  /** Makes the canvas with this name and opens it (rejects with what went wrong) */
+  onOpen: (title: string | undefined) => Promise<void>;
+  onClose: () => void;
+}) {
+  const [name, setName] = useState((title ?? '').slice(0, MAX_TITLE_LENGTH));
+  const [opening, setOpening] = useState(false);
+  const [error, setError] = useState<string>();
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    setOpening(true);
+    setError(undefined);
+    try {
+      // Stays open (and busy) while the canvas page loads
+      await onOpen(name.trim() || undefined);
+    } catch (failure) {
+      setError((failure as Error).message);
+      setOpening(false);
+    }
+  };
+
+  return (
+    <Dialog labelledBy="open-in-studio-title" busy={opening} onClose={onClose}>
+      <form onSubmit={submit}>
+        <div className="border-b px-5 py-4 border-[rgb(var(--ec-page-border))]">
+          <h2 id="open-in-studio-title" className="text-base font-semibold">
+            Open in Studio
+          </h2>
+          <p className="mt-0.5 text-sm text-[rgb(var(--ec-page-text-muted))]">
+            A new canvas starts with this diagram. Name it for what you're designing, so your team can find it.
+          </p>
+        </div>
+        <div className="px-5 py-4">
+          <label htmlFor="open-in-studio-name" className="block text-sm font-semibold">
+            Name
+          </label>
+          <input
+            id="open-in-studio-name"
+            // Ready to type a new name, or keep the diagram's
+            autoFocus
+            onFocus={(event) => event.target.select()}
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            maxLength={MAX_TITLE_LENGTH}
+            autoComplete="off"
+            placeholder="e.g. Payments redesign"
+            disabled={opening}
+            className="mt-2 w-full rounded-lg border px-3 py-2 text-sm shadow-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:border-[rgb(var(--ec-accent))] focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.25)]"
+          />
+          {error && <p className={`mt-2 text-sm ${STATUS.danger.text}`}>{error}</p>}
+        </div>
+        <div className="flex justify-end gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
+          <button type="button" onClick={onClose} disabled={opening} className={SECONDARY_BUTTON}>
+            Cancel
+          </button>
+          <button type="submit" disabled={opening} className={PRIMARY_BUTTON}>
+            {opening ? 'Opening…' : 'Open in Studio'}
+          </button>
+        </div>
+      </form>
+    </Dialog>
+  );
+}