Add/refactor PaletteManager (#3832)

* add PaletteManager

* add hint for "external" palette-names

* macro utility, for local \import only

this tiddler is never meant to be tagged $:/tags/Macro

contains only a colour macro which allows to call `<<colour "...">>` within a tiddler and get the parameter-name instead of the resolved color

used in the PaletteManager to reveal the original color below the color that just uses its color with the colour macrocall

example:

```
\define get-real-index(string)
\import $:/core/macros/utils
<$wikify $name="result" text="""$string$"""> <- does the "colour" macrocall, but the one that returns the parameter name
<<result>>
</$wikify>
\end
<$set name="color" value={{{ [{$:/palette}getindex[color-of-interest]] }}}>

-> <<colour primary>>

<$wikify name="real-color-index" text="""<$macrocall $name="get-real-index" string=<<color>>/>""">

<<real-color-index>> -> primary

...
```

* transclude PaletteManager in snippets/paletteeditor

* transclude PaletteManager in core/ui/ControlPanel/Palette

* Update ControlPanel.multids

* add style for color inputs in PaletteManager

* Update PaletteManager.tid

* Update PaletteManager.tid

* add tooltips & aria-labels

* Update ControlPanel.multids

* Update PaletteManager.tid

* Update PaletteManager.tid

* Update PaletteManager.tid

core/language/en-GB/ControlPanel.multids

@@ -47,6 +47,8 @@ LoadedModules/Hint: These are the currently loaded tiddler modules linked to the
 Palette/Caption: Palette
 Palette/Editor/Clone/Caption: clone
 Palette/Editor/Clone/Prompt: It is recommended that you clone this shadow palette before editing it
+Palette/Editor/Delete/Hint: delete this entry from the current palette
+Palette/Editor/Names/External/Show: Show color names that are not part of the current palette
 Palette/Editor/Prompt/Modified: This shadow palette has been modified
 Palette/Editor/Prompt: Editing
 Palette/Editor/Reset/Caption: reset

core/ui/ControlPanel/Palette.tid

@@ -15,7 +15,7 @@ caption: {{$:/language/ControlPanel/Palette/Caption}}
 <$reveal type="match" state="$:/state/ShowPaletteEditor" text="yes">
 
 <$button set="$:/state/ShowPaletteEditor" setTo="no"><<lingo HideEditor/Caption>></$button>
-{{$:/snippets/paletteeditor}}
+{{$:/PaletteManager}}
 
 </$reveal>
 

core/ui/PaletteManager.tid

@@ -0,0 +1,93 @@
+title: $:/PaletteManager
+
+\define lingo-base() $:/language/ControlPanel/Palette/Editor/
+\define describePaletteColour(colour)
+<$transclude tiddler="$:/language/Docs/PaletteColours/$colour$"><$text text="$colour$"/></$transclude>
+\end
+\define edit-colour-placeholder()
+ edit $(colourName)$
+\end
+\define colour-tooltip(showhide) $showhide$ editor for $(newColourName)$ 
+\define resolve-colour(macrocall)
+\import $:/core/macros/utils
+\whitespace trim
+<$wikify name="name" text="""$macrocall$""">
+<<name>>
+</$wikify>
+\end
+\define delete-colour-index-actions() <$action-setfield $index=<<colourName>>/>
+\define palette-manager-colour-row-segment()
+\whitespace trim
+<$edit-text index=<<colourName>> tag="input" placeholder=<<edit-colour-placeholder>> default=""/>
+<br>
+<$edit-text index=<<colourName>> type="color" tag="input" class="tc-palette-manager-colour-input"/>
+<$list filter="[<currentTiddler>getindex<colourName>removeprefix[<<]removesuffix[>>]] [<currentTiddler>getindex<colourName>removeprefix[<$]removesuffix[/>]]" variable="ignore">
+<$set name="state" value={{{ [[$:/state/palettemanager/]addsuffix<currentTiddler>addsuffix[/]addsuffix<colourName>] }}}>
+<$wikify name="newColourName" text="""<$macrocall $name="resolve-colour" macrocall={{{ [<currentTiddler>getindex<colourName>] }}}/>""">
+<$reveal state=<<state>> type="nomatch" text="show">
+<$button tooltip=<<colour-tooltip show>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" set=<<state>> setTo="show">{{$:/core/images/down-arrow}}&nbsp;<$text text=<<newColourName>>/></$button><br>
+</$reveal>
+<$reveal state=<<state>> type="match" text="show">
+<$button tooltip=<<colour-tooltip hide>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" actions="""<$action-deletetiddler $tiddler=<<state>>/>""">{{$:/core/images/up-arrow}}&nbsp;<$text text=<<newColourName>>/></$button><br>
+</$reveal>
+<$reveal state=<<state>> type="match" text="show">
+<$set name="colourName" value=<<newColourName>>>
+<br>
+<<palette-manager-colour-row-segment>>
+<br><br>
+</$set>
+</$reveal>
+</$wikify>
+</$set>
+</$list>
+\end
+\define palette-manager-colour-row()
+\whitespace trim
+<tr>
+<td>
+<span style="float:right;">
+<$button tooltip=<<lingo Delete/Hint>> aria-label=<<lingo Delete/Hint>> class="tc-btn-invisible" actions=<<delete-colour-index-actions>>>
+{{$:/core/images/delete-button}}</$button>
+</span>
+''<$macrocall $name="describePaletteColour" colour=<<colourName>>/>''<br/>
+<$macrocall $name="colourName" $output="text/plain"/>
+</td>
+<td>
+<<palette-manager-colour-row-segment>>
+</td>
+</tr>
+\end
+\define palette-manager-table()
+\whitespace trim
+<table>
+<tbody>
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]indexes[]]" variable="colourName">
+<$list filter="[<currentTiddler>indexes[]removeprefix<colourName>suffix[]]" variable="ignore" emptyMessage="""
+<$list filter="[{$:/state/palettemanager/showexternal}removeprefix[yes]suffix[]]" variable="ignore">
+<<palette-manager-colour-row>>
+</$list>
+""">
+<<palette-manager-colour-row>>
+</$list>
+</$list>
+</tbody>
+</table>
+\end
+<$set name="currentTiddler" value={{$:/palette}}>
+
+<<lingo Prompt>> <$link to={{$:/palette}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
+
+<$list filter="[all[current]is[shadow]is[tiddler]]" variable="listItem">
+<<lingo Prompt/Modified>>
+<$button message="tm-delete-tiddler" param={{$:/palette}}><<lingo Reset/Caption>></$button>
+</$list>
+
+<$list filter="[all[current]is[shadow]!is[tiddler]]" variable="listItem">
+<<lingo Clone/Prompt>>
+</$list>
+
+<$button message="tm-new-tiddler" param={{$:/palette}}><<lingo Clone/Caption>></$button>
+
+<$checkbox tiddler="$:/state/palettemanager/showexternal" field="text" checked="yes" unchecked="no">&nbsp;<<lingo Names/External/Show>></$checkbox>
+
+<<palette-manager-table>>

core/wiki/macros/utils.tid

@@ -0,0 +1,5 @@
+title: $:/core/macros/utils
+
+\define colour(colour)
+$colour$
+\end

core/wiki/paletteeditor.tid

@@ -1,39 +1,3 @@
 title: $:/snippets/paletteeditor
 
-\define lingo-base() $:/language/ControlPanel/Palette/Editor/
-\define describePaletteColour(colour)
-<$transclude tiddler="$:/language/Docs/PaletteColours/$colour$"><$text text="$colour$"/></$transclude>
-\end
-<$set name="currentTiddler" value={{$:/palette}}>
-
-<<lingo Prompt>> <$link to={{$:/palette}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
-
-<$list filter="[all[current]is[shadow]is[tiddler]]" variable="listItem">
-<<lingo Prompt/Modified>>
-<$button message="tm-delete-tiddler" param={{$:/palette}}><<lingo Reset/Caption>></$button>
-</$list>
-
-<$list filter="[all[current]is[shadow]!is[tiddler]]" variable="listItem">
-<<lingo Clone/Prompt>>
-</$list>
-
-<$button message="tm-new-tiddler" param={{$:/palette}}><<lingo Clone/Caption>></$button>
-
-<table>
-<tbody>
-<$list filter="[all[current]indexes[]]" variable="colourName">
-<tr>
-<td>
-''<$macrocall $name="describePaletteColour" colour=<<colourName>>/>''<br/>
-<$macrocall $name="colourName" $output="text/plain"/>
-</td>
-<td>
-<$edit-text index=<<colourName>> tag="input"/>
-<br>
-<$edit-text index=<<colourName>> type="color" tag="input"/>
-</td>
-</tr>
-</$list>
-</tbody>
-</table>
-</$set>
+<$transclude tiddler="$:/PaletteManager"/>

themes/tiddlywiki/vanilla/base.tid

@@ -2266,6 +2266,11 @@ a.tc-tiddlylink.tc-plugin-info:hover .tc-plugin-info > .tc-plugin-info-chunk > s
 	border: 1px solid #888;
 }
 
+input.tc-palette-manager-colour-input {
+	width: 100%;
+	padding: 0;
+}
+
 /*
 ** Table of contents
 */