docs: add gifs and examples

docs/src/content/docs/en/user-guide/daily-use/diagnostics.mdx

@@ -5,7 +5,7 @@ description: Use Vide diagnostics and handle refresh timing, stale results, and
 
 import FeatureExample from '../../../../../components/FeatureExample.astro';
 import VideLab from '../../../../../components/VideLab.astro';
-import codeActionsGif from '../../../assets/features/code-actions.gif';
+import missingPortGif from '../../../assets/features/missing-port.gif';
 import { diagnosticFiles } from '../../../../../examples/dailyUse';
 
 Diagnostics appear in the VS Code `Problems` panel and as editor underlines. Syntax and parse errors usually only need the current file; cross-file semantic diagnostics need project information such as `sources`, `include_dirs`, `defines`, and `libraries`.
@@ -25,22 +25,22 @@ If you need diagnostics while typing:
 ```
 
 <FeatureExample
-  image={codeActionsGif}
-  imageAlt="Animation showing VS Code Problems diagnostics and editor underlines"
-  imageCaption="Diagnostics in VS Code"
-  labCaption="The browser example contains a diagnostic"
+  image={missingPortGif}
+  imageAlt="Animation showing a missing instance port diagnostic in VS Code"
+  imageCaption="Missing port diagnostics in VS Code"
+  labCaption="The browser example reproduces the same missing port"
 >
   <VideLab
     projectId="daily-diagnostics"
     projectLabel="Features: Diagnostics"
-    entryFile="rtl/diagnostic_demo.sv"
+    entryFile="missing_port_example.v"
     files={diagnosticFiles}
     height="100%"
-    initialActiveFile="rtl/diagnostic_demo.sv"
-    initialSelection="8:5-8:22"
+    initialActiveFile="missing_port_example.v"
+    initialSelection="14:5-17:6"
     initialDiagnosticsOpen
-    title="Diagnostics and the Problems Panel"
-    description="This example intentionally leaves a syntax problem. Open the diagnostics panel to see markers and the diagnostics list in the browser playground."
+    title="Missing Port Connection Diagnostic"
+    description="This example intentionally leaves child.y unconnected. Open the diagnostics panel to see markers and the diagnostics list in the browser playground."
   />
 </FeatureExample>
 

docs/src/content/docs/en/user-guide/daily-use/editing-assistance.mdx

@@ -5,29 +5,29 @@ description: Use completion, signature help, rename, port/parameter fixes, and d
 
 import FeatureExample from '../../../../../components/FeatureExample.astro';
 import VideLab from '../../../../../components/VideLab.astro';
-import codeActionsGif from '../../../assets/features/code-actions.gif';
+import codeActionRenameGif from '../../../assets/features/code-action-rename.gif';
 import { editAidFiles } from '../../../../../examples/dailyUse';
 
 Vide provides completion around instance connections, parameter assignments, expressions, preprocessor directives, and common RTL structures. Signature help shows target module parameters and ports while your cursor is in parameter or port lists.
 
 Related settings reference: [Signature Help](../../../advanced-guide/vscode-settings/#signature-help), [Diagnostics](../../../advanced-guide/vscode-settings/#diagnostics).
 
 <FeatureExample
-  image={codeActionsGif}
-  imageAlt="Animated VS Code code action menu showing quick fixes"
-  imageCaption="Quick fixes in VS Code"
-  labCaption="Try the same project in the browser"
+  image={codeActionRenameGif}
+  imageAlt="Animation showing code actions and rename in VS Code"
+  imageCaption="Code actions and rename in VS Code"
+  labCaption="The browser example reuses the same counter demo"
 >
   <VideLab
     projectId="daily-edit-aids"
     projectLabel="Features: Edit Aids"
-    entryFile="rtl/fifo_client.sv"
+    entryFile="code_action_rename.v"
     files={editAidFiles}
     height="100%"
-    initialActiveFile="rtl/fifo_client.sv"
-    initialSelection="9:3-9:14"
-    title="Ordered Ports, Parameters, and Code Actions"
-    description="This instance uses ordered parameters and ordered ports. Try inlay hints, signature help, and the action that converts ordered connections to named connections."
+    initialActiveFile="code_action_rename.v"
+    initialSelection="22:16-22:23"
+    title="Code Actions and Rename"
+    description="This example uses the counter/top demo. Try opening the lightbulb menu near the instance, or use Find References before renaming smp_cnt."
   />
 </FeatureExample>
 

docs/src/content/docs/en/user-guide/daily-use/formatting.mdx

@@ -3,34 +3,10 @@ title: Formatting
 description: Use Verilog/SystemVerilog formatting and handle verible paths and arguments.
 ---
 
-import FeatureExample from '../../../../../components/FeatureExample.astro';
-import VideLab from '../../../../../components/VideLab.astro';
-import codeActionsGif from '../../../assets/features/code-actions.gif';
-import { formattingFiles } from '../../../../../examples/dailyUse';
-
 Formatting entry points include VS Code's `Format Document`, `Format Selection`, and on-type formatting when pressing Enter. The only current formatter backend is `verible`, which calls the external `verible-verilog-format` executable; Vide does not bundle that tool.
 
 Related settings reference: [Formatter and Formatting](../../../advanced-guide/vscode-settings/#formatter-and-formatting).
 
-<FeatureExample
-  image={codeActionsGif}
-  imageAlt="Animation showing VS Code formatting commands"
-  imageCaption="Formatting entry points in VS Code"
-  labCaption="The browser example keeps unformatted source"
->
-  <VideLab
-    projectId="daily-formatting"
-    projectLabel="Features: Formatting"
-    entryFile="rtl/formatting_demo.sv"
-    files={formattingFiles}
-    height="100%"
-    initialActiveFile="rtl/formatting_demo.sv"
-    initialSelection="1:1-3:1"
-    title="Source Before Formatting"
-    description="This example keeps compact formatting so it can be compared with the VS Code Format Document and Format Selection entry points."
-  />
-</FeatureExample>
-
 ## Configure verible the First Time
 
 If `verible-verilog-format` is already on the `PATH` seen by VS Code, formatting can work without extra settings. When unsure, configure an absolute path:

docs/src/content/docs/en/user-guide/daily-use/language-support.mdx

@@ -5,7 +5,7 @@ description: Check how Vide recognizes Verilog/SystemVerilog files and where bas
 
 import FeatureExample from '../../../../../components/FeatureExample.astro';
 import VideLab from '../../../../../components/VideLab.astro';
-import codeActionsGif from '../../../assets/features/code-actions.gif';
+import completionGif from '../../../assets/features/completion.gif';
 import { languageFiles } from '../../../../../examples/dailyUse';
 
 The VS Code extension registers two language modes:
@@ -22,21 +22,21 @@ Diagnostics, go to definition, completion, hover, signature help, inlay hints, s
 Related settings reference: [Semantic Tokens](../../../advanced-guide/vscode-settings/#semantic-tokens), [Files](../../../advanced-guide/vscode-settings/#files).
 
 <FeatureExample
-  image={codeActionsGif}
-  imageAlt="Animation showing SystemVerilog syntax highlighting and language detection in VS Code"
-  imageCaption="Language detection in VS Code"
-  labCaption="The browser example opens a SystemVerilog file"
+  image={completionGif}
+  imageAlt="Animation showing completion in a Verilog file in VS Code"
+  imageCaption="Verilog completion in VS Code"
+  labCaption="The browser example uses the same Verilog demo"
 >
   <VideLab
     projectId="daily-language"
-    projectLabel="Features: Language Detection"
-    entryFile="rtl/traffic_light.sv"
+    projectLabel="Features: Completion"
+    entryFile="completion.v"
     files={languageFiles}
     height="100%"
-    initialActiveFile="rtl/traffic_light.sv"
-    initialSelection="1:1-5:16"
-    title="Language Detection and Syntax Highlighting"
-    description="This example uses a .sv file, typedef enum, and always_ff, which is enough to confirm syntax highlighting and language server wiring."
+    initialActiveFile="completion.v"
+    initialSelection="16:5-16:12"
+    title="Completion in a Verilog File"
+    description="This example uses the same adder/top demo as the VS Code recording, so you can check .v file recognition, project configuration, and language server wiring together."
   />
 </FeatureExample>
 

docs/src/content/docs/en/user-guide/daily-use/navigation.mdx

@@ -5,7 +5,7 @@ description: Use definition, references, hover, and document highlights, and han
 
 import FeatureExample from '../../../../../components/FeatureExample.astro';
 import VideLab from '../../../../../components/VideLab.astro';
-import codeActionsGif from '../../../assets/features/code-actions.gif';
+import gotoDefGif from '../../../assets/features/goto-def.gif';
 import { navigationFiles } from '../../../../../examples/dailyUse';
 
 Vide provides these reading features:
@@ -18,21 +18,21 @@ Vide provides these reading features:
 Related settings reference: [Scope](../../../advanced-guide/vscode-settings/#scope), [Semantic Tokens](../../../advanced-guide/vscode-settings/#semantic-tokens).
 
 <FeatureExample
-  image={codeActionsGif}
-  imageAlt="Animation showing VS Code navigation and hover"
-  imageCaption="Navigation and hover in VS Code"
-  labCaption="Try cross-file navigation in the browser"
+  image={gotoDefGif}
+  imageAlt="Animation showing VS Code jumping from top to the and_gate definition"
+  imageCaption="Cross-file navigation in VS Code"
+  labCaption="Try the same jump in the browser"
 >
   <VideLab
     projectId="daily-navigation"
     projectLabel="Features: Navigation"
-    entryFile="rtl/pipeline_top.sv"
+    entryFile="top.v"
     files={navigationFiles}
     height="100%"
-    initialActiveFile="rtl/pipeline_top.sv"
-    initialSelection="9:3-9:17"
-    title="Cross-file Navigation and Hover"
-    description="Try Go to Definition or Hover on pipeline_stage. The target module lives in another file, and the project is provided directly by this docs page."
+    initialActiveFile="top.v"
+    initialSelection="8:5-8:13"
+    title="Jump from Instance to Module Definition"
+    description="Try Go to Definition on and_gate. The target module lives in another file, and the project is provided directly by this docs page."
   />
 </FeatureExample>
 

docs/src/content/docs/en/user-guide/daily-use/structure.mdx

@@ -5,7 +5,7 @@ description: Use inlay hints, semantic highlighting, instance counts, outline, f
 
 import FeatureExample from '../../../../../components/FeatureExample.astro';
 import VideLab from '../../../../../components/VideLab.astro';
-import codeActionsGif from '../../../assets/features/code-actions.gif';
+import inlayHintsGif from '../../../assets/features/inlay-hints.gif';
 import { structureFiles } from '../../../../../examples/dailyUse';
 
 Structure help reduces the need to jump back and forth while reading RTL:
@@ -20,21 +20,21 @@ Structure help reduces the need to jump back and forth while reading RTL:
 Related settings reference: [Inlay Hints](../../../advanced-guide/vscode-settings/#inlay-hints), [Lens](../../../advanced-guide/vscode-settings/#lens), [Semantic Tokens](../../../advanced-guide/vscode-settings/#semantic-tokens).
 
 <FeatureExample
-  image={codeActionsGif}
-  imageAlt="Animation showing semantic highlighting, outline, and instance code lens in VS Code"
-  imageCaption="Structured reading aids in VS Code"
-  labCaption="The browser example contains a small module hierarchy"
+  image={inlayHintsGif}
+  imageAlt="Animation showing instance port inlay hints in VS Code"
+  imageCaption="Inlay hints in VS Code"
+  labCaption="The browser example reproduces the same mux demo"
 >
   <VideLab
     projectId="daily-structure"
     projectLabel="Features: Structure"
-    entryFile="rtl/feature_top.sv"
+    entryFile="inlay_hints.v"
     files={structureFiles}
     height="100%"
-    initialActiveFile="rtl/feature_top.sv"
-    initialSelection="8:3-15:5"
-    title="Semantic Highlighting, Folding, and Code Lens"
-    description="This example contains two modules and two instances, which is useful for observing semantic highlighting, folding ranges, references, and instance code lens."
+    initialActiveFile="inlay_hints.v"
+    initialSelection="18:5-23:6"
+    title="Instance Port Inlay Hints"
+    description="This example uses the mux2/top demo, which is useful for checking port connection inlay hints and target module resolution."
   />
 </FeatureExample>
 

docs/src/content/docs/user-guide/daily-use/diagnostics.mdx

@@ -5,7 +5,7 @@ description: 使用 Vide 诊断，并处理诊断太频繁、不更新、规则
 
 import FeatureExample from '../../../../components/FeatureExample.astro';
 import VideLab from '../../../../components/VideLab.astro';
-import codeActionsGif from '../../assets/features/code-actions.gif';
+import missingPortGif from '../../assets/features/missing-port.gif';
 import { diagnosticFiles } from '../../../../examples/dailyUse';
 
 诊断会显示在 VS Code 的 `Problems` 面板和编辑器下划线里。语法错误、解析错误通常只需要当前文件；跨文件语义诊断需要项目配置里的 `sources`、`include_dirs`、`defines`、`libraries` 等信息。
@@ -25,22 +25,22 @@ import { diagnosticFiles } from '../../../../examples/dailyUse';
 ```
 
 <FeatureExample
