@elytracms/studio 0.0.93 → 0.0.95

package/dist/components/cms/detail-editor.js

@@ -4,10 +4,10 @@ import { Check, ChevronDown, CircleAlert, CircleCheck, Copy, Eye, EyeOff, GitCom
 import { useCallback, useMemo, useState } from 'react';
 import { DRAFT_PERSPECTIVE, DRAFT_VARIANT, FIELD_WIDTH_SPANS, SIDEBAR_FIELD_GROUP, documentKey, groupOrder, groupSectionOf, hasAliases, isBlocksField, isFieldHiddenIn, isFieldLocalized, isSingleton, localeViews, resolveDocumentTitle, resolveField, sidebarFields, tabDescriptorOf, tabOrder, titleFieldOf, staticFieldHidden, valuesInLocale, perspectiveKey, variantOf, } from '@elytracms/core/cms-core';
 import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, CollapsibleSection, Field, Heading, Row, Spacer, Stack, Text, toast, } from '@elytracms/studio/ui';
-import { studioManifestLookup } from '@elytracms/studio/lib/registry';
-import { cn } from '@elytracms/studio/lib/utils';
-import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
-import { LocaleSwitcher, displayedFieldFallback, fieldConnection, fillFieldFromBase, resetFieldToBase, } from '@elytracms/studio/lib/locale';
+import { studioManifestLookup } from '../../lib/registry/index.js';
+import { cn } from '../../lib/utils.js';
+import { localizedLabel, translate } from '../../lib/i18n/index.js';
+import { LocaleSwitcher, displayedFieldFallback, fieldConnection, fillFieldFromBase, resetFieldToBase, } from '../../lib/locale/index.js';
 import { FallbackChip } from './cell.js';
 import { FieldConnectionControl } from './field-connection.js';
 import { FieldControl } from './field-control.js';
@@ -18,12 +18,13 @@ import { CompositionFieldEditor } from '../builder/composition-field-editor-lazy
 import { fieldLabel } from './cms-labels.js';
 import { useCmsCollectionViewSource } from '../collection-view/cms-collection-view-source.js';
 import { CollectionViewProvider, useCollectionView } from '../collection-view/collection-view-context.js';
-import { resolveFieldAccess } from '@elytracms/studio/lib/collection-view/collection-view-source';
+import { resolveFieldAccess } from '../../lib/collection-view/collection-view-source.js';
 import { DocStateBadge } from './doc-state.js';
 import { UnsavedChangesGuard } from '../guards.js';
 import { ReferenceConfirmDialog } from './reference-confirm.js';
 import { ReferencesPanel } from '../references/references-panel.js';
 import { InspectorSidebar } from '../inspector/inspector-sidebar.js';
+import { useContributedDocumentPanes } from '../inspector/document-panes.js';
 import { DocumentEditorProvider } from './document-editor-context.js';
 import { TranslateDocumentAction } from '../ai/translate-document-action.js';
 import { VersionsPane } from './versions-pane.js';
@@ -34,23 +35,23 @@ import { IssuesPane } from './issues-pane.js';
 import { DetailsPane } from './details-pane.js';
 import { DocumentUrlPath } from './document-url-path.js';
 import { useSetBreadcrumb } from '../breadcrumb-context.js';
-import { useAiCurrentDocumentTap } from '@elytracms/studio/lib/ai-current-document';
-import { resolveDeploymentRoutes } from '@elytracms/studio/lib/workspace';
+import { useAiCurrentDocumentTap } from '../../lib/ai-current-document.js';
+import { resolveDeploymentRoutes } from '../../lib/workspace/index.js';
 // EC-325 — the controller hooks EditorBody orchestrates (each independently
 // unit-tested at its pure core); the shell threads shared draft/ref/replaceDraft
 // state across their boundaries.
 import { usePublishedPerspective } from './use-published-perspective.js';
 import { useDocumentDraft } from './use-document-draft.js';
 import { FieldCommitBoundary, FieldConflictNotice, FieldPresenceNote, conflictActorName, pathInField, presentInField, } from './field-collaboration.js';
