pict-section-form 1.1.1 → 1.1.3

package/docs/_version.json

@@ -1,7 +1,7 @@
 {
 	"Name": "pict-section-form",
-	"Version": "1.1.0",
+	"Version": "1.1.3",
 	"Description": "Pict dynamic form sections",
-	"GeneratedAt": "2026-06-04T23:53:18.220Z",
-	"GitCommit": "33b6ef4"
+	"GeneratedAt": "2026-06-05T01:12:47.687Z",
+	"GitCommit": "654f210"
 }

package/docs/examples/change_tracking/change_tracking.js

@@ -4342,7 +4342,7 @@ if(tmpIsRootRenderable&&pRenderable&&pRenderable.TransactionHash){this.pict.Tran
 	 * Lifecycle hook that triggers after data is marshaled into the view (async flow).
 	 *
 	 * @param {ErrorCallback} fCallback - The callback to call when the async operation is complete.
-	 */onAfterMarshalToViewAsync(fCallback){this.onAfterMarshalToView();return fCallback();}/** @return {boolean} - True if the object is a PictView. */get isPictView(){return true;}}module.exports=PictView;},{"../package.json":38,"fable-serviceproviderbase":4}],40:[function(require,module,exports){module.exports={"name":"pict-section-form","version":"1.1.0","description":"Pict dynamic form sections","main":"source/Pict-Section-Form.js","directories":{"test":"test"},"repository":{"type":"git","url":"git+https://github.com/fable-retold/pict-section-form.git"},"bugs":{"url":"https://github.com/fable-retold/pict-section-form/issues"},"homepage":"https://github.com/fable-retold/pict-section-form#readme","scripts":{"start":"node source/Pict-Section-Form.js","tests":"npx quack test -g","coverage":"npx quack coverage","build":"npx quack build","test":"npx quack test","lint":"eslint source/**","types":"tsc -p .","docker-dev-build":"docker build ./ -f Dockerfile_LUXURYCode -t pict-section-form-image:local","docker-dev-run":"docker run -it -d --name pict-section-form-dev -p 48888:8080 -p 49999:9999 -v \"$PWD/.config:/home/coder/.config\"  -v \"$PWD:/home/coder/pict-section-form\" -u \"$(id -u):$(id -g)\" -e \"DOCKER_USER=$USER\" pict-section-form-image:local","docker-dev-shell":"docker exec -it pict-section-form-dev /bin/bash"},"types":"types/source/Pict-Section-Form.d.ts","author":"steven velozo <steven@velozo.com>","license":"MIT","devDependencies":{"@eslint/js":"^9.39.2","browser-env":"^3.3.0","eslint":"^9.39.2","jquery":"^4.0.0","pict":"^1.0.372","pict-application":"^1.0.34","pict-docuserve":"^1.4.4","pict-section-excalidraw":"^1.0.2","pict-section-markdowneditor":"^1.0.17","pict-service-commandlineutility":"^1.0.19","quackage":"^1.3.0","tui-grid":"^4.21.22","typescript":"^5.9.3"},"dependencies":{"chart.js":"^4.5.1","fable-serviceproviderbase":"^3.0.19","marked":"^4.3.0","pict-provider":"^1.0.13","pict-section-tuigrid":"^1.0.31","pict-template":"^1.0.15","pict-view":"^1.0.68"},"peerDependencies":{"pict-section-excalidraw":"^1.0.0","pict-section-markdowneditor":"^1.0.0"},"peerDependenciesMeta":{"pict-section-markdowneditor":{"optional":true},"pict-section-excalidraw":{"optional":true}},"mocha":{"diff":true,"extension":["js"],"package":"./package.json","reporter":"spec","slow":"75","timeout":"5000","ui":"tdd","watch-files":["source/**/*.js","test/**/*.js"],"watch-ignore":["lib/vendor"]}};},{}],41:[function(require,module,exports){// The container for all the Pict-Section-Form related code.
+	 */onAfterMarshalToViewAsync(fCallback){this.onAfterMarshalToView();return fCallback();}/** @return {boolean} - True if the object is a PictView. */get isPictView(){return true;}}module.exports=PictView;},{"../package.json":38,"fable-serviceproviderbase":4}],40:[function(require,module,exports){module.exports={"name":"pict-section-form","version":"1.1.3","description":"Pict dynamic form sections","main":"source/Pict-Section-Form.js","directories":{"test":"test"},"repository":{"type":"git","url":"git+https://github.com/fable-retold/pict-section-form.git"},"bugs":{"url":"https://github.com/fable-retold/pict-section-form/issues"},"homepage":"https://github.com/fable-retold/pict-section-form#readme","scripts":{"start":"node source/Pict-Section-Form.js","tests":"npx quack test -g","coverage":"npx quack coverage","build":"npx quack build","test":"npx quack test","lint":"eslint source/**","types":"tsc -p .","docker-dev-build":"docker build ./ -f Dockerfile_LUXURYCode -t pict-section-form-image:local","docker-dev-run":"docker run -it -d --name pict-section-form-dev -p 48888:8080 -p 49999:9999 -v \"$PWD/.config:/home/coder/.config\"  -v \"$PWD:/home/coder/pict-section-form\" -u \"$(id -u):$(id -g)\" -e \"DOCKER_USER=$USER\" pict-section-form-image:local","docker-dev-shell":"docker exec -it pict-section-form-dev /bin/bash"},"types":"types/source/Pict-Section-Form.d.ts","author":"steven velozo <steven@velozo.com>","license":"MIT","devDependencies":{"@eslint/js":"^9.39.2","browser-env":"^3.3.0","eslint":"^9.39.2","jquery":"^4.0.0","pict":"^1.0.372","pict-application":"^1.0.34","pict-docuserve":"^1.4.4","pict-service-commandlineutility":"^1.0.19","quackage":"^1.3.0","tui-grid":"^4.21.22","typescript":"^5.9.3"},"dependencies":{"chart.js":"^4.5.1","fable-serviceproviderbase":"^3.0.19","marked":"^4.3.0","pict-provider":"^1.0.13","pict-section-excalidraw":"^1.0.2","pict-section-markdowneditor":"^1.0.17","pict-section-tuigrid":"^1.0.31","pict-template":"^1.0.15","pict-view":"^1.0.68"},"mocha":{"diff":true,"extension":["js"],"package":"./package.json","reporter":"spec","slow":"75","timeout":"5000","ui":"tdd","watch-files":["source/**/*.js","test/**/*.js"],"watch-ignore":["lib/vendor"]}};},{}],41:[function(require,module,exports){// The container for all the Pict-Section-Form related code.
 // The main dynamic view class
 module.exports=require('./views/Pict-View-DynamicForm.js');//module.exports.default_configuration = require('./views/Pict-View-DynamicForm-DefaultConfiguration.json');
 // The dynamic application dependencies
@@ -6962,9 +6962,25 @@ let tmpInputSelectValue;try{tmpInputSelectValue=this.pict.ContentAssignment.read
 {
 	padding: 0;
 	min-height: 420px;
+	display: flex;
+}
+
+/* The Excalidraw view brings its own chrome inside the slot. Force the wrap
+ * and the Excalidraw root to fill so the canvas doesn't collapse to 0
+ * height inside the form slot. */
+.pict-section-form-diagram-edit > .pict-excalidraw-wrap,
+.pict-section-form-diagram-edit > .pict-excalidraw-wrap > .pict-excalidraw-mount
+{
+	flex: 1 1 auto;
+	min-height: 420px;
 }
 
-/* The Excalidraw view brings its own chrome inside the slot. */
+.pict-section-form-diagram-edit .excalidraw
+{
+	width: 100%;
+	height: 100%;
+	min-height: 420px;
+}
 
 .pict-section-form-diagram-toggle
 {
@@ -7028,10 +7044,7 @@ let tmpInputSelectValue;try{tmpInputSelectValue=this.pict.ContentAssignment.read
  *   provider.getMode(inputHash)
  *   provider.toggleMode(inputHash)
  *   provider.commit(inputHash, fCallback)
- */const libPictSectionInputExtension=require('../Pict-Provider-InputExtension.js');// Heavy excalidraw dep — lazy-required on the first setMode('edit') so hosts
-// that never edit (read-mostly forms with inline SVGs) don't pull the
-// Excalidraw vendor bundle at module load.
-let _ExcalidrawClass=null;function _resolveExcalidraw(){if(_ExcalidrawClass)return _ExcalidrawClass;try{_ExcalidrawClass=require('pict-section-excalidraw');}catch(pErr){throw new Error('[Pict-Input-Diagram] Cannot mount edit mode — '+'pict-section-excalidraw is not installed. '+'Add it to your app\'s dependencies (it\'s an optional peer of pict-section-form).');}return _ExcalidrawClass;}// Form templates live in pict-section-form's default-template set, so no
+ */const libPictSectionInputExtension=require('../Pict-Provider-InputExtension.js');const libPictSectionExcalidraw=require('pict-section-excalidraw');// Form templates live in pict-section-form's default-template set, so no
 // runtime template injection is needed here. CSS still needs registering.
 const libCSS=require('./Pict-Provider-Input-Diagram-CSS.js');const libThemeify=require('./util/Themeify-SVG.js');const _DefaultProviderConfiguration={ProviderIdentifier:'Pict-Input-Diagram',AutoInitialize:true,AutoInitializeOrdinal:0,AutoSolveWithApp:false};class PictInputDiagram extends libPictSectionInputExtension{constructor(pFable,pOptions,pServiceHash){let tmpOptions=Object.assign({},JSON.parse(JSON.stringify(_DefaultProviderConfiguration)),pOptions);super(pFable,tmpOptions,pServiceHash);/** @type {import('pict')} */this.pict;/** @type {any}            */this.log;// inputHash → { mode, slotID, lastValue (SVG string), viewInstance?, viewHash?, input }
 this._instances={};// Register the scoped CSS.
@@ -7060,8 +7073,7 @@ this._assignSlotContent(tmpSlotID,'');this._extractSceneFromSvg(tmpValue,(pExtra
 // editor's _resolveInitialData picks it up.
 if(pScene&&this.pict.AppData._PictInputDiagram&&this.pict.AppData._PictInputDiagram[pInput.Hash]){this.pict.AppData._PictInputDiagram[pInput.Hash].Scene={elements:pScene.elements||[],appState:pScene.appState||{},files:pScene.files||{}};}// OnChange handler — debounced inside the editor view itself; we
 // just trigger an SVG export and stamp into the form-data input.
-tmpEditorOpts.OnChange=(pEditorView,pSceneSnap)=>{try{let tmpExportPromise=pEditorView.exportSvg({exportEmbedScene:true,exportBackground:false});Promise.resolve(tmpExportPromise).then(pSvgEl=>{let tmpSvgStr=pSvgEl&&typeof pSvgEl.outerHTML==='string'?pSvgEl.outerHTML:typeof pSvgEl==='string'?pSvgEl:null;if(!tmpSvgStr)return;if(tmpThemeColors){tmpSvgStr=libThemeify.themeifySVG(tmpSvgStr);}tmpProvider._writeHiddenInputValue(tmpRawHTMLID,tmpSvgStr);let tmpLatest=tmpProvider._instances[pInput.Hash];if(tmpLatest)tmpLatest.lastValue=tmpSvgStr;},pExpErr=>{if(tmpProvider.log){tmpProvider.log.warn('[Pict-Input-Diagram] exportSvg failed in OnChange',{error:pExpErr.message,inputHash:pInput.Hash});}});}catch(pErr){if(tmpProvider.log){tmpProvider.log.warn('[Pict-Input-Diagram] OnChange handler threw',{error:pErr.message,inputHash:pInput.Hash});}}};// Lazy-resolve the excalidraw view base. Throws helpfully if absent.
-let libPictSectionExcalidraw;try{libPictSectionExcalidraw=_resolveExcalidraw();}catch(pLoadErr){if(this.log)this.log.error('[Pict-Input-Diagram] '+pLoadErr.message);if(typeof fCallback==='function')fCallback(pLoadErr);return;}this.pict.addView(tmpViewHash,tmpEditorOpts,libPictSectionExcalidraw);let tmpEditorView=this.pict.views[tmpViewHash];if(!tmpEditorView){let tmpErr=new Error('Failed to instantiate Diagram editor view '+tmpViewHash);if(this.log)this.log.error('[Pict-Input-Diagram] addView returned nothing',{viewHash:tmpViewHash});if(typeof fCallback==='function')fCallback(tmpErr);return;}this._setSlotModeClass(pInput,'edit');tmpInst.mode='edit';tmpInst.slotID=tmpSlotID;tmpInst.lastValue=tmpValue;tmpInst.viewInstance=tmpEditorView;tmpInst.viewHash=tmpViewHash;tmpInst.themeColors=tmpThemeColors;this._instances[pInput.Hash]=tmpInst;try{let tmpResult=tmpEditorView.render();if(tmpResult&&typeof tmpResult.then==='function'){tmpResult.then(()=>{if(typeof fCallback==='function')fCallback(null);},pRenderErr=>{if(typeof fCallback==='function')fCallback(pRenderErr);});}else{if(typeof fCallback==='function')fCallback(null);}}catch(pErr){if(this.log)this.log.error('[Pict-Input-Diagram] editor.render threw',{error:pErr.message});if(typeof fCallback==='function')fCallback(pErr);}});}_destroyEdit(pInput){let tmpInst=this._instances[pInput.Hash];if(!tmpInst||!tmpInst.viewInstance)return;let tmpView=tmpInst.viewInstance;try{if(typeof tmpView.destroy==='function')tmpView.destroy();}catch(pErr){if(this.log)this.log.warn('[Pict-Input-Diagram] editor.destroy threw',{error:pErr.message});}if(this.pict.AppData._PictInputDiagram&&this.pict.AppData._PictInputDiagram[pInput.Hash]){delete this.pict.AppData._PictInputDiagram[pInput.Hash];}if(tmpInst.viewHash&&this.pict.views&&this.pict.views[tmpInst.viewHash]){try{delete this.pict.views[tmpInst.viewHash];}catch(pErr){/* not all envs allow delete */}}tmpInst.viewInstance=null;tmpInst.viewHash=null;}// ----------------------------------------------------------------------------
+tmpEditorOpts.OnChange=(pEditorView,pSceneSnap)=>{try{let tmpExportPromise=pEditorView.exportSvg({exportEmbedScene:true,exportBackground:false});Promise.resolve(tmpExportPromise).then(pSvgEl=>{let tmpSvgStr=pSvgEl&&typeof pSvgEl.outerHTML==='string'?pSvgEl.outerHTML:typeof pSvgEl==='string'?pSvgEl:null;if(!tmpSvgStr)return;if(tmpThemeColors){tmpSvgStr=libThemeify.themeifySVG(tmpSvgStr);}tmpProvider._writeHiddenInputValue(tmpRawHTMLID,tmpSvgStr);let tmpLatest=tmpProvider._instances[pInput.Hash];if(tmpLatest)tmpLatest.lastValue=tmpSvgStr;},pExpErr=>{if(tmpProvider.log){tmpProvider.log.warn('[Pict-Input-Diagram] exportSvg failed in OnChange',{error:pExpErr.message,inputHash:pInput.Hash});}});}catch(pErr){if(tmpProvider.log){tmpProvider.log.warn('[Pict-Input-Diagram] OnChange handler threw',{error:pErr.message,inputHash:pInput.Hash});}}};this.pict.addView(tmpViewHash,tmpEditorOpts,libPictSectionExcalidraw);let tmpEditorView=this.pict.views[tmpViewHash];if(!tmpEditorView){let tmpErr=new Error('Failed to instantiate Diagram editor view '+tmpViewHash);if(this.log)this.log.error('[Pict-Input-Diagram] addView returned nothing',{viewHash:tmpViewHash});if(typeof fCallback==='function')fCallback(tmpErr);return;}this._setSlotModeClass(pInput,'edit');tmpInst.mode='edit';tmpInst.slotID=tmpSlotID;tmpInst.lastValue=tmpValue;tmpInst.viewInstance=tmpEditorView;tmpInst.viewHash=tmpViewHash;tmpInst.themeColors=tmpThemeColors;this._instances[pInput.Hash]=tmpInst;try{let tmpResult=tmpEditorView.render();if(tmpResult&&typeof tmpResult.then==='function'){tmpResult.then(()=>{if(typeof fCallback==='function')fCallback(null);},pRenderErr=>{if(typeof fCallback==='function')fCallback(pRenderErr);});}else{if(typeof fCallback==='function')fCallback(null);}}catch(pErr){if(this.log)this.log.error('[Pict-Input-Diagram] editor.render threw',{error:pErr.message});if(typeof fCallback==='function')fCallback(pErr);}});}_destroyEdit(pInput){let tmpInst=this._instances[pInput.Hash];if(!tmpInst||!tmpInst.viewInstance)return;let tmpView=tmpInst.viewInstance;try{if(typeof tmpView.destroy==='function')tmpView.destroy();}catch(pErr){if(this.log)this.log.warn('[Pict-Input-Diagram] editor.destroy threw',{error:pErr.message});}if(this.pict.AppData._PictInputDiagram&&this.pict.AppData._PictInputDiagram[pInput.Hash]){delete this.pict.AppData._PictInputDiagram[pInput.Hash];}if(tmpInst.viewHash&&this.pict.views&&this.pict.views[tmpInst.viewHash]){try{delete this.pict.views[tmpInst.viewHash];}catch(pErr){/* not all envs allow delete */}}tmpInst.viewInstance=null;tmpInst.viewHash=null;}// ----------------------------------------------------------------------------
 // Public runtime API
 // ----------------------------------------------------------------------------
 getMode(pInputHash){let tmpInst=this._instances[pInputHash];return tmpInst?tmpInst.mode:null;}setMode(pInputHash,pMode,fCallback){let tmpInst=this._instances[pInputHash];if(!tmpInst){let tmpErr=new Error('Cannot setMode — input is not mounted: '+pInputHash);if(typeof fCallback==='function')fCallback(tmpErr);return;}if(pMode!=='edit'&&pMode!=='view'){let tmpErr=new Error('setMode: unknown mode "'+pMode+'" (use "edit" or "view")');if(typeof fCallback==='function')fCallback(tmpErr);return;}if(tmpInst.mode===pMode){if(typeof fCallback==='function')fCallback(null);return;}if(pMode==='edit'){this._mountEdit(null,tmpInst.input,tmpInst.lastValue,fCallback);return;}this._destroyEdit(tmpInst.input);this._mountView(null,tmpInst.input,tmpInst.lastValue);if(typeof fCallback==='function')fCallback(null);}toggleMode(pInputHash,fCallback){let tmpMode=this.getMode(pInputHash);let tmpNext=tmpMode==='edit'?'view':'edit';this.setMode(pInputHash,tmpNext,fCallback);}commit(pInputHash,fCallback){let tmpInst=this._instances[pInputHash];if(!tmpInst||tmpInst.mode!=='edit'||!tmpInst.viewInstance){if(typeof fCallback==='function')fCallback(null);return;}// Force a synchronous export so the form value reflects the latest
@@ -7555,10 +7567,7 @@ return super.onInputInitialize(pView,pGroup,pRow,pInput,pValue,pHTMLSelector,pTr
  *   provider.getMode(inputHash)            // 'edit' | 'view' | null (not mounted)
  *   provider.toggleMode(inputHash)         // convenience for buttons
  *   provider.commit(inputHash, fCallback)  // force-save edit-mode editor → form
- */const libPictSectionInputExtension=require('../Pict-Provider-InputExtension.js');const libMarked=require('marked');// Heavy markdown-editor dep — lazy-required on the first setMode('edit') so
-// hosts that never edit (read-mostly forms) don't pull CodeMirror at module
-// load.
-let _MarkdownEditorClass=null;function _resolveMarkdownEditor(){if(_MarkdownEditorClass)return _MarkdownEditorClass;try{_MarkdownEditorClass=require('pict-section-markdowneditor');}catch(pErr){throw new Error('[Pict-Input-RichText] Cannot mount edit mode — '+'pict-section-markdowneditor is not installed. '+'Add it to your app\'s dependencies (it\'s an optional peer of pict-section-form).');}return _MarkdownEditorClass;}// Form templates live in pict-section-form's default-template set, so no
+ */const libPictSectionInputExtension=require('../Pict-Provider-InputExtension.js');const libMarked=require('marked');const libMarkdownEditor=require('pict-section-markdowneditor');// Form templates live in pict-section-form's default-template set, so no
 // runtime template injection is needed here. CSS still needs registering
 // — the scoped slot styling lives next to the provider.
 const libCSS=require('./Pict-Provider-Input-RichText-CSS.js');const _DefaultProviderConfiguration={ProviderIdentifier:'Pict-Input-RichText',AutoInitialize:true,AutoInitializeOrdinal:0,AutoSolveWithApp:false};class PictInputRichText extends libPictSectionInputExtension{constructor(pFable,pOptions,pServiceHash){let tmpOptions=Object.assign({},JSON.parse(JSON.stringify(_DefaultProviderConfiguration)),pOptions);super(pFable,tmpOptions,pServiceHash);/** @type {import('pict')} */this.pict;/** @type {any}            */this.log;// inputHash → { mode: 'view'|'edit', slotID, lastValue, viewInstance?: Pict-Section-MarkdownEditor, input }
@@ -7594,9 +7603,7 @@ this._assignSlotContent(tmpSlotID,'');let tmpEditorOpts=this._buildEditorOptions
 // hidden input. Subclassing is how pict-section-markdowneditor itself
 // is meant to be extended (its constructor accepts options + the parent
 // view class is libPictViewClass).
-let tmpProvider=this;// Lazy-resolve the markdown editor base class. Throws helpfully if the
-// peer dep is missing.
-let libMarkdownEditor;try{libMarkdownEditor=_resolveMarkdownEditor();}catch(pErr){if(this.log)this.log.error('[Pict-Input-RichText] '+pErr.message);if(typeof fCallback==='function')fCallback(pErr);return;}class RichTextFormEditor extends libMarkdownEditor{constructor(pSubFable,pSubOptions,pSubServiceHash){super(pSubFable,pSubOptions,pSubServiceHash);}onContentChange(pSegmentIndex,pContent){try{// Single-segment editor — every change replaces the value.
+let tmpProvider=this;class RichTextFormEditor extends libMarkdownEditor{constructor(pSubFable,pSubOptions,pSubServiceHash){super(pSubFable,pSubOptions,pSubServiceHash);}onContentChange(pSegmentIndex,pContent){try{// Single-segment editor — every change replaces the value.
 tmpProvider._writeHiddenInputValue(tmpRawHTMLID,pContent);let tmpLatest=tmpProvider._instances[pInput.Hash];if(tmpLatest)tmpLatest.lastValue=pContent;}catch(pErr){if(tmpProvider.log){tmpProvider.log.warn('[Pict-Input-RichText] onContentChange handler failed',{error:pErr.message,inputHash:pInput.Hash});}}if(super.onContentChange)super.onContentChange(pSegmentIndex,pContent);}onImageUpload(pFile,pSegmentIndex,fImgCallback){if(!tmpRichTextOpts.AllowImages){if(tmpProvider.log){tmpProvider.log.info('[Pict-Input-RichText] image upload rejected (AllowImages=false)',{inputHash:pInput.Hash,fileName:pFile&&pFile.name});}// Returning false lets the base markdown editor fall through to
 // its default base64 inline; we *don't* want that when text-only,
 // so we eat the file by calling back with an error.