tiddlywiki 5.3.7 → 5.4.0

package/editions/tw5.com/tiddlers/widgets/DiffTextWidget.tid

@@ -1,61 +1,85 @@
 caption: diff-text
 created: 20180316162725329
-modified: 20180316162725329
+modified: 20260102132650194
 tags: Widgets
 title: DiffTextWidget
 type: text/vnd.tiddlywiki
 
 ! Introduction
 
-<<.from-version "5.1.16">> The diff text widget analyses the differences between a pair of source and destination text strings and displays the results as highlighted insertions and deletions (similar to the "track changes" function of a word processor). For example:
+<<.from-version "5.1.16">> The diff text widget analyses the differences between a pair of source and destination text strings and displays the results as highlighted insertions and deletions (similar to the "track changes" function of a word processor).
 
-<$diff-text source="Hey Jude, don't make it bad. Take a sad song and make it better. Remember to let her into your heart
-Then you can start to make it better." dest="Hey Jude, don't be afraid. You were made to go out and get her. The minute you let her under your skin. Then you begin to make it better."/>
+```
+<$diff-text source="This is the original text" dest="This is the text to compare to" mode="words>
+    These are the <<diff-count>> differences:
+</$diff-text>
+```
 
-! Content and Attributes
 
-!! Content
 
-The content of the `<$diff-text>` widget is rendered immediately before the diffs. Within it, the variable `diff-count` is available, containing the number of differences found. If the widget has no content then it automatically transcludes the tiddler [[$:/language/Diffs/CountMessage]].
+! Content and Attributes
 
-<<<
-In other words, these three invocations are all equivalent:
+The content of the <<.wid diff-text>> widget is displayed immediately before the differences. Within the content, the variable <<.var diff-count>> is available, containing the number of differences found. If the widget has no content then it automatically transcludes the tiddler [[$:/language/Diffs/CountMessage]].
 
-```
-<$diff-text source={{FirstTiddler}} dest={{SecondTiddler}}>
-{{$:/language/Diffs/CountMessage}}
-</$diff-text>
+<<.note """The algorithm counts changes as both insertion and deletion, and therefore the number of differences can be higher than expected.""">>
 
-<$diff-text source={{FirstTiddler}} dest={{SecondTiddler}}>
-</$diff-text>
+|!Attribute |!Description |
+|<<.attr source>> |The source text |
+|<<.attr dest>> |The destination text |
+|<<.attr cleanup>> |Optional post-processing to improve readability (default is <<.value semantic>>) |
+|<<.attr editcost>> |<<.from-version "5.4.0">> Threshold parameter for <<.value efficiency>> cleanup mode (default is <<.value 4>>) |
+|<<.attr mode>> |<<.from-version "5.4.0">> Specifies the granularity at which differences are computed and displayed (default is <<.value chars>>) |
 
-<$diff-text source={{FirstTiddler}} dest={{SecondTiddler}}/>
 
-```
-<<<
+!! <<.attr cleanup>> / <<.attr editcost>>
 
-!! Attributes
+The <<.attr cleanup>> attribute determines which optional post-processing should be applied to the diffs:
 
-|!Attribute |!Description |
-|source |The source text |
-|dest |The destination text |
-|cleanup |See below |
+* <<.value none>>: No cleanup is performed
+* <<.value semantic>> (default): Optimizes the differences for readability
+* <<.value efficiency>>: Optimizes the differences to minimise the number of operations for subsequent processing
+** When using <<.value efficiency>> mode, the <<.attr editcost>> parameter controls the cost threshold for the cleanup algorithm, determining how aggressively the diff algorithm merges nearby edits for better human readability (default value is 4).
+
+<<.note """Note that in many cases the results will be the same regardless of the cleanup option. See the [[docs|https://github.com/google/diff-match-patch/wiki/API]] of the underlying library for more details""">>
 
-The ''cleanup'' attribute determines which optional post-processing should be applied to the diffs:
+!! <<.attr mode>>
 
-* ''none'': no cleanup is performed
-* ''semantic'' (default): rewrites the diffs for human readability
-* ''efficient'': rewrites the diffs to minimise the number of operations for subsequent processing 
+The <<.attr mode>> attribute determines how differences are computed and displayed:
 
