📚 Update user guide for upcoming release features

Document stroke to path, toolbar flyouts, line and arrow tools,
font previews, page multi-select, and dashboard grid/list view.

Relates to #9145, #10403, #10580, #10691

docs/user-guide/account-teams/projects-files.njk

@@ -56,6 +56,10 @@ desc: Learn how to organize your work in Penpot. Create, manage and organize pro
 </figure>
 <p>When creating a file, you'll be asked to give it a name. The file will open in the workspace where you can start designing immediately.</p>
 
+<h3 id="file-view">Grid and list view</h3>
+<p>In the dashboard header you can switch how files are shown: a thumbnail <strong>Grid view</strong> or a compact <strong>List view</strong>. The choice is kept in the browser and applies both to the team files view and inside a project.</p>
+<p>List view shows the file name, whether the file is a shared library, the last modification time, and the same options menu as the file cards.</p>
+
 <h3 id="edit-file">Edit a file</h3>
 <p>To rename a file, right-click on the file card in the dashboard and select <strong>Rename</strong>, or click on the three-dot menu on the file card. Enter the new name and confirm the change. You can also access file settings and other options from the file's context menu.</p>
 

docs/user-guide/designing/color-stroke.njk

@@ -122,8 +122,14 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
   <img alt="Multiple strokes" src="/img/styling/stroke-multiple.webp"/>
 </figure>
 
+<h2 id="stroke-to-path">Stroke to path</h2>
+<p>A path is the underlying geometry: a sequence of points and segments (straight lines or Bezier curves). A stroke is the visible line drawn along that path, with properties such as width, color, opacity, dashes, caps, and joins.</p>
+<p><strong>Stroke to path</strong> turns the visible outline of a stroke into a separate, editable path. You can then reshape or style that outline independently of the original path. The new shape is usually closed. That matters for SVG, boolean operations, and editing the outline as geometry.</p>
+<p>To convert a stroke, select a layer that has one, open the layer menu, and choose <strong>Stroke to path</strong>. Penpot creates a new path from each stroke (named with " (stroke)") and removes the strokes from the original layer.</p>
+<p class="advice">Stroke to path is currently available when <a href="/user-guide/first-steps/troubleshooting-webgl/">WebGL rendering</a> is enabled.</p>
+
 <h2 id="stroke-caps">Stroke Caps</h2>
-<p>Ever needed an arrow to point something? You can style the ends of any open paths selecting different styles for each end of an open path.</p>
+<p>Ever needed an arrow to point to something? You can style the ends of any open paths selecting different styles for each end of an open path. You can also start from the <a href="/user-guide/designing/layers/#lines-arrows">Arrow tool</a>, which already applies a triangle cap.</p>
 <figure>
   <video title="Stroke cap" muted="" playsinline="" controls="" width="100%" poster="/img/styling/stroke-cap.webp" height="auto">
     <source src="/img/styling/stroke-cap.mp4" type="video/mp4">

docs/user-guide/designing/layers.njk

@@ -140,7 +140,7 @@ Penpot allows you to decide if the fill of an artboard will be shown in exports,
 <h3 id="rectangles-ellipses">Rectangles and ellipses</h3>
 <p>Rectangle and ellipses are two basic “primitive” geometric shapes that are useful when starting
 a design.</p>
-<p>The shortcut keys are <kbd>E</kbd> for ellipses and <kbd>R</kbd> for rectangles.</p>
+<p>The shortcut keys are <kbd>E</kbd> for ellipses and <kbd>R</kbd> for rectangles. Both tools live in the shapes flyout of the toolbar, together with line and arrow.</p>
 <p>To find out more about how to edit and modify these shapes go to <a href="/user-guide/designing/layers/#layer-actions">Layer basics</a>.</p>
 <figure>
   <video title="Rectangles and ellipses" muted="" playsinline="" controls="" width="auto" poster="/img/objects/rectangles-ellipses.webp" height="auto">
@@ -151,13 +151,24 @@ a design.</p>
 <h3 id="text">Text</h3>
 <p>Text layers are how you add copy to your designs in Penpot. If you want to go deeper into fonts, typography and advanced text options, check the dedicated <a href="/user-guide/designing/text-typo/">Text & Typography</a> section.</p>
 
