feat(workflows): redesign the workflow library, previews and editor nodes

docs/src/content/docs/Users Guide/04.Image Generation/01.introduction.mdx

@@ -51,6 +51,8 @@ Hover over **Invoke** to see what will be queued, for example *1 prompt × 4 ite
 
 The **Queue** panel lists recent jobs. Cancel a pending, waiting or running job from its row, and retry a failed or canceled job from the session the server saved for it, independently of your current settings. A retried job's results go where the original was headed while the tab that sent it is still open: back to its place in the Canvas staging area, or to the Gallery board it was sent to. This also holds when you retry several failed items of one batch one after another. A retried Canvas job is staged in a tab where its project is open; if that project is open nowhere, its result does not appear. Once that tab is gone, for example after a reload, or once its Canvas was replaced with a new document, Canvas results are staged once, at the current bounding box, by a tab with the project open, and Gallery results appear in the Gallery, on **Uncategorized** unless the job itself saved them to a board. Expand a row to cancel its whole batch while other batches keep running, or to open **View JSON**, which shows the graph the server actually ran, its results and the embedded workflow. The panel menu clears failed items, clears every finished item while keeping queued and running work, or clears the whole queue. The **Cache** button in the panel header opens the server caches: **Models** shows how much of the model cache is in use and how often a model was already loaded, with **Clear** to unload unlocked models; **Invocations**, the cache of node outputs reused when a node runs again unchanged, can be cleared, disabled or re-enabled. On a server shared by several people, only administrators see the **Cache** button.
 
