@eventcatalog/core 5.0.0-beta.7 → 5.0.0-beta.9

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

@@ -1,9 +1,11 @@
-import { memo, useMemo, useState, type DragEvent } from 'react';
-import { Check, Plus, Search } from 'lucide-react';
+import { memo, useCallback, useMemo, useState, type ReactNode } from 'react';
+import { Check, ChevronRight, Plus, Search } from 'lucide-react';
 import type { CatalogResource } from '../catalog-resources';
+import { catalogNodeData } from '../catalog';
 import { NODE_CATEGORIES, nodeDefinitions } from '../node-types';
 import type { Thread } from '../hooks/use-comments';
 import { CommentList } from './Comments';
+import { useDragGhost, type StartDrag } from './DragGhost';
 import { CATALOG_GROUPS, NODE_ICONS } from './icons';
 import { STATUS } from './status';
 
@@ -18,13 +20,52 @@ const itemClass =
   'group flex cursor-grab items-center justify-between gap-2 rounded-md border px-2.5 py-2 bg-[rgb(var(--ec-page-bg))] border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))]';
 const addButtonClass =
   'shrink-0 rounded p-0.5 opacity-0 group-hover:opacity-100 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))]';
-const headingClass = 'px-1 text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]';
+// The sections that are collapsed, by id (e.g. "components:messages"), remembered in this browser
+const COLLAPSED_KEY = 'eventcatalog-studio-collapsed';
+type Collapsed = { collapsed: ReadonlySet<string>; toggle: (id: string) => void };
 
