pict-section-prompteditor 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pict-section-prompteditor",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Prompt crafting and management section for Pict: typed prompts with segments (context, request, success criteria), curated word list matrices with weights, a {~WordListEntry:Name~} template expression for weighted-random generation, batch generation with zip download, and a pluggable data provider that defaults to in-memory AppData.",
   "main": "source/Pict-Section-PromptEditor.js",
   "files": [

package/source/views/PictView-PromptEditor.js

@@ -216,6 +216,16 @@ const _DefaultConfiguration =
 		.pspe-viewer-tools { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 0 2px; }
 
 		.pspe-rich-host { min-height: 320px; }
+
+		/* Read mode: a header strip (type + browse actions) above the assembled
+		   prompt rendered as one markdown document. */
+		.pspe-reader-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
+		.pspe-reader-type { font-size: 12.5px; color: var(--theme-color-text-muted, #97a1ab); margin-right: auto;
+			font-family: var(--theme-typography-family-display, inherit);
+			text-transform: var(--theme-typography-display-transform, none);
+			letter-spacing: var(--theme-typography-display-tracking, normal); }
+		.pspe-reader-body { padding: 4px 18px; }
+		.pspe-reader-body h1:first-child, .pspe-reader-body h2:first-child { margin-top: 8px; }
 	`,
 
 	Templates:
@@ -248,6 +258,7 @@ const _DefaultConfiguration =
 		{~TS:PromptEditor-EmptyNote:Record.EmptySlot~}
 	</div>
 	<div class="pspe-main">
+		{~TS:PromptEditor-PromptReader:Record.ReaderSlot~}
 		{~TS:PromptEditor-PromptEditorPanel:Record.EditorSlot~}
 		{~TS:PromptEditor-EmptyNote:Record.NoSelectionSlot~}
 	</div>
@@ -263,6 +274,21 @@ const _DefaultConfiguration =
 	<span class="pspe-rail-item-sub">{~D:Record.TypeName~}</span>
 </button>`
 		},
+		{
+			Hash: 'PromptEditor-PromptReader',
+			Template: /*html*/`
+<div class="pspe-reader">
+	<div class="pspe-reader-head">
+		<span class="pspe-reader-type">{~D:Record.TypeName~}</span>
+		{~TS:PromptEditor-ReaderActions:Record.ActionsSlot~}
+	</div>
+	<div class="pspe-viewer pspe-md pspe-reader-body">{~D:Record.MarkdownHtml~}</div>
+</div>`
+		},
+		{
+			Hash: 'PromptEditor-ReaderActions',
+			Template: /*html*/`<button class="pspe-btn pspe-btn-sm" title="Duplicate this prompt" onclick="_Pict.views['{~D:Record.ViewHash~}'].duplicatePrompt()">Duplicate</button><button class="pspe-btn pspe-btn-sm pspe-btn-primary" onclick="_Pict.views['{~D:Record.ViewHash~}'].editActivePrompt()">Edit</button>`
+		},
 		{
 			Hash: 'PromptEditor-PromptEditorPanel',
 			Template: /*html*/`
@@ -273,6 +299,7 @@ const _DefaultConfiguration =
 	<select class="pspe-select" onchange="_Pict.views['{~D:Record.ViewHash~}'].setPromptType(this.value)">
 		{~TS:PromptEditor-TypeOption:Record.TypeOptions~}
 	</select>
+	{~TS:PromptEditor-ReadToggle:Record.ReadToggleSlot~}
 	{~TS:PromptEditor-PromptActions:Record.ActionsSlot~}
 </div>
 <div class="pspe-type-desc">{~D:Record.TypeDescription~}</div>
@@ -301,6 +328,10 @@ const _DefaultConfiguration =
 		{ Hash: 'PromptEditor-PreviewRendered', Template: /*html*/`<div class="pspe-viewer pspe-md">{~D:Record.MarkdownHtml~}</div>` },
 		{ Hash: 'PromptEditor-PreviewRaw', Template: /*html*/`<pre class="pspe-viewer pspe-preview-raw">{~D:Record.MarkdownEscaped~}</pre>` },
 		{ Hash: 'PromptEditor-TypeOption', Template: /*html*/`<option value="{~D:Record.Value~}" {~D:Record.SelectedAttr~}>{~D:Record.Label~}</option>` },
+		{
+			Hash: 'PromptEditor-ReadToggle',
+			Template: /*html*/`<button class="pspe-btn pspe-btn-sm" title="Back to reading view" onclick="_Pict.views['{~D:Record.ViewHash~}'].readActivePrompt()">Done</button>`
+		},
 		{
 			Hash: 'PromptEditor-PromptActions',
 			Template: /*html*/`<button class="pspe-btn pspe-btn-sm" title="Duplicate this prompt" onclick="_Pict.views['{~D:Record.ViewHash~}'].duplicatePrompt()">Duplicate</button><button class="pspe-btn pspe-btn-sm pspe-btn-danger" onclick="_Pict.views['{~D:Record.ViewHash~}'].deletePrompt()">Delete</button>`
@@ -496,7 +527,11 @@ class PictViewPromptEditor extends libPictView
 			GenerateCount: this.options.GenerateDefaultCount,
 			PreviewSegments: {},
 			Preview: null,
-			PreviewMode: 'rendered'
+			PreviewMode: 'rendered',
+			// Browsing a prompt shows it read-only (the assembled markdown, no
+			// segment boxes); 'edit' swaps in the segment editor. Selecting a
+			// prompt lands on 'read'; creating/duplicating/previewing enters 'edit'.
+			PromptMode: 'read'
 		};
 		this._state = {};
 		this._richEditorViewHash = null;
@@ -568,7 +603,7 @@ class PictViewPromptEditor extends libPictView
 	{
 		let tmpPickerProvider = this.pict.providers['Pict-Section-Picker'];
 		if (!tmpPickerProvider || typeof document === 'undefined') { return; }
-		if (this._ui.Tab !== 'prompts' || this.options.ReadOnly) { return; }
+		if (this._ui.Tab !== 'prompts' || this.options.ReadOnly || this._ui.PromptMode === 'read') { return; }
 		let tmpPrompt = this._activePrompt();
 		if (!tmpPrompt) { return; }
 		if (!this.pict.AppData.PromptEditorInsertPick) { this.pict.AppData.PromptEditorInsertPick = {}; }
@@ -866,6 +901,12 @@ class PictViewPromptEditor extends libPictView
 		this._state = tmpState;
 	}
 
+	// A prompt is browsed read-only (the assembled markdown) unless the caller
+	// flipped it into 'edit'. A globally ReadOnly section keeps its own preview
+	// path (the pReadOnly branch of _shapePromptEditor), so this only governs the
+	// editable library's browse-vs-edit swap.
+	_isPromptReadMode() { return !this.options.ReadOnly && this._ui.PromptMode !== 'edit'; }
+
 	_shapePromptsPane(pReadOnly)
 	{
 		let tmpActive = this._activePrompt();
@@ -882,14 +923,36 @@ class PictViewPromptEditor extends libPictView
 				OnClass: (tmpActive && tmpActive.Key === pPrompt.Key) ? 'pspe-rail-item-on' : ''
 			})),
 			EmptySlot: this._loaded.Prompts.length ? [] : [{ Text: 'No prompts yet.' }],
+			ReaderSlot: [],
 			EditorSlot: [],
 			NoSelectionSlot: []
 		};
-		if (tmpActive) { tmpPane.EditorSlot = [this._shapePromptEditor(tmpActive, pReadOnly)]; }
+		if (tmpActive && this._isPromptReadMode()) { tmpPane.ReaderSlot = [this._shapePromptReader(tmpActive)]; }
+		else if (tmpActive) { tmpPane.EditorSlot = [this._shapePromptEditor(tmpActive, pReadOnly)]; }
 		else { tmpPane.NoSelectionSlot = [{ Text: pReadOnly ? 'Nothing to show.' : 'Create a prompt to start crafting.' }]; }
 		return tmpPane;
 	}
 
+	// The read model: the whole prompt compiled to one markdown document (the
+	// same source the compiler versions and generation rolls), rendered as
+	// content with a compact header carrying the type and browse actions.
+	_shapePromptReader(pPrompt)
+	{
+		let tmpType = libTypes.getPromptType(this._types, pPrompt.TypeKey);
+		let tmpSource = libCompiler.assembleSource(pPrompt, tmpType,
+			{
+				IncludeTitleHeading: this.options.IncludeTitleHeading,
+				SegmentHeadingLevel: this.options.SegmentHeadingLevel
+			});
+		return (
+		{
+			ViewHash: this.Hash,
+			TypeName: tmpType.Name,
+			ActionsSlot: this.options.ReadOnly ? [] : [{ ViewHash: this.Hash }],
+			MarkdownHtml: this._renderMarkdown(tmpSource)
+		});
+	}
+
 	_shapePromptEditor(pPrompt, pReadOnly)
 	{
 		let tmpType = libTypes.getPromptType(this._types, pPrompt.TypeKey);
@@ -953,6 +1016,7 @@ class PictViewPromptEditor extends libPictView
 				Label: pTypeOption.Name,
 				SelectedAttr: (pTypeOption.Key === pPrompt.TypeKey) ? 'selected' : ''
 			})),
+			ReadToggleSlot: pReadOnly ? [] : [{ ViewHash: this.Hash }],
 			ActionsSlot: pReadOnly ? [] : [{ ViewHash: this.Hash }],
 			OptionsSlot: pReadOnly ? [] :
 			[{
@@ -1069,6 +1133,24 @@ class PictViewPromptEditor extends libPictView
 	{
 		if (this._ui.ActivePromptKey !== pKey) { this._ui.Preview = null; }
 		this._ui.ActivePromptKey = pKey;
+		// Picking a prompt in the rail is browsing: land on the read view.
+		this._ui.PromptMode = 'read';
+		this._reshape();
+	}
+
+	// The reader's Edit button; swap the segment editor in for the active prompt.
+	editActivePrompt()
+	{
+		if (this.options.ReadOnly) { return; }
+		this._ui.PromptMode = 'edit';
+		this._reshape();
+	}
+
+	// The editor's Done button; back to the read view, dropping any preview roll.
+	readActivePrompt()
+	{
+		this._ui.PromptMode = 'read';
+		this._ui.Preview = null;
 		this._reshape();
 	}
 	selectWordList(pKey) { this._ui.ActiveWordListKey = pKey; this._reshape(); }
@@ -1082,6 +1164,8 @@ class PictViewPromptEditor extends libPictView
 			.then((pPrompt) =>
 			{
 				this._ui.ActivePromptKey = pPrompt.Key;
+				// A fresh prompt opens ready to write in, not in the read view.
+				this._ui.PromptMode = 'edit';
 				this._fire('onPromptSaved', pPrompt);
 				return this.load();
 			})
@@ -1134,6 +1218,8 @@ class PictViewPromptEditor extends libPictView
 			.then((pCopy) =>
 			{
 				this._ui.ActivePromptKey = pCopy.Key;
+				// A copy is made to be changed; open it in the editor.
+				this._ui.PromptMode = 'edit';
 				this._fire('onPromptSaved', pCopy);
 				return this.load();
 			})
@@ -1353,6 +1439,8 @@ class PictViewPromptEditor extends libPictView
 		let tmpPrompt = this._activePrompt();
 		if (!tmpPrompt) { return; }
 		let tmpType = libTypes.getPromptType(this._types, tmpPrompt.TypeKey);
+		// The preview roll lives under the segment editor; rolling implies editing.
+		this._ui.PromptMode = 'edit';
 		this._ui.Preview = { PromptKey: tmpPrompt.Key, Markdown: this._generateOnce(tmpPrompt, tmpType) };
 		this._reshape();
 	}