@node-projects/web-component-designer-visualization-addons 0.1.152 → 0.3.1

package/dist/components/BindingsEditor.js

@@ -9,7 +9,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
                 <div id="full-width-col">
                     <div id="signals-area">
                         <div class="row">
-                            <span class="section-label" title="Add signals by name and path. The variable name is used in the formula (__0, __1,... or a custom name).&#010;Access signal objects in properties via ?propertyName, access the propertyValue via ??propertyName.&#010;Access signal objects in properties of the target via #propertyName, access a propertyValue of the target via ##propertyName.&#010;Bind to signal configurations via $objectId.&#010;Bind to special values via §name (if supported by your framework).&#010;You could also use signals inside of a Signal Name via {name}">objects</span>
+                            <span class="section-label" title="Add signals by name and path. The variable name is used in the formula (__0, __1,... or a custom name).&#010;Access signal names in properties via ?propertyName and #propertyName, property values via ??propertyName and ##propertyName, and signal objects stored in properties via ?$propertyName and #$propertyName.&#010;Access screen attributes via ?@attributeName and target attributes via #@attributeName.&#010;Resolve a named signal object via $objectId.&#010;Bind to special values via §name (if supported by your framework).&#010;You could also use signals inside of a Signal Name via {name}">objects</span>
                             <button id="helpBtn" class="info-btn" title="Help"><svg viewBox="0 0 512 512" width="16" height="16"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg></button>
                         </div>
                         <div class="bordered-section">
@@ -58,7 +58,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
                 <input id="namedConverterInput" value="{{?this.convertersString::change}}">
                 <button id="namedConverterBrowse" class="signal-select-btn" @click="[[this._selectNamedConverter()]]">...</button>
             </div>
-            <div class="bordered-section">
+            <div id="converterSection" class="bordered-section">
                 <div class="signal-row signal-header">
                     <span class="converter-header-col">condition</span>
                     <span class="converter-header-col">value</span>
@@ -84,10 +84,15 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
         }
 
         #converterListContainer {
-            max-height: 72px;
             overflow-y: auto;
         }
 
+        #converterSection {
+            display: grid;
+            grid-template-rows: min-content minmax(22px, 1fr) min-content;
+            min-height: 0;
+        }
+
         .input-headline {
             height: 30px;
         }
@@ -105,7 +110,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
         #root {
             padding: 2px 10px;
             display: grid;
-            grid-template-rows: min-content min-content;
+            grid-template-rows: min-content min-content minmax(0, 1fr);
             overflow: auto;
             height: calc(100% - 4px)
         }