-(Note that in many cases the results will be the same regardless of the cleanup option. See the [[docs|https://github.com/google/diff-match-patch/wiki/API]] of the underlying library for more details).
+* <<.value chars>>: Compares differences at the //character level// for precise change detection
+* <<.value words>>: Compares differences at the //word level// for more readable text comparisons
+* <<.value lines>>: Compares differences at the //line level// for better visibility of structural changes
 
 ! Examples
 
-In this example we compare two texts:
+A basic example:
+
+<<.example n:1 e.g."""<$diff-text source="The quick brown fox jumps" dest="The slick brown fox leaps"/>""">>
+
+In <<.value words>> mode, differences are computed at the words level:
+
+<<.example n:2 e.g."""<$diff-text mode="words" source="The quick brown fox jumps" dest="The slick brown fox leaps"/>""">>
+
+
+To see the effects of all parameters, use this example:
+
+|tc-max-width tc-edit-max-width|k
+|<$edit-text tiddler="SampleTiddlerFirst" rows="5"/>|<$edit-text tiddler="SampleTiddlerSecond" rows="5"/>|
+
+<$diff-text source={{SampleTiddlerFirst}} dest={{SampleTiddlerSecond}} cleanup={{{ [{!!cleanup}!is[blank]else[efficiency]] }}} editcost={{{ [{!!editcost}!is[blank]else[4]] }}} mode={{{ [{!!mode}!is[blank]else[chars]] }}}/>
+
+!! <<.attr mode>>
+<$radio field="mode" value="chars" default="chars" class="tc-small-gap-right"> <<.value chars>></$radio>
+<$radio field="mode" value="words" class="tc-small-gap-right"> <<.value words>></$radio>
+<$radio field="mode" value="lines"> <<.value lines>></$radio>
 
-<$macrocall $name='wikitext-example-without-html'
-src="""<$edit-text tiddler="SampleTiddlerFirst"/>
+!! <<.attr cleanup>>
+<$radio field="cleanup" value="none" class="tc-small-gap-right"> <<.value none>></$radio>
+<$radio field="cleanup" value="semantic" class="tc-small-gap-right"> <<.value semantic>></$radio>
+<$radio field="cleanup" value="efficiency" default="efficiency"> <<.value efficiency>></$radio>
 
-<$edit-text tiddler="SampleTiddlerSecond"/>
+<% if [{!!cleanup}!match[none]!match[semantic]] %>
 
-<$diff-text source={{SampleTiddlerFirst}} dest={{SampleTiddlerSecond}}/>"""/>
+!! <<.attr editcost>>: <$transclude $variable=".value" _={{{ [{!!editcost}!is[blank]else[4]] }}} />
+<$range field="editcost" min="1" max="200" default="4" class="tc-max-width" style.max-width="500px" />
+<% endif %>

package/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid

@@ -1,7 +1,7 @@
 caption: edit-text
 created: 20131024141900000
 heading: 
-modified: 20240627184331133
+modified: 20251118230450156
 tags: Widgets
 temp: 
 title: EditTextWidget
@@ -11,40 +11,40 @@ type: text/vnd.tiddlywiki
 
 The edit text widget provides a user interface in the browser for editing text tiddler fields. The editing element is dynamically bound to the underlying tiddler value: changes to the tiddler are instantly reflected, and any edits are instantly propagated.
 
-By default, applying the EditTextWidget to the `text` field of a tiddler will generates an HTML `<textarea>` element, i.e. a multi-line editor. Applying the EditTextWidget to any other field generates an HTML `<input type="text">` element, a single-line editor. This behaviour can be overridden with the `tag` and `type` attributes.
+By default, applying the ~EditTextWidget to the `text` field of a tiddler will generates an HTML `<textarea>` element, i.e. a multi-line editor. Applying the ~EditTextWidget to any other field generates an HTML `<input type="text">` element, a single-line editor. This behaviour can be overridden with the `tag` and `type` attributes.
 
 ! Content and Attributes
 
 The content of the `<$edit-text>` widget is ignored.
 
 |!Attribute |!Description |
-|tiddler |The tiddler to edit (defaults to the [[current tiddler|Current Tiddler]]) |
-|field |The field to edit (defaults to `text`). Takes precedence over the `index` attribute |
+|tiddler |The tiddler to edit (''defaults'' to the [[current tiddler|Current Tiddler]]) |
+|field |The field to edit (''defaults'' to `text`). Takes precedence over the `index` attribute |
 |index |The index to edit |
 |default |The default text to be provided when the target tiddler doesn't exist |
 |class |A CSS class to be assigned to the generated HTML editing element |
 |placeholder |Placeholder text to be displayed when the edit field is empty |
 |focusPopup |Title of a state tiddler for a popup that is displayed when the editing element has focus  |
 |focus |Set to "yes" or "true" to automatically focus the editor after creation |
-|focusSelectFromStart |<<.from-version 5.2.6>> If the `focus` attribute is enabled, determines the position of the start of the selection: `0` (default) places the start of the selection at the beginning of the text, `1` places the start of the selection after the first character, etc.  |
-|focusSelectFromEnd |<<.from-version 5.2.6>> If the `focus` attribute is enabled, determines the position of the end of the selection: `0` (default) places the end of the selection at the end of the text, `1` places the start of the selection before the final character, etc.  |
+|focusSelectFromStart |<<.from-version 5.2.6>> If the `focus` attribute is enabled, determines the position of the start of the selection: `0` (''default'') places the start of the selection at the beginning of the text, `1` places the start of the selection after the first character, etc.  |
+|focusSelectFromEnd |<<.from-version 5.2.6>> If the `focus` attribute is enabled, determines the position of the end of the selection: `0` (''default'') places the end of the selection at the end of the text, `1` places the start of the selection before the final character, etc.  |
 |tabindex |Sets the `tabindex` attribute of the input or textarea to the given value |
 |autocomplete |<<.from-version 5.1.23>> An optional string to provide a hint to the browser how to handle autocomplete for this input |
 |tag |Overrides the generated HTML editing element tag. For a multi-line editor use `tag=textarea`. For a single-line editor use `tag=input` |
 |type |Overrides the generated HTML editing element `type` attribute |
 |size |The size of the input field (in characters). This exact result depends on browser and font. Use the `class` attribute to style width for precise control |
-|autoHeight |Either "yes" or "no" to specify whether to automatically resize `textarea` editors to fit their content (defaults to "yes") |
-|minHeight |Minimum height for automatically resized `textarea` editors, specified in CSS length units such as "px", "em" or "%" |
-|rows|Sets the rows attribute of a generated textarea |
+|autoHeight |Either "yes" or "no" to specify whether to automatically resize `textarea` editors to fit their content (''defaults'' to "yes"). This setting can be changed globally with an editor toolbar button|
+|minHeight |Minimum height for automatically resized `textarea` editors, specified in CSS length units such as "px", "em" or "%". Has no effect if the [[CodeMirror Plugin]] is active |
+|rows|Sets the rows attribute of a generated textarea. `rows` ''takes precedence'' over `autoHeight`, so text areas can be defined individually |
 |cancelPopups |<<.from-version "5.1.23">> if set to "yes", cancels all popups when the input gets focus |
 |inputActions |<<.from-version 5.1.23>> Optional actions that are triggered every time an input event occurs within the input field or textarea.<br><<.from-version "5.2.1">> The variable `actionValue` is available to the `inputActions` and contains the value of the input field. |
 |refreshTitle |<<.from-version 5.1.23>> An optional tiddler title that makes the input field update whenever the specified tiddler changes |
-|disabled|<<.from-version "5.1.23">> Optional, disables the text input if set to "yes". Defaults to "no"|
-|fileDrop|<<.from-version "5.2.0">> Optional. When set to "yes" allows dropping or pasting images into the editor to import them. Defaults to "no"|
+|disabled|<<.from-version "5.1.23">> Optional, disables the text input if set to "yes". ''Defaults'' to "no"|
+|fileDrop|<<.from-version "5.2.0">> Optional. When set to "yes" allows dropping or pasting images into the editor to import them. ''Defaults'' to "no"|
 
 ! Examples
 
-If you wanted to change the field //myconfig// of the tiddler //AppSettings//, you could use an EditTextWidget to edit the field, and then show the result anywhere else by using `{{AppSettings!!myconfig}}`. Note that this will create tiddler AppSettings if it doesn't already exist.
+If you wanted to change the field `myconfig` of the tiddler `AppSettings`, you could use an ~EditTextWidget to edit the field, and then show the result anywhere else by using `{{AppSettings!!myconfig}}`. Note that this will create tiddler AppSettings if it doesn't already exist.
 
 <$macrocall $name=".example" n="1"
 eg="""<$edit-text tiddler="AppSettings" field="myconfig"/><p/>
@@ -79,7 +79,6 @@ eg="""\procedure onInput()
 \end
 
 Type a new tiddler name, starting with the system prefix `$:/`: <$edit-text inputActions=<<onInput>> field="temp" class="tc-edit-texteditor"/>
-
 """/>
 
 

package/editions/tw5.com/tiddlers/widgets/EventCatcherWidget.tid

@@ -1,5 +1,5 @@
 created: 20201123113532200
-modified: 20221012194222875
+modified: 20260125202715594
 tags: Widgets TriggeringWidgets
 title: EventCatcherWidget
 type: text/vnd.tiddlywiki
@@ -12,14 +12,16 @@ type: text/vnd.tiddlywiki
 
 The event catcher widget traps DOM-initiated Javascript events dispatched within its child content, and allows invoking a series of ActionWidgets in response to those events.
 
+Use of the event catcher widget is beneficial when using large numbers of other trigger widgets such as the ButtonWidget is causing performance problems. The workflow it enables is akin to what is referred to as "event delegation" in JavaScript parlance.
+
 In order for the events to be trapped:
 
-* The event must be of one of the events specified in the event catcher widget's `events` attribute
+* The event must be of one of the events specified in the event catcher widget's attributes
 * The event must target a DOM node with an ancestor that matches the widget's `selector` attribute
-* <<.from-version "5.2.2">> Optionally, the DOM node targeted by the event must also match the widgets `matchSelector` attribute
+* <<.from-version "5.2.2">> Optionally, the DOM node targeted by the event must also match the widget's `matchSelector` attribute
 * The event must support event bubbling
-
-Use of the event catcher widget is beneficial when using large numbers of other trigger widgets such as the ButtonWidget is causing performance problems. The workflow it enables is akin to what is referred to as "event delegation" in JavaScript parlance.
+* <<.from-version "5.4.0">> The widget must be enabled (`enabled="yes"`)
+* <<.from-version "5.4.0">> Pointer events may continue to be trapped outside the widget DOM boundaries if pointer capture is enabled
 
 ! Content and Attributes
 
@@ -28,14 +30,54 @@ The content of the `<$eventcatcher>` widget is displayed normally.
 |!Attribute |!Description |
 |selector |A CSS selector. Only events originating inside a DOM node with this selector will be trapped |
 |matchSelector |<<.from-version "5.2.2">> An optional CSS selector. Only events targeting DOM nodes matching this selector will be trapped |
-|//{any attributes starting with $}// |<<.from-version "5.2.0">> Each attribute name (excluding the $) specifies the name of an event, and the value specifies the action string to be invoked. For example: `$click=<<clickActions>>`  |
+|//{any attributes starting with $}// |<<.from-version "5.2.0">> Each attribute name (excluding the $) specifies the name of an event, and the value specifies the action string to be invoked. For example: `$click=<<clickActions>>` |
 |tag |Optional. The HTML element the widget creates to capture the events, defaults to:<br>» `span` when parsed in inline-mode<br>» `div` when parsed in block-mode |
 |class |Optional. A CSS class name (or names) to be assigned to the widget HTML element |
-|stopPropagation |<<.from-version "5.2.0">> Optional. Set to "always" to always stop event propagation even if there are no corresponding actions to invoke, "never" to never stop event propagation, or the default value "onaction" with which event propagation is only stopped if there are corresponding actions that are invoked. |
-|events |//(deprecated – see below)// Space separated list of JavaScript events to be trapped, for example "click" or "click dblclick" |
-|actions-* |//(deprecated – see below)// Action strings to be invoked when a matching event is trapped. Each event is mapped to an action attribute name of the form <code>actions-<em>event</em></code> where <code><em>event</em></code> represents the type of the event. For example: `actions-click` or `actions-dblclick` |
+|stopPropagation |<<.from-version "5.2.0">> Optional. Set to "always" to always stop event propagation even if there are no corresponding actions to invoke, "never" to never stop event propagation, or the default value "onaction" with which event propagation is only stopped if there are corresponding actions that are invoked |
+|enabled |<<.from-version "5.4.0">> Optional. Enables or disables the event catcher widget. Set to "no" to remove all event listeners while keeping the widget’s DOM structure intact. Defaults to "yes" |
+|pointerCapture |<<.from-version "5.4.0">> Optional. Enables native pointer capture for pointer events. Possible values are "no", "yes", or "dynamic". Defaults to "no" |
+|events |//(removed – see below)// Space separated list of JavaScript events to be trapped, for example "click" or "click dblclick" |
+|actions-* |//(removed – see below)// Action strings to be invoked when a matching event is trapped. Each event is mapped to an action attribute name of the form <code>actions-<em>event</em></code> |
+
+<<.from-version "5.4.0">> The attributes `events` and `actions-*` have been removed as they are no longer needed. Instead you can use attributes starting with `$` where the attribute name (excluding the `$`) specifies the name of the event and the value specifies the action string to be invoked.
+
+! Pointer Capture
+
+<<.from-version "5.4.0">>  
+The `pointerCapture` attribute enables native [[Pointer Events|https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events]] support using `setPointerCapture()`. This allows pointer interactions to continue to be tracked even if the pointer moves outside the widget’s DOM nodes or the browser viewport.
+
+This is particularly useful for drag-and-drop interfaces, sliders, drawing tools, and other pointer-driven interactions.
+
+!! Values
+
+* `no` (default)  
+Pointer capture is not used. Pointer events are only received while the pointer remains within the widget’s DOM nodes.
+
+* `yes`  
+Pointer capture is enabled whenever a `pointerdown` event occurs. All pointer event handlers specified on the widget remain active for the lifetime of the widget.
+
+* `dynamic`  
+Pointer capture is enabled only for the duration of an active pointer interaction.  
+Event handlers for `pointerup`, `pointercancel`, and optionally `pointermove` are attached only while pointer capture is active and are removed when the interaction ends.  
+This mode minimizes active event listeners and is recommended for performance-sensitive use cases.
+
+!! Notes
+
+* Pointer capture only applies to pointer events such as `pointerdown`, `pointermove`, `pointerup`, and `pointercancel`
+* Pointer capture does not affect mouse or touch events
+* Pointer capture is automatically released on `pointerup` or `pointercancel`
+
+! Enabling and Disabling the Widget
+
+<<.from-version "5.4.0">>  
+The `enabled` attribute allows the event catcher widget to be temporarily disabled without removing it from the DOM.
+
+When `enabled="no"`:
+
+* All event listeners are removed
+* No actions are invoked
+* The widget’s DOM node and child content remain unchanged
 
-<<.from-version "5.2.0">> Note that the attributes `events` and `actions-*` are no longer needed. Instead you can use attributes starting with $ where the attribute name (excluding the $) specifies the name of the event and the value specifies the action string to be invoked. If any attributes with the prefix $ are present then the `types` attribute is ignored.
 
 ! Variables
 
@@ -43,16 +85,16 @@ The following variables are made available to the actions:
 
 |!Variables |!Description |
 |`dom-*` |All DOM attributes of the node matching the given selector are made available as variables, with the prefix `dom-` |
-|`modifier` |The [[modifier Variable]] contains the Modifier Key held during the event (can be "normal", "ctrl", "shift", "alt" or combinations thereof) |
-|`event-mousebutton` |The mouse button (if any) used to trigger the event (can be "left", "right" or "middle"). Note that not all event types support the mousebutton property.  <<.infoBox """This property only guarantees to indicate which buttons are pressed during events caused by pressing or releasing one or multiple buttons. As such, it is not reliable for events such as mouseenter, mouseleave, mouseover, mouseout, or mousemove. More details at: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button""">> |
-|`event-type` |The type property of the JavaScript event.  |
-|`event-detail-*` |Any properties in the detail attribute of the event are made available with the prefix `event-detail-` |
-|`tv-popup-coords` |A relative co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see [[Coordinate Systems]] for more information) |
-|`tv-popup-abs-coords` |<<.from-version "5.2.4">> An absolute co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see [[Coordinate Systems]] for more information) |
+|`modifier` |The [[modifier Variable]] contains the Modifier Key held during the event |
+|`event-mousebutton` |The mouse button (if any) used to trigger the event (can be "left", "right" or "middle") <<.infoBox """This property is only reliable for events caused by pressing or releasing mouse buttons. It is not reliable for mouseenter, mouseleave, mouseover, mouseout, or mousemove. More details at: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button""">> |
+|`event-type` |The type property of the JavaScript event. <<.deprecated-since 5.4.0>> Removed in favour of `eventJSON`|
+|`event-detail-*` |Any properties in the detail attribute of the event are made available with the prefix `event-detail-`. <<.deprecated-since 5.4.0>> Removed in favour of `eventJSON` |
+|`tv-popup-coords` |A relative coordinate string that can be used with the ActionPopupWidget |
+|`tv-popup-abs-coords` |<<.from-version "5.2.4">> An absolute coordinate string that can be used with the ActionPopupWidget |
 |`tv-widgetnode-width` |<<.from-version "5.2.3">> `offsetWidth` of the DOM node created by the eventcatcher widget |
 |`tv-widgetnode-height` |<<.from-version "5.2.3">> `offsetHeight` of the DOM node created by the eventcatcher widget |
 |`tv-selectednode-posx` |`x` offset position of the selected DOM node |
-|`tv-selectednode-posy` |`y` offset position of the selected DOM node  |
+|`tv-selectednode-posy` |`y` offset position of the selected DOM node |
 |`tv-selectednode-width` |`offsetWidth` of the selected DOM node |
 |`tv-selectednode-height` |`offsetHeight` of the selected DOM node |
 |`event-fromselected-posx` |`x` position of the event relative to the selected DOM node |
@@ -61,37 +103,59 @@ The following variables are made available to the actions:
 |`event-fromcatcher-posy` |`y` position of the event relative to the event catcher DOM node |
 |`event-fromviewport-posx` |<<.from-version "5.2.0">> `x` position of the event relative to the viewport |
 |`event-fromviewport-posy` |<<.from-version "5.2.0">> `y` position of the event relative to the viewport |
+|`eventJSON`|<<.from-version "5.4.0">>A stringified JSON object containing string-safe copies of the event’s own properties. Can be accessed using the [[jsonget Operator]]. |
 
 ! Example
 
-This example uses the ActionLogWidget and will log the `data-item-id` attribute of the clicked DOM node to the browser's JavaScript [[console|Web Developer Tools]]
+This example illustrates how to work with click and right click events:
 
 ```
-\define clickactions()
-<$action-log item=<<dom-data-item-id>> event=<<event-type>>/>
-\end
-
-\define contextmenu-actions()
-<$action-log item=<<dom-data-item-id>> event=<<event-type>>/>
-\end
-
-<$eventcatcher selector=".item" $click=<<clickactions>> $contextmenu=<<contextmenu-actions>> tag="div">
-
-<div class="item" data-item-id="item1">
-Click events here will be trapped
-</div>
-
-<div class="item" data-item-id="item2">
-And here too
-</div>
-
-<div data-item-id="item3">
-Not here
-</div>
-
-<div class="item" data-item-id="item4">
-And here
-</div>
-
-</$eventcatcher>
+\procedure card-click-actions()  
+<$action-setfield $tiddler="$:/temp/selected-card" text=<<dom-data-card-id>>/>  
+\end  
+  
+\procedure card-context-actions()  
+<$action-setfield $tiddler="$:/temp/context-menu"   
+  text=`Showing context menu for card: {{!!card}}`
+  card=<<dom-data-card-id>>
+  x=<<event-fromviewport-posx>>  
+  y=<<event-fromviewport-posy>>/>  
+\end  
+  
+<$eventcatcher   
+  selector=".gallery-card"   
+  $click=<<card-click-actions>>   
+  $contextmenu=<<card-context-actions>>  
+  class="card-gallery">  
+  
+<div class="gallery-card" data-card-id="card1" style="border: 1px solid #ccc; padding: 10px; margin: 5px; cursor: pointer;">  
+  <h3>1: Mountain Landscape</h3>  
+  <p>Click to select, right-click for options</p>  
+</div>  
+  
+<div class="gallery-card" data-card-id="card2" style="border: 1px solid #ccc; padding: 10px; margin: 5px; cursor: pointer;">  
+  <h3>2: Ocean View</h3>  
+  <p>Click to select, right-click for options</p>  
+</div>  
+  
+<div class="gallery-card" data-card-id="card3" style="border: 1px solid #ccc; padding: 10px; margin: 5px; cursor: pointer;">  
+  <h3>3: City Skyline</h3>  
+  <p>Click to select, right-click for options</p>  
+</div>  
+  
+</$eventcatcher>  
+  
+<!-- Display selected card info -->  
+<$reveal type="nomatch" state="$:/temp/selected-card" text="">  
+<div style="background: #f0f0f0; padding: 10px; margin-top: 10px;">  
+  <strong>Selected:</strong> {{$:/temp/selected-card}}  
+</div>  
+</$reveal>  
+  
+<!-- Display context menu info -->  
+<$reveal type="nomatch" state="$:/temp/context-menu" text="">  
+<div style="background: #ffe0e0; padding: 10px; margin-top: 10px;">  
+  {{$:/temp/context-menu}}  
+</div>  
+</$reveal>
 ```

package/editions/tw5.com/tiddlers/widgets/ImageWidget.tid

@@ -1,6 +1,6 @@
 caption: image
 created: 20140416160234142
-modified: 20231121114351165
+modified: 20260126114209242
 tags: Widgets
 title: ImageWidget
 type: text/vnd.tiddlywiki
@@ -22,9 +22,26 @@ Any content of the `<$image>` widget is ignored.
 |class |CSS classes to be assigned to the `<img>` element |
 |loading|<<.from-version "5.2.3">>Optional. Set to `lazy` to enable lazy loading of images loaded from an external URI |
 |usemap|<<.from-version "5.3.2">>Optional usemap attribute to be assigned to the `<img>` element for use with HTML image maps |
+|loadActions|<<.from-version "5.4.0">>Optional actions invoked when the image has completed loading. See below for variables passed to the actions.|
 
 The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image.
 
+
+'' The following variables are accessible in the //loadActions//:''
+<<.from-version 5.4.0>>
+
+|!Variables |!Description |
+|`dom-*` |All DOM attributes of the image are made available as variables, with the prefix `dom-` |
+|`tv-popup-coords` |A relative co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the image|
+|`tv-popup-abs-coords` |<<.from-version "5.2.4">> An absolute co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the image (see [[Coordinate Systems]] for more information) |
+|`tv-selectednode-posx` |`x` offset position of the image DOM node |
+|`tv-selectednode-posy` |`y` offset position of the image DOM node  |
+|`tv-selectednode-width` |`offsetWidth` of the image DOM node |
+|`tv-selectednode-height` |`offsetHeight` of the image DOM node |
+|`img-natural-width` |Original intrinsic width of the image |
+|`img-natural-height` |Original intrinsic height of the image |
+
+
 ! Responsive images and `<map>`
 
 [[Image maps area|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area]] coordinates are numbers of CSS pixels, therefore they do not scale. If you want to use responsive images, you can use a `svg` and `foreignObject`: 

package/editions/tw5.com/tiddlers/widgets/LetWidget.tid

@@ -1,12 +1,12 @@
 title: LetWidget
 created: 20211028115900000
-modified: 20221001094658854
+modified: 20250307212252946
 tags: Widgets
 caption: let
 
 ! Introduction
 
-<<.from-version "5.2.1">> The <<.wid let>> widget allows multiple variables to be set in one operation. In some situations it can result in simpler code than using the more flexible <<.wlink SetWidget>> widget. It differs from the <<.wlink VarsWidget>> widget in that variables you're defining may depend on earlier variables defined within the same <<.wid let>>.
+<<.from-version "5.2.1">> The <<.wid let>> widget allows more than one variable to be set in one operation. In some situations it can result in simpler code than using the more flexible <<.wlink SetWidget>> widget. It differs from the <<.wlink VarsWidget>> widget in that variables you're defining may depend on earlier variables defined within the same <<.wid let>>.
 
 ! Content and Attributes
 
@@ -19,6 +19,18 @@ Attributes are evaluated in the order they are written. Attributes with the same
 
 <<.note """<<.from-version "5.2.4">> There is no longer any restriction on using variable names that start with the $ character.""">>
 
+! Multi-Valued Variables
+
+<<.from-version "5.4.0">> The <<.wid let>> widget also allows [[multi-valued variables|Multi-Valued Variables]] to be set in one operation to the complete list of results obtained from evaluating an attribute.
+
+Almost all operations that work with variables only consider the first item in the list. Using round brackets instead of angle brackets around the variable name gives access to the complete list of results. For example:
+
+```
+<$let varname={{{ [all[tiddlers]sort[]] }}}>
+<$text text={{{ [(varname)] +[join[-]] }}}/>
+</$let>
+```
+
 ! Examples
 
 Consider a case where you need to set multiple variables, where some depend on the evaluation of others.

package/editions/tw5.com/tiddlers/widgets/LinkWidget.tid

@@ -1,6 +1,6 @@
 caption: link
 created: 20131024141900000
-modified: 20240730065043721
+modified: 20260206131722044
 tags: Widgets
 title: LinkWidget
 type: text/vnd.tiddlywiki
@@ -17,6 +17,7 @@ The content of the link widget is rendered within the `<a>` tag representing the
 |!Attribute |!Description |
 |to |The title of the target tiddler for the link (defaults to the [[current tiddler|Current Tiddler]]) |
 |aria-label |Optional accessibility label |
+|role |<<.from-version "5.4.0">> Optional [[ARIA role|https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles]] |
 |tooltip |Optional tooltip WikiText |
 |tabindex |Optional numeric [[tabindex|https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex]] |
 |draggable |"yes" to enable the link to be draggable (defaults to "yes") |
@@ -25,6 +26,9 @@ The content of the link widget is rendered within the `<a>` tag representing the
 |overrideClass|<<.from-version "5.1.16">> Optional CSS classes //instead of// the default classes |
 |data-* |<<.from-version "5.3.2">> Optional [[data attributes|https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes]] to be assigned to the HTML element |
 |style.* |<<.from-version "5.3.2">> Optional [[CSS properties|https://developer.mozilla.org/en-US/docs/Web/CSS/Reference]] to be assigned to the HTML element |
+|aria-* |<<.from-version "5.4.0">> Optional [[ARIA attributes|https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes]] to be assigned to the HTML element |
+|startactions |<<.from-version "5.4.0">> Optional action string that gets invoked when ''dragging starts''. The <<.var actionTiddler>> variable is available in this action.|
+|endactions |<<.from-version "5.4.0">> Optional action string that gets invoked when ''dragging ends''. The <<.var actionTiddler>> variable is available in this action. |
 
 The draggable functionality is equivalent to using the DraggableWidget with the ''tiddler'' attribute set to the link target.
 
@@ -65,6 +69,19 @@ A useful convention is to set the tooltip like this:
 
 This causes the tooltip to be the ''tooltip'' field of the target tiddler. If the field isn't present, then the title is used instead.
 
+! Action Variables
+
+<<.from-version "5.4.0">> The <<.var actionTiddler>> variable is available to <<.param startaction>> and <<.param endaction>>.
+
+To see all variables available to an action you can use this code and see the variables in the browser dev-console (F12)
+
+<<wikitext-example-without-html """\procedure endActions()
+<$action-log/>
+\end
+
+<$link to=HelloThere endactions=<<endActions>>>drag me!</$link>
+""">>
+
 ! CSS Classes
 
 The link widget automatically determines and applies the following classes to links:
@@ -93,7 +110,7 @@ The following process is used to generate the `href` attribute of the generated
 # If <<.vlink tv-wikilink-template>> is defined it is treated as a specialised macro body that can perform limited conversion of the target tiddler title to the `href` value
 # Otherwise, the target tiddler title is URI encoded to create the `href`
 
-! Configuration variables
+! Configuration Variables
 
 * <<.vlink tv-wikilinks>>
 * <<.vlink tv-filter-export-link>>

package/editions/tw5.com/tiddlers/widgets/LogWidget.tid

@@ -1,45 +1,71 @@
 created: 20201120152706842
-modified: 20201120154927696
+modified: 20260105121111637
 tags: Widgets [[Debugging Widgets]]
 title: LogWidget
 type: text/vnd.tiddlywiki
 
 ! Introduction
 
-<<.from-version "5.1.23">> The ''log'' widget can be used to output debugging information to the [[JavaScript console|Web Developer Tools]] supported by most browsers. 
+<<.from-version "5.1.23">> The <<.wid log>> widget is a [[widget|Widgets]] that can be used to output debugging information to the [[JavaScript console|Web Developer Tools]] supported by most browsers.
 
-<<.tip """ For use with ActionWidgets see [[ActionLogWidget]] which uses identical parameters""">>
+When the widget is rendered or refreshed, the names and values of all [[attributes|Widget Attributes]] are logged to the JavaScript console.
+
+```
+<$log name=value />
+```
+
+<<.note """ For debugging inside of actions see [[ActionLogWidget]]""">>
 
 ! Content and Attributes
 
-The ''log'' widget is invisible. Any content within it is ignored. Note that the widget will log to the console both when it is first rendered and also every time it refreshes.
+The <<.wid log>> widget is invisible. Any content within it is ignored.
 
-When the widget is rendered, the names and values of all attributes are logged to the JavaScript console.
-In addition there are optional attributes that can be used:
 
-|!Optional Attribute |!Description |
-|$$filter|All variables matching this filter will also be logged. |
-|$$message |A message to display as the title of the information logged. Useful when several `log` widgets are used in sequence. |
-|$$all |Set to "yes" to log all variables in a collapsed table. Note that if there is nothing specified to log, all variables are always logged instead.|
+|!Attribute |!Description |
+|<<.attr $$filter>>|(Optional) All variables whose name matches the [[Filter Expression]] will be logged |
+|<<.attr $$message>> |(Optional) A message to display as the title of the information logged. Useful when several <<.wid log>> widgets are used in sequence |
+|<<.attr $$all>> |(Optional) Set to <<.value yes>> to log all variables |
 
+<<.note """ If `<$log />` is called without any attributes, all defined variables will be logged as if `$$all=yes` were set.""">>
 
-! Example
+<<.note """When logging [[Variable Attribute Values]], the body text of macros and procedures will be output as their value. Functions are evaluated and their first result is logged.""">>
 
-Here is an example of logging two variables:
+! Examples
+
+!! Basic Example
+
+Log the value of variable <<.var name>>, the first result of the filter expression `[tag[Learning]]` and the value of field <<.field created>> of the current tiddler:
 
 ```
-<$log myVar=<<myVar>> otherVar=<<otherVar>>/>
+<$log name=<<name>> filter={{{ [tag[Learning]] }}} created={{!!created}} />
 ```
 
-To log all variables:
+!! Example using <<.attr $$filter>> and <<.attr $$message>> 
+
+Log all core variables (which start with <<.var tv->>) with a table title:
 
 ```
-<$log />
+<$log $$message="Core Variables" $$filter="[prefix[tv-]]" />
 ```
 
+!! Widget Debugging
 
-To log two variables as well as all core variables (which start with `tv-`):
+Change a misbehaving <<.wlink TranscludeWidget>> widget to a <<.wid log>> widget to verify that <<.var name>> and <<.var mode>> match their expected values:
+
+<<.tip """If a widget is not behaving as expected it is often useful to temporarily change it to a <<.wid log>> widget so that the passed attributes can be verified.""">>
 
 ```
-<$log myVar=<<myVar>> other={{!!status}} $$filter="[prefix[tv-]]"/>
+<$log $variable=<<name>> $mode=<<mode>> />
 ```
+
+This application is the primary reason that the attributes of the <<.wid log>> widget are prefixed with two dollar signs instead of one. Otherwise, the attributes of the original widget could be interpreted as attributes to <<.wid log>> and lead to unintended consequences.
+
+!! Example with Function
+
+Log the <<.var tiddlerList>> function definition and its first evaluation result (see browser console after clicking "Try it"):
+
+<<.example n:"2" eg:"""\function tiddlerList() [tag[Learning]]
+
+<$log $$filter="[title[tiddlerList]]" value=<<tiddlerList>> />""" >>
+
+<<.note """The values output with the <<.attr $$filter>> or <<.attr $$all>> attributes will only contain the definition of functions instead of their values, as the evaluation of many functions can lead to significant performance penalties.""">>