+<h3 id="lines-arrows">Lines and arrows</h3>
+<p>Use the Line and Arrow tools to draw a two-point path in one drag. They live in the shapes flyout of the toolbar, together with rectangle and ellipse.</p>
+<ul>
+  <li><strong>Line</strong> (<kbd>L</kbd>): click and drag. Hold <kbd>Shift/⇧</kbd> to snap the angle in 15 degree increments.</li>
+  <li><strong>Arrow</strong>: the same gesture, with a triangle arrow cap on the end. Pick it from the shapes flyout. You can change or remove the cap from the <a href="/user-guide/designing/color-stroke/#stroke-caps">stroke caps</a>.</li>
+</ul>
+<p>The result is a regular path, so you can edit its nodes and stroke like any other path.</p>
+<figure>
+  <img src="/img/objects/line-arrow-tools.webp" alt="Line and Arrow tools in the shapes flyout of the toolbar" />
+</figure>
+
 <h3 id="curves">Curves (freehand)</h3>
 <p>The curve tool allows a path to be created directly in a freehand mode.
-Select the curve tool by clicking on the icon at the toolbar or pressing <kbd>Shift/⇧</kbd> + <kbd>c</kbd>.
+Select the curve tool from the free-draw flyout in the toolbar or press <kbd>Shift/⇧</kbd> + <kbd>C</kbd>.</p>
 <p>The path created will contain a lot of points, but it is edited the same way as any other curve.</p>
 
 <h3 id="paths">Paths (bezier)</h3>
-<p>A path is composed of two or more nodes and the line segments between them, which may also be curved. To draw a new path you have to select the path tool by clicking on the icon at the toolbar or pressing <kbd>P</kbd>. Then you have two ways to create the path:</p>
+<p>A path is composed of two or more nodes and the line segments between them, which may also be curved. To draw a new path, select the path tool from the free-draw flyout in the toolbar or press <kbd>P</kbd>. Then you have two ways to create the path:</p>
 <ol>
   <li><strong>Click</strong> to create a new corner node.</li>
   <li><strong>Click and drag</strong> to create a curved node.</li>
@@ -211,7 +222,7 @@ You can choose to edit individual nodes or create new ones. Press <kbd>Esc</kbd>
 <h2 id="layer-actions">Layer actions</h2>
 
 <h3 id="creating-layers">Create</h3>
-<p>To create a layer you have to select the type of layer by clicking the selected tool (board, rectangle, ellipse, text, image, path or curve) at the toolbar. Then you usually have to click and drag your mouse on the viewport. </p>
+<p>To create a layer, pick a tool from the toolbar. Board, text, and image stay on the toolbar. Rectangle, ellipse, line, and arrow are in the shapes flyout. Path and curve are in the free-draw flyout. Then you usually click and drag on the viewport.</p>
 <p>Hold <kbd>Shift/⇧</kbd> while creating an ellipse or a rectangle to maintain equal width and height.</p>
 <figure>
   <video title="Layers create" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-create.webp" height="auto">

docs/user-guide/designing/text-typo.njk

@@ -32,7 +32,7 @@ desc: Penpot's guide on custom fonts! Upload, manage, and use custom fonts in Pe
   <img src="/img/objects/text-options.webp" alt="text options">
 </figure>
 <ol>
-  <li><strong>Font family.</strong> Penpot includes by default the <a href="https://fonts.google.com/" target=”_blank”>Google Fonts</a> cataloge. You can also <a href="/user-guide/designing/text-typo/#custom-fonts">install your own fonts</a>.</li>
+  <li><strong>Font family.</strong> Penpot includes by default the <a href="https://fonts.google.com/" target=”_blank”>Google Fonts</a> cataloge. You can also <a href="/user-guide/designing/text-typo/#custom-fonts">install your own fonts</a>. In the font selector, each family name is shown in its own typeface so you can compare fonts before applying one. The name is the preview. While a font loads, you may briefly see the interface font instead. The preview uses a default variant, not every weight or style of the family.</li>
   <li><strong>Font size.</strong></li>
   <li><strong>Font type.</strong></li>
   <li><strong>Line height</strong> (in pixels).</li>

docs/user-guide/designing/workspace-basics.njk

@@ -43,6 +43,15 @@ desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools,
   </video>
 </figure>
 
+<h4 id="select-delete-pages">Select and delete several pages</h4>
+<p>In the Pages panel you can select more than one page and delete them in a single action.</p>
+<ul>
+  <li>Click a page to open it. This selects only that page.</li>
+  <li><kbd>Shift/⇧</kbd> + click to select a range of pages. This does not change the page you are viewing.</li>
+  <li><kbd>Ctrl/⌘</kbd> + click to add or remove one page from the selection. This does not navigate.</li>
+</ul>
+<p>Right-click a selected page and choose <strong>Delete pages</strong>. Confirm to remove all selected pages in one step. A file always keeps at least one page. Page separators cannot be included in the selection.</p>
+
 <h4 id="page-separators">Page separators</h4>
 <p>You can add visual dividers in the page list to group pages without extra structure. Create an empty page, then rename it to <code>---</code>. The page appears as a horizontal line in the list.</p>
 <p>A page only becomes a separator if its name is <code>---</code> and the page has no content on the canvas. A page with content that is named <code>---</code> stays a normal page. Separators cannot be opened or selected; you can reorder or delete them like other pages.</p>