@@ -283,6 +288,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
 
         .add-signal-btn {
             align-self: flex-start;
+            justify-self: start;
             margin-top: 4px;
             height: 22px;
             cursor: pointer;
@@ -454,7 +460,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
             signalInput.className = 'signal-path-input';
             signalInput.value = sig.signal;
             signalInput.placeholder = 'signal path';
-            signalInput.title = 'signal path (prefix: ? = signalProperty, ?? = property value, # = target property, ## = target property value)';
+            signalInput.title = 'signal path (prefix: ? = signal name in screen property, ?? = screen property value, ?$ = signal object in screen property, ?@ = screen attribute, # = signal name in target property, ## = target property value, #$ = signal object in target property, #@ = target attribute)';
             signalInput.oninput = () => {
                 this._signals[i].signal = signalInput.value;
                 this._syncSignals();

package/dist/components/BindingsEditorHelp.d.ts

@@ -1 +1 @@
-export declare const bindingsEditorHelpHtml = "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<style>\n:root { --accent: #2c6e9b; }\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\nhtml, body {\n    width: 100%;\n    height: 100%;\n    font-family: Segoe UI, Arial, sans-serif;\n    font-size: 13px;\n    color: #333;\n    background: #f0f1f3;\n}\n\n.content {\n    height: 100%;\n    overflow-y: auto;\n    padding: 10px 14px 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.intro-banner {\n    background: #ffffff;\n    border-left: 4px solid var(--accent);\n    border-radius: 4px;\n    padding: 8px 12px;\n    font-size: 12px;\n    line-height: 1.5;\n}\n\n.intro-banner code {\n    font-family: Consolas, monospace;\n    background: #eef2f6;\n    padding: 1px 4px;\n    border-radius: 3px;\n    color: #2c4a68;\n}\n\n.content-section {\n    background: #ffffff;\n    border-radius: 6px;\n    padding: 8px 10px 10px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.section-title {\n    display: flex;\n    align-items: baseline;\n    gap: 8px;\n    border-bottom: 2px solid var(--accent);\n    font-size: 13px;\n    font-weight: bold;\n    padding-bottom: 4px;\n    color: #24405c;\n}\n\n.section-num {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    border-radius: 50%;\n    background: var(--accent);\n    color: white;\n    font-size: 10px;\n    font-weight: bold;\n    flex-shrink: 0;\n}\n\n.section-hint {\n    font-size: 11px;\n    font-weight: normal;\n    color: #808080;\n}\n\n.snippet {\n    font-family: Consolas, \"Courier New\", monospace;\n    font-size: 11px;\n    background: #f6f8fa;\n    color: #24292e;\n    border: 1px solid #e1e4e8;\n    border-radius: 4px;\n    padding: 6px 10px;\n    white-space: pre;\n    overflow-x: auto;\n    line-height: 1.6;\n}\n\n.ref-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 12px;\n}\n\n.ref-table th {\n    text-align: left;\n    font-weight: 600;\n    color: #24405c;\n    border-bottom: 1px solid #d0d7de;\n    padding: 4px 6px;\n}\n\n.ref-table td {\n    padding: 3px 6px;\n    border-bottom: 1px solid #f0f0f0;\n    vertical-align: top;\n}\n\n.ref-table tr:last-child td { border-bottom: none; }\n\n.ref-table td:first-child {\n    font-family: Consolas, monospace;\n    color: #005cc5;\n    white-space: nowrap;\n    width: 110px;\n}\n\n.note {\n    font-size: 11px;\n    color: #666;\n    font-style: italic;\n}\n\ncode {\n    font-family: Consolas, monospace;\n    background: #eef2f6;\n    padding: 1px 4px;\n    border-radius: 3px;\n    color: #2c4a68;\n    font-size: 11px;\n}\n</style>\n</head>\n<body>\n<div class=\"content\">\n\n    <div class=\"intro-banner\">\n        A <strong>Binding</strong> connects one or more signals to a property of an element.<br>\n        An optional <strong>formula</strong> transforms the signal values before they are applied.\n        A <strong>converter</strong> maps the final value to a display value.\n    </div>\n\n    <div class=\"content-section\">\n        <div class=\"section-title\"><span class=\"section-num\">1</span> Signals (Objects) <span class=\"section-hint\">what data to read</span></div>\n        <div class=\"note\" style=\"margin-bottom:2px;\">Each row adds one signal. The <em>name</em> column sets the variable name used in the formula.</div>\n        <pre class=\"snippet\"><span style=\"color:#6a737d;font-style:italic\">// name column empty \u2192 variable is __0, __1, __2 \u2026 (positional)</span>\n<span style=\"color:#6a737d;font-style:italic\">// name column filled \u2192 variable uses that name in the formula</span>\n\n<span style=\"color:#005cc5\">name</span>: mySpeed   <span style=\"color:#005cc5\">signal</span>: .Drive.Speed   \u2192 accessible as  mySpeed\n<span style=\"color:#005cc5\">name</span>: (empty)   <span style=\"color:#005cc5\">signal</span>: .Drive.Active  \u2192 accessible as  __1  (second row)</pre>\n        <div class=\"note\">Multiple signals let you combine values in a formula, e.g. <code>__0 &gt; 0 &amp;&amp; __1</code>.</div>\n    </div>\n\n    <div class=\"content-section\">\n        <div class=\"section-title\"><span class=\"section-num\">2</span> Signal path prefixes &amp; special paths <span class=\"section-hint\">special access modes</span></div>\n        <table class=\"ref-table\">\n            <tr><th>Prefix / Pattern</th><th>What it accesses</th></tr>\n            <tr><td>(none)</td><td>The signal's current value directly</td></tr>\n            <tr><td>__name</td><td>Internal screen variable \u2014 local to the current screen, not connected to any external data source. Initial value is <code>null</code>. Useful for screen-local state like tab selection or panel visibility.</td></tr>\n            <tr><td>?name</td><td>A signal in a screen property</td></tr>\n            <tr><td>??name</td><td>The current value of a screen property</td></tr>\n            <tr><td>#name</td><td>A signal in a property of the bound target element</td></tr>\n            <tr><td>##name</td><td>The current value of a property of the bound target element</td></tr>\n            <tr><td>$objectId</td><td>The entire signal object</td></tr>\n            <tr><td>\u00A7name</td><td>A special framework-provided value (if supported)</td></tr>\n            <tr><td>{name}</td><td>Dynamic signal path: embed another signal's value inside the path, e.g. <code>.Plant.{.ActiveLine}.Speed</code></td></tr>\n        </table>\n    </div>\n\n    <div class=\"content-section\">\n        <div class=\"section-title\"><span class=\"section-num\">3</span> Formula <span class=\"section-hint\">transform signal values with JavaScript</span></div>\n        <div class=\"note\" style=\"margin-bottom:2px;\">Leave the formula empty to pass the first signal's value through unchanged.</div>\n        <pre class=\"snippet\"><span style=\"color:#6a737d;font-style:italic\">// Access signal values by position or by name:</span>\n__0 * 100               <span style=\"color:#6a737d;font-style:italic\">// first signal \u00D7 100</span>\n__0 &gt; 0 &amp;&amp; __1          <span style=\"color:#6a737d;font-style:italic\">// combine two signals</span>\nspeed &gt; limit           <span style=\"color:#6a737d;font-style:italic\">// named variables</span>\n\n<span style=\"color:#6a737d;font-style:italic\">// Special variables available in the formula:</span>\n__ctx                   <span style=\"color:#6a737d;font-style:italic\">// the full binding context object</span>\n__res                   <span style=\"color:#6a737d;font-style:italic\">// the result of the previous evaluation</span></pre>\n        <div class=\"note\">The formula must be a single JavaScript expression that returns a value (no <code>return</code> statement needed).</div>\n    </div>\n\n    <div class=\"content-section\">\n        <div class=\"section-title\"><span class=\"section-num\">4</span> Write Back &amp; Two-Way <span class=\"section-hint\">send values back to signals</span></div>\n        <pre class=\"snippet\"><span style=\"color:#6a737d;font-style:italic\">// Write back signal</span>\n<span style=\"color:#6a737d;font-style:italic\">// \u2192 writes the formula result back to a signal whenever</span>\n<span style=\"color:#6a737d;font-style:italic\">//   the element property changes (useful for derived values)</span>\n\n<span style=\"color:#6a737d;font-style:italic\">// Two-Way binding</span>\n<span style=\"color:#6a737d;font-style:italic\">// \u2192 also sets the signal when the element fires a DOM event</span>\n<span style=\"color:#6a737d;font-style:italic\">//   (e.g. \"change\" for inputs). Enable \"events\" to configure</span>\n<span style=\"color:#6a737d;font-style:italic\">//   which events trigger the write-back.</span>\n<span style=\"color:#6a737d;font-style:italic\">// \u2192 \"formula write back\" applies a reverse transformation</span>\n<span style=\"color:#6a737d;font-style:italic\">//   before writing (useful when the formula changes the scale)</span></pre>\n        <div class=\"note\">Two-Way is only available for <em>property</em> and <em>attribute</em> targets. Separate multiple event names with a semicolon.</div>\n    </div>\n\n    <div class=\"content-section\">\n        <div class=\"section-title\"><span class=\"section-num\">5</span> Converter <span class=\"section-hint\">map values to display values</span></div>\n        <div class=\"note\" style=\"margin-bottom:4px;\">Use the table to map specific conditions to output values. The <em>condition</em> column supports several matching modes:</div>\n        <table class=\"ref-table\">\n            <tr><th>Condition key</th><th>Matches when \u2026</th></tr>\n            <tr><td>true / false</td><td>Signal value equals the boolean</td></tr>\n            <tr><td>42</td><td>Signal value equals the number exactly</td></tr>\n            <tr><td>running</td><td>Signal value equals the string \"running\"</td></tr>\n            <tr><td>&gt;10</td><td>Signal value is greater than 10</td></tr>\n            <tr><td>&gt;=5</td><td>Signal value is \u2265 5</td></tr>\n            <tr><td>&lt;3</td><td>Signal value is &lt; 3</td></tr>\n            <tr><td>10-20</td><td>Signal value is in the range 10 \u2026 20 (inclusive)</td></tr>\n            <tr><td>default</td><td>Fallback when no other key matches</td></tr>\n        </table>\n        <div class=\"note\" style=\"margin-top:4px;\">The value column supports template literals \u2014 use <code>${value}</code> to embed the original signal value in the output string.</div>\n        <div class=\"note\" style=\"margin-top:4px;\"><strong>Named converter:</strong> enter a converter name in the <em>converter</em> field above the table to use a pre-registered converter instead of the inline table.</div>\n    </div>\n\n</div>\n</body>\n</html>";
+export declare const bindingsEditorHelpHtml = "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<style>\n:root { --accent: #2c6e9b; }\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\nhtml, body {\n    width: 100%;\n    height: 100%;\n    font-family: Segoe UI, Arial, sans-serif;\n    font-size: 13px;\n    color: #333;\n    background: #f0f1f3;\n}\n\n.content {\n    height: 100%;\n    overflow-y: auto;\n    padding: 10px 14px 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.intro-banner {\n    background: #ffffff;\n    border-left: 4px solid var(--accent);\n    border-radius: 4px;\n    padding: 8px 12px;\n    font-size: 12px;\n    line-height: 1.5;\n}\n\n.intro-banner code {\n    font-family: Consolas, monospace;\n    background: #eef2f6;\n    padding: 1px 4px;\n    border-radius: 3px;\n    color: #2c4a68;\n}\n\n.content-section {\n    background: #ffffff;\n    border-radius: 6px;\n    padding: 8px 10px 10px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.section-title {\n    display: flex;\n    align-items: baseline;\n    gap: 8px;\n    border-bottom: 2px solid var(--accent);\n    font-size: 13px;\n    font-weight: bold;\n    padding-bottom: 4px;\n    color: #24405c;\n}\n\n.section-num {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    border-radius: 50%;\n    background: var(--accent);\n    color: white;\n    font-size: 10px;\n    font-weight: bold;\n    flex-shrink: 0;\n}\n\n.section-hint {\n    font-size: 11px;\n    font-weight: normal;\n    color: #808080;\n}\n\n.snippet {\n    font-family: Consolas, \"Courier New\", monospace;\n    font-size: 11px;\n    background: #f6f8fa;\n    color: #24292e;\n    border: 1px solid #e1e4e8;\n    border-radius: 4px;\n    padding: 6px 10px;\n    white-space: pre;\n    overflow-x: auto;\n    line-height: 1.6;\n}\n\n.ref-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 12px;\n}\n\n.ref-table th {\n    text-align: left;\n    font-weight: 600;\n    color: #24405c;\n    border-bottom: 1px solid #d0d7de;\n    padding: 4px 6px;\n}\n\n.ref-table td {\n    padding: 3px 6px;\n    border-bottom: 1px solid #f0f0f0;\n    vertical-align: top;\n}\n\n.ref-table tr:last-child td { border-bottom: none; }\n\n.ref-table td:first-child {\n    font-family: Consolas, monospace;\n    color: #005cc5;\n    white-space: nowrap;\n    width: 110px;\n}\n\n.note {\n    font-size: 11px;\n    color: #666;\n    font-style: italic;\n}\n\ncode {\n    font-family: Consolas, monospace;\n    background: #eef2f6;\n    padding: 1px 4px;\n    border-radius: 3px;\n    color: #2c4a68;\n    font-size: 11px;\n}\n</style>\n</head>\n<body>\n<div class=\"content\">\n\n    <div class=\"intro-banner\">\n        A <strong>Binding</strong> connects one or more signals to a property of an element.<br>\n        An optional <strong>formula</strong> transforms the signal values before they are applied.\n        A <strong>converter</strong> maps the final value to a display value.\n    </div>\n\n    <div class=\"content-section\">\n        <div class=\"section-title\"><span class=\"section-num\">1</span> Signals (Objects) <span class=\"section-hint\">what data to read</span></div>\n        <div class=\"note\" style=\"margin-bottom:2px;\">Each row adds one signal. The <em>name</em> column sets the variable name used in the formula.</div>\n        <pre class=\"snippet\"><span style=\"color:#6a737d;font-style:italic\">// name column empty \u2192 variable is __0, __1, __2 \u2026 (positional)</span>\n<span style=\"color:#6a737d;font-style:italic\">// name column filled \u2192 variable uses that name in the formula</span>\n\n<span style=\"color:#005cc5\">name</span>: mySpeed   <span style=\"color:#005cc5\">signal</span>: .Drive.Speed   \u2192 accessible as  mySpeed\n<span style=\"color:#005cc5\">name</span>: (empty)   <span style=\"color:#005cc5\">signal</span>: .Drive.Active  \u2192 accessible as  __1  (second row)</pre>\n        <div class=\"note\">Multiple signals let you combine values in a formula, e.g. <code>__0 &gt; 0 &amp;&amp; __1</code>.</div>\n    </div>\n\n    <div class=\"content-section\">\n        <div class=\"section-title\"><span class=\"section-num\">2</span> Signal path prefixes &amp; special paths <span class=\"section-hint\">special access modes</span></div>\n        <table class=\"ref-table\">\n            <tr><th>Prefix / Pattern</th><th>What it accesses</th></tr>\n            <tr><td>(none)</td><td>The signal's current value directly</td></tr>\n            <tr><td>__name</td><td>Internal screen variable \u2014 local to the current screen, not connected to any external data source. Initial value is <code>null</code>. Useful for screen-local state like tab selection or panel visibility.</td></tr>\n            <tr><td>?name</td><td>A signal in a screen property</td></tr>\n            <tr><td>??name</td><td>The current value of a screen property</td></tr>\n            <tr><td>?$name</td><td>The signal object stored in a screen property</td></tr>\n            <tr><td>?@name</td><td>The current value of a screen attribute</td></tr>\n            <tr><td>#name</td><td>A signal in a property of the bound target element</td></tr>\n            <tr><td>##name</td><td>The current value of a property of the bound target element</td></tr>\n            <tr><td>#$name</td><td>The signal object stored in a property of the bound target element</td></tr>\n            <tr><td>#@name</td><td>The current value of an attribute of the bound target element</td></tr>\n            <tr><td>$objectId</td><td>The entire signal object</td></tr>\n            <tr><td>\u00A7name</td><td>A special framework-provided value (if supported)</td></tr>\n            <tr><td>{name}</td><td>Dynamic signal path: embed another signal's value inside the path, e.g. <code>.Plant.{.ActiveLine}.Speed</code></td></tr>\n        </table>\n    </div>\n\n    <div class=\"content-section\">\n        <div class=\"section-title\"><span class=\"section-num\">3</span> Formula <span class=\"section-hint\">transform signal values with JavaScript</span></div>\n        <div class=\"note\" style=\"margin-bottom:2px;\">Leave the formula empty to pass the first signal's value through unchanged.</div>\n        <pre class=\"snippet\"><span style=\"color:#6a737d;font-style:italic\">// Access signal values by position or by name:</span>\n__0 * 100               <span style=\"color:#6a737d;font-style:italic\">// first signal \u00D7 100</span>\n__0 &gt; 0 &amp;&amp; __1          <span style=\"color:#6a737d;font-style:italic\">// combine two signals</span>\nspeed &gt; limit           <span style=\"color:#6a737d;font-style:italic\">// named variables</span>\n\n<span style=\"color:#6a737d;font-style:italic\">// Special variables available in the formula:</span>\n__ctx                   <span style=\"color:#6a737d;font-style:italic\">// the full binding context object</span>\n__res                   <span style=\"color:#6a737d;font-style:italic\">// the result of the previous evaluation</span></pre>\n        <div class=\"note\">The formula must be a single JavaScript expression that returns a value (no <code>return</code> statement needed).</div>\n    </div>\n\n    <div class=\"content-section\">\n        <div class=\"section-title\"><span class=\"section-num\">4</span> Write Back &amp; Two-Way <span class=\"section-hint\">send values back to signals</span></div>\n        <pre class=\"snippet\"><span style=\"color:#6a737d;font-style:italic\">// Write back signal</span>\n<span style=\"color:#6a737d;font-style:italic\">// \u2192 writes the formula result back to a signal whenever</span>\n<span style=\"color:#6a737d;font-style:italic\">//   the element property changes (useful for derived values)</span>\n\n<span style=\"color:#6a737d;font-style:italic\">// Two-Way binding</span>\n<span style=\"color:#6a737d;font-style:italic\">// \u2192 also sets the signal when the element fires a DOM event</span>\n<span style=\"color:#6a737d;font-style:italic\">//   (e.g. \"change\" for inputs). Enable \"events\" to configure</span>\n<span style=\"color:#6a737d;font-style:italic\">//   which events trigger the write-back.</span>\n<span style=\"color:#6a737d;font-style:italic\">// \u2192 \"formula write back\" applies a reverse transformation</span>\n<span style=\"color:#6a737d;font-style:italic\">//   before writing (useful when the formula changes the scale)</span></pre>\n        <div class=\"note\">Two-Way is only available for <em>property</em> and <em>attribute</em> targets. Separate multiple event names with a semicolon.</div>\n    </div>\n\n    <div class=\"content-section\">\n        <div class=\"section-title\"><span class=\"section-num\">5</span> Converter <span class=\"section-hint\">map values to display values</span></div>\n        <div class=\"note\" style=\"margin-bottom:4px;\">Use the table to map specific conditions to output values. The <em>condition</em> column supports several matching modes:</div>\n        <table class=\"ref-table\">\n            <tr><th>Condition key</th><th>Matches when \u2026</th></tr>\n            <tr><td>true / false</td><td>Signal value equals the boolean</td></tr>\n            <tr><td>42</td><td>Signal value equals the number exactly</td></tr>\n            <tr><td>running</td><td>Signal value equals the string \"running\"</td></tr>\n            <tr><td>&gt;10</td><td>Signal value is greater than 10</td></tr>\n            <tr><td>&gt;=5</td><td>Signal value is \u2265 5</td></tr>\n            <tr><td>&lt;3</td><td>Signal value is &lt; 3</td></tr>\n            <tr><td>10-20</td><td>Signal value is in the range 10 \u2026 20 (inclusive)</td></tr>\n            <tr><td>default</td><td>Fallback when no other key matches</td></tr>\n        </table>\n        <div class=\"note\" style=\"margin-top:4px;\">The value column supports template literals \u2014 use <code>${value}</code> to embed the original signal value in the output string.</div>\n        <div class=\"note\" style=\"margin-top:4px;\"><strong>Named converter:</strong> enter a converter name in the <em>converter</em> field above the table to use a pre-registered converter instead of the inline table.</div>\n    </div>\n\n</div>\n</body>\n</html>";

package/dist/components/BindingsEditorHelp.js

@@ -168,8 +168,12 @@ code {
             <tr><td>__name</td><td>Internal screen variable — local to the current screen, not connected to any external data source. Initial value is <code>null</code>. Useful for screen-local state like tab selection or panel visibility.</td></tr>
             <tr><td>?name</td><td>A signal in a screen property</td></tr>
             <tr><td>??name</td><td>The current value of a screen property</td></tr>
+            <tr><td>?$name</td><td>The signal object stored in a screen property</td></tr>
+            <tr><td>?@name</td><td>The current value of a screen attribute</td></tr>
             <tr><td>#name</td><td>A signal in a property of the bound target element</td></tr>
             <tr><td>##name</td><td>The current value of a property of the bound target element</td></tr>
+            <tr><td>#$name</td><td>The signal object stored in a property of the bound target element</td></tr>
+            <tr><td>#@name</td><td>The current value of an attribute of the bound target element</td></tr>
             <tr><td>$objectId</td><td>The entire signal object</td></tr>
             <tr><td>§name</td><td>A special framework-provided value (if supported)</td></tr>
             <tr><td>{name}</td><td>Dynamic signal path: embed another signal's value inside the path, e.g. <code>.Plant.{.ActiveLine}.Speed</code></td></tr>

package/dist/components/ClassBindingsPropertiesService.d.ts

@@ -0,0 +1,23 @@
+import { BindingTarget } from '@node-projects/web-component-designer/dist/elements/item/BindingTarget.js';
+import { IBinding } from '@node-projects/web-component-designer/dist/elements/item/IBinding.js';
+import { IDesignItem } from '@node-projects/web-component-designer/dist/elements/item/IDesignItem.js';
+import { RefreshMode } from '@node-projects/web-component-designer/dist/elements/services/propertiesService/IPropertiesService.js';
+import { IProperty } from '@node-projects/web-component-designer/dist/elements/services/propertiesService/IProperty.js';
+import { ValueType } from '@node-projects/web-component-designer/dist/elements/services/propertiesService/ValueType.js';
+import { AbstractPropertiesService } from '@node-projects/web-component-designer/dist/elements/services/propertiesService/services/AbstractPropertiesService.js';
+/** Adapter for host binding editors: a class token is a boolean binding target. */
+export declare class ClassBindingsPropertiesService extends AbstractPropertiesService {
+    getRefreshMode(): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getBindings(designItem: IDesignItem): IBinding[];
+    getProperties(designItem: IDesignItem): Promise<IProperty[]>;
+    getProperty(designItem: IDesignItem, name: string): Promise<IProperty>;
+    createProperty(name: string): IProperty;
+    getPropertyTarget(): BindingTarget;
+    getBinding(items: IDesignItem[], property: IProperty): IBinding;
+    isSet(items: IDesignItem[], property: IProperty): ValueType.none | ValueType.bound;
+    getValue(items: IDesignItem[], property: IProperty): string;
+    validateName(designItem: IDesignItem, name: string, previousName?: string): string;
+    rename(designItem: IDesignItem, binding: IBinding, name: string): void;
+    remove(designItem: IDesignItem, binding: IBinding): void;
+}

package/dist/components/ClassBindingsPropertiesService.js

@@ -0,0 +1,73 @@
+import { BindingTarget } from '@node-projects/web-component-designer/dist/elements/item/BindingTarget.js';
+import { RefreshMode } from '@node-projects/web-component-designer/dist/elements/services/propertiesService/IPropertiesService.js';
+import { PropertyType } from '@node-projects/web-component-designer/dist/elements/services/propertiesService/PropertyType.js';
+import { ValueType } from '@node-projects/web-component-designer/dist/elements/services/propertiesService/ValueType.js';
+import { AbstractPropertiesService } from '@node-projects/web-component-designer/dist/elements/services/propertiesService/services/AbstractPropertiesService.js';
+/** Adapter for host binding editors: a class token is a boolean binding target. */
+export class ClassBindingsPropertiesService extends AbstractPropertiesService {
+    getRefreshMode() { return RefreshMode.fullOnValueChange; }
+    isHandledElement(designItem) { return !designItem.isRootItem; }
+    getBindings(designItem) {
+        return designItem.serviceContainer.getServices('bindingService')
+            .flatMap(service => (service.getBindings(designItem) ?? [])
+            .filter(binding => binding.target === BindingTarget.class)
+            .map(binding => ({ ...binding, service })));
+    }
+    async getProperties(designItem) {
+        return this.getBindings(designItem).map(binding => this.createProperty(binding.targetName));
+    }
+    async getProperty(designItem, name) {
+        return this.createProperty(name);
+    }
+    createProperty(name) {
+        return { name, type: 'boolean', propertyType: PropertyType.property, service: this };
+    }
+    getPropertyTarget() { return BindingTarget.class; }
+    getBinding(items, property) {
+        return this.getBindings(items[0]).find(binding => binding.targetName === property.name);
+    }
+    isSet(items, property) {
+        return this.getBinding(items, property) ? ValueType.bound : ValueType.none;
+    }
+    getValue(items, property) {
+        return this.getBinding(items, property)?.expression;
+    }
+    validateName(designItem, name, previousName) {
+        if (!name || /[\s"'<>/=]/.test(name) || name !== name.toLowerCase())
+            return 'Use a lowercase class name without spaces or HTML attribute delimiters, e.g. is-active.';
+        if (name !== previousName && this.getBindings(designItem).some(binding => binding.targetName === name))
+            return 'This class already has a binding.';
+        return null;
+    }
+    rename(designItem, binding, name) {
+        const error = this.validateName(designItem, name, binding.targetName);
+        if (error)
+            throw new Error(error);
+        if (name === binding.targetName)
+            return;
+        const group = designItem.openGroup(`rename class binding: ${binding.targetName} to ${name}`);
+        try {
+            if (!binding.service.setBinding(designItem, { ...binding, targetName: name }))
+                throw new Error('The binding service could not rename this binding.');
+            if (!binding.service.clearBinding(designItem, binding.targetName, BindingTarget.class))
+                throw new Error('The binding service could not remove the previous binding.');
+            group.commit();
+        }
+        catch (error) {
+            group.abort();
+            throw error;
+        }
+    }
+    remove(designItem, binding) {
+        const group = designItem.openGroup(`remove class binding: ${binding.targetName}`);
+        try {
+            if (!binding.service.clearBinding(designItem, binding.targetName, BindingTarget.class))
+                throw new Error('The binding service could not remove this binding.');
+            group.commit();
+        }
+        catch (error) {
+            group.abort();
+            throw error;
+        }
+    }
+}

package/dist/components/ClassBindingsPropertyGridExtensionProvider.d.ts

@@ -0,0 +1,5 @@
+import type { IProperty, IPropertyGridExtensionProvider, IPropertyGridExtension } from '@node-projects/web-component-designer';
+/** Register in serviceContainer.propertyGridExtensions to enable visualization class bindings. */
+export declare class ClassBindingsPropertyGridExtensionProvider implements IPropertyGridExtensionProvider {
+    createExtension(property: IProperty): IPropertyGridExtension | undefined;
+}

package/dist/components/ClassBindingsPropertyGridExtensionProvider.js

@@ -0,0 +1,15 @@
+import { PropertyType } from '@node-projects/web-component-designer/dist/elements/services/propertiesService/PropertyType.js';
+import { PropertyGridClassBindings } from './PropertyGridClassBindings.js';
+/** Register in serviceContainer.propertyGridExtensions to enable visualization class bindings. */
+export class ClassBindingsPropertyGridExtensionProvider {
+    createExtension(property) {
+        if ((property.name !== 'class' && property.name !== 'className') || property.propertyType === PropertyType.cssValue)
+            return undefined;
+        const element = new PropertyGridClassBindings();
+        return {
+            element,
+            refresh: items => element.refresh(items),
+            getContextMenuItems: items => [{ title: 'Add class binding…', disabled: items?.length !== 1 || !items[0].serviceContainer.config.openBindingsEditor, action: () => element.addBinding() }]
+        };
+    }
+}

package/dist/components/EventAssignment.d.ts

@@ -34,6 +34,7 @@ export declare class EventAssignment extends BaseCustomWebComponentConstructorAp
     })[];
     initialize(visualizationHandler: VisualizationHandler, visualizationShell: VisualizationShell, scriptCommandsTypeInfo: any, propertiesTypeInfo: any, blocklyToolbox: any, commandDescriptions?: Record<string, ScriptCommandHelp>): void;
     set instanceServiceContainer(value: InstanceServiceContainer);
+    dispose(): void;
     protected _createControlsForScript(eventItem: eventWithDesignItem): any;
     protected _getScriptName(eventItem: IEvent): any;
     protected _changeScriptName(e: KeyboardEvent, eventItem: IEvent): Promise<void>;

package/dist/components/EventAssignment.js

@@ -88,10 +88,13 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
     set instanceServiceContainer(value) {
         this._instanceServiceContainer = value;
         this._selectionChangedHandler?.dispose();
-        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
+        this._selectionChangedHandler = this._instanceServiceContainer?.selectionService.onSelectionChanged.on(e => {
             this.selectedItems = e.selectedElements;
         });
-        this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements;
+        this.selectedItems = this._instanceServiceContainer?.selectionService.selectedElements ?? [];
+    }
+    dispose() {
+        this.instanceServiceContainer = null;
     }
     _createControlsForScript(eventItem) {
         const st = this._getScriptType(eventItem);

package/dist/components/PropertyGridClassBindings.d.ts

@@ -0,0 +1,17 @@
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { IDesignItem } from '@node-projects/web-component-designer/dist/elements/item/IDesignItem.js';
+export declare class PropertyGridClassBindings extends BaseCustomWebComponentLazyAppend {
+    private _items;
+    private _service;
+    private _rows;
+    private _add;
+    private _toggle;
+    private _signature;
+    private _editing;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    refresh(items: IDesignItem[]): void;
+    addBinding(): void;
+    private editBinding;
+    private showNameDialog;
+}

package/dist/components/PropertyGridClassBindings.js

@@ -0,0 +1,231 @@
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { BindingTarget } from '@node-projects/web-component-designer/dist/elements/item/BindingTarget.js';
+import { ContextMenu } from '@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js';
+import { ClassBindingsPropertiesService } from './ClassBindingsPropertiesService.js';
+export class PropertyGridClassBindings extends BaseCustomWebComponentLazyAppend {
+    _items = [];
+    _service = new ClassBindingsPropertiesService();
+    _rows;
+    _add;
+    _toggle;
+    _signature;
+    _editing = false;
+    static style = css `
+    :host { display: block; grid-column: 1 / -1; min-width: 0; color: var(--wcd-color-text, white); }
+    :host([hidden]) { display: none !important; }
+    .header, .row { display: flex; align-items: center; gap: 8px; min-height: 28px; }
+    .row { padding-left: 16px; }
+    button { font: inherit; color: inherit; background: transparent; border: none; cursor: pointer; padding: 4px; }
+    button:focus-visible { outline: 2px solid var(--wcd-color-accent, #e91e63); outline-offset: -2px; }
+    button:disabled { opacity: .5; cursor: default; }
+    .toggle, .name { text-align: left; }
+    .toggle { flex: 1; }
+    .name { flex: 0 1 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wcd-color-text-muted, #bdbdbd); }
+    .message { padding: 4px 16px; font-size: 12px; color: var(--wcd-color-text-muted, #bdbdbd); }
+    dialog { box-sizing: border-box; width: min(420px, calc(100vw - 32px)); color: inherit; background: var(--wcd-property-grid-background, var(--wcd-color-surface-raised, #2f3545)); border: 1px solid var(--wcd-color-border, #596c7a); padding: 16px; }
+    dialog::backdrop { background: #0006; }
+    form, label { display: grid; gap: 8px; }
+    form { gap: 16px; }
+    h3 { font: inherit; font-weight: 600; margin: 0; }
+    input { box-sizing: border-box; width: 100%; padding: 6px; font: inherit; color: inherit; background: transparent; border: 1px solid var(--wcd-color-border, #596c7a); }
+    .help { font-size: 12px; color: var(--wcd-color-text-muted, #bdbdbd); }
+    .error { color: var(--wcd-color-error, #ff8a80); font-size: 12px; }
+    .actions { display: flex; justify-content: flex-end; gap: 8px; }
+    .actions button { border: 1px solid var(--wcd-color-border, #596c7a); padding: 6px 12px; }
+    [hidden] { display: none !important; }
+    :host([appearance="modern"]) { color: var(--_wcd-pg-text); font-size: 13px; }
+    :host([appearance="modern"]) .header {
+      padding: 5px 12px;
+      min-height: 38px;
+      background: var(--_wcd-pg-raised);
+      border-bottom: 1px solid var(--_wcd-pg-border);
+    }
+    :host([appearance="modern"]) .toggle { font-weight: 600; }
+    :host([appearance="modern"]) .row {
+      display: grid;
+      grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) 28px;
+      padding: 5px 12px 5px 24px;
+      min-height: 38px;
+      border-bottom: 1px solid var(--_wcd-pg-border);
+    }
+    :host([appearance="modern"]) .row:hover,
+    :host([appearance="modern"]) .row:focus-within { background: var(--_wcd-pg-hover); }
+    :host([appearance="modern"]) .summary { color: var(--_wcd-pg-muted); }
+    :host([appearance="modern"]) button { border-radius: 4px; }
+    :host([appearance="modern"]) button:hover { background: var(--_wcd-pg-hover); }
+    :host([appearance="modern"]) button:focus-visible { outline-color: var(--wcd-color-focus, var(--_wcd-pg-accent)); }
+    :host([appearance="modern"]) dialog {
+      padding: 24px;
+      border-radius: 10px;
+      color: var(--_wcd-pg-text);
+      background: var(--_wcd-pg-surface);
+      border-color: var(--_wcd-pg-border);
+      box-shadow: 0 16px 64px #0003;
+    }
+    :host([appearance="modern"]) h3 { font-size: 16px; }
+    :host([appearance="modern"]) input { border-radius: 5px; border-color: var(--_wcd-pg-border); padding: 8px; }
+    :host([appearance="modern"]) input:focus-visible { outline: 2px solid var(--wcd-color-focus, var(--_wcd-pg-accent)); outline-offset: 1px; }
+    :host([appearance="modern"]) .help { color: var(--_wcd-pg-muted); }
+    :host([appearance="modern"]) .actions button { border-color: var(--_wcd-pg-border); }
+    :host([appearance="modern"]) .actions button[type="submit"] {
+      background: var(--_wcd-pg-accent);
+      color: var(--wcd-color-accent-text, light-dark(white, #162b48));
+      border-color: transparent;
+    }
+  `;
+    constructor() {
+        super();
+        const header = document.createElement('div');
+        header.className = 'header';
+        this._toggle = document.createElement('button');
+        this._toggle.type = 'button';
+        this._toggle.className = 'toggle';
+        this._toggle.textContent = '▾ Class bindings';
+        this._toggle.setAttribute('aria-expanded', 'true');
+        this._toggle.onclick = () => {
+            this._rows.hidden = !this._rows.hidden;
+            this._toggle.textContent = (this._rows.hidden ? '▸' : '▾') + ' Class bindings';
+            this._toggle.setAttribute('aria-expanded', String(!this._rows.hidden));
+        };
+        this._add = document.createElement('button');
+        this._add.type = 'button';
+        this._add.textContent = '+';
+        this._add.title = 'Add class binding…';
+        this._add.setAttribute('aria-label', 'Add class binding');
+        this._add.onclick = () => this.addBinding();
+        header.append(this._toggle, this._add);
+        this._rows = document.createElement('div');
+        this.shadowRoot.append(header, this._rows);
+    }
+    refresh(items) {
+        const selectionChanged = this._items[0] !== items?.[0] || this._items.length !== items?.length;
+        if (selectionChanged)
+            this.shadowRoot.querySelector('dialog')?.close();
+        this._items = items ?? [];
+        const item = this._items.length === 1 ? this._items[0] : null;
+        const bindings = item ? this._service.getBindings(item) : [];
+        this._add.disabled = !item || !item.serviceContainer.config.openBindingsEditor;
+        const signature = JSON.stringify(bindings.map(({ service, ...binding }) => binding));
+        if (!selectionChanged && signature === this._signature)
+            return;
+        this._signature = signature;
+        this._rows.replaceChildren();
+        if (!item) {
+            const message = document.createElement('div');
+            message.className = 'message';
+            message.textContent = 'Select one element to edit class bindings.';
+            this._rows.appendChild(message);
+            return;
+        }
+        for (const binding of bindings) {
+            const row = document.createElement('div');
+            row.className = 'row';
+            const name = document.createElement('button');
+            name.type = 'button';
+            name.className = 'name';
+            name.textContent = binding.targetName;
+            name.title = `Edit class binding: ${binding.targetName}`;
+            name.onclick = () => this.editBinding(item, binding);
+            const summary = document.createElement('span');
+            summary.className = 'summary';
+            summary.textContent = '← ' + (binding.expression || binding.bindableObjectNames?.join(';') || binding.rawValue || 'binding');
+            summary.title = summary.textContent;
+            summary.ondblclick = () => this.editBinding(item, binding);
+            const menu = document.createElement('button');
+            menu.type = 'button';
+            menu.textContent = '⋯';
+            menu.setAttribute('aria-label', `Actions for class binding ${binding.targetName}`);
+            const openMenu = (event) => {
+                event.preventDefault();
+                ContextMenu.show([
+                    { title: 'Edit binding…', action: () => this.editBinding(item, binding) },
+                    { title: 'Rename class…', action: () => this.showNameDialog(item, binding) },
+                    { title: 'Remove binding', action: () => { this._service.remove(item, binding); this.refresh(this._items); } }
+                ], event);
+            };
+            menu.onclick = openMenu;
+            row.oncontextmenu = openMenu;
+            row.append(name, summary, menu);
+            this._rows.appendChild(row);
+        }
+    }
+    addBinding() {
+        if (!this._add.disabled)
+            this.showNameDialog(this._items[0]);
+    }
+    async editBinding(item, binding, name = binding?.targetName) {
+        if (this._editing)
+            return;
+        const editor = item.serviceContainer.config.openBindingsEditor;
+        if (editor) {
+            this._editing = true;
+            try {
+                await editor(this._service.createProperty(name), [item], binding, BindingTarget.class);
+                this.refresh(this._items);
+            }
+            finally {
+                this._editing = false;
+            }
+        }
+    }
+    showNameDialog(item, binding, name = binding?.targetName ?? '') {
+        if (this.shadowRoot.querySelector('dialog'))
+            return;
+        const dialog = document.createElement('dialog');
+        const form = document.createElement('form');
+        const title = document.createElement('h3');
+        title.textContent = binding ? 'Rename class' : 'Add class binding';
+        const nameLabel = document.createElement('label');
+        nameLabel.textContent = 'Class name';
+        const input = document.createElement('input');
+        input.value = name;
+        input.required = true;
+        const help = document.createElement('span');
+        help.className = 'help';
+        help.textContent = 'Use lowercase names, e.g. is-active.';
+        nameLabel.append(input, help);
+        const error = document.createElement('div');
+        error.className = 'error';
+        error.setAttribute('role', 'alert');
+        error.hidden = true;
+        const actions = document.createElement('div');
+        actions.className = 'actions';
+        const cancel = document.createElement('button');
+        cancel.type = 'button';
+        cancel.textContent = 'Cancel';
+        cancel.onclick = () => dialog.close();
+        const save = document.createElement('button');
+        save.type = 'submit';
+        save.textContent = binding ? 'Save' : 'Next…';
+        actions.append(cancel, save);
+        form.append(title, nameLabel);
+        form.append(error, actions);
+        dialog.appendChild(form);
+        this.shadowRoot.appendChild(dialog);
+        dialog.onclose = () => dialog.remove();
+        form.onsubmit = async (event) => {
+            event.preventDefault();
+            const newName = input.value.trim();
+            const validation = this._service.validateName(item, newName, binding?.targetName);
+            try {
+                if (validation)
+                    throw new Error(validation);
+                if (binding) {
+                    this._service.rename(item, binding, newName);
+                }
+                dialog.close();
+                if (!binding)
+                    await this.editBinding(item, undefined, newName);
+                this.refresh(this._items);
+            }
+            catch (exception) {
+                error.textContent = exception.message;
+                error.hidden = false;
+            }
+        };
+        dialog.showModal();
+        input.focus();
+    }
+}
+customElements.define('node-projects-property-grid-class-bindings', PropertyGridClassBindings);

package/dist/helpers/BindingsHelper.d.ts

@@ -1,5 +1,5 @@
 import { VisualizationBinding } from "../interfaces/VisualizationBinding.js";
-import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
+import { State, VisualizationHandler } from "../interfaces/VisualizationHandler.js";
 import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
 export type SpecialValueHandler = {
     valueProvider: (propertyName: string, context: {
@@ -22,6 +22,8 @@ export declare const bindingPrefixInsideCss = "bind(";
 export declare const bindingPrefixInsideCssVarName = "--tmpBinding_";
 export declare const bindingsInCssRegex: RegExp;
 export type namedBinding = [name: string, binding: VisualizationBinding];
+type Cleanup = () => void;
+type StateChangeCallback = (id: string, value: State) => void;
 export declare function isLit(element: Element): boolean;
 export declare function parseBindingString(id: string): {
     parts: string[];
@@ -32,30 +34,40 @@ export declare class BindingsHelper {
     #private;
     _visualizationHandler: VisualizationHandler;
     namedConverterCallback: (converter: string, value: any, element: Element, binding: namedBinding) => any;
+    private _stateSubscriptions;
+    private _scheduledUpdates;
+    private _updateFlushScheduled;
+    private _compiledConverters;
     constructor(visualizationHandler: VisualizationHandler);
+    private scheduleUpdate;
     getChangedEventName(element: Element, propertyName: string): string;
+    private getParsedTargetName;
     parseBinding(element: Element, name: string, value: string, bindingTarget: BindingTarget, prefix: string): namedBinding;
     serializeBinding(element: Element, targetName: string, binding: VisualizationBinding): [name: string, value: string];
+    private getShortBindingAttributeName;
+    private getJsonBindingAttributeName;
     getBindingAttributeName(element: Element, propertyName: string, propertyTarget: BindingTarget): string;
     getBindings(element: Element): Generator<namedBinding, void, unknown>;
     applyAllBindings(rootElement: ParentNode, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler, skipChildrenFor?: (element: Element) => boolean): (() => void)[];
     parseCssBindings(sheet: string, element: Element, relativeSignalPath: string, root: HTMLElement): Promise<[stylesheet: CSSStyleSheet, unsub: (() => void)[]]>;
     parseCssBinding(value: string, element: Element, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler): [name: string, unsub: (() => void)[]];
+    /** @internal Shared fan-out avoids duplicate backend subscriptions and initial reads. */
+    subscribeToState(id: string, callback: StateChangeCallback): Cleanup;
     /**
-     * ? = bind to signals in properties
-     * ?? = binding to a property
-     * $ = bind to a signal configuration
-     * § = bind to a special value
-     * @param element
-     * @param binding
-     * @param relativeSignalPath
-     * @param root
-     * @returns
-     */
-    applyBinding(element: Element, binding: namedBinding, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler): () => void;
+     * ? = signal name from a root property; ?? = a root property value
+     * # = signal name from a target property; ## = a target property value
+     * ?$ = signal object from a root property; #$ = signal object from a target property
+     * ?@ = a root attribute value; #@ = a target attribute value
+     * $ = a signal configuration; § = a special value
+    */
+    applyBinding(element: Element, binding: namedBinding, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler): Cleanup;
     private addTwoWayBinding;
     private static parseValueWithType;
-    handleValueChanged(element: Element, root: Element, binding: namedBinding, value: any, valuesObject: any[], index: number, signalVarNames: string[], noParse: boolean, relativeSignalPath: string): void;
+    private compileConverter;
+    private getCompiledConverter;
+    private applyCompiledConverter;
+    private createTargetWriter;
     static camelToDotCase(text: string): string;
     static dotToCamelCase(text: string): string;
 }
+export {};