+To see what a panel would run, choose **View graph** from the actions menu in its header (Generate, Canvas, Upscale, Video or Workflow). **Nodes** draws it as the [workflow library](/users-guide/workflows/editor-reference/#your-workflows) previews a workflow: small value nodes fold into labels on the nodes they feed (**Show all** draws every node), markers show the nodes whose values you set and the result, and selecting a node opens a card with its values. A value set in Generate is named for its setting and links to it, such as **Generate → Steps**, which closes the preview and takes you there. **Graph** shows the compiled graph, the JSON the server is sent, which is what a bug report needs; when the panel's settings cannot be compiled, both views say why. For the Workflow panel, **Nodes** shows your node names and notes, even while the workflow does not compile, and **Inputs** shows its form. Beside the nodes are the panel's main settings and where results go, then notices such as a seed drawn afresh for each run, with **Show node**. The bottom of the preview says whether the run can go: **Ready to invoke** or **Can't invoke yet**. Its **Invoke** is the top bar's, for this panel: when something is in the way it counts the issues and opens the same list, each issue with its fix or a way to where it is fixed, which closes the preview. Invoking from there queues this panel's graph and closes the preview. For every panel but Workflow, **Edit as workflow** opens the graph in the workflow editor. Generate's and the Workflow panel's views follow your changes while open, keeping an open card while its node remains; Canvas, Upscale and Video show the graph they last compiled. The **⋯** menu copies or downloads the graph's JSON and opens the workflow in the workflow editor, saves it to the library or forks it into a new project. <kbd>Esc</kbd> closes an open card, then the preview, as does the close button at its top.
+
 ## Routing images to the Gallery or the Canvas
 
 Every press of **Invoke** has a *route*: a **source**, the panel whose settings are used, and a **destination**, where the results go. Images can go to one of two destinations:

docs/src/content/docs/Users Guide/08.Workflows/01.introduction.mdx

@@ -55,8 +55,8 @@ Hover over a numbered circle, or tap it on a touchscreen, for a short descriptio
 | 1 | **Workflow panel** | The workflow's **form**: its most important settings as simple controls, like a Generate panel for this workflow. |
 | 2 | **View** / **Edit** | **View** uses the form. **Edit** lets you design the form, edit the workflow's details (name, description, author, tags, notes), and inspect the selected node. |
 | 3 | **Editor toolbar** | Tools for panning, box and lasso selection, and erasing nodes or connections; **Zoom in**, **Zoom out** and **Fit view**; **Arrange nodes**, which lays out the whole graph, or just the selected nodes in place, as one undoable step; **Download workflow as PNG**; and **Node opacity**. |
-| 4 | **Workflow name** | The active workflow. Click it to open the **Workflows** library. |
-| 5 | **Workflow actions** | **Add node** (**+**), **Save to library…**, the save status, settings, and the **⋯** menu with **Workflow details…**, **Rename workflow…**, **Import workflow JSON…**, **Export workflow JSON**, **New workflow** and more. |
+| 4 | **Workflow name** | The active workflow. Click it to switch to another of the project's workflows, start a **New workflow**, or choose **Workflow library…** to open the **Workflows** library. |
+| 5 | **Workflow actions** | **Add node** (**+**), **Save to library…**, the save status, settings, and the **⋯** menu with **Rename…**, **Details…** and **Save to library…** for this workflow, **Import from JSON…**, and **Export** (**Export JSON**, **Copy JSON**, **Download as PNG**). |
 | 6 | **The graph** | The workflow's nodes and connections. Drag nodes by their title bar; scroll to zoom; drag empty space to pan. |
 | 7 | **Minimap** | An overview of the whole graph for finding your way around large workflows. |
 | 8 | **Gallery and Queue** | Where results appear, with the Queue, Preview and Image Map on the right-hand rail. |
@@ -68,7 +68,7 @@ Hover over a numbered circle, or tap it on a touchscreen, for a short descriptio
 * **Add a node** by pressing **Shift+A** or **Space** in the editor, or with the **+** button in its header, then search for it by name.
 * **Connect nodes** by dragging from an output on the right of one node to an input on the left of another.
 * **Choose which images are kept.** Only nodes with **Save to Gallery** checked, at the bottom of image nodes, send their images to the Gallery.
-* **Manage workflows** from the **Workflows** library: click the workflow's name in the editor's header.
+* **Switch workflows** from the workflow's name in the editor's header: its menu lists the project's workflows. **New workflow** at the bottom of that menu adds a blank one, and **Workflow library…** opens the **Workflows** library to manage them.
 
 The [Workflow Editor Reference](/users-guide/workflows/editor-reference/) covers all of this in detail, along with connectors, the library, common node patterns, community nodes and keyboard shortcuts.
 
@@ -84,7 +84,7 @@ You need an SDXL model and an SDXL VAE, such as the *sdxl-vae-fp16-fix* starter
 
 1. Press **Alt+4** for the Workflow layout.
 
-2. Click the workflow's name at the top of the editor to open the **Workflows** library, go to **Browse**, and open **Text to Image - SDXL**. A copy is added to your project and becomes the active workflow.
+2. Click the workflow's name at the top of the editor and choose **Workflow library…** to open the **Workflows** library, go to **Browse**, and open **Text to Image - SDXL**. A copy is added to your project and becomes the active workflow.
 
 3. In the **Main Model - SDXL** node, choose your SDXL model in **Model**, and in the **VAE Model** node choose an SDXL VAE.
 
@@ -133,13 +133,13 @@ In summary, the **Image Compositor**'s settings are:
 
 A workflow with a dozen nodes is not the most convenient thing to use day to day. The **form** in the Workflow panel on the left gathers the settings you actually change into one simple panel, like the Generate panel.
 
-To add a setting to the form, click the **pin** icon at the right end of its row in the node (**Add to form**). Only settings with their own control can be pinned; connected inputs cannot.
+To add a setting to the form, point at its row in the node (or move keyboard focus into it) and click the **+** button at the right end of the row (**Add to form**). Only settings with their own control can go in the form; connected inputs cannot.
 
 <Steps>
 
 1. The SDXL workflow already puts its **Positive Prompt**, **Negative Prompt**, **Model**, VAE and board settings in the form.
 
-2. In **Image Compositor**, pin **Image Background**, **Threshold**, **X Offset** and **Y Offset**. The pins turn blue, and the settings appear at the end of the form.
+2. In **Image Compositor**, add **Image Background**, **Threshold**, **X Offset** and **Y Offset** to the form. Their names turn blue with a link mark, and the settings appear at the end of the form.
 
 3. In the Workflow panel, click **Edit**, then **Form**. Each setting is a card:
    * Drag a card's title bar to reorder it.
@@ -151,15 +151,15 @@ To add a setting to the form, click the **pin** icon at the right end of its row
 
 </Steps>
 
-<Image src={formEdit} alt="The Workflow panel in Edit mode, with the Form tab listing the pinned settings as cards and the Node Inspector below." width={380} />
+<Image src={formEdit} alt="The Workflow panel in Edit mode, with the Form tab listing the settings added to the form as cards and the Node Inspector below." width={380} />
 
 In **View**, the form works like any generation panel: change the prompt or the background and press **Invoke**. The form is part of the workflow, so it is saved with it, exported with it, and shown to anyone who opens your workflow.
 
 <Image src={formView} alt="The finished form in View mode: Positive Prompt, Negative Prompt, Model, the Image Background with a mountain landscape, Threshold, X Offset and Y Offset." width={380} />
 
 ### 5. Save and share it
 
-Use **Details** in the Workflow panel's Edit mode to give the workflow a name and description, then click **Save to library…** in the editor's header to keep it in your library for other projects. To share it, choose **Export workflow JSON** from the **⋯** menu.
+Use **Details** in the Workflow panel's Edit mode to give the workflow a name and description, then click **Save to library…** in the editor's header to keep it in your library for other projects. To share it, choose **Export** → **Export JSON** from the **⋯** menu.
 
 ## Learn more