-import { fieldPositionPath } from '@elytracms/studio/lib/cms/field-patch';
-import { getStudioActor } from '@elytracms/studio/lib/operations';
+import { fieldPositionPath } from '../../lib/cms/field-patch.js';
+import { getStudioActor } from '../../lib/operations/index.js';
 import { useDiscardController } from './use-discard-controller.js';
 import { usePublishController, publishGate } from './use-publish-controller.js';
 import { FieldFocusRequestContext, FieldPathContext } from './field-anchors.js';
 import { useFieldFocus } from './use-field-focus.js';
 import { useCompareSelection } from './use-compare-selection.js';
 import { useLiveUrl } from './use-live-url.js';
-import { cmsValidationIssueMessage } from '@elytracms/studio/lib/persona/labels';
+import { cmsValidationIssueMessage } from '../../lib/persona/labels.js';
 import { inlineFieldErrors } from './inline-field-errors.js';
 export function DetailEditor({ projectId, collectionId, documentId, focusPath, }) {
     // AD-19: the edit shell is a portable surface over a CollectionViewSource, just
@@ -58,10 +59,13 @@ export function DetailEditor({ projectId, collectionId, documentId, focusPath, }
     // and hands it to the portable {@link PortableDetailEditor} so `EditorBody` (and
     // the shared field controls / pickers) render over the source, never `useCms()`.
     const source = useCmsCollectionViewSource(collectionId);
+    // EC-618: the project's contributed inspector panes (`defineStudio({ documentPanes })`) —
+    // CMS documents only, so this entry point resolves them and the rails' do not.
+    const contributedPanes = useContributedDocumentPanes(projectId, collectionId, documentId);
     if (!source) {
         return (_jsx(DocumentNotFound, { projectId: projectId, listPath: studioPath.cmsCollection(collectionId), label: collectionId }));
     }
-    return (_jsx(PortableDetailEditor, { source: source, projectId: projectId, documentId: documentId, focusPath: focusPath }));
+    return (_jsx(PortableDetailEditor, { source: source, projectId: projectId, documentId: documentId, focusPath: focusPath, contributedPanes: contributedPanes }));
 }
 /**
  * The portable edit shell (EC-240 / AD-19): resolve the record by id from ANY
@@ -70,7 +74,7 @@ export function DetailEditor({ projectId, collectionId, documentId, focusPath, }
  * routing (the "back to list" target, the not-found link) is rail-owned via
  * `source.listPath`, so the shell never hard-codes the CMS route.
  */
-export function PortableDetailEditor({ source, projectId, documentId, focusPath, formAppendix, }) {
+export function PortableDetailEditor({ source, projectId, documentId, focusPath, formAppendix, contributedPanes, }) {
     const doc = source.get({ collection: source.collectionId, id: documentId });
     // EC-274: singleton opening is owned by `SingletonGate` (it resolves the lone
     // document and materializes it). The detail editor just renders the document it
@@ -78,13 +82,13 @@ export function PortableDetailEditor({ source, projectId, documentId, focusPath,
     if (!doc) {
         return (_jsx(DocumentNotFound, { projectId: projectId, listPath: source.listPath, label: localizedLabel(source.schema.form?.label, source.collectionId) }));
     }
-    return (_jsx(CollectionViewProvider, { source: source, children: _jsx(EditorBody, { projectId: projectId, collection: source.schema, doc: doc, focusPath: focusPath, formAppendix: formAppendix }, `${source.collectionId}/${documentId}`) }));
+    return (_jsx(CollectionViewProvider, { source: source, children: _jsx(EditorBody, { projectId: projectId, collection: source.schema, doc: doc, focusPath: focusPath, formAppendix: formAppendix, contributedPanes: contributedPanes }, `${source.collectionId}/${documentId}`) }));
 }
 /** The record-not-found state — a heading + a rail-owned "back to list" link. */
 function DocumentNotFound({ projectId, listPath, label, }) {
     return (_jsx("div", { className: "grid h-full place-items-center p-8", children: _jsxs(Stack, { gap: "3", align: "center", className: "text-center", children: [_jsx(Heading, { level: 2, size: "h2", children: translate('cms.editor.notFoundTitle') }), listPath !== undefined ? (_jsx(Link, { to: STUDIO_PROJECT_ROUTE, params: { projectId, _splat: listPath }, className: "text-sm text-primary hover:underline", children: translate('cms.editor.backToList', { label }) })) : null] }) }));
 }
-function EditorBody({ projectId, collection, doc, focusPath, formAppendix, }) {
+function EditorBody({ projectId, collection, doc, focusPath, formAppendix, contributedPanes, }) {
     const source = useCollectionView();
     const navigate = useNavigate();
     // AD-19: capability flags gate whole shell regions AND their method groups, so
@@ -222,6 +226,16 @@ function EditorBody({ projectId, collection, doc, focusPath, formAppendix, }) {
     // not a field-row — it takes over its tab with the full page-builder canvas.
     // Convention: such a field lives on its own dedicated fieldset tab.
     const canvasField = tabFields.find(isBlocksField);
+    // EC-630 — the canvas inspector's commit boundaries reach this draft's committer: a burst
+    // of typing in a prop or a typography run commits on its control kind's policy.
+    const { canvasFocused, canvasBlurred, canvasEntered } = documentDraft;
+    const canvasCommits = useMemo(() => canvasField
+        ? {
+            focused: (position, policy) => canvasFocused(canvasField, position, policy),
+            blurred: (position) => canvasBlurred(canvasField, position),
+            entered: (position) => canvasEntered(canvasField, position),
+        }
+        : undefined, [canvasField, canvasFocused, canvasBlurred, canvasEntered]);
     // EC-172 / EC-283 / EC-443 — the field-focus/highlight controller (jump-to-field
     // from the reference deep-link `focusPath` and the Issues pane), now path-aware:
     // `focusRequest` is provided below via `FieldFocusRequestContext` so nested
@@ -389,6 +403,8 @@ function EditorBody({ projectId, collection, doc, focusPath, formAppendix, }) {
     const trailingPanes = [
         ...(detailsPane ? [detailsPane] : []),
         ...(canVersions ? [versionsPane] : []),
+        // EC-618: the project's contributed panes (an addon's per-document panel).
+        ...(contributedPanes ?? []),
         issuesPane,
     ];
     // EC-268 / 0.0.39 — the publish controller: the publish indicator state and the
@@ -522,7 +538,7 @@ function EditorBody({ projectId, collection, doc, focusPath, formAppendix, }) {
                                                     ? 'bg-accent text-accent-foreground'
                                                     : 'text-muted-foreground hover:bg-muted'), children: [_jsxs("button", { type: "button", onClick: () => setActiveTab(COMPARE_TAB), "aria-pressed": activeTab === COMPARE_TAB, className: "inline-flex items-center gap-1", children: [_jsx(GitCompareArrows, { className: "size-3", "aria-hidden": true }), " ", translate('cms.version.compare')] }), _jsx("button", { type: "button", onClick: exitCompare, "aria-label": translate('cms.version.closeCompare'), className: "ml-0.5 rounded p-0.5 hover:bg-background/40", children: _jsx(X, { className: "size-3" }) })] })) : null] }), _jsx(Spacer, {}), canLocales ? _jsx(LocaleSwitcher, {}) : null, canPublish ? (_jsxs(Row, { gap: "px", className: "rounded-md bg-muted/60 p-0.5", children: [_jsx(PerspectiveButton, { label: translate('cms.editor.draftState'), active: variantOf(perspective) === DRAFT_VARIANT, onClick: () => setPerspective(DRAFT_PERSPECTIVE) }), _jsx(PerspectiveButton, { label: translate('cms.editor.publishedState'), active: perspective === 'published', accent: "info", disabled: !published, title: published ? undefined : translate('cms.editor.publishToViewPublished'), onClick: () => setPerspective('published') })] })) : null] })) : null] }), viewReadOnly ? (_jsxs(Row, { gap: "2", className: "shrink-0 border-b border-info/30 bg-info/10 px-4 py-1.5 text-info sm:px-6", "data-testid": "published-view-banner", children: [_jsx(Lock, { className: "size-3.5 shrink-0", "aria-hidden": true }), _jsx(Text, { size: "xs", className: "text-info", children: translate('cms.editor.publishedReadOnlyBanner') }), _jsx(Spacer, {}), _jsx("button", { type: "button", onClick: () => setPerspective(DRAFT_PERSPECTIVE), className: "text-xs font-medium underline-offset-2 hover:underline", children: translate('cms.editor.switchToDraft') })] })) : null, publishedPending ? (_jsx("div", { className: "grid min-h-0 flex-1 place-items-center p-8", children: _jsx(Text, { size: "sm", tone: "muted", children: publishedSnapshot.status === 'loading'
                                 ? translate('cms.editor.loadingPublishedVersion')
-                                : translate('cms.editor.noPublishedVersion') }) })) : activeTab === COMPARE_TAB && compare ? (_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(VersionCompare, {}) }), _jsx(InspectorSidebar, { panes: trailingPanes, activeId: inspectorPaneId, onActiveChange: setInspectorPaneId, className: "w-[320px] shrink-0 border-l border-border" })] })) : canvasField ? (_jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(CompositionFieldEditor, { field: canvasField, value: getValue(canvasField), onChange: (v) => documentDraft.setCanvasValue(canvasField, v), conflicts: conflictNotices(canvasField), readOnly: viewReadOnly || source.isFieldReadOnly(canvasField), trailingPanes: trailingPanes }, `${canvasField.name}:${documentDraft.canvasNonce}:${perspectiveKey(perspective)}`) })) : activeTab === REFERENCES_TAB ? (_jsx("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsx(ReferencesPanel, { projectId: projectId, source: { type: 'document', id: documentKey(ref) }, target: { type: 'document', id: documentKey(ref) } }) }) }) })) : (_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsxs(Stack, { gap: "6", children: [groups.map((group) => {
+                                : translate('cms.editor.noPublishedVersion') }) })) : activeTab === COMPARE_TAB && compare ? (_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(VersionCompare, {}) }), _jsx(InspectorSidebar, { panes: trailingPanes, activeId: inspectorPaneId, onActiveChange: setInspectorPaneId, className: "w-[320px] shrink-0 border-l border-border" })] })) : canvasField ? (_jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(CompositionFieldEditor, { field: canvasField, value: getValue(canvasField), change: documentDraft.canvasChange, onChange: (v, base) => documentDraft.setCanvasValue(canvasField, v, base), commits: canvasCommits, conflicts: conflictNotices(canvasField), readOnly: viewReadOnly || source.isFieldReadOnly(canvasField), trailingPanes: trailingPanes }, `${canvasField.name}:${documentDraft.canvasNonce}:${perspectiveKey(perspective)}`) })) : activeTab === REFERENCES_TAB ? (_jsx("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsx(ReferencesPanel, { projectId: projectId, source: { type: 'document', id: documentKey(ref) }, target: { type: 'document', id: documentKey(ref) } }) }) }) })) : (_jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsxs(Stack, { gap: "6", children: [groups.map((group) => {
                                                 // EC-273/EC-240/EC-306: drop a fieldset whose every field is hidden —
                                                 // by its own rule, by its (static or predicate) group section, or for
                                                 // this principal — so the form never shows an empty section header.