docs/user-guide/first-steps/shortcuts.njk

@@ -681,8 +681,8 @@ desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interface
     </tr>
     <tr>
       <td>Curve</td>
-      <td style="text-align: center;"><kbd>Ctrl</kbd><kbd>C</kbd></td>
-      <td style="text-align: center;"><kbd>⌘</kbd><kbd>C</kbd></td>
+      <td style="text-align: center;"><kbd>Shift</kbd><kbd>C</kbd></td>
+      <td style="text-align: center;"><kbd>⇧</kbd><kbd>C</kbd></td>
     </tr>
     <tr>
       <td>Ellipse</td>
@@ -694,6 +694,11 @@ desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interface
       <td style="text-align: center;"><kbd>Shift</kbd><kbd>K</kbd></td>
       <td style="text-align: center;"><kbd>⇧</kbd><kbd>K</kbd></td>
     </tr>
+    <tr>
+      <td>Line</td>
+      <td style="text-align: center;"><kbd>L</kbd></td>
+      <td style="text-align: center;"><kbd>L</kbd></td>
+    </tr>
     <tr>
       <td>Path</td>
       <td style="text-align: center;"><kbd>P</kbd></td>

docs/user-guide/first-steps/the-interface.njk

@@ -41,9 +41,9 @@ desc: Discover Penpot's free user guide! Learn the interface, workspace basics,
 
 <ol>
   <li><strong>Viewport:</strong> An infinite canvas where you can design without limits.</li>
-  <li><strong>Toolbar: </strong> This is where you’ll find all the tools to quickly and easily create different types of layers: board, rectangle, ellipse, text, graphic, path, and free drawing.  <a href="/user-guide/designing/layers/">Learn more about layers.</a></li>
+  <li><strong>Toolbar: </strong> Tools to create layers. Board, text, and image stay on the toolbar. Shapes (rectangle, ellipse, line, and arrow) and free-draw tools (path and curve) are grouped in flyouts. Open a flyout to pick a tool, or use its shortcut.  <a href="/user-guide/designing/layers/">Learn more about layers.</a></li>
   <li><strong>Main menu:</strong> From the main menu, you can customize your workspace. Manage the visibility of grids, rulers, and panels. Enable or disable snapping and dynamic alignment. Add or remove the file as a Shared Library. You’ll also find help resources here.</li>
-  <li><strong>Pages:</strong> A file can contain as many pages as you need. Each page has its own viewport (the almost infinite area where you design) and its own layers. You can create, delete, or reorder pages as needed.</li>
+  <li><strong>Pages:</strong> A file can contain as many pages as you need. Each page has its own viewport (the almost infinite area where you design) and its own layers. You can create, delete, or reorder pages, and select several pages at once to delete them. <a href="/user-guide/designing/workspace-basics/#layer-basics">More about pages.</a></li>
   <li><strong>Layers:</strong> Layers are the different objects you can place in the design viewport. <a href="/user-guide/designing/workspace-basics/#layer-basics">More about Layers panel.</a></li>
   <li><strong>Rulers:</strong> Rulers provide coordinates to help you design. You can also drag guides from them.</li>
   <li><strong>Color palette:</strong> The color palette gives you quick access to a visible library of colors. Use the menu to easily switch between libraries. <a href="/user-guide/designing/color-stroke/#color-palette">Learn more about the color palette.</a>.</li>
@@ -137,7 +137,7 @@ desc: Discover Penpot's free user guide! Learn the interface, workspace basics,
   <li><strong>User area:</strong> This must be you! Access your <a href="/user-guide/account-teams/your-account"> profile settings</a>, Penpot tutorials, the Penpot Community and more. You can also find here a way to leave us feedback. We’d love to read your thoughts :). </li>
   <li><strong>Comments notifications:</strong> Here you will be able to see if you have unread comments inside the files of the team. There's also a button to mark all notifications as read.</li>
   <li><strong>Create project:</strong> Create as many projects as you need to organize your designs.</li>
-  <li><strong>File card:</strong> Basic information about a file at plain sight. A preview, update info or if it’s added as a Shared Library. From there you can perform several actions over the file (rename, duplicate, move, download, delete).</li>
+  <li><strong>File card:</strong> Basic information about a file at plain sight. A preview, update info or if it’s added as a Shared Library. From there you can perform several actions over the file (rename, duplicate, move, download, delete). You can also switch the files area between a thumbnail grid and a compact list. <a href="/user-guide/account-teams/projects-files/#file-view">More about grid and list view.</a></li>
   <li><strong>Libraries & Templates module:</strong> A curated selection of Libraries & Templates files ready to import.</li>
 </ol>