edits to rns and components

Author: uksla

docs/components.md

@@ -40,6 +40,14 @@ These are the basic terms related to components and their functions:
 
 * **Component page**. A dedicated document page used for storing main components. Lunacy adds it automatically when you create a component.
 
+    <div class="callout callout--info">
+    <p><strong>Note:</strong> Starting from v.12, the Component page appears only in two cases and only in local files:</p>
+        <ul>
+            <li>When you copy a component from another file to a local file</li>
+            <li>When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)</li>
+        </ul>
+    </div>
+
 * **Component state**. Components from the same category or subcategory are called **component states**. They define the different styles for one component.
 
 * **Nested components**. You can nest several components in a more complex component. This gives you the most freedom and flexibility in editing your designs, and it’s an even more powerful feature when coupled with <a href="https://lunacy.docs.icons8.com/autolayout/#nested-auto-layouts" target="_blank">nested auto layouts</a>. 
@@ -48,12 +56,12 @@ These are the basic terms related to components and their functions:
 
 To **create a component**:
 
-1. Select the layer you want to convert into a component.
-2. Click `+` in the **Component** section of the right panel or press `Ctrl + Alt + K` / `⌘ + ⌥ + K`.
+1. Select the element you want to convert into a component.
+2. Click <embed type="image/svg+xml" alt="go_to_main" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/0yVpQqG2_kmdN0fYegHJ4g.svg" width="16" /> in the context toolbar at the top of the canvas or press `Ctrl + Alt + K` / `⌘ + ⌥ + K`.
 
-<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_components_methods.png" height="auto"><source src="/public/creating_components_methods.mp4" type="video/mp4"></video>
+<embed type="image/svg+xml" alt="creating_component" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/hRtUIR33v0uSHlyfeTDbqA.svg" /> 
 
-You can also select a layer and click <embed type="image/svg+xml" alt="go_to_main" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/0yVpQqG2_kmdN0fYegHJ4g.svg" width="16" /> in the context toolbar at the top of the canvas or select the **Create component** option on the context menu.
+<!--
 
 #### Layers vs. Frames
 