-  image={codeActionsGif}
-  imageAlt="VS Code 中 Problems 面板和编辑器诊断下划线的动图"
-  imageCaption="VS Code 中的诊断反馈"
-  labCaption="右侧示例包含可刷新的诊断"
+  image={missingPortGif}
+  imageAlt="VS Code 中提示实例缺少端口连接的动图"
+  imageCaption="VS Code 中的缺失端口诊断"
+  labCaption="右侧示例复现同一个缺失端口"
 >
   <VideLab
     projectId="daily-diagnostics"
     projectLabel="Features: Diagnostics"
-    entryFile="rtl/diagnostic_demo.sv"
+    entryFile="missing_port_example.v"
     files={diagnosticFiles}
     height="100%"
-    initialActiveFile="rtl/diagnostic_demo.sv"
-    initialSelection="8:5-8:22"
+    initialActiveFile="missing_port_example.v"
+    initialSelection="14:5-17:6"
     initialDiagnosticsOpen
-    title="诊断和 Problems 面板"
-    description="这个示例故意留下语法问题。打开诊断面板后可以看到浏览器 playground 里的标记和诊断列表。"
+    title="缺少端口连接的诊断"
+    description="这个示例故意漏接 child.y。打开诊断面板后可以看到浏览器 playground 里的标记和诊断列表。"
   />
 </FeatureExample>
 