-const startDrag = (type: string, value: string) => (event: DragEvent) => {
-  event.dataTransfer.setData(type, value);
-  event.dataTransfer.effectAllowed = 'move';
+const readCollapsed = (): Set<string> => {
+  try {
+    return new Set(JSON.parse(localStorage.getItem(COLLAPSED_KEY) ?? '[]') as string[]);
+  } catch {
+    return new Set();
+  }
 };
 
+function useCollapsed(): Collapsed {
+  const [collapsed, setCollapsed] = useState(readCollapsed);
+  const toggle = useCallback((id: string) => {
+    setCollapsed((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      try {
+        localStorage.setItem(COLLAPSED_KEY, JSON.stringify([...next]));
+      } catch {
+        // Not remembered (e.g. storage is blocked): it still works for now
+      }
+      return next;
+    });
+  }, []);
+  return useMemo(() => ({ collapsed, toggle }), [collapsed, toggle]);
+}
+
+/** A section's heading, which opens and closes it */
+function SectionHeading({ open, onToggle, children }: { open: boolean; onToggle: () => void; children: ReactNode }) {
+  return (
+    <h3>
+      <button
+        onClick={onToggle}
+        aria-expanded={open}
+        className="flex w-full cursor-pointer items-center gap-1 rounded-md px-1.5 py-1 text-left text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))] transition-colors hover:bg-[rgb(var(--ec-page-border)/0.6)] hover:text-[rgb(var(--ec-page-text))]"
+      >
+        <ChevronRight size={12} className={`shrink-0 transition-transform ${open ? 'rotate-90' : ''}`} />
+        {children}
+      </button>
+    </h3>
+  );
+}
+
 type Tab = 'components' | 'catalog' | 'comments';
 
 /** Components and catalog resources to drag onto the canvas, and the comments on it */
@@ -49,6 +90,9 @@ export default memo(function LeftPanel({
   onOpenThread: (thread: Thread) => void;
 }) {
   const [tab, setTab] = useState<Tab>('components');
+  // What's being dragged onto the canvas, drawn as the node it becomes (see DragGhost)
+  const { startDrag, ghost } = useDragGhost();
+  const sections = useCollapsed();
   const openThreads = threads.filter((thread) => !thread.resolved).length;
   const tabClass = (active: boolean) =>
     `flex flex-1 items-center justify-center gap-1 whitespace-nowrap rounded-md px-1.5 py-1 text-xs font-medium ${
@@ -73,11 +117,20 @@ export default memo(function LeftPanel({
           )}
         </button>
       </div>
-      {tab === 'components' && <ComponentList onAdd={onAddComponent} />}
-      {tab === 'catalog' && <CatalogList resources={resources} keysOnCanvas={keysOnCanvas} onAdd={onAddResource} />}
+      {tab === 'components' && <ComponentList onAdd={onAddComponent} startDrag={startDrag} sections={sections} />}
+      {tab === 'catalog' && (
+        <CatalogList
+          resources={resources}
+          keysOnCanvas={keysOnCanvas}
+          onAdd={onAddResource}
+          startDrag={startDrag}
+          sections={sections}
+        />
+      )}
       {tab === 'comments' && (
         <CommentList threads={threads} showResolved={showResolved} onToggleResolved={onToggleResolved} onOpen={onOpenThread} />
       )}
+      {ghost}
     </aside>
   );
 });
@@ -87,28 +140,53 @@ const listedDefinitions = NODE_CATEGORIES.map((category) => ({
   definitions: nodeDefinitions.filter((definition) => definition.category === category.id && !definition.unlisted),
 }));
 
-const ComponentList = memo(function ComponentList({ onAdd }: { onAdd: (type: string) => void }) {
+// Each component's data, made once, for the node shown while it's dragged
+const componentPreviews = new Map(
+  nodeDefinitions.map((definition) => [definition.type, { type: definition.type, data: definition.createData() }])
+);
+
+const ComponentList = memo(function ComponentList({
+  onAdd,
+  startDrag,
+  sections: { collapsed, toggle },
+}: {
+  onAdd: (type: string) => void;
+  startDrag: StartDrag;
+  sections: Collapsed;
+}) {
   return (
-    <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-3 pb-3">
-      {listedDefinitions.map((category) => (
-        <section key={category.id} className="space-y-1.5">
-          <h3 className={headingClass}>{category.label}</h3>
-          {category.definitions.map(({ type, label }) => {
-            const { icon: Icon, className } = NODE_ICONS[type];
-            return (
-              <div key={type} draggable onDragStart={startDrag(COMPONENT_DRAG_TYPE, type)} className={itemClass}>
-                <span className="flex items-center gap-2 text-xs font-medium">
-                  <Icon size={16} className={className} />
-                  {label}
-                </span>
-                <button onClick={() => onAdd(type)} title={`Add ${label}`} className={addButtonClass}>
-                  <Plus size={14} />
-                </button>
-              </div>
-            );
-          })}
-        </section>
-      ))}
+    <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3">
+      {listedDefinitions.map((category) => {
+        const id = `components:${category.id}`;
+        const open = !collapsed.has(id);
+        return (
+          <section key={category.id} className="space-y-1.5">
+            <SectionHeading open={open} onToggle={() => toggle(id)}>
+              {category.label}
+            </SectionHeading>
+            {open &&
+              category.definitions.map(({ type, label }) => {
+                const { icon: Icon, className } = NODE_ICONS[type];
+                return (
+                  <div
+                    key={type}
+                    draggable
+                    onDragStart={startDrag(COMPONENT_DRAG_TYPE, type, componentPreviews.get(type)!)}
+                    className={itemClass}
+                  >
+                    <span className="flex items-center gap-2 text-xs font-medium">
+                      <Icon size={16} className={className} />
+                      {label}
+                    </span>
+                    <button onClick={() => onAdd(type)} title={`Add ${label}`} className={addButtonClass}>
+                      <Plus size={14} />
+                    </button>
+                  </div>
+                );
+              })}
+          </section>
+        );
+      })}
     </div>
   );
 });
@@ -117,13 +195,18 @@ const CatalogList = memo(function CatalogList({
   resources,
   keysOnCanvas,
   onAdd,
+  startDrag,
+  sections: { collapsed, toggle },
 }: {
   resources: CatalogResource[];
   keysOnCanvas: Set<string>;
   onAdd: (key: string) => void;
+  startDrag: StartDrag;
+  sections: Collapsed;
 }) {
   const [search, setSearch] = useState('');
   const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
+  const searching = search.trim() !== '';
   const groups = useMemo(() => {
     const term = search.trim().toLowerCase();
     const matches = term
@@ -146,17 +229,20 @@ const CatalogList = memo(function CatalogList({
           className="w-full rounded-md 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>
-      <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-3 pb-3">
+      <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3">
         {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);
+          const id = `catalog:${collection}`;
+          // While searching, every group with matches shows them
+          const open = searching || !collapsed.has(id);
+          const shown = !open ? [] : expanded.has(collection) ? items : items.slice(0, GROUP_PREVIEW_SIZE);
           return (
             <section key={collection} className="space-y-1.5">
-              <h3 className={headingClass}>
+              <SectionHeading open={open} onToggle={() => toggle(id)}>
                 {label} <span className="font-normal">({items.length})</span>
-              </h3>
+              </SectionHeading>
               {shown.map((resource) => (
                 <CatalogItem
                   key={resource.key}
@@ -165,9 +251,10 @@ const CatalogList = memo(function CatalogList({
                   iconClassName={className}
                   onCanvas={keysOnCanvas.has(resource.key)}
                   onAdd={onAdd}
+                  startDrag={startDrag}
                 />
               ))}
-              {shown.length < items.length && (
+              {open && 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))]"
@@ -189,15 +276,24 @@ const CatalogItem = memo(function CatalogItem({
   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 (
-    <div draggable onDragStart={startDrag(CATALOG_DRAG_TYPE, resource.key)} title={resource.summary} className={itemClass}>
+    <div
+      draggable
+      onDragStart={startDrag(CATALOG_DRAG_TYPE, resource.key, preview)}
+      title={resource.summary}
+      className={itemClass}
+    >
       <span className="flex min-w-0 items-center gap-2 text-xs font-medium">
         <Icon size={16} className={`shrink-0 ${iconClassName}`} />
         <span className="truncate">{resource.name}</span>

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

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+/**
+ * Someone's picture from their sign-in provider (SSO), loaded from there. By default it covers their avatar's
+ * initials, which show again if it doesn't load (blocked, expired, or no longer there).
+ */
+export default function Picture({ src, className = 'absolute inset-0 h-full w-full' }: { src?: string; className?: string }) {
+  const [failed, setFailed] = useState<string>();
+  if (!src || failed === src) return null;
+  return (
+    <img
+      src={src}
+      alt=""
+      draggable={false}
+      // Some providers (e.g. Google) refuse pictures loaded with a referrer from another site
+      referrerPolicy="no-referrer"
+      onError={() => setFailed(src)}
+      className={`rounded-full object-cover ${className}`}
+    />
+  );
+}

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

@@ -4,6 +4,7 @@ import { Bot, Eye, EyeOff } from 'lucide-react';
 import { sizeOf } from '../grouping';
 import { usePeople, type Peer, type PresenceStore } from '../hooks/presence-store';
 import { useFollowCamera } from '../hooks/use-follow-camera';
+import Picture from './Picture';
 
 /**
  * Other people on the canvas: their pointers, selections and the connections they're dragging. Drawn in the
@@ -148,6 +149,7 @@ const PeerPointer = memo(function PeerPointer({ store, peer, scale }: { store: P
         style={{ backgroundColor: peer.color }}
       >
         {peer.agent && <Bot size={12} />}
+        <Picture src={peer.picture} className="-ml-0.5 h-4 w-4 shrink-0" />
         {peer.name}
         {peer.activity && <span className="font-normal opacity-90">· {peer.activity}</span>}
       </span>

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

@@ -1,75 +1,212 @@
-import { memo } from 'react';
+import { memo, useState, type FormEvent, type ReactNode } from 'react';
 import type { Node } from '@xyflow/react';
-import { ExternalLink, Trash2 } from 'lucide-react';
+import { Box, ExternalLink, Library, Trash2, X } from 'lucide-react';
 import { getCatalogLink } from '../catalog';
-import { getNodeLabel, getResource, updateResource } from '../node-types';
+import { getNodeLabel, getResource, isVersioned, updateResource } from '../node-types';
 import type { UpdateNodeData } from './canvas-nodes';
+import { NODE_ICONS } from './icons';
 import { STATUS } from './status';
 
 const inputClass =
-  'w-full rounded-md border px-2 py-1.5 text-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))]';
+  '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)] read-only:cursor-default read-only:opacity-70 read-only:shadow-none read-only:focus:ring-0 read-only:focus:border-[rgb(var(--ec-input-border))]';
+const buttonClass = 'rounded-lg px-4 py-2 text-sm font-medium transition-colors';
 
-/** The selected node's name and summary (read only for catalog resources: those are changed in the catalog) */
+// Versions are usually semantic versions (1.0.0), but any text is allowed
+const LOOKS_LIKE_A_VERSION = /^v?\d+(\.\d+){0,2}([-+][\w.-]+)?$/;
+
+/** How to name each type, shown under the name */
+const NAME_HINTS: Record<string, string> = {
+  event: 'The name of the event. Use a verb-noun format in the past tense (e.g., OrderPlaced).',
+  command: 'The name of the command. Use an instruction (e.g., PlaceOrder).',
+  query: 'The name of the query. Ask for something (e.g., GetOrder).',
+  service: 'The name of the service (e.g., Orders Service).',
+  channel: 'The name of the channel (e.g., orders.events).',
+};
+
+type Field = 'name' | 'version' | 'summary';
+
+/**
+ * The details of the node being edited: its name, version and summary, saved together with Save changes (one
+ * change for everyone, and one step to undo). Catalog resources are read only: they're changed in the catalog.
+ * Notes and text are edited on the canvas.
+ */
 export default memo(function PropertiesPanel({
   node,
   onChange,
   onDelete,
+  onClose,
 }: {
   /** What's shown of the node (not its position, so dragging it doesn't re-render the panel) */
   node: Pick<Node, 'id' | 'type' | 'data'>;
   onChange: UpdateNodeData;
   onDelete: (ids: string[]) => void;
+  onClose: () => void;
 }) {
   const resource = getResource(node.type, node.data);
   const link = getCatalogLink(node);
-  const setField = (field: string, value: string) =>
-    onChange(node.id, (data) => updateResource(node.type, data, { [field]: value }));
+  const label = getNodeLabel(node.type);
+  const noun = label.toLowerCase();
+  const { icon: Icon, className: iconClassName } = NODE_ICONS[node.type ?? ''] ?? { icon: Box, className: '' };
+  const versioned = isVersioned(node.type);
+
+  // What's been changed here and not saved. Fields not changed show the node as it is, so changes others make while
+  // it's open show up.
+  const [draft, setDraft] = useState<Partial<Record<Field, string>>>({});
+  const saved: Record<Field, string> = {
+    name: String(resource.name ?? ''),
+    version: String(link?.version ?? resource.version ?? ''),
+    summary: String(resource.summary ?? ''),
+  };
+  const value = (field: Field) => draft[field] ?? saved[field];
+  const edit = (field: Field) => (event: { target: { value: string } }) =>
+    setDraft((current) => ({ ...current, [field]: event.target.value }));
+
+  const changes = Object.entries(draft).filter(([field, text]) => text !== saved[field as Field]);
+  const missing = !value('name').trim() || (versioned && !value('version').trim());
+  const canSave = !link && changes.length > 0 && !missing;
+  const version = value('version');
+
+  const save = (event?: FormEvent) => {
+    event?.preventDefault();
+    if (!canSave) return;
+    onChange(node.id, (data) => updateResource(node.type, data, Object.fromEntries(changes)));
+    setDraft({});
+    onClose();
+  };
 
   return (
-    <aside className="w-72 shrink-0 space-y-4 overflow-y-auto border-l p-4 bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]">
-      <h2 className="text-sm font-semibold">{getNodeLabel(node.type)}</h2>
-      {link && (
-        <div className="space-y-2 rounded-md border p-3 text-xs border-[rgb(var(--ec-page-border))]">
-          <p className="text-[rgb(var(--ec-page-text-muted))]">
-            Linked to <span className="font-medium text-[rgb(var(--ec-page-text))]">{String(resource.name)}</span> v{link.version}{' '}
-            in the catalog. Edit it in the catalog to change its name or summary.
-          </p>
-          <a
-            href={link.url}
-            target="_blank"
-            rel="noreferrer"
-            className="flex items-center gap-1 text-[rgb(var(--ec-accent))] hover:underline"
-          >
-            View in catalog <ExternalLink size={12} />
-          </a>
-        </div>
-      )}
-      <label className="block space-y-1 text-xs text-[rgb(var(--ec-page-text-muted))]">
-        Name
-        <input
-          value={String(resource.name ?? '')}
-          readOnly={!!link}
-          onChange={(e) => setField('name', e.target.value)}
-          className={inputClass}
-        />
-      </label>
-      <label className="block space-y-1 text-xs text-[rgb(var(--ec-page-text-muted))]">
-        Summary
-        <textarea
-          rows={4}
-          value={String(resource.summary ?? '')}
-          readOnly={!!link}
-          onChange={(e) => setField('summary', e.target.value)}
-          className={inputClass}
-        />
-      </label>
-      <button
-        onClick={() => onDelete([node.id])}
-        className={`flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs ${STATUS.danger.text} ${STATUS.danger.hover}`}
+    <aside className="flex w-[22rem] shrink-0 flex-col border-l bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]">
+      <header className="flex items-center gap-3 border-b px-5 py-4 border-[rgb(var(--ec-page-border))]">
+        <Icon size={22} className={`shrink-0 ${iconClassName}`} />
+        <h2 className="min-w-0 flex-1 truncate text-lg font-semibold">{label}</h2>
+        <button
+          type="button"
+          onClick={onClose}
+          title="Close"
+          aria-label="Close"
+          className="shrink-0 rounded-md p-1 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)] hover:text-[rgb(var(--ec-icon-hover))]"
+        >
+          <X size={18} />
+        </button>
+      </header>
+
+      <form
+        onSubmit={save}
+        // ⌘/Ctrl + Enter saves from any field (Enter alone adds a line to the summary)
+        onKeyDown={(event) => (event.metaKey || event.ctrlKey) && event.key === 'Enter' && save(event)}
+        className="flex min-h-0 flex-1 flex-col"
       >
-        <Trash2 size={14} />
-        Delete
-      </button>
+        <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-5 py-5">
+          {link && (
+            <div className="space-y-2 rounded-lg border p-3 text-xs bg-[rgb(var(--ec-accent-subtle)/0.5)] border-[rgb(var(--ec-accent)/0.25)]">
+              <p className="flex items-center gap-1.5 font-semibold text-[rgb(var(--ec-page-text))]">
+                <Library size={14} className="text-[rgb(var(--ec-accent))]" />
+                From your catalog
+              </p>
+              <p className="text-[rgb(var(--ec-page-text-muted))]">
+                Its name, version and summary come from the catalog: change them there and they're kept in sync here.
+              </p>
+              <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 catalog <ExternalLink size={12} />
+              </a>
+            </div>
+          )}
+
+          <FormField label="Name" hint={NAME_HINTS[node.type ?? ''] ?? `The name of the ${noun}.`} required={!link}>
+            <input
+              autoFocus={!link}
+              value={value('name')}
+              readOnly={!!link}
+              onChange={edit('name')}
+              placeholder={`Name this ${noun}`}
+              className={inputClass}
+            />
+          </FormField>
+          {versioned && (
+            <FormField label="Version" hint="The version number (e.g., 1.0.0)." required={!link}>
+              <input
+                value={version}
+                readOnly={!!link}
+                onChange={edit('version')}
+                placeholder="0.0.1"
+                spellCheck={false}
+                className={inputClass}
+              />
+              {!link && version && !LOOKS_LIKE_A_VERSION.test(version) && (
+                <p className={`text-xs ${STATUS.warning.text}`}>Versions are usually like 1.0.0</p>
+              )}
+            </FormField>
+          )}
+          <FormField label="Summary" hint={`A brief summary of the ${noun}.`}>
+            <textarea
+              rows={5}
+              value={value('summary')}
+              readOnly={!!link}
+              onChange={edit('summary')}
+              placeholder={`What does this ${noun} do?`}
+              className={`${inputClass} resize-y`}
+            />
+          </FormField>
+        </div>
+
+        <footer className="flex items-center gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
+          <button
+            type="button"
+            onClick={() => onDelete([node.id])}
+            title={`Delete ${noun}`}
+            aria-label={`Delete ${noun}`}
+            className={`mr-auto rounded-lg p-2 ${STATUS.danger.text} ${STATUS.danger.hover}`}
+          >
+            <Trash2 size={16} />
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            className={`${buttonClass} border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)]`}
+          >
+            {link ? 'Close' : 'Cancel'}
+          </button>
+          {!link && (
+            <button
+              type="submit"
+              disabled={!canSave}
+              className={`${buttonClass} bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))] disabled:cursor-not-allowed disabled:opacity-50`}
+            >
+              Save changes
+            </button>
+          )}
+        </footer>
+      </form>
     </aside>
   );
 });
+
+function FormField({
+  label,
+  hint,
+  required = false,
+  children,
+}: {
+  label: string;
+  hint: string;
+  required?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <label className="block space-y-2">
+      <span className="block">
+        <span className="block text-sm font-semibold text-[rgb(var(--ec-page-text))]">
+          {label}
+          {required && <span className={`ml-0.5 ${STATUS.danger.text}`}>*</span>}
+        </span>
+        <span className="mt-0.5 block text-xs text-[rgb(var(--ec-page-text-muted))]">{hint}</span>
+      </span>
+      {children}
+    </label>
+  );
+}