@@ -67,23 +75,31 @@ The difference is shown here:
 
 Find out more about [component pages](#components-page).
 
+-->
+
 #### Components and instances in the Layer list
 
-<embed type="image/svg+xml" alt="components_instances_in_layer_list" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/f8iTdn1orUiVLyZVImJClg.svg" width="844" /> 
+<embed type="image/svg+xml" alt="Components_in_layer_list" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/-kkur9FADkmKjIa6O0cOBg.svg" /> 
+
+
+Main components are bold and colored pink in the <a href="https://lunacy.docs.icons8.com/interface/#layer-list" target="_blank">Layer list</a>, and there’s a component symbol (<embed type="image/svg+xml" alt="main_component" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/JApz_Mo2XE6YIoPMoYA3ow.svg" width="16" />) in front of their name.
 
-Main components are bold and colored pink (<embed type="image/svg+xml" alt="color_code_F15085" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/b6VBjbQ0FEaLpb01JY4uEw.svg" width="12" />) in the <a href="https://lunacy.docs.icons8.com/interface/#layer-list" target="_blank">Layer list</a>, and there’s a component symbol (<embed type="image/svg+xml" alt="main_component" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/JApz_Mo2XE6YIoPMoYA3ow.svg" width="16" />) in front of their name.
+Main components with more than one [state](#component-states) come with a dashed border around the symbol.
 
 Component instance names aren’t bold but have the instance symbol (<embed type="image/svg+xml" alt="instance_icon" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/7zBFwNg0JEKWT8fAiIVn9A.svg" width="16" />) and the same pink color. When they’re selected, their properties and options appear in the **Component** section of the right panel.
 
 ## [Reusing components](reusing-components)
 
 All the components in your document appear in the **Components tab** in the left panel.
 
-To **add a component instance** to the canvas, drag it from the left panel to where you want to place it:
+To **add a component instance** to the canvas, you can:
 
-<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/reusing_components_left_panel.png" height="auto"><source src="/public/reusing_components_left_panel.mp4" type="video/mp4"></video>
+- Drag it from the **Components tab** to where you want to place it.
+- Duplicate the existing instance on the canvas.
 
-Right-click a component in the left panel to bring up the context menu with these options:
+<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/adding_components_ph.png" height="auto"><source src="/public/adding_copmonents.mp4" type="video/mp4"></video>
+
+Right-click a component in the **Components tab** to bring up the context menu with these options:
 
 - Rename component
 - Edit component
@@ -93,7 +109,13 @@ Right-click a component in the left panel to bring up the context menu with thes
 - Expand all
 - Collapse all
 
-<div class="callout callout--info"> <p><strong>Note:</strong> If you used any components from built-in or manually created <a href="https://lunacy.docs.icons8.com/libraries/#ui-kits" target="_blank">UI kits</a>, they will also appear in the Components tab.</p> </div>
+<embed type="image/svg+xml" alt="components_conext_menu" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/eML-tlBOk0aTrB6E2O7xiA.svg" /> 
+
+
+<div class="callout callout--info"> <p><strong>Note:</strong> If you created any elements using the <a href="https://lunacy.docs.icons8.com/tools/#gui-tool" target="_blank">GUI tool</a>, they will also appear in the <b>Components tab</b> in the group named <b>Web</b>.</p> </div>
+
+
+<!--
 
 ## [Managing components](managing-components)
 
@@ -134,39 +156,49 @@ You can use **Components page** that Lunacy generates automatically to store all
 
 <div class="callout callout--info"> <p><strong>Note:</strong> If you set one of your pages as a Components page, make sure its primary purpose is to store components. You’ll avoid confusion, and it will be easier to organize all of your design elements.</p> </div>
 
+-->
+
 ## [Component states](#component-states)
 
-You can create several **states** for a component and switch between them as needed in the **right panel**. 
+You can create multiple states for a component and switch between them as needed. States let you define variations like *Default*, *Hover*, or *Pressed*.
 
 To **create a component state**:
 
-1. Select a component instance.
-2. Click `+` in the **Component** section of the **right panel** or press `Ctrl + Alt + P` / `⌘ + ⌥ + P`.
-3. Adjust your component for the new state and name it.
-4. Click on any empty area on the canvas.
+1. Select a component.
+2. Click <embed type="image/svg+xml" alt="Add New" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/xeqQWIYNtUePMxnmkm1vMA.svg" /> in the context tool bar or press `Ctrl + Alt + P` / `⌘ + ⌥ + P`. A dashed frame will appear around the component, and the new state will be added below the original.
+3. Make the required changes to the new state.
+4. To create additional states, select the original component or any existing state and click `+` again.
+
+
+Lunacy automatically assigns names to states (Default, Hover, Pressed, etc.). 
+
+To **rename a state**:
+
+1. Select the state.
+2. Press F2 and the new state name after the slash (for example, `Button / Hover` > `Button / Disabled`).
 
-<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/creating_component_state.png" height="auto"><source src="/public/creating_component_state.mp4" type="video/mp4"></video>
+**Alternative workflow**
 
-A new component will appear near the default main component, defining the new component state. 
+You can also create a new component state from any instance on the canvas.
 
-Lunacy also changes the name of components when you create new states, automatically placing them into [categories](#organizing-components). You can edit categories anytime in the **Components tab**.
+See both methods in the video below.
 
-New component states for a distinct component will be displayed in the right panel as you select the component’s instances.
+<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/component_states_ph.png" height="auto"><source src="/public/copmonent_states.mp4" type="video/mp4"></video>
 
 To **switch through component states**:
 
 1. Select a component instance.
 2. Choose the new component state in the **right panel**.
 
-<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/switching-component_state.png" height="auto"><source src="/public/switching-component_state.mp4" type="video/mp4"></video>
+<video autoplay="" muted="" loop="" playsinline="" width="100%" poster="/public/swtiching_component_states_ph.png" height="auto"><source src="/public/swtiching_copmonent_states.mp4" type="video/mp4"></video>
 
 <div class="callout callout--info"> <p><strong>Note:</strong> Switching component states doesn’t affect overrides. This means that if you change the component state for an instance with overrides, the overrides you created will stay unchanged.</p> </div>
 
 ## Organizing components
 
 As your document grows along with the number of components in it, you'll probably want to organize them so you can quickly find the necessary component when you need it. 
 
-This is how componenet categories and subcategories appear in the **Components tab**:
+This is how component categories and subcategories appear in the **Components tab**:
 
 <embed type="image/svg+xml" alt="categories_components" src="https://cdn-eu.icons8.com/docs/M9n6bSgrBEaWHOHZwLkY3A/TDamndg4PkCuDPWyD2wrEQ.svg" width="844" /> 
 

docs/public/adding_components_ph.png

@@ -107,11 +107,12 @@ The web version is coming soon. Follow us on [X](https://x.com/Icons8_Lunacy) (e
 ### New zooming and panning options
 The zoom control in the top-right corner now includes two new features:
 
-**Right Click Drag Pan** — pan the canvas by dragging while holding the right mouse button
+**Pan with Right Click** — pan the canvas by dragging while holding the right mouse button
 
-**Scroll Wheel Zoom** — zoom the canvas using the scroll wheel without needing to hold `Ctrl` or `Cmd`
+**Zoom with Scroll Wheel** — zoom the canvas using the scroll wheel without needing to hold `Ctrl` or `Cmd`
+
+<embed type="image/svg+xml" alt="new_zooming_options" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/Mo3KvydXnUqpkv9lHGb-LQ.svg" /> 
 
-<embed type="image/svg+xml" alt="new styles" src="https://cdn-eu.icons8.com/docs/Dko8QE6mZ06fz2gAGGUBbA/Mo3KvydXnUqpkv9lHGb-LQ.svg" /> 
 
 
 ### Lower RAM usage