pict-docuserve 0.1.7 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/pict-docuserve.js
CHANGED
|
@@ -1483,7 +1483,20 @@ let tmpEditorElement=this._editorElement;this.codeJar=this._codeJarPrototype(tmp
|
|
|
1483
1483
|
this._resetEditorWrapStyles();// Set the initial code
|
|
1484
1484
|
if(tmpCode){this.codeJar.updateCode(tmpCode);}// Wire up the change handler
|
|
1485
1485
|
this.codeJar.onUpdate(pCode=>{this._updateLineNumbers();this.onCodeChange(pCode);});// Initial line number render
|
|
1486
|
-
this._updateLineNumbers();//
|
|
1486
|
+
this._updateLineNumbers();// Sync line-numbers vertical position with the editor's scroll.
|
|
1487
|
+
//
|
|
1488
|
+
// The editor element scrolls internally (CodeJar uses
|
|
1489
|
+
// contenteditable + overflow:auto for long content), but the
|
|
1490
|
+
// line-numbers div is a sibling with overflow:visible — without
|
|
1491
|
+
// this sync the line-numbers content stays glued at the top of
|
|
1492
|
+
// the wrap while the editor scrolls underneath it, so "line 1"
|
|
1493
|
+
// appears next to whatever line is actually showing.
|
|
1494
|
+
//
|
|
1495
|
+
// Using `transform: translateY(...)` instead of scrollTop keeps
|
|
1496
|
+
// the sync compositor-only (no reflow per scroll event) and
|
|
1497
|
+
// avoids needing to change the line-numbers element's overflow
|
|
1498
|
+
// from visible. Passive listener so we don't block scrolling.
|
|
1499
|
+
if(this._lineNumbersElement){let tmpLineNumbersEl=this._lineNumbersElement;tmpEditorElement.addEventListener('scroll',function(){tmpLineNumbersEl.style.transform='translateY(-'+tmpEditorElement.scrollTop+'px)';},{passive:true});}// Handle read-only
|
|
1487
1500
|
if(this.options.ReadOnly){tmpEditorElement.setAttribute('contenteditable','false');}}/**
|
|
1488
1501
|
* Build the editor DOM elements inside the target container.
|
|
1489
1502
|
*/_buildEditorDOM(){// Clear the target
|
|
@@ -1543,10 +1556,58 @@ let tmpCode=this.codeJar.toString();this.codeJar.destroy();this.codeJar=this._co
|
|
|
1543
1556
|
* Marshal code content from the data address into the view.
|
|
1544
1557
|
*/marshalToView(){super.marshalToView();if(this.codeJar&&this.options.CodeDataAddress){let tmpCode=this._resolveCodeContent();if(typeof tmpCode==='string'){this.codeJar.updateCode(tmpCode);this._updateLineNumbers();}}}/**
|
|
1545
1558
|
* Marshal the current code content back to the data address.
|
|
1546
|
-
*/marshalFromView(){super.marshalFromView();if(this.codeJar&&this.options.CodeDataAddress){this.onCodeChange(this.codeJar.toString());}}}module.exports=PictSectionCode;module.exports.default_configuration=_DefaultConfiguration;module.exports.createHighlighter=libCreateHighlighter
|
|
1559
|
+
*/marshalFromView(){super.marshalFromView();if(this.codeJar&&this.options.CodeDataAddress){this.onCodeChange(this.codeJar.toString());}}}module.exports=PictSectionCode;module.exports.default_configuration=_DefaultConfiguration;module.exports.createHighlighter=libCreateHighlighter;// Demo bundle for pict-docuserve. Host apps that embed docuserve and
|
|
1560
|
+
// want pict-section-code's demos visible in their docs site call
|
|
1561
|
+
// `require('pict-section-code').registerWithDocuserve(pict)` once at
|
|
1562
|
+
// app boot. Silent no-op when Docuserve-Demos isn't installed.
|
|
1563
|
+
//
|
|
1564
|
+
// The require here is intentionally eager: browserify needs a static
|
|
1565
|
+
// `require()` at module-toplevel to trace and bundle the demos source.
|
|
1566
|
+
// The apparent circular dep (demos/index.js requires THIS module to
|
|
1567
|
+
// reach the PictSectionCode class) is benign — by the time demos/
|
|
1568
|
+
// index.js runs, `module.exports = PictSectionCode` has already
|
|
1569
|
+
// executed, so it sees a usable class. The `.demos` and
|
|
1570
|
+
// `.registerWithDocuserve` attachments below run after the require
|
|
1571
|
+
// returns, so demos/index.js never observes them being undefined.
|
|
1572
|
+
const libCodeDemos=require('./demos');module.exports.demos=libCodeDemos.demos;module.exports.registerWithDocuserve=libCodeDemos.registerWithDocuserve;},{"./Pict-Code-Highlighter.js":8,"./Pict-Section-Code-DefaultConfiguration.js":9,"./demos":11,"pict-view":69}],11:[function(require,module,exports){/**
|
|
1573
|
+
* pict-section-code demos
|
|
1574
|
+
*
|
|
1575
|
+
* Each entry is consumed by pict-docuserve's `Docuserve-Demos` provider.
|
|
1576
|
+
* Hosts that want these demos to appear in their docs site call
|
|
1577
|
+
* `require('pict-section-code/source/demos').registerWithDocuserve(pict)`
|
|
1578
|
+
* once at app boot (typically inside their DocuserveApplication subclass
|
|
1579
|
+
* after `super(...)`).
|
|
1580
|
+
*
|
|
1581
|
+
* Each demo's Mount(pict, container, spec) signature creates a fresh
|
|
1582
|
+
* pict-section-code view instance inside the supplied container. Spec
|
|
1583
|
+
* fields are passed through to the view config so a single demo template
|
|
1584
|
+
* can express "JavaScript with line numbers", "JSON read-only no
|
|
1585
|
+
* gutter", etc. without duplicating the wiring.
|
|
1586
|
+
*/const libPictSectionCode=require('../Pict-Section-Code.js');/**
|
|
1587
|
+
* Internal helper: mount a pict-section-code instance into a host
|
|
1588
|
+
* container according to the demo spec. Each call registers a uniquely
|
|
1589
|
+
* identified view so multiple demos on the same page coexist cleanly.
|
|
1590
|
+
*/function mountCodeEditor(pPict,pContainer,pSpec){// Tag this mount with an id we can target as the destination.
|
|
1591
|
+
let tmpDestId='demo-code-'+(pSpec.Hash||'unnamed')+'-'+Date.now();pContainer.innerHTML='<div id="'+tmpDestId+'"></div>';let tmpConfig={ViewIdentifier:'Demo-Code-'+tmpDestId,DefaultDestinationAddress:'#'+tmpDestId,Templates:[{Hash:'CodeEditor-Container',Template:'<!-- demo code editor renders here -->'}],Renderables:[{RenderableHash:'CodeEditor-Wrap',TemplateHash:'CodeEditor-Container',DestinationAddress:'#'+tmpDestId}],TargetElementAddress:'#'+tmpDestId,Language:pSpec.Language||'javascript',ReadOnly:!!pSpec.ReadOnly,LineNumbers:pSpec.LineNumbers!==false,Tab:pSpec.Tab||'\t',AddClosing:pSpec.AddClosing!==false,CatchTab:pSpec.CatchTab!==false,DefaultCode:pSpec.Code||'// example code\n',// AutoRender is intentionally OFF so we can pre-wire CodeJar
|
|
1592
|
+
// before the first render fires. pict-section-code looks for
|
|
1593
|
+
// window.CodeJar by default; most hosts bundle CodeJar under
|
|
1594
|
+
// window.CodeJarModules.CodeJar (e.g. retold-content-system's
|
|
1595
|
+
// codejar-bundle.js), so we wire it explicitly here.
|
|
1596
|
+
AutoRender:false,RenderOnLoad:false};let tmpView=pPict.addView(tmpConfig.ViewIdentifier,tmpConfig,libPictSectionCode);if(!tmpView){return null;}// Connect the CodeJar prototype + highlight function from the
|
|
1597
|
+
// CodeJarModules global if it's loaded. Falls back to bare CodeJar
|
|
1598
|
+
// if the host published the prototype directly.
|
|
1599
|
+
if(typeof window!=='undefined'){if(window.CodeJarModules&&typeof window.CodeJarModules.CodeJar==='function'){tmpView.connectCodeJarPrototype(window.CodeJarModules.CodeJar);}else if(typeof window.CodeJar==='function'){tmpView.connectCodeJarPrototype(window.CodeJar);}// Wire highlight.js highlighting if the bundle exposes it.
|
|
1600
|
+
if(window.CodeJarModules&&window.CodeJarModules.hljs){let tmpHljs=window.CodeJarModules.hljs;let tmpLanguage=tmpConfig.Language;tmpView._highlightFunction=function(pElement){pElement.removeAttribute('data-highlighted');delete pElement.dataset.highlighted;pElement.className=pElement.className.replace(/\bhljs\b/g,'').replace(/\blanguage-\S+/g,'').trim();pElement.classList.add('language-'+tmpLanguage);try{tmpHljs.highlightElement(pElement);}catch(pErr){/* swallow — highlighting is best-effort */}};}}try{tmpView.render();}catch(pError){/* pict-section-code logs its own errors */}return tmpView;}const _Demos=[{DemoSchemaVersion:1,Hash:'javascript-editor',Group:'pict',Module:'pict-section-code',Name:'JavaScript editor',Description:'Default pict-section-code configuration — line numbers on, highlight.js for JavaScript, two-space tab.',Spec:{Hash:'javascript-editor',Language:'javascript',LineNumbers:true,Tab:' ',Code:'// A small example — try editing me.\n'+'function fibonacci(n) {\n'+' if (n <= 1) return n;\n'+' return fibonacci(n - 1) + fibonacci(n - 2);\n'+'}\n'+'\n'+'for (let i = 0; i < 10; i++) {\n'+' console.log(`fib(${i}) =`, fibonacci(i));\n'+'}\n'},Mount:mountCodeEditor,Sources:[{Name:'spec.json',Language:'json',Content:'{\n'+' "Language": "javascript",\n'+' "LineNumbers": true,\n'+' "Tab": " ",\n'+' "Code": "function fibonacci(n) { … }"\n'+'}'}]},{DemoSchemaVersion:1,Hash:'json-readonly',Group:'pict',Module:'pict-section-code',Name:'JSON viewer (read-only)',Description:'Read-only mode with line numbers off — useful for embedded "show me the payload" surfaces in dashboards.',Spec:{Hash:'json-readonly',Language:'json',ReadOnly:true,LineNumbers:false,Code:'{\n'+' "version": "1.0.7",\n'+' "syntax": {\n'+' "keyword": "#A626A4",\n'+' "string": "#50A14F",\n'+' "number": "#986801",\n'+' "function": "#4078F2"\n'+' },\n'+' "features": ["highlighting", "line-numbers", "readonly", "themed"]\n'+'}\n'},Mount:mountCodeEditor,Sources:[{Name:'spec.json',Language:'json',Content:'{\n'+' "Language": "json",\n'+' "ReadOnly": true,\n'+' "LineNumbers": false\n'+'}'}]},{DemoSchemaVersion:1,Hash:'css-editor',Group:'pict',Module:'pict-section-code',Name:'CSS editor (4-space tab)',Description:'CSS-flavoured highlighting with a 4-space tab and bracket auto-close turned off — leaner editing for stylesheet snippets.',Spec:{Hash:'css-editor',Language:'css',LineNumbers:true,Tab:' ',AddClosing:false,Code:'/* Theme-aware token usage */\n'+'.docuserve-demo-title {\n'+' color: var(--theme-color-text-primary, #3D3229);\n'+' font-size: 1.5em;\n'+' font-weight: 600;\n'+'}\n'+'\n'+'.docuserve-demo-description {\n'+' color: var(--theme-color-text-secondary, #5E5549);\n'+' line-height: 1.55;\n'+'}\n'},Mount:mountCodeEditor,Sources:[{Name:'spec.json',Language:'json',Content:'{\n'+' "Language": "css",\n'+' "LineNumbers": true,\n'+' "Tab": " ",\n'+' "AddClosing": false\n'+'}'}]}];/**
|
|
1601
|
+
* Register every pict-section-code demo with the host docuserve app.
|
|
1602
|
+
*
|
|
1603
|
+
* @param {object} pPict - The Pict instance (typically `this.pict` inside
|
|
1604
|
+
* a DocuserveApplication subclass).
|
|
1605
|
+
* @returns {number} count of demos registered (0 if Docuserve-Demos
|
|
1606
|
+
* provider isn't present — silent no-op).
|
|
1607
|
+
*/function registerWithDocuserve(pPict){if(!pPict||!pPict.providers||!pPict.providers['Docuserve-Demos']){return 0;}return pPict.providers['Docuserve-Demos'].registerAll(_Demos);}module.exports=_Demos;module.exports.demos=_Demos;module.exports.registerWithDocuserve=registerWithDocuserve;},{"../Pict-Section-Code.js":10}],12:[function(require,module,exports){// The container for all the Pict-Section-Content related code.
|
|
1547
1608
|
// The main content view class
|
|
1548
1609
|
module.exports=require('./views/Pict-View-Content.js');// The content provider (markdown parsing, HTML escaping)
|
|
1549
|
-
module.exports.PictContentProvider=require('./providers/Pict-Provider-Content.js');},{"./providers/Pict-Provider-Content.js":
|
|
1610
|
+
module.exports.PictContentProvider=require('./providers/Pict-Provider-Content.js');},{"./providers/Pict-Provider-Content.js":13,"./views/Pict-View-Content.js":14}],13:[function(require,module,exports){const libPictProvider=require('pict-provider');const libCreateHighlighter=require('pict-section-code').createHighlighter;/**
|
|
1550
1611
|
* Content Provider for Pict Section Content
|
|
1551
1612
|
*
|
|
1552
1613
|
* A general-purpose markdown-to-HTML parser with support for:
|
|
@@ -1666,7 +1727,7 @@ let tmpResult=pResolver(tmpLower);if(!tmpResult)return pMatch;tmpLinked[tmpLower
|
|
|
1666
1727
|
*
|
|
1667
1728
|
* @param {string} pText - The text to escape
|
|
1668
1729
|
* @returns {string} The escaped text
|
|
1669
|
-
*/escapeHTML(pText){if(!pText){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');}}module.exports=PictContentProvider;module.exports.default_configuration={ProviderIdentifier:"Pict-Content",AutoInitialize:true,AutoInitializeOrdinal:0};},{"pict-provider":7,"pict-section-code":10}],13:[function(require,module,exports){const libPictView=require('pict-view');const _ViewConfiguration={ViewIdentifier:"Pict-Content",DefaultRenderable:"Pict-Content-Display",DefaultDestinationAddress:"#Pict-Content-Container",AutoRender:false,CSS:/*css*/"\n\t\t.pict-content {\n\t\t\tpadding: 2em 3em;\n\t\t\tmax-width: 900px;\n\t\t\tmargin: 0 auto;\n\t\t}\n\t\t.pict-content-loading {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmin-height: 200px;\n\t\t\tcolor: var(--theme-color-text-muted, #8A7F72);\n\t\t\tfont-size: 1em;\n\t\t}\n\t\t.pict-content h1 {\n\t\t\tfont-size: 2em;\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t\tborder-bottom: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tpadding-bottom: 0.3em;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t.pict-content h2 {\n\t\t\tfont-size: 1.5em;\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t\tborder-bottom: 1px solid var(--theme-color-border-light, #EAE3D8);\n\t\t\tpadding-bottom: 0.25em;\n\t\t\tmargin-top: 1.5em;\n\t\t}\n\t\t.pict-content h3 {\n\t\t\tfont-size: 1.25em;\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t\tmargin-top: 1.25em;\n\t\t}\n\t\t.pict-content h4, .pict-content h5, .pict-content h6 {\n\t\t\tcolor: var(--theme-color-text-secondary, #5E5549);\n\t\t\tmargin-top: 1em;\n\t\t}\n\t\t.pict-content p {\n\t\t\tline-height: 1.7;\n\t\t\tcolor: var(--theme-color-text-primary, #423D37);\n\t\t\tmargin: 0.75em 0;\n\t\t}\n\t\t.pict-content a {\n\t\t\tcolor: var(--theme-color-brand-primary, #2E7D74);\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t.pict-content a:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t.pict-content pre {\n\t\t\tbackground: var(--theme-color-text-primary, #3D3229);\n\t\t\tcolor: var(--theme-color-text-on-brand, #E8E0D4);\n\t\t\tpadding: 1.25em;\n\t\t\tborder-radius: 6px;\n\t\t\toverflow-x: auto;\n\t\t\tline-height: 1.5;\n\t\t\tfont-size: 0.9em;\n\t\t}\n\t\t.pict-content code {\n\t\t\tbackground: var(--theme-color-background-tertiary, #F0ECE4);\n\t\t\tpadding: 0.15em 0.4em;\n\t\t\tborder-radius: 3px;\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: var(--theme-color-brand-accent, #9E6B47);\n\t\t}\n\t\t.pict-content-code-wrap {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tfont-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 1.5;\n\t\t\tborder-radius: 6px;\n\t\t\toverflow: hidden;\n\t\t\tmargin: 1em 0;\n\t\t\tbackground: var(--theme-color-text-primary, #3D3229);\n\t\t}\n\t\t.pict-content-code-wrap .pict-content-code-line-numbers {\n\t\t\twidth: 40px;\n\t\t\tmin-width: 40px;\n\t\t\tpadding: 1.25em 0;\n\t\t\ttext-align: right;\n\t\t\tbackground: var(--theme-color-background-tertiary, #342A22);\n\t\t\tborder-right: 1px solid var(--theme-color-border-default, #4A3F35);\n\t\t\tcolor: var(--theme-color-text-muted, #8A7F72);\n\t\t\tfont-family: inherit;\n\t\t\tfont-size: inherit;\n\t\t\tline-height: inherit;\n\t\t\tuser-select: none;\n\t\t\tpointer-events: none;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.pict-content-code-wrap .pict-content-code-line-numbers span {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0 8px 0 0;\n\t\t}\n\t\t.pict-content-code-wrap pre {\n\t\t\tmargin: 0;\n\t\t\tbackground: var(--theme-color-text-primary, #3D3229);\n\t\t\tcolor: var(--theme-color-text-on-brand, #E8E0D4);\n\t\t\tpadding: 1.25em 1.25em 1.25em 8px;\n\t\t\tborder-radius: 0 6px 6px 0;\n\t\t\toverflow-x: auto;\n\t\t\tline-height: 1.5;\n\t\t\tfont-size: inherit;\n\t\t\tflex: 1;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.pict-content-code-wrap pre code {\n\t\t\tbackground: none;\n\t\t\tpadding: 0;\n\t\t\tcolor: inherit;\n\t\t\tfont-size: inherit;\n\t\t\tfont-family: inherit;\n\t\t}\n\t\t.pict-content-code-wrap .keyword { color: var(--theme-color-brand-primary, #C678DD); }\n\t\t.pict-content-code-wrap .string { color: var(--theme-color-status-success, #98C379); }\n\t\t.pict-content-code-wrap .number { color: var(--theme-color-brand-accent, #D19A66); }\n\t\t.pict-content-code-wrap .comment { color: var(--theme-color-text-muted, #7F848E); font-style: italic; }\n\t\t.pict-content-code-wrap .operator { color: var(--theme-color-status-info, #56B6C2); }\n\t\t.pict-content-code-wrap .punctuation { color: var(--theme-color-text-on-brand, #E8E0D4); }\n\t\t.pict-content-code-wrap .function-name { color: var(--theme-color-brand-primary, #61AFEF); }\n\t\t.pict-content-code-wrap .property { color: var(--theme-color-status-error, #E06C75); }\n\t\t.pict-content-code-wrap .tag { color: var(--theme-color-status-error, #E06C75); }\n\t\t.pict-content-code-wrap .attr-name { color: var(--theme-color-brand-accent, #D19A66); }\n\t\t.pict-content-code-wrap .attr-value { color: var(--theme-color-status-success, #98C379); }\n\t\t.pict-content pre code {\n\t\t\tbackground: none;\n\t\t\tpadding: 0;\n\t\t\tcolor: inherit;\n\t\t\tfont-size: inherit;\n\t\t}\n\t\t.pict-content blockquote {\n\t\t\tborder-left: 4px solid var(--theme-color-brand-primary, #2E7D74);\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em 1em;\n\t\t\tbackground: var(--theme-color-background-secondary, #F7F5F0);\n\t\t\tcolor: var(--theme-color-text-secondary, #5E5549);\n\t\t}\n\t\t.pict-content blockquote p {\n\t\t\tmargin: 0.25em 0;\n\t\t}\n\t\t.pict-content ul, .pict-content ol {\n\t\t\tpadding-left: 2em;\n\t\t\tline-height: 1.8;\n\t\t}\n\t\t.pict-content li {\n\t\t\tmargin: 0.25em 0;\n\t\t\tcolor: var(--theme-color-text-primary, #423D37);\n\t\t}\n\t\t.pict-content hr {\n\t\t\tborder: none;\n\t\t\tborder-top: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tmargin: 2em 0;\n\t\t}\n\t\t.pict-content table {\n\t\t\twidth: 100%;\n\t\t\tborder-collapse: collapse;\n\t\t\tmargin: 1em 0;\n\t\t}\n\t\t.pict-content table th {\n\t\t\tbackground: var(--theme-color-background-secondary, #F5F0E8);\n\t\t\tborder: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tpadding: 0.6em 0.8em;\n\t\t\ttext-align: left;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t}\n\t\t.pict-content table td {\n\t\t\tborder: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tpadding: 0.5em 0.8em;\n\t\t\tcolor: var(--theme-color-text-primary, #423D37);\n\t\t}\n\t\t.pict-content table tr:nth-child(even) {\n\t\t\tbackground: var(--theme-color-background-secondary, #F7F5F0);\n\t\t}\n\t\t.pict-content img {\n\t\t\tmax-width: 100%;\n\t\t\theight: auto;\n\t\t}\n\t\t.pict-content pre.mermaid {\n\t\t\tbackground: var(--theme-color-background-panel, #fff);\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E);\n\t\t\ttext-align: center;\n\t\t\tpadding: 1em;\n\t\t}\n\t\t.pict-content pre.mermaid text,\n\t\t.pict-content pre.mermaid .nodeLabel,\n\t\t.pict-content pre.mermaid .edgeLabel,\n\t\t.pict-content pre.mermaid .label,\n\t\t.pict-content pre.mermaid .cluster-label,\n\t\t.pict-content pre.mermaid span,\n\t\t.pict-content pre.mermaid foreignObject p,\n\t\t.pict-content pre.mermaid foreignObject div,\n\t\t.pict-content pre.mermaid foreignObject span {\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E) !important;\n\t\t\tfill: var(--theme-color-text-primary, #2A241E) !important;\n\t\t}\n\t\t.pict-content pre.mermaid .edgePath .path {\n\t\t\tstroke: var(--theme-color-text-secondary, #5E5549) !important;\n\t\t}\n\t\t.pict-content pre.mermaid .arrowheadPath {\n\t\t\tfill: var(--theme-color-text-secondary, #5E5549) !important;\n\t\t}\n\t\t.pict-content .pict-content-katex-display {\n\t\t\ttext-align: center;\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em;\n\t\t\toverflow-x: auto;\n\t\t}\n\t\t.pict-content .pict-content-katex-inline {\n\t\t\tdisplay: inline;\n\t\t}\n\n\t\t/* Fullscreen viewer for images and mermaid diagrams (click-to-zoom) */\n\t\t.pict-content [data-fullscreen-source] {\n\t\t\tcursor: zoom-in;\n\t\t\toutline: 1px solid transparent;\n\t\t\toutline-offset: 3px;\n\t\t\tborder-radius: 4px;\n\t\t\ttransition: outline-color 0.15s ease;\n\t\t}\n\t\t.pict-content [data-fullscreen-source]:hover {\n\t\t\toutline-color: var(--theme-color-brand-primary, #2E7D74);\n\t\t}\n\t\t/* Code block container with hover-revealed action buttons */\n\t\t.pict-content-code-container {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\talign-items: flex-start;\n\t\t\tgap: 8px;\n\t\t\tmargin: 1em 0;\n\t\t}\n\t\t.pict-content-code-container > .pict-content-code-wrap {\n\t\t\tmargin: 0;\n\t\t\tflex: 1 1 auto;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.pict-content-code-actions {\n\t\t\tposition: sticky;\n\t\t\ttop: 64px;\n\t\t\talign-self: flex-start;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 6px;\n\t\t\tflex: 0 0 auto;\n\t\t\tpadding-top: 6px;\n\t\t\topacity: 0;\n\t\t\ttransform: translateX(-4px);\n\t\t\ttransition: opacity 0.15s ease, transform 0.15s ease;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.pict-content-code-container:hover .pict-content-code-actions,\n\t\t.pict-content-code-container:focus-within .pict-content-code-actions {\n\t\t\topacity: 1;\n\t\t\ttransform: translateX(0);\n\t\t\tpointer-events: auto;\n\t\t}\n\t\t.pict-content-code-action-btn {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tpadding: 0;\n\t\t\tbackground: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tcolor: var(--theme-color-text-muted, #5E5549);\n\t\t\tborder: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tborder-radius: 6px;\n\t\t\tcursor: pointer;\n\t\t\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n\t\t\ttransition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n\t\t}\n\t\t.pict-content-code-action-btn svg {\n\t\t\tdisplay: block;\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t\tstroke: currentColor;\n\t\t\tfill: none;\n\t\t\tstroke-width: 1.6;\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-linejoin: round;\n\t\t}\n\t\t.pict-content-code-action-btn:hover {\n\t\t\tbackground: var(--theme-color-brand-primary, #2E7D74);\n\t\t\tcolor: var(--theme-color-text-on-brand, #FFFFFF);\n\t\t\tborder-color: var(--theme-color-brand-primary, #2E7D74);\n\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n\t\t}\n\t\t.pict-content-code-action-btn:focus-visible {\n\t\t\toutline: 2px solid var(--theme-color-brand-primary, #2E7D74);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t\t.pict-content-code-action-btn.is-copied {\n\t\t\tbackground: var(--theme-color-brand-primary, #2E7D74);\n\t\t\tcolor: var(--theme-color-text-on-brand, #FFFFFF);\n\t\t\tborder-color: var(--theme-color-brand-primary, #2E7D74);\n\t\t}\n\t\t.pict-content-code-action-btn.is-copy-failed {\n\t\t\tbackground: var(--theme-color-status-error, #B23A3A);\n\t\t\tcolor: var(--theme-color-text-on-brand, #FFFFFF);\n\t\t\tborder-color: var(--theme-color-status-error, #B23A3A);\n\t\t}\n\t\t.pict-fullscreen-overlay {\n\t\t\tposition: fixed;\n\t\t\tinset: 0;\n\t\t\tz-index: 9999;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tbackground: rgba(0, 0, 0, 0.62);\n\t\t\tbackdrop-filter: blur(6px);\n\t\t\t-webkit-backdrop-filter: blur(6px);\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E);\n\t\t}\n\t\t.pict-fullscreen-overlay[hidden] {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.pict-fullscreen-titlebar {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\tgap: 1em;\n\t\t\theight: 48px;\n\t\t\tpadding: 0 1em;\n\t\t\tbackground: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tcolor: var(--theme-color-text-primary, #1A1612);\n\t\t\tborder-bottom: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n\t\t\tflex: 0 0 auto;\n\t\t}\n\t\t.pict-fullscreen-title {\n\t\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n\t\t\tfont-size: 0.95em;\n\t\t\tfont-weight: 600;\n\t\t\tletter-spacing: 0.01em;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tcolor: var(--theme-color-text-primary, #1A1612);\n\t\t}\n\t\t.pict-fullscreen-controls {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t}\n\t\t.pict-fullscreen-btn {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 32px;\n\t\t\theight: 32px;\n\t\t\tpadding: 0;\n\t\t\tbackground: transparent;\n\t\t\tborder: 1px solid transparent;\n\t\t\tborder-radius: 6px;\n\t\t\tcolor: var(--theme-color-text-muted, #5E5549);\n\t\t\tcursor: pointer;\n\t\t\ttransition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n\t\t}\n\t\t.pict-fullscreen-btn svg {\n\t\t\tdisplay: block;\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tstroke: currentColor;\n\t\t\tfill: none;\n\t\t\tstroke-width: 1.75;\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-linejoin: round;\n\t\t}\n\t\t.pict-fullscreen-btn:hover {\n\t\t\tbackground: var(--theme-color-border-light, #EAE3D8);\n\t\t\tcolor: var(--theme-color-text-primary, #1A1612);\n\t\t}\n\t\t.pict-fullscreen-btn:focus-visible {\n\t\t\toutline: 2px solid var(--theme-color-brand-primary, #2E7D74);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t\t.pict-fullscreen-close:hover {\n\t\t\tbackground: var(--theme-color-brand-primary, #2E7D74);\n\t\t\tcolor: var(--theme-color-text-on-brand, #FFFFFF);\n\t\t}\n\t\t.pict-fullscreen-stage {\n\t\t\tflex: 1 1 auto;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\toverflow: hidden;\n\t\t\tpadding: 1.5em;\n\t\t\tcursor: zoom-in;\n\t\t\ttouch-action: none;\n\t\t}\n\t\t.pict-fullscreen-stage.is-zoomed {\n\t\t\tcursor: grab;\n\t\t}\n\t\t.pict-fullscreen-stage.is-panning {\n\t\t\tcursor: grabbing;\n\t\t}\n\t\t.pict-fullscreen-content {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmax-width: 100%;\n\t\t\tmax-height: 100%;\n\t\t\ttransform-origin: center center;\n\t\t\ttransition: transform 0.05s linear;\n\t\t\twill-change: transform;\n\t\t}\n\t\t.pict-fullscreen-content > * {\n\t\t\tbox-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-img {\n\t\t\tmax-width: 90vw;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tobject-fit: contain;\n\t\t\tbackground: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tpadding: 12px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg {\n\t\t\twidth: min(90vw, 1400px);\n\t\t\theight: auto;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\tbackground: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tpadding: 16px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-codewrap {\n\t\t\tmax-width: 90vw;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\tmargin: 0;\n\t\t\toverflow: auto;\n\t\t\tbox-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);\n\t\t}\n\t",Templates:[{Hash:"Pict-Content-Template",Template:/*html*/"\n<div class=\"pict-content\" id=\"Pict-Content-Body\">\n\t<div class=\"pict-content-loading\">Loading content...</div>\n</div>\n"}],Renderables:[{RenderableHash:"Pict-Content-Display",TemplateHash:"Pict-Content-Template",DestinationAddress:"#Pict-Content-Container",RenderMethod:"replace"}]};class PictContentView extends libPictView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);}/**
|
|
1730
|
+
*/escapeHTML(pText){if(!pText){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');}}module.exports=PictContentProvider;module.exports.default_configuration={ProviderIdentifier:"Pict-Content",AutoInitialize:true,AutoInitializeOrdinal:0};},{"pict-provider":7,"pict-section-code":10}],14:[function(require,module,exports){const libPictView=require('pict-view');const _ViewConfiguration={ViewIdentifier:"Pict-Content",DefaultRenderable:"Pict-Content-Display",DefaultDestinationAddress:"#Pict-Content-Container",AutoRender:false,CSS:/*css*/"\n\t\t.pict-content {\n\t\t\tpadding: 2em 3em;\n\t\t\tmax-width: 900px;\n\t\t\tmargin: 0 auto;\n\t\t}\n\t\t.pict-content-loading {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmin-height: 200px;\n\t\t\tcolor: var(--theme-color-text-muted, #8A7F72);\n\t\t\tfont-size: 1em;\n\t\t}\n\t\t.pict-content h1 {\n\t\t\tfont-size: 2em;\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t\tborder-bottom: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tpadding-bottom: 0.3em;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t.pict-content h2 {\n\t\t\tfont-size: 1.5em;\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t\tborder-bottom: 1px solid var(--theme-color-border-light, #EAE3D8);\n\t\t\tpadding-bottom: 0.25em;\n\t\t\tmargin-top: 1.5em;\n\t\t}\n\t\t.pict-content h3 {\n\t\t\tfont-size: 1.25em;\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t\tmargin-top: 1.25em;\n\t\t}\n\t\t.pict-content h4, .pict-content h5, .pict-content h6 {\n\t\t\tcolor: var(--theme-color-text-secondary, #5E5549);\n\t\t\tmargin-top: 1em;\n\t\t}\n\t\t.pict-content p {\n\t\t\tline-height: 1.7;\n\t\t\tcolor: var(--theme-color-text-primary, #423D37);\n\t\t\tmargin: 0.75em 0;\n\t\t}\n\t\t.pict-content a {\n\t\t\tcolor: var(--theme-color-brand-primary, #2E7D74);\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t.pict-content a:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t/* \u2500\u2500\u2500 Code blocks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\t\t Background, text color, line-number gutter, and every\n\t\t syntax token route through pict-provider-theme tokens \u2014\n\t\t the same set pict-section-code (the live editor) uses.\n\t\t This way the rendered-preview code blocks look identical\n\t\t to the live editor and re-skin together when the theme\n\t\t switches. Previous version used the text-primary token\n\t\t as the code background (a TEXT token used as BACKGROUND),\n\t\t which broke in dark mode and any palette where text and\n\t\t background-tertiary diverge.\n\t\t*/\n\t\t.pict-content pre {\n\t\t\tbackground: var(--theme-color-background-tertiary, #F0ECE4);\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t\tborder: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tpadding: 1.25em;\n\t\t\tborder-radius: 6px;\n\t\t\toverflow-x: auto;\n\t\t\tline-height: 1.5;\n\t\t\tfont-size: 0.9em;\n\t\t\tfont-family: var(--theme-typography-family-mono, 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace);\n\t\t}\n\t\t/* Inline code (single backtick) \u2014 slightly differentiated\n\t\t from block code so it doesn't disappear into prose. */\n\t\t.pict-content code {\n\t\t\tbackground: var(--theme-color-background-secondary, #FAF8F4);\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t\tpadding: 0.15em 0.4em;\n\t\t\tborder-radius: 3px;\n\t\t\tfont-size: 0.9em;\n\t\t\tfont-family: var(--theme-typography-family-mono, 'SFMono-Regular', 'SF Mono', 'Menlo', monospace);\n\t\t}\n\t\t.pict-content-code-wrap {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tfont-family: var(--theme-typography-family-mono, 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace);\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 1.5;\n\t\t\tborder: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tborder-radius: 6px;\n\t\t\toverflow: hidden;\n\t\t\tmargin: 1em 0;\n\t\t\tbackground: var(--theme-color-background-tertiary, #F0ECE4);\n\t\t}\n\t\t.pict-content-code-wrap .pict-content-code-line-numbers {\n\t\t\twidth: 40px;\n\t\t\tmin-width: 40px;\n\t\t\tpadding: 1.25em 0;\n\t\t\ttext-align: right;\n\t\t\tbackground: var(--theme-color-background-secondary, #FAF8F4);\n\t\t\tborder-right: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tcolor: var(--theme-color-text-muted, #8A7F72);\n\t\t\tfont-family: inherit;\n\t\t\tfont-size: inherit;\n\t\t\tline-height: inherit;\n\t\t\tuser-select: none;\n\t\t\tpointer-events: none;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.pict-content-code-wrap .pict-content-code-line-numbers span {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0 8px 0 0;\n\t\t}\n\t\t.pict-content-code-wrap pre {\n\t\t\tmargin: 0;\n\t\t\tbackground: var(--theme-color-background-tertiary, #F0ECE4);\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t\tborder: none;\n\t\t\tpadding: 1.25em 1.25em 1.25em 8px;\n\t\t\tborder-radius: 0 6px 6px 0;\n\t\t\toverflow-x: auto;\n\t\t\tline-height: 1.5;\n\t\t\tfont-size: inherit;\n\t\t\tflex: 1;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.pict-content-code-wrap pre code {\n\t\t\tbackground: none;\n\t\t\tpadding: 0;\n\t\t\tcolor: inherit;\n\t\t\tfont-size: inherit;\n\t\t\tfont-family: inherit;\n\t\t}\n\t\t/* Syntax token colors \u2014 every class binds to a --theme-color-syntax-*\n\t\t variable, the same tokens pict-section-code (the live editor) uses.\n\t\t Each var() carries an Atom One Light hex as fallback for hosts\n\t\t without a theme provider; themes that DO ship syntax tokens\n\t\t (retold-default, retold-content-system, etc.) drive everything\n\t\t coherently. */\n\t\t.pict-content-code-wrap .keyword { color: var(--theme-color-syntax-keyword, #A626A4); }\n\t\t.pict-content-code-wrap .string { color: var(--theme-color-syntax-string, #50A14F); }\n\t\t.pict-content-code-wrap .number { color: var(--theme-color-syntax-number, #986801); }\n\t\t.pict-content-code-wrap .comment { color: var(--theme-color-syntax-comment, #A0A1A7); font-style: italic; }\n\t\t.pict-content-code-wrap .operator { color: var(--theme-color-syntax-operator, #0184BC); }\n\t\t.pict-content-code-wrap .punctuation { color: var(--theme-color-syntax-punctuation, #383A42); }\n\t\t.pict-content-code-wrap .function-name { color: var(--theme-color-syntax-function, #4078F2); }\n\t\t.pict-content-code-wrap .property { color: var(--theme-color-syntax-property, #E45649); }\n\t\t.pict-content-code-wrap .tag { color: var(--theme-color-syntax-tag, #E45649); }\n\t\t.pict-content-code-wrap .attr-name { color: var(--theme-color-syntax-attrname, #986801); }\n\t\t.pict-content-code-wrap .attr-value { color: var(--theme-color-syntax-attrvalue, #50A14F); }\n\t\t.pict-content-code-wrap .builtin { color: var(--theme-color-syntax-builtin, #986801); }\n\t\t.pict-content-code-wrap .type { color: var(--theme-color-syntax-type, #C18401); }\n\t\t.pict-content-code-wrap .variable { color: var(--theme-color-syntax-variable, #383A42); }\n\t\t.pict-content pre code {\n\t\t\tbackground: none;\n\t\t\tpadding: 0;\n\t\t\tcolor: inherit;\n\t\t\tfont-size: inherit;\n\t\t}\n\t\t.pict-content blockquote {\n\t\t\tborder-left: 4px solid var(--theme-color-brand-primary, #2E7D74);\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em 1em;\n\t\t\tbackground: var(--theme-color-background-secondary, #F7F5F0);\n\t\t\tcolor: var(--theme-color-text-secondary, #5E5549);\n\t\t}\n\t\t.pict-content blockquote p {\n\t\t\tmargin: 0.25em 0;\n\t\t}\n\t\t.pict-content ul, .pict-content ol {\n\t\t\tpadding-left: 2em;\n\t\t\tline-height: 1.8;\n\t\t}\n\t\t.pict-content li {\n\t\t\tmargin: 0.25em 0;\n\t\t\tcolor: var(--theme-color-text-primary, #423D37);\n\t\t}\n\t\t.pict-content hr {\n\t\t\tborder: none;\n\t\t\tborder-top: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tmargin: 2em 0;\n\t\t}\n\t\t.pict-content table {\n\t\t\twidth: 100%;\n\t\t\tborder-collapse: collapse;\n\t\t\tmargin: 1em 0;\n\t\t}\n\t\t.pict-content table th {\n\t\t\tbackground: var(--theme-color-background-secondary, #F5F0E8);\n\t\t\tborder: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tpadding: 0.6em 0.8em;\n\t\t\ttext-align: left;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t}\n\t\t.pict-content table td {\n\t\t\tborder: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tpadding: 0.5em 0.8em;\n\t\t\tcolor: var(--theme-color-text-primary, #423D37);\n\t\t}\n\t\t.pict-content table tr:nth-child(even) {\n\t\t\tbackground: var(--theme-color-background-secondary, #F7F5F0);\n\t\t}\n\t\t.pict-content img {\n\t\t\tmax-width: 100%;\n\t\t\theight: auto;\n\t\t}\n\t\t.pict-content pre.mermaid {\n\t\t\tbackground: var(--theme-color-background-panel, #fff);\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E);\n\t\t\ttext-align: center;\n\t\t\tpadding: 1em;\n\t\t}\n\t\t.pict-content pre.mermaid text,\n\t\t.pict-content pre.mermaid .nodeLabel,\n\t\t.pict-content pre.mermaid .edgeLabel,\n\t\t.pict-content pre.mermaid .label,\n\t\t.pict-content pre.mermaid .cluster-label,\n\t\t.pict-content pre.mermaid span,\n\t\t.pict-content pre.mermaid foreignObject p,\n\t\t.pict-content pre.mermaid foreignObject div,\n\t\t.pict-content pre.mermaid foreignObject span {\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E) !important;\n\t\t\tfill: var(--theme-color-text-primary, #2A241E) !important;\n\t\t}\n\t\t.pict-content pre.mermaid .edgePath .path {\n\t\t\tstroke: var(--theme-color-text-secondary, #5E5549) !important;\n\t\t}\n\t\t.pict-content pre.mermaid .arrowheadPath {\n\t\t\tfill: var(--theme-color-text-secondary, #5E5549) !important;\n\t\t}\n\t\t.pict-content .pict-content-katex-display {\n\t\t\ttext-align: center;\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em;\n\t\t\toverflow-x: auto;\n\t\t}\n\t\t.pict-content .pict-content-katex-inline {\n\t\t\tdisplay: inline;\n\t\t}\n\n\t\t/* Fullscreen viewer for images and mermaid diagrams (click-to-zoom) */\n\t\t.pict-content [data-fullscreen-source] {\n\t\t\tcursor: zoom-in;\n\t\t\toutline: 1px solid transparent;\n\t\t\toutline-offset: 3px;\n\t\t\tborder-radius: 4px;\n\t\t\ttransition: outline-color 0.15s ease;\n\t\t}\n\t\t.pict-content [data-fullscreen-source]:hover {\n\t\t\toutline-color: var(--theme-color-brand-primary, #2E7D74);\n\t\t}\n\t\t/* Code block container with hover-revealed action buttons */\n\t\t.pict-content-code-container {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\talign-items: flex-start;\n\t\t\tgap: 8px;\n\t\t\tmargin: 1em 0;\n\t\t}\n\t\t.pict-content-code-container > .pict-content-code-wrap {\n\t\t\tmargin: 0;\n\t\t\tflex: 1 1 auto;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.pict-content-code-actions {\n\t\t\tposition: sticky;\n\t\t\ttop: 64px;\n\t\t\talign-self: flex-start;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 6px;\n\t\t\tflex: 0 0 auto;\n\t\t\tpadding-top: 6px;\n\t\t\topacity: 0;\n\t\t\ttransform: translateX(-4px);\n\t\t\ttransition: opacity 0.15s ease, transform 0.15s ease;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.pict-content-code-container:hover .pict-content-code-actions,\n\t\t.pict-content-code-container:focus-within .pict-content-code-actions {\n\t\t\topacity: 1;\n\t\t\ttransform: translateX(0);\n\t\t\tpointer-events: auto;\n\t\t}\n\t\t.pict-content-code-action-btn {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tpadding: 0;\n\t\t\tbackground: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tcolor: var(--theme-color-text-muted, #5E5549);\n\t\t\tborder: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tborder-radius: 6px;\n\t\t\tcursor: pointer;\n\t\t\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n\t\t\ttransition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n\t\t}\n\t\t.pict-content-code-action-btn svg {\n\t\t\tdisplay: block;\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t\tstroke: currentColor;\n\t\t\tfill: none;\n\t\t\tstroke-width: 1.6;\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-linejoin: round;\n\t\t}\n\t\t.pict-content-code-action-btn:hover {\n\t\t\tbackground: var(--theme-color-brand-primary, #2E7D74);\n\t\t\tcolor: var(--theme-color-text-on-brand, #FFFFFF);\n\t\t\tborder-color: var(--theme-color-brand-primary, #2E7D74);\n\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n\t\t}\n\t\t.pict-content-code-action-btn:focus-visible {\n\t\t\toutline: 2px solid var(--theme-color-brand-primary, #2E7D74);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t\t.pict-content-code-action-btn.is-copied {\n\t\t\tbackground: var(--theme-color-brand-primary, #2E7D74);\n\t\t\tcolor: var(--theme-color-text-on-brand, #FFFFFF);\n\t\t\tborder-color: var(--theme-color-brand-primary, #2E7D74);\n\t\t}\n\t\t.pict-content-code-action-btn.is-copy-failed {\n\t\t\tbackground: var(--theme-color-status-error, #B23A3A);\n\t\t\tcolor: var(--theme-color-text-on-brand, #FFFFFF);\n\t\t\tborder-color: var(--theme-color-status-error, #B23A3A);\n\t\t}\n\t\t.pict-fullscreen-overlay {\n\t\t\tposition: fixed;\n\t\t\tinset: 0;\n\t\t\tz-index: 9999;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tbackground: rgba(0, 0, 0, 0.62);\n\t\t\tbackdrop-filter: blur(6px);\n\t\t\t-webkit-backdrop-filter: blur(6px);\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E);\n\t\t}\n\t\t.pict-fullscreen-overlay[hidden] {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.pict-fullscreen-titlebar {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\tgap: 1em;\n\t\t\theight: 48px;\n\t\t\tpadding: 0 1em;\n\t\t\tbackground: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tcolor: var(--theme-color-text-primary, #1A1612);\n\t\t\tborder-bottom: 1px solid var(--theme-color-border-default, #DDD6CA);\n\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n\t\t\tflex: 0 0 auto;\n\t\t}\n\t\t.pict-fullscreen-title {\n\t\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n\t\t\tfont-size: 0.95em;\n\t\t\tfont-weight: 600;\n\t\t\tletter-spacing: 0.01em;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tcolor: var(--theme-color-text-primary, #1A1612);\n\t\t}\n\t\t.pict-fullscreen-controls {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t}\n\t\t.pict-fullscreen-btn {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 32px;\n\t\t\theight: 32px;\n\t\t\tpadding: 0;\n\t\t\tbackground: transparent;\n\t\t\tborder: 1px solid transparent;\n\t\t\tborder-radius: 6px;\n\t\t\tcolor: var(--theme-color-text-muted, #5E5549);\n\t\t\tcursor: pointer;\n\t\t\ttransition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n\t\t}\n\t\t.pict-fullscreen-btn svg {\n\t\t\tdisplay: block;\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tstroke: currentColor;\n\t\t\tfill: none;\n\t\t\tstroke-width: 1.75;\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-linejoin: round;\n\t\t}\n\t\t.pict-fullscreen-btn:hover {\n\t\t\tbackground: var(--theme-color-border-light, #EAE3D8);\n\t\t\tcolor: var(--theme-color-text-primary, #1A1612);\n\t\t}\n\t\t.pict-fullscreen-btn:focus-visible {\n\t\t\toutline: 2px solid var(--theme-color-brand-primary, #2E7D74);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t\t.pict-fullscreen-close:hover {\n\t\t\tbackground: var(--theme-color-brand-primary, #2E7D74);\n\t\t\tcolor: var(--theme-color-text-on-brand, #FFFFFF);\n\t\t}\n\t\t.pict-fullscreen-stage {\n\t\t\tflex: 1 1 auto;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\toverflow: hidden;\n\t\t\tpadding: 1.5em;\n\t\t\tcursor: zoom-in;\n\t\t\ttouch-action: none;\n\t\t}\n\t\t.pict-fullscreen-stage.is-zoomed {\n\t\t\tcursor: grab;\n\t\t}\n\t\t.pict-fullscreen-stage.is-panning {\n\t\t\tcursor: grabbing;\n\t\t}\n\t\t.pict-fullscreen-content {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmax-width: 100%;\n\t\t\tmax-height: 100%;\n\t\t\ttransform-origin: center center;\n\t\t\ttransition: transform 0.05s linear;\n\t\t\twill-change: transform;\n\t\t}\n\t\t.pict-fullscreen-content > * {\n\t\t\tbox-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-img {\n\t\t\tmax-width: 90vw;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tobject-fit: contain;\n\t\t\tbackground: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tpadding: 12px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg {\n\t\t\twidth: min(90vw, 1400px);\n\t\t\theight: auto;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\tbackground: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tpadding: 16px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-codewrap {\n\t\t\tmax-width: 90vw;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\tmargin: 0;\n\t\t\toverflow: auto;\n\t\t\tbox-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);\n\t\t}\n\t",Templates:[{Hash:"Pict-Content-Template",Template:/*html*/"\n<div class=\"pict-content\" id=\"Pict-Content-Body\">\n\t<div class=\"pict-content-loading\">Loading content...</div>\n</div>\n"}],Renderables:[{RenderableHash:"Pict-Content-Display",TemplateHash:"Pict-Content-Template",DestinationAddress:"#Pict-Content-Container",RenderMethod:"replace"}]};class PictContentView extends libPictView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);}/**
|
|
1670
1731
|
* Display parsed HTML content in the content area.
|
|
1671
1732
|
*
|
|
1672
1733
|
* @param {string} pHTMLContent - The HTML to display
|
|
@@ -1799,7 +1860,7 @@ let tmpZoomBtns=tmpOverlay.querySelectorAll('[data-action="zoom-in"], [data-acti
|
|
|
1799
1860
|
*
|
|
1800
1861
|
* @param {string} [pMessage] - Loading message (defaults to 'Loading content...')
|
|
1801
1862
|
* @param {string} [pContainerID] - The container element ID (defaults to 'Pict-Content-Body')
|
|
1802
|
-
*/showLoading(pMessage,pContainerID){let tmpContainerID=pContainerID||'Pict-Content-Body';let tmpMessage=pMessage||'Loading content...';this.pict.ContentAssignment.assignContent('#'+tmpContainerID,'<div class="pict-content-loading">'+tmpMessage+'</div>');}}module.exports=PictContentView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":
|
|
1863
|
+
*/showLoading(pMessage,pContainerID){let tmpContainerID=pContainerID||'Pict-Content-Body';let tmpMessage=pMessage||'Loading content...';this.pict.ContentAssignment.assignContent('#'+tmpContainerID,'<div class="pict-content-loading">'+tmpMessage+'</div>');}}module.exports=PictContentView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":69}],15:[function(require,module,exports){/**
|
|
1803
1864
|
* Pict-Modal-Confirm
|
|
1804
1865
|
*
|
|
1805
1866
|
* Builds confirm and double-confirm dialog DOM, returns Promises.
|
|
@@ -1866,7 +1927,7 @@ fResolve(pResult);}/**
|
|
|
1866
1927
|
*
|
|
1867
1928
|
* @param {string} pText
|
|
1868
1929
|
* @returns {string}
|
|
1869
|
-
*/_escapeHTML(pText){if(typeof pText!=='string'){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=PictModalConfirm;},{}],
|
|
1930
|
+
*/_escapeHTML(pText){if(typeof pText!=='string'){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=PictModalConfirm;},{}],16:[function(require,module,exports){/**
|
|
1870
1931
|
* Pict-Modal-Dropdown
|
|
1871
1932
|
*
|
|
1872
1933
|
* Anchor-positioned menu that behaves like a dropdown / popover. Handy for:
|
|
@@ -1942,7 +2003,7 @@ let tmpMenuRect=pMenu.getBoundingClientRect();let tmpVw=window.innerWidth||docum
|
|
|
1942
2003
|
let tmpRoomBelow=tmpVh-pAnchorRect.bottom-tmpGap;let tmpRoomAbove=pAnchorRect.top-tmpGap;let tmpPlaceAbove;if(pOptions.position==='above'){tmpPlaceAbove=true;}else if(pOptions.position==='below'){tmpPlaceAbove=false;}else{tmpPlaceAbove=tmpMenuRect.height>tmpRoomBelow&&tmpRoomAbove>tmpRoomBelow;}// Cap height to whichever side we landed on so the menu can scroll
|
|
1943
2004
|
// internally instead of running off the screen.
|
|
1944
2005
|
let tmpCap=Math.max(80,(tmpPlaceAbove?tmpRoomAbove:tmpRoomBelow)-8);pMenu.style.maxHeight=tmpCap+'px';// Horizontal alignment to the anchor, then clamp inside the viewport.
|
|
1945
|
-
let tmpLeft;if(pOptions.align==='right'){tmpLeft=pAnchorRect.right-tmpMenuRect.width;}else if(pOptions.align==='center'){tmpLeft=pAnchorRect.left+(pAnchorRect.width-tmpMenuRect.width)/2;}else{tmpLeft=pAnchorRect.left;}tmpLeft=Math.min(tmpLeft,tmpVw-tmpMenuRect.width-4);tmpLeft=Math.max(4,tmpLeft);let tmpTop;if(tmpPlaceAbove){tmpTop=Math.max(4,pAnchorRect.top-tmpMenuRect.height-tmpGap);pMenu.classList.add('pict-modal-dropdown--above');}else{tmpTop=pAnchorRect.bottom+tmpGap;pMenu.classList.remove('pict-modal-dropdown--above');}pMenu.style.left=Math.round(tmpLeft)+'px';pMenu.style.top=Math.round(tmpTop)+'px';}_focusFirstEnabled(pMenu){let tmpItems=pMenu.querySelectorAll('[data-pict-modal-dropdown-item]:not([data-disabled])');if(tmpItems.length){tmpItems[0].focus();}}_focusNeighbor(pMenu,pDirection){let tmpItems=Array.prototype.slice.call(pMenu.querySelectorAll('[data-pict-modal-dropdown-item]:not([data-disabled])'));if(!tmpItems.length){return;}let tmpActive=document.activeElement;let tmpIdx=tmpItems.indexOf(tmpActive);let tmpNext=tmpIdx===-1?pDirection>0?0:tmpItems.length-1:(tmpIdx+pDirection+tmpItems.length)%tmpItems.length;tmpItems[tmpNext].focus();}_escapeHTML(pText){if(typeof pText!=='string'){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=PictModalDropdown;},{}],
|
|
2006
|
+
let tmpLeft;if(pOptions.align==='right'){tmpLeft=pAnchorRect.right-tmpMenuRect.width;}else if(pOptions.align==='center'){tmpLeft=pAnchorRect.left+(pAnchorRect.width-tmpMenuRect.width)/2;}else{tmpLeft=pAnchorRect.left;}tmpLeft=Math.min(tmpLeft,tmpVw-tmpMenuRect.width-4);tmpLeft=Math.max(4,tmpLeft);let tmpTop;if(tmpPlaceAbove){tmpTop=Math.max(4,pAnchorRect.top-tmpMenuRect.height-tmpGap);pMenu.classList.add('pict-modal-dropdown--above');}else{tmpTop=pAnchorRect.bottom+tmpGap;pMenu.classList.remove('pict-modal-dropdown--above');}pMenu.style.left=Math.round(tmpLeft)+'px';pMenu.style.top=Math.round(tmpTop)+'px';}_focusFirstEnabled(pMenu){let tmpItems=pMenu.querySelectorAll('[data-pict-modal-dropdown-item]:not([data-disabled])');if(tmpItems.length){tmpItems[0].focus();}}_focusNeighbor(pMenu,pDirection){let tmpItems=Array.prototype.slice.call(pMenu.querySelectorAll('[data-pict-modal-dropdown-item]:not([data-disabled])'));if(!tmpItems.length){return;}let tmpActive=document.activeElement;let tmpIdx=tmpItems.indexOf(tmpActive);let tmpNext=tmpIdx===-1?pDirection>0?0:tmpItems.length-1:(tmpIdx+pDirection+tmpItems.length)%tmpItems.length;tmpItems[tmpNext].focus();}_escapeHTML(pText){if(typeof pText!=='string'){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=PictModalDropdown;},{}],17:[function(require,module,exports){/**
|
|
1946
2007
|
* Pict-Modal-Overlay
|
|
1947
2008
|
*
|
|
1948
2009
|
* Manages a shared backdrop overlay element appended to document.body.
|
|
@@ -1964,7 +2025,7 @@ this._currentClickHandler=fOnClick;this._element.onclick=pEvent=>{if(pEvent.targ
|
|
|
1964
2025
|
*/hide(){this._refCount--;if(this._refCount<=0){this._refCount=0;if(this._element){this._element.classList.remove('pict-modal-visible');let tmpElement=this._element;// Remove after transition
|
|
1965
2026
|
setTimeout(()=>{if(tmpElement.parentNode){tmpElement.parentNode.removeChild(tmpElement);}},220);this._element=null;this._currentClickHandler=null;}}}/**
|
|
1966
2027
|
* Force-remove the overlay regardless of reference count.
|
|
1967
|
-
*/destroy(){this._refCount=0;if(this._element&&this._element.parentNode){this._element.parentNode.removeChild(this._element);}this._element=null;this._currentClickHandler=null;}}module.exports=PictModalOverlay;},{}],
|
|
2028
|
+
*/destroy(){this._refCount=0;if(this._element&&this._element.parentNode){this._element.parentNode.removeChild(this._element);}this._element=null;this._currentClickHandler=null;}}module.exports=PictModalOverlay;},{}],18:[function(require,module,exports){/**
|
|
1968
2029
|
* Pict-Modal-Panel
|
|
1969
2030
|
*
|
|
1970
2031
|
* Adds resizable and collapsible panel behavior to any DOM element.
|
|
@@ -1991,8 +2052,13 @@ let tmpTab=null;if(tmpOptions.collapsible){tmpTab=document.createElement('div');
|
|
|
1991
2052
|
// panel's own overflow (e.g. overflow-y: auto for scrolling).
|
|
1992
2053
|
// Right panels: edge goes BEFORE the panel (left side).
|
|
1993
2054
|
// Left panels: edge goes AFTER the panel (right side).
|
|
1994
|
-
if(tmpTarget.parentNode){if(tmpIsRight){tmpTarget.parentNode.insertBefore(tmpEdge,tmpTarget);}else{tmpTarget.parentNode.insertBefore(tmpEdge,tmpTarget.nextSibling);}}else{tmpTarget.insertBefore(tmpEdge,tmpTarget.firstChild);}// ── Chevron
|
|
1995
|
-
|
|
2055
|
+
if(tmpTarget.parentNode){if(tmpIsRight){tmpTarget.parentNode.insertBefore(tmpEdge,tmpTarget);}else{tmpTarget.parentNode.insertBefore(tmpEdge,tmpTarget.nextSibling);}}else{tmpTarget.insertBefore(tmpEdge,tmpTarget.firstChild);}// ── Chevron lookup via pict.providers.Icon ──────────
|
|
2056
|
+
// Both directions come from the core registry (`{~I:ChevronLeft~}`
|
|
2057
|
+
// / `{~I:ChevronRight~}`). Resolved per-render so a theme that
|
|
2058
|
+
// re-registers the chevron variant picks up automatically. Empty
|
|
2059
|
+
// fallback in the unlikely case pict is missing the Icon provider
|
|
2060
|
+
// (very old pict versions; current minimum is 1.0.368).
|
|
2061
|
+
let tmpPictHandle=typeof window!=='undefined'&&window.pict?window.pict:null;let tmpIcon=pName=>tmpPictHandle&&typeof tmpPictHandle.icon==='function'?tmpPictHandle.icon(pName):'';let tmpUpdateChevron=()=>{if(!tmpTab)return;let tmpChevronRight=tmpIcon('ChevronRight');let tmpChevronLeft=tmpIcon('ChevronLeft');if(tmpIsRight){tmpTab.innerHTML=tmpIsCollapsed?tmpChevronLeft:tmpChevronRight;}else{tmpTab.innerHTML=tmpIsCollapsed?tmpChevronRight:tmpChevronLeft;}};// ── Persist helper ──────────────────────────────────
|
|
1996
2062
|
let tmpPersist=()=>{if(!tmpOptions.persist||!tmpOptions.persistKey)return;try{localStorage.setItem('pict-panel-'+tmpOptions.persistKey,JSON.stringify({width:tmpCurrentWidth,collapsed:tmpIsCollapsed}));}catch(e){/* ignore */}};// ── Collapse / expand ───────────────────────────────
|
|
1997
2063
|
let tmpCollapse=()=>{if(tmpIsCollapsed||tmpDestroyed)return;tmpIsCollapsed=true;tmpTarget.classList.add('pict-panel-collapsed');tmpEdge.classList.add('pict-panel-edge-collapsed');tmpUpdateChevron();tmpPersist();if(typeof tmpOptions.onToggle==='function')tmpOptions.onToggle(true);};let tmpExpand=()=>{if(!tmpIsCollapsed||tmpDestroyed)return;tmpIsCollapsed=false;tmpEdge.classList.remove('pict-panel-edge-collapsed');tmpTarget.classList.remove('pict-panel-collapsed');tmpTarget.style.width=tmpCurrentWidth+'px';tmpUpdateChevron();tmpPersist();if(typeof tmpOptions.onToggle==='function')tmpOptions.onToggle(false);};let tmpToggle=()=>{if(tmpIsCollapsed)tmpExpand();else tmpCollapse();};let tmpSetWidth=pWidth=>{if(tmpDestroyed)return;let tmpWidth=Math.max(tmpOptions.minWidth,Math.min(tmpOptions.maxWidth,pWidth));tmpCurrentWidth=tmpWidth;if(!tmpIsCollapsed){tmpTarget.style.width=tmpWidth+'px';}tmpPersist();if(typeof tmpOptions.onResize==='function')tmpOptions.onResize(tmpWidth);};// ── Tab click ───────────────────────────────────────
|
|
1998
2064
|
if(tmpTab){tmpTab.addEventListener('click',pEvent=>{pEvent.stopPropagation();tmpToggle();});}// ── Resize drag ─────────────────────────────────────
|
|
@@ -2004,7 +2070,7 @@ let tmpHandle={id:tmpId,collapse:tmpCollapse,expand:tmpExpand,toggle:tmpToggle,s
|
|
|
2004
2070
|
* Return a no-op handle for server-side or missing-element cases.
|
|
2005
2071
|
*/_nullHandle(){return{id:0,collapse:()=>{},expand:()=>{},toggle:()=>{},setWidth:()=>{},destroy:()=>{}};}/**
|
|
2006
2072
|
* Destroy all active panels.
|
|
2007
|
-
*/destroyAll(){let tmpPanels=this._panels.slice();for(let i=0;i<tmpPanels.length;i++){tmpPanels[i].destroy();}}}module.exports=PictModalPanel;},{}],
|
|
2073
|
+
*/destroyAll(){let tmpPanels=this._panels.slice();for(let i=0;i<tmpPanels.length;i++){tmpPanels[i].destroy();}}}module.exports=PictModalPanel;},{}],19:[function(require,module,exports){/**
|
|
2008
2074
|
* Pict-Modal-Shell — viewport-managing layout system for top / right /
|
|
2009
2075
|
* bottom / left panels around a center.
|
|
2010
2076
|
*
|
|
@@ -2274,7 +2340,7 @@ this._fireHook('OnToggle',this.Collapsed);}_fireHook(pName,pArg){let tmpFn=this.
|
|
|
2274
2340
|
class PictModalShellManager{constructor(pModalSection){this._modal=pModalSection;this._shellsByViewport=new WeakMap();}/**
|
|
2275
2341
|
* Idempotent — calling shell() twice with the same viewport returns
|
|
2276
2342
|
* the same instance.
|
|
2277
|
-
*/shell(pViewportSelectorOrEl,pOptions){let tmpEl=typeof pViewportSelectorOrEl==='string'?document.querySelector(pViewportSelectorOrEl):pViewportSelectorOrEl;if(!tmpEl){throw new Error('Pict-Modal-Shell.shell: viewport not found for '+pViewportSelectorOrEl);}let tmpExisting=this._shellsByViewport.get(tmpEl);if(tmpExisting)return tmpExisting;let tmpShell=new PictModalShell(this._modal,tmpEl,pOptions);this._shellsByViewport.set(tmpEl,tmpShell);return tmpShell;}}module.exports=PictModalShellManager;module.exports.PictModalShell=PictModalShell;module.exports.ShellPanel=ShellPanel;module.exports.STORAGE_PREFIX=STORAGE_PREFIX;module.exports.SCHEMA_VERSION=SCHEMA_VERSION;},{}],
|
|
2343
|
+
*/shell(pViewportSelectorOrEl,pOptions){let tmpEl=typeof pViewportSelectorOrEl==='string'?document.querySelector(pViewportSelectorOrEl):pViewportSelectorOrEl;if(!tmpEl){throw new Error('Pict-Modal-Shell.shell: viewport not found for '+pViewportSelectorOrEl);}let tmpExisting=this._shellsByViewport.get(tmpEl);if(tmpExisting)return tmpExisting;let tmpShell=new PictModalShell(this._modal,tmpEl,pOptions);this._shellsByViewport.set(tmpEl,tmpShell);return tmpShell;}}module.exports=PictModalShellManager;module.exports.PictModalShell=PictModalShell;module.exports.ShellPanel=ShellPanel;module.exports.STORAGE_PREFIX=STORAGE_PREFIX;module.exports.SCHEMA_VERSION=SCHEMA_VERSION;},{}],20:[function(require,module,exports){/**
|
|
2278
2344
|
* Pict-Modal-Toast
|
|
2279
2345
|
*
|
|
2280
2346
|
* Manages toast notification elements with auto-dismiss and stacking.
|
|
@@ -2311,7 +2377,7 @@ if(tmpOptions.duration>0){tmpTimeoutHandle=setTimeout(tmpDismiss,tmpOptions.dura
|
|
|
2311
2377
|
*
|
|
2312
2378
|
* @param {string} pText
|
|
2313
2379
|
* @returns {string}
|
|
2314
|
-
*/_escapeHTML(pText){if(typeof pText!=='string'){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=PictModalToast;},{}],
|
|
2380
|
+
*/_escapeHTML(pText){if(typeof pText!=='string'){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=PictModalToast;},{}],21:[function(require,module,exports){/**
|
|
2315
2381
|
* Pict-Modal-Tooltip
|
|
2316
2382
|
*
|
|
2317
2383
|
* Manages simple text and rich HTML tooltips with positioning and auto-flip.
|
|
@@ -2360,7 +2426,7 @@ if(tmpPosition==='top'&&tmpTargetRect.top<tmpTooltipRect.height+tmpGap){tmpPosit
|
|
|
2360
2426
|
pTooltip.className=pTooltip.className.replace(/pict-modal-tooltip--\w+/,'pict-modal-tooltip--'+tmpPosition);let tmpTop=0;let tmpLeft=0;switch(tmpPosition){case'top':tmpTop=tmpTargetRect.top-tmpTooltipRect.height-tmpGap;tmpLeft=tmpTargetRect.left+tmpTargetRect.width/2-tmpTooltipRect.width/2;break;case'bottom':tmpTop=tmpTargetRect.bottom+tmpGap;tmpLeft=tmpTargetRect.left+tmpTargetRect.width/2-tmpTooltipRect.width/2;break;case'left':tmpTop=tmpTargetRect.top+tmpTargetRect.height/2-tmpTooltipRect.height/2;tmpLeft=tmpTargetRect.left-tmpTooltipRect.width-tmpGap;break;case'right':tmpTop=tmpTargetRect.top+tmpTargetRect.height/2-tmpTooltipRect.height/2;tmpLeft=tmpTargetRect.right+tmpGap;break;}// Clamp to viewport
|
|
2361
2427
|
tmpLeft=Math.max(4,Math.min(tmpLeft,window.innerWidth-tmpTooltipRect.width-4));tmpTop=Math.max(4,Math.min(tmpTop,window.innerHeight-tmpTooltipRect.height-4));pTooltip.style.top=tmpTop+'px';pTooltip.style.left=tmpLeft+'px';}/**
|
|
2362
2428
|
* Dismiss all active tooltips.
|
|
2363
|
-
*/dismissAll(){let tmpTooltips=this._modal._activeTooltips.slice();for(let i=0;i<tmpTooltips.length;i++){tmpTooltips[i].destroy();}}}module.exports=PictModalTooltip;},{}],
|
|
2429
|
+
*/dismissAll(){let tmpTooltips=this._modal._activeTooltips.slice();for(let i=0;i<tmpTooltips.length;i++){tmpTooltips[i].destroy();}}}module.exports=PictModalTooltip;},{}],22:[function(require,module,exports){/**
|
|
2364
2430
|
* Pict-Modal-Window
|
|
2365
2431
|
*
|
|
2366
2432
|
* Builds custom floating modal windows with arbitrary content and buttons.
|
|
@@ -2413,7 +2479,7 @@ if(typeof pOptions.onOpen==='function'){pOptions.onOpen(pDialog);}}/**
|
|
|
2413
2479
|
*
|
|
2414
2480
|
* @param {string} pText
|
|
2415
2481
|
* @returns {string}
|
|
2416
|
-
*/_escapeHTML(pText){if(typeof pText!=='string'){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=PictModalWindow;},{}],22:[function(require,module,exports){module.exports={"AutoInitialize":true,"AutoRender":false,"AutoSolveWithApp":false,"ViewIdentifier":"Pict-Section-Modal","OverlayClickDismisses":true,"DefaultConfirmOptions":{"title":"Confirm","confirmLabel":"OK","cancelLabel":"Cancel","dangerous":false,"unbounded":false},"DefaultDoubleConfirmOptions":{"title":"Are you sure?","confirmLabel":"Confirm","cancelLabel":"Cancel","phrasePrompt":"Type \"{phrase}\" to confirm:","confirmPhrase":"","unbounded":false},"DefaultModalOptions":{"title":"","content":"","buttons":[],"closeable":true,"width":"480px","unbounded":false},"DefaultTooltipOptions":{"position":"top","delay":200,"maxWidth":"300px","interactive":false},"DefaultToastOptions":{"type":"info","duration":3000,"position":"top-right","dismissible":true},"DefaultPanelOptions":{"position":"right","width":340,"minWidth":200,"maxWidth":600,"collapsible":true,"collapsed":false,"persist":false,"persistKey":""},"Templates":[],"Renderables":[],"CSS":/*css*/"\n/* pict-section-modal */\n.pict-modal-root\n{\n\t/* Defaults are routed through pict-provider-theme tokens so apps\n\t using the theme provider get themed modals automatically. Each\n\t var() carries its original hex as the fallback so apps that don't\n\t install pict-provider-theme look exactly as before. Apps may\n\t still override any --pict-modal-* var directly to layer over the\n\t theme-driven defaults. */\n\n\t/* Overlay */\n\t--pict-modal-overlay-bg: rgba(0, 0, 0, 0.5);\n\n\t/* Dialog */\n\t--pict-modal-bg: var(--theme-color-background-panel, #ffffff);\n\t--pict-modal-fg: var(--theme-color-text-primary, #1a1a1a);\n\t--pict-modal-border: var(--theme-color-border-default, #e0e0e0);\n\t--pict-modal-border-radius: 8px;\n\t--pict-modal-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);\n\t--pict-modal-header-bg: var(--theme-color-background-secondary, #f5f5f5);\n\t--pict-modal-header-fg: var(--theme-color-text-primary, #1a1a1a);\n\t--pict-modal-header-border: var(--theme-color-border-default, #e0e0e0);\n\n\t/* Buttons */\n\t--pict-modal-btn-bg: var(--theme-color-background-secondary, #e0e0e0);\n\t--pict-modal-btn-fg: var(--theme-color-text-primary, #1a1a1a);\n\t--pict-modal-btn-hover-bg: var(--theme-color-background-hover, #d0d0d0);\n\t--pict-modal-btn-primary-bg: var(--theme-color-brand-primary, #2563eb);\n\t--pict-modal-btn-primary-fg: var(--theme-color-text-on-brand, #ffffff);\n\t--pict-modal-btn-primary-hover-bg:var(--theme-color-brand-primary-hover,#1d4ed8);\n\t--pict-modal-btn-danger-bg: var(--theme-color-status-error, #dc2626);\n\t--pict-modal-btn-danger-fg: var(--theme-color-text-on-brand, #ffffff);\n\t--pict-modal-btn-danger-hover-bg: var(--theme-color-status-error, #b91c1c);\n\t--pict-modal-btn-border-radius: 4px;\n\n\t/* Toast */\n\t--pict-modal-toast-bg: var(--theme-color-background-panel, #333333);\n\t--pict-modal-toast-fg: var(--theme-color-text-primary, #ffffff);\n\t--pict-modal-toast-success-bg: var(--theme-color-status-success, #16a34a);\n\t--pict-modal-toast-warning-bg: var(--theme-color-status-warning, #d97706);\n\t--pict-modal-toast-error-bg: var(--theme-color-status-error, #dc2626);\n\t--pict-modal-toast-info-bg: var(--theme-color-status-info, #2563eb);\n\t--pict-modal-toast-border-radius: 6px;\n\t--pict-modal-toast-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);\n\n\t/* Tooltip */\n\t--pict-modal-tooltip-bg: var(--theme-color-background-tertiary,#1a1a1a);\n\t--pict-modal-tooltip-fg: var(--theme-color-text-primary, #ffffff);\n\t--pict-modal-tooltip-border-radius:4px;\n\t--pict-modal-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n\n\t/* Dropdown */\n\t--pict-modal-dropdown-bg: var(--theme-color-background-panel, #ffffff);\n\t--pict-modal-dropdown-fg: var(--theme-color-text-primary, #1a1a1a);\n\t--pict-modal-dropdown-border: var(--theme-color-border-default, #e0e0e0);\n\t--pict-modal-dropdown-border-radius: 6px;\n\t--pict-modal-dropdown-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);\n\t--pict-modal-dropdown-item-hover-bg: var(--theme-color-background-hover, rgba(37, 99, 235, 0.10));\n\t--pict-modal-dropdown-item-hover-fg: var(--theme-color-text-primary, #1a1a1a);\n\t--pict-modal-dropdown-item-disabled-fg: var(--theme-color-text-muted, #9aa0a6);\n\t--pict-modal-dropdown-separator: var(--theme-color-border-light, #e8e8e8);\n\t--pict-modal-dropdown-header-fg: var(--theme-color-text-secondary, #6b7280);\n\t--pict-modal-dropdown-danger-fg: var(--theme-color-status-error, #dc2626);\n\t--pict-modal-dropdown-primary-fg: var(--theme-color-brand-primary, #2563eb);\n\n\t/* Typography */\n\t--pict-modal-font-family: var(--theme-typography-family-sans, system-ui, -apple-system, sans-serif);\n\t--pict-modal-font-size: 14px;\n\t--pict-modal-title-font-size: 16px;\n\n\t/* Animation */\n\t--pict-modal-transition-duration: 200ms;\n}\n\n/* Overlay */\n.pict-modal-overlay\n{\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 1000;\n\tbackground: var(--pict-modal-overlay-bg);\n\topacity: 0;\n\ttransition: opacity var(--pict-modal-transition-duration) ease;\n}\n\n.pict-modal-overlay.pict-modal-visible\n{\n\topacity: 1;\n}\n\n/* Dialog */\n.pict-modal-dialog\n{\n\tposition: fixed;\n\tz-index: 1010;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%) translateY(-20px);\n\topacity: 0;\n\ttransition: opacity var(--pict-modal-transition-duration) ease,\n\t transform var(--pict-modal-transition-duration) ease;\n\n\tmax-width: 90vw;\n\tmax-height: 90vh;\n\tdisplay: flex;\n\tflex-direction: column;\n\n\tbackground: var(--pict-modal-bg);\n\tcolor: var(--pict-modal-fg);\n\tborder: 1px solid var(--pict-modal-border);\n\tborder-radius: var(--pict-modal-border-radius);\n\tbox-shadow: var(--pict-modal-shadow);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: var(--pict-modal-font-size);\n}\n\n.pict-modal-dialog.pict-modal-visible\n{\n\topacity: 1;\n\ttransform: translate(-50%, -50%) translateY(0);\n}\n\n/* Unbounded modifier \u2014 lets callers opt out of the 90vh/90vw viewport cap.\n Use with caution: content taller than the viewport will push buttons\n below the fold. */\n.pict-modal-dialog.pict-modal-dialog--unbounded\n{\n\tmax-height: none;\n\tmax-width: none;\n}\n\n.pict-modal-dialog-header\n{\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 12px 16px;\n\tbackground: var(--pict-modal-header-bg);\n\tcolor: var(--pict-modal-header-fg);\n\tborder-bottom: 1px solid var(--pict-modal-header-border);\n\tborder-radius: var(--pict-modal-border-radius) var(--pict-modal-border-radius) 0 0;\n}\n\n.pict-modal-dialog-title\n{\n\tfont-size: var(--pict-modal-title-font-size);\n\tfont-weight: 600;\n}\n\n.pict-modal-dialog-close\n{\n\tbackground: none;\n\tborder: none;\n\tfont-size: 20px;\n\tcursor: pointer;\n\tcolor: var(--pict-modal-fg);\n\tpadding: 0 4px;\n\tline-height: 1;\n\topacity: 0.6;\n}\n\n.pict-modal-dialog-close:hover\n{\n\topacity: 1;\n}\n\n.pict-modal-dialog-body\n{\n\tpadding: 16px;\n\toverflow-y: auto;\n\tflex: 1;\n}\n\n.pict-modal-dialog-footer\n{\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\tgap: 8px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid var(--pict-modal-border);\n}\n\n/* Buttons */\n.pict-modal-btn\n{\n\tpadding: 8px 16px;\n\tborder: none;\n\tborder-radius: var(--pict-modal-btn-border-radius);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: var(--pict-modal-font-size);\n\tcursor: pointer;\n\tbackground: var(--pict-modal-btn-bg);\n\tcolor: var(--pict-modal-btn-fg);\n\ttransition: background var(--pict-modal-transition-duration) ease;\n}\n\n.pict-modal-btn:hover\n{\n\tbackground: var(--pict-modal-btn-hover-bg);\n}\n\n.pict-modal-btn:disabled\n{\n\topacity: 0.5;\n\tcursor: not-allowed;\n}\n\n.pict-modal-btn--primary\n{\n\tbackground: var(--pict-modal-btn-primary-bg);\n\tcolor: var(--pict-modal-btn-primary-fg);\n}\n\n.pict-modal-btn--primary:hover\n{\n\tbackground: var(--pict-modal-btn-primary-hover-bg);\n}\n\n.pict-modal-btn--danger\n{\n\tbackground: var(--pict-modal-btn-danger-bg);\n\tcolor: var(--pict-modal-btn-danger-fg);\n}\n\n.pict-modal-btn--danger:hover\n{\n\tbackground: var(--pict-modal-btn-danger-hover-bg);\n}\n\n/* Double confirm input */\n.pict-modal-confirm-input\n{\n\twidth: 100%;\n\tpadding: 8px 12px;\n\tmargin-top: 12px;\n\tborder: 1px solid var(--pict-modal-border);\n\tborder-radius: var(--pict-modal-btn-border-radius);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: var(--pict-modal-font-size);\n\tbox-sizing: border-box;\n}\n\n.pict-modal-confirm-input:focus\n{\n\toutline: 2px solid var(--pict-modal-btn-primary-bg);\n\toutline-offset: -1px;\n}\n\n.pict-modal-confirm-prompt\n{\n\tmargin-top: 12px;\n\tfont-size: 13px;\n\tcolor: var(--pict-modal-fg);\n\topacity: 0.7;\n}\n\n/* Toast container */\n.pict-modal-toast-container\n{\n\tposition: fixed;\n\tz-index: 1030;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tpointer-events: none;\n\tmax-width: 400px;\n}\n\n.pict-modal-toast-container--top-right\n{\n\ttop: 16px;\n\tright: 16px;\n}\n\n.pict-modal-toast-container--top-left\n{\n\ttop: 16px;\n\tleft: 16px;\n}\n\n.pict-modal-toast-container--bottom-right\n{\n\tbottom: 16px;\n\tright: 16px;\n}\n\n.pict-modal-toast-container--bottom-left\n{\n\tbottom: 16px;\n\tleft: 16px;\n}\n\n.pict-modal-toast-container--top-center\n{\n\ttop: 16px;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n}\n\n.pict-modal-toast-container--bottom-center\n{\n\tbottom: 16px;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n}\n\n/* Toast */\n.pict-modal-toast\n{\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tpadding: 12px 16px;\n\tborder-radius: var(--pict-modal-toast-border-radius);\n\tbox-shadow: var(--pict-modal-toast-shadow);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: var(--pict-modal-font-size);\n\tbackground: var(--pict-modal-toast-bg);\n\tcolor: var(--pict-modal-toast-fg);\n\tpointer-events: auto;\n\topacity: 0;\n\ttransform: translateX(100%);\n\ttransition: opacity var(--pict-modal-transition-duration) ease,\n\t transform var(--pict-modal-transition-duration) ease;\n}\n\n.pict-modal-toast.pict-modal-visible\n{\n\topacity: 1;\n\ttransform: translateX(0);\n}\n\n.pict-modal-toast.pict-modal-toast-exit\n{\n\topacity: 0;\n\ttransform: translateX(100%);\n}\n\n.pict-modal-toast--info\n{\n\tbackground: var(--pict-modal-toast-info-bg);\n}\n\n.pict-modal-toast--success\n{\n\tbackground: var(--pict-modal-toast-success-bg);\n}\n\n.pict-modal-toast--warning\n{\n\tbackground: var(--pict-modal-toast-warning-bg);\n}\n\n.pict-modal-toast--error\n{\n\tbackground: var(--pict-modal-toast-error-bg);\n}\n\n.pict-modal-toast-message\n{\n\tflex: 1;\n}\n\n.pict-modal-toast-dismiss\n{\n\tbackground: none;\n\tborder: none;\n\tcolor: inherit;\n\tfont-size: 18px;\n\tcursor: pointer;\n\tpadding: 0 2px;\n\tline-height: 1;\n\topacity: 0.7;\n}\n\n.pict-modal-toast-dismiss:hover\n{\n\topacity: 1;\n}\n\n/* Tooltip */\n.pict-modal-tooltip\n{\n\tposition: fixed;\n\tz-index: 1020;\n\tpadding: 6px 10px;\n\tborder-radius: var(--pict-modal-tooltip-border-radius);\n\tbox-shadow: var(--pict-modal-tooltip-shadow);\n\tbackground: var(--pict-modal-tooltip-bg);\n\tcolor: var(--pict-modal-tooltip-fg);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: 13px;\n\tpointer-events: none;\n\topacity: 0;\n\ttransition: opacity var(--pict-modal-transition-duration) ease;\n\twhite-space: normal;\n\tword-wrap: break-word;\n}\n\n.pict-modal-tooltip.pict-modal-tooltip-interactive\n{\n\tpointer-events: auto;\n}\n\n.pict-modal-tooltip.pict-modal-visible\n{\n\topacity: 1;\n}\n\n.pict-modal-tooltip-arrow\n{\n\tposition: absolute;\n\twidth: 8px;\n\theight: 8px;\n\tbackground: var(--pict-modal-tooltip-bg);\n\ttransform: rotate(45deg);\n}\n\n.pict-modal-tooltip--top .pict-modal-tooltip-arrow\n{\n\tbottom: -4px;\n\tleft: 50%;\n\tmargin-left: -4px;\n}\n\n.pict-modal-tooltip--bottom .pict-modal-tooltip-arrow\n{\n\ttop: -4px;\n\tleft: 50%;\n\tmargin-left: -4px;\n}\n\n.pict-modal-tooltip--left .pict-modal-tooltip-arrow\n{\n\tright: -4px;\n\ttop: 50%;\n\tmargin-top: -4px;\n}\n\n.pict-modal-tooltip--right .pict-modal-tooltip-arrow\n{\n\tleft: -4px;\n\ttop: 50%;\n\tmargin-top: -4px;\n}\n\n/* \u2500\u2500 Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Anchor-positioned menu (no overlay). Used for nav menus and\n \"split button\" addenda \u2014 see Pict-Modal-Dropdown.js.\n*/\n.pict-modal-dropdown\n{\n\tposition: fixed;\n\tz-index: 1025;\n\tmin-width: 160px;\n\tmax-width: 360px;\n\tmax-height: 60vh;\n\toverflow-y: auto;\n\tbackground: var(--pict-modal-dropdown-bg);\n\tcolor: var(--pict-modal-dropdown-fg);\n\tborder: 1px solid var(--pict-modal-dropdown-border);\n\tborder-radius: var(--pict-modal-dropdown-border-radius);\n\tbox-shadow: var(--pict-modal-dropdown-shadow);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: var(--pict-modal-font-size);\n\tpadding: 4px 0;\n\topacity: 0;\n\ttransform: translateY(-4px);\n\ttransition: opacity var(--pict-modal-transition-duration) ease,\n\t transform var(--pict-modal-transition-duration) ease;\n}\n\n.pict-modal-dropdown.pict-modal-dropdown--above { transform: translateY(4px); }\n\n.pict-modal-dropdown.pict-modal-visible\n{\n\topacity: 1;\n\ttransform: translateY(0);\n}\n\n.pict-modal-dropdown-item\n{\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 7px 14px;\n\tcursor: pointer;\n\tuser-select: none;\n\tcolor: inherit;\n\toutline: none;\n}\n\n.pict-modal-dropdown-item:hover,\n.pict-modal-dropdown-item:focus\n{\n\tbackground: var(--pict-modal-dropdown-item-hover-bg);\n\tcolor: var(--pict-modal-dropdown-item-hover-fg);\n}\n\n.pict-modal-dropdown-item--disabled\n{\n\tcursor: not-allowed;\n\tcolor: var(--pict-modal-dropdown-item-disabled-fg);\n}\n\n.pict-modal-dropdown-item--disabled:hover,\n.pict-modal-dropdown-item--disabled:focus\n{\n\tbackground: transparent;\n\tcolor: var(--pict-modal-dropdown-item-disabled-fg);\n}\n\n.pict-modal-dropdown-item--primary { color: var(--pict-modal-dropdown-primary-fg); }\n.pict-modal-dropdown-item--danger { color: var(--pict-modal-dropdown-danger-fg); }\n\n.pict-modal-dropdown-item-icon\n{\n\tflex: 0 0 auto;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 16px;\n\theight: 16px;\n}\n\n.pict-modal-dropdown-item-icon svg { width: 100%; height: 100%; display: block; }\n\n.pict-modal-dropdown-item-label { flex: 1 1 auto; min-width: 0; }\n\n.pict-modal-dropdown-item-hint\n{\n\tflex: 0 0 auto;\n\tfont-size: 11px;\n\topacity: 0.6;\n\tmargin-left: 12px;\n}\n\n.pict-modal-dropdown-separator\n{\n\theight: 1px;\n\tbackground: var(--pict-modal-dropdown-separator);\n\tmargin: 4px 0;\n}\n\n.pict-modal-dropdown-header\n{\n\tpadding: 6px 14px 2px;\n\tfont-size: 11px;\n\tfont-weight: 600;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.04em;\n\tcolor: var(--pict-modal-dropdown-header-fg);\n}\n\n/* \u2500\u2500 Resizable / Collapsible Panels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pict-panel\n{\n\tposition: relative;\n\ttransition: width 0.2s ease;\n\tflex-shrink: 0;\n\toverflow: visible;\n}\n.pict-panel-collapsed\n{\n\twidth: 0 !important;\n\tmin-width: 0 !important;\n\toverflow: visible;\n}\n.pict-panel-collapsed > *:not(.pict-panel-edge)\n{\n\tdisplay: none;\n}\n\n/* Edge container \u2014 zero-width flex sibling of the panel.\n Sits next to the panel in the flex layout; children\n use absolute positioning to overlap the panel boundary. */\n.pict-panel-edge\n{\n\tposition: relative;\n\twidth: 0;\n\tflex-shrink: 0;\n\tz-index: 50;\n\toverflow: visible;\n}\n\n/* Resize handle \u2014 thin strip on the panel boundary */\n.pict-panel-resize\n{\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\twidth: 4px;\n\tcursor: col-resize;\n\tbackground: transparent;\n\ttransition: background 0.15s, width 0.15s;\n}\n.pict-panel-edge-right .pict-panel-resize\n{\n\tright: 0;\n\tborder-right: 1px solid var(--pict-panel-border, #DDD6CA);\n}\n.pict-panel-edge-left .pict-panel-resize\n{\n\tleft: 0;\n\tborder-left: 1px solid var(--pict-panel-border, #DDD6CA);\n}\n.pict-panel-resize:hover,\n.pict-panel-edge:hover .pict-panel-resize\n{\n\twidth: 5px;\n\tbackground: var(--pict-panel-accent, #2E7D74);\n\topacity: 0.5;\n}\n.pict-panel-resize.dragging\n{\n\twidth: 5px;\n\tbackground: var(--pict-panel-accent, #2E7D74);\n\topacity: 1;\n\ttransition: none;\n}\n.pict-panel-edge-collapsed .pict-panel-resize\n{\n\tdisplay: none;\n}\n\n/* Collapse tab \u2014 tucked sliver at rest, slides out on hover */\n.pict-panel-tab\n{\n\tposition: absolute;\n\ttop: 8px;\n\twidth: 8px;\n\theight: 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\tbackground: var(--pict-panel-border, #DDD6CA);\n\tborder: 1px solid var(--pict-panel-border, #DDD6CA);\n\tcursor: pointer;\n\tcolor: var(--pict-panel-fg, #8A7F72);\n\tfont-size: 10px;\n\tline-height: 1;\n\topacity: 0.5;\n\ttransition: opacity 0.25s, width 0.2s ease, height 0.2s ease, left 0.2s ease, right 0.2s ease, background 0.2s;\n\tz-index: 51;\n}\n.pict-panel-edge:hover .pict-panel-tab,\n.pict-panel-tab:hover\n{\n\twidth: 20px;\n\theight: 32px;\n\topacity: 1;\n\toverflow: visible;\n\tbackground: var(--pict-panel-bg, #FAF8F4);\n}\n/* Right panel: tab to the left of the edge */\n.pict-panel-edge-right .pict-panel-tab\n{\n\tright: 0;\n\tborder-right: none;\n\tborder-radius: 4px 0 0 4px;\n}\n.pict-panel-edge-right:hover .pict-panel-tab,\n.pict-panel-edge-right .pict-panel-tab:hover\n{\n\tright: 0;\n}\n/* Left panel: tab to the right of the edge */\n.pict-panel-edge-left .pict-panel-tab\n{\n\tleft: 0;\n\tborder-left: none;\n\tborder-radius: 0 4px 4px 0;\n}\n.pict-panel-edge-left:hover .pict-panel-tab,\n.pict-panel-edge-left .pict-panel-tab:hover\n{\n\tleft: 0;\n}\n/* When collapsed \u2014 more visible */\n.pict-panel-edge-collapsed .pict-panel-tab\n{\n\twidth: 10px;\n\theight: 28px;\n\topacity: 0.6;\n}\n.pict-panel-edge-collapsed .pict-panel-tab:hover,\n.pict-panel-edge-collapsed:hover .pict-panel-tab\n{\n\twidth: 20px;\n\theight: 32px;\n\topacity: 1;\n\toverflow: visible;\n\tbackground: var(--pict-panel-bg, #FAF8F4);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Pict-Modal-Shell \u2014 viewport-managing layout for top / right /\n * bottom / left panels around a center.\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pict-modal-shell-host { display: block; height: 100%; min-height: 0; }\n.pict-modal-shell\n{\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 0;\n\tposition: relative;\n\tcolor: var(--pict-modal-fg, var(--theme-color-text-primary, #1a1a1a));\n\tbackground: var(--theme-color-background-primary, transparent);\n}\n.pict-modal-shell-row { display: flex; min-width: 0; min-height: 0; }\n/* \"First added = at the edge\" convention is held by reversing the\n flex-direction on the bottom row + right side. That way, for ALL\n four sides, calling addPanel() N times stacks panel #1 against\n the viewport edge, panel #2 just inside it, panel #3 further in,\n and so on. Without these reverses, top + left worked that way but\n bottom + right inverted (first-added at content side, last-added\n at edge), which surprised callers. */\n.pict-modal-shell-row-top { flex: 0 0 auto; flex-direction: column; }\n.pict-modal-shell-row-bottom { flex: 0 0 auto; flex-direction: column-reverse; }\n.pict-modal-shell-row-middle\n{\n\tflex: 1 1 0;\n\tflex-direction: row;\n\tmin-height: 0;\n\tposition: relative;\n}\n.pict-modal-shell-side\n{\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\tmin-height: 0;\n}\n.pict-modal-shell-side-left { flex-direction: row; }\n.pict-modal-shell-side-right { flex-direction: row-reverse; }\n.pict-modal-shell-center\n{\n\tflex: 1 1 0;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: auto;\n\tposition: relative;\n}\n.pict-modal-shell-center-content\n{\n\tmin-height: 100%;\n}\n\n/* Panels \u2014 base */\n.pict-modal-shell-panel\n{\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbox-sizing: border-box;\n\tbackground: var(--pict-modal-bg, var(--theme-color-background-panel, #ffffff));\n\tcolor: inherit;\n\tmin-width: 0;\n\tmin-height: 0;\n\ttransition: width 140ms ease, height 140ms ease;\n}\n.pict-modal-shell-panel-content\n{\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: auto;\n}\n.pict-modal-shell-panel-content-inner\n{\n\tmin-height: 100%;\n}\n/* Panel boundary \u2014 fixed-mode panels get a hairline border for explicit\n demarcation. Collapsible / resizable panels DROP the boundary border\n (background contrast separates them from the center anyway) so the\n collapse tab can pull out cleanly without a hairline cutting across\n it. The host stylesheet still gets full control via the panel's own\n background. */\n.pict-modal-shell-panel-mode-fixed.pict-modal-shell-panel-top { border-bottom: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #e0e0e0)); }\n.pict-modal-shell-panel-mode-fixed.pict-modal-shell-panel-bottom { border-top: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #e0e0e0)); }\n.pict-modal-shell-panel-mode-fixed.pict-modal-shell-panel-left { border-right: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #e0e0e0)); }\n.pict-modal-shell-panel-mode-fixed.pict-modal-shell-panel-right { border-left: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #e0e0e0)); }\n\n/* Resize handle \u2014 absolute on the inner edge of each panel. */\n.pict-modal-shell-panel-resize-handle\n{\n\tposition: absolute;\n\tbackground: transparent;\n\tz-index: 5;\n\ttransition: background-color 120ms ease;\n}\n/* Resize handle hover \u2014 use the active brand's mode-aware primary\n color (set by pict-section-theme's Brand provider as\n --brand-color-primary-mode) so the resize affordance picks up the\n app's wordmark color. Falls back to the theme's brand-primary\n token if no brand is registered. */\n.pict-modal-shell-panel-resize-handle:hover\n{\n\tbackground: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\topacity: 0.4;\n}\n.pict-modal-shell-panel-left .pict-modal-shell-panel-resize-handle { right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; }\n.pict-modal-shell-panel-right .pict-modal-shell-panel-resize-handle { left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; }\n.pict-modal-shell-panel-top .pict-modal-shell-panel-resize-handle { bottom:-3px; left: 0; right: 0; height: 6px; cursor: row-resize; }\n.pict-modal-shell-panel-bottom .pict-modal-shell-panel-resize-handle { top: -3px; left: 0; right: 0; height: 6px; cursor: row-resize; }\n\n/* Collapse tab \u2014 slim sliver flush on the panel's OUTER boundary\n (where the resize handle sits), modelled on retold-content-system's\n sidebar tab. At rest it's a 6\xD728 px sliver; hover expands to\n 18\xD736 px without overlapping the panel's own content. The tab is\n positioned with its center on the boundary so half pokes into the\n adjacent area \u2014 the only place we can safely take over without\n stepping on app UI inside the panel. Title text only renders in the\n collapsed state where there's room for it. */\n.pict-modal-shell-panel-collapse-tab\n{\n\tposition: absolute;\n\tdisplay: flex; /* not inline-flex \u2014 avoids baseline alignment quirks */\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\tborder: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #d0d7de));\n\tbackground: var(--pict-modal-bg, var(--theme-color-background-panel, #ffffff));\n\tcolor: var(--theme-color-text-muted, #6b7280);\n\tfont: inherit;\n\tfont-size: 10px;\n\tletter-spacing: 0.4px;\n\ttext-transform: uppercase;\n\tcursor: pointer;\n\tz-index: 50;\n\topacity: 0.55;\n\tpadding: 0;\n\tbox-sizing: border-box;\n\tline-height: 0; /* keep child boxes from inflating around the rotated chevron */\n\ttransition: opacity 160ms ease, width 160ms ease, height 160ms ease,\n\t background-color 160ms ease, color 160ms ease,\n\t border-color 160ms ease, box-shadow 160ms ease;\n}\n/* Hover state pulls accent color from the active brand (mode-aware,\n so it's legible in both light + dark) with theme brand-primary as\n fallback. The whole point of brand colors is that they show up\n across the app's chrome. */\n.pict-modal-shell-panel-collapse-tab:hover,\n.pict-modal-shell-panel:hover > .pict-modal-shell-panel-collapse-tab\n{\n\topacity: 1;\n\tcolor: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\tborder-color: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n}\n/* Drop shadow casts AWAY from the panel so the tab feels pulled out\n (extension of the panel) rather than floating across the boundary. */\n.pict-modal-shell-panel-left:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-left > .pict-modal-shell-panel-collapse-tab:hover { box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.18); }\n.pict-modal-shell-panel-right:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-right > .pict-modal-shell-panel-collapse-tab:hover { box-shadow: -3px 0 6px -2px rgba(0, 0, 0, 0.18); }\n.pict-modal-shell-panel-top:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-top > .pict-modal-shell-panel-collapse-tab:hover { box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.18); }\n.pict-modal-shell-panel-bottom:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-bottom > .pict-modal-shell-panel-collapse-tab:hover { box-shadow: 0 -3px 6px -2px rgba(0, 0, 0, 0.18); }\n\n/* Side panels: slim VERTICAL sliver pulled OUT of the panel's outer\n boundary like a drawer tab. The inner edge is anchored AT the panel\n boundary (with a 1px overlap so the tab visually merges with the\n panel's own background \u2014 no hairline gap). The tab grows OUTWARD\n only on hover; the inner edge stays put so the tab always looks\n like an extension of the panel rather than a floating button.\n Border-left is removed for left panels (and border-right for right\n panels) so the panel-facing edge is open. */\n.pict-modal-shell-panel-left > .pict-modal-shell-panel-collapse-tab\n{\n\t/* width 6, right: -5px \u2192 tab spans (panelRight - 1) to (panelRight + 5).\n\t The 1px overlap into the panel is what makes it look attached. */\n\tright: -5px; top: 14px; width: 6px; height: 28px;\n\tborder-radius: 0 4px 4px 0;\n\tborder-left: 0;\n}\n.pict-modal-shell-panel-right > .pict-modal-shell-panel-collapse-tab\n{\n\tleft: -5px; top: 14px; width: 6px; height: 28px;\n\tborder-radius: 4px 0 0 4px;\n\tborder-right: 0;\n}\n/* Hover: same inner anchor (panelRight - 1), tab grows outward to\n width 18 \u2192 right: -17px. Top + height grow downward only (top\n stays, height extends so the tab visually 'drops' the chevron\n into view). */\n.pict-modal-shell-panel-left:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-left > .pict-modal-shell-panel-collapse-tab:hover\n{\n\twidth: 18px; height: 36px; right: -17px;\n}\n.pict-modal-shell-panel-right:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-right > .pict-modal-shell-panel-collapse-tab:hover\n{\n\twidth: 18px; height: 36px; left: -17px;\n}\n\n/* Top / bottom panels: slim HORIZONTAL sliver pulled OUT of the\n horizontal boundary, anchored 14 px in from the right. Same\n inner-edge-anchored / 1 px overlap pattern as the side panels. */\n.pict-modal-shell-panel-top > .pict-modal-shell-panel-collapse-tab\n{\n\tbottom: -5px; right: 14px; width: 28px; height: 6px;\n\tborder-radius: 0 0 4px 4px;\n\tborder-top: 0;\n}\n.pict-modal-shell-panel-bottom > .pict-modal-shell-panel-collapse-tab\n{\n\ttop: -5px; right: 14px; width: 28px; height: 6px;\n\tborder-radius: 4px 4px 0 0;\n\tborder-bottom: 0;\n}\n.pict-modal-shell-panel-top:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-top > .pict-modal-shell-panel-collapse-tab:hover\n{\n\twidth: 36px; height: 18px; bottom: -17px;\n}\n.pict-modal-shell-panel-bottom:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-bottom > .pict-modal-shell-panel-collapse-tab:hover\n{\n\twidth: 36px; height: 18px; top: -17px;\n}\n\n.pict-modal-shell-panel-collapse-tab-title { display: none; white-space: nowrap; }\n\n/* Auto-generated chevron glyph inside the tab \u2014 only visible once the\n tab is wide / tall enough to show it (i.e. hover state, or when the\n panel is collapsed). Direction follows side + state.\n Sized 5\xD75 (down from 6) so even with rotation the visual stays\n well clear of the tab's overflow:hidden bounds at 18\xD736 hover and\n the 24px collapsed tab strip width. flex-shrink:0 ensures the\n pseudo never collapses to zero in tight tab dimensions. */\n.pict-modal-shell-panel-collapse-tab::before\n{\n\tcontent: '';\n\tdisplay: block;\n\twidth: 5px; height: 5px;\n\tflex-shrink: 0;\n\topacity: 0;\n\tborder-right: 1.5px solid currentColor;\n\tborder-bottom: 1.5px solid currentColor;\n\ttransform: rotate(135deg);\n\ttransform-origin: center center;\n\ttransition: opacity 160ms ease, transform 160ms ease;\n}\n.pict-modal-shell-panel:hover > .pict-modal-shell-panel-collapse-tab::before,\n.pict-modal-shell-panel-collapse-tab:hover::before,\n.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before\n{\n\topacity: 1;\n}\n.pict-modal-shell-panel-right > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(-45deg); }\n.pict-modal-shell-panel-top > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(-135deg); }\n.pict-modal-shell-panel-bottom > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(45deg); }\n.pict-modal-shell-panel-left.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(-45deg); }\n.pict-modal-shell-panel-right.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(135deg); }\n.pict-modal-shell-panel-top.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(45deg); }\n.pict-modal-shell-panel-bottom.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(-135deg); }\n\n/* Collapsed state \u2014 content disappears, only the collapse tab remains. */\n.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-content\n{\n\tdisplay: none;\n}\n.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-resize-handle\n{\n\tdisplay: none;\n}\n.pict-modal-shell-panel-left.pict-modal-shell-panel-collapsed,\n.pict-modal-shell-panel-right.pict-modal-shell-panel-collapsed\n{\n\t/* When collapsed, side panels rotate the title for vertical reading. */\n\toverflow: hidden;\n}\n/* When collapsed: the entire panel becomes the tab strip \u2014 full width\n for sides, full height for top/bottom \u2014 with the title visible\n vertically (sides) or horizontally (top/bottom). The little sliver\n tab on the boundary disappears (we don't need it anymore \u2014 clicking\n anywhere on the panel toggles it back open). */\n.pict-modal-shell-panel-left.pict-modal-shell-panel-collapsed,\n.pict-modal-shell-panel-right.pict-modal-shell-panel-collapsed,\n.pict-modal-shell-panel-top.pict-modal-shell-panel-collapsed,\n.pict-modal-shell-panel-bottom.pict-modal-shell-panel-collapsed\n{\n\toverflow: hidden;\n}\n.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab\n{\n\t/* Promote the tab to FILL the collapsed panel (not just hug its\n\t content) so the centered chevron + title group sits in the middle\n\t of the panel. Without explicit width/height: 100%, the position:\n\t absolute element shrinks to its natural content size and the\n\t group ends up flush at the top of the panel \u2014 where the chevron\n\t gets clipped by the topbar. */\n\tposition: absolute !important;\n\ttop: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;\n\twidth: 100% !important;\n\theight: 100% !important;\n\tborder: 0;\n\tborder-radius: 0;\n\tbackground: transparent;\n\topacity: 0.85;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tpadding: 12px 4px; /* keeps chevron + title clear of edges */\n\tbox-shadow: none;\n\tcolor: var(--theme-color-text-muted, #6b7280);\n\tbox-sizing: border-box;\n\toverflow: hidden;\n}\n.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab:hover\n{\n\tbackground: var(--theme-color-background-hover, var(--pict-modal-bg, #fff));\n\tcolor: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\tbox-shadow: none;\n}\n/* Side panels (collapsed): rotate the title for vertical reading. */\n.pict-modal-shell-panel-left.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-right.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab\n{\n\twriting-mode: vertical-rl;\n\ttext-orientation: mixed;\n}\n.pict-modal-shell-panel-collapsed .pict-modal-shell-panel-collapse-tab-title\n{\n\tdisplay: inline;\n}\n\n/* Hidden panels \u2014 when Hidden:true is passed to addPanel, the collapsed\n state has zero footprint: no collapse tab (the tab is never built),\n the panel root is display:none, and the resize handle vanishes. The\n only path to the open state is a programmatic expand()/toggle() from\n somewhere else in the app (e.g. a topbar gear button). When expanded,\n the panel renders normally \u2014 so resize/drag handles continue to work\n while the panel is open. */\n.pict-modal-shell-panel-hidden.pict-modal-shell-panel-collapsed\n{\n\tdisplay: none !important;\n}\n\n/* Overlay panels \u2014 float over the middle row instead of taking layout\n space. The overlay layer is positioned absolutely inside the middle\n row; individual overlay panels stack with positive z-index. */\n.pict-modal-shell-overlay-layer\n{\n\tposition: absolute;\n\tinset: 0;\n\tpointer-events: none;\n\tz-index: 10;\n}\n.pict-modal-shell-overlay-layer .pict-modal-shell-panel\n{\n\tpointer-events: auto;\n\tposition: absolute;\n\tbox-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);\n}\n.pict-modal-shell-overlay-layer .pict-modal-shell-panel-left { left: 0; top: 0; bottom: 0; }\n.pict-modal-shell-overlay-layer .pict-modal-shell-panel-right { right: 0; top: 0; bottom: 0; }\n.pict-modal-shell-overlay-layer .pict-modal-shell-panel-top { top: 0; left: 0; right: 0; }\n.pict-modal-shell-overlay-layer .pict-modal-shell-panel-bottom { bottom: 0; left: 0; right: 0; }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Responsive drawer mode \u2014 .pict-modal-shell-drawer-active toggles\n onto the middle row when any panel with ResponsiveDrawer crosses\n below its breakpoint. Flips the row's flex-direction from row to\n column, stacking side panels above the center and stretching them\n to full width. Each opted-in panel itself gets the\n .pict-modal-shell-panel-drawer class so per-panel rules below\n target only the drawer-mode panels (right + non-drawer panels in\n the same row are unaffected). The drawer height is read from a\n per-panel --pict-modal-drawer-height CSS variable (default\n 33vh, set in JS from the DrawerHeight option).\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pict-modal-shell-row-middle.pict-modal-shell-drawer-active\n{\n\tflex-direction: column;\n\t/* The drawer tab lives outside the drawer's bottom edge \u2014 ancestor\n\t chain MUST allow it to escape clip. */\n\toverflow: visible;\n}\n.pict-modal-shell-row-middle.pict-modal-shell-drawer-active .pict-modal-shell-side\n{\n\t/* Side stacks stretch full-width and lay out their panels as a\n\t horizontal row of stacked drawers (so two drawers from the same\n\t side don't end up overlapping). overflow: visible so the\n\t per-panel tab can extend below the side stack into the workspace. */\n\twidth: 100% !important;\n\tflex-direction: column;\n\toverflow: visible;\n}\n/* The drawer-tagged panel itself: kill the inline width set by\n _applySize (we override with !important since the inline style has\n higher specificity than a class selector), then size by height\n from the CSS variable. Resize handle is hidden in drawer mode\n because horizontal dragging doesn't translate to vertical sizing\n and the user already has the collapse tab to dismiss / restore.\n\n padding-bottom reserves an 18px strip at the bottom of the panel\n for the tab. The tab sits INSIDE the drawer's footprint \u2014 never\n below it \u2014 so the workspace header below the drawer is never in\n the same vertical band as the tab. (Previously the tab hung\n below the drawer's bottom edge into the workspace's top padding;\n that made the tab visually compete with the workspace header,\n even when the tab box-model bounds technically cleared the\n header.) box-sizing: border-box so the padding eats from the\n 33vh, not adding to it. */\n.pict-modal-shell-panel-drawer\n{\n\twidth: 100% !important;\n\tmax-width: 100% !important;\n\theight: var(--pict-modal-drawer-height, 33vh);\n\ttransition: height 140ms ease;\n\tpadding-bottom: 18px;\n\tbox-sizing: border-box;\n\toverflow: visible !important;\n\t/* Clip the panel bg to its CONTENT area only \u2014 the 18px\n\t padding-bottom reserve (where the tab lives) becomes\n\t transparent, so the middle row's primary background shows\n\t through. Without this the reserve would render with the\n\t panel's chrome bg, creating a visible \"strip\" between the\n\t drawer content above and the workspace below \u2014 the tab would\n\t look like it's sitting on its own miscoloured band rather\n\t than at the seam between drawer and workspace. */\n\tbackground-clip: content-box;\n}\n.pict-modal-shell-panel-drawer.pict-modal-shell-panel-collapsed\n{\n\t/* Collapsed = \"just the tab strip is visible\". 18px matches the\n\t panel's tab reserve so the height is consistent across states.\n\t When this is 0 the tab would have nowhere to render and the\n\t user couldn't reopen the drawer. */\n\theight: 18px !important;\n\tpadding-bottom: 0 !important;\n\t/* Drop the panel's bg in collapsed state \u2014 without this the 18px\n\t strip shows the --pict-modal-bg (panel chrome) which doesn't\n\t match the workspace --theme-color-background-primary below it,\n\t creating a visible \"drawer band\" around the tab that breaks the\n\t illusion of the tab belonging to the workspace area. With\n\t transparent bg the middle row's primary background shows\n\t through, the strip blends with the workspace, and the tab pill\n\t reads as a free-floating handle. */\n\tbackground: transparent !important;\n}\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-resize-handle\n{\n\tdisplay: none;\n}\n/* The drawer's collapse tab is a horizontal pill protruding from the\n bottom of the drawer (rather than the inner edge of a side panel).\n Override the side-panel positioning rules from above so the tab\n always sits at the drawer's bottom-center seam, in both expanded\n and collapsed states. The expand-from-zero affordance: when\n collapsed (height: 0), the tab still hangs below \"where the\n drawer would be\" \u2014 a small handle the user can click to pull\n the drawer back down. */\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-drawer.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab\n{\n\tposition: absolute !important;\n\t/* Anchored to the panel's BOTTOM edge \u2014 the tab lives INSIDE the\n\t drawer's footprint (in the 18px reserve at the bottom), never\n\t below it into the workspace. This means the workspace below\n\t the drawer is never sharing a vertical band with the tab, so\n\t the workspace header doesn't optically compete with it.\n\t bottom: 4px aligns the tab's top edge exactly with the panel's\n\t CONTENT-AREA bottom (panel.height \u2212 padding-bottom 18px). With\n\t border-top: 0 on the tab, the seam between the drawer content\n\t above and the tab body is invisible \u2014 they share --pict-modal-bg\n\t and merge into one shape, the tab reading as a labelled\n\t extension of the drawer hanging downward. Collapsed state\n\t keeps the smaller offset (overridden below) because its panel\n\t has no padding-bottom, so the math doesn't apply. */\n\ttop: auto !important;\n\tbottom: 4px !important;\n\tleft: 50% !important;\n\tright: auto !important;\n\ttransform: translate(-50%, 0) !important;\n\twidth: 64px !important;\n\theight: 14px !important;\n\t/* CRITICAL: border-box + padding: 0 \u2014 the collapsed-state base\n\t rule inherits \"padding: 12px 4px\" (so the chevron clears the\n\t edges of a tab that fills a 24px-wide side strip). In drawer\n\t mode the tab is a 14px tall pill, NOT a strip-fill, so that\n\t 12px vertical padding would balloon the tab's outer height to\n\t ~38px and crash into the workspace header text. The chevron\n\t is centered via flex anyway. */\n\tbox-sizing: border-box !important;\n\tpadding: 0 !important;\n\t/* Rounded BOTTOM corners + no top border \u2014 the tab looks like a\n\t traditional drawer-handle/tab hanging from above. Its rounded\n\t bottom curves face the workspace (the \"open downward\" affordance\n\t for a top drawer). border-top: 0 lets the tab visually merge\n\t with whatever's directly above it inside the panel (sidebar\n\t content when expanded, the panel background when collapsed). */\n\tborder-radius: 0 0 8px 8px;\n\tborder: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #cfd5dd));\n\tborder-top: 0;\n\tbackground: var(--pict-modal-bg, var(--theme-color-background-panel, #fff));\n\topacity: 0.95;\n\tz-index: 20;\n\t/* The default side-panel hover-grow values would yank the tab off\n\t to the wrong spot in drawer mode \u2014 neutralise. */\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-collapse-tab:hover,\n.pict-modal-shell-panel-drawer.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab:hover\n{\n\topacity: 1;\n\twidth: 96px !important;\n\t/* height stays at 14px \u2014 the tab is anchored with bottom, so any\n\t height growth would push the tab's TOP edge UPWARD past the\n\t space available above it. In EXPANDED state that crashes into\n\t the drawer content above; in COLLAPSED state it crashes into\n\t the topbar's brand stripes. Width-only growth (64 to 96, +50%)\n\t still gives the \"tab is reaching toward me\" affordance without\n\t the encroachment. */\n\tcolor: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\tborder-color: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\tbox-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.18);\n}\n/* Collapsed-state bottom-offset override. Expanded panels have an\n 18px padding-bottom reserve, and \"bottom: 4px\" anchors the tab's\n top edge exactly at the content-area boundary (so it merges\n visually with the drawer above). Collapsed panels have\n padding-bottom: 0 and a total height of 18px \u2014 \"bottom: 4px\"\n there would put the tab's top at the panel's actual top edge,\n crashing the (border-top: 0) tab into the topbar. The smaller\n \"bottom: 2px\" keeps the 14px tab vertically centered in the 18px\n strip with 2px margins on either side. */\n.pict-modal-shell-panel-drawer.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab\n{\n\tbottom: 2px !important;\n}\n/* Chevron inside the tab: point UP when expanded (the drawer\n collapses UP / out of view, so the arrow indicates \"click me to\n send the drawer up\"), DOWN when collapsed (the drawer expands DOWN\n into view). Rotations come from the existing top-panel chevron\n table: rotate(-135deg) \u2192 UP arrow, rotate(45deg) \u2192 DOWN arrow. */\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-collapse-tab::before\n{\n\ttransform: rotate(-135deg) !important;\n}\n.pict-modal-shell-panel-drawer.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before\n{\n\ttransform: rotate(45deg) !important;\n}\n/* The collapse tab's existing title-text span is hidden when reduced\n to a pill \u2014 there's no horizontal room. The chevron alone reads\n correctly. */\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-collapse-tab .pict-modal-shell-panel-collapse-tab-title,\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-collapse-tab .pict-modal-shell-panel-collapse-tab-icon\n{\n\tdisplay: none;\n}\n\n/* Drag-active state \u2014 disable text selection + change cursor globally\n so resize feels solid even when the cursor briefly leaves the handle. */\n.pict-modal-shell-dragging-x, .pict-modal-shell-dragging-y { user-select: none; }\n.pict-modal-shell-dragging-x * { cursor: col-resize !important; }\n.pict-modal-shell-dragging-y * { cursor: row-resize !important; }\n\n/* Per-panel resize-active state \u2014 kills the panel's collapse/expand\n width/height transition for the duration of a drag. Without this,\n every pointermove starts a fresh 140 ms transition and the resize\n visibly lags behind the cursor (\"choppy\"). With it disabled the\n panel snaps to the new size on the same frame as the pointer, which\n feels native. */\n.pict-modal-shell-panel-resizing { transition: none !important; }\n.pict-modal-shell-panel-resizing > .pict-modal-shell-panel-resize-handle\n{\n\tbackground: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\topacity: 0.5;\n}\n\n/* Panel popup-attention flash \u2014 fires when popup() is called on an\n already-open panel. Brief brand-colored inset glow so the user sees\n that their click landed even though the panel didn't change shape.\n Class is added by the shell, auto-removed after ~700 ms. */\n@keyframes pict-modal-shell-panel-flash\n{\n\t0% { box-shadow: inset 0 0 0 0 transparent; }\n\t30% { box-shadow: inset 0 0 0 3px var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb)); }\n\t100% { box-shadow: inset 0 0 0 0 transparent; }\n}\n.pict-modal-shell-panel-flash\n{\n\tanimation: pict-modal-shell-panel-flash 600ms ease-out;\n}\n"};},{}],23:[function(require,module,exports){const libPictViewClass=require('pict-view');const libPictModalOverlay=require('./Pict-Modal-Overlay.js');const libPictModalConfirm=require('./Pict-Modal-Confirm.js');const libPictModalWindow=require('./Pict-Modal-Window.js');const libPictModalToast=require('./Pict-Modal-Toast.js');const libPictModalTooltip=require('./Pict-Modal-Tooltip.js');const libPictModalPanel=require('./Pict-Modal-Panel.js');const libPictModalDropdown=require('./Pict-Modal-Dropdown.js');const libPictModalShell=require('./Pict-Modal-Shell.js');const _DefaultConfiguration=require('./Pict-Section-Modal-DefaultConfiguration.js');class PictSectionModal extends libPictViewClass{constructor(pFable,pOptions,pServiceHash){let tmpOptions=Object.assign({},_DefaultConfiguration,pOptions);super(pFable,tmpOptions,pServiceHash);this._activeModals=[];this._activeTooltips=[];this._activeToasts=[];this._idCounter=0;this._overlay=new libPictModalOverlay(this);this._confirm=new libPictModalConfirm(this);this._window=new libPictModalWindow(this);this._toast=new libPictModalToast(this);this._tooltip=new libPictModalTooltip(this);this._panel=new libPictModalPanel(this);this._dropdown=new libPictModalDropdown(this);this._shell=new libPictModalShell(this);}onBeforeInitialize(){super.onBeforeInitialize();// Ensure the root class is on the body for CSS variable scoping
|
|
2482
|
+
*/_escapeHTML(pText){if(typeof pText!=='string'){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=PictModalWindow;},{}],23:[function(require,module,exports){module.exports={"AutoInitialize":true,"AutoRender":false,"AutoSolveWithApp":false,"ViewIdentifier":"Pict-Section-Modal","OverlayClickDismisses":true,"DefaultConfirmOptions":{"title":"Confirm","confirmLabel":"OK","cancelLabel":"Cancel","dangerous":false,"unbounded":false},"DefaultDoubleConfirmOptions":{"title":"Are you sure?","confirmLabel":"Confirm","cancelLabel":"Cancel","phrasePrompt":"Type \"{phrase}\" to confirm:","confirmPhrase":"","unbounded":false},"DefaultModalOptions":{"title":"","content":"","buttons":[],"closeable":true,"width":"480px","unbounded":false},"DefaultTooltipOptions":{"position":"top","delay":200,"maxWidth":"300px","interactive":false},"DefaultToastOptions":{"type":"info","duration":3000,"position":"top-right","dismissible":true},"DefaultPanelOptions":{"position":"right","width":340,"minWidth":200,"maxWidth":600,"collapsible":true,"collapsed":false,"persist":false,"persistKey":""},"Templates":[],"Renderables":[],"CSS":/*css*/"\n/* pict-section-modal */\n.pict-modal-root\n{\n\t/* Defaults are routed through pict-provider-theme tokens so apps\n\t using the theme provider get themed modals automatically. Each\n\t var() carries its original hex as the fallback so apps that don't\n\t install pict-provider-theme look exactly as before. Apps may\n\t still override any --pict-modal-* var directly to layer over the\n\t theme-driven defaults. */\n\n\t/* Overlay */\n\t--pict-modal-overlay-bg: rgba(0, 0, 0, 0.5);\n\n\t/* Dialog */\n\t--pict-modal-bg: var(--theme-color-background-panel, #ffffff);\n\t--pict-modal-fg: var(--theme-color-text-primary, #1a1a1a);\n\t--pict-modal-border: var(--theme-color-border-default, #e0e0e0);\n\t--pict-modal-border-radius: 8px;\n\t--pict-modal-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);\n\t--pict-modal-header-bg: var(--theme-color-background-secondary, #f5f5f5);\n\t--pict-modal-header-fg: var(--theme-color-text-primary, #1a1a1a);\n\t--pict-modal-header-border: var(--theme-color-border-default, #e0e0e0);\n\n\t/* Buttons */\n\t--pict-modal-btn-bg: var(--theme-color-background-secondary, #e0e0e0);\n\t--pict-modal-btn-fg: var(--theme-color-text-primary, #1a1a1a);\n\t--pict-modal-btn-hover-bg: var(--theme-color-background-hover, #d0d0d0);\n\t--pict-modal-btn-primary-bg: var(--theme-color-brand-primary, #2563eb);\n\t--pict-modal-btn-primary-fg: var(--theme-color-text-on-brand, #ffffff);\n\t--pict-modal-btn-primary-hover-bg:var(--theme-color-brand-primary-hover,#1d4ed8);\n\t--pict-modal-btn-danger-bg: var(--theme-color-status-error, #dc2626);\n\t--pict-modal-btn-danger-fg: var(--theme-color-text-on-brand, #ffffff);\n\t--pict-modal-btn-danger-hover-bg: var(--theme-color-status-error, #b91c1c);\n\t--pict-modal-btn-border-radius: 4px;\n\n\t/* Toast */\n\t--pict-modal-toast-bg: var(--theme-color-background-panel, #333333);\n\t--pict-modal-toast-fg: var(--theme-color-text-primary, #ffffff);\n\t--pict-modal-toast-success-bg: var(--theme-color-status-success, #16a34a);\n\t--pict-modal-toast-warning-bg: var(--theme-color-status-warning, #d97706);\n\t--pict-modal-toast-error-bg: var(--theme-color-status-error, #dc2626);\n\t--pict-modal-toast-info-bg: var(--theme-color-status-info, #2563eb);\n\t--pict-modal-toast-border-radius: 6px;\n\t--pict-modal-toast-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);\n\n\t/* Tooltip */\n\t--pict-modal-tooltip-bg: var(--theme-color-background-tertiary,#1a1a1a);\n\t--pict-modal-tooltip-fg: var(--theme-color-text-primary, #ffffff);\n\t--pict-modal-tooltip-border-radius:4px;\n\t--pict-modal-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n\n\t/* Dropdown */\n\t--pict-modal-dropdown-bg: var(--theme-color-background-panel, #ffffff);\n\t--pict-modal-dropdown-fg: var(--theme-color-text-primary, #1a1a1a);\n\t--pict-modal-dropdown-border: var(--theme-color-border-default, #e0e0e0);\n\t--pict-modal-dropdown-border-radius: 6px;\n\t--pict-modal-dropdown-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);\n\t--pict-modal-dropdown-item-hover-bg: var(--theme-color-background-hover, rgba(37, 99, 235, 0.10));\n\t--pict-modal-dropdown-item-hover-fg: var(--theme-color-text-primary, #1a1a1a);\n\t--pict-modal-dropdown-item-disabled-fg: var(--theme-color-text-muted, #9aa0a6);\n\t--pict-modal-dropdown-separator: var(--theme-color-border-light, #e8e8e8);\n\t--pict-modal-dropdown-header-fg: var(--theme-color-text-secondary, #6b7280);\n\t--pict-modal-dropdown-danger-fg: var(--theme-color-status-error, #dc2626);\n\t--pict-modal-dropdown-primary-fg: var(--theme-color-brand-primary, #2563eb);\n\n\t/* Typography */\n\t--pict-modal-font-family: var(--theme-typography-family-sans, system-ui, -apple-system, sans-serif);\n\t--pict-modal-font-size: 14px;\n\t--pict-modal-title-font-size: 16px;\n\n\t/* Animation */\n\t--pict-modal-transition-duration: 200ms;\n}\n\n/* Overlay */\n.pict-modal-overlay\n{\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 1000;\n\tbackground: var(--pict-modal-overlay-bg);\n\topacity: 0;\n\ttransition: opacity var(--pict-modal-transition-duration) ease;\n}\n\n.pict-modal-overlay.pict-modal-visible\n{\n\topacity: 1;\n}\n\n/* Dialog */\n.pict-modal-dialog\n{\n\tposition: fixed;\n\tz-index: 1010;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%) translateY(-20px);\n\topacity: 0;\n\ttransition: opacity var(--pict-modal-transition-duration) ease,\n\t transform var(--pict-modal-transition-duration) ease;\n\n\tmax-width: 90vw;\n\tmax-height: 90vh;\n\tdisplay: flex;\n\tflex-direction: column;\n\n\tbackground: var(--pict-modal-bg);\n\tcolor: var(--pict-modal-fg);\n\tborder: 1px solid var(--pict-modal-border);\n\tborder-radius: var(--pict-modal-border-radius);\n\tbox-shadow: var(--pict-modal-shadow);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: var(--pict-modal-font-size);\n}\n\n.pict-modal-dialog.pict-modal-visible\n{\n\topacity: 1;\n\ttransform: translate(-50%, -50%) translateY(0);\n}\n\n/* Unbounded modifier \u2014 lets callers opt out of the 90vh/90vw viewport cap.\n Use with caution: content taller than the viewport will push buttons\n below the fold. */\n.pict-modal-dialog.pict-modal-dialog--unbounded\n{\n\tmax-height: none;\n\tmax-width: none;\n}\n\n.pict-modal-dialog-header\n{\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 12px 16px;\n\tbackground: var(--pict-modal-header-bg);\n\tcolor: var(--pict-modal-header-fg);\n\tborder-bottom: 1px solid var(--pict-modal-header-border);\n\tborder-radius: var(--pict-modal-border-radius) var(--pict-modal-border-radius) 0 0;\n}\n\n.pict-modal-dialog-title\n{\n\tfont-size: var(--pict-modal-title-font-size);\n\tfont-weight: 600;\n}\n\n.pict-modal-dialog-close\n{\n\tbackground: none;\n\tborder: none;\n\tfont-size: 20px;\n\tcursor: pointer;\n\tcolor: var(--pict-modal-fg);\n\tpadding: 0 4px;\n\tline-height: 1;\n\topacity: 0.6;\n}\n\n.pict-modal-dialog-close:hover\n{\n\topacity: 1;\n}\n\n.pict-modal-dialog-body\n{\n\tpadding: 16px;\n\toverflow-y: auto;\n\tflex: 1;\n}\n\n.pict-modal-dialog-footer\n{\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\tgap: 8px;\n\tpadding: 12px 16px;\n\tborder-top: 1px solid var(--pict-modal-border);\n}\n\n/* Buttons */\n.pict-modal-btn\n{\n\tpadding: 8px 16px;\n\tborder: none;\n\tborder-radius: var(--pict-modal-btn-border-radius);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: var(--pict-modal-font-size);\n\tcursor: pointer;\n\tbackground: var(--pict-modal-btn-bg);\n\tcolor: var(--pict-modal-btn-fg);\n\ttransition: background var(--pict-modal-transition-duration) ease;\n}\n\n.pict-modal-btn:hover\n{\n\tbackground: var(--pict-modal-btn-hover-bg);\n}\n\n.pict-modal-btn:disabled\n{\n\topacity: 0.5;\n\tcursor: not-allowed;\n}\n\n.pict-modal-btn--primary\n{\n\tbackground: var(--pict-modal-btn-primary-bg);\n\tcolor: var(--pict-modal-btn-primary-fg);\n}\n\n.pict-modal-btn--primary:hover\n{\n\tbackground: var(--pict-modal-btn-primary-hover-bg);\n}\n\n.pict-modal-btn--danger\n{\n\tbackground: var(--pict-modal-btn-danger-bg);\n\tcolor: var(--pict-modal-btn-danger-fg);\n}\n\n.pict-modal-btn--danger:hover\n{\n\tbackground: var(--pict-modal-btn-danger-hover-bg);\n}\n\n/* Double confirm input */\n.pict-modal-confirm-input\n{\n\twidth: 100%;\n\tpadding: 8px 12px;\n\tmargin-top: 12px;\n\tborder: 1px solid var(--pict-modal-border);\n\tborder-radius: var(--pict-modal-btn-border-radius);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: var(--pict-modal-font-size);\n\tbox-sizing: border-box;\n}\n\n.pict-modal-confirm-input:focus\n{\n\toutline: 2px solid var(--pict-modal-btn-primary-bg);\n\toutline-offset: -1px;\n}\n\n.pict-modal-confirm-prompt\n{\n\tmargin-top: 12px;\n\tfont-size: 13px;\n\tcolor: var(--pict-modal-fg);\n\topacity: 0.7;\n}\n\n/* Toast container */\n.pict-modal-toast-container\n{\n\tposition: fixed;\n\tz-index: 1030;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tpointer-events: none;\n\tmax-width: 400px;\n}\n\n.pict-modal-toast-container--top-right\n{\n\ttop: 16px;\n\tright: 16px;\n}\n\n.pict-modal-toast-container--top-left\n{\n\ttop: 16px;\n\tleft: 16px;\n}\n\n.pict-modal-toast-container--bottom-right\n{\n\tbottom: 16px;\n\tright: 16px;\n}\n\n.pict-modal-toast-container--bottom-left\n{\n\tbottom: 16px;\n\tleft: 16px;\n}\n\n.pict-modal-toast-container--top-center\n{\n\ttop: 16px;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n}\n\n.pict-modal-toast-container--bottom-center\n{\n\tbottom: 16px;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n}\n\n/* Toast */\n.pict-modal-toast\n{\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tpadding: 12px 16px;\n\tborder-radius: var(--pict-modal-toast-border-radius);\n\tbox-shadow: var(--pict-modal-toast-shadow);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: var(--pict-modal-font-size);\n\tbackground: var(--pict-modal-toast-bg);\n\tcolor: var(--pict-modal-toast-fg);\n\tpointer-events: auto;\n\topacity: 0;\n\ttransform: translateX(100%);\n\ttransition: opacity var(--pict-modal-transition-duration) ease,\n\t transform var(--pict-modal-transition-duration) ease;\n}\n\n.pict-modal-toast.pict-modal-visible\n{\n\topacity: 1;\n\ttransform: translateX(0);\n}\n\n.pict-modal-toast.pict-modal-toast-exit\n{\n\topacity: 0;\n\ttransform: translateX(100%);\n}\n\n.pict-modal-toast--info\n{\n\tbackground: var(--pict-modal-toast-info-bg);\n}\n\n.pict-modal-toast--success\n{\n\tbackground: var(--pict-modal-toast-success-bg);\n}\n\n.pict-modal-toast--warning\n{\n\tbackground: var(--pict-modal-toast-warning-bg);\n}\n\n.pict-modal-toast--error\n{\n\tbackground: var(--pict-modal-toast-error-bg);\n}\n\n.pict-modal-toast-message\n{\n\tflex: 1;\n}\n\n.pict-modal-toast-dismiss\n{\n\tbackground: none;\n\tborder: none;\n\tcolor: inherit;\n\tfont-size: 18px;\n\tcursor: pointer;\n\tpadding: 0 2px;\n\tline-height: 1;\n\topacity: 0.7;\n}\n\n.pict-modal-toast-dismiss:hover\n{\n\topacity: 1;\n}\n\n/* Tooltip */\n.pict-modal-tooltip\n{\n\tposition: fixed;\n\tz-index: 1020;\n\tpadding: 6px 10px;\n\tborder-radius: var(--pict-modal-tooltip-border-radius);\n\tbox-shadow: var(--pict-modal-tooltip-shadow);\n\tbackground: var(--pict-modal-tooltip-bg);\n\tcolor: var(--pict-modal-tooltip-fg);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: 13px;\n\tpointer-events: none;\n\topacity: 0;\n\ttransition: opacity var(--pict-modal-transition-duration) ease;\n\twhite-space: normal;\n\tword-wrap: break-word;\n}\n\n.pict-modal-tooltip.pict-modal-tooltip-interactive\n{\n\tpointer-events: auto;\n}\n\n.pict-modal-tooltip.pict-modal-visible\n{\n\topacity: 1;\n}\n\n.pict-modal-tooltip-arrow\n{\n\tposition: absolute;\n\twidth: 8px;\n\theight: 8px;\n\tbackground: var(--pict-modal-tooltip-bg);\n\ttransform: rotate(45deg);\n}\n\n.pict-modal-tooltip--top .pict-modal-tooltip-arrow\n{\n\tbottom: -4px;\n\tleft: 50%;\n\tmargin-left: -4px;\n}\n\n.pict-modal-tooltip--bottom .pict-modal-tooltip-arrow\n{\n\ttop: -4px;\n\tleft: 50%;\n\tmargin-left: -4px;\n}\n\n.pict-modal-tooltip--left .pict-modal-tooltip-arrow\n{\n\tright: -4px;\n\ttop: 50%;\n\tmargin-top: -4px;\n}\n\n.pict-modal-tooltip--right .pict-modal-tooltip-arrow\n{\n\tleft: -4px;\n\ttop: 50%;\n\tmargin-top: -4px;\n}\n\n/* \u2500\u2500 Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Anchor-positioned menu (no overlay). Used for nav menus and\n \"split button\" addenda \u2014 see Pict-Modal-Dropdown.js.\n*/\n.pict-modal-dropdown\n{\n\tposition: fixed;\n\tz-index: 1025;\n\tmin-width: 160px;\n\tmax-width: 360px;\n\tmax-height: 60vh;\n\toverflow-y: auto;\n\tbackground: var(--pict-modal-dropdown-bg);\n\tcolor: var(--pict-modal-dropdown-fg);\n\tborder: 1px solid var(--pict-modal-dropdown-border);\n\tborder-radius: var(--pict-modal-dropdown-border-radius);\n\tbox-shadow: var(--pict-modal-dropdown-shadow);\n\tfont-family: var(--pict-modal-font-family);\n\tfont-size: var(--pict-modal-font-size);\n\tpadding: 4px 0;\n\topacity: 0;\n\ttransform: translateY(-4px);\n\ttransition: opacity var(--pict-modal-transition-duration) ease,\n\t transform var(--pict-modal-transition-duration) ease;\n}\n\n.pict-modal-dropdown.pict-modal-dropdown--above { transform: translateY(4px); }\n\n.pict-modal-dropdown.pict-modal-visible\n{\n\topacity: 1;\n\ttransform: translateY(0);\n}\n\n.pict-modal-dropdown-item\n{\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 7px 14px;\n\tcursor: pointer;\n\tuser-select: none;\n\tcolor: inherit;\n\toutline: none;\n}\n\n.pict-modal-dropdown-item:hover,\n.pict-modal-dropdown-item:focus\n{\n\tbackground: var(--pict-modal-dropdown-item-hover-bg);\n\tcolor: var(--pict-modal-dropdown-item-hover-fg);\n}\n\n.pict-modal-dropdown-item--disabled\n{\n\tcursor: not-allowed;\n\tcolor: var(--pict-modal-dropdown-item-disabled-fg);\n}\n\n.pict-modal-dropdown-item--disabled:hover,\n.pict-modal-dropdown-item--disabled:focus\n{\n\tbackground: transparent;\n\tcolor: var(--pict-modal-dropdown-item-disabled-fg);\n}\n\n.pict-modal-dropdown-item--primary { color: var(--pict-modal-dropdown-primary-fg); }\n.pict-modal-dropdown-item--danger { color: var(--pict-modal-dropdown-danger-fg); }\n\n.pict-modal-dropdown-item-icon\n{\n\tflex: 0 0 auto;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 16px;\n\theight: 16px;\n}\n\n.pict-modal-dropdown-item-icon svg { width: 100%; height: 100%; display: block; }\n\n.pict-modal-dropdown-item-label { flex: 1 1 auto; min-width: 0; }\n\n.pict-modal-dropdown-item-hint\n{\n\tflex: 0 0 auto;\n\tfont-size: 11px;\n\topacity: 0.6;\n\tmargin-left: 12px;\n}\n\n.pict-modal-dropdown-separator\n{\n\theight: 1px;\n\tbackground: var(--pict-modal-dropdown-separator);\n\tmargin: 4px 0;\n}\n\n.pict-modal-dropdown-header\n{\n\tpadding: 6px 14px 2px;\n\tfont-size: 11px;\n\tfont-weight: 600;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.04em;\n\tcolor: var(--pict-modal-dropdown-header-fg);\n}\n\n/* \u2500\u2500 Resizable / Collapsible Panels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pict-panel\n{\n\tposition: relative;\n\ttransition: width 0.2s ease;\n\tflex-shrink: 0;\n\toverflow: visible;\n}\n.pict-panel-collapsed\n{\n\twidth: 0 !important;\n\tmin-width: 0 !important;\n\toverflow: visible;\n}\n.pict-panel-collapsed > *:not(.pict-panel-edge)\n{\n\tdisplay: none;\n}\n\n/* Edge container \u2014 zero-width flex sibling of the panel.\n Sits next to the panel in the flex layout; children\n use absolute positioning to overlap the panel boundary. */\n.pict-panel-edge\n{\n\tposition: relative;\n\twidth: 0;\n\tflex-shrink: 0;\n\tz-index: 50;\n\toverflow: visible;\n}\n\n/* Resize handle \u2014 thin strip on the panel boundary */\n.pict-panel-resize\n{\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\twidth: 4px;\n\tcursor: col-resize;\n\tbackground: transparent;\n\ttransition: background 0.15s, width 0.15s;\n}\n.pict-panel-edge-right .pict-panel-resize\n{\n\tright: 0;\n\tborder-right: 1px solid var(--pict-panel-border, #DDD6CA);\n}\n.pict-panel-edge-left .pict-panel-resize\n{\n\tleft: 0;\n\tborder-left: 1px solid var(--pict-panel-border, #DDD6CA);\n}\n.pict-panel-resize:hover,\n.pict-panel-edge:hover .pict-panel-resize\n{\n\twidth: 5px;\n\tbackground: var(--pict-panel-accent, #2E7D74);\n\topacity: 0.5;\n}\n.pict-panel-resize.dragging\n{\n\twidth: 5px;\n\tbackground: var(--pict-panel-accent, #2E7D74);\n\topacity: 1;\n\ttransition: none;\n}\n.pict-panel-edge-collapsed .pict-panel-resize\n{\n\tdisplay: none;\n}\n\n/* Collapse tab \u2014 tucked sliver at rest, slides out on hover */\n.pict-panel-tab\n{\n\tposition: absolute;\n\ttop: 8px;\n\twidth: 8px;\n\theight: 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\tbackground: var(--pict-panel-border, #DDD6CA);\n\tborder: 1px solid var(--pict-panel-border, #DDD6CA);\n\tcursor: pointer;\n\tcolor: var(--pict-panel-fg, #8A7F72);\n\tfont-size: 10px;\n\tline-height: 1;\n\topacity: 0.5;\n\ttransition: opacity 0.25s, width 0.2s ease, height 0.2s ease, left 0.2s ease, right 0.2s ease, background 0.2s;\n\tz-index: 51;\n}\n.pict-panel-edge:hover .pict-panel-tab,\n.pict-panel-tab:hover\n{\n\twidth: 20px;\n\theight: 32px;\n\topacity: 1;\n\toverflow: visible;\n\tbackground: var(--pict-panel-bg, #FAF8F4);\n}\n/* Right panel: tab to the left of the edge */\n.pict-panel-edge-right .pict-panel-tab\n{\n\tright: 0;\n\tborder-right: none;\n\tborder-radius: 4px 0 0 4px;\n}\n.pict-panel-edge-right:hover .pict-panel-tab,\n.pict-panel-edge-right .pict-panel-tab:hover\n{\n\tright: 0;\n}\n/* Left panel: tab to the right of the edge */\n.pict-panel-edge-left .pict-panel-tab\n{\n\tleft: 0;\n\tborder-left: none;\n\tborder-radius: 0 4px 4px 0;\n}\n.pict-panel-edge-left:hover .pict-panel-tab,\n.pict-panel-edge-left .pict-panel-tab:hover\n{\n\tleft: 0;\n}\n/* When collapsed \u2014 more visible */\n.pict-panel-edge-collapsed .pict-panel-tab\n{\n\twidth: 10px;\n\theight: 28px;\n\topacity: 0.6;\n}\n.pict-panel-edge-collapsed .pict-panel-tab:hover,\n.pict-panel-edge-collapsed:hover .pict-panel-tab\n{\n\twidth: 20px;\n\theight: 32px;\n\topacity: 1;\n\toverflow: visible;\n\tbackground: var(--pict-panel-bg, #FAF8F4);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Pict-Modal-Shell \u2014 viewport-managing layout for top / right /\n * bottom / left panels around a center.\n * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.pict-modal-shell-host { display: block; height: 100%; min-height: 0; }\n.pict-modal-shell\n{\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\theight: 100%;\n\tmin-height: 0;\n\tposition: relative;\n\tcolor: var(--pict-modal-fg, var(--theme-color-text-primary, #1a1a1a));\n\tbackground: var(--theme-color-background-primary, transparent);\n}\n.pict-modal-shell-row { display: flex; min-width: 0; min-height: 0; }\n/* \"First added = at the edge\" convention is held by reversing the\n flex-direction on the bottom row + right side. That way, for ALL\n four sides, calling addPanel() N times stacks panel #1 against\n the viewport edge, panel #2 just inside it, panel #3 further in,\n and so on. Without these reverses, top + left worked that way but\n bottom + right inverted (first-added at content side, last-added\n at edge), which surprised callers. */\n.pict-modal-shell-row-top { flex: 0 0 auto; flex-direction: column; }\n.pict-modal-shell-row-bottom { flex: 0 0 auto; flex-direction: column-reverse; }\n.pict-modal-shell-row-middle\n{\n\tflex: 1 1 0;\n\tflex-direction: row;\n\tmin-height: 0;\n\tposition: relative;\n}\n.pict-modal-shell-side\n{\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\tmin-height: 0;\n}\n.pict-modal-shell-side-left { flex-direction: row; }\n.pict-modal-shell-side-right { flex-direction: row-reverse; }\n.pict-modal-shell-center\n{\n\tflex: 1 1 0;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: auto;\n\tposition: relative;\n}\n.pict-modal-shell-center-content\n{\n\tmin-height: 100%;\n}\n\n/* Panels \u2014 base */\n.pict-modal-shell-panel\n{\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbox-sizing: border-box;\n\tbackground: var(--pict-modal-bg, var(--theme-color-background-panel, #ffffff));\n\tcolor: inherit;\n\tmin-width: 0;\n\tmin-height: 0;\n\ttransition: width 140ms ease, height 140ms ease;\n}\n.pict-modal-shell-panel-content\n{\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\tmin-height: 0;\n\toverflow: auto;\n}\n.pict-modal-shell-panel-content-inner\n{\n\tmin-height: 100%;\n}\n/* Panel boundary \u2014 fixed-mode panels get a hairline border for explicit\n demarcation. Collapsible / resizable panels DROP the boundary border\n (background contrast separates them from the center anyway) so the\n collapse tab can pull out cleanly without a hairline cutting across\n it. The host stylesheet still gets full control via the panel's own\n background. */\n.pict-modal-shell-panel-mode-fixed.pict-modal-shell-panel-top { border-bottom: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #e0e0e0)); }\n.pict-modal-shell-panel-mode-fixed.pict-modal-shell-panel-bottom { border-top: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #e0e0e0)); }\n.pict-modal-shell-panel-mode-fixed.pict-modal-shell-panel-left { border-right: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #e0e0e0)); }\n.pict-modal-shell-panel-mode-fixed.pict-modal-shell-panel-right { border-left: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #e0e0e0)); }\n\n/* Resize handle \u2014 absolute on the inner edge of each panel. */\n.pict-modal-shell-panel-resize-handle\n{\n\tposition: absolute;\n\tbackground: transparent;\n\tz-index: 5;\n\ttransition: background-color 120ms ease;\n}\n/* Resize handle hover \u2014 use the active brand's mode-aware primary\n color (set by pict-section-theme's Brand provider as\n --brand-color-primary-mode) so the resize affordance picks up the\n app's wordmark color. Falls back to the theme's brand-primary\n token if no brand is registered. */\n.pict-modal-shell-panel-resize-handle:hover\n{\n\tbackground: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\topacity: 0.4;\n}\n.pict-modal-shell-panel-left .pict-modal-shell-panel-resize-handle { right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; }\n.pict-modal-shell-panel-right .pict-modal-shell-panel-resize-handle { left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; }\n.pict-modal-shell-panel-top .pict-modal-shell-panel-resize-handle { bottom:-3px; left: 0; right: 0; height: 6px; cursor: row-resize; }\n.pict-modal-shell-panel-bottom .pict-modal-shell-panel-resize-handle { top: -3px; left: 0; right: 0; height: 6px; cursor: row-resize; }\n\n/* Collapse tab \u2014 slim sliver flush on the panel's OUTER boundary\n (where the resize handle sits), modelled on retold-content-system's\n sidebar tab. At rest it's a 6\xD728 px sliver; hover expands to\n 18\xD736 px without overlapping the panel's own content. The tab is\n positioned with its center on the boundary so half pokes into the\n adjacent area \u2014 the only place we can safely take over without\n stepping on app UI inside the panel. Title text only renders in the\n collapsed state where there's room for it. */\n.pict-modal-shell-panel-collapse-tab\n{\n\tposition: absolute;\n\tdisplay: flex; /* not inline-flex \u2014 avoids baseline alignment quirks */\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\tborder: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #d0d7de));\n\tbackground: var(--pict-modal-bg, var(--theme-color-background-panel, #ffffff));\n\tcolor: var(--theme-color-text-muted, #6b7280);\n\tfont: inherit;\n\tfont-size: 10px;\n\tletter-spacing: 0.4px;\n\ttext-transform: uppercase;\n\tcursor: pointer;\n\tz-index: 50;\n\topacity: 0.55;\n\tpadding: 0;\n\tbox-sizing: border-box;\n\tline-height: 0; /* keep child boxes from inflating around the rotated chevron */\n\t/* Geometry (width/height/right/left) is intentionally NOT animated.\n\t Sliding the tab's outer edge inward on hover-out makes it look like\n\t the tab is \"sliding into\" the panel content \u2014 weird visual.\n\t Snapping the size change instead, and animating only the appearance\n\t (opacity/color/shadow), gives a clean fade-in/out with no boundary\n\t weirdness. */\n\ttransition: opacity 160ms ease,\n\t background-color 160ms ease, color 160ms ease,\n\t border-color 160ms ease, box-shadow 160ms ease;\n}\n/* Hover state pulls accent color from the active brand (mode-aware,\n so it's legible in both light + dark) with theme brand-primary as\n fallback. The whole point of brand colors is that they show up\n across the app's chrome. */\n.pict-modal-shell-panel-collapse-tab:hover,\n.pict-modal-shell-panel:hover > .pict-modal-shell-panel-collapse-tab\n{\n\topacity: 1;\n\tcolor: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\tborder-color: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n}\n/* Drop shadow casts AWAY from the panel so the tab feels pulled out\n (extension of the panel) rather than floating across the boundary. */\n.pict-modal-shell-panel-left:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-left > .pict-modal-shell-panel-collapse-tab:hover { box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.18); }\n.pict-modal-shell-panel-right:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-right > .pict-modal-shell-panel-collapse-tab:hover { box-shadow: -3px 0 6px -2px rgba(0, 0, 0, 0.18); }\n.pict-modal-shell-panel-top:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-top > .pict-modal-shell-panel-collapse-tab:hover { box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.18); }\n.pict-modal-shell-panel-bottom:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-bottom > .pict-modal-shell-panel-collapse-tab:hover { box-shadow: 0 -3px 6px -2px rgba(0, 0, 0, 0.18); }\n\n/* Side panels: slim VERTICAL sliver pulled OUT of the panel's outer\n boundary like a drawer tab. The inner edge is anchored AT the panel\n boundary (with a 1px overlap so the tab visually merges with the\n panel's own background \u2014 no hairline gap). The tab grows OUTWARD\n only on hover; the inner edge stays put so the tab always looks\n like an extension of the panel rather than a floating button.\n Border-left is removed for left panels (and border-right for right\n panels) so the panel-facing edge is open. */\n.pict-modal-shell-panel-left > .pict-modal-shell-panel-collapse-tab\n{\n\t/* width 6, right: -5px \u2192 tab spans (panelRight - 1) to (panelRight + 5).\n\t The 1px overlap into the panel is what makes it look attached. */\n\tright: -5px; top: 14px; width: 6px; height: 28px;\n\tborder-radius: 0 4px 4px 0;\n\tborder-left: 0;\n}\n.pict-modal-shell-panel-right > .pict-modal-shell-panel-collapse-tab\n{\n\tleft: -5px; top: 14px; width: 6px; height: 28px;\n\tborder-radius: 4px 0 0 4px;\n\tborder-right: 0;\n}\n/* Hover: same inner anchor (panelRight - 1), tab grows outward to\n width 18 \u2192 right: -17px. Top + height grow downward only (top\n stays, height extends so the tab visually 'drops' the chevron\n into view). */\n.pict-modal-shell-panel-left:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-left > .pict-modal-shell-panel-collapse-tab:hover\n{\n\twidth: 18px; height: 36px; right: -17px;\n}\n.pict-modal-shell-panel-right:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-right > .pict-modal-shell-panel-collapse-tab:hover\n{\n\twidth: 18px; height: 36px; left: -17px;\n}\n\n/* Top / bottom panels: slim HORIZONTAL sliver pulled OUT of the\n horizontal boundary, anchored 14 px in from the right. Same\n inner-edge-anchored / 1 px overlap pattern as the side panels. */\n.pict-modal-shell-panel-top > .pict-modal-shell-panel-collapse-tab\n{\n\tbottom: -5px; right: 14px; width: 28px; height: 6px;\n\tborder-radius: 0 0 4px 4px;\n\tborder-top: 0;\n}\n.pict-modal-shell-panel-bottom > .pict-modal-shell-panel-collapse-tab\n{\n\ttop: -5px; right: 14px; width: 28px; height: 6px;\n\tborder-radius: 4px 4px 0 0;\n\tborder-bottom: 0;\n}\n.pict-modal-shell-panel-top:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-top > .pict-modal-shell-panel-collapse-tab:hover\n{\n\twidth: 36px; height: 18px; bottom: -17px;\n}\n.pict-modal-shell-panel-bottom:hover > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-bottom > .pict-modal-shell-panel-collapse-tab:hover\n{\n\twidth: 36px; height: 18px; top: -17px;\n}\n\n.pict-modal-shell-panel-collapse-tab-title { display: none; white-space: nowrap; }\n\n/* Auto-generated chevron glyph inside the tab \u2014 only visible once the\n tab is wide / tall enough to show it (i.e. hover state, or when the\n panel is collapsed). Direction follows side + state.\n Sized 5\xD75 (down from 6) so even with rotation the visual stays\n well clear of the tab's overflow:hidden bounds at 18\xD736 hover and\n the 24px collapsed tab strip width. flex-shrink:0 ensures the\n pseudo never collapses to zero in tight tab dimensions. */\n.pict-modal-shell-panel-collapse-tab::before\n{\n\tcontent: '';\n\tdisplay: block;\n\twidth: 5px; height: 5px;\n\tflex-shrink: 0;\n\topacity: 0;\n\tborder-right: 1.5px solid currentColor;\n\tborder-bottom: 1.5px solid currentColor;\n\ttransform: rotate(135deg);\n\ttransform-origin: center center;\n\ttransition: opacity 160ms ease, transform 160ms ease;\n}\n.pict-modal-shell-panel:hover > .pict-modal-shell-panel-collapse-tab::before,\n.pict-modal-shell-panel-collapse-tab:hover::before,\n.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before\n{\n\topacity: 1;\n}\n.pict-modal-shell-panel-right > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(-45deg); }\n.pict-modal-shell-panel-top > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(-135deg); }\n.pict-modal-shell-panel-bottom > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(45deg); }\n.pict-modal-shell-panel-left.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(-45deg); }\n.pict-modal-shell-panel-right.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(135deg); }\n.pict-modal-shell-panel-top.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(45deg); }\n.pict-modal-shell-panel-bottom.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before { transform: rotate(-135deg); }\n\n/* Collapsed state \u2014 content disappears, only the collapse tab remains. */\n.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-content\n{\n\tdisplay: none;\n}\n.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-resize-handle\n{\n\tdisplay: none;\n}\n.pict-modal-shell-panel-left.pict-modal-shell-panel-collapsed,\n.pict-modal-shell-panel-right.pict-modal-shell-panel-collapsed\n{\n\t/* When collapsed, side panels rotate the title for vertical reading. */\n\toverflow: hidden;\n}\n/* When collapsed: the entire panel becomes the tab strip \u2014 full width\n for sides, full height for top/bottom \u2014 with the title visible\n vertically (sides) or horizontally (top/bottom). The little sliver\n tab on the boundary disappears (we don't need it anymore \u2014 clicking\n anywhere on the panel toggles it back open). */\n.pict-modal-shell-panel-left.pict-modal-shell-panel-collapsed,\n.pict-modal-shell-panel-right.pict-modal-shell-panel-collapsed,\n.pict-modal-shell-panel-top.pict-modal-shell-panel-collapsed,\n.pict-modal-shell-panel-bottom.pict-modal-shell-panel-collapsed\n{\n\toverflow: hidden;\n}\n.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab\n{\n\t/* Promote the tab to FILL the collapsed panel (not just hug its\n\t content) so the centered chevron + title group sits in the middle\n\t of the panel. Without explicit width/height: 100%, the position:\n\t absolute element shrinks to its natural content size and the\n\t group ends up flush at the top of the panel \u2014 where the chevron\n\t gets clipped by the topbar. */\n\tposition: absolute !important;\n\ttop: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;\n\twidth: 100% !important;\n\theight: 100% !important;\n\tborder: 0;\n\tborder-radius: 0;\n\tbackground: transparent;\n\topacity: 0.85;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tpadding: 12px 4px; /* keeps chevron + title clear of edges */\n\tbox-shadow: none;\n\tcolor: var(--theme-color-text-muted, #6b7280);\n\tbox-sizing: border-box;\n\toverflow: hidden;\n}\n.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab:hover\n{\n\tbackground: var(--theme-color-background-hover, var(--pict-modal-bg, #fff));\n\tcolor: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\tbox-shadow: none;\n}\n/* Side panels (collapsed): rotate the title for vertical reading. */\n.pict-modal-shell-panel-left.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-right.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab\n{\n\twriting-mode: vertical-rl;\n\ttext-orientation: mixed;\n}\n.pict-modal-shell-panel-collapsed .pict-modal-shell-panel-collapse-tab-title\n{\n\tdisplay: inline;\n}\n\n/* Hidden panels \u2014 when Hidden:true is passed to addPanel, the collapsed\n state has zero footprint: no collapse tab (the tab is never built),\n the panel root is display:none, and the resize handle vanishes. The\n only path to the open state is a programmatic expand()/toggle() from\n somewhere else in the app (e.g. a topbar gear button). When expanded,\n the panel renders normally \u2014 so resize/drag handles continue to work\n while the panel is open. */\n.pict-modal-shell-panel-hidden.pict-modal-shell-panel-collapsed\n{\n\tdisplay: none !important;\n}\n\n/* Overlay panels \u2014 float over the middle row instead of taking layout\n space. The overlay layer is positioned absolutely inside the middle\n row; individual overlay panels stack with positive z-index. */\n.pict-modal-shell-overlay-layer\n{\n\tposition: absolute;\n\tinset: 0;\n\tpointer-events: none;\n\tz-index: 10;\n}\n.pict-modal-shell-overlay-layer .pict-modal-shell-panel\n{\n\tpointer-events: auto;\n\tposition: absolute;\n\tbox-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);\n}\n.pict-modal-shell-overlay-layer .pict-modal-shell-panel-left { left: 0; top: 0; bottom: 0; }\n.pict-modal-shell-overlay-layer .pict-modal-shell-panel-right { right: 0; top: 0; bottom: 0; }\n.pict-modal-shell-overlay-layer .pict-modal-shell-panel-top { top: 0; left: 0; right: 0; }\n.pict-modal-shell-overlay-layer .pict-modal-shell-panel-bottom { bottom: 0; left: 0; right: 0; }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Responsive drawer mode \u2014 .pict-modal-shell-drawer-active toggles\n onto the middle row when any panel with ResponsiveDrawer crosses\n below its breakpoint. Flips the row's flex-direction from row to\n column, stacking side panels above the center and stretching them\n to full width. Each opted-in panel itself gets the\n .pict-modal-shell-panel-drawer class so per-panel rules below\n target only the drawer-mode panels (right + non-drawer panels in\n the same row are unaffected). The drawer height is read from a\n per-panel --pict-modal-drawer-height CSS variable (default\n 33vh, set in JS from the DrawerHeight option).\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pict-modal-shell-row-middle.pict-modal-shell-drawer-active\n{\n\tflex-direction: column;\n\t/* The drawer tab lives outside the drawer's bottom edge \u2014 ancestor\n\t chain MUST allow it to escape clip. */\n\toverflow: visible;\n}\n.pict-modal-shell-row-middle.pict-modal-shell-drawer-active .pict-modal-shell-side\n{\n\t/* Side stacks stretch full-width and lay out their panels as a\n\t horizontal row of stacked drawers (so two drawers from the same\n\t side don't end up overlapping). overflow: visible so the\n\t per-panel tab can extend below the side stack into the workspace. */\n\twidth: 100% !important;\n\tflex-direction: column;\n\toverflow: visible;\n}\n/* The drawer-tagged panel itself: kill the inline width set by\n _applySize (we override with !important since the inline style has\n higher specificity than a class selector), then size by height\n from the CSS variable. Resize handle is hidden in drawer mode\n because horizontal dragging doesn't translate to vertical sizing\n and the user already has the collapse tab to dismiss / restore.\n\n padding-bottom reserves an 18px strip at the bottom of the panel\n for the tab. The tab sits INSIDE the drawer's footprint \u2014 never\n below it \u2014 so the workspace header below the drawer is never in\n the same vertical band as the tab. (Previously the tab hung\n below the drawer's bottom edge into the workspace's top padding;\n that made the tab visually compete with the workspace header,\n even when the tab box-model bounds technically cleared the\n header.) box-sizing: border-box so the padding eats from the\n 33vh, not adding to it. */\n.pict-modal-shell-panel-drawer\n{\n\twidth: 100% !important;\n\tmax-width: 100% !important;\n\theight: var(--pict-modal-drawer-height, 33vh);\n\ttransition: height 140ms ease;\n\tpadding-bottom: 18px;\n\tbox-sizing: border-box;\n\toverflow: visible !important;\n\t/* Clip the panel bg to its CONTENT area only \u2014 the 18px\n\t padding-bottom reserve (where the tab lives) becomes\n\t transparent, so the middle row's primary background shows\n\t through. Without this the reserve would render with the\n\t panel's chrome bg, creating a visible \"strip\" between the\n\t drawer content above and the workspace below \u2014 the tab would\n\t look like it's sitting on its own miscoloured band rather\n\t than at the seam between drawer and workspace. */\n\tbackground-clip: content-box;\n}\n.pict-modal-shell-panel-drawer.pict-modal-shell-panel-collapsed\n{\n\t/* Collapsed = \"just the tab strip is visible\". 18px matches the\n\t panel's tab reserve so the height is consistent across states.\n\t When this is 0 the tab would have nowhere to render and the\n\t user couldn't reopen the drawer. */\n\theight: 18px !important;\n\tpadding-bottom: 0 !important;\n\t/* Drop the panel's bg in collapsed state \u2014 without this the 18px\n\t strip shows the --pict-modal-bg (panel chrome) which doesn't\n\t match the workspace --theme-color-background-primary below it,\n\t creating a visible \"drawer band\" around the tab that breaks the\n\t illusion of the tab belonging to the workspace area. With\n\t transparent bg the middle row's primary background shows\n\t through, the strip blends with the workspace, and the tab pill\n\t reads as a free-floating handle. */\n\tbackground: transparent !important;\n}\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-resize-handle\n{\n\tdisplay: none;\n}\n/* The drawer's collapse tab is a horizontal pill protruding from the\n bottom of the drawer (rather than the inner edge of a side panel).\n Override the side-panel positioning rules from above so the tab\n always sits at the drawer's bottom-center seam, in both expanded\n and collapsed states. The expand-from-zero affordance: when\n collapsed (height: 0), the tab still hangs below \"where the\n drawer would be\" \u2014 a small handle the user can click to pull\n the drawer back down. */\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-collapse-tab,\n.pict-modal-shell-panel-drawer.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab\n{\n\tposition: absolute !important;\n\t/* Anchored to the panel's BOTTOM edge \u2014 the tab lives INSIDE the\n\t drawer's footprint (in the 18px reserve at the bottom), never\n\t below it into the workspace. This means the workspace below\n\t the drawer is never sharing a vertical band with the tab, so\n\t the workspace header doesn't optically compete with it.\n\t bottom: 4px aligns the tab's top edge exactly with the panel's\n\t CONTENT-AREA bottom (panel.height \u2212 padding-bottom 18px). With\n\t border-top: 0 on the tab, the seam between the drawer content\n\t above and the tab body is invisible \u2014 they share --pict-modal-bg\n\t and merge into one shape, the tab reading as a labelled\n\t extension of the drawer hanging downward. Collapsed state\n\t keeps the smaller offset (overridden below) because its panel\n\t has no padding-bottom, so the math doesn't apply. */\n\ttop: auto !important;\n\tbottom: 4px !important;\n\tleft: 50% !important;\n\tright: auto !important;\n\ttransform: translate(-50%, 0) !important;\n\twidth: 64px !important;\n\theight: 14px !important;\n\t/* CRITICAL: border-box + padding: 0 \u2014 the collapsed-state base\n\t rule inherits \"padding: 12px 4px\" (so the chevron clears the\n\t edges of a tab that fills a 24px-wide side strip). In drawer\n\t mode the tab is a 14px tall pill, NOT a strip-fill, so that\n\t 12px vertical padding would balloon the tab's outer height to\n\t ~38px and crash into the workspace header text. The chevron\n\t is centered via flex anyway. */\n\tbox-sizing: border-box !important;\n\tpadding: 0 !important;\n\t/* Rounded BOTTOM corners + no top border \u2014 the tab looks like a\n\t traditional drawer-handle/tab hanging from above. Its rounded\n\t bottom curves face the workspace (the \"open downward\" affordance\n\t for a top drawer). border-top: 0 lets the tab visually merge\n\t with whatever's directly above it inside the panel (sidebar\n\t content when expanded, the panel background when collapsed). */\n\tborder-radius: 0 0 8px 8px;\n\tborder: 1px solid var(--pict-modal-border, var(--theme-color-border-default, #cfd5dd));\n\tborder-top: 0;\n\tbackground: var(--pict-modal-bg, var(--theme-color-background-panel, #fff));\n\topacity: 0.95;\n\tz-index: 20;\n\t/* The default side-panel hover-grow values would yank the tab off\n\t to the wrong spot in drawer mode \u2014 neutralise. */\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-collapse-tab:hover,\n.pict-modal-shell-panel-drawer.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab:hover\n{\n\topacity: 1;\n\twidth: 96px !important;\n\t/* height stays at 14px \u2014 the tab is anchored with bottom, so any\n\t height growth would push the tab's TOP edge UPWARD past the\n\t space available above it. In EXPANDED state that crashes into\n\t the drawer content above; in COLLAPSED state it crashes into\n\t the topbar's brand stripes. Width-only growth (64 to 96, +50%)\n\t still gives the \"tab is reaching toward me\" affordance without\n\t the encroachment. */\n\tcolor: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\tborder-color: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\tbox-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.18);\n}\n/* Collapsed-state bottom-offset override. Expanded panels have an\n 18px padding-bottom reserve, and \"bottom: 4px\" anchors the tab's\n top edge exactly at the content-area boundary (so it merges\n visually with the drawer above). Collapsed panels have\n padding-bottom: 0 and a total height of 18px \u2014 \"bottom: 4px\"\n there would put the tab's top at the panel's actual top edge,\n crashing the (border-top: 0) tab into the topbar. The smaller\n \"bottom: 2px\" keeps the 14px tab vertically centered in the 18px\n strip with 2px margins on either side. */\n.pict-modal-shell-panel-drawer.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab\n{\n\tbottom: 2px !important;\n}\n/* Chevron inside the tab: point UP when expanded (the drawer\n collapses UP / out of view, so the arrow indicates \"click me to\n send the drawer up\"), DOWN when collapsed (the drawer expands DOWN\n into view). Rotations come from the existing top-panel chevron\n table: rotate(-135deg) \u2192 UP arrow, rotate(45deg) \u2192 DOWN arrow. */\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-collapse-tab::before\n{\n\ttransform: rotate(-135deg) !important;\n}\n.pict-modal-shell-panel-drawer.pict-modal-shell-panel-collapsed > .pict-modal-shell-panel-collapse-tab::before\n{\n\ttransform: rotate(45deg) !important;\n}\n/* The collapse tab's existing title-text span is hidden when reduced\n to a pill \u2014 there's no horizontal room. The chevron alone reads\n correctly. */\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-collapse-tab .pict-modal-shell-panel-collapse-tab-title,\n.pict-modal-shell-panel-drawer > .pict-modal-shell-panel-collapse-tab .pict-modal-shell-panel-collapse-tab-icon\n{\n\tdisplay: none;\n}\n\n/* Drag-active state \u2014 disable text selection + change cursor globally\n so resize feels solid even when the cursor briefly leaves the handle. */\n.pict-modal-shell-dragging-x, .pict-modal-shell-dragging-y { user-select: none; }\n.pict-modal-shell-dragging-x * { cursor: col-resize !important; }\n.pict-modal-shell-dragging-y * { cursor: row-resize !important; }\n\n/* Per-panel resize-active state \u2014 kills the panel's collapse/expand\n width/height transition for the duration of a drag. Without this,\n every pointermove starts a fresh 140 ms transition and the resize\n visibly lags behind the cursor (\"choppy\"). With it disabled the\n panel snaps to the new size on the same frame as the pointer, which\n feels native. */\n.pict-modal-shell-panel-resizing { transition: none !important; }\n.pict-modal-shell-panel-resizing > .pict-modal-shell-panel-resize-handle\n{\n\tbackground: var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb));\n\topacity: 0.5;\n}\n\n/* Panel popup-attention flash \u2014 fires when popup() is called on an\n already-open panel. Brief brand-colored inset glow so the user sees\n that their click landed even though the panel didn't change shape.\n Class is added by the shell, auto-removed after ~700 ms. */\n@keyframes pict-modal-shell-panel-flash\n{\n\t0% { box-shadow: inset 0 0 0 0 transparent; }\n\t30% { box-shadow: inset 0 0 0 3px var(--brand-color-primary-mode, var(--theme-color-brand-primary, #2563eb)); }\n\t100% { box-shadow: inset 0 0 0 0 transparent; }\n}\n.pict-modal-shell-panel-flash\n{\n\tanimation: pict-modal-shell-panel-flash 600ms ease-out;\n}\n"};},{}],24:[function(require,module,exports){const libPictViewClass=require('pict-view');const libPictModalOverlay=require('./Pict-Modal-Overlay.js');const libPictModalConfirm=require('./Pict-Modal-Confirm.js');const libPictModalWindow=require('./Pict-Modal-Window.js');const libPictModalToast=require('./Pict-Modal-Toast.js');const libPictModalTooltip=require('./Pict-Modal-Tooltip.js');const libPictModalPanel=require('./Pict-Modal-Panel.js');const libPictModalDropdown=require('./Pict-Modal-Dropdown.js');const libPictModalShell=require('./Pict-Modal-Shell.js');const _DefaultConfiguration=require('./Pict-Section-Modal-DefaultConfiguration.js');class PictSectionModal extends libPictViewClass{constructor(pFable,pOptions,pServiceHash){let tmpOptions=Object.assign({},_DefaultConfiguration,pOptions);super(pFable,tmpOptions,pServiceHash);this._activeModals=[];this._activeTooltips=[];this._activeToasts=[];this._idCounter=0;this._overlay=new libPictModalOverlay(this);this._confirm=new libPictModalConfirm(this);this._window=new libPictModalWindow(this);this._toast=new libPictModalToast(this);this._tooltip=new libPictModalTooltip(this);this._panel=new libPictModalPanel(this);this._dropdown=new libPictModalDropdown(this);this._shell=new libPictModalShell(this);}onBeforeInitialize(){super.onBeforeInitialize();// Ensure the root class is on the body for CSS variable scoping
|
|
2417
2483
|
if(typeof document!=='undefined'&&document.body){if(!document.body.classList.contains('pict-modal-root')){document.body.classList.add('pict-modal-root');}}return super.onBeforeInitialize();}/**
|
|
2418
2484
|
* Generate a unique ID for DOM elements.
|
|
2419
2485
|
*
|
|
@@ -2508,7 +2574,7 @@ if(typeof document!=='undefined'&&document.body){if(!document.body.classList.con
|
|
|
2508
2574
|
* Clean up all DOM elements when the view is destroyed.
|
|
2509
2575
|
*//**
|
|
2510
2576
|
* Destroy all active panels.
|
|
2511
|
-
*/destroyPanels(){this._panel.destroyAll();}destroy(){this.dismissAll();this.destroyPanels();this._overlay.destroy();this._toast.destroy();if(typeof super.destroy==='function'){return super.destroy();}}}module.exports=PictSectionModal;module.exports.default_configuration=_DefaultConfiguration;},{"./Pict-Modal-Confirm.js":
|
|
2577
|
+
*/destroyPanels(){this._panel.destroyAll();}destroy(){this.dismissAll();this.destroyPanels();this._overlay.destroy();this._toast.destroy();if(typeof super.destroy==='function'){return super.destroy();}}}module.exports=PictSectionModal;module.exports.default_configuration=_DefaultConfiguration;},{"./Pict-Modal-Confirm.js":15,"./Pict-Modal-Dropdown.js":16,"./Pict-Modal-Overlay.js":17,"./Pict-Modal-Panel.js":18,"./Pict-Modal-Shell.js":19,"./Pict-Modal-Toast.js":20,"./Pict-Modal-Tooltip.js":21,"./Pict-Modal-Window.js":22,"./Pict-Section-Modal-DefaultConfiguration.js":23,"pict-view":69}],25:[function(require,module,exports){/**
|
|
2512
2578
|
* Pict Provider: Theme
|
|
2513
2579
|
*
|
|
2514
2580
|
* Runtime theme manager for Pict applications. Registers theme bundles
|
|
@@ -2659,7 +2725,7 @@ if(this.pict&&this.pict.CSSMap&&typeof this.pict.CSSMap.removeCSS==='function'){
|
|
|
2659
2725
|
* For 'system', subscribes to prefers-color-scheme.
|
|
2660
2726
|
*/_applyMode(pMode,pStrategy){this._detachSystemListener();let tmpResolved=pMode;if(pMode==='system'){tmpResolved=this._readSystemPreference();this._attachSystemListener(pStrategy);}this._resolvedMode=tmpResolved==='dark'?'dark':'light';this._writeHTMLClass(this._resolvedMode);}_writeHTMLClass(pResolvedMode){if(typeof document==='undefined'||!document.documentElement||!document.documentElement.classList)return;let tmpList=document.documentElement.classList;if(pResolvedMode==='dark'){tmpList.remove(HTML_CLASS_LIGHT);tmpList.add(HTML_CLASS_DARK);}else{tmpList.remove(HTML_CLASS_DARK);tmpList.add(HTML_CLASS_LIGHT);}}_readSystemPreference(){if(typeof window==='undefined'||typeof window.matchMedia!=='function')return'light';try{return window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}catch(pError){return'light';}}_attachSystemListener(pStrategy){if(typeof window==='undefined'||typeof window.matchMedia!=='function')return;try{let tmpSelf=this;let tmpMQ=window.matchMedia('(prefers-color-scheme: dark)');let tmpHandler=function tmpHandler(){let tmpResolved=tmpMQ.matches?'dark':'light';tmpSelf._resolvedMode=tmpResolved;tmpSelf._writeHTMLClass(tmpResolved);};if(typeof tmpMQ.addEventListener==='function'){tmpMQ.addEventListener('change',tmpHandler);}else if(typeof tmpMQ.addListener==='function'){tmpMQ.addListener(tmpHandler);}this._systemMediaQuery=tmpMQ;this._systemListener=tmpHandler;}catch(pError){// Older browser; leave system listener unattached.
|
|
2661
2727
|
}}_detachSystemListener(){if(!this._systemMediaQuery||!this._systemListener)return;try{if(typeof this._systemMediaQuery.removeEventListener==='function'){this._systemMediaQuery.removeEventListener('change',this._systemListener);}else if(typeof this._systemMediaQuery.removeListener==='function'){this._systemMediaQuery.removeListener(this._systemListener);}}catch(pError){// noop
|
|
2662
|
-
}this._systemMediaQuery=null;this._systemListener=null;}}PictProviderTheme.default_configuration=_ProviderConfiguration;module.exports=PictProviderTheme;module.exports.STYLE_ELEMENT_ID=STYLE_ELEMENT_ID;module.exports.HTML_CLASS_LIGHT=HTML_CLASS_LIGHT;module.exports.HTML_CLASS_DARK=HTML_CLASS_DARK;module.exports.CSS_VAR_PREFIX=CSS_VAR_PREFIX;},{"./templates/Pict-Template-Theme.js":
|
|
2728
|
+
}this._systemMediaQuery=null;this._systemListener=null;}}PictProviderTheme.default_configuration=_ProviderConfiguration;module.exports=PictProviderTheme;module.exports.STYLE_ELEMENT_ID=STYLE_ELEMENT_ID;module.exports.HTML_CLASS_LIGHT=HTML_CLASS_LIGHT;module.exports.HTML_CLASS_DARK=HTML_CLASS_DARK;module.exports.CSS_VAR_PREFIX=CSS_VAR_PREFIX;},{"./templates/Pict-Template-Theme.js":26,"./templates/Pict-Template-ThemeAsset.js":27,"./templates/Pict-Template-ThemeImage.js":28,"./templates/Pict-Template-ThemeVar.js":29,"pict-provider":7}],26:[function(require,module,exports){/**
|
|
2663
2729
|
* Pict template expression: {~Theme:Path~}
|
|
2664
2730
|
*
|
|
2665
2731
|
* Resolves a token path against the active theme bundle and returns the
|
|
@@ -2667,7 +2733,7 @@ if(this.pict&&this.pict.CSSMap&&typeof this.pict.CSSMap.removeCSS==='function'){
|
|
|
2667
2733
|
* so paths like 'Tokens.Color.Background.Primary' or 'Brand.Name' work.
|
|
2668
2734
|
*
|
|
2669
2735
|
* Returns an empty string if no theme is active or the path is missing.
|
|
2670
|
-
*/const libPictTemplate=require('pict-template');class PictTemplateTheme extends libPictTemplate{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this.addPattern('{~Theme:','~}');}render(pTemplateHash){let tmpPath=(pTemplateHash||'').trim();if(!tmpPath)return'';let tmpProvider=this._findThemeProvider();if(!tmpProvider)return'';let tmpValue=tmpProvider.token(tmpPath);if(tmpValue===null||typeof tmpValue==='undefined')return'';return String(tmpValue);}_findThemeProvider(){if(!this.pict||!this.pict.providers)return null;return this.pict.providers['Theme']||null;}}module.exports=PictTemplateTheme;},{"pict-template":
|
|
2736
|
+
*/const libPictTemplate=require('pict-template');class PictTemplateTheme extends libPictTemplate{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this.addPattern('{~Theme:','~}');}render(pTemplateHash){let tmpPath=(pTemplateHash||'').trim();if(!tmpPath)return'';let tmpProvider=this._findThemeProvider();if(!tmpProvider)return'';let tmpValue=tmpProvider.token(tmpPath);if(tmpValue===null||typeof tmpValue==='undefined')return'';return String(tmpValue);}_findThemeProvider(){if(!this.pict||!this.pict.providers)return null;return this.pict.providers['Theme']||null;}}module.exports=PictTemplateTheme;},{"pict-template":67}],27:[function(require,module,exports){/**
|
|
2671
2737
|
* Pict template expression: {~ThemeAsset:Category.Name~}
|
|
2672
2738
|
*
|
|
2673
2739
|
* Returns the contents of a named SVG (or other) asset from the active
|
|
@@ -2676,12 +2742,12 @@ if(this.pict&&this.pict.CSSMap&&typeof this.pict.CSSMap.removeCSS==='function'){
|
|
|
2676
2742
|
*
|
|
2677
2743
|
* {~ThemeAsset:SVG.Logo~} -> bundle.SVG.Logo
|
|
2678
2744
|
* {~ThemeAsset:SVG.Icons.Foo~} -> bundle.SVG.Icons.Foo
|
|
2679
|
-
*/const libPictTemplate=require('pict-template');class PictTemplateThemeAsset extends libPictTemplate{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this.addPattern('{~ThemeAsset:','~}');}render(pTemplateHash){let tmpPath=(pTemplateHash||'').trim();if(!tmpPath)return'';let tmpDot=tmpPath.indexOf('.');if(tmpDot<0)return'';let tmpCategory=tmpPath.substring(0,tmpDot);let tmpName=tmpPath.substring(tmpDot+1);let tmpProvider=this._findThemeProvider();if(!tmpProvider)return'';let tmpValue=tmpProvider.asset(tmpCategory,tmpName);if(tmpValue===null||typeof tmpValue==='undefined')return'';return String(tmpValue);}_findThemeProvider(){if(!this.pict||!this.pict.providers)return null;return this.pict.providers['Theme']||null;}}module.exports=PictTemplateThemeAsset;},{"pict-template":
|
|
2745
|
+
*/const libPictTemplate=require('pict-template');class PictTemplateThemeAsset extends libPictTemplate{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this.addPattern('{~ThemeAsset:','~}');}render(pTemplateHash){let tmpPath=(pTemplateHash||'').trim();if(!tmpPath)return'';let tmpDot=tmpPath.indexOf('.');if(tmpDot<0)return'';let tmpCategory=tmpPath.substring(0,tmpDot);let tmpName=tmpPath.substring(tmpDot+1);let tmpProvider=this._findThemeProvider();if(!tmpProvider)return'';let tmpValue=tmpProvider.asset(tmpCategory,tmpName);if(tmpValue===null||typeof tmpValue==='undefined')return'';return String(tmpValue);}_findThemeProvider(){if(!this.pict||!this.pict.providers)return null;return this.pict.providers['Theme']||null;}}module.exports=PictTemplateThemeAsset;},{"pict-template":67}],28:[function(require,module,exports){/**
|
|
2680
2746
|
* Pict template expression: {~ThemeImage:Name~}
|
|
2681
2747
|
*
|
|
2682
2748
|
* Returns the URL or data URL stored at bundle.Image[Name] in the active
|
|
2683
2749
|
* theme bundle. Convenience over {~ThemeAsset:Image.Name~}.
|
|
2684
|
-
*/const libPictTemplate=require('pict-template');class PictTemplateThemeImage extends libPictTemplate{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this.addPattern('{~ThemeImage:','~}');}render(pTemplateHash){let tmpName=(pTemplateHash||'').trim();if(!tmpName)return'';let tmpProvider=this._findThemeProvider();if(!tmpProvider)return'';let tmpValue=tmpProvider.image(tmpName);if(tmpValue===null||typeof tmpValue==='undefined')return'';return String(tmpValue);}_findThemeProvider(){if(!this.pict||!this.pict.providers)return null;return this.pict.providers['Theme']||null;}}module.exports=PictTemplateThemeImage;},{"pict-template":
|
|
2750
|
+
*/const libPictTemplate=require('pict-template');class PictTemplateThemeImage extends libPictTemplate{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this.addPattern('{~ThemeImage:','~}');}render(pTemplateHash){let tmpName=(pTemplateHash||'').trim();if(!tmpName)return'';let tmpProvider=this._findThemeProvider();if(!tmpProvider)return'';let tmpValue=tmpProvider.image(tmpName);if(tmpValue===null||typeof tmpValue==='undefined')return'';return String(tmpValue);}_findThemeProvider(){if(!this.pict||!this.pict.providers)return null;return this.pict.providers['Theme']||null;}}module.exports=PictTemplateThemeImage;},{"pict-template":67}],29:[function(require,module,exports){/**
|
|
2685
2751
|
* Pict template expression: {~ThemeVar:Path~}
|
|
2686
2752
|
*
|
|
2687
2753
|
* Returns a CSS `var(--theme-...)` reference for a token path under
|
|
@@ -2690,7 +2756,7 @@ if(this.pict&&this.pict.CSSMap&&typeof this.pict.CSSMap.removeCSS==='function'){
|
|
|
2690
2756
|
*
|
|
2691
2757
|
* Useful inside style attributes and in CSS-in-JS contexts where you want
|
|
2692
2758
|
* the live custom-property reference rather than the resolved value.
|
|
2693
|
-
*/const libPictTemplate=require('pict-template');class PictTemplateThemeVar extends libPictTemplate{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this.addPattern('{~ThemeVar:','~}');}render(pTemplateHash){let tmpPath=(pTemplateHash||'').trim();if(!tmpPath)return'';let tmpProvider=this._findThemeProvider();if(!tmpProvider)return'';return tmpProvider.cssVar(tmpPath);}_findThemeProvider(){if(!this.pict||!this.pict.providers)return null;return this.pict.providers['Theme']||null;}}module.exports=PictTemplateThemeVar;},{"pict-template":
|
|
2759
|
+
*/const libPictTemplate=require('pict-template');class PictTemplateThemeVar extends libPictTemplate{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this.addPattern('{~ThemeVar:','~}');}render(pTemplateHash){let tmpPath=(pTemplateHash||'').trim();if(!tmpPath)return'';let tmpProvider=this._findThemeProvider();if(!tmpProvider)return'';return tmpProvider.cssVar(tmpPath);}_findThemeProvider(){if(!this.pict||!this.pict.providers)return null;return this.pict.providers['Theme']||null;}}module.exports=PictTemplateThemeVar;},{"pict-template":67}],30:[function(require,module,exports){/**
|
|
2694
2760
|
* pict-section-theme — entry point.
|
|
2695
2761
|
*
|
|
2696
2762
|
* Bundles every Retold-ecosystem theme and exposes five reusable views:
|
|
@@ -2876,7 +2942,7 @@ module.exports.Scale=libThemeScale;// the scale helper module
|
|
|
2876
2942
|
module.exports.Persistence=libThemePersistence;// the persistence helper module
|
|
2877
2943
|
// Theme-Logo is exposed as a sub-module path, not a top-level field —
|
|
2878
2944
|
// see the comment near the imports above.
|
|
2879
|
-
module.exports.registerCatalog=registerCatalog;module.exports.listCatalog=listCatalog;module.exports.install=install;module.exports.clearPersistence=clearPersistence;},{"./Theme-Brand.js":
|
|
2945
|
+
module.exports.registerCatalog=registerCatalog;module.exports.listCatalog=listCatalog;module.exports.install=install;module.exports.clearPersistence=clearPersistence;},{"./Theme-Brand.js":31,"./Theme-Persistence.js":33,"./Theme-Scale.js":34,"./themes/_catalog.js":38,"./views/PictView-Theme-BottomBar.js":58,"./views/PictView-Theme-Brand-Mark.js":59,"./views/PictView-Theme-BrandStrip.js":60,"./views/PictView-Theme-Button.js":61,"./views/PictView-Theme-ModeToggle.js":62,"./views/PictView-Theme-Picker.js":63,"./views/PictView-Theme-ScaleSelect.js":64,"./views/PictView-Theme-TopBar.js":65,"pict-provider":7,"pict-provider-theme":25}],31:[function(require,module,exports){/**
|
|
2880
2946
|
* Theme-Brand — app-level brand identity (icon + colors) that overlays
|
|
2881
2947
|
* the active theme.
|
|
2882
2948
|
*
|
|
@@ -3029,7 +3095,7 @@ let tmpDark='.theme-dark {\n'+'\t--brand-color-primary-mode: '+tmpC.PrimaryDa
|
|
|
3029
3095
|
if(typeof console!=='undefined'&&console.warn){console.warn('Theme-Brand.applyBrand: bad brand object — needs Colors.Primary + Colors.Secondary as strings.');}return _activeBrand;}_activeBrand=tmpNorm;_injectStyleElement(_buildCSS(tmpNorm));_injectFaviconLinks(tmpNorm);_fireChange(tmpNorm,tmpPrev);return tmpNorm;}function getActive(){return _activeBrand;}function onChange(fCallback){if(typeof fCallback!=='function')return function(){};_listeners.push(fCallback);return function(){offChange(fCallback);};}function offChange(fCallback){let tmpIdx=_listeners.indexOf(fCallback);if(tmpIdx>=0)_listeners.splice(tmpIdx,1);}function _fireChange(pNew,pOld){for(let i=0;i<_listeners.length;i++){try{_listeners[i](pNew,pOld);}catch(pErr){/* swallow — listener failure must not break callers */}}}/**
|
|
3030
3096
|
* Reset to no-brand state and detach the injected style. Tests use this;
|
|
3031
3097
|
* runtime hosts rarely need it.
|
|
3032
|
-
*/function reset(){applyBrand(null);_listeners=[];}module.exports={applyBrand:applyBrand,getActive:getActive,onChange:onChange,offChange:offChange,reset:reset,STYLE_ELEMENT_ID:STYLE_ELEMENT_ID,FAVICON_LINK_ID:FAVICON_LINK_ID,FAVICON_DARK_LINK_ID:FAVICON_DARK_LINK_ID};},{}],
|
|
3098
|
+
*/function reset(){applyBrand(null);_listeners=[];}module.exports={applyBrand:applyBrand,getActive:getActive,onChange:onChange,offChange:offChange,reset:reset,STYLE_ELEMENT_ID:STYLE_ELEMENT_ID,FAVICON_LINK_ID:FAVICON_LINK_ID,FAVICON_DARK_LINK_ID:FAVICON_DARK_LINK_ID};},{}],32:[function(require,module,exports){/**
|
|
3033
3099
|
* Theme-Icons — single source of truth for the inline SVG glyphs the
|
|
3034
3100
|
* theme section uses (sun, moon, system / monitor, plus a chevron for
|
|
3035
3101
|
* dropdown triggers).
|
|
@@ -3085,7 +3151,7 @@ return'<svg class="pict-theme-icon pict-theme-icon-paired"'+' width="'+tmpSize*1
|
|
|
3085
3151
|
* @param {string} pStrategy - 'single' or 'system'/'paired'
|
|
3086
3152
|
* @param {string} pDefaultMode - 'light' or 'dark' (only consulted for single)
|
|
3087
3153
|
* @param {number} [pSizePx]
|
|
3088
|
-
*/function iconForTheme(pStrategy,pDefaultMode,pSizePx){if(pStrategy==='single'){return pDefaultMode==='dark'?iconMoon(pSizePx):iconSun(pSizePx);}return iconPaired(pSizePx);}module.exports={iconSun:iconSun,iconMoon:iconMoon,iconSystem:iconSystem,iconPaired:iconPaired,iconChevronDown:iconChevronDown,iconForTheme:iconForTheme,DEFAULT_SIZE_PX:_DEFAULT_SIZE_PX};},{}],
|
|
3154
|
+
*/function iconForTheme(pStrategy,pDefaultMode,pSizePx){if(pStrategy==='single'){return pDefaultMode==='dark'?iconMoon(pSizePx):iconSun(pSizePx);}return iconPaired(pSizePx);}module.exports={iconSun:iconSun,iconMoon:iconMoon,iconSystem:iconSystem,iconPaired:iconPaired,iconChevronDown:iconChevronDown,iconForTheme:iconForTheme,DEFAULT_SIZE_PX:_DEFAULT_SIZE_PX};},{}],33:[function(require,module,exports){/**
|
|
3089
3155
|
* Theme-Persistence — reads and writes the user's selected theme + mode
|
|
3090
3156
|
* to the browser's localStorage so a reload restores the same look.
|
|
3091
3157
|
*
|
|
@@ -3158,7 +3224,7 @@ return'<svg class="pict-theme-icon pict-theme-icon-paired"'+' width="'+tmpSize*1
|
|
|
3158
3224
|
*/function save(pKey,pState){let tmpStore=_getStorage();if(!tmpStore)return false;if(!pState||typeof pState.ThemeHash!=='string'||pState.ThemeHash.length===0)return false;let tmpEntry={Version:SCHEMA_VERSION,ThemeHash:pState.ThemeHash,Mode:typeof pState.Mode==='string'&&pState.Mode.length>0?pState.Mode:null,Scale:typeof pState.Scale==='number'&&isFinite(pState.Scale)&&pState.Scale>0?pState.Scale:null,SavedAt:new Date().toISOString()};try{tmpStore.setItem(pKey,JSON.stringify(tmpEntry));return true;}catch(pErr){return false;}}/**
|
|
3159
3225
|
* Remove the saved theme state for a key. Useful for "reset to
|
|
3160
3226
|
* defaults" actions.
|
|
3161
|
-
*/function clear(pKey){let tmpStore=_getStorage();if(!tmpStore)return false;try{tmpStore.removeItem(pKey);return true;}catch(pErr){return false;}}module.exports={resolveKey:resolveKey,load:load,save:save,clear:clear,STORAGE_PREFIX:STORAGE_PREFIX,SCHEMA_VERSION:SCHEMA_VERSION};},{}],
|
|
3227
|
+
*/function clear(pKey){let tmpStore=_getStorage();if(!tmpStore)return false;try{tmpStore.removeItem(pKey);return true;}catch(pErr){return false;}}module.exports={resolveKey:resolveKey,load:load,save:save,clear:clear,STORAGE_PREFIX:STORAGE_PREFIX,SCHEMA_VERSION:SCHEMA_VERSION};},{}],34:[function(require,module,exports){/**
|
|
3162
3228
|
* Theme-Scale — viewport scale (zoom) selector independent of theme bundles.
|
|
3163
3229
|
*
|
|
3164
3230
|
* Scale is a *user preference*, not a property of any particular theme:
|
|
@@ -3214,7 +3280,7 @@ return':root {\n'+'\t'+CSS_VAR_NAME+': '+pScale+';\n'+'}\n'+'html {\n'+'\tzoom:
|
|
|
3214
3280
|
*/function applyScale(pScale){let tmpPrev=_activeScale;let tmpNext=_clamp(pScale);_activeScale=tmpNext;_injectStyleElement(_buildCSS(tmpNext));if(tmpPrev!==tmpNext){_fireChange(tmpNext,tmpPrev);}return tmpNext;}function getActive(){return _activeScale;}function onChange(fCallback){if(typeof fCallback!=='function')return function(){};_listeners.push(fCallback);return function(){offChange(fCallback);};}function offChange(fCallback){let tmpIdx=_listeners.indexOf(fCallback);if(tmpIdx>=0)_listeners.splice(tmpIdx,1);}function _fireChange(pNewScale,pOldScale){for(let i=0;i<_listeners.length;i++){try{_listeners[i](pNewScale,pOldScale);}catch(pErr){/* listener failures must not break callers */}}}/**
|
|
3215
3281
|
* Reset to default scale and remove the injected style element. Useful
|
|
3216
3282
|
* for tests + "reset to defaults" affordances.
|
|
3217
|
-
*/function reset(){_activeScale=DEFAULT_SCALE;if(typeof document!=='undefined'){let tmpStyleEl=document.getElementById(STYLE_ELEMENT_ID);if(tmpStyleEl&&tmpStyleEl.parentNode)tmpStyleEl.parentNode.removeChild(tmpStyleEl);}_listeners=[];}module.exports={applyScale:applyScale,getActive:getActive,onChange:onChange,offChange:offChange,reset:reset,PRESETS:PRESETS,DEFAULT_SCALE:DEFAULT_SCALE,MIN_SCALE:MIN_SCALE,MAX_SCALE:MAX_SCALE,STYLE_ELEMENT_ID:STYLE_ELEMENT_ID,CSS_VAR_NAME:CSS_VAR_NAME};},{}],
|
|
3283
|
+
*/function reset(){_activeScale=DEFAULT_SCALE;if(typeof document!=='undefined'){let tmpStyleEl=document.getElementById(STYLE_ELEMENT_ID);if(tmpStyleEl&&tmpStyleEl.parentNode)tmpStyleEl.parentNode.removeChild(tmpStyleEl);}_listeners=[];}module.exports={applyScale:applyScale,getActive:getActive,onChange:onChange,offChange:offChange,reset:reset,PRESETS:PRESETS,DEFAULT_SCALE:DEFAULT_SCALE,MIN_SCALE:MIN_SCALE,MAX_SCALE:MAX_SCALE,STYLE_ELEMENT_ID:STYLE_ELEMENT_ID,CSS_VAR_NAME:CSS_VAR_NAME};},{}],35:[function(require,module,exports){module.exports={"Hash":"1970s-console","Name":"1970s Console","Category":"Fun","Version":"0.0.1","Description":"Amber phosphor on brown-black Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#1A1000","Secondary":"#140C00","Tertiary":"#1E1400","Panel":"#1C1200","Viewer":"#100A00","Hover":"#2A1C00","Selected":"#3A2800","Thumb":"#140C00"},"Text":{"Primary":"#FFAA00","Secondary":"#DD8800","Muted":"#AA6600","Dim":"#884400","Placeholder":"#663300"},"Brand":{"Accent":"#FFCC00","AccentHover":"#FFDD44"},"Border":{"Default":"#2A1800","Light":"#3A2200"},"Status":{"Danger":"#FF4400","DangerMuted":"#AA3300"},"Scrollbar":{"Track":"#2A1800","Hover":"#3A2800"},"Selection":{"Background":"rgba(255, 204, 0, 0.2)"},"Focus":{"Outline":"#FFCC00"},"Syntax":{"Keyword":"#FFB000","String":"#FFD080","Number":"#FFB000","Comment":"#806020","Operator":"#FFB000","Punctuation":"#FFD080","Function":"#FFB000","Variable":"#FFE090","Type":"#FFB000","Builtin":"#FFB000","Property":"#FF6E40","Tag":"#FF6E40","AttrName":"#FFB000","AttrValue":"#FFD080"}},"Typography":{"Family":{"Sans":"'Courier New', 'Lucida Console', monospace","Mono":"'Courier New', 'Lucida Console', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#DD8800","Accent":"#FFCC00","Muted":"#884400","Light":"#1E1400","WarmBeige":"#201800","TealTint":"#1A1000","Lavender":"#1C1200","AmberTint":"#221800","PdfFill":"#201000","PdfText":"#FF4400"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.405Z","CompilerVersion":1};},{}],36:[function(require,module,exports){module.exports={"Hash":"1980s-console","Name":"1980s Console","Category":"Fun","Version":"0.0.1","Description":"Green phosphor on black Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#001200","Secondary":"#000E00","Tertiary":"#001600","Panel":"#001400","Viewer":"#000A00","Hover":"#002200","Selected":"#003800","Thumb":"#000E00"},"Text":{"Primary":"#00FF00","Secondary":"#00CC00","Muted":"#009900","Dim":"#006600","Placeholder":"#004400"},"Brand":{"Accent":"#00FF66","AccentHover":"#44FF88"},"Border":{"Default":"#002A00","Light":"#003A00"},"Status":{"Danger":"#FF0000","DangerMuted":"#AA0000"},"Scrollbar":{"Track":"#002A00","Hover":"#004400"},"Selection":{"Background":"rgba(0, 255, 102, 0.2)"},"Focus":{"Outline":"#00FF66"},"Syntax":{"Keyword":"#00FF00","String":"#90FF90","Number":"#FFFF00","Comment":"#208020","Operator":"#00FF00","Punctuation":"#90FF90","Function":"#00FF00","Variable":"#C0FFC0","Type":"#FFFF00","Builtin":"#FFFF00","Property":"#FF4040","Tag":"#FF4040","AttrName":"#FFFF00","AttrValue":"#90FF90"}},"Typography":{"Family":{"Sans":"'Courier New', monospace","Mono":"'Courier New', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#00CC00","Accent":"#00FF66","Muted":"#006600","Light":"#001600","WarmBeige":"#001A00","TealTint":"#001200","Lavender":"#001400","AmberTint":"#001800","PdfFill":"#140000","PdfText":"#FF0000"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.406Z","CompilerVersion":1};},{}],37:[function(require,module,exports){module.exports={"Hash":"1990s-website","Name":"1990s Web Site","Category":"Fun","Version":"0.0.1","Description":"Blue links on grey, beveled Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":"#C0C0C0","Secondary":"#B0B0B0","Tertiary":"#A8A8A8","Panel":"#B8B8B8","Viewer":"#D0D0D0","Hover":"#B8B8D0","Selected":"#000080","Thumb":"#B0B0B0"},"Text":{"Primary":"#000000","Secondary":"#000080","Muted":"#404040","Dim":"#606060","Placeholder":"#808080"},"Brand":{"Accent":"#0000FF","AccentHover":"#0000CC"},"Border":{"Default":"#808080","Light":"#A0A0A0"},"Status":{"Danger":"#FF0000","DangerMuted":"#990000"},"Scrollbar":{"Track":"#808080","Hover":"#606060"},"Selection":{"Background":"rgba(0, 0, 128, 0.3)"},"Focus":{"Outline":"#0000FF"},"Syntax":{"Keyword":"#0000FF","String":"#008000","Number":"#A52A2A","Comment":"#808080","Operator":"#000080","Punctuation":"#000000","Function":"#0000A0","Variable":"#000000","Type":"#A52A2A","Builtin":"#A52A2A","Property":"#800080","Tag":"#800080","AttrName":"#A52A2A","AttrValue":"#008000"}},"Typography":{"Family":{"Sans":"'Times New Roman', Times, serif","Mono":"'Courier New', Courier, monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#000080","Accent":"#0000FF","Muted":"#606060","Light":"#A8A8A8","WarmBeige":"#B0B0B0","TealTint":"#A0A0A0","Lavender":"#ABABD0","AmberTint":"#B8B0A0","PdfFill":"#C0A0A0","PdfText":"#FF0000"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.406Z","CompilerVersion":1};},{}],38:[function(require,module,exports){/**
|
|
3218
3284
|
* Theme Registry — runtime registry of every theme available to
|
|
3219
3285
|
* pict-section-theme.
|
|
3220
3286
|
*
|
|
@@ -3306,7 +3372,7 @@ get length(){return this._themes.size;}[Symbol.iterator](){return this._themes.v
|
|
|
3306
3372
|
const _Registry=new ThemeRegistry();// Numeric-index proxy: `registry[0]` returns the first entry, matching
|
|
3307
3373
|
// the legacy "catalog as array" shape. Wraps the singleton so existing
|
|
3308
3374
|
// `tmpEntry = _CATALOG[i]` loops keep working.
|
|
3309
|
-
const _IndexedRegistry=new Proxy(_Registry,{get(pTarget,pProp,pReceiver){if(typeof pProp==='string'&&/^\d+$/.test(pProp)){let tmpIdx=parseInt(pProp,10);let tmpList=pTarget.list();return tmpList[tmpIdx];}return Reflect.get(pTarget,pProp,pReceiver);},has(pTarget,pProp){if(typeof pProp==='string'&&/^\d+$/.test(pProp)){return parseInt(pProp,10)<pTarget.length;}return Reflect.has(pTarget,pProp);}});module.exports=_IndexedRegistry;module.exports.ThemeRegistry=ThemeRegistry;},{"./1970s-console.json":34,"./1980s-console.json":35,"./1990s-website.json":36,"./afternoon.json":38,"./cyberpunk.json":39,"./daylight.json":40,"./early-2000s.json":41,"./evening.json":42,"./forest.json":43,"./hotdog.json":44,"./mobile-debug.json":45,"./neo-tokyo.json":46,"./night.json":47,"./playground-corp.json":48,"./playground-starter.json":49,"./retold-content-system.json":50,"./retold-default.json":51,"./retold-manager.json":52,"./retold-mono.json":53,"./solarized-dark.json":54,"./synthwave.json":55,"./twilight.json":56}],38:[function(require,module,exports){module.exports={"Hash":"afternoon","Name":"Afternoon","Category":"Grey","Version":"0.0.1","Description":"Warm light grey, softer contrast Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":"#E8E4E0","Secondary":"#DAD6D2","Tertiary":"#D0CCC8","Panel":"#DDD9D5","Viewer":"#F0ECE8","Hover":"#CCC8C4","Selected":"#B8B4B0","Thumb":"#DAD6D2"},"Text":{"Primary":"#2A2A2A","Secondary":"#404040","Muted":"#707070","Dim":"#909090","Placeholder":"#B0B0B0"},"Brand":{"Accent":"#555555","AccentHover":"#333333"},"Border":{"Default":"#C0BCB8","Light":"#D0CCC8"},"Status":{"Danger":"#AA3333","DangerMuted":"#886655"},"Scrollbar":{"Track":"#B8B4B0","Hover":"#A0A09C"},"Selection":{"Background":"rgba(85, 85, 85, 0.2)"},"Focus":{"Outline":"#555555"},"Syntax":{"Keyword":"#7038A0","String":"#2E7A3A","Number":"#A86B00","Comment":"#888888","Operator":"#1F6FB5","Punctuation":"#666666","Function":"#3357C7","Variable":"#222222","Type":"#A86B00","Builtin":"#A86B00","Property":"#B62828","Tag":"#B62828","AttrName":"#A86B00","AttrValue":"#2E7A3A"}},"Typography":{"Family":{"Sans":"Georgia, 'Times New Roman', serif","Mono":"'Courier New', Courier, monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#404040","Accent":"#555555","Muted":"#909090","Light":"#D0CCC8","WarmBeige":"#DAD6D2","TealTint":"#CCC8C4","Lavender":"#D2D0CE","AmberTint":"#D8D2C8","PdfFill":"#D8C8C0","PdfText":"#AA3333"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.406Z","CompilerVersion":1};},{}],39:[function(require,module,exports){module.exports={"Hash":"cyberpunk","Name":"Cyberpunk","Category":"Fun","Version":"0.0.1","Description":"Electric green on black Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#0A0E0A","Secondary":"#060806","Tertiary":"#0E120E","Panel":"#0C100C","Viewer":"#040604","Hover":"#142014","Selected":"#1A3A1A","Thumb":"#060806"},"Text":{"Primary":"#C8FFC8","Secondary":"#A0D8A0","Muted":"#608860","Dim":"#406040","Placeholder":"#305030"},"Brand":{"Accent":"#00FF41","AccentHover":"#44FF77"},"Border":{"Default":"#1A2A1A","Light":"#224022"},"Status":{"Danger":"#FF3333","DangerMuted":"#AA2222"},"Scrollbar":{"Track":"#1A2A1A","Hover":"#2A4A2A"},"Selection":{"Background":"rgba(0, 255, 65, 0.2)"},"Focus":{"Outline":"#00FF41"},"Syntax":{"Keyword":"#FF00FF","String":"#00FF41","Number":"#FFFF00","Comment":"#406040","Operator":"#00FFFF","Punctuation":"#A0D8A0","Function":"#FF00FF","Variable":"#C8FFC8","Type":"#FFFF00","Builtin":"#FFFF00","Property":"#FF3333","Tag":"#FF3333","AttrName":"#FFFF00","AttrValue":"#00FF41"}},"Typography":{"Family":{"Sans":"'Lucida Console', 'Courier New', monospace","Mono":"'Lucida Console', 'Courier New', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#A0D8A0","Accent":"#00FF41","Muted":"#406040","Light":"#0E120E","WarmBeige":"#101610","TealTint":"#0C140C","Lavender":"#0E120E","AmberTint":"#141810","PdfFill":"#181010","PdfText":"#FF3333"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.406Z","CompilerVersion":1};},{}],40:[function(require,module,exports){module.exports={"Hash":"daylight","Name":"Daylight","Category":"Grey","Version":"0.0.1","Description":"Bright white, dark text Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":"#FFFFFF","Secondary":"#F0F0F0","Tertiary":"#E8E8E8","Panel":"#F5F5F5","Viewer":"#FAFAFA","Hover":"#E0E0E0","Selected":"#C8C8C8","Thumb":"#F0F0F0"},"Text":{"Primary":"#1A1A1A","Secondary":"#333333","Muted":"#666666","Dim":"#888888","Placeholder":"#AAAAAA"},"Brand":{"Accent":"#444444","AccentHover":"#222222"},"Border":{"Default":"#D0D0D0","Light":"#E0E0E0"},"Status":{"Danger":"#CC0000","DangerMuted":"#884444"},"Scrollbar":{"Track":"#C0C0C0","Hover":"#A0A0A0"},"Selection":{"Background":"rgba(68, 68, 68, 0.2)"},"Focus":{"Outline":"#444444"},"Syntax":{"Keyword":"#7038A0","String":"#2E7A3A","Number":"#A86B00","Comment":"#888888","Operator":"#1F6FB5","Punctuation":"#444444","Function":"#3357C7","Variable":"#222222","Type":"#A86B00","Builtin":"#A86B00","Property":"#B62828","Tag":"#B62828","AttrName":"#A86B00","AttrValue":"#2E7A3A"}},"Typography":{"Family":{"Sans":"'Segoe UI', system-ui, -apple-system, sans-serif","Mono":"'SF Mono', 'Fira Code', 'Consolas', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#333333","Accent":"#444444","Muted":"#888888","Light":"#E8E8E8","WarmBeige":"#F0F0F0","TealTint":"#E0E0E0","Lavender":"#EBEBEB","AmberTint":"#F0EDE8","PdfFill":"#F0E0E0","PdfText":"#CC0000"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.407Z","CompilerVersion":1};},{}],41:[function(require,module,exports){module.exports={"Hash":"early-2000s","Name":"Early 2000s Web","Category":"Fun","Version":"0.0.1","Description":"Teal and silver, Web 2.0 Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":"#E8F4F8","Secondary":"#D0E8EE","Tertiary":"#C0DDE6","Panel":"#D8EEF2","Viewer":"#F0F8FA","Hover":"#B0D4E0","Selected":"#88C4D8","Thumb":"#D0E8EE"},"Text":{"Primary":"#1A3A4A","Secondary":"#2A4A5A","Muted":"#5A7A8A","Dim":"#7A9AAA","Placeholder":"#9ABACA"},"Brand":{"Accent":"#0099CC","AccentHover":"#00AADD"},"Border":{"Default":"#A0C8D8","Light":"#B8D8E4"},"Status":{"Danger":"#CC3300","DangerMuted":"#994422"},"Scrollbar":{"Track":"#A0C8D8","Hover":"#88B8CC"},"Selection":{"Background":"rgba(0, 153, 204, 0.2)"},"Focus":{"Outline":"#0099CC"},"Syntax":{"Keyword":"#1A4080","String":"#2E7A3A","Number":"#A86B00","Comment":"#888888","Operator":"#1F6FB5","Punctuation":"#333333","Function":"#3357C7","Variable":"#222222","Type":"#A86B00","Builtin":"#A86B00","Property":"#B62828","Tag":"#B62828","AttrName":"#A86B00","AttrValue":"#2E7A3A"}},"Typography":{"Family":{"Sans":"Verdana, Geneva, Tahoma, sans-serif","Mono":"'Lucida Console', Monaco, monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#2A4A5A","Accent":"#0099CC","Muted":"#7A9AAA","Light":"#C0DDE6","WarmBeige":"#D0E8EE","TealTint":"#B0D8E4","Lavender":"#C8DCE6","AmberTint":"#D8E0D0","PdfFill":"#E0C8C0","PdfText":"#CC3300"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.407Z","CompilerVersion":1};},{}],42:[function(require,module,exports){module.exports={"Hash":"evening","Name":"Evening","Category":"Grey","Version":"0.0.1","Description":"Medium grey, transitional Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#484848","Secondary":"#3C3C3C","Tertiary":"#424242","Panel":"#454545","Viewer":"#363636","Hover":"#525252","Selected":"#606060","Thumb":"#3C3C3C"},"Text":{"Primary":"#E0E0E0","Secondary":"#D0D0D0","Muted":"#A0A0A0","Dim":"#888888","Placeholder":"#707070"},"Brand":{"Accent":"#C0C0C0","AccentHover":"#E0E0E0"},"Border":{"Default":"#585858","Light":"#606060"},"Status":{"Danger":"#FF6666","DangerMuted":"#AA6666"},"Scrollbar":{"Track":"#585858","Hover":"#686868"},"Selection":{"Background":"rgba(192, 192, 192, 0.25)"},"Focus":{"Outline":"#C0C0C0"},"Syntax":{"Keyword":"#B894FF","String":"#A8D8B0","Number":"#FFB880","Comment":"#8A8A8A","Operator":"#7EC0FF","Punctuation":"#BBBBBB","Function":"#FFCC80","Variable":"#DDDDDD","Type":"#FFB880","Builtin":"#FFB880","Property":"#FF9494","Tag":"#FF9494","AttrName":"#FFB880","AttrValue":"#A8D8B0"}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, sans-serif","Mono":"'SF Mono', 'Fira Code', 'Consolas', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#D0D0D0","Accent":"#C0C0C0","Muted":"#888888","Light":"#424242","WarmBeige":"#484848","TealTint":"#3E3E3E","Lavender":"#444444","AmberTint":"#4A4640","PdfFill":"#4A3C3C","PdfText":"#FF6666"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.407Z","CompilerVersion":1};},{}],43:[function(require,module,exports){module.exports={"Hash":"forest","Name":"Forest","Category":"Fun","Version":"0.0.1","Description":"Deep greens and earth browns Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#1A2018","Secondary":"#141A12","Tertiary":"#1E2620","Panel":"#1C221A","Viewer":"#101410","Hover":"#283828","Selected":"#344834","Thumb":"#141A12"},"Text":{"Primary":"#D0DCC8","Secondary":"#B0C4A8","Muted":"#809878","Dim":"#607858","Placeholder":"#486040"},"Brand":{"Accent":"#6AAF5C","AccentHover":"#88CC78"},"Border":{"Default":"#2A3A28","Light":"#3A4A38"},"Status":{"Danger":"#CC4422","DangerMuted":"#884422"},"Scrollbar":{"Track":"#2A3A28","Hover":"#3A4A38"},"Selection":{"Background":"rgba(106, 175, 92, 0.25)"},"Focus":{"Outline":"#6AAF5C"},"Syntax":{"Keyword":"#D4E157","String":"#A5D6A7","Number":"#FFB74D","Comment":"#5D6F58","Operator":"#80CBC4","Punctuation":"#A8C8A0","Function":"#FFCC80","Variable":"#C8E6C9","Type":"#FFB74D","Builtin":"#FFB74D","Property":"#FF8A65","Tag":"#FF8A65","AttrName":"#FFB74D","AttrValue":"#A5D6A7"}},"Typography":{"Family":{"Sans":"'Palatino Linotype', 'Book Antiqua', Palatino, serif","Mono":"'Courier New', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#B0C4A8","Accent":"#6AAF5C","Muted":"#607858","Light":"#1E2620","WarmBeige":"#22281E","TealTint":"#1A221A","Lavender":"#1E2420","AmberTint":"#262218","PdfFill":"#261A18","PdfText":"#CC4422"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.407Z","CompilerVersion":1};},{}],44:[function(require,module,exports){module.exports={"Hash":"hotdog","Name":"Hotdog","Category":"Fun","Version":"0.0.1","Description":"Red and mustard yellow, garish Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#8B0000","Secondary":"#6B0000","Tertiary":"#7B0000","Panel":"#750000","Viewer":"#550000","Hover":"#AA1111","Selected":"#BB3300","Thumb":"#6B0000"},"Text":{"Primary":"#FFD700","Secondary":"#FFC000","Muted":"#CC9900","Dim":"#AA7700","Placeholder":"#886600"},"Brand":{"Accent":"#FFD700","AccentHover":"#FFEE44"},"Border":{"Default":"#AA2222","Light":"#BB3333"},"Status":{"Danger":"#FFFF00","DangerMuted":"#CCCC00"},"Scrollbar":{"Track":"#AA2222","Hover":"#CC3333"},"Selection":{"Background":"rgba(255, 215, 0, 0.3)"},"Focus":{"Outline":"#FFD700"},"Syntax":{"Keyword":"#FFD800","String":"#FFFFFF","Number":"#FFD800","Comment":"#9C2828","Operator":"#FFD800","Punctuation":"#FFFFFF","Function":"#FFD800","Variable":"#FFFFFF","Type":"#FFD800","Builtin":"#FFD800","Property":"#FFD800","Tag":"#FFD800","AttrName":"#FFD800","AttrValue":"#FFFFFF"}},"Typography":{"Family":{"Sans":"Impact, 'Arial Black', sans-serif","Mono":"'Courier New', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#FFC000","Accent":"#FFD700","Muted":"#AA7700","Light":"#7B0000","WarmBeige":"#800000","TealTint":"#6B0000","Lavender":"#780000","AmberTint":"#7A1000","PdfFill":"#6B0000","PdfText":"#FFFF00"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.407Z","CompilerVersion":1};},{}],45:[function(require,module,exports){module.exports={"Hash":"mobile-debug","Name":"Mobile Container Debug","Category":"Debug","Version":"0.0.1","Description":"Unique color per container for layout debugging Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":"#FF0000","Secondary":"#00CCCC","Tertiary":"#00AA00","Panel":"#FFAA00","Viewer":"#333333","Hover":"rgba(255, 255, 255, 0.2)","Selected":"rgba(255, 255, 255, 0.3)","Thumb":"#AA00AA"},"Text":{"Primary":"#FFFFFF","Secondary":"#EEEEEE","Muted":"#CCCCCC","Dim":"#AAAAAA","Placeholder":"#888888"},"Brand":{"Accent":"#FFFF00","AccentHover":"#FFFF88"},"Border":{"Default":"#FFFFFF","Light":"#CCCCCC"},"Status":{"Danger":"#FF0000","DangerMuted":"#CC4444"},"Scrollbar":{"Track":"#888888","Hover":"#AAAAAA"},"Selection":{"Background":"rgba(255, 255, 0, 0.3)"},"Focus":{"Outline":"#FFFF00"},"Syntax":{"Keyword":"#A626A4","String":"#50A14F","Number":"#986801","Comment":"#A0A1A7","Operator":"#0184BC","Punctuation":"#383A42","Function":"#4078F2","Variable":"#383A42","Type":"#C18401","Builtin":"#986801","Property":"#E45649","Tag":"#E45649","AttrName":"#986801","AttrValue":"#50A14F"}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, sans-serif","Mono":"'SF Mono', 'Consolas', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#FFFFFF","Accent":"#FFFF00","Muted":"#CCCCCC","Light":"#333333","WarmBeige":"#FFAA00","TealTint":"#00CCCC","Lavender":"#AA00AA","AmberTint":"#FFAA00","PdfFill":"#FF4444","PdfText":"#FFFFFF"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],46:[function(require,module,exports){module.exports={"Hash":"neo-tokyo","Name":"Neo-Tokyo","Category":"Fun","Version":"0.0.1","Description":"Neon pink on dark navy Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#0D0D2B","Secondary":"#080820","Tertiary":"#121235","Panel":"#0F0F28","Viewer":"#060615","Hover":"#1A1A42","Selected":"#2A1845","Thumb":"#080820"},"Text":{"Primary":"#E8E0F0","Secondary":"#D0C8E0","Muted":"#9088A8","Dim":"#6860A0","Placeholder":"#504888"},"Brand":{"Accent":"#FF2D8A","AccentHover":"#FF5AA0"},"Border":{"Default":"#2A2050","Light":"#382868"},"Status":{"Danger":"#FF4466","DangerMuted":"#AA3355"},"Scrollbar":{"Track":"#2A2050","Hover":"#3A3068"},"Selection":{"Background":"rgba(255, 45, 138, 0.25)"},"Focus":{"Outline":"#FF2D8A"},"Syntax":{"Keyword":"#FF4E9F","String":"#A1FFCE","Number":"#FFD93D","Comment":"#807A9E","Operator":"#7DF9FF","Punctuation":"#C0BCEB","Function":"#FFCC80","Variable":"#E0D8FF","Type":"#FFD93D","Builtin":"#FFD93D","Property":"#FF6E6E","Tag":"#FF6E6E","AttrName":"#FFD93D","AttrValue":"#A1FFCE"}},"Typography":{"Family":{"Sans":"'Courier New', monospace","Mono":"'Courier New', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#D0C8E0","Accent":"#FF2D8A","Muted":"#6860A0","Light":"#121235","WarmBeige":"#141438","TealTint":"#100E30","Lavender":"#141232","AmberTint":"#1A1228","PdfFill":"#1A1028","PdfText":"#FF4466"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],47:[function(require,module,exports){module.exports={"Hash":"night","Name":"Night","Category":"Grey","Version":"0.0.1","Description":"Near-black, minimal contrast Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#0A0A0A","Secondary":"#060606","Tertiary":"#0E0E0E","Panel":"#0C0C0C","Viewer":"#040404","Hover":"#161616","Selected":"#252525","Thumb":"#060606"},"Text":{"Primary":"#888888","Secondary":"#707070","Muted":"#555555","Dim":"#444444","Placeholder":"#333333"},"Brand":{"Accent":"#666666","AccentHover":"#808080"},"Border":{"Default":"#1A1A1A","Light":"#222222"},"Status":{"Danger":"#AA4444","DangerMuted":"#663333"},"Scrollbar":{"Track":"#1A1A1A","Hover":"#2A2A2A"},"Selection":{"Background":"rgba(102, 102, 102, 0.2)"},"Focus":{"Outline":"#666666"},"Syntax":{"Keyword":"#C28FFF","String":"#B0E0B0","Number":"#FFA070","Comment":"#888888","Operator":"#80C8FF","Punctuation":"#BBBBBB","Function":"#FFD080","Variable":"#DDDDDD","Type":"#FFB870","Builtin":"#FFB870","Property":"#FF9090","Tag":"#FF9090","AttrName":"#FFB870","AttrValue":"#B0E0B0"}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, sans-serif","Mono":"'SF Mono', 'Fira Code', 'Consolas', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#707070","Accent":"#666666","Muted":"#444444","Light":"#0E0E0E","WarmBeige":"#121212","TealTint":"#0C0C0C","Lavender":"#101010","AmberTint":"#141210","PdfFill":"#141010","PdfText":"#AA4444"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],48:[function(require,module,exports){module.exports={"Hash":"playground-corp","Name":"Playground Corp","Version":"0.0.1","Description":"A different paired starter — corporate teal palette, rounder corners.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#fbfbfd","Dark":"#0e1416"},"Secondary":{"Light":"#eef3f6","Dark":"#152024"},"Tertiary":{"Light":"#dde7ec","Dark":"#1e2c30"},"Panel":{"Light":"#ffffff","Dark":"#162126"},"Hover":{"Light":"#e5edf1","Dark":"#1d292e"}},"Text":{"Primary":{"Light":"#0a1d22","Dark":"#e3edf0"},"Secondary":{"Light":"#3a5b65","Dark":"#a8c0c8"},"Muted":{"Light":"#647e87","Dark":"#7a929a"},"OnBrand":{"Light":"#ffffff","Dark":"#ffffff"}},"Brand":{"Primary":{"Light":"#117a8b","Dark":"#3ec0d4"},"PrimaryHover":{"Light":"#0e6271","Dark":"#5fd0e0"},"Accent":{"Light":"#d97706","Dark":"#fb923c"}},"Border":{"Default":{"Light":"#cfdce1","Dark":"#2c3a3f"},"Strong":{"Light":"#86a3ac","Dark":"#4d5e64"}},"Status":{"Success":{"Light":"#0f7a52","Dark":"#34d399"},"Warning":{"Light":"#b45309","Dark":"#fbbf24"},"Error":{"Light":"#9f1239","Dark":"#fb7185"},"Info":{"Light":"#1e6fbe","Dark":"#60a5fa"}},"Syntax":{"Keyword":{"Light":"#a626a4","Dark":"#c678dd"},"String":{"Light":"#50a14f","Dark":"#98c379"},"Number":{"Light":"#986801","Dark":"#d19a66"},"Comment":{"Light":"#a0a1a7","Dark":"#7f848e"},"Operator":{"Light":"#0184bc","Dark":"#56b6c2"},"Punctuation":{"Light":"#383a42","Dark":"#abb2bf"},"Function":{"Light":"#4078f2","Dark":"#61afef"},"Variable":{"Light":"#383a42","Dark":"#e06c75"},"Type":{"Light":"#c18401","Dark":"#e5c07b"},"Builtin":{"Light":"#986801","Dark":"#d19a66"},"Property":{"Light":"#e45649","Dark":"#e06c75"},"Tag":{"Light":"#e45649","Dark":"#e06c75"},"AttrName":{"Light":"#986801","Dark":"#d19a66"},"AttrValue":{"Light":"#50a14f","Dark":"#98c379"}}},"Typography":{"Family":{"Sans":"Inter, system-ui, sans-serif","Mono":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},"Size":{"SM":"0.875rem","MD":"1rem","LG":"1.25rem"},"Weight":{"Regular":"400","Bold":"700"}},"Spacing":{"XS":"4px","SM":"8px","MD":"14px","LG":"20px","XL":"28px"},"Radius":{"SM":"4px","MD":"10px","LG":"16px"}},"Brand":{"Name":"Corp"},"Aliases":{"--pict-modal-overlay-bg":"Color.Background.Tertiary","--pict-modal-bg":"Color.Background.Panel","--pict-modal-fg":"Color.Text.Primary","--pict-modal-border":"Color.Border.Default","--pict-modal-shadow":"Color.Border.Strong","--pict-modal-header-bg":"Color.Background.Secondary","--pict-modal-header-fg":"Color.Text.Primary","--pict-modal-header-border":"Color.Border.Default","--pict-modal-btn-bg":"Color.Background.Secondary","--pict-modal-btn-fg":"Color.Text.Primary","--pict-modal-btn-hover-bg":"Color.Background.Hover","--pict-modal-btn-primary-bg":"Color.Brand.Primary","--pict-modal-btn-primary-fg":"Color.Text.OnBrand","--pict-modal-btn-primary-hover-bg":"Color.Brand.PrimaryHover","--pict-modal-btn-danger-bg":"Color.Status.Error","--pict-modal-btn-danger-fg":"Color.Text.OnBrand","--pict-modal-btn-danger-hover-bg":"Color.Status.Error","--pict-modal-toast-bg":"Color.Background.Panel","--pict-modal-toast-fg":"Color.Text.Primary","--pict-modal-toast-shadow":"Color.Border.Strong","--pict-modal-toast-success-bg":"Color.Status.Success","--pict-modal-toast-error-bg":"Color.Status.Error","--pict-modal-toast-warning-bg":"Color.Status.Warning","--pict-modal-toast-info-bg":"Color.Status.Info","--pict-modal-tooltip-bg":"Color.Background.Tertiary","--pict-modal-tooltip-fg":"Color.Text.Primary","--pict-modal-font-family":"Typography.Family.Sans","--pict-um-bg":"Color.Background.Panel","--pict-um-fg":"Color.Text.Primary","--pict-um-muted":"Color.Text.Muted","--pict-um-accent":"Color.Brand.Primary","--pict-um-border":"Color.Border.Default","--pict-um-border-soft":"Color.Border.Light","--pict-um-input-bg":"Color.Background.Primary","--pict-um-pill-bg":"Color.Background.Tertiary","--pict-um-font":"Typography.Family.Sans"}};},{}],49:[function(require,module,exports){module.exports={"Hash":"playground-starter","Name":"Playground Starter","Version":"0.0.1","Description":"A complete paired light/dark starter theme. Edit any token and watch the gallery reflow.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#ffffff","Dark":"#1a1a1a"},"Secondary":{"Light":"#f5f5f5","Dark":"#242424"},"Tertiary":{"Light":"#ebebeb","Dark":"#2e2e2e"},"Panel":{"Light":"#ffffff","Dark":"#222222"},"Hover":{"Light":"#f0f0f0","Dark":"#2a2a2a"}},"Text":{"Primary":{"Light":"#1a1a1a","Dark":"#ededed"},"Secondary":{"Light":"#454545","Dark":"#bdbdbd"},"Muted":{"Light":"#6b6b6b","Dark":"#888888"},"OnBrand":{"Light":"#ffffff","Dark":"#ffffff"}},"Brand":{"Primary":{"Light":"#3357c7","Dark":"#6b8eff"},"PrimaryHover":{"Light":"#2848b3","Dark":"#88a4ff"},"Accent":{"Light":"#c75033","Dark":"#ff8a6b"}},"Border":{"Default":{"Light":"#d6d6d6","Dark":"#3a3a3a"},"Strong":{"Light":"#a0a0a0","Dark":"#5a5a5a"}},"Status":{"Success":{"Light":"#2e7a3a","Dark":"#5fc377"},"Warning":{"Light":"#a86b00","Dark":"#f0b84a"},"Error":{"Light":"#b62828","Dark":"#ff7373"},"Info":{"Light":"#1f6fb5","Dark":"#5fb4ff"}},"Syntax":{"Keyword":{"Light":"#a626a4","Dark":"#c678dd"},"String":{"Light":"#50a14f","Dark":"#98c379"},"Number":{"Light":"#986801","Dark":"#d19a66"},"Comment":{"Light":"#a0a1a7","Dark":"#7f848e"},"Operator":{"Light":"#0184bc","Dark":"#56b6c2"},"Punctuation":{"Light":"#383a42","Dark":"#abb2bf"},"Function":{"Light":"#4078f2","Dark":"#61afef"},"Variable":{"Light":"#383a42","Dark":"#e06c75"},"Type":{"Light":"#c18401","Dark":"#e5c07b"},"Builtin":{"Light":"#986801","Dark":"#d19a66"},"Property":{"Light":"#e45649","Dark":"#e06c75"},"Tag":{"Light":"#e45649","Dark":"#e06c75"},"AttrName":{"Light":"#986801","Dark":"#d19a66"},"AttrValue":{"Light":"#50a14f","Dark":"#98c379"}}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, Segoe UI, Roboto, sans-serif","Mono":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},"Size":{"SM":"0.875rem","MD":"1rem","LG":"1.25rem"},"Weight":{"Regular":"400","Bold":"700"}},"Spacing":{"XS":"4px","SM":"8px","MD":"12px","LG":"16px","XL":"24px"},"Radius":{"SM":"2px","MD":"6px","LG":"10px"}},"Brand":{"Name":"Playground"},"Aliases":{"--pict-modal-overlay-bg":"Color.Background.Tertiary","--pict-modal-bg":"Color.Background.Panel","--pict-modal-fg":"Color.Text.Primary","--pict-modal-border":"Color.Border.Default","--pict-modal-shadow":"Color.Border.Strong","--pict-modal-header-bg":"Color.Background.Secondary","--pict-modal-header-fg":"Color.Text.Primary","--pict-modal-header-border":"Color.Border.Default","--pict-modal-btn-bg":"Color.Background.Secondary","--pict-modal-btn-fg":"Color.Text.Primary","--pict-modal-btn-hover-bg":"Color.Background.Hover","--pict-modal-btn-primary-bg":"Color.Brand.Primary","--pict-modal-btn-primary-fg":"Color.Text.OnBrand","--pict-modal-btn-primary-hover-bg":"Color.Brand.PrimaryHover","--pict-modal-btn-danger-bg":"Color.Status.Error","--pict-modal-btn-danger-fg":"Color.Text.OnBrand","--pict-modal-btn-danger-hover-bg":"Color.Status.Error","--pict-modal-toast-bg":"Color.Background.Panel","--pict-modal-toast-fg":"Color.Text.Primary","--pict-modal-toast-shadow":"Color.Border.Strong","--pict-modal-toast-success-bg":"Color.Status.Success","--pict-modal-toast-error-bg":"Color.Status.Error","--pict-modal-toast-warning-bg":"Color.Status.Warning","--pict-modal-toast-info-bg":"Color.Status.Info","--pict-modal-tooltip-bg":"Color.Background.Tertiary","--pict-modal-tooltip-fg":"Color.Text.Primary","--pict-modal-font-family":"Typography.Family.Sans","--pict-um-bg":"Color.Background.Panel","--pict-um-fg":"Color.Text.Primary","--pict-um-muted":"Color.Text.Muted","--pict-um-accent":"Color.Brand.Primary","--pict-um-border":"Color.Border.Default","--pict-um-border-soft":"Color.Border.Light","--pict-um-input-bg":"Color.Background.Primary","--pict-um-pill-bg":"Color.Background.Tertiary","--pict-um-font":"Typography.Family.Sans"}};},{}],50:[function(require,module,exports){module.exports={"Hash":"retold-content-system","Name":"Retold Content System","Version":"0.0.1","Description":"Default palette for the Retold Content System editor — warm beige with teal accents. Light side preserves the original retold-content-system.css palette verbatim; dark side keeps the teal accent and warms the backgrounds into a deep walnut/charcoal range so dark mode reads as the same family of values rather than a generic dark theme.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"system"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#F5F3EE","Dark":"#1F1B17"},"Secondary":{"Light":"#FAF8F4","Dark":"#2A251F"},"Tertiary":{"Light":"#F0EDE8","Dark":"#332D26"},"Panel":{"Light":"#FFFFFF","Dark":"#26221C"},"Hover":{"Light":"#EDE9E3","Dark":"#383028"},"Selected":{"Light":"#DCE9E7","Dark":"#1E3833"}},"Text":{"Primary":{"Light":"#3D3229","Dark":"#E8DCC8"},"Secondary":{"Light":"#5E5549","Dark":"#C0B5A4"},"Muted":{"Light":"#8A7F72","Dark":"#8E8478"},"Placeholder":{"Light":"#A89E91","Dark":"#6E6457"},"OnBrand":{"Light":"#FFFFFF","Dark":"#1F1B17"}},"Brand":{"Primary":{"Light":"#2E7D74","Dark":"#4FB3A6"},"PrimaryHover":{"Light":"#3A9E92","Dark":"#65CBBE"},"Accent":{"Light":"#2E7D74","Dark":"#4FB3A6"},"AccentHover":{"Light":"#3A9E92","Dark":"#65CBBE"}},"Border":{"Default":{"Light":"#DDD6CA","Dark":"#3F362C"},"Light":{"Light":"#E8E2D7","Dark":"#33291F"},"Strong":{"Light":"#C4BDB0","Dark":"#5A4F40"}},"Status":{"Success":{"Light":"#7BC47F","Dark":"#8FD493"},"Warning":{"Light":"#E8A94D","Dark":"#F0BE6E"},"Error":{"Light":"#D9534F","Dark":"#E87B78"},"Info":{"Light":"#5DA6C7","Dark":"#7FBDD8"}},"Scrollbar":{"Track":{"Light":"#F5F0E8","Dark":"#26221C"},"Thumb":{"Light":"#C4BDB0","Dark":"#4A4036"},"Hover":{"Light":"#8A7F72","Dark":"#6A5F50"}},"Selection":{"Background":{"Light":"#CDE3E0","Dark":"#2E5B55"},"Text":{"Light":"#3D3229","Dark":"#E8DCC8"}},"Focus":{"Outline":{"Light":"#2E7D74","Dark":"#4FB3A6"}},"Shadow":{"Color":{"Light":"rgba(61, 50, 41, 0.12)","Dark":"rgba(0, 0, 0, 0.55)"}},"Syntax":{"Keyword":{"Light":"#A0532E","Dark":"#E89A6E"},"String":{"Light":"#3F8A52","Dark":"#8FD493"},"Number":{"Light":"#A86B00","Dark":"#E8A94D"},"Comment":{"Light":"#8A7F72","Dark":"#8E8478"},"Operator":{"Light":"#2E7D74","Dark":"#4FB3A6"},"Punctuation":{"Light":"#5E5549","Dark":"#C0B5A4"},"Function":{"Light":"#2E5E96","Dark":"#7FBDD8"},"Variable":{"Light":"#3D3229","Dark":"#E8DCC8"},"Type":{"Light":"#A86B00","Dark":"#E8A94D"},"Builtin":{"Light":"#A86B00","Dark":"#E8A94D"},"Property":{"Light":"#A0532E","Dark":"#E89A6E"},"Tag":{"Light":"#A0532E","Dark":"#E89A6E"},"AttrName":{"Light":"#A86B00","Dark":"#E8A94D"},"AttrValue":{"Light":"#3F8A52","Dark":"#8FD493"}}},"Typography":{"Family":{"Sans":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","Serif":"Georgia, Cambria, 'Times New Roman', Times, serif","Mono":"'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace"},"Size":{"XS":"0.75rem","SM":"0.875rem","MD":"1rem","LG":"1.125rem","XL":"1.375rem","XXL":"1.75rem"},"Weight":{"Regular":"400","Medium":"500","Bold":"700"},"LineHeight":{"Tight":"1.2","Normal":"1.5","Loose":"1.7"}},"Spacing":{"XS":"4px","SM":"8px","MD":"12px","LG":"16px","XL":"24px","XXL":"32px"},"Radius":{"None":"0","SM":"2px","MD":"4px","LG":"8px","XL":"12px","Pill":"999px"},"Layout":{"SidebarWidth":"250px","TopbarHeight":"48px","StatusbarHeight":"28px"}},"Brand":{"Name":"Retold Content","Tagline":"Author content for the Retold ecosystem."}};},{}],51:[function(require,module,exports){module.exports={"Hash":"retold-default","Name":"Retold Default","Version":"0.0.1","Description":"The reference paired light/dark theme for the Retold ecosystem. Neutral palette suitable for any app; dark mode is mid-grey rather than pure black to reduce eye strain.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#ffffff","Dark":"#1a1a1a"},"Secondary":{"Light":"#f5f5f5","Dark":"#242424"},"Tertiary":{"Light":"#ebebeb","Dark":"#2e2e2e"},"Panel":{"Light":"#ffffff","Dark":"#222222"},"Hover":{"Light":"#f0f0f0","Dark":"#2a2a2a"},"Selected":{"Light":"#e0eaff","Dark":"#2a3550"}},"Text":{"Primary":{"Light":"#1a1a1a","Dark":"#ededed"},"Secondary":{"Light":"#454545","Dark":"#bdbdbd"},"Muted":{"Light":"#6b6b6b","Dark":"#888888"},"Placeholder":{"Light":"#9a9a9a","Dark":"#6a6a6a"}},"Brand":{"Primary":{"Light":"#3357c7","Dark":"#6b8eff"},"PrimaryHover":{"Light":"#2848b3","Dark":"#88a4ff"},"Accent":{"Light":"#c75033","Dark":"#ff8a6b"}},"Border":{"Default":{"Light":"#d6d6d6","Dark":"#3a3a3a"},"Light":{"Light":"#e9e9e9","Dark":"#2c2c2c"},"Strong":{"Light":"#a0a0a0","Dark":"#5a5a5a"}},"Status":{"Success":{"Light":"#2e7a3a","Dark":"#5fc377"},"Warning":{"Light":"#a86b00","Dark":"#f0b84a"},"Error":{"Light":"#b62828","Dark":"#ff7373"},"Info":{"Light":"#1f6fb5","Dark":"#5fb4ff"}},"Scrollbar":{"Track":{"Light":"#ebebeb","Dark":"#1f1f1f"},"Thumb":{"Light":"#c2c2c2","Dark":"#3f3f3f"},"Hover":{"Light":"#a0a0a0","Dark":"#5a5a5a"}},"Selection":{"Background":{"Light":"#bcd2ff","Dark":"#3a4f7a"},"Text":{"Light":"#1a1a1a","Dark":"#ededed"}},"Focus":{"Outline":{"Light":"#3357c7","Dark":"#6b8eff"}},"Shadow":{"Color":{"Light":"rgba(0, 0, 0, 0.12)","Dark":"rgba(0, 0, 0, 0.55)"}},"Syntax":{"Keyword":{"Light":"#a626a4","Dark":"#c678dd"},"String":{"Light":"#50a14f","Dark":"#98c379"},"Number":{"Light":"#986801","Dark":"#d19a66"},"Comment":{"Light":"#a0a1a7","Dark":"#7f848e"},"Operator":{"Light":"#0184bc","Dark":"#56b6c2"},"Punctuation":{"Light":"#383a42","Dark":"#abb2bf"},"Function":{"Light":"#4078f2","Dark":"#61afef"},"Variable":{"Light":"#383a42","Dark":"#e06c75"},"Type":{"Light":"#c18401","Dark":"#e5c07b"},"Builtin":{"Light":"#986801","Dark":"#d19a66"},"Property":{"Light":"#e45649","Dark":"#e06c75"},"Tag":{"Light":"#e45649","Dark":"#e06c75"},"AttrName":{"Light":"#986801","Dark":"#d19a66"},"AttrValue":{"Light":"#50a14f","Dark":"#98c379"}}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif","Serif":"Georgia, Cambria, Times New Roman, Times, serif","Mono":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},"Size":{"XS":"0.75rem","SM":"0.875rem","MD":"1rem","LG":"1.125rem","XL":"1.375rem","XXL":"1.75rem"},"Weight":{"Regular":"400","Medium":"500","Bold":"700"},"LineHeight":{"Tight":"1.2","Normal":"1.45","Loose":"1.7"}},"Spacing":{"XS":"4px","SM":"8px","MD":"12px","LG":"16px","XL":"24px","XXL":"32px"},"Radius":{"None":"0","SM":"2px","MD":"4px","LG":"8px","XL":"12px","Pill":"999px"},"Shadow":{"SM":"0 1px 2px var(--theme-color-shadow-color)","MD":"0 2px 6px var(--theme-color-shadow-color)","LG":"0 6px 18px var(--theme-color-shadow-color)"},"ZIndex":{"Base":"0","Dropdown":"100","Sticky":"200","Overlay":"900","Modal":"1000","Toast":"2000","Tooltip":"3000"},"Duration":{"Fast":"100ms","Normal":"200ms","Slow":"400ms"}},"Brand":{"Name":"Retold","Tagline":"A suite of JavaScript modules for building web applications and APIs."},"CSS":[{"Hash":"retold-default-brand-accents","Priority":600,"Content":"/* retold-default — subtle brand-aware accents.\n Falls back gracefully to theme-color tokens when no brand is registered,\n so non-branded apps still look right. */\na { text-decoration-color: var(--brand-color-primary-mode, var(--theme-color-brand-primary, currentColor)); text-decoration-thickness: 2px; text-underline-offset: 3px; }\nh1 { border-bottom: 2px solid var(--brand-color-primary-mode, var(--theme-color-border-default, transparent)); padding-bottom: 6px; }\nh2 { border-bottom: 1px solid var(--brand-color-secondary-mode, var(--theme-color-border-light, transparent)); padding-bottom: 4px; }"}]};},{}],52:[function(require,module,exports){module.exports={"Hash":"retold-manager","Name":"Retold Manager","Description":"Default palette for the Retold Manager application — GitHub-style dark on slate with a parallel light variant. Dark side mirrors retold-manager.css's original colors verbatim; light side is a sympathetic translation tuned for daytime use. The retold-manager.css :root block proxies its --color-* names through these --theme-color-* tokens (with the original hexes as fallbacks), so this theme drives the whole app cleanly and other catalog themes still skin most of it.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"system"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#f6f8fa","Dark":"#0e1116"},"Secondary":{"Light":"#eef1f4","Dark":"#161b22"},"Tertiary":{"Light":"#e4e8ec","Dark":"#1c2128"},"Panel":{"Light":"#ffffff","Dark":"#161b22"},"PanelAlt":{"Light":"#f0f3f6","Dark":"#1c2128"},"Hover":{"Light":"#eaeef2","Dark":"#1c2128"},"Selected":{"Light":"#dbe7ff","Dark":"#243454"}},"Border":{"Default":{"Light":"#d0d7de","Dark":"#30363d"},"Light":{"Light":"#e1e4e8","Dark":"#21262d"},"Strong":{"Light":"#a8b1bb","Dark":"#484f58"}},"Brand":{"Primary":{"Light":"#0969da","Dark":"#2f81f7"},"PrimaryHover":{"Light":"#0550ae","Dark":"#1f6feb"},"Accent":{"Light":"#0969da","Dark":"#2f81f7"},"AccentHover":{"Light":"#0550ae","Dark":"#1f6feb"}},"Text":{"Primary":{"Light":"#1f2328","Dark":"#e6edf3"},"Secondary":{"Light":"#3b424a","Dark":"#c9d1d9"},"Muted":{"Light":"#656d76","Dark":"#8b949e"},"Placeholder":{"Light":"#8c959f","Dark":"#6e7681"},"OnBrand":{"Light":"#ffffff","Dark":"#ffffff"}},"Status":{"Success":{"Light":"#1a7f37","Dark":"#3fb950"},"Danger":{"Light":"#cf222e","Dark":"#f85149"},"Warning":{"Light":"#9a6700","Dark":"#d29922"},"Error":{"Light":"#cf222e","Dark":"#f85149"},"Info":{"Light":"#0969da","Dark":"#2f81f7"}},"Scrollbar":{"Track":{"Light":"#eef1f4","Dark":"#161b22"},"Thumb":{"Light":"#c1c8cf","Dark":"#30363d"},"Hover":{"Light":"#a8b1bb","Dark":"#484f58"}},"Selection":{"Background":{"Light":"#cfe6ff","Dark":"#243454"},"Text":{"Light":"#1f2328","Dark":"#e6edf3"}},"Focus":{"Outline":{"Light":"#0969da","Dark":"#2f81f7"}},"Syntax":{"Keyword":{"Light":"#cf222e","Dark":"#ff7b72"},"String":{"Light":"#0a3069","Dark":"#a5d6ff"},"Number":{"Light":"#0550ae","Dark":"#79c0ff"},"Comment":{"Light":"#6e7781","Dark":"#8b949e"},"Operator":{"Light":"#cf222e","Dark":"#ff7b72"},"Punctuation":{"Light":"#24292f","Dark":"#c9d1d9"},"Function":{"Light":"#8250df","Dark":"#d2a8ff"},"Variable":{"Light":"#24292f","Dark":"#c9d1d9"},"Type":{"Light":"#953800","Dark":"#ffa657"},"Builtin":{"Light":"#0550ae","Dark":"#79c0ff"},"Property":{"Light":"#0550ae","Dark":"#79c0ff"},"Tag":{"Light":"#116329","Dark":"#7ee787"},"AttrName":{"Light":"#8250df","Dark":"#d2a8ff"},"AttrValue":{"Light":"#0a3069","Dark":"#a5d6ff"}}},"Typography":{"Family":{"Sans":"-apple-system, BlinkMacSystemFont, \"SF Pro\", \"Segoe UI\", sans-serif","Mono":"ui-monospace, \"SF Mono\", Menlo, Monaco, \"Courier New\", monospace"}},"Layout":{"SidebarWidth":"280px","TopbarHeight":"44px","StatusbarHeight":"28px"}}};},{}],53:[function(require,module,exports){module.exports={"Hash":"retold-mono","Name":"Retold Mono","Version":"0.0.2","Description":"High-contrast monochrome theme — black on white in light mode, white on black in dark mode. Useful for print, simple admin tooling, and as a paired-mode reference theme that proves the toggle works on something visually unmistakable.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"system"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#ffffff","Dark":"#000000"},"Secondary":{"Light":"#f0f0f0","Dark":"#101010"},"Tertiary":{"Light":"#e2e2e2","Dark":"#1c1c1c"},"Panel":{"Light":"#ffffff","Dark":"#000000"},"Hover":{"Light":"#ebebeb","Dark":"#1a1a1a"},"Selected":{"Light":"#d6d6d6","Dark":"#2a2a2a"}},"Text":{"Primary":{"Light":"#000000","Dark":"#ffffff"},"Secondary":{"Light":"#222222","Dark":"#dddddd"},"Muted":{"Light":"#555555","Dark":"#aaaaaa"},"Placeholder":{"Light":"#888888","Dark":"#777777"}},"Brand":{"Primary":{"Light":"#000000","Dark":"#ffffff"},"PrimaryHover":{"Light":"#222222","Dark":"#dddddd"},"Accent":{"Light":"#444444","Dark":"#bbbbbb"}},"Border":{"Default":{"Light":"#888888","Dark":"#666666"},"Light":{"Light":"#cccccc","Dark":"#333333"},"Strong":{"Light":"#000000","Dark":"#ffffff"}},"Status":{"Success":{"Light":"#000000","Dark":"#ffffff"},"Warning":{"Light":"#000000","Dark":"#ffffff"},"Error":{"Light":"#000000","Dark":"#ffffff"},"Info":{"Light":"#000000","Dark":"#ffffff"}},"Scrollbar":{"Track":{"Light":"#e0e0e0","Dark":"#101010"},"Thumb":{"Light":"#888888","Dark":"#666666"},"Hover":{"Light":"#444444","Dark":"#bbbbbb"}},"Selection":{"Background":{"Light":"#000000","Dark":"#ffffff"},"Text":{"Light":"#ffffff","Dark":"#000000"}},"Focus":{"Outline":{"Light":"#000000","Dark":"#ffffff"}},"Shadow":{"Color":{"Light":"rgba(0, 0, 0, 0.18)","Dark":"rgba(255, 255, 255, 0.18)"}},"Syntax":{"Keyword":{"Light":"#000000","Dark":"#ffffff"},"String":{"Light":"#555555","Dark":"#cccccc"},"Number":{"Light":"#000000","Dark":"#ffffff"},"Comment":{"Light":"#888888","Dark":"#888888"},"Operator":{"Light":"#000000","Dark":"#ffffff"},"Punctuation":{"Light":"#444444","Dark":"#bbbbbb"},"Function":{"Light":"#000000","Dark":"#ffffff"},"Variable":{"Light":"#000000","Dark":"#ffffff"},"Type":{"Light":"#222222","Dark":"#dddddd"},"Builtin":{"Light":"#222222","Dark":"#dddddd"},"Property":{"Light":"#444444","Dark":"#bbbbbb"},"Tag":{"Light":"#000000","Dark":"#ffffff"},"AttrName":{"Light":"#444444","Dark":"#bbbbbb"},"AttrValue":{"Light":"#555555","Dark":"#cccccc"}}},"Typography":{"Family":{"Sans":"Helvetica, Arial, sans-serif","Serif":"Georgia, Times New Roman, serif","Mono":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},"Size":{"XS":"0.75rem","SM":"0.875rem","MD":"1rem","LG":"1.125rem","XL":"1.375rem","XXL":"1.75rem"},"Weight":{"Regular":"400","Medium":"600","Bold":"700"},"LineHeight":{"Tight":"1.15","Normal":"1.4","Loose":"1.65"}},"Spacing":{"XS":"4px","SM":"8px","MD":"12px","LG":"16px","XL":"24px","XXL":"32px"},"Radius":{"None":"0","SM":"0","MD":"0","LG":"0","XL":"0","Pill":"999px"},"Shadow":{"SM":"0 1px 0 var(--theme-color-shadow-color)","MD":"0 2px 0 var(--theme-color-shadow-color)","LG":"0 4px 0 var(--theme-color-shadow-color)"},"ZIndex":{"Base":"0","Dropdown":"100","Sticky":"200","Overlay":"900","Modal":"1000","Toast":"2000","Tooltip":"3000"},"Duration":{"Fast":"0ms","Normal":"0ms","Slow":"0ms"}},"Brand":{"Name":"Retold Mono","Tagline":"Black on white. White on black. Nothing else."},"CSS":[{"Hash":"retold-mono-brand-accents","Priority":600,"Content":"/* retold-mono — keeps the all-monochrome aesthetic but lets brand colors\n in for narrow accent moments. The thick rule under H1 is brand primary;\n the hair rule under H2 is brand secondary. Without a brand registered\n they fall back to mono black/grey. */\na { text-decoration-color: var(--brand-color-primary-mode, currentColor); text-decoration-thickness: 2px; text-underline-offset: 3px; }\nh1 { border-bottom: 3px solid var(--brand-color-primary-mode, var(--theme-color-text-primary, #000)); padding-bottom: 6px; }\nh2 { border-bottom: 1px solid var(--brand-color-secondary-mode, var(--theme-color-border-default, #888)); padding-bottom: 4px; }"}]};},{}],54:[function(require,module,exports){module.exports={"Hash":"solarized-dark","Name":"Solarized Dark","Category":"Fun","Version":"0.0.1","Description":"Schoonover's classic palette Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#002B36","Secondary":"#073642","Tertiary":"#003B4A","Panel":"#00303C","Viewer":"#001E28","Hover":"#0A4858","Selected":"#155868","Thumb":"#073642"},"Text":{"Primary":"#FDF6E3","Secondary":"#EEE8D5","Muted":"#93A1A1","Dim":"#839496","Placeholder":"#657B83"},"Brand":{"Accent":"#268BD2","AccentHover":"#45A0E0"},"Border":{"Default":"#0A4050","Light":"#125868"},"Status":{"Danger":"#DC322F","DangerMuted":"#AA2A28"},"Scrollbar":{"Track":"#0A4050","Hover":"#125868"},"Selection":{"Background":"rgba(38, 139, 210, 0.25)"},"Focus":{"Outline":"#268BD2"},"Syntax":{"Keyword":"#859900","String":"#2AA198","Number":"#D33682","Comment":"#586E75","Operator":"#268BD2","Punctuation":"#93A1A1","Function":"#B58900","Variable":"#FDF6E3","Type":"#B58900","Builtin":"#CB4B16","Property":"#268BD2","Tag":"#268BD2","AttrName":"#B58900","AttrValue":"#2AA198"}},"Typography":{"Family":{"Sans":"'Source Code Pro', 'Fira Code', monospace","Mono":"'Source Code Pro', 'Fira Code', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#EEE8D5","Accent":"#268BD2","Muted":"#839496","Light":"#003B4A","WarmBeige":"#073642","TealTint":"#004050","Lavender":"#003848","AmberTint":"#0A3A30","PdfFill":"#0A3028","PdfText":"#DC322F"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],55:[function(require,module,exports){module.exports={"Hash":"synthwave","Name":"Synthwave","Category":"Fun","Version":"0.0.1","Description":"Purple and pink neon Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#1A0A2E","Secondary":"#140824","Tertiary":"#200E38","Panel":"#1C0C32","Viewer":"#100620","Hover":"#2A1848","Selected":"#3A2060","Thumb":"#140824"},"Text":{"Primary":"#E8C0F8","Secondary":"#D0A8E8","Muted":"#9878B8","Dim":"#7858A8","Placeholder":"#584088"},"Brand":{"Accent":"#FF71CE","AccentHover":"#FF99DD"},"Border":{"Default":"#302050","Light":"#402868"},"Status":{"Danger":"#FF4488","DangerMuted":"#AA3366"},"Scrollbar":{"Track":"#302050","Hover":"#402868"},"Selection":{"Background":"rgba(255, 113, 206, 0.25)"},"Focus":{"Outline":"#FF71CE"},"Syntax":{"Keyword":"#FF6AD5","String":"#FFE066","Number":"#FF6AD5","Comment":"#9C8AC1","Operator":"#26F0F1","Punctuation":"#C8B6E2","Function":"#26F0F1","Variable":"#FFE0FF","Type":"#FFD93D","Builtin":"#FFD93D","Property":"#FF477E","Tag":"#FF477E","AttrName":"#FFD93D","AttrValue":"#FFE066"}},"Typography":{"Family":{"Sans":"'Trebuchet MS', sans-serif","Mono":"'Courier New', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#D0A8E8","Accent":"#FF71CE","Muted":"#7858A8","Light":"#200E38","WarmBeige":"#221040","TealTint":"#1A0C30","Lavender":"#1E0E36","AmberTint":"#241028","PdfFill":"#241020","PdfText":"#FF4488"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],56:[function(require,module,exports){module.exports={"Hash":"twilight","Name":"Twilight","Category":"Grey","Version":"0.0.1","Description":"Dark grey, low light. Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format. Single-mode (no light/dark bifurcation). Aliases preserve the legacy `--retold-*` variable names so existing CSS keeps working through the migration.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#1E1E1E","Secondary":"#181818","Tertiary":"#252525","Panel":"#202020","Viewer":"#141414","Hover":"#2E2E2E","Selected":"#404040","Thumb":"#181818"},"Text":{"Primary":"#E0E0E0","Secondary":"#C8C8C8","Muted":"#909090","Dim":"#707070","Placeholder":"#585858"},"Brand":{"Accent":"#A0A0A0","AccentHover":"#C0C0C0"},"Border":{"Default":"#333333","Light":"#404040"},"Status":{"Danger":"#FF6666","DangerMuted":"#AA6666"},"Scrollbar":{"Track":"#404040","Hover":"#505050"},"Selection":{"Background":"rgba(160, 160, 160, 0.25)"},"Focus":{"Outline":"#A0A0A0"},"Syntax":{"Keyword":"#B58FFF","String":"#9CDFB0","Number":"#FFB870","Comment":"#6E6E6E","Operator":"#7CC5FF","Punctuation":"#C0C0C0","Function":"#FFD080","Variable":"#E0E0E0","Type":"#FFB870","Builtin":"#FFB870","Property":"#FF8B8B","Tag":"#FF8B8B","AttrName":"#FFB870","AttrValue":"#9CDFB0"}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, sans-serif","Mono":"'SF Mono', 'Fira Code', 'Consolas', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#C8C8C8","Accent":"#A0A0A0","Muted":"#707070","Light":"#252525","WarmBeige":"#2A2A2A","TealTint":"#222222","Lavender":"#282828","AmberTint":"#2E2A24","PdfFill":"#2E2224","PdfText":"#E06060"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],57:[function(require,module,exports){/**
|
|
3375
|
+
const _IndexedRegistry=new Proxy(_Registry,{get(pTarget,pProp,pReceiver){if(typeof pProp==='string'&&/^\d+$/.test(pProp)){let tmpIdx=parseInt(pProp,10);let tmpList=pTarget.list();return tmpList[tmpIdx];}return Reflect.get(pTarget,pProp,pReceiver);},has(pTarget,pProp){if(typeof pProp==='string'&&/^\d+$/.test(pProp)){return parseInt(pProp,10)<pTarget.length;}return Reflect.has(pTarget,pProp);}});module.exports=_IndexedRegistry;module.exports.ThemeRegistry=ThemeRegistry;},{"./1970s-console.json":35,"./1980s-console.json":36,"./1990s-website.json":37,"./afternoon.json":39,"./cyberpunk.json":40,"./daylight.json":41,"./early-2000s.json":42,"./evening.json":43,"./forest.json":44,"./hotdog.json":45,"./mobile-debug.json":46,"./neo-tokyo.json":47,"./night.json":48,"./playground-corp.json":49,"./playground-starter.json":50,"./retold-content-system.json":51,"./retold-default.json":52,"./retold-manager.json":53,"./retold-mono.json":54,"./solarized-dark.json":55,"./synthwave.json":56,"./twilight.json":57}],39:[function(require,module,exports){module.exports={"Hash":"afternoon","Name":"Afternoon","Category":"Grey","Version":"0.0.1","Description":"Warm light grey, softer contrast Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":"#E8E4E0","Secondary":"#DAD6D2","Tertiary":"#D0CCC8","Panel":"#DDD9D5","Viewer":"#F0ECE8","Hover":"#CCC8C4","Selected":"#B8B4B0","Thumb":"#DAD6D2"},"Text":{"Primary":"#2A2A2A","Secondary":"#404040","Muted":"#707070","Dim":"#909090","Placeholder":"#B0B0B0"},"Brand":{"Accent":"#555555","AccentHover":"#333333"},"Border":{"Default":"#C0BCB8","Light":"#D0CCC8"},"Status":{"Danger":"#AA3333","DangerMuted":"#886655"},"Scrollbar":{"Track":"#B8B4B0","Hover":"#A0A09C"},"Selection":{"Background":"rgba(85, 85, 85, 0.2)"},"Focus":{"Outline":"#555555"},"Syntax":{"Keyword":"#7038A0","String":"#2E7A3A","Number":"#A86B00","Comment":"#888888","Operator":"#1F6FB5","Punctuation":"#666666","Function":"#3357C7","Variable":"#222222","Type":"#A86B00","Builtin":"#A86B00","Property":"#B62828","Tag":"#B62828","AttrName":"#A86B00","AttrValue":"#2E7A3A"}},"Typography":{"Family":{"Sans":"Georgia, 'Times New Roman', serif","Mono":"'Courier New', Courier, monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#404040","Accent":"#555555","Muted":"#909090","Light":"#D0CCC8","WarmBeige":"#DAD6D2","TealTint":"#CCC8C4","Lavender":"#D2D0CE","AmberTint":"#D8D2C8","PdfFill":"#D8C8C0","PdfText":"#AA3333"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.406Z","CompilerVersion":1};},{}],40:[function(require,module,exports){module.exports={"Hash":"cyberpunk","Name":"Cyberpunk","Category":"Fun","Version":"0.0.1","Description":"Electric green on black Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#0A0E0A","Secondary":"#060806","Tertiary":"#0E120E","Panel":"#0C100C","Viewer":"#040604","Hover":"#142014","Selected":"#1A3A1A","Thumb":"#060806"},"Text":{"Primary":"#C8FFC8","Secondary":"#A0D8A0","Muted":"#608860","Dim":"#406040","Placeholder":"#305030"},"Brand":{"Accent":"#00FF41","AccentHover":"#44FF77"},"Border":{"Default":"#1A2A1A","Light":"#224022"},"Status":{"Danger":"#FF3333","DangerMuted":"#AA2222"},"Scrollbar":{"Track":"#1A2A1A","Hover":"#2A4A2A"},"Selection":{"Background":"rgba(0, 255, 65, 0.2)"},"Focus":{"Outline":"#00FF41"},"Syntax":{"Keyword":"#FF00FF","String":"#00FF41","Number":"#FFFF00","Comment":"#406040","Operator":"#00FFFF","Punctuation":"#A0D8A0","Function":"#FF00FF","Variable":"#C8FFC8","Type":"#FFFF00","Builtin":"#FFFF00","Property":"#FF3333","Tag":"#FF3333","AttrName":"#FFFF00","AttrValue":"#00FF41"}},"Typography":{"Family":{"Sans":"'Lucida Console', 'Courier New', monospace","Mono":"'Lucida Console', 'Courier New', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#A0D8A0","Accent":"#00FF41","Muted":"#406040","Light":"#0E120E","WarmBeige":"#101610","TealTint":"#0C140C","Lavender":"#0E120E","AmberTint":"#141810","PdfFill":"#181010","PdfText":"#FF3333"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.406Z","CompilerVersion":1};},{}],41:[function(require,module,exports){module.exports={"Hash":"daylight","Name":"Daylight","Category":"Grey","Version":"0.0.1","Description":"Bright white, dark text Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":"#FFFFFF","Secondary":"#F0F0F0","Tertiary":"#E8E8E8","Panel":"#F5F5F5","Viewer":"#FAFAFA","Hover":"#E0E0E0","Selected":"#C8C8C8","Thumb":"#F0F0F0"},"Text":{"Primary":"#1A1A1A","Secondary":"#333333","Muted":"#666666","Dim":"#888888","Placeholder":"#AAAAAA"},"Brand":{"Accent":"#444444","AccentHover":"#222222"},"Border":{"Default":"#D0D0D0","Light":"#E0E0E0"},"Status":{"Danger":"#CC0000","DangerMuted":"#884444"},"Scrollbar":{"Track":"#C0C0C0","Hover":"#A0A0A0"},"Selection":{"Background":"rgba(68, 68, 68, 0.2)"},"Focus":{"Outline":"#444444"},"Syntax":{"Keyword":"#7038A0","String":"#2E7A3A","Number":"#A86B00","Comment":"#888888","Operator":"#1F6FB5","Punctuation":"#444444","Function":"#3357C7","Variable":"#222222","Type":"#A86B00","Builtin":"#A86B00","Property":"#B62828","Tag":"#B62828","AttrName":"#A86B00","AttrValue":"#2E7A3A"}},"Typography":{"Family":{"Sans":"'Segoe UI', system-ui, -apple-system, sans-serif","Mono":"'SF Mono', 'Fira Code', 'Consolas', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#333333","Accent":"#444444","Muted":"#888888","Light":"#E8E8E8","WarmBeige":"#F0F0F0","TealTint":"#E0E0E0","Lavender":"#EBEBEB","AmberTint":"#F0EDE8","PdfFill":"#F0E0E0","PdfText":"#CC0000"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.407Z","CompilerVersion":1};},{}],42:[function(require,module,exports){module.exports={"Hash":"early-2000s","Name":"Early 2000s Web","Category":"Fun","Version":"0.0.1","Description":"Teal and silver, Web 2.0 Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":"#E8F4F8","Secondary":"#D0E8EE","Tertiary":"#C0DDE6","Panel":"#D8EEF2","Viewer":"#F0F8FA","Hover":"#B0D4E0","Selected":"#88C4D8","Thumb":"#D0E8EE"},"Text":{"Primary":"#1A3A4A","Secondary":"#2A4A5A","Muted":"#5A7A8A","Dim":"#7A9AAA","Placeholder":"#9ABACA"},"Brand":{"Accent":"#0099CC","AccentHover":"#00AADD"},"Border":{"Default":"#A0C8D8","Light":"#B8D8E4"},"Status":{"Danger":"#CC3300","DangerMuted":"#994422"},"Scrollbar":{"Track":"#A0C8D8","Hover":"#88B8CC"},"Selection":{"Background":"rgba(0, 153, 204, 0.2)"},"Focus":{"Outline":"#0099CC"},"Syntax":{"Keyword":"#1A4080","String":"#2E7A3A","Number":"#A86B00","Comment":"#888888","Operator":"#1F6FB5","Punctuation":"#333333","Function":"#3357C7","Variable":"#222222","Type":"#A86B00","Builtin":"#A86B00","Property":"#B62828","Tag":"#B62828","AttrName":"#A86B00","AttrValue":"#2E7A3A"}},"Typography":{"Family":{"Sans":"Verdana, Geneva, Tahoma, sans-serif","Mono":"'Lucida Console', Monaco, monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#2A4A5A","Accent":"#0099CC","Muted":"#7A9AAA","Light":"#C0DDE6","WarmBeige":"#D0E8EE","TealTint":"#B0D8E4","Lavender":"#C8DCE6","AmberTint":"#D8E0D0","PdfFill":"#E0C8C0","PdfText":"#CC3300"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.407Z","CompilerVersion":1};},{}],43:[function(require,module,exports){module.exports={"Hash":"evening","Name":"Evening","Category":"Grey","Version":"0.0.1","Description":"Medium grey, transitional Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#484848","Secondary":"#3C3C3C","Tertiary":"#424242","Panel":"#454545","Viewer":"#363636","Hover":"#525252","Selected":"#606060","Thumb":"#3C3C3C"},"Text":{"Primary":"#E0E0E0","Secondary":"#D0D0D0","Muted":"#A0A0A0","Dim":"#888888","Placeholder":"#707070"},"Brand":{"Accent":"#C0C0C0","AccentHover":"#E0E0E0"},"Border":{"Default":"#585858","Light":"#606060"},"Status":{"Danger":"#FF6666","DangerMuted":"#AA6666"},"Scrollbar":{"Track":"#585858","Hover":"#686868"},"Selection":{"Background":"rgba(192, 192, 192, 0.25)"},"Focus":{"Outline":"#C0C0C0"},"Syntax":{"Keyword":"#B894FF","String":"#A8D8B0","Number":"#FFB880","Comment":"#8A8A8A","Operator":"#7EC0FF","Punctuation":"#BBBBBB","Function":"#FFCC80","Variable":"#DDDDDD","Type":"#FFB880","Builtin":"#FFB880","Property":"#FF9494","Tag":"#FF9494","AttrName":"#FFB880","AttrValue":"#A8D8B0"}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, sans-serif","Mono":"'SF Mono', 'Fira Code', 'Consolas', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#D0D0D0","Accent":"#C0C0C0","Muted":"#888888","Light":"#424242","WarmBeige":"#484848","TealTint":"#3E3E3E","Lavender":"#444444","AmberTint":"#4A4640","PdfFill":"#4A3C3C","PdfText":"#FF6666"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.407Z","CompilerVersion":1};},{}],44:[function(require,module,exports){module.exports={"Hash":"forest","Name":"Forest","Category":"Fun","Version":"0.0.1","Description":"Deep greens and earth browns Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#1A2018","Secondary":"#141A12","Tertiary":"#1E2620","Panel":"#1C221A","Viewer":"#101410","Hover":"#283828","Selected":"#344834","Thumb":"#141A12"},"Text":{"Primary":"#D0DCC8","Secondary":"#B0C4A8","Muted":"#809878","Dim":"#607858","Placeholder":"#486040"},"Brand":{"Accent":"#6AAF5C","AccentHover":"#88CC78"},"Border":{"Default":"#2A3A28","Light":"#3A4A38"},"Status":{"Danger":"#CC4422","DangerMuted":"#884422"},"Scrollbar":{"Track":"#2A3A28","Hover":"#3A4A38"},"Selection":{"Background":"rgba(106, 175, 92, 0.25)"},"Focus":{"Outline":"#6AAF5C"},"Syntax":{"Keyword":"#D4E157","String":"#A5D6A7","Number":"#FFB74D","Comment":"#5D6F58","Operator":"#80CBC4","Punctuation":"#A8C8A0","Function":"#FFCC80","Variable":"#C8E6C9","Type":"#FFB74D","Builtin":"#FFB74D","Property":"#FF8A65","Tag":"#FF8A65","AttrName":"#FFB74D","AttrValue":"#A5D6A7"}},"Typography":{"Family":{"Sans":"'Palatino Linotype', 'Book Antiqua', Palatino, serif","Mono":"'Courier New', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#B0C4A8","Accent":"#6AAF5C","Muted":"#607858","Light":"#1E2620","WarmBeige":"#22281E","TealTint":"#1A221A","Lavender":"#1E2420","AmberTint":"#262218","PdfFill":"#261A18","PdfText":"#CC4422"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.407Z","CompilerVersion":1};},{}],45:[function(require,module,exports){module.exports={"Hash":"hotdog","Name":"Hotdog","Category":"Fun","Version":"0.0.1","Description":"Red and mustard yellow, garish Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#8B0000","Secondary":"#6B0000","Tertiary":"#7B0000","Panel":"#750000","Viewer":"#550000","Hover":"#AA1111","Selected":"#BB3300","Thumb":"#6B0000"},"Text":{"Primary":"#FFD700","Secondary":"#FFC000","Muted":"#CC9900","Dim":"#AA7700","Placeholder":"#886600"},"Brand":{"Accent":"#FFD700","AccentHover":"#FFEE44"},"Border":{"Default":"#AA2222","Light":"#BB3333"},"Status":{"Danger":"#FFFF00","DangerMuted":"#CCCC00"},"Scrollbar":{"Track":"#AA2222","Hover":"#CC3333"},"Selection":{"Background":"rgba(255, 215, 0, 0.3)"},"Focus":{"Outline":"#FFD700"},"Syntax":{"Keyword":"#FFD800","String":"#FFFFFF","Number":"#FFD800","Comment":"#9C2828","Operator":"#FFD800","Punctuation":"#FFFFFF","Function":"#FFD800","Variable":"#FFFFFF","Type":"#FFD800","Builtin":"#FFD800","Property":"#FFD800","Tag":"#FFD800","AttrName":"#FFD800","AttrValue":"#FFFFFF"}},"Typography":{"Family":{"Sans":"Impact, 'Arial Black', sans-serif","Mono":"'Courier New', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#FFC000","Accent":"#FFD700","Muted":"#AA7700","Light":"#7B0000","WarmBeige":"#800000","TealTint":"#6B0000","Lavender":"#780000","AmberTint":"#7A1000","PdfFill":"#6B0000","PdfText":"#FFFF00"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.407Z","CompilerVersion":1};},{}],46:[function(require,module,exports){module.exports={"Hash":"mobile-debug","Name":"Mobile Container Debug","Category":"Debug","Version":"0.0.1","Description":"Unique color per container for layout debugging Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":"#FF0000","Secondary":"#00CCCC","Tertiary":"#00AA00","Panel":"#FFAA00","Viewer":"#333333","Hover":"rgba(255, 255, 255, 0.2)","Selected":"rgba(255, 255, 255, 0.3)","Thumb":"#AA00AA"},"Text":{"Primary":"#FFFFFF","Secondary":"#EEEEEE","Muted":"#CCCCCC","Dim":"#AAAAAA","Placeholder":"#888888"},"Brand":{"Accent":"#FFFF00","AccentHover":"#FFFF88"},"Border":{"Default":"#FFFFFF","Light":"#CCCCCC"},"Status":{"Danger":"#FF0000","DangerMuted":"#CC4444"},"Scrollbar":{"Track":"#888888","Hover":"#AAAAAA"},"Selection":{"Background":"rgba(255, 255, 0, 0.3)"},"Focus":{"Outline":"#FFFF00"},"Syntax":{"Keyword":"#A626A4","String":"#50A14F","Number":"#986801","Comment":"#A0A1A7","Operator":"#0184BC","Punctuation":"#383A42","Function":"#4078F2","Variable":"#383A42","Type":"#C18401","Builtin":"#986801","Property":"#E45649","Tag":"#E45649","AttrName":"#986801","AttrValue":"#50A14F"}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, sans-serif","Mono":"'SF Mono', 'Consolas', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#FFFFFF","Accent":"#FFFF00","Muted":"#CCCCCC","Light":"#333333","WarmBeige":"#FFAA00","TealTint":"#00CCCC","Lavender":"#AA00AA","AmberTint":"#FFAA00","PdfFill":"#FF4444","PdfText":"#FFFFFF"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],47:[function(require,module,exports){module.exports={"Hash":"neo-tokyo","Name":"Neo-Tokyo","Category":"Fun","Version":"0.0.1","Description":"Neon pink on dark navy Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#0D0D2B","Secondary":"#080820","Tertiary":"#121235","Panel":"#0F0F28","Viewer":"#060615","Hover":"#1A1A42","Selected":"#2A1845","Thumb":"#080820"},"Text":{"Primary":"#E8E0F0","Secondary":"#D0C8E0","Muted":"#9088A8","Dim":"#6860A0","Placeholder":"#504888"},"Brand":{"Accent":"#FF2D8A","AccentHover":"#FF5AA0"},"Border":{"Default":"#2A2050","Light":"#382868"},"Status":{"Danger":"#FF4466","DangerMuted":"#AA3355"},"Scrollbar":{"Track":"#2A2050","Hover":"#3A3068"},"Selection":{"Background":"rgba(255, 45, 138, 0.25)"},"Focus":{"Outline":"#FF2D8A"},"Syntax":{"Keyword":"#FF4E9F","String":"#A1FFCE","Number":"#FFD93D","Comment":"#807A9E","Operator":"#7DF9FF","Punctuation":"#C0BCEB","Function":"#FFCC80","Variable":"#E0D8FF","Type":"#FFD93D","Builtin":"#FFD93D","Property":"#FF6E6E","Tag":"#FF6E6E","AttrName":"#FFD93D","AttrValue":"#A1FFCE"}},"Typography":{"Family":{"Sans":"'Courier New', monospace","Mono":"'Courier New', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#D0C8E0","Accent":"#FF2D8A","Muted":"#6860A0","Light":"#121235","WarmBeige":"#141438","TealTint":"#100E30","Lavender":"#141232","AmberTint":"#1A1228","PdfFill":"#1A1028","PdfText":"#FF4466"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],48:[function(require,module,exports){module.exports={"Hash":"night","Name":"Night","Category":"Grey","Version":"0.0.1","Description":"Near-black, minimal contrast Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#0A0A0A","Secondary":"#060606","Tertiary":"#0E0E0E","Panel":"#0C0C0C","Viewer":"#040404","Hover":"#161616","Selected":"#252525","Thumb":"#060606"},"Text":{"Primary":"#888888","Secondary":"#707070","Muted":"#555555","Dim":"#444444","Placeholder":"#333333"},"Brand":{"Accent":"#666666","AccentHover":"#808080"},"Border":{"Default":"#1A1A1A","Light":"#222222"},"Status":{"Danger":"#AA4444","DangerMuted":"#663333"},"Scrollbar":{"Track":"#1A1A1A","Hover":"#2A2A2A"},"Selection":{"Background":"rgba(102, 102, 102, 0.2)"},"Focus":{"Outline":"#666666"},"Syntax":{"Keyword":"#C28FFF","String":"#B0E0B0","Number":"#FFA070","Comment":"#888888","Operator":"#80C8FF","Punctuation":"#BBBBBB","Function":"#FFD080","Variable":"#DDDDDD","Type":"#FFB870","Builtin":"#FFB870","Property":"#FF9090","Tag":"#FF9090","AttrName":"#FFB870","AttrValue":"#B0E0B0"}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, sans-serif","Mono":"'SF Mono', 'Fira Code', 'Consolas', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#707070","Accent":"#666666","Muted":"#444444","Light":"#0E0E0E","WarmBeige":"#121212","TealTint":"#0C0C0C","Lavender":"#101010","AmberTint":"#141210","PdfFill":"#141010","PdfText":"#AA4444"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],49:[function(require,module,exports){module.exports={"Hash":"playground-corp","Name":"Playground Corp","Version":"0.0.1","Description":"A different paired starter — corporate teal palette, rounder corners.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#fbfbfd","Dark":"#0e1416"},"Secondary":{"Light":"#eef3f6","Dark":"#152024"},"Tertiary":{"Light":"#dde7ec","Dark":"#1e2c30"},"Panel":{"Light":"#ffffff","Dark":"#162126"},"Hover":{"Light":"#e5edf1","Dark":"#1d292e"}},"Text":{"Primary":{"Light":"#0a1d22","Dark":"#e3edf0"},"Secondary":{"Light":"#3a5b65","Dark":"#a8c0c8"},"Muted":{"Light":"#647e87","Dark":"#7a929a"},"OnBrand":{"Light":"#ffffff","Dark":"#ffffff"}},"Brand":{"Primary":{"Light":"#117a8b","Dark":"#3ec0d4"},"PrimaryHover":{"Light":"#0e6271","Dark":"#5fd0e0"},"Accent":{"Light":"#d97706","Dark":"#fb923c"}},"Border":{"Default":{"Light":"#cfdce1","Dark":"#2c3a3f"},"Strong":{"Light":"#86a3ac","Dark":"#4d5e64"}},"Status":{"Success":{"Light":"#0f7a52","Dark":"#34d399"},"Warning":{"Light":"#b45309","Dark":"#fbbf24"},"Error":{"Light":"#9f1239","Dark":"#fb7185"},"Info":{"Light":"#1e6fbe","Dark":"#60a5fa"}},"Syntax":{"Keyword":{"Light":"#a626a4","Dark":"#c678dd"},"String":{"Light":"#50a14f","Dark":"#98c379"},"Number":{"Light":"#986801","Dark":"#d19a66"},"Comment":{"Light":"#a0a1a7","Dark":"#7f848e"},"Operator":{"Light":"#0184bc","Dark":"#56b6c2"},"Punctuation":{"Light":"#383a42","Dark":"#abb2bf"},"Function":{"Light":"#4078f2","Dark":"#61afef"},"Variable":{"Light":"#383a42","Dark":"#e06c75"},"Type":{"Light":"#c18401","Dark":"#e5c07b"},"Builtin":{"Light":"#986801","Dark":"#d19a66"},"Property":{"Light":"#e45649","Dark":"#e06c75"},"Tag":{"Light":"#e45649","Dark":"#e06c75"},"AttrName":{"Light":"#986801","Dark":"#d19a66"},"AttrValue":{"Light":"#50a14f","Dark":"#98c379"}}},"Typography":{"Family":{"Sans":"Inter, system-ui, sans-serif","Mono":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},"Size":{"SM":"0.875rem","MD":"1rem","LG":"1.25rem"},"Weight":{"Regular":"400","Bold":"700"}},"Spacing":{"XS":"4px","SM":"8px","MD":"14px","LG":"20px","XL":"28px"},"Radius":{"SM":"4px","MD":"10px","LG":"16px"}},"Brand":{"Name":"Corp"},"Aliases":{"--pict-modal-overlay-bg":"Color.Background.Tertiary","--pict-modal-bg":"Color.Background.Panel","--pict-modal-fg":"Color.Text.Primary","--pict-modal-border":"Color.Border.Default","--pict-modal-shadow":"Color.Border.Strong","--pict-modal-header-bg":"Color.Background.Secondary","--pict-modal-header-fg":"Color.Text.Primary","--pict-modal-header-border":"Color.Border.Default","--pict-modal-btn-bg":"Color.Background.Secondary","--pict-modal-btn-fg":"Color.Text.Primary","--pict-modal-btn-hover-bg":"Color.Background.Hover","--pict-modal-btn-primary-bg":"Color.Brand.Primary","--pict-modal-btn-primary-fg":"Color.Text.OnBrand","--pict-modal-btn-primary-hover-bg":"Color.Brand.PrimaryHover","--pict-modal-btn-danger-bg":"Color.Status.Error","--pict-modal-btn-danger-fg":"Color.Text.OnBrand","--pict-modal-btn-danger-hover-bg":"Color.Status.Error","--pict-modal-toast-bg":"Color.Background.Panel","--pict-modal-toast-fg":"Color.Text.Primary","--pict-modal-toast-shadow":"Color.Border.Strong","--pict-modal-toast-success-bg":"Color.Status.Success","--pict-modal-toast-error-bg":"Color.Status.Error","--pict-modal-toast-warning-bg":"Color.Status.Warning","--pict-modal-toast-info-bg":"Color.Status.Info","--pict-modal-tooltip-bg":"Color.Background.Tertiary","--pict-modal-tooltip-fg":"Color.Text.Primary","--pict-modal-font-family":"Typography.Family.Sans","--pict-um-bg":"Color.Background.Panel","--pict-um-fg":"Color.Text.Primary","--pict-um-muted":"Color.Text.Muted","--pict-um-accent":"Color.Brand.Primary","--pict-um-border":"Color.Border.Default","--pict-um-border-soft":"Color.Border.Light","--pict-um-input-bg":"Color.Background.Primary","--pict-um-pill-bg":"Color.Background.Tertiary","--pict-um-font":"Typography.Family.Sans"}};},{}],50:[function(require,module,exports){module.exports={"Hash":"playground-starter","Name":"Playground Starter","Version":"0.0.1","Description":"A complete paired light/dark starter theme. Edit any token and watch the gallery reflow.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#ffffff","Dark":"#1a1a1a"},"Secondary":{"Light":"#f5f5f5","Dark":"#242424"},"Tertiary":{"Light":"#ebebeb","Dark":"#2e2e2e"},"Panel":{"Light":"#ffffff","Dark":"#222222"},"Hover":{"Light":"#f0f0f0","Dark":"#2a2a2a"}},"Text":{"Primary":{"Light":"#1a1a1a","Dark":"#ededed"},"Secondary":{"Light":"#454545","Dark":"#bdbdbd"},"Muted":{"Light":"#6b6b6b","Dark":"#888888"},"OnBrand":{"Light":"#ffffff","Dark":"#ffffff"}},"Brand":{"Primary":{"Light":"#3357c7","Dark":"#6b8eff"},"PrimaryHover":{"Light":"#2848b3","Dark":"#88a4ff"},"Accent":{"Light":"#c75033","Dark":"#ff8a6b"}},"Border":{"Default":{"Light":"#d6d6d6","Dark":"#3a3a3a"},"Strong":{"Light":"#a0a0a0","Dark":"#5a5a5a"}},"Status":{"Success":{"Light":"#2e7a3a","Dark":"#5fc377"},"Warning":{"Light":"#a86b00","Dark":"#f0b84a"},"Error":{"Light":"#b62828","Dark":"#ff7373"},"Info":{"Light":"#1f6fb5","Dark":"#5fb4ff"}},"Syntax":{"Keyword":{"Light":"#a626a4","Dark":"#c678dd"},"String":{"Light":"#50a14f","Dark":"#98c379"},"Number":{"Light":"#986801","Dark":"#d19a66"},"Comment":{"Light":"#a0a1a7","Dark":"#7f848e"},"Operator":{"Light":"#0184bc","Dark":"#56b6c2"},"Punctuation":{"Light":"#383a42","Dark":"#abb2bf"},"Function":{"Light":"#4078f2","Dark":"#61afef"},"Variable":{"Light":"#383a42","Dark":"#e06c75"},"Type":{"Light":"#c18401","Dark":"#e5c07b"},"Builtin":{"Light":"#986801","Dark":"#d19a66"},"Property":{"Light":"#e45649","Dark":"#e06c75"},"Tag":{"Light":"#e45649","Dark":"#e06c75"},"AttrName":{"Light":"#986801","Dark":"#d19a66"},"AttrValue":{"Light":"#50a14f","Dark":"#98c379"}}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, Segoe UI, Roboto, sans-serif","Mono":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},"Size":{"SM":"0.875rem","MD":"1rem","LG":"1.25rem"},"Weight":{"Regular":"400","Bold":"700"}},"Spacing":{"XS":"4px","SM":"8px","MD":"12px","LG":"16px","XL":"24px"},"Radius":{"SM":"2px","MD":"6px","LG":"10px"}},"Brand":{"Name":"Playground"},"Aliases":{"--pict-modal-overlay-bg":"Color.Background.Tertiary","--pict-modal-bg":"Color.Background.Panel","--pict-modal-fg":"Color.Text.Primary","--pict-modal-border":"Color.Border.Default","--pict-modal-shadow":"Color.Border.Strong","--pict-modal-header-bg":"Color.Background.Secondary","--pict-modal-header-fg":"Color.Text.Primary","--pict-modal-header-border":"Color.Border.Default","--pict-modal-btn-bg":"Color.Background.Secondary","--pict-modal-btn-fg":"Color.Text.Primary","--pict-modal-btn-hover-bg":"Color.Background.Hover","--pict-modal-btn-primary-bg":"Color.Brand.Primary","--pict-modal-btn-primary-fg":"Color.Text.OnBrand","--pict-modal-btn-primary-hover-bg":"Color.Brand.PrimaryHover","--pict-modal-btn-danger-bg":"Color.Status.Error","--pict-modal-btn-danger-fg":"Color.Text.OnBrand","--pict-modal-btn-danger-hover-bg":"Color.Status.Error","--pict-modal-toast-bg":"Color.Background.Panel","--pict-modal-toast-fg":"Color.Text.Primary","--pict-modal-toast-shadow":"Color.Border.Strong","--pict-modal-toast-success-bg":"Color.Status.Success","--pict-modal-toast-error-bg":"Color.Status.Error","--pict-modal-toast-warning-bg":"Color.Status.Warning","--pict-modal-toast-info-bg":"Color.Status.Info","--pict-modal-tooltip-bg":"Color.Background.Tertiary","--pict-modal-tooltip-fg":"Color.Text.Primary","--pict-modal-font-family":"Typography.Family.Sans","--pict-um-bg":"Color.Background.Panel","--pict-um-fg":"Color.Text.Primary","--pict-um-muted":"Color.Text.Muted","--pict-um-accent":"Color.Brand.Primary","--pict-um-border":"Color.Border.Default","--pict-um-border-soft":"Color.Border.Light","--pict-um-input-bg":"Color.Background.Primary","--pict-um-pill-bg":"Color.Background.Tertiary","--pict-um-font":"Typography.Family.Sans"}};},{}],51:[function(require,module,exports){module.exports={"Hash":"retold-content-system","Name":"Retold Content System","Version":"0.0.1","Description":"Default palette for the Retold Content System editor — warm beige with teal accents. Light side preserves the original retold-content-system.css palette verbatim; dark side keeps the teal accent and warms the backgrounds into a deep walnut/charcoal range so dark mode reads as the same family of values rather than a generic dark theme.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"system"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#F5F3EE","Dark":"#1F1B17"},"Secondary":{"Light":"#FAF8F4","Dark":"#2A251F"},"Tertiary":{"Light":"#F0EDE8","Dark":"#332D26"},"Panel":{"Light":"#FFFFFF","Dark":"#26221C"},"Hover":{"Light":"#EDE9E3","Dark":"#383028"},"Selected":{"Light":"#DCE9E7","Dark":"#1E3833"}},"Text":{"Primary":{"Light":"#3D3229","Dark":"#E8DCC8"},"Secondary":{"Light":"#5E5549","Dark":"#C0B5A4"},"Muted":{"Light":"#8A7F72","Dark":"#8E8478"},"Placeholder":{"Light":"#A89E91","Dark":"#6E6457"},"OnBrand":{"Light":"#FFFFFF","Dark":"#1F1B17"}},"Brand":{"Primary":{"Light":"#2E7D74","Dark":"#4FB3A6"},"PrimaryHover":{"Light":"#3A9E92","Dark":"#65CBBE"},"Accent":{"Light":"#2E7D74","Dark":"#4FB3A6"},"AccentHover":{"Light":"#3A9E92","Dark":"#65CBBE"}},"Border":{"Default":{"Light":"#DDD6CA","Dark":"#3F362C"},"Light":{"Light":"#E8E2D7","Dark":"#33291F"},"Strong":{"Light":"#C4BDB0","Dark":"#5A4F40"}},"Status":{"Success":{"Light":"#7BC47F","Dark":"#8FD493"},"Warning":{"Light":"#E8A94D","Dark":"#F0BE6E"},"Error":{"Light":"#D9534F","Dark":"#E87B78"},"Info":{"Light":"#5DA6C7","Dark":"#7FBDD8"}},"Scrollbar":{"Track":{"Light":"#F5F0E8","Dark":"#26221C"},"Thumb":{"Light":"#C4BDB0","Dark":"#4A4036"},"Hover":{"Light":"#8A7F72","Dark":"#6A5F50"}},"Selection":{"Background":{"Light":"#CDE3E0","Dark":"#2E5B55"},"Text":{"Light":"#3D3229","Dark":"#E8DCC8"}},"Focus":{"Outline":{"Light":"#2E7D74","Dark":"#4FB3A6"}},"Shadow":{"Color":{"Light":"rgba(61, 50, 41, 0.12)","Dark":"rgba(0, 0, 0, 0.55)"}},"Syntax":{"Keyword":{"Light":"#A0532E","Dark":"#E89A6E"},"String":{"Light":"#3F8A52","Dark":"#8FD493"},"Number":{"Light":"#A86B00","Dark":"#E8A94D"},"Comment":{"Light":"#8A7F72","Dark":"#8E8478"},"Operator":{"Light":"#2E7D74","Dark":"#4FB3A6"},"Punctuation":{"Light":"#5E5549","Dark":"#C0B5A4"},"Function":{"Light":"#2E5E96","Dark":"#7FBDD8"},"Variable":{"Light":"#3D3229","Dark":"#E8DCC8"},"Type":{"Light":"#A86B00","Dark":"#E8A94D"},"Builtin":{"Light":"#A86B00","Dark":"#E8A94D"},"Property":{"Light":"#A0532E","Dark":"#E89A6E"},"Tag":{"Light":"#A0532E","Dark":"#E89A6E"},"AttrName":{"Light":"#A86B00","Dark":"#E8A94D"},"AttrValue":{"Light":"#3F8A52","Dark":"#8FD493"}}},"Typography":{"Family":{"Sans":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","Serif":"Georgia, Cambria, 'Times New Roman', Times, serif","Mono":"'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace"},"Size":{"XS":"0.75rem","SM":"0.875rem","MD":"1rem","LG":"1.125rem","XL":"1.375rem","XXL":"1.75rem"},"Weight":{"Regular":"400","Medium":"500","Bold":"700"},"LineHeight":{"Tight":"1.2","Normal":"1.5","Loose":"1.7"}},"Spacing":{"XS":"4px","SM":"8px","MD":"12px","LG":"16px","XL":"24px","XXL":"32px"},"Radius":{"None":"0","SM":"2px","MD":"4px","LG":"8px","XL":"12px","Pill":"999px"},"Layout":{"SidebarWidth":"250px","TopbarHeight":"48px","StatusbarHeight":"28px"}},"Brand":{"Name":"Retold Content","Tagline":"Author content for the Retold ecosystem."}};},{}],52:[function(require,module,exports){module.exports={"Hash":"retold-default","Name":"Retold Default","Version":"0.0.1","Description":"The reference paired light/dark theme for the Retold ecosystem. Neutral palette suitable for any app; dark mode is mid-grey rather than pure black to reduce eye strain.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"light"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#ffffff","Dark":"#1a1a1a"},"Secondary":{"Light":"#f5f5f5","Dark":"#242424"},"Tertiary":{"Light":"#ebebeb","Dark":"#2e2e2e"},"Panel":{"Light":"#ffffff","Dark":"#222222"},"Hover":{"Light":"#f0f0f0","Dark":"#2a2a2a"},"Selected":{"Light":"#e0eaff","Dark":"#2a3550"}},"Text":{"Primary":{"Light":"#1a1a1a","Dark":"#ededed"},"Secondary":{"Light":"#454545","Dark":"#bdbdbd"},"Muted":{"Light":"#6b6b6b","Dark":"#888888"},"Placeholder":{"Light":"#9a9a9a","Dark":"#6a6a6a"}},"Brand":{"Primary":{"Light":"#3357c7","Dark":"#6b8eff"},"PrimaryHover":{"Light":"#2848b3","Dark":"#88a4ff"},"Accent":{"Light":"#c75033","Dark":"#ff8a6b"}},"Border":{"Default":{"Light":"#d6d6d6","Dark":"#3a3a3a"},"Light":{"Light":"#e9e9e9","Dark":"#2c2c2c"},"Strong":{"Light":"#a0a0a0","Dark":"#5a5a5a"}},"Status":{"Success":{"Light":"#2e7a3a","Dark":"#5fc377"},"Warning":{"Light":"#a86b00","Dark":"#f0b84a"},"Error":{"Light":"#b62828","Dark":"#ff7373"},"Info":{"Light":"#1f6fb5","Dark":"#5fb4ff"}},"Scrollbar":{"Track":{"Light":"#ebebeb","Dark":"#1f1f1f"},"Thumb":{"Light":"#c2c2c2","Dark":"#3f3f3f"},"Hover":{"Light":"#a0a0a0","Dark":"#5a5a5a"}},"Selection":{"Background":{"Light":"#bcd2ff","Dark":"#3a4f7a"},"Text":{"Light":"#1a1a1a","Dark":"#ededed"}},"Focus":{"Outline":{"Light":"#3357c7","Dark":"#6b8eff"}},"Shadow":{"Color":{"Light":"rgba(0, 0, 0, 0.12)","Dark":"rgba(0, 0, 0, 0.55)"}},"Syntax":{"Keyword":{"Light":"#a626a4","Dark":"#c678dd"},"String":{"Light":"#50a14f","Dark":"#98c379"},"Number":{"Light":"#986801","Dark":"#d19a66"},"Comment":{"Light":"#a0a1a7","Dark":"#7f848e"},"Operator":{"Light":"#0184bc","Dark":"#56b6c2"},"Punctuation":{"Light":"#383a42","Dark":"#abb2bf"},"Function":{"Light":"#4078f2","Dark":"#61afef"},"Variable":{"Light":"#383a42","Dark":"#e06c75"},"Type":{"Light":"#c18401","Dark":"#e5c07b"},"Builtin":{"Light":"#986801","Dark":"#d19a66"},"Property":{"Light":"#e45649","Dark":"#e06c75"},"Tag":{"Light":"#e45649","Dark":"#e06c75"},"AttrName":{"Light":"#986801","Dark":"#d19a66"},"AttrValue":{"Light":"#50a14f","Dark":"#98c379"}}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif","Serif":"Georgia, Cambria, Times New Roman, Times, serif","Mono":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},"Size":{"XS":"0.75rem","SM":"0.875rem","MD":"1rem","LG":"1.125rem","XL":"1.375rem","XXL":"1.75rem"},"Weight":{"Regular":"400","Medium":"500","Bold":"700"},"LineHeight":{"Tight":"1.2","Normal":"1.45","Loose":"1.7"}},"Spacing":{"XS":"4px","SM":"8px","MD":"12px","LG":"16px","XL":"24px","XXL":"32px"},"Radius":{"None":"0","SM":"2px","MD":"4px","LG":"8px","XL":"12px","Pill":"999px"},"Shadow":{"SM":"0 1px 2px var(--theme-color-shadow-color)","MD":"0 2px 6px var(--theme-color-shadow-color)","LG":"0 6px 18px var(--theme-color-shadow-color)"},"ZIndex":{"Base":"0","Dropdown":"100","Sticky":"200","Overlay":"900","Modal":"1000","Toast":"2000","Tooltip":"3000"},"Duration":{"Fast":"100ms","Normal":"200ms","Slow":"400ms"}},"Brand":{"Name":"Retold","Tagline":"A suite of JavaScript modules for building web applications and APIs."},"CSS":[{"Hash":"retold-default-brand-accents","Priority":600,"Content":"/* retold-default — subtle brand-aware accents.\n Falls back gracefully to theme-color tokens when no brand is registered,\n so non-branded apps still look right. */\na { text-decoration-color: var(--brand-color-primary-mode, var(--theme-color-brand-primary, currentColor)); text-decoration-thickness: 2px; text-underline-offset: 3px; }\nh1 { border-bottom: 2px solid var(--brand-color-primary-mode, var(--theme-color-border-default, transparent)); padding-bottom: 6px; }\nh2 { border-bottom: 1px solid var(--brand-color-secondary-mode, var(--theme-color-border-light, transparent)); padding-bottom: 4px; }"}]};},{}],53:[function(require,module,exports){module.exports={"Hash":"retold-manager","Name":"Retold Manager","Description":"Default palette for the Retold Manager application — GitHub-style dark on slate with a parallel light variant. Dark side mirrors retold-manager.css's original colors verbatim; light side is a sympathetic translation tuned for daytime use. The retold-manager.css :root block proxies its --color-* names through these --theme-color-* tokens (with the original hexes as fallbacks), so this theme drives the whole app cleanly and other catalog themes still skin most of it.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"system"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#f6f8fa","Dark":"#0e1116"},"Secondary":{"Light":"#eef1f4","Dark":"#161b22"},"Tertiary":{"Light":"#e4e8ec","Dark":"#1c2128"},"Panel":{"Light":"#ffffff","Dark":"#161b22"},"PanelAlt":{"Light":"#f0f3f6","Dark":"#1c2128"},"Hover":{"Light":"#eaeef2","Dark":"#1c2128"},"Selected":{"Light":"#dbe7ff","Dark":"#243454"}},"Border":{"Default":{"Light":"#d0d7de","Dark":"#30363d"},"Light":{"Light":"#e1e4e8","Dark":"#21262d"},"Strong":{"Light":"#a8b1bb","Dark":"#484f58"}},"Brand":{"Primary":{"Light":"#0969da","Dark":"#2f81f7"},"PrimaryHover":{"Light":"#0550ae","Dark":"#1f6feb"},"Accent":{"Light":"#0969da","Dark":"#2f81f7"},"AccentHover":{"Light":"#0550ae","Dark":"#1f6feb"}},"Text":{"Primary":{"Light":"#1f2328","Dark":"#e6edf3"},"Secondary":{"Light":"#3b424a","Dark":"#c9d1d9"},"Muted":{"Light":"#656d76","Dark":"#8b949e"},"Placeholder":{"Light":"#8c959f","Dark":"#6e7681"},"OnBrand":{"Light":"#ffffff","Dark":"#ffffff"}},"Status":{"Success":{"Light":"#1a7f37","Dark":"#3fb950"},"Danger":{"Light":"#cf222e","Dark":"#f85149"},"Warning":{"Light":"#9a6700","Dark":"#d29922"},"Error":{"Light":"#cf222e","Dark":"#f85149"},"Info":{"Light":"#0969da","Dark":"#2f81f7"}},"Scrollbar":{"Track":{"Light":"#eef1f4","Dark":"#161b22"},"Thumb":{"Light":"#c1c8cf","Dark":"#30363d"},"Hover":{"Light":"#a8b1bb","Dark":"#484f58"}},"Selection":{"Background":{"Light":"#cfe6ff","Dark":"#243454"},"Text":{"Light":"#1f2328","Dark":"#e6edf3"}},"Focus":{"Outline":{"Light":"#0969da","Dark":"#2f81f7"}},"Syntax":{"Keyword":{"Light":"#cf222e","Dark":"#ff7b72"},"String":{"Light":"#0a3069","Dark":"#a5d6ff"},"Number":{"Light":"#0550ae","Dark":"#79c0ff"},"Comment":{"Light":"#6e7781","Dark":"#8b949e"},"Operator":{"Light":"#cf222e","Dark":"#ff7b72"},"Punctuation":{"Light":"#24292f","Dark":"#c9d1d9"},"Function":{"Light":"#8250df","Dark":"#d2a8ff"},"Variable":{"Light":"#24292f","Dark":"#c9d1d9"},"Type":{"Light":"#953800","Dark":"#ffa657"},"Builtin":{"Light":"#0550ae","Dark":"#79c0ff"},"Property":{"Light":"#0550ae","Dark":"#79c0ff"},"Tag":{"Light":"#116329","Dark":"#7ee787"},"AttrName":{"Light":"#8250df","Dark":"#d2a8ff"},"AttrValue":{"Light":"#0a3069","Dark":"#a5d6ff"}}},"Typography":{"Family":{"Sans":"-apple-system, BlinkMacSystemFont, \"SF Pro\", \"Segoe UI\", sans-serif","Mono":"ui-monospace, \"SF Mono\", Menlo, Monaco, \"Courier New\", monospace"}},"Layout":{"SidebarWidth":"280px","TopbarHeight":"44px","StatusbarHeight":"28px"}}};},{}],54:[function(require,module,exports){module.exports={"Hash":"retold-mono","Name":"Retold Mono","Version":"0.0.2","Description":"High-contrast monochrome theme — black on white in light mode, white on black in dark mode. Useful for print, simple admin tooling, and as a paired-mode reference theme that proves the toggle works on something visually unmistakable.","Comprehensive":true,"Modes":{"Strategy":"system","Default":"system"},"Tokens":{"Color":{"Background":{"Primary":{"Light":"#ffffff","Dark":"#000000"},"Secondary":{"Light":"#f0f0f0","Dark":"#101010"},"Tertiary":{"Light":"#e2e2e2","Dark":"#1c1c1c"},"Panel":{"Light":"#ffffff","Dark":"#000000"},"Hover":{"Light":"#ebebeb","Dark":"#1a1a1a"},"Selected":{"Light":"#d6d6d6","Dark":"#2a2a2a"}},"Text":{"Primary":{"Light":"#000000","Dark":"#ffffff"},"Secondary":{"Light":"#222222","Dark":"#dddddd"},"Muted":{"Light":"#555555","Dark":"#aaaaaa"},"Placeholder":{"Light":"#888888","Dark":"#777777"}},"Brand":{"Primary":{"Light":"#000000","Dark":"#ffffff"},"PrimaryHover":{"Light":"#222222","Dark":"#dddddd"},"Accent":{"Light":"#444444","Dark":"#bbbbbb"}},"Border":{"Default":{"Light":"#888888","Dark":"#666666"},"Light":{"Light":"#cccccc","Dark":"#333333"},"Strong":{"Light":"#000000","Dark":"#ffffff"}},"Status":{"Success":{"Light":"#000000","Dark":"#ffffff"},"Warning":{"Light":"#000000","Dark":"#ffffff"},"Error":{"Light":"#000000","Dark":"#ffffff"},"Info":{"Light":"#000000","Dark":"#ffffff"}},"Scrollbar":{"Track":{"Light":"#e0e0e0","Dark":"#101010"},"Thumb":{"Light":"#888888","Dark":"#666666"},"Hover":{"Light":"#444444","Dark":"#bbbbbb"}},"Selection":{"Background":{"Light":"#000000","Dark":"#ffffff"},"Text":{"Light":"#ffffff","Dark":"#000000"}},"Focus":{"Outline":{"Light":"#000000","Dark":"#ffffff"}},"Shadow":{"Color":{"Light":"rgba(0, 0, 0, 0.18)","Dark":"rgba(255, 255, 255, 0.18)"}},"Syntax":{"Keyword":{"Light":"#000000","Dark":"#ffffff"},"String":{"Light":"#555555","Dark":"#cccccc"},"Number":{"Light":"#000000","Dark":"#ffffff"},"Comment":{"Light":"#888888","Dark":"#888888"},"Operator":{"Light":"#000000","Dark":"#ffffff"},"Punctuation":{"Light":"#444444","Dark":"#bbbbbb"},"Function":{"Light":"#000000","Dark":"#ffffff"},"Variable":{"Light":"#000000","Dark":"#ffffff"},"Type":{"Light":"#222222","Dark":"#dddddd"},"Builtin":{"Light":"#222222","Dark":"#dddddd"},"Property":{"Light":"#444444","Dark":"#bbbbbb"},"Tag":{"Light":"#000000","Dark":"#ffffff"},"AttrName":{"Light":"#444444","Dark":"#bbbbbb"},"AttrValue":{"Light":"#555555","Dark":"#cccccc"}}},"Typography":{"Family":{"Sans":"Helvetica, Arial, sans-serif","Serif":"Georgia, Times New Roman, serif","Mono":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"},"Size":{"XS":"0.75rem","SM":"0.875rem","MD":"1rem","LG":"1.125rem","XL":"1.375rem","XXL":"1.75rem"},"Weight":{"Regular":"400","Medium":"600","Bold":"700"},"LineHeight":{"Tight":"1.15","Normal":"1.4","Loose":"1.65"}},"Spacing":{"XS":"4px","SM":"8px","MD":"12px","LG":"16px","XL":"24px","XXL":"32px"},"Radius":{"None":"0","SM":"0","MD":"0","LG":"0","XL":"0","Pill":"999px"},"Shadow":{"SM":"0 1px 0 var(--theme-color-shadow-color)","MD":"0 2px 0 var(--theme-color-shadow-color)","LG":"0 4px 0 var(--theme-color-shadow-color)"},"ZIndex":{"Base":"0","Dropdown":"100","Sticky":"200","Overlay":"900","Modal":"1000","Toast":"2000","Tooltip":"3000"},"Duration":{"Fast":"0ms","Normal":"0ms","Slow":"0ms"}},"Brand":{"Name":"Retold Mono","Tagline":"Black on white. White on black. Nothing else."},"CSS":[{"Hash":"retold-mono-brand-accents","Priority":600,"Content":"/* retold-mono — keeps the all-monochrome aesthetic but lets brand colors\n in for narrow accent moments. The thick rule under H1 is brand primary;\n the hair rule under H2 is brand secondary. Without a brand registered\n they fall back to mono black/grey. */\na { text-decoration-color: var(--brand-color-primary-mode, currentColor); text-decoration-thickness: 2px; text-underline-offset: 3px; }\nh1 { border-bottom: 3px solid var(--brand-color-primary-mode, var(--theme-color-text-primary, #000)); padding-bottom: 6px; }\nh2 { border-bottom: 1px solid var(--brand-color-secondary-mode, var(--theme-color-border-default, #888)); padding-bottom: 4px; }"}]};},{}],55:[function(require,module,exports){module.exports={"Hash":"solarized-dark","Name":"Solarized Dark","Category":"Fun","Version":"0.0.1","Description":"Schoonover's classic palette Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#002B36","Secondary":"#073642","Tertiary":"#003B4A","Panel":"#00303C","Viewer":"#001E28","Hover":"#0A4858","Selected":"#155868","Thumb":"#073642"},"Text":{"Primary":"#FDF6E3","Secondary":"#EEE8D5","Muted":"#93A1A1","Dim":"#839496","Placeholder":"#657B83"},"Brand":{"Accent":"#268BD2","AccentHover":"#45A0E0"},"Border":{"Default":"#0A4050","Light":"#125868"},"Status":{"Danger":"#DC322F","DangerMuted":"#AA2A28"},"Scrollbar":{"Track":"#0A4050","Hover":"#125868"},"Selection":{"Background":"rgba(38, 139, 210, 0.25)"},"Focus":{"Outline":"#268BD2"},"Syntax":{"Keyword":"#859900","String":"#2AA198","Number":"#D33682","Comment":"#586E75","Operator":"#268BD2","Punctuation":"#93A1A1","Function":"#B58900","Variable":"#FDF6E3","Type":"#B58900","Builtin":"#CB4B16","Property":"#268BD2","Tag":"#268BD2","AttrName":"#B58900","AttrValue":"#2AA198"}},"Typography":{"Family":{"Sans":"'Source Code Pro', 'Fira Code', monospace","Mono":"'Source Code Pro', 'Fira Code', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#EEE8D5","Accent":"#268BD2","Muted":"#839496","Light":"#003B4A","WarmBeige":"#073642","TealTint":"#004050","Lavender":"#003848","AmberTint":"#0A3A30","PdfFill":"#0A3028","PdfText":"#DC322F"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],56:[function(require,module,exports){module.exports={"Hash":"synthwave","Name":"Synthwave","Category":"Fun","Version":"0.0.1","Description":"Purple and pink neon Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#1A0A2E","Secondary":"#140824","Tertiary":"#200E38","Panel":"#1C0C32","Viewer":"#100620","Hover":"#2A1848","Selected":"#3A2060","Thumb":"#140824"},"Text":{"Primary":"#E8C0F8","Secondary":"#D0A8E8","Muted":"#9878B8","Dim":"#7858A8","Placeholder":"#584088"},"Brand":{"Accent":"#FF71CE","AccentHover":"#FF99DD"},"Border":{"Default":"#302050","Light":"#402868"},"Status":{"Danger":"#FF4488","DangerMuted":"#AA3366"},"Scrollbar":{"Track":"#302050","Hover":"#402868"},"Selection":{"Background":"rgba(255, 113, 206, 0.25)"},"Focus":{"Outline":"#FF71CE"},"Syntax":{"Keyword":"#FF6AD5","String":"#FFE066","Number":"#FF6AD5","Comment":"#9C8AC1","Operator":"#26F0F1","Punctuation":"#C8B6E2","Function":"#26F0F1","Variable":"#FFE0FF","Type":"#FFD93D","Builtin":"#FFD93D","Property":"#FF477E","Tag":"#FF477E","AttrName":"#FFD93D","AttrValue":"#FFE066"}},"Typography":{"Family":{"Sans":"'Trebuchet MS', sans-serif","Mono":"'Courier New', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#D0A8E8","Accent":"#FF71CE","Muted":"#7858A8","Light":"#200E38","WarmBeige":"#221040","TealTint":"#1A0C30","Lavender":"#1E0E36","AmberTint":"#241028","PdfFill":"#241020","PdfText":"#FF4488"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],57:[function(require,module,exports){module.exports={"Hash":"twilight","Name":"Twilight","Category":"Grey","Version":"0.0.1","Description":"Dark grey, low light. Ported from RetoldRemote-ThemeDefinitions.js to the pict-provider-theme manifest format. Single-mode (no light/dark bifurcation). Aliases preserve the legacy `--retold-*` variable names so existing CSS keeps working through the migration.","Comprehensive":true,"Modes":{"Strategy":"single","Default":"dark"},"Tokens":{"Color":{"Background":{"Primary":"#1E1E1E","Secondary":"#181818","Tertiary":"#252525","Panel":"#202020","Viewer":"#141414","Hover":"#2E2E2E","Selected":"#404040","Thumb":"#181818"},"Text":{"Primary":"#E0E0E0","Secondary":"#C8C8C8","Muted":"#909090","Dim":"#707070","Placeholder":"#585858"},"Brand":{"Accent":"#A0A0A0","AccentHover":"#C0C0C0"},"Border":{"Default":"#333333","Light":"#404040"},"Status":{"Danger":"#FF6666","DangerMuted":"#AA6666"},"Scrollbar":{"Track":"#404040","Hover":"#505050"},"Selection":{"Background":"rgba(160, 160, 160, 0.25)"},"Focus":{"Outline":"#A0A0A0"},"Syntax":{"Keyword":"#B58FFF","String":"#9CDFB0","Number":"#FFB870","Comment":"#6E6E6E","Operator":"#7CC5FF","Punctuation":"#C0C0C0","Function":"#FFD080","Variable":"#E0E0E0","Type":"#FFB870","Builtin":"#FFB870","Property":"#FF8B8B","Tag":"#FF8B8B","AttrName":"#FFB870","AttrValue":"#9CDFB0"}},"Typography":{"Family":{"Sans":"system-ui, -apple-system, sans-serif","Mono":"'SF Mono', 'Fira Code', 'Consolas', monospace"}}},"Aliases":{"--retold-bg-primary":"Color.Background.Primary","--retold-bg-secondary":"Color.Background.Secondary","--retold-bg-tertiary":"Color.Background.Tertiary","--retold-bg-panel":"Color.Background.Panel","--retold-bg-viewer":"Color.Background.Viewer","--retold-bg-hover":"Color.Background.Hover","--retold-bg-selected":"Color.Background.Selected","--retold-bg-thumb":"Color.Background.Thumb","--retold-text-primary":"Color.Text.Primary","--retold-text-secondary":"Color.Text.Secondary","--retold-text-muted":"Color.Text.Muted","--retold-text-dim":"Color.Text.Dim","--retold-text-placeholder":"Color.Text.Placeholder","--retold-accent":"Color.Brand.Accent","--retold-accent-hover":"Color.Brand.AccentHover","--retold-border":"Color.Border.Default","--retold-border-light":"Color.Border.Light","--retold-danger":"Color.Status.Danger","--retold-danger-muted":"Color.Status.DangerMuted","--retold-scrollbar":"Color.Scrollbar.Track","--retold-scrollbar-hover":"Color.Scrollbar.Hover","--retold-selection-bg":"Color.Selection.Background","--retold-focus-outline":"Color.Focus.Outline","--retold-font-family":"Typography.Family.Sans","--retold-font-mono":"Typography.Family.Mono"},"IconColors":{"Primary":"#C8C8C8","Accent":"#A0A0A0","Muted":"#707070","Light":"#252525","WarmBeige":"#2A2A2A","TealTint":"#222222","Lavender":"#282828","AmberTint":"#2E2A24","PdfFill":"#2E2224","PdfText":"#E06060"},"CSS":[],"SVG":{},"Image":{},"CompiledAt":"2026-05-03T18:12:53.408Z","CompilerVersion":1};},{}],58:[function(require,module,exports){/**
|
|
3310
3376
|
* Theme-BottomBar — standard application footer row.
|
|
3311
3377
|
*
|
|
3312
3378
|
* The bottom-row counterpart to Theme-TopBar: a thin status / chrome bar
|
|
@@ -3345,7 +3411,7 @@ if(typeof document!=='undefined'&&this.options.Height){let tmpRoot=document.quer
|
|
|
3345
3411
|
// Mirrors Theme-TopBar's setNavView / setUserView — call from a
|
|
3346
3412
|
// router callback to swap the bottom bar's slot content as the
|
|
3347
3413
|
// route changes (different status formats per page, etc.).
|
|
3348
|
-
setStatusView(pViewIdentifier){this._setSlotView('StatusView','#Theme-BottomBar-Status',pViewIdentifier);}setInfoView(pViewIdentifier){this._setSlotView('InfoView','#Theme-BottomBar-Info',pViewIdentifier);}setActionsView(pViewIdentifier){this._setSlotView('ActionsView','#Theme-BottomBar-Actions',pViewIdentifier);}_setSlotView(pOptionKey,pDestSelector,pViewIdentifier){this.options[pOptionKey]=pViewIdentifier||null;if(typeof document!=='undefined'){let tmpDest=document.querySelector(pDestSelector);if(tmpDest){tmpDest.innerHTML='';}}if(!pViewIdentifier){return;}let tmpView=this.pict.views[pViewIdentifier];if(tmpView){tmpView.render();}else if(this.log&&this.log.warn){this.log.warn('Theme-BottomBar: view "'+pViewIdentifier+'" not registered');}}}module.exports=PictViewThemeBottomBar;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":
|
|
3414
|
+
setStatusView(pViewIdentifier){this._setSlotView('StatusView','#Theme-BottomBar-Status',pViewIdentifier);}setInfoView(pViewIdentifier){this._setSlotView('InfoView','#Theme-BottomBar-Info',pViewIdentifier);}setActionsView(pViewIdentifier){this._setSlotView('ActionsView','#Theme-BottomBar-Actions',pViewIdentifier);}_setSlotView(pOptionKey,pDestSelector,pViewIdentifier){this.options[pOptionKey]=pViewIdentifier||null;if(typeof document!=='undefined'){let tmpDest=document.querySelector(pDestSelector);if(tmpDest){tmpDest.innerHTML='';}}if(!pViewIdentifier){return;}let tmpView=this.pict.views[pViewIdentifier];if(tmpView){tmpView.render();}else if(this.log&&this.log.warn){this.log.warn('Theme-BottomBar: view "'+pViewIdentifier+'" not registered');}}}module.exports=PictViewThemeBottomBar;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":69}],59:[function(require,module,exports){/**
|
|
3349
3415
|
* Theme-Brand-Mark — single-row inline brand mark (icon + name).
|
|
3350
3416
|
*
|
|
3351
3417
|
* The drop-in counterpart to Theme-BrandStrip for apps that put the
|
|
@@ -3373,7 +3439,7 @@ ShowName:true,Templates:[{Hash:'Theme-Brand-Mark-Template',Template:/*html*/"{~T
|
|
|
3373
3439
|
// reference `currentColor` inherit `--brand-color-primary-mode`.
|
|
3374
3440
|
Hash:'Theme-Brand-Mark-IconSVG-Template',Template:/*html*/"<span class=\"pict-theme-brand-mark-icon\">{~D:Record.IconHTML~}</span>"},{Hash:'Theme-Brand-Mark-IconImg-Template',Template:/*html*/"<span class=\"pict-theme-brand-mark-icon\"><img src=\"{~D:Record.IconURL~}\" alt=\"\"></span>"},{Hash:'Theme-Brand-Mark-Name-Template',Template:/*html*/"<span class=\"pict-theme-brand-mark-name\">{~D:Record.Name~}</span>"}],Renderables:[{RenderableHash:'Theme-Brand-Mark-Renderable',TemplateHash:'Theme-Brand-Mark-Template',ContentDestinationAddress:'#Theme-Brand-Mark',RenderMethod:'replace'}],CSS:/*css*/"\n.pict-theme-brand-mark {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 8px;\n\t/* line-height: 1 collapses the inherited ~1.2 line-box around the\n\t name glyphs. Without this the inline-flex container is taller\n\t than its visible content, the line-box adds asymmetric space\n\t above the caps, and the whole mark looks pushed up vs.\n\t neighbouring buttons that sit on standard 12px-text baselines. */\n\tline-height: 1;\n\tcolor: var(--brand-color-primary-mode, var(--theme-color-text-primary, #1a1a1a));\n\tuser-select: none;\n}\n.pict-theme-brand-mark-icon {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 22px;\n\theight: 22px;\n\tcolor: currentColor;\n}\n.pict-theme-brand-mark-icon img,\n.pict-theme-brand-mark-icon svg {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: block;\n}\n.pict-theme-brand-mark-name {\n\t/* Font size dropped from 15 \u2192 14 so the brand name reads closer\n\t to the typical 12px action-button text height; bigger glyphs\n\t reaching higher into the row are why the mark looked optically\n\t high. The 2px brand-secondary underline keeps the mark feeling\n\t distinctly branded; padding-bottom: 1px was an asymmetric nudge\n\t that shifted the visual center up \u2014 removed. */\n\tfont-size: 14px;\n\tfont-weight: 600;\n\tletter-spacing: 0.4px;\n\tborder-bottom: 2px solid var(--brand-color-secondary-mode, transparent);\n\twhite-space: nowrap;\n}\n/* Compact form \u2014 at narrow viewports the brand mark collapses to\n icon-only. The icon alone still reads as the brand (the deterministic\n logo is designed to be recognisable without the wordmark) and freeing\n up the wordmark's width keeps the nav buttons reachable on tablet /\n small-laptop widths. The threshold matches the topbar's compact\n breakpoint in Theme-TopBar. */\n@media (max-width: 720px) {\n\t.pict-theme-brand-mark-name {\n\t\tdisplay: none;\n\t}\n}",CSSPriority:500};class PictViewThemeBrandMark extends libPictView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this._unsubscribeFromBrand=null;}onAfterInitialize(){this._subscribeToBrand();return super.onAfterInitialize?super.onAfterInitialize():undefined;}onBeforeRender(pRenderable){this._refreshAppData();return super.onBeforeRender?super.onBeforeRender(pRenderable):undefined;}onAfterRender(pRenderable,pAddress,pRecord,pContent){this.pict.CSSMap.injectCSS();return super.onAfterRender?super.onAfterRender(pRenderable,pAddress,pRecord,pContent):undefined;}_subscribeToBrand(){if(this._unsubscribeFromBrand)return;let tmpSelf=this;this._unsubscribeFromBrand=libThemeBrand.onChange(function(){tmpSelf.render();});}_refreshAppData(){let tmpBrand=libThemeBrand.getActive();this.pict.AppData.PictSectionTheme=this.pict.AppData.PictSectionTheme||{};if(!tmpBrand){this.pict.AppData.PictSectionTheme.BrandMark={BodySlot:[]};return;}// Single-element array slot drives the {~TS:~} render. Empty
|
|
3375
3441
|
// slots for icon-img/icon-svg/name suppress those sub-templates.
|
|
3376
|
-
let tmpShowIcon=this.options.ShowIcon!==false;let tmpShowName=this.options.ShowName!==false;let tmpIconSVGSlot=tmpShowIcon&&tmpBrand.IconType==='svg'&&tmpBrand.Icon?[{IconHTML:tmpBrand.Icon}]:[];let tmpIconImgSlot=tmpShowIcon&&tmpBrand.IconType==='image'&&tmpBrand.Icon?[{IconURL:tmpBrand.Icon}]:[];let tmpNameSlot=tmpShowName&&tmpBrand.Name?[{Name:tmpBrand.Name}]:[];this.pict.AppData.PictSectionTheme.BrandMark={BodySlot:[{Tooltip:tmpBrand.Tagline||tmpBrand.Name||'',IconSVGSlot:tmpIconSVGSlot,IconImgSlot:tmpIconImgSlot,NameSlot:tmpNameSlot}]};}}module.exports=PictViewThemeBrandMark;module.exports.default_configuration=_ViewConfiguration;},{"../Theme-Brand.js":
|
|
3442
|
+
let tmpShowIcon=this.options.ShowIcon!==false;let tmpShowName=this.options.ShowName!==false;let tmpIconSVGSlot=tmpShowIcon&&tmpBrand.IconType==='svg'&&tmpBrand.Icon?[{IconHTML:tmpBrand.Icon}]:[];let tmpIconImgSlot=tmpShowIcon&&tmpBrand.IconType==='image'&&tmpBrand.Icon?[{IconURL:tmpBrand.Icon}]:[];let tmpNameSlot=tmpShowName&&tmpBrand.Name?[{Name:tmpBrand.Name}]:[];this.pict.AppData.PictSectionTheme.BrandMark={BodySlot:[{Tooltip:tmpBrand.Tagline||tmpBrand.Name||'',IconSVGSlot:tmpIconSVGSlot,IconImgSlot:tmpIconImgSlot,NameSlot:tmpNameSlot}]};}}module.exports=PictViewThemeBrandMark;module.exports.default_configuration=_ViewConfiguration;},{"../Theme-Brand.js":31,"pict-view":69}],60:[function(require,module,exports){/**
|
|
3377
3443
|
* Theme-BrandStrip — the subtle two-line brand signature that sits
|
|
3378
3444
|
* under the application's navigation.
|
|
3379
3445
|
*
|
|
@@ -3409,7 +3475,7 @@ Hash:'Theme-BrandStrip-IconSVG-Template',Template:/*html*/"<span class=\"pict-th
|
|
|
3409
3475
|
Hash:'Theme-BrandStrip-IconImg-Template',Template:/*html*/"<span class=\"pict-theme-brandstrip-icon\"><img src=\"{~D:Record.IconURL~}\" alt=\"\"></span>"}],Renderables:[{RenderableHash:'Theme-BrandStrip-Renderable',TemplateHash:'Theme-BrandStrip-Template',ContentDestinationAddress:'#Theme-BrandStrip',RenderMethod:'replace'}],CSS:/*css*/"\n.pict-theme-brandstrip {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tuser-select: none;\n}\n.pict-theme-brandstrip-row {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 6px 12px 4px;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\tletter-spacing: 0.4px;\n\ttext-transform: uppercase;\n\tcolor: var(--brand-color-primary, var(--theme-color-text-muted, #6b6b6b));\n}\n.pict-theme-brandstrip-name {\n\tborder-bottom: 2px solid var(--brand-color-secondary, transparent);\n\tpadding-bottom: 1px;\n}\n.pict-theme-brandstrip-icon {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 16px; height: 16px;\n\tcolor: var(--brand-color-primary, currentColor);\n}\n.pict-theme-brandstrip-icon img,\n.pict-theme-brandstrip-icon svg {\n\twidth: 100%; height: 100%;\n\tdisplay: block;\n}\n.pict-theme-brandstrip-stripes {\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n}\n.pict-theme-brandstrip-stripe {\n\twidth: 100%;\n}\n.pict-theme-brandstrip-stripe-primary {\n\tbackground: var(--brand-color-primary, transparent);\n}\n.pict-theme-brandstrip-stripe-secondary {\n\tbackground: var(--brand-color-secondary, transparent);\n}",CSSPriority:500};class PictViewThemeBrandStrip extends libPictView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this._unsubscribeFromBrand=null;}onAfterInitialize(){this._subscribeToBrand();return super.onAfterInitialize?super.onAfterInitialize():undefined;}onBeforeRender(pRenderable){this._refreshAppData();return super.onBeforeRender?super.onBeforeRender(pRenderable):undefined;}onAfterRender(pRenderable,pAddress,pRecord,pContent){this.pict.CSSMap.injectCSS();return super.onAfterRender?super.onAfterRender(pRenderable,pAddress,pRecord,pContent):undefined;}_subscribeToBrand(){if(this._unsubscribeFromBrand)return;let tmpSelf=this;this._unsubscribeFromBrand=libThemeBrand.onChange(function(){tmpSelf.render();});}_refreshAppData(){let tmpBrand=libThemeBrand.getActive();this.pict.AppData.PictSectionTheme=this.pict.AppData.PictSectionTheme||{};// No brand → empty BodySlot → renderable emits nothing.
|
|
3410
3476
|
if(!tmpBrand){this.pict.AppData.PictSectionTheme.BrandStrip={BodySlot:[]};return;}let tmpShowName=this.options.ShowName!==false;// Pick the right per-icon-type slot. Only one of these will be
|
|
3411
3477
|
// non-empty so the template renders the right element.
|
|
3412
|
-
let tmpIconSVGSlot=[];let tmpIconImgSlot=[];if(tmpBrand.IconType==='svg'&&tmpBrand.Icon){tmpIconSVGSlot=[{IconHTML:tmpBrand.Icon}];}else if(tmpBrand.IconType==='image'&&tmpBrand.Icon){tmpIconImgSlot=[{IconURL:tmpBrand.Icon}];}let tmpNameRowSlot=tmpShowName?[{Name:tmpBrand.Name,IconSVGSlot:tmpIconSVGSlot,IconImgSlot:tmpIconImgSlot}]:[];let tmpTooltip=tmpBrand.Name+(tmpBrand.Tagline?' — '+tmpBrand.Tagline:'');this.pict.AppData.PictSectionTheme.BrandStrip={BodySlot:[{Tooltip:tmpTooltip,NameRowSlot:tmpNameRowSlot,PrimaryHeight:this.options.PrimaryStripeHeight||3,SecondaryHeight:this.options.SecondaryStripeHeight||1}]};}}PictViewThemeBrandStrip.default_configuration=_ViewConfiguration;module.exports=PictViewThemeBrandStrip;},{"../Theme-Brand.js":
|
|
3478
|
+
let tmpIconSVGSlot=[];let tmpIconImgSlot=[];if(tmpBrand.IconType==='svg'&&tmpBrand.Icon){tmpIconSVGSlot=[{IconHTML:tmpBrand.Icon}];}else if(tmpBrand.IconType==='image'&&tmpBrand.Icon){tmpIconImgSlot=[{IconURL:tmpBrand.Icon}];}let tmpNameRowSlot=tmpShowName?[{Name:tmpBrand.Name,IconSVGSlot:tmpIconSVGSlot,IconImgSlot:tmpIconImgSlot}]:[];let tmpTooltip=tmpBrand.Name+(tmpBrand.Tagline?' — '+tmpBrand.Tagline:'');this.pict.AppData.PictSectionTheme.BrandStrip={BodySlot:[{Tooltip:tmpTooltip,NameRowSlot:tmpNameRowSlot,PrimaryHeight:this.options.PrimaryStripeHeight||3,SecondaryHeight:this.options.SecondaryStripeHeight||1}]};}}PictViewThemeBrandStrip.default_configuration=_ViewConfiguration;module.exports=PictViewThemeBrandStrip;},{"../Theme-Brand.js":31,"pict-view":69}],61:[function(require,module,exports){/**
|
|
3413
3479
|
* Theme-Button — an embeddable SVG button (sun/moon glyph) suitable for
|
|
3414
3480
|
* application top bars. Clicking it opens a pict-section-modal popup
|
|
3415
3481
|
* containing the Theme-Picker dropdown and the Theme-ModeToggle.
|
|
@@ -3437,7 +3503,7 @@ Template:/*html*/"\n<button type=\"button\"\n class=\"pict-theme-button\"
|
|
|
3437
3503
|
tmpSelf._mountSubViews();}});}// ================================================================
|
|
3438
3504
|
// Internals
|
|
3439
3505
|
// ================================================================
|
|
3440
|
-
_modal(){let tmpHash=this.options.ModalViewHash||'Pict-Section-Modal';return this.pict&&this.pict.views&&this.pict.views[tmpHash];}_mountSubViews(){let tmpPicker=this.pict.views[this.options.PickerViewHash||'Theme-Picker'];if(tmpPicker){tmpPicker.render();}let tmpToggle=this.pict.views[this.options.ModeToggleViewHash||'Theme-ModeToggle'];if(tmpToggle){tmpToggle.render();}let tmpScale=this.pict.views[this.options.ScaleSelectViewHash||'Theme-ScaleSelect'];if(tmpScale){tmpScale.render();}}_refreshAppData(){this.pict.AppData.PictSectionTheme=this.pict.AppData.PictSectionTheme||{};this.pict.AppData.PictSectionTheme.Button={Title:this.options.Title||'Theme',AriaLabel:this.options.AriaLabel||'Open theme menu'};}}PictViewThemeButton.default_configuration=_ViewConfiguration;module.exports=PictViewThemeButton;},{"../Theme-Icons.js":
|
|
3506
|
+
_modal(){let tmpHash=this.options.ModalViewHash||'Pict-Section-Modal';return this.pict&&this.pict.views&&this.pict.views[tmpHash];}_mountSubViews(){let tmpPicker=this.pict.views[this.options.PickerViewHash||'Theme-Picker'];if(tmpPicker){tmpPicker.render();}let tmpToggle=this.pict.views[this.options.ModeToggleViewHash||'Theme-ModeToggle'];if(tmpToggle){tmpToggle.render();}let tmpScale=this.pict.views[this.options.ScaleSelectViewHash||'Theme-ScaleSelect'];if(tmpScale){tmpScale.render();}}_refreshAppData(){this.pict.AppData.PictSectionTheme=this.pict.AppData.PictSectionTheme||{};this.pict.AppData.PictSectionTheme.Button={Title:this.options.Title||'Theme',AriaLabel:this.options.AriaLabel||'Open theme menu'};}}PictViewThemeButton.default_configuration=_ViewConfiguration;module.exports=PictViewThemeButton;},{"../Theme-Icons.js":32,"pict-view":69}],62:[function(require,module,exports){/**
|
|
3441
3507
|
* Theme-ModeToggle — three-segment toggle for Light / Dark / System mode.
|
|
3442
3508
|
*
|
|
3443
3509
|
* Calls `provider.setMode(...)` on click. Greys itself out (and the
|
|
@@ -3477,7 +3543,7 @@ let tmpModeRows=[{Mode:'light',Label:tmpLabels.Light||'Light'},{Mode:'dark',Labe
|
|
|
3477
3543
|
let tmpLockedOut=tmpDisabled&&tmpRow.Mode!==tmpLockedToMode;let tmpTitle;if(tmpLockedOut){let tmpLockedLabel=tmpLockedToMode.charAt(0).toUpperCase()+tmpLockedToMode.slice(1);tmpTitle=tmpThemeName+' is fixed to '+tmpLockedLabel+' mode — pick a different theme to switch.';}else{tmpTitle=tmpRow.Label+' mode';}tmpButtons.push({Mode:tmpRow.Mode,Label:tmpRow.Label,Title:tmpTitle,Active:tmpIsActive,LockedOut:tmpLockedOut,IconLight:tmpShowIcons&&tmpRow.Mode==='light'?[{}]:[],IconDark:tmpShowIcons&&tmpRow.Mode==='dark'?[{}]:[],IconSystem:tmpShowIcons&&tmpRow.Mode==='system'?[{}]:[]});}// One-or-zero element array drives the locked-note template
|
|
3478
3544
|
// (per CLAUDE.md "single-element-array trick"). Empty array →
|
|
3479
3545
|
// note skipped entirely.
|
|
3480
|
-
let tmpLockedNoteSlot=[];let tmpWrapTitle='';if(tmpDisabled){let tmpLockedLabel=tmpLockedToMode.charAt(0).toUpperCase()+tmpLockedToMode.slice(1);let tmpMessage=tmpThemeName+' is fixed to '+tmpLockedLabel+' mode';tmpLockedNoteSlot=[{Message:tmpMessage}];tmpWrapTitle=tmpMessage+' — pick a different theme to switch modes.';}this.pict.AppData.PictSectionTheme=this.pict.AppData.PictSectionTheme||{};this.pict.AppData.PictSectionTheme.ModeToggle={ActiveMode:tmpActiveMode,Disabled:tmpDisabled,LockedToMode:tmpLockedToMode,ThemeName:tmpThemeName,Buttons:tmpButtons,LockedNoteSlot:tmpLockedNoteSlot,WrapTitle:tmpWrapTitle};}}PictViewThemeModeToggle.default_configuration=_ViewConfiguration;module.exports=PictViewThemeModeToggle;},{"../Theme-Icons.js":
|
|
3546
|
+
let tmpLockedNoteSlot=[];let tmpWrapTitle='';if(tmpDisabled){let tmpLockedLabel=tmpLockedToMode.charAt(0).toUpperCase()+tmpLockedToMode.slice(1);let tmpMessage=tmpThemeName+' is fixed to '+tmpLockedLabel+' mode';tmpLockedNoteSlot=[{Message:tmpMessage}];tmpWrapTitle=tmpMessage+' — pick a different theme to switch modes.';}this.pict.AppData.PictSectionTheme=this.pict.AppData.PictSectionTheme||{};this.pict.AppData.PictSectionTheme.ModeToggle={ActiveMode:tmpActiveMode,Disabled:tmpDisabled,LockedToMode:tmpLockedToMode,ThemeName:tmpThemeName,Buttons:tmpButtons,LockedNoteSlot:tmpLockedNoteSlot,WrapTitle:tmpWrapTitle};}}PictViewThemeModeToggle.default_configuration=_ViewConfiguration;module.exports=PictViewThemeModeToggle;},{"../Theme-Icons.js":32,"pict-view":69}],63:[function(require,module,exports){/**
|
|
3481
3547
|
* Theme-Picker — a custom dropdown that lists every theme registered
|
|
3482
3548
|
* with the Theme provider, grouped by category.
|
|
3483
3549
|
*
|
|
@@ -3531,7 +3597,7 @@ _subscribeToProvider(){if(this._unsubscribeFromProvider)return;let tmpProvider=t
|
|
|
3531
3597
|
* + the catalog's category metadata. One Header row per category,
|
|
3532
3598
|
* one item per theme with a leading SVG capability glyph.
|
|
3533
3599
|
*/_buildMenuItems(){let tmpProvider=this._provider();let tmpThemes=tmpProvider?tmpProvider.listThemes():[];let tmpActive=tmpProvider?tmpProvider.getActiveTheme():{Hash:null};let tmpActiveHash=tmpActive&&tmpActive.Hash||null;let tmpCatalog=this._loadCatalog();let tmpCategoryByHash={};let tmpCategoryOrder=[];if(Array.isArray(this.options.Categories)){tmpCategoryOrder=this.options.Categories.slice();}for(let i=0;i<tmpCatalog.length;i++){let tmpEntry=tmpCatalog[i];let tmpCat=tmpEntry.Category||'Other';tmpCategoryByHash[tmpEntry.Hash]=tmpCat;if(tmpCategoryOrder.indexOf(tmpCat)<0)tmpCategoryOrder.push(tmpCat);}let tmpBuckets={};for(let i=0;i<tmpThemes.length;i++){let tmpTheme=tmpThemes[i];let tmpCat=tmpCategoryByHash[tmpTheme.Hash]||'Other';if(!tmpBuckets[tmpCat]){tmpBuckets[tmpCat]=[];if(tmpCategoryOrder.indexOf(tmpCat)<0)tmpCategoryOrder.push(tmpCat);}tmpBuckets[tmpCat].push(tmpTheme);}let tmpShowIcons=this.options.ShowModeIcons!==false;let tmpItems=[];for(let i=0;i<tmpCategoryOrder.length;i++){let tmpCat=tmpCategoryOrder[i];if(!tmpBuckets[tmpCat]||tmpBuckets[tmpCat].length===0)continue;tmpItems.push({Header:tmpCat});for(let j=0;j<tmpBuckets[tmpCat].length;j++){let tmpTheme=tmpBuckets[tmpCat][j];let tmpIcon=tmpShowIcons?libThemeIcons.iconForTheme(tmpTheme.Strategy,tmpTheme.DefaultMode,14):'';tmpItems.push({Hash:tmpTheme.Hash,Label:tmpTheme.Name||tmpTheme.Hash,Icon:tmpIcon,Style:tmpTheme.Hash===tmpActiveHash?'active':null,Tooltip:this._capabilityLabel(tmpTheme)});}}return tmpItems;}_capabilityLabel(pTheme){let tmpStrategy=pTheme.Strategy||'single';if(tmpStrategy==='single'){let tmpMode=pTheme.DefaultMode||'light';return(pTheme.Name||pTheme.Hash)+' — '+(tmpMode==='dark'?'dark only':'light only');}return(pTheme.Name||pTheme.Hash)+' — light + dark';}_refreshAppData(){let tmpProvider=this._provider();let tmpThemes=tmpProvider?tmpProvider.listThemes():[];let tmpActive=tmpProvider?tmpProvider.getActiveTheme():{Hash:null};let tmpActiveHash=tmpActive&&tmpActive.Hash||null;// Find the active theme's metadata for the trigger glyph.
|
|
3534
|
-
let tmpActiveTheme=null;for(let i=0;i<tmpThemes.length;i++){if(tmpThemes[i].Hash===tmpActiveHash){tmpActiveTheme=tmpThemes[i];break;}}let tmpShowIcons=this.options.ShowModeIcons!==false;let tmpTriggerGlyphSlot=[];if(tmpShowIcons&&tmpActiveTheme){tmpTriggerGlyphSlot=[{IconHTML:libThemeIcons.iconForTheme(tmpActiveTheme.Strategy,tmpActiveTheme.DefaultMode,14)}];}this.pict.AppData.PictSectionTheme=this.pict.AppData.PictSectionTheme||{};this.pict.AppData.PictSectionTheme.Picker={ActiveHash:tmpActiveHash,ActiveLabel:tmpActiveTheme?tmpActiveTheme.Name||tmpActiveTheme.Hash:'Choose a theme',TriggerTooltip:tmpActiveTheme?this._capabilityLabel(tmpActiveTheme)+' — click to change':'Choose a theme',TriggerGlyphSlot:tmpTriggerGlyphSlot,ChevronHTML:libThemeIcons.iconChevronDown(10)};this.pict.AppData.PictSectionTheme.AllThemes=tmpThemes;}_loadCatalog(){try{return require('../themes/_catalog.js');}catch(pError){return[];}}}PictViewThemePicker.default_configuration=_ViewConfiguration;PictViewThemePicker.APPDATA_ADDRESS=APPDATA_ADDRESS;module.exports=PictViewThemePicker;},{"../Theme-Icons.js":
|
|
3600
|
+
let tmpActiveTheme=null;for(let i=0;i<tmpThemes.length;i++){if(tmpThemes[i].Hash===tmpActiveHash){tmpActiveTheme=tmpThemes[i];break;}}let tmpShowIcons=this.options.ShowModeIcons!==false;let tmpTriggerGlyphSlot=[];if(tmpShowIcons&&tmpActiveTheme){tmpTriggerGlyphSlot=[{IconHTML:libThemeIcons.iconForTheme(tmpActiveTheme.Strategy,tmpActiveTheme.DefaultMode,14)}];}this.pict.AppData.PictSectionTheme=this.pict.AppData.PictSectionTheme||{};this.pict.AppData.PictSectionTheme.Picker={ActiveHash:tmpActiveHash,ActiveLabel:tmpActiveTheme?tmpActiveTheme.Name||tmpActiveTheme.Hash:'Choose a theme',TriggerTooltip:tmpActiveTheme?this._capabilityLabel(tmpActiveTheme)+' — click to change':'Choose a theme',TriggerGlyphSlot:tmpTriggerGlyphSlot,ChevronHTML:libThemeIcons.iconChevronDown(10)};this.pict.AppData.PictSectionTheme.AllThemes=tmpThemes;}_loadCatalog(){try{return require('../themes/_catalog.js');}catch(pError){return[];}}}PictViewThemePicker.default_configuration=_ViewConfiguration;PictViewThemePicker.APPDATA_ADDRESS=APPDATA_ADDRESS;module.exports=PictViewThemePicker;},{"../Theme-Icons.js":32,"../themes/_catalog.js":38,"pict-view":69}],64:[function(require,module,exports){/**
|
|
3535
3601
|
* Theme-ScaleSelect — dropdown that picks a viewport scale (zoom).
|
|
3536
3602
|
*
|
|
3537
3603
|
* Independent of the active theme bundle: scale is a per-user
|
|
@@ -3554,7 +3620,7 @@ _subscribeToScale(){if(this._unsubscribeFromScale)return;let tmpSelf=this;this._
|
|
|
3554
3620
|
// 1.10 from a hotkey nudge) that doesn't exactly equal any preset.
|
|
3555
3621
|
// We highlight the nearest option so the dropdown still reflects
|
|
3556
3622
|
// roughly where the user is.
|
|
3557
|
-
let tmpClosestIdx=0;let tmpClosestDelta=Infinity;for(let i=0;i<tmpPresets.length;i++){let tmpDelta=Math.abs(tmpPresets[i].Value-tmpActive);if(tmpDelta<tmpClosestDelta){tmpClosestDelta=tmpDelta;tmpClosestIdx=i;}}let tmpOptions=[];for(let i=0;i<tmpPresets.length;i++){let tmpEntry=tmpPresets[i];tmpOptions.push({Value:tmpEntry.Value,Label:tmpEntry.Label,Selected:i===tmpClosestIdx});}let tmpTooltip='Viewport scale — currently '+Math.round(tmpActive*100)+'%';this.pict.AppData.PictSectionTheme=this.pict.AppData.PictSectionTheme||{};this.pict.AppData.PictSectionTheme.ScaleSelect={ActiveScale:tmpActive,Tooltip:tmpTooltip,Options:tmpOptions};}}PictViewThemeScaleSelect.default_configuration=_ViewConfiguration;module.exports=PictViewThemeScaleSelect;},{"../Theme-Scale.js":
|
|
3623
|
+
let tmpClosestIdx=0;let tmpClosestDelta=Infinity;for(let i=0;i<tmpPresets.length;i++){let tmpDelta=Math.abs(tmpPresets[i].Value-tmpActive);if(tmpDelta<tmpClosestDelta){tmpClosestDelta=tmpDelta;tmpClosestIdx=i;}}let tmpOptions=[];for(let i=0;i<tmpPresets.length;i++){let tmpEntry=tmpPresets[i];tmpOptions.push({Value:tmpEntry.Value,Label:tmpEntry.Label,Selected:i===tmpClosestIdx});}let tmpTooltip='Viewport scale — currently '+Math.round(tmpActive*100)+'%';this.pict.AppData.PictSectionTheme=this.pict.AppData.PictSectionTheme||{};this.pict.AppData.PictSectionTheme.ScaleSelect={ActiveScale:tmpActive,Tooltip:tmpTooltip,Options:tmpOptions};}}PictViewThemeScaleSelect.default_configuration=_ViewConfiguration;module.exports=PictViewThemeScaleSelect;},{"../Theme-Scale.js":34,"pict-view":69}],65:[function(require,module,exports){/**
|
|
3558
3624
|
* Theme-TopBar — standard application chrome row.
|
|
3559
3625
|
*
|
|
3560
3626
|
* Provides the boilerplate every Pict / retold app remakes: a flex row
|
|
@@ -3695,7 +3761,7 @@ tmpStyleEl.textContent='.pict-theme-topbar-nav { display: flex !impor
|
|
|
3695
3761
|
* Override on the instance (`view.openBurgerMenu = function() {...}`)
|
|
3696
3762
|
* to customise the popup contents — e.g. emit a per-app menu view
|
|
3697
3763
|
* instead of cloning the topbar DOM.
|
|
3698
|
-
*/openBurgerMenu(){if(typeof document==='undefined')return null;let tmpModal=this.pict.views['Pict-Section-Modal'];if(!tmpModal||typeof tmpModal.show!=='function'){if(typeof console!=='undefined'&&console.warn){console.warn('Theme-TopBar: pict-section-modal not registered — burger menu unavailable.');}return null;}let tmpSections=[];let tmpNav=document.querySelector('#Theme-TopBar-Nav');let tmpUser=document.querySelector('#Theme-TopBar-User');if(tmpNav&&tmpNav.innerHTML.trim()){tmpSections.push('<div class="pict-theme-burger-menu-section">'+tmpNav.innerHTML+'</div>');}if(tmpUser&&tmpUser.innerHTML.trim()){tmpSections.push('<div class="pict-theme-burger-menu-section">'+tmpUser.innerHTML+'</div>');}if(tmpSections.length===0){tmpSections.push('<div class="pict-theme-burger-menu-empty">No menu items configured.</div>');}let tmpHTML='<div class="pict-theme-burger-menu">'+tmpSections.join('')+'</div>';return tmpModal.show({title:'Menu',content:tmpHTML,width:'280px',closeable:true,buttons:[]});}}module.exports=PictViewThemeTopBar;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":
|
|
3764
|
+
*/openBurgerMenu(){if(typeof document==='undefined')return null;let tmpModal=this.pict.views['Pict-Section-Modal'];if(!tmpModal||typeof tmpModal.show!=='function'){if(typeof console!=='undefined'&&console.warn){console.warn('Theme-TopBar: pict-section-modal not registered — burger menu unavailable.');}return null;}let tmpSections=[];let tmpNav=document.querySelector('#Theme-TopBar-Nav');let tmpUser=document.querySelector('#Theme-TopBar-User');if(tmpNav&&tmpNav.innerHTML.trim()){tmpSections.push('<div class="pict-theme-burger-menu-section">'+tmpNav.innerHTML+'</div>');}if(tmpUser&&tmpUser.innerHTML.trim()){tmpSections.push('<div class="pict-theme-burger-menu-section">'+tmpUser.innerHTML+'</div>');}if(tmpSections.length===0){tmpSections.push('<div class="pict-theme-burger-menu-empty">No menu items configured.</div>');}let tmpHTML='<div class="pict-theme-burger-menu">'+tmpSections.join('')+'</div>';return tmpModal.show({title:'Menu',content:tmpHTML,width:'280px',closeable:true,buttons:[]});}}module.exports=PictViewThemeTopBar;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":69}],66:[function(require,module,exports){module.exports={"name":"pict-template","version":"1.0.15","description":"Pict Template Base Class","main":"source/Pict-Template.js","scripts":{"start":"node source/Pict-Template.js","test":"npx quack test","tests":"npx quack test -g","coverage":"npx quack coverage","build":"npx quack build","types":"tsc -p ."},"types":"types/source/Pict-Template.d.ts","repository":{"type":"git","url":"git+https://github.com/stevenvelozo/pict-view.git"},"author":"steven velozo <steven@velozo.com>","license":"MIT","bugs":{"url":"https://github.com/stevenvelozo/pict-view/issues"},"homepage":"https://github.com/stevenvelozo/pict-view#readme","devDependencies":{"pict":"^1.0.348","quackage":"^1.0.58","typescript":"^5.9.3"},"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"]},"dependencies":{"fable-serviceproviderbase":"^3.0.19"}};},{}],67:[function(require,module,exports){const libFableServiceBase=require('fable-serviceproviderbase');const libPackage=require('../package.json');/** @typedef {import('pict') & {
|
|
3699
3765
|
* [key: string]: any, // represent services for now as a workaround
|
|
3700
3766
|
* }} Pict *//**
|
|
3701
3767
|
* @class PictTemplateExpression
|
|
@@ -3743,7 +3809,7 @@ tmpStyleEl.textContent='.pict-theme-topbar-nav { display: flex !impor
|
|
|
3743
3809
|
* @param {any} [pState] - A catchall state object for plumbing data through template processing.
|
|
3744
3810
|
*
|
|
3745
3811
|
* @return {any} The value at the given address, or undefined
|
|
3746
|
-
*/resolveStateFromAddress(pAddress,pRecord,pContextArray,pRootDataObject,pScope,pState){return this.pict.resolveStateFromAddress(pAddress,pRecord,pContextArray,pRootDataObject,pScope,pState);}}module.exports=PictTemplateExpression;module.exports.template_hash='Default';},{"../package.json":
|
|
3812
|
+
*/resolveStateFromAddress(pAddress,pRecord,pContextArray,pRootDataObject,pScope,pState){return this.pict.resolveStateFromAddress(pAddress,pRecord,pContextArray,pRootDataObject,pScope,pState);}}module.exports=PictTemplateExpression;module.exports.template_hash='Default';},{"../package.json":66,"fable-serviceproviderbase":2}],68:[function(require,module,exports){module.exports={"name":"pict-view","version":"1.0.68","description":"Pict View Base Class","main":"source/Pict-View.js","scripts":{"test":"npx quack test","tests":"npx quack test -g","start":"node source/Pict-View.js","coverage":"npx quack coverage","build":"npx quack build","docker-dev-build":"docker build ./ -f Dockerfile_LUXURYCode -t pict-view-image:local","docker-dev-run":"docker run -it -d --name pict-view-dev -p 30001:8080 -p 38086:8086 -v \"$PWD/.config:/home/coder/.config\" -v \"$PWD:/home/coder/pict-view\" -u \"$(id -u):$(id -g)\" -e \"DOCKER_USER=$USER\" pict-view-image:local","docker-dev-shell":"docker exec -it pict-view-dev /bin/bash","types":"tsc -p .","lint":"eslint source/**"},"types":"types/source/Pict-View.d.ts","repository":{"type":"git","url":"git+https://github.com/stevenvelozo/pict-view.git"},"author":"steven velozo <steven@velozo.com>","license":"MIT","bugs":{"url":"https://github.com/stevenvelozo/pict-view/issues"},"homepage":"https://github.com/stevenvelozo/pict-view#readme","devDependencies":{"@eslint/js":"^9.39.1","browser-env":"^3.3.0","eslint":"^9.39.1","pict":"^1.0.363","quackage":"^1.0.65","typescript":"^5.9.3"},"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"]},"dependencies":{"fable":"^3.1.67","fable-serviceproviderbase":"^3.0.19"}};},{}],69:[function(require,module,exports){const libFableServiceBase=require('fable-serviceproviderbase');const libPackage=require('../package.json');const defaultPictViewSettings={DefaultRenderable:false,DefaultDestinationAddress:false,DefaultTemplateRecordAddress:false,ViewIdentifier:false,// If this is set to true, when the App initializes this will.
|
|
3747
3813
|
// After the App initializes, initialize will be called as soon as it's added.
|
|
3748
3814
|
AutoInitialize:true,AutoInitializeOrdinal:0,// If this is set to true, when the App autorenders (on load) this will.
|
|
3749
3815
|
// After the App initializes, render will be called as soon as it's added.
|
|
@@ -4050,7 +4116,7 @@ if(tmpIsRootRenderable&&pRenderable&&pRenderable.TransactionHash){this.pict.Tran
|
|
|
4050
4116
|
* Lifecycle hook that triggers after data is marshaled into the view (async flow).
|
|
4051
4117
|
*
|
|
4052
4118
|
* @param {ErrorCallback} fCallback - The callback to call when the async operation is complete.
|
|
4053
|
-
*/onAfterMarshalToViewAsync(fCallback){this.onAfterMarshalToView();return fCallback();}/** @return {boolean} - True if the object is a PictView. */get isPictView(){return true;}}module.exports=PictView;},{"../package.json":
|
|
4119
|
+
*/onAfterMarshalToViewAsync(fCallback){this.onAfterMarshalToView();return fCallback();}/** @return {boolean} - True if the object is a PictView. */get isPictView(){return true;}}module.exports=PictView;},{"../package.json":68,"fable-serviceproviderbase":2}],70:[function(require,module,exports){module.exports={"Name":"Pict Docuserve","Hash":"Docuserve","MainViewportViewIdentifier":"Docuserve-Layout","AutoSolveAfterInitialize":true,"AutoRenderMainViewportViewAfterInitialize":false,"AutoRenderViewsAfterInitialize":false,"pict_configuration":{"Product":"Docuserve-Pict-Application"}};},{}],71:[function(require,module,exports){const libPictApplication=require('pict-application');// Provider
|
|
4054
4120
|
const libDocumentationProvider=require('./providers/Pict-Provider-Docuserve-Documentation.js');const libDemosProvider=require('./providers/Pict-Provider-Docuserve-Demos.js');// Shared modal + theme stack
|
|
4055
4121
|
const libPictSectionModal=require('pict-section-modal');const libPictSectionTheme=require('pict-section-theme');// Views
|
|
4056
4122
|
const libViewLayout=require('./views/PictView-Docuserve-Layout.js');const libViewTopBarNav=require('./views/PictView-Docuserve-TopBar-Nav.js');const libViewTopBarUser=require('./views/PictView-Docuserve-TopBar-User.js');const libViewSidebar=require('./views/PictView-Docuserve-Sidebar.js');const libViewSplash=require('./views/PictView-Docuserve-Splash.js');const libViewContent=require('./views/PictView-Docuserve-Content.js');const libViewSearch=require('./views/PictView-Docuserve-Search.js');const libViewDemo=require('./views/PictView-Docuserve-Demo.js');class DocuserveApplication extends libPictApplication{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);// Add the documentation provider
|
|
@@ -4158,7 +4224,7 @@ tmpContentView.displayContent(pHTML);});}/**
|
|
|
4158
4224
|
*/navigateToSearch(pQuery){let tmpSidebarView=this.pict.views['Docuserve-Sidebar'];let tmpSearchView=this.pict.views['Docuserve-Search'];// Update state
|
|
4159
4225
|
this.pict.AppData.Docuserve.CurrentGroup='';this.pict.AppData.Docuserve.CurrentModule='';this.pict.AppData.Docuserve.CurrentPath='';// Clear module-specific sidebar nav
|
|
4160
4226
|
tmpSidebarView.clearModuleNav();tmpSidebarView.renderSidebarGroups();// Render the search view with the query
|
|
4161
|
-
tmpSearchView.render();tmpSearchView.showSearch(pQuery||'');}}module.exports=DocuserveApplication;module.exports.default_configuration=require('./Pict-Application-Docuserve-Configuration.json');},{"./Pict-Application-Docuserve-Configuration.json":
|
|
4227
|
+
tmpSearchView.render();tmpSearchView.showSearch(pQuery||'');}}module.exports=DocuserveApplication;module.exports.default_configuration=require('./Pict-Application-Docuserve-Configuration.json');},{"./Pict-Application-Docuserve-Configuration.json":70,"./providers/Pict-Provider-Docuserve-Demos.js":72,"./providers/Pict-Provider-Docuserve-Documentation.js":73,"./views/PictView-Docuserve-Content.js":74,"./views/PictView-Docuserve-Demo.js":75,"./views/PictView-Docuserve-Layout.js":76,"./views/PictView-Docuserve-Search.js":77,"./views/PictView-Docuserve-Sidebar.js":78,"./views/PictView-Docuserve-Splash.js":79,"./views/PictView-Docuserve-TopBar-Nav.js":80,"./views/PictView-Docuserve-TopBar-User.js":81,"pict-application":5,"pict-section-modal":24,"pict-section-theme":30}],72:[function(require,module,exports){const libPictProvider=require('pict-provider');/**
|
|
4162
4228
|
* Highest demo-entry schema version this provider understands.
|
|
4163
4229
|
*
|
|
4164
4230
|
* Each demo entry declares `DemoSchemaVersion` (defaults to 1 when
|
|
@@ -4246,7 +4312,7 @@ let tmpExisting=this._byKey[tmpKey];if(tmpExisting){let tmpAllIdx=this._all.inde
|
|
|
4246
4312
|
*
|
|
4247
4313
|
* @param {Array<object>} pEntries
|
|
4248
4314
|
* @returns {number} count of successfully registered entries
|
|
4249
|
-
*/registerAll(pEntries){if(!Array.isArray(pEntries)){return 0;}let tmpCount=0;for(let i=0;i<pEntries.length;i++){if(this.register(pEntries[i])){tmpCount++;}}return tmpCount;}get(pGroup,pModule,pHash){return this._byKey[pGroup+'/'+pModule+'/'+pHash]||null;}listAll(){return this._all.slice();}listByModule(pGroup,pModule){let tmpList=this._byModule[pGroup+'/'+pModule];return tmpList?tmpList.slice():[];}hasDemos(pGroup,pModule){let tmpList=this._byModule[pGroup+'/'+pModule];return!!(tmpList&&tmpList.length>0);}}module.exports=PictProviderDocuserveDemos;module.exports.default_configuration={ProviderIdentifier:'Docuserve-Demos'};module.exports.MAX_DEMO_SCHEMA_VERSION=MAX_DEMO_SCHEMA_VERSION;},{"pict-provider":7}],
|
|
4315
|
+
*/registerAll(pEntries){if(!Array.isArray(pEntries)){return 0;}let tmpCount=0;for(let i=0;i<pEntries.length;i++){if(this.register(pEntries[i])){tmpCount++;}}return tmpCount;}get(pGroup,pModule,pHash){return this._byKey[pGroup+'/'+pModule+'/'+pHash]||null;}listAll(){return this._all.slice();}listByModule(pGroup,pModule){let tmpList=this._byModule[pGroup+'/'+pModule];return tmpList?tmpList.slice():[];}hasDemos(pGroup,pModule){let tmpList=this._byModule[pGroup+'/'+pModule];return!!(tmpList&&tmpList.length>0);}}module.exports=PictProviderDocuserveDemos;module.exports.default_configuration={ProviderIdentifier:'Docuserve-Demos'};module.exports.MAX_DEMO_SCHEMA_VERSION=MAX_DEMO_SCHEMA_VERSION;},{"pict-provider":7}],73:[function(require,module,exports){const libPictProvider=require('pict-provider');const libLunr=require('lunr');const libPictSectionContent=require('pict-section-content');const libPictContentProvider=libPictSectionContent.PictContentProvider;/**
|
|
4250
4316
|
* Documentation Provider for Docuserve
|
|
4251
4317
|
*
|
|
4252
4318
|
* Loads the Indoctrinate-generated catalog and keyword index,
|
|
@@ -4574,12 +4640,12 @@ let tmpParts=tmpPath.split('/');if(tmpParts.length>=2){if(this.isGroupInCatalog(
|
|
|
4574
4640
|
if(pCurrentGroup&&pCurrentModule){// Determine the directory of the current document
|
|
4575
4641
|
let tmpDocDir='';if(pCurrentDocPath){let tmpDirParts=pCurrentDocPath.split('/');if(tmpDirParts.length>1){tmpDirParts.pop();// Remove filename
|
|
4576
4642
|
tmpDocDir=tmpDirParts.join('/')+'/';}}return'#/doc/'+pCurrentGroup+'/'+pCurrentModule+'/'+tmpDocDir+tmpPath;}// Local doc page (no module context)
|
|
4577
|
-
if(tmpPath.match(/\.md$/)){let tmpPageKey=tmpPath.replace(/\.md$/,'');return'#/page/'+tmpPageKey;}return'#/page/'+tmpPath;}}module.exports=DocuserveDocumentationProvider;module.exports.default_configuration={ProviderIdentifier:"Docuserve-Documentation",AutoInitialize:true,AutoInitializeOrdinal:0};},{"lunr":3,"pict-provider":7,"pict-section-content":
|
|
4643
|
+
if(tmpPath.match(/\.md$/)){let tmpPageKey=tmpPath.replace(/\.md$/,'');return'#/page/'+tmpPageKey;}return'#/page/'+tmpPath;}}module.exports=DocuserveDocumentationProvider;module.exports.default_configuration={ProviderIdentifier:"Docuserve-Documentation",AutoInitialize:true,AutoInitializeOrdinal:0};},{"lunr":3,"pict-provider":7,"pict-section-content":12}],74:[function(require,module,exports){const libPictContentView=require('pict-section-content');const _ViewConfiguration={ViewIdentifier:"Docuserve-Content",DefaultRenderable:"Docuserve-Content-Display",DefaultDestinationAddress:"#Docuserve-Content-Container",AutoRender:false,// The parent pict-section-content CSS must be included here because
|
|
4578
4644
|
// pict-view's Object.assign replaces the CSS property entirely when
|
|
4579
4645
|
// the child provides its own. We cannot read the parent's
|
|
4580
4646
|
// default_configuration.CSS at module scope because browserify's
|
|
4581
4647
|
// module initialisation order does not guarantee it is populated yet.
|
|
4582
|
-
CSS:/*css*/"\n\t\t.pict-content {\n\t\t\tpadding: 2em 3em;\n\t\t\tmax-width: 900px;\n\t\t\tmargin: 0 auto;\n\t\t\tcolor: var(--docuserve-text);\n\t\t}\n\t\t.pict-content-loading {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmin-height: 200px;\n\t\t\tcolor: var(--docuserve-text-dim);\n\t\t\tfont-size: 1em;\n\t\t}\n\t\t.pict-content h1 {\n\t\t\tfont-size: 2em;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t\tborder-bottom: 1px solid var(--docuserve-border);\n\t\t\tpadding-bottom: 0.3em;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t.pict-content h2 {\n\t\t\tfont-size: 1.5em;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t\tborder-bottom: 1px solid var(--docuserve-border-soft);\n\t\t\tpadding-bottom: 0.25em;\n\t\t\tmargin-top: 1.5em;\n\t\t}\n\t\t.pict-content h3 {\n\t\t\tfont-size: 1.25em;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t\tmargin-top: 1.25em;\n\t\t}\n\t\t.pict-content h4, .pict-content h5, .pict-content h6 {\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t\tmargin-top: 1em;\n\t\t}\n\t\t.pict-content p {\n\t\t\tline-height: 1.7;\n\t\t\tcolor: var(--docuserve-text);\n\t\t\tmargin: 0.75em 0;\n\t\t}\n\t\t.pict-content a {\n\t\t\tcolor: var(--docuserve-accent);\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t.pict-content a:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t/* Plain <pre> (no wrap) - rare; keep for safety */\n\t\t.pict-content pre {\n\t\t\tbackground: var(--docuserve-code-bg);\n\t\t\tcolor: var(--docuserve-code-text);\n\t\t\tpadding: 1.25em;\n\t\t\tborder-radius: 6px;\n\t\t\tborder: 1px solid var(--docuserve-code-border);\n\t\t\toverflow-x: auto;\n\t\t\tline-height: 1.5;\n\t\t\tfont-size: 0.9em;\n\t\t}\n\t\t/* Inline code */\n\t\t.pict-content code {\n\t\t\tbackground: var(--docuserve-inline-code-bg);\n\t\t\tpadding: 0.15em 0.4em;\n\t\t\tborder-radius: 3px;\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: var(--docuserve-inline-code-text);\n\t\t\tfont-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;\n\t\t}\n\t\t.pict-content pre code {\n\t\t\tbackground: none;\n\t\t\tpadding: 0;\n\t\t\tcolor: inherit;\n\t\t\tfont-size: inherit;\n\t\t}\n\t\t/* Fenced code block wrapper emitted by pict-section-content */\n\t\t.pict-content-code-wrap {\n\t\t\tposition: relative;\n\t\t\tfont-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 1.5;\n\t\t\tborder-radius: 6px;\n\t\t\tborder: 1px solid var(--docuserve-code-border);\n\t\t\toverflow: auto;\n\t\t\tmargin: 1em 0;\n\t\t\tbackground: var(--docuserve-code-bg);\n\t\t}\n\t\t.pict-content-code-wrap .pict-content-code-line-numbers {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\twidth: 40px;\n\t\t\tpadding: 1.25em 0;\n\t\t\ttext-align: right;\n\t\t\tbackground: var(--docuserve-code-gutter-bg);\n\t\t\tborder-right: 1px solid var(--docuserve-code-gutter-border);\n\t\t\tcolor: var(--docuserve-code-gutter-text);\n\t\t\tfont-family: inherit;\n\t\t\tfont-size: inherit;\n\t\t\tline-height: inherit;\n\t\t\tuser-select: none;\n\t\t\tpointer-events: none;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.pict-content-code-wrap .pict-content-code-line-numbers span {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0 8px 0 0;\n\t\t}\n\t\t.pict-content-code-wrap pre {\n\t\t\tmargin: 0;\n\t\t\tbackground: var(--docuserve-code-bg);\n\t\t\tcolor: var(--docuserve-code-text);\n\t\t\tpadding: 1.25em 1.25em 1.25em 52px;\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t\toverflow-x: auto;\n\t\t\tline-height: 1.5;\n\t\t\tfont-size: inherit;\n\t\t}\n\t\t.pict-content-code-wrap pre code {\n\t\t\tbackground: none;\n\t\t\tpadding: 0;\n\t\t\tcolor: inherit;\n\t\t\tfont-size: inherit;\n\t\t\tfont-family: inherit;\n\t\t}\n\t\t/* Syntax tokens \u2014 these rules must match the span classes emitted by\n\t\t pict-section-code's highlighter. Also apply without .pict-content-code-wrap\n\t\t as a belt-and-suspenders for any <pre><code> not emitted from a fence. */\n\t\t.pict-content-code-wrap .keyword,\n\t\t.pict-content pre code .keyword { color: var(--docuserve-tok-keyword); }\n\t\t.pict-content-code-wrap .string,\n\t\t.pict-content pre code .string { color: var(--docuserve-tok-string); }\n\t\t.pict-content-code-wrap .number,\n\t\t.pict-content pre code .number { color: var(--docuserve-tok-number); }\n\t\t.pict-content-code-wrap .comment,\n\t\t.pict-content pre code .comment { color: var(--docuserve-tok-comment); font-style: italic; }\n\t\t.pict-content-code-wrap .operator,\n\t\t.pict-content pre code .operator { color: var(--docuserve-tok-operator); }\n\t\t.pict-content-code-wrap .punctuation,\n\t\t.pict-content pre code .punctuation { color: var(--docuserve-tok-punctuation); }\n\t\t.pict-content-code-wrap .function-name,\n\t\t.pict-content pre code .function-name { color: var(--docuserve-tok-function); }\n\t\t.pict-content-code-wrap .property,\n\t\t.pict-content pre code .property { color: var(--docuserve-tok-property); }\n\t\t.pict-content-code-wrap .tag,\n\t\t.pict-content pre code .tag { color: var(--docuserve-tok-tag); }\n\t\t.pict-content-code-wrap .attr-name,\n\t\t.pict-content pre code .attr-name { color: var(--docuserve-tok-attr-name); }\n\t\t.pict-content-code-wrap .attr-value,\n\t\t.pict-content pre code .attr-value { color: var(--docuserve-tok-attr-value); }\n\t\t.pict-content blockquote {\n\t\t\tborder-left: 4px solid var(--docuserve-blockquote-border);\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em 1em;\n\t\t\tbackground: var(--docuserve-blockquote-bg);\n\t\t\tcolor: var(--docuserve-blockquote-text);\n\t\t}\n\t\t.pict-content blockquote p {\n\t\t\tmargin: 0.25em 0;\n\t\t}\n\t\t.pict-content ul, .pict-content ol {\n\t\t\tpadding-left: 2em;\n\t\t\tline-height: 1.8;\n\t\t}\n\t\t.pict-content li {\n\t\t\tmargin: 0.25em 0;\n\t\t\tcolor: var(--docuserve-text);\n\t\t}\n\t\t.pict-content hr {\n\t\t\tborder: none;\n\t\t\tborder-top: 1px solid var(--docuserve-border);\n\t\t\tmargin: 2em 0;\n\t\t}\n\t\t.pict-content table {\n\t\t\twidth: 100%;\n\t\t\tborder-collapse: collapse;\n\t\t\tmargin: 1em 0;\n\t\t}\n\t\t.pict-content table th {\n\t\t\tbackground: var(--docuserve-table-header-bg);\n\t\t\tborder: 1px solid var(--docuserve-border);\n\t\t\tpadding: 0.6em 0.8em;\n\t\t\ttext-align: left;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t}\n\t\t.pict-content table td {\n\t\t\tborder: 1px solid var(--docuserve-border);\n\t\t\tpadding: 0.5em 0.8em;\n\t\t\tcolor: var(--docuserve-text);\n\t\t}\n\t\t.pict-content table tr:nth-child(even) {\n\t\t\tbackground: var(--docuserve-table-row-alt-bg);\n\t\t}\n\t\t.pict-content img {\n\t\t\tmax-width: 100%;\n\t\t\theight: auto;\n\t\t}\n\t\t.pict-content pre.mermaid {\n\t\t\tbackground: var(--docuserve-mermaid-bg);\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E);\n\t\t\ttext-align: center;\n\t\t\tpadding: 1em;\n\t\t\tborder: 1px solid var(--docuserve-border-soft);\n\t\t}\n\t\t/* Force dark text inside mermaid SVGs so diagrams stay readable\n\t\t in dark mode (mermaid bg is always light). */\n\t\t.pict-content pre.mermaid text,\n\t\t.pict-content pre.mermaid .nodeLabel,\n\t\t.pict-content pre.mermaid .edgeLabel,\n\t\t.pict-content pre.mermaid .label,\n\t\t.pict-content pre.mermaid .cluster-label,\n\t\t.pict-content pre.mermaid span,\n\t\t.pict-content pre.mermaid foreignObject p,\n\t\t.pict-content pre.mermaid foreignObject div,\n\t\t.pict-content pre.mermaid foreignObject span {\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E) !important;\n\t\t\tfill: var(--theme-color-text-primary, #2A241E) !important;\n\t\t}\n\t\t.pict-content pre.mermaid .edgePath .path {\n\t\t\tstroke: var(--theme-color-text-secondary, #5E5549) !important;\n\t\t}\n\t\t.pict-content pre.mermaid .arrowheadPath {\n\t\t\tfill: var(--theme-color-text-secondary, #5E5549) !important;\n\t\t}\n\t\t.pict-content .pict-content-katex-display {\n\t\t\ttext-align: center;\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em;\n\t\t\toverflow-x: auto;\n\t\t}\n\t\t.pict-content .pict-content-katex-inline {\n\t\t\tdisplay: inline;\n\t\t}\n\t\t.docuserve-module-external-link {\n\t\t\tpadding: 0.5em 0;\n\t\t\tmargin-bottom: 0.5em;\n\t\t\tborder-bottom: 1px solid var(--docuserve-border-soft);\n\t\t\tfont-size: 0.85em;\n\t\t\ttext-align: right;\n\t\t}\n\t\t.docuserve-module-external-link a {\n\t\t\tcolor: var(--docuserve-accent);\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t.docuserve-module-external-link a:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t.docuserve-not-found {\n\t\t\ttext-align: center;\n\t\t\tpadding: 3em 1em;\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t}\n\t\t.docuserve-not-found h2 {\n\t\t\tcolor: var(--docuserve-text-dim);\n\t\t\tfont-size: 1.5em;\n\t\t\tborder-bottom: none;\n\t\t}\n\t\t.docuserve-not-found code {\n\t\t\tbackground: var(--docuserve-inline-code-bg);\n\t\t\tpadding: 0.15em 0.4em;\n\t\t\tborder-radius: 3px;\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: var(--docuserve-inline-code-text);\n\t\t}\n\n\t\t/* Fullscreen viewer for images and mermaid diagrams (click-to-zoom) */\n\t\t.pict-content [data-fullscreen-source] {\n\t\t\tcursor: zoom-in;\n\t\t\toutline: 1px solid transparent;\n\t\t\toutline-offset: 3px;\n\t\t\tborder-radius: 4px;\n\t\t\ttransition: outline-color 0.15s ease;\n\t\t}\n\t\t.pict-content [data-fullscreen-source]:hover {\n\t\t\toutline-color: var(--docuserve-accent);\n\t\t}\n\t\t/* Code block container with hover-revealed action buttons */\n\t\t.pict-content-code-container {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\talign-items: flex-start;\n\t\t\tgap: 8px;\n\t\t\tmargin: 1em 0;\n\t\t}\n\t\t.pict-content-code-container > .pict-content-code-wrap {\n\t\t\tmargin: 0;\n\t\t\tflex: 1 1 auto;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.pict-content-code-actions {\n\t\t\tposition: sticky;\n\t\t\ttop: 64px;\n\t\t\talign-self: flex-start;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 6px;\n\t\t\tflex: 0 0 auto;\n\t\t\tpadding-top: 6px;\n\t\t\topacity: 0;\n\t\t\ttransform: translateX(-4px);\n\t\t\ttransition: opacity 0.15s ease, transform 0.15s ease;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.pict-content-code-container:hover .pict-content-code-actions,\n\t\t.pict-content-code-container:focus-within .pict-content-code-actions {\n\t\t\topacity: 1;\n\t\t\ttransform: translateX(0);\n\t\t\tpointer-events: auto;\n\t\t}\n\t\t.pict-content-code-action-btn {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tpadding: 0;\n\t\t\tbackground: var(--docuserve-bg-elevated);\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t\tborder: 1px solid var(--docuserve-border);\n\t\t\tborder-radius: 6px;\n\t\t\tcursor: pointer;\n\t\t\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n\t\t\ttransition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n\t\t}\n\t\t.pict-content-code-action-btn svg {\n\t\t\tdisplay: block;\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t\tstroke: currentColor;\n\t\t\tfill: none;\n\t\t\tstroke-width: 1.6;\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-linejoin: round;\n\t\t}\n\t\t.pict-content-code-action-btn:hover {\n\t\t\tbackground: var(--docuserve-accent);\n\t\t\tcolor: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tborder-color: var(--docuserve-accent);\n\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n\t\t}\n\t\t.pict-content-code-action-btn:focus-visible {\n\t\t\toutline: 2px solid var(--docuserve-accent);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t\t.pict-content-code-action-btn.is-copied {\n\t\t\tbackground: var(--docuserve-accent);\n\t\t\tcolor: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tborder-color: var(--docuserve-accent);\n\t\t}\n\t\t.pict-content-code-action-btn.is-copy-failed {\n\t\t\tbackground: #B23A3A;\n\t\t\tcolor: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tborder-color: #B23A3A;\n\t\t}\n\t\t.pict-fullscreen-overlay {\n\t\t\tposition: fixed;\n\t\t\tinset: 0;\n\t\t\tz-index: 9999;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tbackground: rgba(0, 0, 0, 0.62);\n\t\t\tbackdrop-filter: blur(6px);\n\t\t\t-webkit-backdrop-filter: blur(6px);\n\t\t\tcolor: var(--docuserve-text);\n\t\t}\n\t\t.pict-fullscreen-overlay[hidden] {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.pict-fullscreen-titlebar {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\tgap: 1em;\n\t\t\theight: 48px;\n\t\t\tpadding: 0 1em;\n\t\t\tbackground: var(--docuserve-bg-elevated);\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t\tborder-bottom: 1px solid var(--docuserve-border);\n\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n\t\t\tflex: 0 0 auto;\n\t\t}\n\t\t.pict-fullscreen-title {\n\t\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n\t\t\tfont-size: 0.95em;\n\t\t\tfont-weight: 600;\n\t\t\tletter-spacing: 0.01em;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t}\n\t\t.pict-fullscreen-controls {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t}\n\t\t.pict-fullscreen-btn {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 32px;\n\t\t\theight: 32px;\n\t\t\tpadding: 0;\n\t\t\tbackground: transparent;\n\t\t\tborder: 1px solid transparent;\n\t\t\tborder-radius: 6px;\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t\tcursor: pointer;\n\t\t\ttransition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n\t\t}\n\t\t.pict-fullscreen-btn svg {\n\t\t\tdisplay: block;\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tstroke: currentColor;\n\t\t\tfill: none;\n\t\t\tstroke-width: 1.75;\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-linejoin: round;\n\t\t}\n\t\t.pict-fullscreen-btn:hover {\n\t\t\tbackground: var(--docuserve-border-soft);\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t}\n\t\t.pict-fullscreen-btn:focus-visible {\n\t\t\toutline: 2px solid var(--docuserve-accent);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t\t.pict-fullscreen-close:hover {\n\t\t\tbackground: var(--docuserve-accent);\n\t\t\tcolor: var(--theme-color-background-panel, #FFFFFF);\n\t\t}\n\t\t.pict-fullscreen-stage {\n\t\t\tflex: 1 1 auto;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\toverflow: hidden;\n\t\t\tpadding: 1.5em;\n\t\t\tcursor: zoom-in;\n\t\t\ttouch-action: none;\n\t\t}\n\t\t.pict-fullscreen-stage.is-zoomed {\n\t\t\tcursor: grab;\n\t\t}\n\t\t.pict-fullscreen-stage.is-panning {\n\t\t\tcursor: grabbing;\n\t\t}\n\t\t.pict-fullscreen-content {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmax-width: 100%;\n\t\t\tmax-height: 100%;\n\t\t\ttransform-origin: center center;\n\t\t\ttransition: transform 0.05s linear;\n\t\t\twill-change: transform;\n\t\t}\n\t\t.pict-fullscreen-content > * {\n\t\t\tbox-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-img {\n\t\t\tmax-width: 90vw;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tobject-fit: contain;\n\t\t\tbackground: var(--docuserve-bg-elevated);\n\t\t\tpadding: 12px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg {\n\t\t\twidth: min(90vw, 1400px);\n\t\t\theight: auto;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\tbackground: var(--docuserve-mermaid-bg);\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E);\n\t\t\tpadding: 16px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg text,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg .nodeLabel,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg .edgeLabel,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg .label,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg span,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg foreignObject p,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg foreignObject div,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg foreignObject span {\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E) !important;\n\t\t\tfill: var(--theme-color-text-primary, #2A241E) !important;\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-codewrap {\n\t\t\tmax-width: 90vw;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\tmargin: 0;\n\t\t\toverflow: auto;\n\t\t\tbox-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);\n\t\t}\n\t",Templates:[{Hash:"Docuserve-Content-Template",Template:/*html*/"\n<div class=\"pict-content\" id=\"Docuserve-Content-Body\">\n\t<div class=\"pict-content-loading\">Loading documentation...</div>\n</div>\n"}],Renderables:[{RenderableHash:"Docuserve-Content-Display",TemplateHash:"Docuserve-Content-Template",DestinationAddress:"#Docuserve-Content-Container",RenderMethod:"replace"}]};class DocuserveContentView extends libPictContentView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);}/**
|
|
4648
|
+
CSS:/*css*/"\n\t\t.pict-content {\n\t\t\tpadding: 2em 3em;\n\t\t\tmax-width: 900px;\n\t\t\tmargin: 0 auto;\n\t\t\tcolor: var(--docuserve-text);\n\t\t}\n\t\t.pict-content-loading {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmin-height: 200px;\n\t\t\tcolor: var(--docuserve-text-dim);\n\t\t\tfont-size: 1em;\n\t\t}\n\t\t.pict-content h1 {\n\t\t\tfont-size: 2em;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t\tborder-bottom: 1px solid var(--docuserve-border);\n\t\t\tpadding-bottom: 0.3em;\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t.pict-content h2 {\n\t\t\tfont-size: 1.5em;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t\tborder-bottom: 1px solid var(--docuserve-border-soft);\n\t\t\tpadding-bottom: 0.25em;\n\t\t\tmargin-top: 1.5em;\n\t\t}\n\t\t.pict-content h3 {\n\t\t\tfont-size: 1.25em;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t\tmargin-top: 1.25em;\n\t\t}\n\t\t.pict-content h4, .pict-content h5, .pict-content h6 {\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t\tmargin-top: 1em;\n\t\t}\n\t\t.pict-content p {\n\t\t\tline-height: 1.7;\n\t\t\tcolor: var(--docuserve-text);\n\t\t\tmargin: 0.75em 0;\n\t\t}\n\t\t.pict-content a {\n\t\t\tcolor: var(--docuserve-accent);\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t.pict-content a:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t/* Plain <pre> (no wrap) - rare; keep for safety */\n\t\t.pict-content pre {\n\t\t\tbackground: var(--docuserve-code-bg);\n\t\t\tcolor: var(--docuserve-code-text);\n\t\t\tpadding: 1.25em;\n\t\t\tborder-radius: 6px;\n\t\t\tborder: 1px solid var(--docuserve-code-border);\n\t\t\toverflow-x: auto;\n\t\t\tline-height: 1.5;\n\t\t\tfont-size: 0.9em;\n\t\t}\n\t\t/* Inline code */\n\t\t.pict-content code {\n\t\t\tbackground: var(--docuserve-inline-code-bg);\n\t\t\tpadding: 0.15em 0.4em;\n\t\t\tborder-radius: 3px;\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: var(--docuserve-inline-code-text);\n\t\t\tfont-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;\n\t\t}\n\t\t.pict-content pre code {\n\t\t\tbackground: none;\n\t\t\tpadding: 0;\n\t\t\tcolor: inherit;\n\t\t\tfont-size: inherit;\n\t\t}\n\t\t/* Fenced code block wrapper emitted by pict-section-content */\n\t\t.pict-content-code-wrap {\n\t\t\tposition: relative;\n\t\t\tfont-family: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 1.5;\n\t\t\tborder-radius: 6px;\n\t\t\tborder: 1px solid var(--docuserve-code-border);\n\t\t\toverflow: auto;\n\t\t\tmargin: 1em 0;\n\t\t\tbackground: var(--docuserve-code-bg);\n\t\t}\n\t\t.pict-content-code-wrap .pict-content-code-line-numbers {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\twidth: 40px;\n\t\t\tpadding: 1.25em 0;\n\t\t\ttext-align: right;\n\t\t\tbackground: var(--docuserve-code-gutter-bg);\n\t\t\tborder-right: 1px solid var(--docuserve-code-gutter-border);\n\t\t\tcolor: var(--docuserve-code-gutter-text);\n\t\t\tfont-family: inherit;\n\t\t\tfont-size: inherit;\n\t\t\tline-height: inherit;\n\t\t\tuser-select: none;\n\t\t\tpointer-events: none;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.pict-content-code-wrap .pict-content-code-line-numbers span {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0 8px 0 0;\n\t\t}\n\t\t.pict-content-code-wrap pre {\n\t\t\tmargin: 0;\n\t\t\tbackground: var(--docuserve-code-bg);\n\t\t\tcolor: var(--docuserve-code-text);\n\t\t\tpadding: 1.25em 1.25em 1.25em 52px;\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t\toverflow-x: auto;\n\t\t\tline-height: 1.5;\n\t\t\tfont-size: inherit;\n\t\t}\n\t\t.pict-content-code-wrap pre code {\n\t\t\tbackground: none;\n\t\t\tpadding: 0;\n\t\t\tcolor: inherit;\n\t\t\tfont-size: inherit;\n\t\t\tfont-family: inherit;\n\t\t}\n\t\t/* Syntax tokens \u2014 these rules must match the span classes emitted by\n\t\t pict-section-code's highlighter. Also apply without .pict-content-code-wrap\n\t\t as a belt-and-suspenders for any <pre><code> not emitted from a fence. */\n\t\t.pict-content-code-wrap .keyword,\n\t\t.pict-content pre code .keyword { color: var(--docuserve-tok-keyword); }\n\t\t.pict-content-code-wrap .string,\n\t\t.pict-content pre code .string { color: var(--docuserve-tok-string); }\n\t\t.pict-content-code-wrap .number,\n\t\t.pict-content pre code .number { color: var(--docuserve-tok-number); }\n\t\t.pict-content-code-wrap .comment,\n\t\t.pict-content pre code .comment { color: var(--docuserve-tok-comment); font-style: italic; }\n\t\t.pict-content-code-wrap .operator,\n\t\t.pict-content pre code .operator { color: var(--docuserve-tok-operator); }\n\t\t.pict-content-code-wrap .punctuation,\n\t\t.pict-content pre code .punctuation { color: var(--docuserve-tok-punctuation); }\n\t\t.pict-content-code-wrap .function-name,\n\t\t.pict-content pre code .function-name { color: var(--docuserve-tok-function); }\n\t\t.pict-content-code-wrap .property,\n\t\t.pict-content pre code .property { color: var(--docuserve-tok-property); }\n\t\t.pict-content-code-wrap .tag,\n\t\t.pict-content pre code .tag { color: var(--docuserve-tok-tag); }\n\t\t.pict-content-code-wrap .attr-name,\n\t\t.pict-content pre code .attr-name { color: var(--docuserve-tok-attr-name); }\n\t\t.pict-content-code-wrap .attr-value,\n\t\t.pict-content pre code .attr-value { color: var(--docuserve-tok-attr-value); }\n\t\t.pict-content blockquote {\n\t\t\tborder-left: 4px solid var(--docuserve-blockquote-border);\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em 1em;\n\t\t\tbackground: var(--docuserve-blockquote-bg);\n\t\t\tcolor: var(--docuserve-blockquote-text);\n\t\t}\n\t\t.pict-content blockquote p {\n\t\t\tmargin: 0.25em 0;\n\t\t}\n\t\t.pict-content ul, .pict-content ol {\n\t\t\tpadding-left: 2em;\n\t\t\tline-height: 1.8;\n\t\t}\n\t\t.pict-content li {\n\t\t\tmargin: 0.25em 0;\n\t\t\tcolor: var(--docuserve-text);\n\t\t}\n\t\t.pict-content hr {\n\t\t\tborder: none;\n\t\t\tborder-top: 1px solid var(--docuserve-border);\n\t\t\tmargin: 2em 0;\n\t\t}\n\t\t.pict-content table {\n\t\t\twidth: 100%;\n\t\t\tborder-collapse: collapse;\n\t\t\tmargin: 1em 0;\n\t\t}\n\t\t.pict-content table th {\n\t\t\tbackground: var(--docuserve-table-header-bg);\n\t\t\tborder: 1px solid var(--docuserve-border);\n\t\t\tpadding: 0.6em 0.8em;\n\t\t\ttext-align: left;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t}\n\t\t.pict-content table td {\n\t\t\tborder: 1px solid var(--docuserve-border);\n\t\t\tpadding: 0.5em 0.8em;\n\t\t\tcolor: var(--docuserve-text);\n\t\t}\n\t\t.pict-content table tr:nth-child(even) {\n\t\t\tbackground: var(--docuserve-table-row-alt-bg);\n\t\t}\n\t\t.pict-content img {\n\t\t\tmax-width: 100%;\n\t\t\theight: auto;\n\t\t}\n\t\t.pict-content pre.mermaid {\n\t\t\tbackground: var(--docuserve-mermaid-bg);\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E);\n\t\t\ttext-align: center;\n\t\t\tpadding: 1em;\n\t\t\tborder: 1px solid var(--docuserve-border-soft);\n\t\t}\n\t\t/* Force dark text inside mermaid SVGs so diagrams stay readable\n\t\t in dark mode (mermaid bg is always light). */\n\t\t.pict-content pre.mermaid text,\n\t\t.pict-content pre.mermaid .nodeLabel,\n\t\t.pict-content pre.mermaid .edgeLabel,\n\t\t.pict-content pre.mermaid .label,\n\t\t.pict-content pre.mermaid .cluster-label,\n\t\t.pict-content pre.mermaid span,\n\t\t.pict-content pre.mermaid foreignObject p,\n\t\t.pict-content pre.mermaid foreignObject div,\n\t\t.pict-content pre.mermaid foreignObject span {\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E) !important;\n\t\t\tfill: var(--theme-color-text-primary, #2A241E) !important;\n\t\t}\n\t\t.pict-content pre.mermaid .edgePath .path {\n\t\t\tstroke: var(--theme-color-text-secondary, #5E5549) !important;\n\t\t}\n\t\t.pict-content pre.mermaid .arrowheadPath {\n\t\t\tfill: var(--theme-color-text-secondary, #5E5549) !important;\n\t\t}\n\t\t/* Mermaid 11's block-beta renderer ignores the themeVariables we\n\t\t pass to mermaid.initialize() \u2014 it bakes its own multi-color\n\t\t palette directly into each rect's inline SVG attributes. In\n\t\t light mode that palette is fine: Mermaid's pastel colors on a\n\t\t light page have good contrast and visual hierarchy. In dark\n\t\t mode those same light-pastel fills with dark text appear as a\n\t\t light-mode island stamped onto a dark page \u2014 poor contrast and\n\t\t visually jarring.\n\t\t Rather than collapsing the palette to a single theme color\n\t\t (which loses the per-cluster identity the diagram author chose),\n\t\t we invert the entire diagram with a CSS filter in dark mode.\n\t\t The 0.92 factor avoids a harsh pure-white\u2192pure-black flip; the\n\t\t hue-rotate(180deg) compensates for the hue shift invert()\n\t\t introduces, so red stays reddish, green stays greenish, etc.\n\t\t Scoped via :has(g.block) so only block-beta diagrams get\n\t\t filtered \u2014 flowchart / sequence / state diagrams already honor\n\t\t themeVariables and render mode-correctly without inversion. */\n\t\t.theme-dark .pict-content pre.mermaid:has(g.block) {\n\t\t\tfilter: invert(0.92) hue-rotate(180deg);\n\t\t\tbackground: transparent !important;\n\t\t\tborder-color: transparent !important;\n\t\t}\n\t\t/* When the block-beta inversion is active, the global \"force\n\t\t text to theme-color-text-primary\" rule above would set text\n\t\t to the dark-mode text color (light cream), which the filter\n\t\t then inverts to dark \u2014 unreadable against the now-dark fills.\n\t\t Reverting lets Mermaid's natural light-mode text color (dark)\n\t\t pass through the inversion, becoming light text in dark mode. */\n\t\t.theme-dark .pict-content pre.mermaid:has(g.block) text,\n\t\t.theme-dark .pict-content pre.mermaid:has(g.block) .nodeLabel,\n\t\t.theme-dark .pict-content pre.mermaid:has(g.block) .edgeLabel,\n\t\t.theme-dark .pict-content pre.mermaid:has(g.block) .label,\n\t\t.theme-dark .pict-content pre.mermaid:has(g.block) .cluster-label,\n\t\t.theme-dark .pict-content pre.mermaid:has(g.block) span,\n\t\t.theme-dark .pict-content pre.mermaid:has(g.block) foreignObject p,\n\t\t.theme-dark .pict-content pre.mermaid:has(g.block) foreignObject div,\n\t\t.theme-dark .pict-content pre.mermaid:has(g.block) foreignObject span {\n\t\t\t/* Force text to render DARK pre-filter so the dark-mode filter\n\t\t\t inverts it to LIGHT on the now-dark inverted blocks. Using\n\t\t\t the theme's light-mode text-primary hex directly (not the\n\t\t\t var() chain) because the chain would resolve to light cream\n\t\t\t in dark mode, which the filter would then invert BACK to\n\t\t\t dark \u2014 unreadable on the inverted dark blocks. */\n\t\t\tcolor: #3D3229 !important;\n\t\t\tfill: #3D3229 !important;\n\t\t}\n\t\t/* Inner blocks (the .basic.label-container rects inside block-beta\n\t\t diagrams, NOT the cluster wrappers) pick up mainBkg from the\n\t\t themeVariables we pass to mermaid.initialize(). In dark mode\n\t\t that's a dark color \u2014 which the SVG filter then inverts to\n\t\t light gray, undoing the dark-mode-ification. Force the inner\n\t\t blocks to render with a fixed light fill so the inversion\n\t\t produces dark cards in dark mode. In light mode (no filter)\n\t\t the white fill is effectively the same as Mermaid's default\n\t\t light-theme block bg \u2014 so no visual change there. */\n\t\t.pict-content pre.mermaid:has(g.block) rect.basic.label-container:not(.cluster) {\n\t\t\tfill: #FFFFFF !important;\n\t\t\tstroke: #6E6E6E !important;\n\t\t}\n\t\t.pict-content .pict-content-katex-display {\n\t\t\ttext-align: center;\n\t\t\tmargin: 1em 0;\n\t\t\tpadding: 0.5em;\n\t\t\toverflow-x: auto;\n\t\t}\n\t\t.pict-content .pict-content-katex-inline {\n\t\t\tdisplay: inline;\n\t\t}\n\t\t.docuserve-module-external-link {\n\t\t\tpadding: 0.5em 0;\n\t\t\tmargin-bottom: 0.5em;\n\t\t\tborder-bottom: 1px solid var(--docuserve-border-soft);\n\t\t\tfont-size: 0.85em;\n\t\t\ttext-align: right;\n\t\t}\n\t\t.docuserve-module-external-link a {\n\t\t\tcolor: var(--docuserve-accent);\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t.docuserve-module-external-link a:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t.docuserve-not-found {\n\t\t\ttext-align: center;\n\t\t\tpadding: 3em 1em;\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t}\n\t\t.docuserve-not-found h2 {\n\t\t\tcolor: var(--docuserve-text-dim);\n\t\t\tfont-size: 1.5em;\n\t\t\tborder-bottom: none;\n\t\t}\n\t\t.docuserve-not-found code {\n\t\t\tbackground: var(--docuserve-inline-code-bg);\n\t\t\tpadding: 0.15em 0.4em;\n\t\t\tborder-radius: 3px;\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: var(--docuserve-inline-code-text);\n\t\t}\n\n\t\t/* Fullscreen viewer for images and mermaid diagrams (click-to-zoom) */\n\t\t.pict-content [data-fullscreen-source] {\n\t\t\tcursor: zoom-in;\n\t\t\toutline: 1px solid transparent;\n\t\t\toutline-offset: 3px;\n\t\t\tborder-radius: 4px;\n\t\t\ttransition: outline-color 0.15s ease;\n\t\t}\n\t\t.pict-content [data-fullscreen-source]:hover {\n\t\t\toutline-color: var(--docuserve-accent);\n\t\t}\n\t\t/* Code block container with hover-revealed action buttons */\n\t\t.pict-content-code-container {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\talign-items: flex-start;\n\t\t\tgap: 8px;\n\t\t\tmargin: 1em 0;\n\t\t}\n\t\t.pict-content-code-container > .pict-content-code-wrap {\n\t\t\tmargin: 0;\n\t\t\tflex: 1 1 auto;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.pict-content-code-actions {\n\t\t\tposition: sticky;\n\t\t\ttop: 64px;\n\t\t\talign-self: flex-start;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 6px;\n\t\t\tflex: 0 0 auto;\n\t\t\tpadding-top: 6px;\n\t\t\topacity: 0;\n\t\t\ttransform: translateX(-4px);\n\t\t\ttransition: opacity 0.15s ease, transform 0.15s ease;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.pict-content-code-container:hover .pict-content-code-actions,\n\t\t.pict-content-code-container:focus-within .pict-content-code-actions {\n\t\t\topacity: 1;\n\t\t\ttransform: translateX(0);\n\t\t\tpointer-events: auto;\n\t\t}\n\t\t.pict-content-code-action-btn {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tpadding: 0;\n\t\t\tbackground: var(--docuserve-bg-elevated);\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t\tborder: 1px solid var(--docuserve-border);\n\t\t\tborder-radius: 6px;\n\t\t\tcursor: pointer;\n\t\t\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n\t\t\ttransition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;\n\t\t}\n\t\t.pict-content-code-action-btn svg {\n\t\t\tdisplay: block;\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t\tstroke: currentColor;\n\t\t\tfill: none;\n\t\t\tstroke-width: 1.6;\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-linejoin: round;\n\t\t}\n\t\t.pict-content-code-action-btn:hover {\n\t\t\tbackground: var(--docuserve-accent);\n\t\t\tcolor: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tborder-color: var(--docuserve-accent);\n\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n\t\t}\n\t\t.pict-content-code-action-btn:focus-visible {\n\t\t\toutline: 2px solid var(--docuserve-accent);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t\t.pict-content-code-action-btn.is-copied {\n\t\t\tbackground: var(--docuserve-accent);\n\t\t\tcolor: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tborder-color: var(--docuserve-accent);\n\t\t}\n\t\t.pict-content-code-action-btn.is-copy-failed {\n\t\t\tbackground: #B23A3A;\n\t\t\tcolor: var(--theme-color-background-panel, #FFFFFF);\n\t\t\tborder-color: #B23A3A;\n\t\t}\n\t\t.pict-fullscreen-overlay {\n\t\t\tposition: fixed;\n\t\t\tinset: 0;\n\t\t\tz-index: 9999;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tbackground: rgba(0, 0, 0, 0.62);\n\t\t\tbackdrop-filter: blur(6px);\n\t\t\t-webkit-backdrop-filter: blur(6px);\n\t\t\tcolor: var(--docuserve-text);\n\t\t}\n\t\t.pict-fullscreen-overlay[hidden] {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.pict-fullscreen-titlebar {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\tgap: 1em;\n\t\t\theight: 48px;\n\t\t\tpadding: 0 1em;\n\t\t\tbackground: var(--docuserve-bg-elevated);\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t\tborder-bottom: 1px solid var(--docuserve-border);\n\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n\t\t\tflex: 0 0 auto;\n\t\t}\n\t\t.pict-fullscreen-title {\n\t\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n\t\t\tfont-size: 0.95em;\n\t\t\tfont-weight: 600;\n\t\t\tletter-spacing: 0.01em;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t}\n\t\t.pict-fullscreen-controls {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t}\n\t\t.pict-fullscreen-btn {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 32px;\n\t\t\theight: 32px;\n\t\t\tpadding: 0;\n\t\t\tbackground: transparent;\n\t\t\tborder: 1px solid transparent;\n\t\t\tborder-radius: 6px;\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t\tcursor: pointer;\n\t\t\ttransition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n\t\t}\n\t\t.pict-fullscreen-btn svg {\n\t\t\tdisplay: block;\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tstroke: currentColor;\n\t\t\tfill: none;\n\t\t\tstroke-width: 1.75;\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-linejoin: round;\n\t\t}\n\t\t.pict-fullscreen-btn:hover {\n\t\t\tbackground: var(--docuserve-border-soft);\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t}\n\t\t.pict-fullscreen-btn:focus-visible {\n\t\t\toutline: 2px solid var(--docuserve-accent);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t\t.pict-fullscreen-close:hover {\n\t\t\tbackground: var(--docuserve-accent);\n\t\t\tcolor: var(--theme-color-background-panel, #FFFFFF);\n\t\t}\n\t\t.pict-fullscreen-stage {\n\t\t\tflex: 1 1 auto;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\toverflow: hidden;\n\t\t\tpadding: 1.5em;\n\t\t\tcursor: zoom-in;\n\t\t\ttouch-action: none;\n\t\t}\n\t\t.pict-fullscreen-stage.is-zoomed {\n\t\t\tcursor: grab;\n\t\t}\n\t\t.pict-fullscreen-stage.is-panning {\n\t\t\tcursor: grabbing;\n\t\t}\n\t\t.pict-fullscreen-content {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmax-width: 100%;\n\t\t\tmax-height: 100%;\n\t\t\ttransform-origin: center center;\n\t\t\ttransition: transform 0.05s linear;\n\t\t\twill-change: transform;\n\t\t}\n\t\t.pict-fullscreen-content > * {\n\t\t\tbox-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-img {\n\t\t\tmax-width: 90vw;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\twidth: auto;\n\t\t\theight: auto;\n\t\t\tobject-fit: contain;\n\t\t\tbackground: var(--docuserve-bg-elevated);\n\t\t\tpadding: 12px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg {\n\t\t\twidth: min(90vw, 1400px);\n\t\t\theight: auto;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\tbackground: var(--docuserve-mermaid-bg);\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E);\n\t\t\tpadding: 16px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg text,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg .nodeLabel,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg .edgeLabel,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg .label,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg span,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg foreignObject p,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg foreignObject div,\n\t\t.pict-fullscreen-content .pict-fullscreen-mermaid-svg foreignObject span {\n\t\t\tcolor: var(--theme-color-text-primary, #2A241E) !important;\n\t\t\tfill: var(--theme-color-text-primary, #2A241E) !important;\n\t\t}\n\t\t.pict-fullscreen-content .pict-fullscreen-codewrap {\n\t\t\tmax-width: 90vw;\n\t\t\tmax-height: calc(100vh - 96px);\n\t\t\tmargin: 0;\n\t\t\toverflow: auto;\n\t\t\tbox-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);\n\t\t}\n\t",Templates:[{Hash:"Docuserve-Content-Template",Template:/*html*/"\n<div class=\"pict-content\" id=\"Docuserve-Content-Body\">\n\t<div class=\"pict-content-loading\">Loading documentation...</div>\n</div>\n"}],Renderables:[{RenderableHash:"Docuserve-Content-Display",TemplateHash:"Docuserve-Content-Template",DestinationAddress:"#Docuserve-Content-Container",RenderMethod:"replace"}]};class DocuserveContentView extends libPictContentView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);}/**
|
|
4583
4649
|
* Display parsed HTML content in the content area.
|
|
4584
4650
|
*
|
|
4585
4651
|
* When viewing a module's documentation, prepends a link to the
|
|
@@ -4588,7 +4654,7 @@ CSS:/*css*/"\n\t\t.pict-content {\n\t\t\tpadding: 2em 3em;\n\t\t\tmax-width: 900
|
|
|
4588
4654
|
* @param {string} pHTMLContent - The HTML to display
|
|
4589
4655
|
*/displayContent(pHTMLContent){let tmpHTML=pHTMLContent;let tmpGroup=this.pict.AppData.Docuserve.CurrentGroup;let tmpModule=this.pict.AppData.Docuserve.CurrentModule;if(tmpGroup&&tmpModule){let tmpDocProvider=this.pict.providers['Docuserve-Documentation'];if(tmpDocProvider){let tmpPagesURL=tmpDocProvider.resolveGitHubPagesURL(tmpGroup,tmpModule);if(tmpPagesURL){tmpHTML='<div class="docuserve-module-external-link">'+'<a href="'+tmpPagesURL+'" target="_blank" rel="noopener">'+'↗ View '+tmpModule+' documentation site'+'</a>'+'</div>'+tmpHTML;}}}super.displayContent(tmpHTML,'Docuserve-Content-Body');}/**
|
|
4590
4656
|
* Show a loading indicator.
|
|
4591
|
-
*/showLoading(){super.showLoading('Loading documentation...','Docuserve-Content-Body');}}module.exports=DocuserveContentView;module.exports.default_configuration=_ViewConfiguration;},{"pict-section-content":
|
|
4657
|
+
*/showLoading(){super.showLoading('Loading documentation...','Docuserve-Content-Body');}}module.exports=DocuserveContentView;module.exports.default_configuration=_ViewConfiguration;},{"pict-section-content":12}],75:[function(require,module,exports){const libPictView=require('pict-view');/**
|
|
4592
4658
|
* Docuserve-Demo — renders one interactive demo registered with the
|
|
4593
4659
|
* Docuserve-Demos provider.
|
|
4594
4660
|
*
|
|
@@ -4627,7 +4693,7 @@ CSS:/*css*/"\n\t\t.pict-content {\n\t\t\tpadding: 2em 3em;\n\t\t\tmax-width: 900
|
|
|
4627
4693
|
let tmpHTML=this.pict.parseTemplateByHash('Docuserve-Demo-Template',{});this.pict.ContentAssignment.assignContent('#Docuserve-Content-Container',tmpHTML);this.pict.CSSMap.injectCSS();// Populate header
|
|
4628
4694
|
let tmpTitleEl=document.getElementById('Docuserve-Demo-Title');let tmpMetaEl=document.getElementById('Docuserve-Demo-Meta');let tmpDescEl=document.getElementById('Docuserve-Demo-Description');if(tmpTitleEl){tmpTitleEl.textContent=tmpEntry.Name||tmpEntry.Hash;}if(tmpMetaEl){tmpMetaEl.innerHTML=this._escapeHTML(tmpEntry.Group)+' · '+'<a href="#/doc/'+this._escapeHTML(tmpEntry.Group)+'/'+this._escapeHTML(tmpEntry.Module)+'">'+this._escapeHTML(tmpEntry.Module)+'</a>';}if(tmpDescEl){tmpDescEl.textContent=tmpEntry.Description||'';}// Populate live container by calling the demo's Mount.
|
|
4629
4695
|
let tmpLiveEl=document.getElementById('Docuserve-Demo-Live');let tmpSourcesEl=document.getElementById('Docuserve-Demo-Sources');if(tmpLiveEl){let tmpHasSources=Array.isArray(tmpEntry.Sources)&&tmpEntry.Sources.length>0;if(tmpSourcesEl){tmpSourcesEl.style.display=tmpHasSources?'':'none';tmpLiveEl.classList.toggle('full-width',!tmpHasSources);}try{tmpEntry.Mount(this.pict,tmpLiveEl,tmpEntry.Spec||{});}catch(pError){this.log.warn('Docuserve-Demo: Mount() threw for '+pHash+': '+(pError&&pError.message?pError.message:pError));tmpLiveEl.innerHTML='<div class="docuserve-demo-empty">Demo failed to mount: '+this._escapeHTML(pError&&pError.message?pError.message:String(pError))+'</div>';}}// Populate sources tabs.
|
|
4630
|
-
if(Array.isArray(tmpEntry.Sources)&&tmpEntry.Sources.length>0){this._renderSources(tmpEntry.Sources);}}_renderSources(pSources){let tmpTabsEl=document.getElementById('Docuserve-Demo-Sources-Tabs');let tmpBodyEl=document.getElementById('Docuserve-Demo-Sources-Body');if(!tmpTabsEl||!tmpBodyEl){return;}let tmpTabsHTML='';let tmpBodyHTML='';for(let i=0;i<pSources.length;i++){let tmpSrc=pSources[i];let tmpActiveCls=i===0?' active':'';let tmpLabel=this._escapeHTML(tmpSrc.Name||'source-'+(i+1));tmpTabsHTML+='<button type="button" class="docuserve-demo-sources-tab'+tmpActiveCls+'" '+'data-source-idx="'+i+'" '+'onclick="_Pict.views[\'Docuserve-Demo\']._switchSourceTab('+i+')">'+tmpLabel+'</button>';tmpBodyHTML+='<div class="docuserve-demo-source-pane'+tmpActiveCls+'" data-source-idx="'+i+'">'+'<pre><code>'+this._escapeHTML(tmpSrc.Content||'')+'</code></pre>'+'</div>';}tmpTabsEl.innerHTML=tmpTabsHTML;tmpBodyEl.innerHTML=tmpBodyHTML;}_switchSourceTab(pIdx){let tmpTabs=document.querySelectorAll('.docuserve-demo-sources-tab');let tmpPanes=document.querySelectorAll('.docuserve-demo-source-pane');for(let i=0;i<tmpTabs.length;i++){let tmpIdx=parseInt(tmpTabs[i].getAttribute('data-source-idx'),10);tmpTabs[i].classList.toggle('active',tmpIdx===pIdx);}for(let i=0;i<tmpPanes.length;i++){let tmpIdx=parseInt(tmpPanes[i].getAttribute('data-source-idx'),10);tmpPanes[i].classList.toggle('active',tmpIdx===pIdx);}}_escapeHTML(pText){if(pText==null){return'';}return String(pText).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');}}module.exports=DocuserveDemoView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":
|
|
4696
|
+
if(Array.isArray(tmpEntry.Sources)&&tmpEntry.Sources.length>0){this._renderSources(tmpEntry.Sources);}}_renderSources(pSources){let tmpTabsEl=document.getElementById('Docuserve-Demo-Sources-Tabs');let tmpBodyEl=document.getElementById('Docuserve-Demo-Sources-Body');if(!tmpTabsEl||!tmpBodyEl){return;}let tmpTabsHTML='';let tmpBodyHTML='';for(let i=0;i<pSources.length;i++){let tmpSrc=pSources[i];let tmpActiveCls=i===0?' active':'';let tmpLabel=this._escapeHTML(tmpSrc.Name||'source-'+(i+1));tmpTabsHTML+='<button type="button" class="docuserve-demo-sources-tab'+tmpActiveCls+'" '+'data-source-idx="'+i+'" '+'onclick="_Pict.views[\'Docuserve-Demo\']._switchSourceTab('+i+')">'+tmpLabel+'</button>';tmpBodyHTML+='<div class="docuserve-demo-source-pane'+tmpActiveCls+'" data-source-idx="'+i+'">'+'<pre><code>'+this._escapeHTML(tmpSrc.Content||'')+'</code></pre>'+'</div>';}tmpTabsEl.innerHTML=tmpTabsHTML;tmpBodyEl.innerHTML=tmpBodyHTML;}_switchSourceTab(pIdx){let tmpTabs=document.querySelectorAll('.docuserve-demo-sources-tab');let tmpPanes=document.querySelectorAll('.docuserve-demo-source-pane');for(let i=0;i<tmpTabs.length;i++){let tmpIdx=parseInt(tmpTabs[i].getAttribute('data-source-idx'),10);tmpTabs[i].classList.toggle('active',tmpIdx===pIdx);}for(let i=0;i<tmpPanes.length;i++){let tmpIdx=parseInt(tmpPanes[i].getAttribute('data-source-idx'),10);tmpPanes[i].classList.toggle('active',tmpIdx===pIdx);}}_escapeHTML(pText){if(pText==null){return'';}return String(pText).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');}}module.exports=DocuserveDemoView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":69}],76:[function(require,module,exports){const libPictView=require('pict-view');/**
|
|
4631
4697
|
* Docuserve-Layout — application chrome built on pict-section-modal's
|
|
4632
4698
|
* shell() API.
|
|
4633
4699
|
*
|
|
@@ -4663,7 +4729,7 @@ this._shell.center({ContentDestinationId:'Docuserve-Content-Container'});}_wireH
|
|
|
4663
4729
|
// Public panel accessors (used by views that need to toggle the
|
|
4664
4730
|
// sidebar — e.g. mobile menu buttons).
|
|
4665
4731
|
// ─────────────────────────────────────────────
|
|
4666
|
-
getSidebarPanel(){return this._shell?this._shell.getPanel('sidebar'):null;}toggleSidebar(){let tmpPanel=this.getSidebarPanel();if(tmpPanel){tmpPanel.toggle();}}}module.exports=DocuserveLayoutView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":
|
|
4732
|
+
getSidebarPanel(){return this._shell?this._shell.getPanel('sidebar'):null;}toggleSidebar(){let tmpPanel=this.getSidebarPanel();if(tmpPanel){tmpPanel.toggle();}}}module.exports=DocuserveLayoutView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":69}],77:[function(require,module,exports){const libPictView=require('pict-view');const _ViewConfiguration={ViewIdentifier:"Docuserve-Search",DefaultRenderable:"Docuserve-Search-Display",DefaultDestinationAddress:"#Docuserve-Content-Container",AutoRender:false,CSS:/*css*/"\n\t\t.docuserve-search {\n\t\t\tpadding: 2em 3em;\n\t\t\tmax-width: 900px;\n\t\t\tmargin: 0 auto;\n\t\t}\n\t\t.docuserve-search-header {\n\t\t\tmargin-bottom: 1.5em;\n\t\t}\n\t\t.docuserve-search-header h1 {\n\t\t\tfont-size: 1.75em;\n\t\t\tcolor: var(--theme-color-text-primary, #3D3229);\n\t\t\tmargin: 0 0 0.75em 0;\n\t\t}\n\t\t.docuserve-search-input {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0.75em 1em;\n\t\t\tfont-size: 1.1em;\n\t\t\tborder: 2px solid #D4CCBE;\n\t\t\tborder-radius: 6px;\n\t\t\toutline: none;\n\t\t\tbox-sizing: border-box;\n\t\t\ttransition: border-color 0.15s;\n\t\t}\n\t\t.docuserve-search-input:focus {\n\t\t\tborder-color: #2E7D74;\n\t\t}\n\t\t.docuserve-search-status {\n\t\t\tmargin-top: 0.75em;\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: #8A7F72;\n\t\t}\n\t\t.docuserve-search-results {\n\t\t\tmargin-top: 1em;\n\t\t}\n\t\t.docuserve-search-result {\n\t\t\tdisplay: block;\n\t\t\tpadding: 1em 1.25em;\n\t\t\tmargin-bottom: 0.5em;\n\t\t\tborder: 1px solid #EAE3D8;\n\t\t\tborder-radius: 6px;\n\t\t\ttext-decoration: none;\n\t\t\tcolor: inherit;\n\t\t\ttransition: border-color 0.15s, box-shadow 0.15s;\n\t\t}\n\t\t.docuserve-search-result:hover {\n\t\t\tborder-color: #2E7D74;\n\t\t\tbox-shadow: 0 2px 8px rgba(46, 125, 116, 0.1);\n\t\t}\n\t\t.docuserve-search-result-title {\n\t\t\tfont-size: 1.05em;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: #2E7D74;\n\t\t\tmargin-bottom: 0.25em;\n\t\t}\n\t\t.docuserve-search-result-breadcrumb {\n\t\t\tfont-size: 0.8em;\n\t\t\tcolor: #8A7F72;\n\t\t\tmargin-bottom: 0.2em;\n\t\t}\n\t\t.docuserve-search-result-path {\n\t\t\tfont-size: 0.8em;\n\t\t\tcolor: #A39889;\n\t\t\tfont-family: monospace;\n\t\t}\n\t\t.docuserve-search-empty {\n\t\t\ttext-align: center;\n\t\t\tpadding: 3em 1em;\n\t\t\tcolor: #8A7F72;\n\t\t\tfont-size: 1em;\n\t\t}\n\t",Templates:[{Hash:"Docuserve-Search-Template",Template:/*html*/"\n<div class=\"docuserve-search\">\n\t<div class=\"docuserve-search-header\">\n\t\t<h1>Search Documentation</h1>\n\t\t<input type=\"text\" class=\"docuserve-search-input\" id=\"Docuserve-Search-Input\" placeholder=\"Search across all modules...\">\n\t\t<div id=\"Docuserve-Search-Status\" class=\"docuserve-search-status\"></div>\n\t</div>\n\t<div id=\"Docuserve-Search-Results\" class=\"docuserve-search-results\"></div>\n</div>\n"}],Renderables:[{RenderableHash:"Docuserve-Search-Display",TemplateHash:"Docuserve-Search-Template",DestinationAddress:"#Docuserve-Content-Container",RenderMethod:"replace"}]};class DocuserveSearchView extends libPictView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this._SearchDebounceTimer=null;}onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent){// Attach the search input listener
|
|
4667
4733
|
let tmpInput=document.getElementById('Docuserve-Search-Input');if(tmpInput){tmpInput.addEventListener('input',()=>{if(this._SearchDebounceTimer){clearTimeout(this._SearchDebounceTimer);}this._SearchDebounceTimer=setTimeout(()=>{this.performSearch(tmpInput.value);},250);});}return super.onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent);}/**
|
|
4668
4734
|
* Show the search page with an optional initial query.
|
|
4669
4735
|
*
|
|
@@ -4680,7 +4746,7 @@ let tmpHTML='';for(let i=0;i<tmpResults.length;i++){let tmpResult=tmpResults[i];
|
|
|
4680
4746
|
*
|
|
4681
4747
|
* @param {string} pText - The text to escape
|
|
4682
4748
|
* @returns {string} The escaped text
|
|
4683
|
-
*/escapeHTML(pText){if(!pText){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');}}module.exports=DocuserveSearchView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":
|
|
4749
|
+
*/escapeHTML(pText){if(!pText){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');}}module.exports=DocuserveSearchView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":69}],78:[function(require,module,exports){const libPictView=require('pict-view');const _ViewConfiguration={ViewIdentifier:"Docuserve-Sidebar",DefaultRenderable:"Docuserve-Sidebar-Content",DefaultDestinationAddress:"#Docuserve-Sidebar-Container",AutoRender:false,CSS:/*css*/"\n\t\t.docuserve-sidebar {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tbackground: var(--docuserve-sidebar-bg);\n\t\t\tborder-right: 1px solid var(--docuserve-sidebar-border);\n\t\t\tpadding: 1em 0;\n\t\t\tpadding-top: 0;\n\t\t\tmin-height: 100%;\n\t\t\tposition: relative;\n\t\t\ttransition: background-color 0.15s ease;\n\t\t}\n\t\t.docuserve-sidebar-header {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: flex-end;\n\t\t\tpadding: 0.4em 0.5em 0;\n\t\t}\n\t\t.docuserve-sidebar-close {\n\t\t\tbackground: none;\n\t\t\tborder: none;\n\t\t\tcolor: var(--docuserve-text-dim);\n\t\t\tfont-size: 1.2em;\n\t\t\tcursor: pointer;\n\t\t\tpadding: 0.2em 0.4em;\n\t\t\tline-height: 1;\n\t\t}\n\t\t.docuserve-sidebar-close:hover {\n\t\t\tcolor: var(--docuserve-accent);\n\t\t}\n\t\t.docuserve-sidebar-search {\n\t\t\tpadding: 0 1em 1em 1em;\n\t\t\tborder-bottom: 1px solid var(--docuserve-sidebar-border-soft);\n\t\t\tmargin-bottom: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-search input {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0.5em 0.75em;\n\t\t\tbackground: var(--docuserve-sidebar-search-bg);\n\t\t\tcolor: var(--docuserve-text);\n\t\t\tborder: 1px solid var(--docuserve-sidebar-search-border);\n\t\t\tborder-radius: 4px;\n\t\t\tfont-size: 0.85em;\n\t\t\toutline: none;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.docuserve-sidebar-search input:focus {\n\t\t\tborder-color: var(--docuserve-accent);\n\t\t}\n\t\t.docuserve-sidebar-search-results {\n\t\t\tmargin-top: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-search-results a {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.4em 0.5em;\n\t\t\tcolor: var(--docuserve-sidebar-text);\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: 0.82em;\n\t\t\tborder-radius: 3px;\n\t\t\ttransition: background-color 0.1s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-sidebar-search-results a:hover {\n\t\t\tbackground-color: var(--docuserve-sidebar-hover-bg);\n\t\t\tcolor: var(--docuserve-sidebar-hover-text);\n\t\t}\n\t\t.docuserve-sidebar-search-result-title {\n\t\t\tfont-weight: 600;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t}\n\t\t.docuserve-sidebar-search-results a:hover .docuserve-sidebar-search-result-title {\n\t\t\tcolor: var(--docuserve-sidebar-hover-text);\n\t\t}\n\t\t.docuserve-sidebar-search-result-meta {\n\t\t\tfont-size: 0.9em;\n\t\t\tcolor: var(--docuserve-text-dim);\n\t\t}\n\t\t.docuserve-sidebar-search-all {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.4em 0.5em;\n\t\t\tfont-size: 0.82em;\n\t\t\tcolor: var(--docuserve-accent);\n\t\t\ttext-decoration: none;\n\t\t\tfont-weight: 600;\n\t\t\tcursor: pointer;\n\t\t\tborder-top: 1px solid var(--docuserve-sidebar-border-soft);\n\t\t\tmargin-top: 0.25em;\n\t\t\tpadding-top: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-search-all:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t.docuserve-sidebar-home {\n\t\t\tpadding: 0.5em 1.25em;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 0.85em;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.03em;\n\t\t}\n\t\t.docuserve-sidebar-home a {\n\t\t\tcolor: var(--docuserve-sidebar-module-text);\n\t\t\ttext-decoration: none;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t}\n\t\t.docuserve-sidebar-home a:hover {\n\t\t\tcolor: var(--docuserve-sidebar-hover-text);\n\t\t}\n\t\t.docuserve-sidebar-group {\n\t\t\tmargin-top: 0.25em;\n\t\t}\n\t\t.docuserve-sidebar-group-title {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.5em 1.25em;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 0.85em;\n\t\t\tcolor: var(--docuserve-sidebar-group-title);\n\t\t\ttext-decoration: none;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.03em;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t\ttransition: background-color 0.1s, color 0.1s;\n\t\t}\n\t\t.docuserve-sidebar-group-title:hover {\n\t\t\tcolor: var(--docuserve-sidebar-hover-text);\n\t\t\tbackground-color: var(--docuserve-sidebar-hover-bg);\n\t\t}\n\t\ta.docuserve-sidebar-group-title.active {\n\t\t\tcolor: var(--docuserve-sidebar-active-text);\n\t\t\tbackground-color: var(--docuserve-sidebar-active-bg);\n\t\t}\n\t\t.docuserve-sidebar-modules {\n\t\t\tlist-style: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\t.docuserve-sidebar-modules li {\n\t\t\tpadding: 0;\n\t\t}\n\t\t.docuserve-sidebar-modules a {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.3em 1.25em 0.3em 2em;\n\t\t\tcolor: var(--docuserve-sidebar-module-text);\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: 0.85em;\n\t\t\ttransition: background-color 0.1s, color 0.1s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-sidebar-modules a:hover {\n\t\t\tbackground-color: var(--docuserve-sidebar-hover-bg);\n\t\t\tcolor: var(--docuserve-sidebar-hover-text);\n\t\t}\n\t\t.docuserve-sidebar-modules a.active {\n\t\t\tcolor: var(--docuserve-sidebar-active-text);\n\t\t\tfont-weight: 600;\n\t\t\tbackground-color: var(--docuserve-sidebar-active-bg);\n\t\t}\n\t\t.docuserve-sidebar-modules .no-docs {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.3em 1.25em 0.3em 2em;\n\t\t\tcolor: var(--docuserve-text-dim);\n\t\t\tfont-size: 0.85em;\n\t\t}\n\t\t.docuserve-sidebar-module-nav {\n\t\t\tborder-top: 1px solid var(--docuserve-sidebar-border-soft);\n\t\t\tmargin-top: 0.5em;\n\t\t\tpadding-top: 0.5em;\n\t\t}\n\t\t.docuserve-sidebar-module-nav-section {\n\t\t\tpadding: 0.4em 1.25em;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 0.8em;\n\t\t\tcolor: var(--docuserve-text-dim);\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.02em;\n\t\t}\n\t\t.docuserve-sidebar-module-nav a {\n\t\t\tdisplay: block;\n\t\t\tpadding: 0.25em 1.25em 0.25em 2.25em;\n\t\t\tcolor: var(--docuserve-sidebar-module-text);\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: 0.82em;\n\t\t\ttransition: background-color 0.1s, color 0.1s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-sidebar-module-nav a:hover {\n\t\t\tbackground-color: var(--docuserve-sidebar-hover-bg);\n\t\t\tcolor: var(--docuserve-sidebar-hover-text);\n\t\t}\n\t\t.docuserve-sidebar-footer {\n\t\t\tmargin-top: auto;\n\t\t\tpadding: 0.9em 1.25em 1em 1.25em;\n\t\t\tborder-top: 1px solid var(--docuserve-sidebar-border-soft);\n\t\t}\n\t\t.docuserve-sidebar-footer:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.docuserve-version-placard {\n\t\t\tfont-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n\t\t\tline-height: 1.35;\n\t\t}\n\t\t.docuserve-version-name {\n\t\t\tfont-size: 0.78em;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t\tletter-spacing: 0.02em;\n\t\t}\n\t\t.docuserve-version-number {\n\t\t\tfont-size: 0.82em;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--docuserve-accent);\n\t\t}\n\t\t.docuserve-version-meta {\n\t\t\tfont-size: 0.7em;\n\t\t\tcolor: var(--docuserve-text-dim);\n\t\t\tmargin-top: 0.15em;\n\t\t}\n\t",Templates:[{Hash:"Docuserve-Sidebar-Template",Template:/*html*/"\n<div class=\"docuserve-sidebar\">\n\t<div class=\"docuserve-sidebar-header\">\n\t\t<button class=\"docuserve-sidebar-close\" onclick=\"{~P~}.views['Docuserve-Sidebar'].toggleSidebar()\">×</button>\n\t</div>\n\t<div id=\"Docuserve-Sidebar-Search\" class=\"docuserve-sidebar-search\" style=\"display:none;\">\n\t\t<input type=\"text\" placeholder=\"Search docs...\" id=\"Docuserve-Sidebar-Search-Input\">\n\t\t<div id=\"Docuserve-Sidebar-Search-Results\" class=\"docuserve-sidebar-search-results\"></div>\n\t</div>\n\t<div class=\"docuserve-sidebar-home\">\n\t\t<a onclick=\"{~P~}.PictApplication.navigateTo('/Home')\">Home</a>\n\t</div>\n\t<div id=\"Docuserve-Sidebar-Groups\"></div>\n\t<div id=\"Docuserve-Sidebar-ModuleNav\"></div>\n\t<div id=\"Docuserve-Sidebar-Footer\" class=\"docuserve-sidebar-footer\"></div>\n</div>\n"}],Renderables:[{RenderableHash:"Docuserve-Sidebar-Content",TemplateHash:"Docuserve-Sidebar-Template",DestinationAddress:"#Docuserve-Sidebar-Container",RenderMethod:"replace"}]};class DocusserveSidebarView extends libPictView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);this._SidebarSearchDebounceTimer=null;}onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent){this.renderSidebarGroups();this.renderSidebarFooter();// Conditionally show the search box if the keyword index is loaded
|
|
4684
4750
|
let tmpSearchContainer=document.getElementById('Docuserve-Sidebar-Search');if(tmpSearchContainer&&this.pict.AppData.Docuserve.KeywordIndexLoaded){tmpSearchContainer.style.display='';let tmpInput=document.getElementById('Docuserve-Sidebar-Search-Input');if(tmpInput){tmpInput.addEventListener('input',()=>{if(this._SidebarSearchDebounceTimer){clearTimeout(this._SidebarSearchDebounceTimer);}this._SidebarSearchDebounceTimer=setTimeout(()=>{this.performSidebarSearch(tmpInput.value);},250);});}}return super.onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent);}/**
|
|
4685
4751
|
* Render the sidebar footer placard showing module name, version,
|
|
4686
4752
|
* build timestamp and git commit from _version.json. Hides the
|
|
@@ -4722,7 +4788,7 @@ this.pict.AppData.Docuserve.SidebarVisible=!this.pict.AppData.Docuserve.SidebarV
|
|
|
4722
4788
|
*
|
|
4723
4789
|
* @param {string} pText - The text to escape
|
|
4724
4790
|
* @returns {string} The escaped text
|
|
4725
|
-
*/escapeHTML(pText){if(!pText){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=DocusserveSidebarView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":
|
|
4791
|
+
*/escapeHTML(pText){if(!pText){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=DocusserveSidebarView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":69}],79:[function(require,module,exports){const libPictView=require('pict-view');const _ViewConfiguration={ViewIdentifier:"Docuserve-Splash",DefaultRenderable:"Docuserve-Splash-Content",DefaultDestinationAddress:"#Docuserve-Content-Container",AutoRender:false,CSS:/*css*/"\n\t\t.docuserve-splash {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmin-height: calc(100vh - 56px);\n\t\t\tpadding: 3em 2em;\n\t\t\ttext-align: center;\n\t\t\tbackground: var(--docuserve-bg);\n\t\t}\n\t\t.docuserve-splash h1 {\n\t\t\tfont-size: 3em;\n\t\t\tfont-weight: 700;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t\tmargin: 0 0 0.25em 0;\n\t\t}\n\t\t.docuserve-splash h1 small {\n\t\t\tfont-size: 0.4em;\n\t\t\tfont-weight: 400;\n\t\t\tcolor: var(--docuserve-text-dim);\n\t\t\tvertical-align: middle;\n\t\t\tmargin-left: 0.15em;\n\t\t}\n\t\t.docuserve-splash-tagline {\n\t\t\tfont-size: 1.25em;\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t\tmargin-bottom: 1.5em;\n\t\t\tfont-style: italic;\n\t\t}\n\t\t.docuserve-splash-description {\n\t\t\tfont-size: 1em;\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t\tmax-width: 600px;\n\t\t\tline-height: 1.7;\n\t\t\tmargin-bottom: 2em;\n\t\t}\n\t\t.docuserve-splash-highlights {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n\t\t\tgap: 1.25em;\n\t\t\tmax-width: 900px;\n\t\t\twidth: 100%;\n\t\t\tmargin-bottom: 2.5em;\n\t\t}\n\t\t.docuserve-splash-highlight-card {\n\t\t\tbackground: var(--docuserve-bg-elevated);\n\t\t\tborder: 1px solid var(--docuserve-border);\n\t\t\tborder-radius: 8px;\n\t\t\tpadding: 1.25em;\n\t\t\ttext-align: left;\n\t\t\ttransition: box-shadow 0.2s, border-color 0.2s;\n\t\t}\n\t\t.docuserve-splash-highlight-card:hover {\n\t\t\tbox-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n\t\t\tborder-color: var(--docuserve-accent);\n\t\t}\n\t\t.docuserve-splash-highlight-card h3 {\n\t\t\tmargin: 0 0 0.5em 0;\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t\tfont-size: 1em;\n\t\t}\n\t\t.docuserve-splash-highlight-card p {\n\t\t\tmargin: 0;\n\t\t\tcolor: var(--docuserve-text-muted);\n\t\t\tfont-size: 0.85em;\n\t\t\tline-height: 1.5;\n\t\t}\n\t\t.docuserve-splash-actions {\n\t\t\tdisplay: flex;\n\t\t\tgap: 1em;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: center;\n\t\t}\n\t\t.docuserve-splash-actions a {\n\t\t\tdisplay: inline-block;\n\t\t\tpadding: 0.7em 1.5em;\n\t\t\tborder-radius: 6px;\n\t\t\tfont-size: 0.95em;\n\t\t\tfont-weight: 600;\n\t\t\ttext-decoration: none;\n\t\t\ttransition: background-color 0.15s, color 0.15s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-splash-actions .primary {\n\t\t\tbackground-color: var(--docuserve-accent);\n\t\t\tcolor: var(--theme-color-background-panel, #fff);\n\t\t}\n\t\t.docuserve-splash-actions .primary:hover {\n\t\t\tbackground-color: var(--docuserve-accent-hover);\n\t\t}\n\t\t.docuserve-splash-actions .secondary {\n\t\t\tbackground-color: var(--docuserve-bg-elevated);\n\t\t\tcolor: var(--docuserve-text-strong);\n\t\t\tborder: 2px solid var(--docuserve-accent);\n\t\t}\n\t\t.docuserve-splash-actions .secondary:hover {\n\t\t\tborder-color: var(--docuserve-accent-hover);\n\t\t\tcolor: var(--docuserve-accent);\n\t\t}\n\t",Templates:[{Hash:"Docuserve-Splash-Template",Template:/*html*/"\n<div class=\"docuserve-splash\">\n\t<h1 id=\"Docuserve-Splash-Title\"></h1>\n\t<div class=\"docuserve-splash-tagline\" id=\"Docuserve-Splash-Tagline\"></div>\n\t<div class=\"docuserve-splash-description\" id=\"Docuserve-Splash-Description\"></div>\n\t<div class=\"docuserve-splash-highlights\" id=\"Docuserve-Splash-Highlights\"></div>\n\t<div class=\"docuserve-splash-actions\" id=\"Docuserve-Splash-Actions\"></div>\n</div>\n"}],Renderables:[{RenderableHash:"Docuserve-Splash-Content",TemplateHash:"Docuserve-Splash-Template",DestinationAddress:"#Docuserve-Content-Container",RenderMethod:"replace"}]};class DocusserveSplashView extends libPictView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);}onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent){let tmpDocuserve=this.pict.AppData.Docuserve;if(tmpDocuserve.CoverLoaded&&tmpDocuserve.Cover){this.renderFromCover(tmpDocuserve.Cover);}else{this.renderFromCatalog(tmpDocuserve);}return super.onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent);}/**
|
|
4726
4792
|
* Render the splash screen from parsed _cover.md data.
|
|
4727
4793
|
*
|
|
4728
4794
|
* @param {Object} pCover - The parsed cover data { Title, Tagline, Description, Highlights, Actions }
|
|
@@ -4751,14 +4817,14 @@ return this.escapeHTML(pText).replace(/<small>/gi,'<small>').replace(/<
|
|
|
4751
4817
|
*
|
|
4752
4818
|
* @param {string} pText - The text to escape
|
|
4753
4819
|
* @returns {string} The escaped text
|
|
4754
|
-
*/escapeHTML(pText){if(!pText){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=DocusserveSplashView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":
|
|
4820
|
+
*/escapeHTML(pText){if(!pText){return'';}return pText.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}}module.exports=DocusserveSplashView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":69}],80:[function(require,module,exports){const libPictView=require('pict-view');/**
|
|
4755
4821
|
* PictView-Docuserve-TopBar-Nav — slot view rendered into Theme-TopBar's
|
|
4756
4822
|
* NavView slot. Hosts navigation links (Home + any links declared in
|
|
4757
4823
|
* _topbar.md) and the version chip (sourced from _version.json).
|
|
4758
4824
|
*
|
|
4759
4825
|
* Re-renders on demand when AppData.Docuserve.TopBar / Version data
|
|
4760
4826
|
* is loaded by the documentation provider.
|
|
4761
|
-
*/const _ViewConfiguration={ViewIdentifier:"Docuserve-TopBar-Nav",DefaultRenderable:"Docuserve-TopBar-Nav-Display",DefaultDestinationAddress:"#Theme-TopBar-Nav",AutoRender:false,CSS:/*css*/"\n\t\t.docuserve-nav\n\t\t{\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\theight: 100%;\n\t\t\tgap: 0.6em;\n\t\t\tpadding: 0 0.75em;\n\t\t\tcolor: var(--theme-color-text-on-brand, var(--theme-color-text-primary, #E8E0D4));\n\t\t}\n\t\t.docuserve-nav-links\n\t\t{\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0.25em;\n\t\t}\n\t\t.docuserve-nav-links a\n\t\t{\n\t\t\tcolor: var(--theme-color-text-on-brand, var(--theme-color-text-secondary, #B5AA9A));\n\t\t\ttext-decoration: none;\n\t\t\tpadding: 0.45em 0.7em;\n\t\t\tborder-radius: 4px;\n\t\t\tfont-size: 0.9em;\n\t\t\ttransition: background-color 0.15s, color 0.15s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-nav-links a:hover\n\t\t{\n\t\t\tbackground-color: var(--theme-color-background-hover, rgba(255, 255, 255, 0.06));\n\t\t\tcolor: var(--theme-color-text-on-brand, var(--theme-color-background-panel, #fff));\n\t\t}\n\t\t.docuserve-nav-version\n\t\t{\n\t\t\tfont-size: 0.72em;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--theme-color-text-on-brand, var(--theme-color-text-muted, #B5AA9A));\n\t\t\tbackground: var(--theme-color-background-hover, rgba(255, 255, 255, 0.06));\n\t\t\tborder: 1px solid var(--theme-color-border-light, rgba(255, 255, 255, 0.08));\n\t\t\tpadding: 0.12em 0.55em;\n\t\t\tborder-radius: 10px;\n\t\t\tfont-family: var(--theme-typography-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n\t\t\tletter-spacing: 0.02em;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t\t.docuserve-nav-version:empty\n\t\t{\n\t\t\tdisplay: none;\n\t\t}\n\t",Templates:[{Hash:"Docuserve-TopBar-Nav-Template",Template:/*html*/"\n<div class=\"docuserve-nav\">\n\t<div id=\"Docuserve-Nav-Links\" class=\"docuserve-nav-links\"></div>\n\t<span id=\"Docuserve-Nav-Version\" class=\"docuserve-nav-version\" title=\"\"></span>\n</div>"}],Renderables:[{RenderableHash:"Docuserve-TopBar-Nav-Display",TemplateHash:"Docuserve-TopBar-Nav-Template",DestinationAddress:"#Theme-TopBar-Nav",RenderMethod:"replace"}]};class DocuserveTopBarNavView extends libPictView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);}onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent){this.pict.CSSMap.injectCSS();this._renderNavLinks();this._renderVersionChip();return super.onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent);}_renderNavLinks(){let tmpDocuserve=this.pict.AppData.Docuserve||{};let tmpLinksEl=document.getElementById('Docuserve-Nav-Links');if(!tmpLinksEl){return;}let tmpHTML='<a href="#/Home">Home</a>';if(tmpDocuserve.TopBarLoaded&&tmpDocuserve.TopBar&&Array.isArray(tmpDocuserve.TopBar.NavLinks)){for(let i=0;i<tmpDocuserve.TopBar.NavLinks.length;i++){let tmpLink=tmpDocuserve.TopBar.NavLinks[i];tmpHTML+='<a href="'+this._escapeHTML(tmpLink.Href||'#')+'">'+this._escapeHTML(tmpLink.Text||'')+'</a>';}}tmpLinksEl.innerHTML=tmpHTML;}_renderVersionChip(){let tmpDocuserve=this.pict.AppData.Docuserve||{};let tmpEl=document.getElementById('Docuserve-Nav-Version');if(!tmpEl){return;}if(!tmpDocuserve.VersionLoaded||!tmpDocuserve.Version||!tmpDocuserve.Version.Version){tmpEl.innerHTML='';tmpEl.setAttribute('title','');return;}let tmpVersion=tmpDocuserve.Version;tmpEl.innerHTML='v'+this._escapeHTML(tmpVersion.Version);let tmpTooltipParts=[];tmpTooltipParts.push((tmpVersion.Name?tmpVersion.Name+' ':'')+'v'+tmpVersion.Version);if(tmpVersion.GeneratedAt){let tmpMatch=String(tmpVersion.GeneratedAt).match(/^(\d{4}-\d{2}-\d{2})/);tmpTooltipParts.push('built '+(tmpMatch?tmpMatch[1]:tmpVersion.GeneratedAt));}if(tmpVersion.GitCommit){tmpTooltipParts.push(tmpVersion.GitCommit);}tmpEl.setAttribute('title',tmpTooltipParts.join(' · '));}_escapeHTML(pText){if(pText==null){return'';}return String(pText).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');}}module.exports=DocuserveTopBarNavView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":
|
|
4827
|
+
*/const _ViewConfiguration={ViewIdentifier:"Docuserve-TopBar-Nav",DefaultRenderable:"Docuserve-TopBar-Nav-Display",DefaultDestinationAddress:"#Theme-TopBar-Nav",AutoRender:false,CSS:/*css*/"\n\t\t.docuserve-nav\n\t\t{\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\theight: 100%;\n\t\t\tgap: 0.6em;\n\t\t\tpadding: 0 0.75em;\n\t\t\tcolor: var(--theme-color-text-on-brand, var(--theme-color-text-primary, #E8E0D4));\n\t\t}\n\t\t.docuserve-nav-links\n\t\t{\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0.25em;\n\t\t}\n\t\t.docuserve-nav-links a\n\t\t{\n\t\t\tcolor: var(--theme-color-text-on-brand, var(--theme-color-text-secondary, #B5AA9A));\n\t\t\ttext-decoration: none;\n\t\t\tpadding: 0.45em 0.7em;\n\t\t\tborder-radius: 4px;\n\t\t\tfont-size: 0.9em;\n\t\t\ttransition: background-color 0.15s, color 0.15s;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.docuserve-nav-links a:hover\n\t\t{\n\t\t\tbackground-color: var(--theme-color-background-hover, rgba(255, 255, 255, 0.06));\n\t\t\tcolor: var(--theme-color-text-on-brand, var(--theme-color-background-panel, #fff));\n\t\t}\n\t\t.docuserve-nav-version\n\t\t{\n\t\t\tfont-size: 0.72em;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--theme-color-text-on-brand, var(--theme-color-text-muted, #B5AA9A));\n\t\t\tbackground: var(--theme-color-background-hover, rgba(255, 255, 255, 0.06));\n\t\t\tborder: 1px solid var(--theme-color-border-light, rgba(255, 255, 255, 0.08));\n\t\t\tpadding: 0.12em 0.55em;\n\t\t\tborder-radius: 10px;\n\t\t\tfont-family: var(--theme-typography-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);\n\t\t\tletter-spacing: 0.02em;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t\t.docuserve-nav-version:empty\n\t\t{\n\t\t\tdisplay: none;\n\t\t}\n\t",Templates:[{Hash:"Docuserve-TopBar-Nav-Template",Template:/*html*/"\n<div class=\"docuserve-nav\">\n\t<div id=\"Docuserve-Nav-Links\" class=\"docuserve-nav-links\"></div>\n\t<span id=\"Docuserve-Nav-Version\" class=\"docuserve-nav-version\" title=\"\"></span>\n</div>"}],Renderables:[{RenderableHash:"Docuserve-TopBar-Nav-Display",TemplateHash:"Docuserve-TopBar-Nav-Template",DestinationAddress:"#Theme-TopBar-Nav",RenderMethod:"replace"}]};class DocuserveTopBarNavView extends libPictView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);}onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent){this.pict.CSSMap.injectCSS();this._renderNavLinks();this._renderVersionChip();return super.onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent);}_renderNavLinks(){let tmpDocuserve=this.pict.AppData.Docuserve||{};let tmpLinksEl=document.getElementById('Docuserve-Nav-Links');if(!tmpLinksEl){return;}let tmpHTML='<a href="#/Home">Home</a>';if(tmpDocuserve.TopBarLoaded&&tmpDocuserve.TopBar&&Array.isArray(tmpDocuserve.TopBar.NavLinks)){for(let i=0;i<tmpDocuserve.TopBar.NavLinks.length;i++){let tmpLink=tmpDocuserve.TopBar.NavLinks[i];tmpHTML+='<a href="'+this._escapeHTML(tmpLink.Href||'#')+'">'+this._escapeHTML(tmpLink.Text||'')+'</a>';}}tmpLinksEl.innerHTML=tmpHTML;}_renderVersionChip(){let tmpDocuserve=this.pict.AppData.Docuserve||{};let tmpEl=document.getElementById('Docuserve-Nav-Version');if(!tmpEl){return;}if(!tmpDocuserve.VersionLoaded||!tmpDocuserve.Version||!tmpDocuserve.Version.Version){tmpEl.innerHTML='';tmpEl.setAttribute('title','');return;}let tmpVersion=tmpDocuserve.Version;tmpEl.innerHTML='v'+this._escapeHTML(tmpVersion.Version);let tmpTooltipParts=[];tmpTooltipParts.push((tmpVersion.Name?tmpVersion.Name+' ':'')+'v'+tmpVersion.Version);if(tmpVersion.GeneratedAt){let tmpMatch=String(tmpVersion.GeneratedAt).match(/^(\d{4}-\d{2}-\d{2})/);tmpTooltipParts.push('built '+(tmpMatch?tmpMatch[1]:tmpVersion.GeneratedAt));}if(tmpVersion.GitCommit){tmpTooltipParts.push(tmpVersion.GitCommit);}tmpEl.setAttribute('title',tmpTooltipParts.join(' · '));}_escapeHTML(pText){if(pText==null){return'';}return String(pText).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');}}module.exports=DocuserveTopBarNavView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":69}],81:[function(require,module,exports){const libPictView=require('pict-view');/**
|
|
4762
4828
|
* PictView-Docuserve-TopBar-User — slot view rendered into Theme-TopBar's
|
|
4763
4829
|
* UserView slot. Hosts the Search link (when a keyword index is loaded)
|
|
4764
4830
|
* and any external links declared in _topbar.md.
|
|
@@ -4771,5 +4837,5 @@ return this.escapeHTML(pText).replace(/<small>/gi,'<small>').replace(/<
|
|
|
4771
4837
|
* KeywordIndexLoaded changes.
|
|
4772
4838
|
*/const _ViewConfiguration={ViewIdentifier:"Docuserve-TopBar-User",DefaultRenderable:"Docuserve-TopBar-User-Display",DefaultDestinationAddress:"#Theme-TopBar-User",AutoRender:false,CSS:/*css*/"\n\t\t.docuserve-user\n\t\t{\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\theight: 100%;\n\t\t\tgap: 0.25em;\n\t\t\tpadding: 0 0.75em;\n\t\t\tcolor: var(--theme-color-text-on-brand, var(--theme-color-text-secondary, #B5AA9A));\n\t\t}\n\t\t.docuserve-user a\n\t\t{\n\t\t\tcolor: var(--theme-color-text-on-brand, var(--theme-color-text-secondary, #B5AA9A));\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: 0.85em;\n\t\t\tpadding: 0.4em 0.6em;\n\t\t\tborder-radius: 4px;\n\t\t\ttransition: background-color 0.15s, color 0.15s;\n\t\t}\n\t\t.docuserve-user a:hover\n\t\t{\n\t\t\tbackground-color: var(--theme-color-background-hover, rgba(255, 255, 255, 0.06));\n\t\t\tcolor: var(--theme-color-text-on-brand, var(--theme-color-text-primary, #E8E0D4));\n\t\t}\n\t",Templates:[{Hash:"Docuserve-TopBar-User-Template",Template:/*html*/"<div class=\"docuserve-user\" id=\"Docuserve-User-Links\"></div>"}],Renderables:[{RenderableHash:"Docuserve-TopBar-User-Display",TemplateHash:"Docuserve-TopBar-User-Template",DestinationAddress:"#Theme-TopBar-User",RenderMethod:"replace"}]};class DocuserveTopBarUserView extends libPictView{constructor(pFable,pOptions,pServiceHash){super(pFable,pOptions,pServiceHash);}onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent){this.pict.CSSMap.injectCSS();this._renderLinks();return super.onAfterRender(pRenderable,pRenderDestinationAddress,pRecord,pContent);}_renderLinks(){let tmpDocuserve=this.pict.AppData.Docuserve||{};let tmpEl=document.getElementById('Docuserve-User-Links');if(!tmpEl){return;}let tmpHTML='';// Search link comes first when a keyword index is available.
|
|
4773
4839
|
if(tmpDocuserve.KeywordIndexLoaded){tmpHTML+='<a href="#/search/">Search</a>';}// External links from _topbar.md.
|
|
4774
|
-
if(tmpDocuserve.TopBarLoaded&&tmpDocuserve.TopBar&&Array.isArray(tmpDocuserve.TopBar.ExternalLinks)){for(let i=0;i<tmpDocuserve.TopBar.ExternalLinks.length;i++){let tmpLink=tmpDocuserve.TopBar.ExternalLinks[i];let tmpHref=this._escapeHTML(tmpLink.Href||'#');let tmpText=this._escapeHTML(tmpLink.Text||'');let tmpIsExternal=/^https?:/i.test(tmpLink.Href||'');tmpHTML+='<a href="'+tmpHref+'"'+(tmpIsExternal?' target="_blank" rel="noopener"':'')+'>'+tmpText+'</a>';}}tmpEl.innerHTML=tmpHTML;}_escapeHTML(pText){if(pText==null){return'';}return String(pText).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');}}module.exports=DocuserveTopBarUserView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":
|
|
4840
|
+
if(tmpDocuserve.TopBarLoaded&&tmpDocuserve.TopBar&&Array.isArray(tmpDocuserve.TopBar.ExternalLinks)){for(let i=0;i<tmpDocuserve.TopBar.ExternalLinks.length;i++){let tmpLink=tmpDocuserve.TopBar.ExternalLinks[i];let tmpHref=this._escapeHTML(tmpLink.Href||'#');let tmpText=this._escapeHTML(tmpLink.Text||'');let tmpIsExternal=/^https?:/i.test(tmpLink.Href||'');tmpHTML+='<a href="'+tmpHref+'"'+(tmpIsExternal?' target="_blank" rel="noopener"':'')+'>'+tmpText+'</a>';}}tmpEl.innerHTML=tmpHTML;}_escapeHTML(pText){if(pText==null){return'';}return String(pText).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');}}module.exports=DocuserveTopBarUserView;module.exports.default_configuration=_ViewConfiguration;},{"pict-view":69}]},{},[71])(71);});
|
|
4775
4841
|
//# sourceMappingURL=pict-docuserve.js.map
|