docs/src/content/docs/user-guide/daily-use/editing-assistance.mdx

@@ -5,29 +5,29 @@ description: 使用补全、签名帮助、重命名、端口/参数修复和诊
 
 import FeatureExample from '../../../../components/FeatureExample.astro';
 import VideLab from '../../../../components/VideLab.astro';
-import codeActionsGif from '../../assets/features/code-actions.gif';
+import codeActionRenameGif from '../../assets/features/code-action-rename.gif';
 import { editAidFiles } from '../../../../examples/dailyUse';
 
 Vide 会在实例连接、参数赋值、表达式、预处理指令和常见 RTL 结构附近提供补全。把光标放在实例参数或端口列表里时，签名帮助会显示目标模块的参数和端口信息。
 
 相关设置参考：[Signature Help](../../../advanced-guide/vscode-settings/#signature-help)、[Diagnostics](../../../advanced-guide/vscode-settings/#diagnostics)。
 
 <FeatureExample
-  image={codeActionsGif}
-  imageAlt="VS Code 中打开代码操作菜单并选择快速修复的动图"
-  imageCaption="VS Code 中的快速修复入口"
-  labCaption="右侧示例可直接编辑和运行"
+  image={codeActionRenameGif}
+  imageAlt="VS Code 中使用代码操作和重命名的动图"
+  imageCaption="VS Code 中的代码操作和重命名"
+  labCaption="右侧示例复用同一个 counter demo"
 >
   <VideLab
     projectId="daily-edit-aids"
     projectLabel="Features: Edit Aids"
-    entryFile="rtl/fifo_client.sv"
+    entryFile="code_action_rename.v"
     files={editAidFiles}
     height="100%"
-    initialActiveFile="rtl/fifo_client.sv"
-    initialSelection="9:3-9:14"
-    title="有序端口、参数和代码操作"
-    description="这个实例使用有序参数和有序端口。试试行内提示、签名帮助，以及把有序连接转换成命名连接的操作。"
+    initialActiveFile="code_action_rename.v"
+    initialSelection="22:16-22:23"
+    title="代码操作和重命名"
+    description="这个示例使用 counter/top demo。试试在实例附近打开灯泡菜单，或先用 Find References 检查 smp_cnt 的重命名范围。"
   />
 </FeatureExample>
 

docs/src/content/docs/user-guide/daily-use/formatting.mdx

@@ -3,34 +3,10 @@ title: 格式化
 description: 使用 Verilog/SystemVerilog 格式化，并处理 verible 路径和参数问题。
 ---
 
-import FeatureExample from '../../../../components/FeatureExample.astro';
-import VideLab from '../../../../components/VideLab.astro';
-import codeActionsGif from '../../assets/features/code-actions.gif';
-import { formattingFiles } from '../../../../examples/dailyUse';
-
 格式化入口包括 VS Code 的 `Format Document`、`Format Selection` 和按 Enter 时的自动缩进行为。当前格式化后端只有 `verible`，会调用外部 `verible-verilog-format`；Vide 不随扩展打包这个工具。
 
 相关设置参考：[Formatter 和 Formatting](../../../advanced-guide/vscode-settings/#formatter-和-formatting)。
 
-<FeatureExample
-  image={codeActionsGif}
-  imageAlt="VS Code 中执行格式化命令的动图"
-  imageCaption="VS Code 中的格式化入口"
-  labCaption="右侧示例保留待格式化源码"
->
-  <VideLab
-    projectId="daily-formatting"
-    projectLabel="Features: Formatting"
-    entryFile="rtl/formatting_demo.sv"
-    files={formattingFiles}
-    height="100%"
-    initialActiveFile="rtl/formatting_demo.sv"
-    initialSelection="1:1-3:1"
-    title="格式化前的源文件"
-    description="这个示例保留紧凑排版，方便和 VS Code 里的 Format Document、Format Selection 入口对照。"
-  />
-</FeatureExample>
-
 ## 第一次配置 verible
 
 如果 `verible-verilog-format` 已经在 VS Code 进程可见的 `PATH` 中，可以直接使用格式化命令。如果不确定，建议写绝对路径：

docs/src/content/docs/user-guide/daily-use/language-support.mdx

@@ -5,7 +5,7 @@ description: 确认 Vide 如何识别 Verilog/SystemVerilog 文件，以及基
 
 import FeatureExample from '../../../../components/FeatureExample.astro';
 import VideLab from '../../../../components/VideLab.astro';
-import codeActionsGif from '../../assets/features/code-actions.gif';
+import completionGif from '../../assets/features/completion.gif';
 import { languageFiles } from '../../../../examples/dailyUse';
 
 VS Code 扩展会注册两类语言：
@@ -22,21 +22,21 @@ VS Code 扩展会注册两类语言：
 相关设置参考：[Semantic Tokens](../../../advanced-guide/vscode-settings/#semantic-tokens)、[Files](../../../advanced-guide/vscode-settings/#files)。
 
 <FeatureExample
-  image={codeActionsGif}
-  imageAlt="VS Code 中展示 SystemVerilog 语法高亮和语言识别的动图"
-  imageCaption="VS Code 中的语言识别入口"
-  labCaption="右侧示例展示 SystemVerilog 文件识别"
+  image={completionGif}
+  imageAlt="VS Code 中在 Verilog 文件里触发补全的动图"
+  imageCaption="VS Code 中的 Verilog 补全"
+  labCaption="右侧示例使用同一个 Verilog demo"
 >
   <VideLab
     projectId="daily-language"
-    projectLabel="Features: Language Detection"
-    entryFile="rtl/traffic_light.sv"
+    projectLabel="Features: Completion"
+    entryFile="completion.v"
     files={languageFiles}
     height="100%"
-    initialActiveFile="rtl/traffic_light.sv"
-    initialSelection="1:1-5:16"
-    title="语言识别和基础高亮"
-    description="这个示例使用 .sv 文件、typedef enum 和 always_ff，适合确认语法高亮和语言服务器接入。"
+    initialActiveFile="completion.v"
+    initialSelection="16:5-16:12"
+    title="Verilog 文件里的补全"
+    description="这个示例来自 VS Code 录屏里的 adder/top demo，适合确认 .v 文件识别、项目配置和语言服务器接入。"
   />
 </FeatureExample>